@classic-homes/agent-chat 0.8.0 → 0.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/components/AgentChat.svelte +15 -3
  2. package/dist/components/AgentChat.svelte.d.ts.map +1 -1
  3. package/dist/components/Composer.svelte +2 -3
  4. package/dist/components/MessageList.svelte +37 -28
  5. package/dist/components/MessageList.svelte.d.ts.map +1 -1
  6. package/dist/components/UserMessage.svelte +14 -4
  7. package/dist/components/UserMessage.svelte.d.ts.map +1 -1
  8. package/dist/components/a11y.svelte.test.d.ts +2 -0
  9. package/dist/components/a11y.svelte.test.d.ts.map +1 -0
  10. package/dist/components/a11y.svelte.test.js +172 -0
  11. package/dist/components/composer.svelte.test.js +2 -2
  12. package/package.json +4 -3
package/dist/components/AgentChat.svelte CHANGED
@@ -18,6 +18,7 @@
18
18
  Sheet,
19
19
  Skeleton,
20
20
  } from '@classic-homes/theme-svelte';
21
+ import { onMount } from 'svelte';
21
22
  import { MediaQuery } from 'svelte/reactivity';
22
23
  import { releaseStuckBodyLock } from '../body-lock.js';
23
24
  import type { ComposerPrompt } from '../composer-prompts.js';
@@ -197,6 +198,17 @@
197
198
  !session.loadError &&
198
199
  session.messages.length === 0),
199
200
  );
201
+ // A new chat starts in the composer.
202
+ onMount(() => {
203
+ if (!conversationId) composer?.focus();
204
+ });
205
+ /** Run a turn started from a control that goes away (suggestion, Regenerate, Edit), then put
206
+ * the keyboard back in the composer instead of on the page body. */
207
+ function thenFocus(run: Promise<void>): void {
208
+ composer?.focus();
209
+ void run.finally(() => composer?.focus());
210
+ }
211
+
200
212
  function reload(): void {
201
213
  if (conversationId) void session.load(conversationId);
202
214
  }
@@ -249,7 +261,7 @@
249
261
  {suggestions}
250
262
  compact={variant === 'panel'}
251
263
  disabled={session.status !== 'idle'}
252
- onselect={(text) => void send(text)}
264
+ onselect={(text) => thenFocus(send(text))}
253
265
  />
254
266
  {/if}
255
267
  {/snippet}
@@ -290,8 +302,8 @@
290
302
  ontool={(name, params) => ontoolrequest?.(name, params)}
291
303
  {onnotify}
292
304
  onretry={retry}
