@classic-homes/agent-chat 0.3.0 → 0.4.1

package/dist/components/Composer.svelte

@@ -1,8 +1,16 @@
+<!--
+  @component
+  The message box: an autosizing textarea in a card with attach, the host's context chip and
+  Send/Stop. Files can also be dropped on it or pasted. Typing `/` at the start opens the saved
+  prompt menu when the host passes `prompts`.
+-->
 <script lang="ts">
-  import { Button, Icon, Textarea } from '@classic-homes/theme-svelte';
+  import { cn, Button, Icon, Kbd, Popover, Spinner, Textarea } from '@classic-homes/theme-svelte';
   import type { FileRef } from '@classic-homes/agent-contracts';
   import { LIMITS } from '@classic-homes/agent-contracts';
-  import { composerKeyAction } from '../composer-keys.js';
+  import { composerKeyAction, promptMenuKeyAction } from '../composer-keys.js';
+  import { filterPrompts, promptQuery, type ComposerPrompt } from '../composer-prompts.js';
+  import { fileIcon, formatBytes } from '../message-format.js';
 
   interface Props {
     disabled?: boolean;
@@ -12,6 +20,8 @@
     placeholder?: string;
     /** Upload a file; the composer shows it as pending until the message is sent. */
     upload?: (file: File) => Promise<FileRef>;
+    /** Saved prompts for the `/` menu; the menu is off without them. */
+    prompts?: ComposerPrompt[];
     onsend?: (text: string) => void;
     oncancel?: () => void;
     onremovefile?: (fileId: string) => void;
@@ -25,28 +35,76 @@
     files = $bindable([]),
     placeholder = 'Ask Classic Agent…',
     upload,
+    prompts,
     onsend,
     oncancel,
     onremovefile,
     context,
   }: Props = $props();
 
+  const uid = $props.id();
   let textarea = $state<HTMLTextAreaElement | null>(null);
+  let card: HTMLDivElement | undefined = $state();
   let fileInput: HTMLInputElement | undefined = $state();
-  let uploading = $state(0);
+  /** Files being uploaded right now, shown as chips with a spinner. */
+  let pending = $state<{ key: string; name: string; bytes: number; mimeType: string }[]>([]);
   let uploadError = $state<string | undefined>();
+  let dragging = $state(false);
+  let dragDepth = 0;
 
   export function focus(): void {
     textarea?.focus({ preventScroll: true });
   }
 
+  // `/` prompt menu
+  const query = $derived(prompts?.length ? promptQuery(value) : null);
+  const matches = $derived(query === null ? [] : filterPrompts(prompts ?? [], query));
+  let dismissedFor = $state<string | null>(null);
+  const menuOpen = $derived(query !== null && matches.length > 0 && dismissedFor !== value);
+  let active = $state(0);
+  let loadingPrompt = $state(false);
+  $effect(() => {
+    void query;
+    active = 0;
+  });
+  async function choose(prompt: ComposerPrompt | undefined): Promise<void> {
+    if (!prompt) return;
+    if (typeof prompt.text === 'string') value = prompt.text;
+    else {
+      loadingPrompt = true;
+      try {
+        value = await prompt.text();
+      } catch {
+        uploadError = `Could not load “${prompt.label}”`;
+      } finally {
+        loadingPrompt = false;
+      }
+    }
+    focus();
+  }
+
+  const chars = $derived(value.length);
+  const showCount = $derived(chars > LIMITS.messageChars * 0.8);
+  const busy = $derived(pending.length > 0 || loadingPrompt);
+
   function submit(): void {
     const text = value.trim();
-    if (!text || disabled || streaming || uploading > 0) return;
+    if (!text || disabled || streaming || busy) return;
     value = '';
     onsend?.(text);
   }
   function onkeydown(event: KeyboardEvent): void {
+    if (menuOpen) {
+      const menu = promptMenuKeyAction(event);
+      if (menu) {
+        event.preventDefault();
+        if (menu === 'next') active = (active + 1) % matches.length;
+        else if (menu === 'previous') active = (active - 1 + matches.length) % matches.length;
+        else if (menu === 'choose') void choose(matches[active]);
+        else dismissedFor = value;
+        return;
+      }
+    }
     const action = composerKeyAction(event, streaming);
     if (action === 'send') {
       event.preventDefault();
@@ -56,31 +114,70 @@
       oncancel?.();
     }
   }
