Show ApplyButton's preparing state when a command is being prepared

Author: lukemelia

packages/host/app/components/ai-assistant/apply-button/index.gts

@@ -5,7 +5,12 @@ import { eq } from '@cardstack/boxel-ui/helpers';
 import { CheckMark, Exclamation } from '@cardstack/boxel-ui/icons';
 import { setCssVar } from '@cardstack/boxel-ui/modifiers';
 
-export type ApplyButtonState = 'ready' | 'applying' | 'applied' | 'failed';
+export type ApplyButtonState =
+  | 'ready'
+  | 'applying'
+  | 'applied'
+  | 'failed'
+  | 'preparing';
 
 interface Signature {
   Element: HTMLButtonElement | HTMLDivElement;
@@ -34,6 +39,18 @@ const AiAssistantApplyButton: TemplateOnlyComponent<Signature> = <template>
         <CheckMark width='16' height='16' />
       {{else if (eq @state 'failed')}}
         <Exclamation width='16' height='16' />
+      {{else if (eq @state 'preparing')}}
+        <BoxelButton
+          @kind='secondary-dark'
+          @size='small'
+          class='apply-button'
+          tabindex='-1'
+          {{setCssVar boxel-button-text-color='var(--boxel-200)'}}
+          data-test-apply-state='preparing'
+          ...attributes
+        >
+          Working…
+        </BoxelButton>
       {{/if}}
     </div>
   {{/if}}
@@ -67,7 +84,68 @@ const AiAssistantApplyButton: TemplateOnlyComponent<Signature> = <template>
       width: 58px;
       border-radius: 100px;
     }
-    .state-indicator:not(.applying) {
+
+    .state-indicator.preparing {
+      width: 78px;
+      padding: 1px;
+      border-radius: 100px;
+    }
+    .state-indicator.preparing .apply-button {
+      border: 0;
+      min-width: 74px;
+    }
+    .state-indicator.preparing .apply-button:focus {
+      --boxel-button-color: inherit;
+      filter: none;
+      cursor: not-allowed;
+    }
+    .state-indicator.preparing::before {
+      content: '';
+      position: absolute;
+      top: -105px;
+      left: -55px;
+      width: 250px;
+      height: 250px;
+      background: conic-gradient(
+        #ffcc8f 0deg,
+        #ff3966 45deg,
+        #ff309e 90deg,
+        #aa1dc9 135deg,
+        #d7fad6 180deg,
+        #5fdfea 225deg,
+        #3d83f2 270deg,
+        #5145e8 315deg,
+        #ffcc8f 360deg
+      );
+      z-index: -1;
+      animation: spin 4s infinite linear;
+    }
+
+    .state-indicator.preparing::after {
+      content: '';
+      position: absolute;
+      top: 1px;
+      left: 1px;
+      right: 1px;
+      bottom: 1px;
+      background: var(--ai-bot-message-background-color);
+      border-radius: inherit;
+      z-index: -1;
+    }
+
+    .state-indicator.preparing {
+      position: relative;
+      display: inline-block;
+      border-radius: 3rem;
+      color: white;
+      background: var(--boxel-700);
+      border: none;
+      cursor: pointer;
+      z-index: 1;
+      overflow: hidden;
+    }
+
+    .state-indicator:not(.applying):not(.preparing) {
       width: 1.5rem;
       aspect-ratio: 1;
       border-radius: 50%;
@@ -77,6 +155,12 @@ const AiAssistantApplyButton: TemplateOnlyComponent<Signature> = <template>
       background-color: var(--boxel-error-200);
       border-color: var(--boxel-error-200);
     }
+
+    @keyframes spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
   </style>
 </template>;
 

packages/host/app/components/ai-assistant/apply-button/usage.gts

@@ -23,6 +23,9 @@ export default class AiAssistantApplyButtonUsage extends Component {
         this.state = 'failed';
         break;
       case 'failed':
+        this.state = 'preparing';
+        break;
+      case 'preparing':
         this.state = 'ready';
         break;
     }
@@ -31,7 +34,7 @@ export default class AiAssistantApplyButtonUsage extends Component {
     <FreestyleUsage @name='AiAssistant::ApplyButton'>
       <:description>
         Displays button for applying change proposed by AI Assistant. Includes
-        ready, applying, applied and failed states.
+        ready, applying, applied, failed, and preparing states.
       </:description>
       <:example>
         <div class='example-container'>
@@ -45,7 +48,7 @@ export default class AiAssistantApplyButtonUsage extends Component {
         <Args.String
           @name='state'
           @value={{this.state}}
-          @options={{array 'ready' 'applying' 'applied' 'failed'}}
+          @options={{array 'ready' 'applying' 'applied' 'failed' 'preparing'}}
           @description='Button state'
           @onInput={{fn (mut this.state)}}
         />

packages/host/app/components/matrix/preparing-room-message-command.gts

@@ -0,0 +1,28 @@
+import { TemplateOnlyComponent } from '@ember/component/template-only';
+
+import ApplyButton from '../ai-assistant/apply-button';
+
+interface Signature {
+  Element: HTMLDivElement;
+}
+
+const RoomMessageCommand: TemplateOnlyComponent<Signature> = <template>
+  <div ...attributes>
+    <div class='command-button-bar'>
+      <ApplyButton @state='preparing' data-test-command-apply='preparing' />
+    </div>
+  </div>
+
+  {{! template-lint-disable no-whitespace-for-layout  }}
+  {{! ignore the above error because ember-template-lint complains about the whitespace in the multi-line comment below }}
+  <style scoped>
+    .command-button-bar {
+      display: flex;
+      justify-content: flex-end;
+      gap: var(--boxel-sp-xs);
+      margin-top: var(--boxel-sp);
+    }
+  </style>
+</template>;
+
+export default RoomMessageCommand;