Skip to content

Commit dc953e0

Browse files
lukemelialukemelia
committedMar 18, 2025
Show ApplyButton's preparing state when a command is being prepared
1 parent 040d46f commit dc953e0

File tree

8 files changed

+414
-87
lines changed

8 files changed

+414
-87
lines changed
 

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

+86-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,12 @@ import { eq } from '@cardstack/boxel-ui/helpers';
55
import { CheckMark, Exclamation } from '@cardstack/boxel-ui/icons';
66
import { setCssVar } from '@cardstack/boxel-ui/modifiers';
77

8-
export type ApplyButtonState = 'ready' | 'applying' | 'applied' | 'failed';
8+
export type ApplyButtonState =
9+
| 'ready'
10+
| 'applying'
11+
| 'applied'
12+
| 'failed'
13+
| 'preparing';
914

1015
interface Signature {
1116
Element: HTMLButtonElement | HTMLDivElement;
@@ -34,6 +39,18 @@ const AiAssistantApplyButton: TemplateOnlyComponent<Signature> = <template>
3439
<CheckMark width='16' height='16' />
3540
{{else if (eq @state 'failed')}}
3641
<Exclamation width='16' height='16' />
42+
{{else if (eq @state 'preparing')}}
43+
<BoxelButton
44+
@kind='secondary-dark'
45+
@size='small'
46+
class='apply-button'
47+
tabindex='-1'
48+
{{setCssVar boxel-button-text-color='var(--boxel-200)'}}
49+
data-test-apply-state='preparing'
50+
...attributes
51+
>
52+
Working…
53+
</BoxelButton>
3754
{{/if}}
3855
</div>
3956
{{/if}}
@@ -67,7 +84,68 @@ const AiAssistantApplyButton: TemplateOnlyComponent<Signature> = <template>
6784
width: 58px;
6885
border-radius: 100px;
6986
}
70-
.state-indicator:not(.applying) {
87+
88+
.state-indicator.preparing {
89+
width: 78px;
90+
padding: 1px;
91+
border-radius: 100px;
92+
}
93+
.state-indicator.preparing .apply-button {
94+
border: 0;
95+
min-width: 74px;
96+
}
97+
.state-indicator.preparing .apply-button:focus {
98+
--boxel-button-color: inherit;
99+
filter: none;
100+
cursor: not-allowed;
101+
}
102+
.state-indicator.preparing::before {
103+
content: '';
104+
position: absolute;
105+
top: -105px;
106+
left: -55px;
107+
width: 250px;
108+
height: 250px;
109+
background: conic-gradient(
110+
#ffcc8f 0deg,
111+
#ff3966 45deg,
112+
#ff309e 90deg,
113+
#aa1dc9 135deg,
114+
#d7fad6 180deg,
115+
#5fdfea 225deg,
116+
#3d83f2 270deg,
117+
#5145e8 315deg,
118+
#ffcc8f 360deg
119+
);
120+
z-index: -1;
121+
animation: spin 4s infinite linear;
122+
}
123+
124+
.state-indicator.preparing::after {
125+
content: '';
126+
position: absolute;
127+
top: 1px;
128+
left: 1px;
129+
right: 1px;
130+
bottom: 1px;
131+
background: var(--ai-bot-message-background-color);
132+
border-radius: inherit;
133+
z-index: -1;
134+
}
135+
136+
.state-indicator.preparing {
137+
position: relative;
138+
display: inline-block;
139+
border-radius: 3rem;
140+
color: white;
141+
background: var(--boxel-700);
142+
border: none;
143+
cursor: pointer;
144+
z-index: 1;
145+
overflow: hidden;
146+
}
147+
148+
.state-indicator:not(.applying):not(.preparing) {
71149
width: 1.5rem;
72150
aspect-ratio: 1;
73151
border-radius: 50%;
@@ -77,6 +155,12 @@ const AiAssistantApplyButton: TemplateOnlyComponent<Signature> = <template>
77155
background-color: var(--boxel-error-200);
78156
border-color: var(--boxel-error-200);
79157
}
158+
159+
@keyframes spin {
160+
to {
161+
transform: rotate(360deg);
162+
}
163+
}
80164
</style>
81165
</template>;
82166

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

+5-2
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,9 @@ export default class AiAssistantApplyButtonUsage extends Component {
2323
this.state = 'failed';
2424
break;
2525
case 'failed':
26+
this.state = 'preparing';
27+
break;
28+
case 'preparing':
2629
this.state = 'ready';
2730
break;
2831
}
@@ -31,7 +34,7 @@ export default class AiAssistantApplyButtonUsage extends Component {
3134
<FreestyleUsage @name='AiAssistant::ApplyButton'>
3235
<:description>
3336
Displays button for applying change proposed by AI Assistant. Includes
34-
ready, applying, applied and failed states.
37+
ready, applying, applied, failed, and preparing states.
3538
</:description>
3639
<:example>
3740
<div class='example-container'>
@@ -45,7 +48,7 @@ export default class AiAssistantApplyButtonUsage extends Component {
4548
<Args.String
4649
@name='state'
4750
@value={{this.state}}
48-
@options={{array 'ready' 'applying' 'applied' 'failed'}}
51+
@options={{array 'ready' 'applying' 'applied' 'failed' 'preparing'}}
4952
@description='Button state'
5053
@onInput={{fn (mut this.state)}}
5154
/>

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

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { TemplateOnlyComponent } from '@ember/component/template-only';
2+
3+
import ApplyButton from '../ai-assistant/apply-button';
4+
5+
interface Signature {
6+
Element: HTMLDivElement;
7+
}
8+
9+
const RoomMessageCommand: TemplateOnlyComponent<Signature> = <template>
10+
<div ...attributes>
11+
<div class='command-button-bar'>
12+
<ApplyButton @state='preparing' data-test-command-apply='preparing' />
13+
</div>
14+
</div>
15+
16+
{{! template-lint-disable no-whitespace-for-layout }}
17+
{{! ignore the above error because ember-template-lint complains about the whitespace in the multi-line comment below }}
18+
<style scoped>
19+
.command-button-bar {
20+
display: flex;
21+
justify-content: flex-end;
22+
gap: var(--boxel-sp-xs);
23+
margin-top: var(--boxel-sp);
24+
}
25+
</style>
26+
</template>;
27+
28+
export default RoomMessageCommand;

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

+92-63
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,11 @@ import type { CardDef } from 'https://cardstack.com/base/card-api';
4242

4343
import ApplyButton from '../ai-assistant/apply-button';
4444
import { type ApplyButtonState } from '../ai-assistant/apply-button';
45+
4546
import Preview from '../preview';
4647

48+
import PreparingRoomMessageCommand from './preparing-room-message-command';
49+
4750
interface Signature {
4851
Element: HTMLDivElement;
4952
Args: {
@@ -53,6 +56,7 @@ interface Signature {
5356
runCommand: () => void;
5457
isError?: boolean;
5558
isPending?: boolean;
59+
isStreaming: boolean;
5660
monacoSDK: MonacoSDK;
5761
};
5862
}
@@ -193,44 +197,24 @@ export default class RoomMessageCommand extends Component<Signature> {
193197
{{#if @messageCommand.description}}
194198
<div class='command-description'>{{@messageCommand.description}}</div>
195199
{{/if}}
196-
<div
197-
class='command-button-bar'
198-
{{! In test, if we change this isIdle check to the task running locally on this component, it will fail because roomMessages get destroyed during re-indexing.
199-
Since services are long-lived so it we will not have this issue. I think this will go away when we convert our room field into a room component }}
200-
{{! TODO: Convert to non-EC async method after fixing CS-6987 }}
201-
data-test-command-card-idle={{this.commandService.run.isIdle}}
202-
>
203-
<Button
204-
class='view-code-button'
205-
{{on 'click' this.toggleViewCode}}
206-
@kind={{if this.isDisplayingCode 'primary-dark' 'secondary-dark'}}
207-
@size='extra-small'
208-
data-test-view-code-button
200+
{{#if @isStreaming}}
201+
<PreparingRoomMessageCommand />
202+
{{else}}
203+
<div
204+
class='command-button-bar'
205+
{{! In test, if we change this isIdle check to the task running locally on this component, it will fail because roomMessages get destroyed during re-indexing.
206+
Since services are long-lived so it we will not have this issue. I think this will go away when we convert our room field into a room component }}
207+
{{! TODO: Convert to non-EC async method after fixing CS-6987 }}
208+
data-test-command-card-idle={{this.commandService.run.isIdle}}
209209
>
210-
{{if this.isDisplayingCode 'Hide Code' 'View Code'}}
211-
</Button>
212-
<ApplyButton
213-
@state={{this.applyButtonState}}
214-
{{on 'click' @runCommand}}
215-
data-test-command-apply={{this.applyButtonState}}
216-
/>
217-
</div>
218-
{{#if this.isDisplayingCode}}
219-
<div class='preview-code'>
220210
<Button
221-
class='code-copy-button'
222-
@kind='text-only'
211+
class='view-code-button'
212+
{{on 'click' this.toggleViewCode}}
213+
@kind={{if this.isDisplayingCode 'primary-dark' 'secondary-dark'}}
223214
@size='extra-small'
224-
{{on 'click' this.copyToClipboard}}
225-
data-test-copy-code
215+
data-test-view-code-button
226216
>
227-
<CopyIcon
228-
width='16'
229-
height='16'
230-
role='presentation'
231-
aria-hidden='true'
232-
/>
233-
<span class='copy-text'>Copy to clipboard</span>
217+
{{if this.isDisplayingCode 'Hide Code' 'View Code'}}
234218
</Button>
235219
<div
236220
class='monaco-container'
@@ -253,37 +237,82 @@ export default class RoomMessageCommand extends Component<Signature> {
253237
<span class='failed-command-text'>
254238
{{this.failedCommandState.message}}
255239
</span>
256-
<Button
240+
<ApplyButton
241+
@state={{this.applyButtonState}}
257242
{{on 'click' @runCommand}}
258-
class='retry-button'
259-
@size='small'
260-
@kind='secondary-dark'
261-
data-test-retry-command-button
262-
>
263-
Retry
264-
</Button>
265-
</div>
266-
{{/if}}
267-
{{#if this.commandResultCard.card}}
268-
<CardContainer
269-
@displayBoundaries={{false}}
270-
class='command-result-card-preview'
271-
data-test-command-result-container
272-
>
273-
<CardHeader
274-
@cardTypeDisplayName={{this.headerTitle}}
275-
@cardTypeIcon={{cardTypeIcon this.commandResultCard.card}}
276-
@moreOptionsMenuItems={{this.moreOptionsMenuItems}}
277-
class='header'
278-
data-test-command-result-header
279-
/>
280-
<Preview
281-
@card={{this.commandResultCard.card}}
282-
@format='embedded'
283-
@displayContainer={{false}}
284-
data-test-boxel-command-result
243+
data-test-command-apply={{this.applyButtonState}}
285244
/>
286-
</CardContainer>
245+
</div>
246+
{{#if this.isDisplayingCode}}
247+
<div class='preview-code'>
248+
<Button
249+
class='code-copy-button'
250+
@kind='text-only'
251+
@size='extra-small'
252+
{{on 'click' this.copyToClipboard}}
253+
data-test-copy-code
254+
>
255+
<CopyIcon
256+
width='16'
257+
height='16'
258+
role='presentation'
259+
aria-hidden='true'
260+
/>
261+
<span class='copy-text'>Copy to clipboard</span>
262+
</Button>
263+
<div
264+
class='monaco-container'
265+
{{! this.scrollBottomIntoView }}
266+
{{monacoModifier
267+
content=this.previewCommandCode
268+
contentChanged=undefined
269+
monacoSDK=@monacoSDK
270+
language='json'
271+
readOnly=true
272+
editorDisplayOptions=this.editorDisplayOptions
273+
}}
274+
data-test-editor
275+
data-test-percy-hide
276+
/>
277+
</div>
278+
{{/if}}
279+
{{#if this.failedCommandState}}
280+
<div class='failed-command-result'>
281+
<span class='failed-command-text'>
282+
{{this.failedCommandState.message}}
283+
</span>
284+
<Button
285+
{{on 'click' @runCommand}}
286+
class='retry-button'
287+
@size='small'
288+
@kind='secondary-dark'
289+
data-test-retry-command-button
290+
>
291+
Retry
292+
</Button>
293+
</div>
294+
{{/if}}
295+
{{#if this.commandResultCard.card}}
296+
<CardContainer
297+
@displayBoundaries={{false}}
298+
class='command-result-card-preview'
299+
data-test-command-result-container
300+
>
301+
<CardHeader
302+
@cardTypeDisplayName={{this.headerTitle}}
303+
@cardTypeIcon={{cardTypeIcon this.commandResultCard.card}}
304+
@moreOptionsMenuItems={{this.moreOptionsMenuItems}}
305+
class='header'
306+
data-test-command-result-header
307+
/>
308+
<Preview
309+
@card={{this.commandResultCard.card}}
310+
@format='embedded'
311+
@displayContainer={{false}}
312+
data-test-boxel-command-result
313+
/>
314+
</CardContainer>
315+
{{/if}}
287316
{{/if}}
288317
</div>
289318

0 commit comments

Comments
 (0)
Failed to load comments.