293
- onregenerate={(requestId) => void session.regenerate(requestId)}
294
- onedit={(requestId, text) => void session.edit(requestId, text)}
305
+ onregenerate={(requestId) => thenFocus(session.regenerate(requestId))}
306
+ onedit={(requestId, text) => thenFocus(session.edit(requestId, text))}
295
307
  onrate={session.conversationId
296
308
  ? (requestId, rating, comment) =>
297
309
  session
package/dist/components/AgentChat.svelte.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"AgentChat.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/AgentChat.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,KAAK,EACR,QAAQ,EACR,YAAY,EACZ,UAAU,EACV,eAAe,EAEhB,MAAM,gCAAgC,CAAC;AAC1C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAalE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAE7D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAQrD,UAAU,KAAK;IACb,MAAM,EAAE,cAAc,CAAC;IACvB,oEAAoE;IACpE,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,+EAA+E;IAC/E,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,yEAAyE;IACzE,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,EAAE,CAAC;IACxB,8FAA8F;IAC9F,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC1C,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,eAAe,GAAG,IAAI,GAAG,SAAS,CAAC;IACtD,qBAAqB,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,gFAAgF;IAChF,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE;QACjB,SAAS,EAAE,MAAM,CAAC;QAClB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;QAC9B,MAAM,EAAE,MAAM,CAAC;KAChB,KAAK,IAAI,CAAC;IACX,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,iGAAiG;IACjG,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IAC7E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wDAAwD;IACxD,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3B,oFAAoF;IACpF,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,6EAA6E;IAC7E,WAAW,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAClC,mDAAmD;IACnD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8CAA8C;IAC9C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,6FAA6F;IAC7F,MAAM,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC,CAAC;QAAE,KAAK,EAAE,QAAQ,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;IAC7E,OAAO,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;IACnC,+DAA+D;IAC/D,KAAK,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAsOH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
1
+ {"version":3,"file":"AgentChat.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/AgentChat.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,KAAK,EACR,QAAQ,EACR,YAAY,EACZ,UAAU,EACV,eAAe,EAEhB,MAAM,gCAAgC,CAAC;AAC1C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAclE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAE7D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAQrD,UAAU,KAAK;IACb,MAAM,EAAE,cAAc,CAAC;IACvB,oEAAoE;IACpE,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,+EAA+E;IAC/E,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,yEAAyE;IACzE,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,EAAE,CAAC;IACxB,8FAA8F;IAC9F,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC1C,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,eAAe,GAAG,IAAI,GAAG,SAAS,CAAC;IACtD,qBAAqB,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,gFAAgF;IAChF,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE;QACjB,SAAS,EAAE,MAAM,CAAC;QAClB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;QAC9B,MAAM,EAAE,MAAM,CAAC;KAChB,KAAK,IAAI,CAAC;IACX,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,iGAAiG;IACjG,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IAC7E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wDAAwD;IACxD,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3B,oFAAoF;IACpF,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,6EAA6E;IAC7E,WAAW,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAClC,mDAAmD;IACnD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8CAA8C;IAC9C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,6FAA6F;IAC7F,MAAM,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC,CAAC;QAAE,KAAK,EAAE,QAAQ,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;IAC7E,OAAO,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;IACnC,+DAA+D;IAC/D,KAAK,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAkPH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
package/dist/components/Composer.svelte CHANGED
@@ -251,9 +251,7 @@
251
251
  {placeholder}
252
252
  aria-label="Message"
253
253
  maxlength={LIMITS.messageChars}
254
- role={prompts?.length ? 'combobox' : undefined}
255
254
  aria-autocomplete={prompts?.length ? 'list' : undefined}
256
- aria-expanded={prompts?.length ? menuOpen : undefined}
257
255
  aria-controls={menuOpen ? `${uid}-prompts` : undefined}
258
256
  aria-activedescendant={menuOpen ? `${uid}-prompt-${active}` : undefined}
259
257
  {disabled}
@@ -338,7 +336,8 @@
338
336
  >
339
337
  <ul id={`${uid}-prompts`} role="listbox" aria-label="Saved prompts" class="grid gap-0.5">
340
338
  {#each matches as prompt, i (prompt.id)}
341
- <!-- Keyboard choice happens in the textarea (combobox + aria-activedescendant). -->
339
+ <!-- Keyboard choice happens in the textarea (textbox + aria-activedescendant; a textarea
340
+ may not take role=combobox). -->
342
341
  <!-- svelte-ignore a11y_click_events_have_key_events -->
343
342
  <li
344
343
  id={`${uid}-prompt-${i}`}
package/dist/components/MessageList.svelte CHANGED
@@ -113,6 +113,7 @@
113
113
  });
114
114
  });
115
115
 
116
+ const RENDER_TAIL = 6;
116
117
  const separators = $derived(daySeparators(messages));
117
118
  // Only show day labels when the transcript spans more than one day.
118
119
  const multiDay = $derived(separators.size > 1);
@@ -150,35 +151,43 @@
150
151
  <span class="h-px flex-1 bg-border"></span>
151
152
  </div>
152
153
  {/if}