-  async function onfiles(event: Event): Promise<void> {
-    const input = event.currentTarget as HTMLInputElement;
-    const chosen = [...(input.files ?? [])];
-    input.value = '';
+
+  async function addFiles(chosen: File[]): Promise<void> {
     if (!upload || chosen.length === 0) return;
     uploadError = undefined;
     for (const file of chosen) {
+      if (files.length + pending.length >= LIMITS.requestFiles) {
+        uploadError = `Attach up to ${LIMITS.requestFiles} files per message`;
+        break;
+      }
       if (file.size > LIMITS.fileBytes) {
         uploadError = `${file.name} is larger than ${Math.round(LIMITS.fileBytes / 1048576)} MB`;
         continue;
       }
-      uploading += 1;
+      const key = `${file.name}-${file.size}-${Math.random().toString(36).slice(2)}`;
+      pending = [...pending, { key, name: file.name, bytes: file.size, mimeType: file.type }];
       try {
         files = [...files, await upload(file)];
       } catch (err) {
         uploadError = err instanceof Error ? err.message : `Could not upload ${file.name}`;
       } finally {
-        uploading -= 1;
+        pending = pending.filter((p) => p.key !== key);
       }
     }
   }
+  function onfiles(event: Event): void {
+    const input = event.currentTarget as HTMLInputElement;
+    const chosen = [...(input.files ?? [])];
+    input.value = '';
+    void addFiles(chosen);
+  }
+  function onpaste(event: ClipboardEvent): void {
+    const pasted = [...(event.clipboardData?.files ?? [])];
+    if (!upload || pasted.length === 0) return;
+    // Pasting a screenshot or a copied file attaches it; plain text pastes as usual.
+    event.preventDefault();
+    void addFiles(pasted);
+  }
+  const hasFiles = (event: DragEvent) => event.dataTransfer?.types.includes('Files') ?? false;
+  function ondragenter(event: DragEvent): void {
+    if (!upload || disabled || !hasFiles(event)) return;
+    event.preventDefault();
+    dragDepth += 1;
+    dragging = true;
+  }
+  function ondragover(event: DragEvent): void {
+    if (!upload || disabled || !hasFiles(event)) return;
+    event.preventDefault();
+    if (event.dataTransfer) event.dataTransfer.dropEffect = 'copy';
+  }
+  function ondragleave(): void {
+    dragDepth = Math.max(0, dragDepth - 1);
+    if (dragDepth === 0) dragging = false;
+  }
+  function ondrop(event: DragEvent): void {
+    if (!upload || disabled || !hasFiles(event)) return;
+    event.preventDefault();
+    dragDepth = 0;
+    dragging = false;
+    void addFiles([...(event.dataTransfer?.files ?? [])]);
+  }
 </script>
 
 <form
-  class="bg-background px-4 pb-[max(0.75rem,env(safe-area-inset-bottom))] pt-2"
+  class="group/composer bg-background px-4 pb-[max(0.75rem,env(safe-area-inset-bottom))] pt-2"
   onsubmit={(e) => {
     e.preventDefault();
     submit();
@@ -88,29 +185,58 @@
   aria-label="Send a message"
 >
   <div
-    class="mx-auto w-full max-w-3xl rounded-xl border border-input bg-background shadow-sm transition-shadow focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/20"
+    bind:this={card}
+    class={cn(
+      'relative mx-auto w-full max-w-3xl rounded-xl border border-input bg-background shadow-sm transition-shadow focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/20',
+      dragging && 'border-primary ring-2 ring-primary/30',
+    )}
+    role="group"
+    aria-label="Message composer"
+    {ondragenter}
+    {ondragover}
+    {ondragleave}
+    {ondrop}
   >
-    {#if files.length || uploadError}
-      <div class="flex flex-wrap items-center gap-1.5 px-3 pt-3 text-xs">
+    {#if dragging}
+      <div
+        class="pointer-events-none absolute inset-0 z-10 flex items-center justify-center gap-2 rounded-xl bg-background/90 text-sm font-medium text-primary"
+      >
+        <Icon name="paperclip" size={16} /> Drop files to attach
+      </div>
+    {/if}
+    {#if files.length || pending.length || uploadError}
+      <ul class="flex flex-wrap items-center gap-1.5 px-3 pt-3 text-xs" aria-label="Attachments">
         {#each files as file (file.fileId)}
-          <span
-            class="inline-flex max-w-full items-center gap-1 rounded-full bg-muted py-0.5 pl-2 pr-0.5"
+          <li
+            class="inline-flex max-w-60 items-center gap-1.5 rounded-md border border-border bg-background py-1 pl-2 pr-0.5"
           >
-            <Icon name="file" size={12} class="shrink-0 text-muted-foreground" />
+            <Icon name={fileIcon(file.mimeType)} size={14} class="shrink-0 text-muted-foreground" />
             <span class="truncate">{file.name}</span>
-            <button
+            <span class="shrink-0 text-muted-foreground">{formatBytes(file.bytes)}</span>
+            <Button
               type="button"
-              class="inline-flex size-5 shrink-0 items-center justify-center rounded-full text-muted-foreground hover:bg-background hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              variant="ghost"
+              size="icon"
+              class="size-6 shrink-0 text-muted-foreground"
               aria-label={`Remove ${file.name}`}
               onclick={() => {
                 files = files.filter((f) => f.fileId !== file.fileId);
                 onremovefile?.(file.fileId);
-              }}><Icon name="close" size={12} /></button
+              }}><Icon name="close" size={12} /></Button
             >
-          </span>
+          </li>
         {/each}
-        {#if uploadError}<span class="text-destructive" role="alert">{uploadError}</span>{/if}
-      </div>
+        {#each pending as file (file.key)}
+          <li
+            class="inline-flex max-w-60 items-center gap-1.5 rounded-md border border-dashed border-border py-1 pl-2 pr-2 text-muted-foreground"
+          >
+            <Spinner size="sm" label={`Uploading ${file.name}`} class="shrink-0" />
+            <span class="truncate">{file.name}</span>
+            <span class="shrink-0">{formatBytes(file.bytes)}</span>
+          </li>
+        {/each}
+        {#if uploadError}<li class="text-destructive" role="alert">{uploadError}</li>{/if}
+      </ul>
     {/if}
     <Textarea
       bind:ref={textarea}
@@ -122,8 +248,14 @@
       {placeholder}
       aria-label="Message"
       maxlength={LIMITS.messageChars}
+      role={prompts?.length ? 'combobox' : undefined}
+      aria-autocomplete={prompts?.length ? 'list' : undefined}
+      aria-expanded={prompts?.length ? menuOpen : undefined}
+      aria-controls={menuOpen ? `${uid}-prompts` : undefined}
+      aria-activedescendant={menuOpen ? `${uid}-prompt-${active}` : undefined}
       {disabled}
       {onkeydown}
+      {onpaste}
     />
     <div class="flex items-center gap-1 px-2 pb-2">
       {#if upload}
@@ -134,22 +266,31 @@
           size="icon"
           class="size-8 text-muted-foreground"
           aria-label="Attach files"
-          disabled={disabled || uploading > 0}
-          loading={uploading > 0}
+          disabled={disabled || files.length >= LIMITS.requestFiles}
           onclick={() => fileInput?.click()}
         >
-          {#if uploading === 0}<Icon name="paperclip" size={18} />{/if}
+          <Icon name="paperclip" size={18} />
         </Button>
       {/if}
       {#if context}<div class="min-w-0">{@render context()}</div>{/if}
-      <div class="ml-auto">
+      <div class="ml-auto flex items-center gap-2">
+        {#if showCount}
+          <span
+            class={cn(
+              'text-xs tabular-nums text-muted-foreground',
+              chars >= LIMITS.messageChars && 'text-destructive',
+            )}
+            aria-live="polite"
+            >{chars.toLocaleString()} / {LIMITS.messageChars.toLocaleString()}</span
+          >
+        {/if}
         {#if streaming}
           <Button
             type="button"
             variant="outline"
             size="icon"
             class="size-8"
-            aria-label="Stop"
+            aria-label="Stop (Esc)"
             onclick={() => oncancel?.()}><Icon name="stop" size={14} /></Button
           >
         {:else}
@@ -158,11 +299,61 @@
             size="icon"
             class="size-8"
             aria-label="Send"
-            disabled={disabled || !value.trim() || uploading > 0}
-            ><Icon name="send" size={16} /></Button
+            disabled={disabled || !value.trim() || busy}><Icon name="send" size={16} /></Button
           >
         {/if}
       </div>
     </div>
   </div>
+  <p
+    class="mx-auto mt-1.5 hidden max-w-3xl items-center gap-1.5 px-1 text-[11px] text-muted-foreground opacity-0 transition-opacity group-focus-within/composer:opacity-100 sm:flex"
+    aria-hidden="true"
+  >
+    {#if streaming}
+      <Kbd size="sm">Esc</Kbd> to stop
+    {:else}
+      <Kbd size="sm">Enter</Kbd> to send · <Kbd keys={['Shift', 'Enter']} size="sm" /> for a new line
+      {#if prompts?.length}· <Kbd size="sm">/</Kbd> for saved prompts{/if}
+    {/if}
+  </p>
 </form>
+
+{#if prompts?.length}
+  <Popover
+    open={menuOpen}
+    onOpenChange={(next) => {
+      if (!next) dismissedFor = value;
+    }}
+    anchor={card ?? null}
+    side="top"
+    align="start"
+    sideOffset={6}
+    autoFocus={false}
+    aria-label="Saved prompts"
+    class="w-[min(28rem,calc(100vw-2rem))] p-1"
+  >
+    <ul id={`${uid}-prompts`} role="listbox" aria-label="Saved prompts" class="grid gap-0.5">
+      {#each matches as prompt, i (prompt.id)}
+        <!-- Keyboard choice happens in the textarea (combobox + aria-activedescendant). -->
+        <!-- svelte-ignore a11y_click_events_have_key_events -->
+        <li
+          id={`${uid}-prompt-${i}`}
+          role="option"
+          aria-selected={i === active}
+          class={cn(
+            'cursor-pointer rounded-md px-2.5 py-1.5 text-sm',
+            i === active ? 'bg-muted text-foreground' : 'text-foreground hover:bg-muted/60',
+          )}
+          onpointerdown={(e) => e.preventDefault()}
+          onclick={() => void choose(prompt)}
+          onpointermove={() => (active = i)}
+        >
+          <span class="block truncate font-medium">{prompt.label}</span>
+          {#if prompt.description}
+            <span class="block truncate text-xs text-muted-foreground">{prompt.description}</span>
+          {/if}
+        </li>
+      {/each}
+    </ul>
+  </Popover>
+{/if}

package/dist/components/Composer.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { FileRef } from '@classic-homes/agent-contracts';
+import { type ComposerPrompt } from '../composer-prompts.js';
 interface Props {
     disabled?: boolean;
     streaming?: boolean;
@@ -7,12 +8,19 @@ interface Props {
     placeholder?: string;
     /** Upload a file; the composer shows it as pending until the message is sent. */
     upload?: (file: File) => Promise<FileRef>;
+    /** Saved prompts for the `/` menu; the menu is off without them. */
+    prompts?: ComposerPrompt[];
     onsend?: (text: string) => void;
     oncancel?: () => void;
     onremovefile?: (fileId: string) => void;
     /** Slot for a host-provided context chip (page context toggle). */
     context?: import('svelte').Snippet;
 }
+/**
+ * The message box: an autosizing textarea in a card with attach, the host's context chip and
+ * Send/Stop. Files can also be dropped on it or pasted. Typing `/` at the start opens the saved
+ * prompt menu when the host passes `prompts`.
+ */
 declare const Composer: import("svelte").Component<Props, {
     focus: () => void;
 }, "value" | "files">;

package/dist/components/Composer.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Composer.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/Composer.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAK5D,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iFAAiF;IACjF,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IAC1C,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,mEAAmE;IACnE,OAAO,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;CACpC;AA8GH,QAAA,MAAM,QAAQ;iBArFO,IAAI;qBAqF6B,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Composer.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/Composer.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAG9D,OAAO,EAA8B,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAIvF,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iFAAiF;IACjF,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IAC1C,oEAAoE;IACpE,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3B,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,mEAAmE;IACnE,OAAO,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;CACpC;AA2PH;;;;GAIG;AACH,QAAA,MAAM,QAAQ;iBA/NO,IAAI;qBA+N6B,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/MessageItem.svelte

@@ -13,6 +13,7 @@
     last?: boolean;
     sandboxOrigin: string;
     fileUrl: (fileId: string) => string;
+    toolLabels?: Record<string, string>;
     onnavigate?: (href: string) => void;
     onopenartifact?: (artifactId: string) => void;
     onprompt?: (text: string) => void;

package/dist/components/MessageItem.svelte.d.ts

@@ -5,6 +5,7 @@ interface Props {
     last?: boolean;
     sandboxOrigin: string;
     fileUrl: (fileId: string) => string;
+    toolLabels?: Record<string, string>;
     onnavigate?: (href: string) => void;
     onopenartifact?: (artifactId: string) => void;
     onprompt?: (text: string) => void;

package/dist/components/MessageItem.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageItem.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/MessageItem.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAK/C,UAAU,KAAK;IACb,OAAO,EAAE,WAAW,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,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,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAkBH,sEAAsE;AACtE,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"MessageItem.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/MessageItem.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAK/C,UAAU,KAAK;IACb,OAAO,EAAE,WAAW,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,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,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAkBH,sEAAsE;AACtE,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/MessageList.svelte

@@ -10,6 +10,7 @@
     streaming: boolean;
     sandboxOrigin: string;
     fileUrl: (fileId: string) => string;
+    toolLabels?: Record<string, string>;
     onnavigate?: (href: string) => void;
     onopenartifact?: (artifactId: string) => void;
     onprompt?: (text: string) => void;
@@ -24,6 +25,7 @@
     streaming,
     sandboxOrigin,
     fileUrl,
+    toolLabels,
     onnavigate,
     onopenartifact,
     onprompt,
@@ -133,6 +135,7 @@
             streaming={streaming && i === messages.length - 1 && message.role === 'assistant'}
             {sandboxOrigin}
             {fileUrl}
+            {toolLabels}
             {onnavigate}
             {onopenartifact}
             {onprompt}

package/dist/components/MessageList.svelte.d.ts

@@ -4,6 +4,7 @@ interface Props {
     streaming: boolean;
     sandboxOrigin: string;
     fileUrl: (fileId: string) => string;
+    toolLabels?: Record<string, string>;
     onnavigate?: (href: string) => void;
     onopenartifact?: (artifactId: string) => void;
     onprompt?: (text: string) => void;

package/dist/components/MessageList.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageList.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/MessageList.svelte.ts"],"names":[],"mappings":"AAKA,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,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,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,KAAK,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;CAClC;AA2HH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"MessageList.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/MessageList.svelte.ts"],"names":[],"mappings":"AAKA,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,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,KAAK,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;CAClC;AA4HH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}