153
- <MessageItem
154
- {message}
155
- last={i === messages.length - 1}
156
- streaming={streaming && i === messages.length - 1 && message.role === 'assistant'}
157
- {sandboxOrigin}
158
- {fileUrl}
159
- {toolLabels}
160
- {onnavigate}
161
- {onopenartifact}
162
- {onprompt}
163
- {ontool}
164
- {onnotify}
165
- onretry={i === messages.length - 1 ? onretry : undefined}
166
- oncontinue={i === messages.length - 1 && !streaming ? oncontinue : undefined}
167
- onregenerate={latest &&
168
- onregenerate &&
169
- i === messages.length - 1 &&
170
- message.role === 'assistant' &&
171
- message.status === 'done'
172
- ? () => onregenerate(latest)
154
+ <!-- Long transcripts: let the browser skip layout and paint of turns far above the
155
+ fold (the last few always render, they change while streaming). -->
156
+ <div
157
+ class={i < messages.length - RENDER_TAIL
158
+ ? '[contain-intrinsic-size:auto_12rem] [content-visibility:auto]'
173
159
  : undefined}
174
- onrate={onrate && message.role === 'assistant'
175
- ? (rating: TurnRating | null, comment?: string) =>
176
- onrate(message.requestId, rating, comment)
177
- : undefined}
178
- onedit={latest && onedit && i === messages.length - 2
179
- ? (text: string) => onedit(latest, text)
180
- : undefined}
181
- />
160
+ >
161
+ <MessageItem
162
+ {message}
163
+ last={i === messages.length - 1}
164
+ streaming={streaming && i === messages.length - 1 && message.role === 'assistant'}
165
+ {sandboxOrigin}
166
+ {fileUrl}
167
+ {toolLabels}
168
+ {onnavigate}
169
+ {onopenartifact}
170
+ {onprompt}
171
+ {ontool}
172
+ {onnotify}
173
+ onretry={i === messages.length - 1 ? onretry : undefined}
174
+ oncontinue={i === messages.length - 1 && !streaming ? oncontinue : undefined}
175
+ onregenerate={latest &&
176
+ onregenerate &&
177
+ i === messages.length - 1 &&
178
+ message.role === 'assistant' &&
179
+ message.status === 'done'
180
+ ? () => onregenerate(latest)
181
+ : undefined}
182
+ onrate={onrate && message.role === 'assistant'
183
+ ? (rating: TurnRating | null, comment?: string) =>
184
+ onrate(message.requestId, rating, comment)
185
+ : undefined}
186
+ onedit={latest && onedit && i === messages.length - 2
187
+ ? (text: string) => onedit(latest, text)
188
+ : undefined}
189
+ />
190
+ </div>
182
191
  {/each}
183
192
  </div>
184
193
  {/if}
package/dist/components/MessageList.svelte.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"MessageList.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/MessageList.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAK/C,UAAU,KAAK;IACb,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IACtE,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,uDAAuD;IACvD,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,yCAAyC;IACzC,MAAM,CAAC,EAAE,CACP,SAAS,EAAE,MAAM,EACjB,MAAM,EAAE,UAAU,GAAG,IAAI,EACzB,OAAO,CAAC,EAAE,MAAM,KACb,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1B,mDAAmD;IACnD,MAAM,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,KAAK,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;CAClC;AAkJH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
1
+ {"version":3,"file":"MessageList.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/MessageList.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAK/C,UAAU,KAAK;IACb,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IACtE,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,uDAAuD;IACvD,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,yCAAyC;IACzC,MAAM,CAAC,EAAE,CACP,SAAS,EAAE,MAAM,EACjB,MAAM,EAAE,UAAU,GAAG,IAAI,EACzB,OAAO,CAAC,EAAE,MAAM,KACb,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1B,mDAAmD;IACnD,MAAM,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,KAAK,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;CAClC;AAwJH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
package/dist/components/UserMessage.svelte CHANGED
@@ -22,6 +22,13 @@
22
22
  let editing = $state(false);
23
23
  let draft = $state('');
24
24
  let field = $state<HTMLTextAreaElement | null>(null);
25
+ let root = $state<HTMLDivElement | null>(null);
26
+ /** Leaving the editor without sending returns focus to its Edit button. */
27
+ async function cancel(): Promise<void> {
28
+ editing = false;
29
+ await tick();
30
+ root?.querySelector<HTMLButtonElement>('button[aria-label="Edit message"]')?.focus();
31
+ }
25
32
  async function startEdit(): Promise<void> {
26
33
  draft = message.text;
27
34
  editing = true;
@@ -39,7 +46,7 @@
39
46
  if (event.isComposing || event.keyCode === 229) return;
40
47
  if (event.key === 'Escape') {
41
48
  event.preventDefault();
42
- editing = false;
49
+ void cancel();
43
50
  } else if (event.key === 'Enter' && !event.shiftKey) {
44
51
  event.preventDefault();
45
52
  save();
@@ -47,7 +54,11 @@
47
54
  }
48
55
  </script>
49
56
 
50
- <div class="group/message flex flex-col items-end gap-1 px-4 py-2" data-role="user">
57
+ <div
58
+ bind:this={root}
59
+ class="group/message flex flex-col items-end gap-1 px-4 py-2"
60
+ data-role="user"
61
+ >
51
62
  {#if message.attachments.length || message.contextLabel}
52
63
  <ul class="flex max-w-[85%] flex-wrap justify-end gap-1.5" aria-label="Attached">
53
64
  {#if message.contextLabel}
@@ -90,8 +101,7 @@
90
101
  {onkeydown}
91
102
  />
92
103
  <div class="flex justify-end gap-2">
93
- <Button type="button" variant="ghost" size="sm" onclick={() => (editing = false)}
94
- >Cancel</Button
104
+ <Button type="button" variant="ghost" size="sm" onclick={() => void cancel()}>Cancel</Button
95
105
  >
96
106
  <Button type="submit" size="sm" disabled={!draft.trim()}>Send</Button>
97
107
  </div>
package/dist/components/UserMessage.svelte.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"UserMessage.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/UserMessage.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAK/C,UAAU,KAAK;IACb,OAAO,EAAE,WAAW,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,+DAA+D;IAC/D,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AA+EH;;;GAGG;AACH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
1
+ {"version":3,"file":"UserMessage.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/UserMessage.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAK/C,UAAU,KAAK;IACb,OAAO,EAAE,WAAW,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,+DAA+D;IAC/D,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AAsFH;;;GAGG;AACH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
package/dist/components/a11y.svelte.test.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=a11y.svelte.test.d.ts.map
package/dist/components/a11y.svelte.test.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"a11y.svelte.test.d.ts","sourceRoot":"","sources":["../../src/lib/components/a11y.svelte.test.ts"],"names":[],"mappings":""}
package/dist/components/a11y.svelte.test.js ADDED
@@ -0,0 +1,172 @@
1
+ import { afterEach, describe, expect, it, vi } from 'vitest';
2
+ import { cleanup, render, screen, waitFor } from '@testing-library/svelte';
3
+ import axe from 'axe-core';
4
+ import userEvent from '@testing-library/user-event';
5
+ import AgentChat from './AgentChat.svelte';
6
+ import ConversationSidebar from './ConversationSidebar.svelte';
7
+ afterEach(() => {
8
+ cleanup();
9
+ document.body.removeAttribute('style');
10
+ });
11
+ /** axe in jsdom: no layout, so colour contrast is checked separately (tokens), not here. */
12
+ async function violations(root = document.body) {
13
+ const result = await axe.run(root, {
14
+ rules: { 'color-contrast': { enabled: false }, region: { enabled: false } },
15
+ });
16
+ return result.violations.map((v) => `${v.id}: ${v.nodes.map((n) => n.html).join(' | ')}`);
17
+ }
18
+ const scope = { agent: 'classic-agent', runId: 'run-1' };
19
+ function fakeClient() {
20
+ return {
21
+ fileUrl: (id) => `#${id}`,
22
+ uploadFile: vi.fn(),
23
+ cancel: vi.fn(),
24
+ resumeTurn: vi.fn(),
25
+ sendFeedback: vi.fn().mockResolvedValue(undefined),
26
+ getConversation: vi.fn(),
27
+ streamChat: vi.fn(async (req, opts) => {
28
+ [
29
+ { type: 'start', conversationId: 'c-1', mode: 'live' },
30
+ { type: 'tool_call', callId: 't1', name: 'hotsheet/list_communities', argsPreview: '{}' },
31
+ { type: 'tool_result', callId: 't1', status: 'ok', durationMs: 640, summary: '24 rows' },
32
+ { type: 'delta', text: '| A | B |\n|---|---|\n| 1 | 2 |\n\n```ts\nconst a = 1;\n```\n' },
33
+ {
34
+ type: 'artifact',
35
+ ...scope,
36
+ artifactId: 'a1',
37
+ op: 'open',
38
+ mediaType: 'text/markdown',
39
+ title: 'Memo',
40
+ },
41
+ { type: 'artifact', ...scope, artifactId: 'a1', op: 'delta', text: '# Memo' },
42
+ { type: 'artifact', ...scope, artifactId: 'a1', op: 'close' },
43
+ { type: 'done', finishReason: 'stop' },
44
+ ].forEach((e, seq) => opts.onEvent({ requestId: req.requestId, seq, ...e }));
45
+ return { kind: 'done' };
46
+ }),
47
+ };
48
+ }
49
+ const base = { sandboxOrigin: 'https://frame.test' };
50
+ describe('accessibility (axe)', () => {
51
+ it('has no violations on the welcome screen with the agent picker', async () => {
52
+ render(AgentChat, {
53
+ props: {
54
+ ...base,
55
+ client: fakeClient(),
56
+ userName: 'Pat',
57
+ suggestions: [{ label: 'Open lots', description: 'By community', icon: 'home' }],
58
+ agents: [
59
+ { key: 'classic-agent', name: 'Classic Agent' },
60
+ { key: 'elevation-studio', name: 'Elevation Studio' },
61
+ ],
62
+ prompts: [{ id: 'p1', label: 'Weekly recap', text: 'Recap' }],
63
+ },
64
+ });
65
+ expect(await violations()).toEqual([]);
66
+ // With the saved-prompt menu open.
67
+ await userEvent.type(screen.getByRole('textbox', { name: 'Message' }), '/');
68
+ await screen.findByRole('listbox', { name: 'Saved prompts' });
69
+ expect(await violations()).toEqual([]);
70
+ });
71
+ it('has no violations on a failed turn with Try again, and while editing', async () => {
72
+ const user = userEvent.setup();
73
+ const client = fakeClient();
74
+ client.streamChat.mockImplementationOnce(async (req, opts) => {
75
+ [
76
+ { type: 'start', conversationId: 'c-1', mode: 'live' },
77
+ { type: 'error', code: 'upstream_error', message: 'Model failed.', retryable: true },
78
+ ].forEach((e, seq) => opts.onEvent({ requestId: req.requestId, seq, ...e }));
79
+ return { kind: 'done' };
80
+ });
81
+ render(AgentChat, { props: { ...base, client: client } });
82
+ await user.type(screen.getByRole('textbox', { name: 'Message' }), 'hi{Enter}');
83
+ await screen.findByRole('button', { name: /Try again/ });
84
+ expect(await violations()).toEqual([]);
85
+ await user.click(screen.getByRole('button', { name: /Try again/ }));
86
+ // The retried answer opens its artifact in a (modal) sheet; close it first.
87
+ await screen.findByRole('dialog', { name: 'Memo' });
88
+ await user.keyboard('{Escape}');
89
+ await waitFor(() => expect(document.body.style.pointerEvents).not.toBe('none'));
90
+ await user.click(await screen.findByRole('button', { name: 'Edit message' }));
91
+ await screen.findByRole('textbox', { name: 'Edited message' });
92
+ expect(await violations()).toEqual([]);
93
+ });
94
+ it('has no violations on a finished turn with tools, code, a table and an artifact', async () => {
95
+ const user = userEvent.setup();
96
+ render(AgentChat, { props: { ...base, client: fakeClient(), variant: 'panel' } });
97
+ await user.type(screen.getByRole('textbox', { name: 'Message' }), 'hi{Enter}');
98
+ await screen.findByRole('button', { name: /Open Memo|Memo/ });
99
+ // The artifact opened in a sheet; close it to check the transcript itself.
100
+ await user.keyboard('{Escape}');
101
+ expect(await violations()).toEqual([]);
102
+ });
103
+ it('has no violations in the conversation rail', async () => {
104
+ const now = new Date().toISOString();
105
+ render(ConversationSidebar, {
106
+ props: {
107
+ conversations: [
108
+ {
109
+ conversationId: 'c1',
110
+ agent: 'classic-agent',
111
+ title: 'Lot 12',
112
+ createdAt: now,
113
+ updatedAt: now,
114
+ },
115
+ {
116
+ conversationId: 'c2',
117
+ agent: 'classic-agent',
118
+ title: 'Running',
119
+ createdAt: now,
120
+ updatedAt: now,
121
+ activeRequestId: '11111111-1111-4111-8111-111111111111',
122
+ },
123
+ ],
124
+ selectedId: 'c1',
125
+ onrename: vi.fn(),
126
+ ondelete: vi.fn(),
127
+ },
128
+ });
129
+ expect(await violations()).toEqual([]);
130
+ });
131
+ });
132
+ /** Answers "ok" with no artifact (an artifact opens a modal sheet, which takes focus). */
133
+ function plainAnswers(client) {
134
+ client.streamChat.mockImplementation(async (req, opts) => {
135
+ [
136
+ { type: 'start', conversationId: 'c-1', mode: 'live' },
137
+ { type: 'delta', text: 'ok' },
138
+ { type: 'done', finishReason: 'stop' },
139
+ ].forEach((e, seq) => opts.onEvent({ requestId: req.requestId, seq, ...e }));
140
+ return { kind: 'done' };
141
+ });
142
+ }
143
+ describe('focus', () => {
144
+ it('starts a new chat in the composer and returns there after a suggestion', async () => {
145
+ const user = userEvent.setup();
146
+ const client = fakeClient();
147
+ plainAnswers(client);
148
+ render(AgentChat, {
149
+ props: { ...base, client: client, suggestions: [{ label: 'Open lots' }] },
150
+ });
151
+ const box = screen.getByRole('textbox', { name: 'Message' });
152
+ await waitFor(() => expect(document.activeElement).toBe(box));
153
+ await user.click(screen.getByRole('button', { name: 'Open lots' }));
154
+ await waitFor(() => expect(document.activeElement).toBe(box));
155
+ });
156
+ it('returns to the Edit button when an edit is cancelled', async () => {
157
+ const user = userEvent.setup();
158
+ const client = fakeClient();
159
+ plainAnswers(client);
160
+ render(AgentChat, { props: { ...base, client: client } });
161
+ await user.type(screen.getByRole('textbox', { name: 'Message' }), 'hi{Enter}');
162
+ await user.click(await screen.findByRole('button', { name: 'Edit message' }));
163
+ await user.keyboard('{Escape}');
164
+ await waitFor(() => expect(document.activeElement).toBe(screen.getByRole('button', { name: 'Edit message' })));
165
+ });
166
+ it('does not steal focus when opening an existing conversation', () => {
167
+ const client = fakeClient();
168
+ client.getConversation.mockReturnValue(new Promise(() => { }));
169
+ render(AgentChat, { props: { ...base, client: client, conversationId: 'c-9' } });
170
+ expect(document.activeElement).toBe(document.body);
171
+ });
172
+ });
package/dist/components/composer.svelte.test.js CHANGED
@@ -59,7 +59,7 @@ describe('Composer', () => {
59
59
  it('inserts a saved prompt from the / menu with the keyboard', async () => {
60
60
  const user = userEvent.setup();
61
61
  render(Composer, { props: { prompts } });
62
- const box = screen.getByRole('combobox', { name: 'Message' });
62
+ const box = screen.getByRole('textbox', { name: 'Message' });
63
63
  await user.type(box, '/lot');
64
64
  const listbox = await screen.findByRole('listbox', { name: 'Saved prompts' });
65
65
  expect(listbox.textContent).toContain('Lot report');
@@ -70,7 +70,7 @@ describe('Composer', () => {
70
70
  it('closes the menu on Escape and keeps the draft', async () => {
71
71
  const user = userEvent.setup();
72
72
  render(Composer, { props: { prompts } });
73
- const box = screen.getByRole('combobox', { name: 'Message' });
73
+ const box = screen.getByRole('textbox', { name: 'Message' });
74
74
  await user.type(box, '/');
75
75
  await screen.findByRole('listbox');
76
76
  await user.keyboard('{ArrowDown}{Escape}');
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@classic-homes/agent-chat",
3
- "version": "0.8.0",
3
+ "version": "0.9.0",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "description": "Svelte 5 chat UI for Classic Agent: session state, message list, composer, tool timeline, artifacts and MCP-UI sandbox frames. Consumed by the Classic App.",
@@ -17,8 +17,8 @@
17
17
  "dist"
18
18
  ],
19
19
  "dependencies": {
20
- "@classic-homes/agent-client": "0.8.0",
21
- "@classic-homes/agent-contracts": "0.8.0",
20
+ "@classic-homes/agent-client": "0.9.0",
21
+ "@classic-homes/agent-contracts": "0.9.0",
22
22
  "dompurify": "3.4.17"
23
23
  },
24
24
  "peerDependencies": {
@@ -31,6 +31,7 @@
31
31
  "@sveltejs/vite-plugin-svelte": "7.3.1",
32
32
  "@testing-library/svelte": "5.4.2",
33
33
  "@testing-library/user-event": "14.6.1",
34
+ "axe-core": "4.13.0",
34
35
  "jsdom": "30.1.3",
35
36
  "svelte": "5.57.3",
36
37
  "svelte-check": "4.7.7",