@classic-homes/agent-chat 0.11.0 → 0.13.0

package/README.md

@@ -5,7 +5,7 @@ artifacts and MCP-UI sandbox frames. The Classic App's `/agent` page and agent p
 
 ## Requirements
 
-- `svelte` 5 and `@classic-homes/theme-svelte` 1.39 or later (peer dependencies).
+- `svelte` `^5.31.0` and `@classic-homes/theme-svelte` `^1.42.2` (peer dependencies).
 - Tailwind with `@classic-homes/theme-tailwind-preset`. The components are styled with Tailwind
   utility classes and theme tokens, so the consumer's Tailwind build has to scan this package:
 
@@ -38,13 +38,75 @@ artifacts and MCP-UI sandbox frames. The Classic App's `/agent` page and agent p
 `client` is an `AgentApiClient` from `@classic-homes/agent-client`. `sandboxOrigin` is the
 agent-api origin that serves `/frame`; artifacts and MCP-UI resources only ever render there.
 
+### `conversationId`
+
+- `null` (or absent): a new chat. When the first message starts a conversation,
+  `onconversationstarted(id)` reports its id; the host may pass that id back as
+  `conversationId` (the chat stays mounted and does not reload) or keep passing `null` (the
+  chat carries on in that conversation).
+- Another id: the chat loads that transcript, re-attaching to a turn still running there. A
+  stream of the conversation shown before is dropped (not cancelled on the server; it finishes
+  there) and does not fire `onturnend`. A load that fails shows Try again; it is not retried
+  automatically for the same id.
+- From an id back to `null` (the host's "New chat"): the transcript and the conversation are
+  cleared, so the next message starts a new conversation.
+
+`ChatSession` (used by `AgentChat`, exported for other layouts) has the matching methods:
+`load(id)`, `reset()` (forget the conversation and drop a running stream without a server
+cancel), `send`, `cancel` (asks the runtime to stop and keeps reading until it confirms, at
+most `cancelGraceMs`, default 3 s, so the text up to the stop is kept), `retry`, `regenerate`,
+`edit` and `continue(requestId)`.
+
+### Continue
+
+An answer cut short by the output limit (`finishReason: 'length'`) or stopped by the user
+(`'cancelled'`) shows Continue: `ChatSession.continue` asks the runtime to carry on and streams
+the rest into the same message. A connection that drops mid-answer is re-attached
+automatically (twice); if that fails the answer shows a retryable error (Try again), not
+Continue. When a continuation itself fails, the text so far stays and Continue is offered again.
+Continue needs a runtime that supports `ChatRequest.continues`; an older one ignores it.
+
+### Files
+
+The file endpoint needs the bearer, which `<img src>` and download links cannot send. `AgentChat`
+loads produced files with `client.fetchFile` (blob URLs, revoked when the message goes away);
+`MessageFiles` takes a `loadFile(fileId): Promise<Blob>` prop and links to `fileUrl` without one
+(only for cookie-authenticated hosts).
+
+### Detached chat (launcher, floating window, dock)
+
+A host can show the chat over its pages instead of on a route of its own:
+
+- `createChatSurface({ storageKey })` holds which presentation is showing (`launcher`, `float`
+  or `dock`), where the launcher sits (`corner`, or `launcher` once the user has placed it), the
+  window's geometry and an `unread` flag; it persists to `localStorage` under `storageKey` and
+  keeps both inside the viewport. The launcher's place and the window's are separate.
+- `ChatLauncher` is the floating button. The user can drag it anywhere; pass `position` and save
+  the drop from `onmove` (`surface.setLauncher`). While answering an arc orbits it; it also shows
+  an unseen answer, an error and a MOCK marker.
+- `FloatingWindow` is a non-modal window around any content: one header (mark, `title`, optional
+  `subtitle` such as the conversation name, your `actions`, Dock, Minimize), drag by the header,
+  resize from the edges, drop on the right edge to dock, arrow keys on the move handle, Escape to
+  minimize. It takes the keyboard when it appears (the first text field, else the window;
+  `autofocus={false}` to opt out). The dock itself is the host's (e.g. a theme `DataPanel`).
+  For history, render `ConversationSidebar` in place of the chat (`class="w-full border-r-0"`);
+  with a host-owned session nothing is lost while it shows.
+- Pass `AgentChat` a host-owned `session` (`new ChatSession({...})`) and `variant="float"` or
+  `"panel"`. The session then survives the view moving between presentations, including a
+  running answer and the unsent composer text (`session.draft`). With `session` set, configure `mode`, `agent`, `clientKind`, `getContext` and
+  the turn callbacks on the session; those `AgentChat` props are ignored. Call
+  `surface.notifyTurnEnd()` from the session's `onTurnEnd` to flag an answer that finished while
+  collapsed.
+
 ## Components
 
 `AgentChat` composes the rest; each is also exported for other layouts:
 
 - `ChatHeader`, `ConversationSidebar`: title and conversation actions; the history rail.
   `ChatHeader`'s menu opens `ShortcutsDialog` (the chat's `CHAT_SHORTCUTS` plus the host's
-  `shortcuts`, e.g. a panel toggle). Hosts implement their own app-level shortcuts.
+  `shortcuts`, e.g. a panel toggle). Hosts implement their own app-level shortcuts. Pass
+  `savedPrompts={false}` to `ChatHeader` when the chat has no `prompts`, so the `/` entry is
+  left out.
 - `MessageList`: transcript with day separators and a jump-to-latest button.
 - `MessageItem` → `UserMessage` / `AssistantMessage`, with `MessageActions` (copy, time,
   `MessageFeedback` thumbs up/down with an optional note, Regenerate and Edit on the latest turn),
@@ -63,4 +125,7 @@ agent-api origin that serves `/frame`; artifacts and MCP-UI resources only ever
   an error with Try again when that load fails.
 - `ArtifactPanel`, `UiFrame`, `ModeBanner`.
 
+While an answer has nothing to show yet, the assistant message cycles through
+`THINKING_PHRASES` (homebuilding verbs, as in the Classic Chat widget) beside a stepped loader.
+
 Publishing: `docs/operations/package-publishing.md`.

package/dist/components/AgentChat.svelte

@@ -32,6 +32,14 @@
 
   interface Props {
     client: AgentApiClient;
+    /**
+     * A session the host owns, so it survives this component being unmounted and mounted
+     * elsewhere (launcher, floating window, dock) without dropping a running answer. The host
+     * then configures it itself: `mode`, `agent`, `clientKind`, `getContext`,
+     * `onconversationstarted`, `ontoolresult` and `onturnend` here are ignored. Without it the
+     * component creates its own, as before.
+     */
+    session?: ChatSession;
     /** Sandbox origin for artifacts and MCP-UI (agent-api `/frame`). */
     sandboxOrigin: string;
     conversationId?: string | null;
@@ -47,7 +55,8 @@
     /** The agent of this conversation changed (picked, or learned from a loaded conversation). */
     onagentchange?: (agent: AgentKey) => void;
     clientKind?: ClientKind;
-    variant?: 'page' | 'panel';
+    /** `float` is the detached window: laid out like the panel. */
+    variant?: 'page' | 'panel' | 'float';
     getContext?: () => DocumentContext | null | undefined;
     onconversationstarted?: (conversationId: string) => void;
     ontoolresult?: (name: string, status: string) => void;
@@ -83,6 +92,7 @@
   }
   let {
     client,
+    session: hostSession,
     sandboxOrigin,
     conversationId = null,
     mode,
@@ -111,29 +121,54 @@
     class: className,
   }: Props = $props();
 
-  const session = new ChatSession({
-    client,
-    conversationId,
-    mode,
-    agent,
-    clientKind,
-    getContext,
-    onConversationStarted: (id) => onconversationstarted?.(id),
-    onToolResult: (name, status) => ontoolresult?.(name, status),
-    onTurnEnd: (info) => onturnend?.(info),
-    // Open the pane when the runtime starts an artifact, not by watching state later: a fast
-    // stream can open and close it before any effect sees `open`.
-    onEvent: (event) => {
-      if (event.type === 'artifact' && event.op === 'open') {
+  // One session for the component's lifetime: the host's, or our own.
+  // svelte-ignore state_referenced_locally
+  const session =
+    hostSession ??
+    new ChatSession({
+      client,
+      conversationId,
+      mode,
+      agent,
+      clientKind,
+      getContext,
+      onConversationStarted: (id) => onconversationstarted?.(id),
+      onToolResult: (name, status) => ontoolresult?.(name, status),
+      onTurnEnd: (info) => onturnend?.(info),
+    });
+  // Open the pane when the runtime starts an artifact, not by watching state later: a fast
+  // stream can open and close it before any effect sees `open`. Only beside the chat: a sheet
+  // (narrow screens, the panel, the floating window) would cover the answer mid-stream, so the
+  // chip opens it there.
+  $effect(() =>
+    session.subscribe((event) => {
+      if (event.type === 'artifact' && event.op === 'open' && sidePane) {
         selectedArtifact = event.artifactId;
         artifactsOpen = true;
       }
-    },
-  });
+    }),
+  );
+  const compact = $derived(variant !== 'page');
   let attemptedId: string | null = null;
+  /** The prop as last seen, to tell the host's "New chat" (id → null) from a chat started here. */
+  let previousId: string | null = null;
   // The constructor already knows `conversationId`; what decides a fetch is whether the
-  // transcript for it has been loaded (or started) in this session.
+  // transcript for it has been loaded (or started) in this session. `load` stops a stream of
+  // the conversation shown before.
   $effect(() => {
+    const before = previousId;
+    previousId = conversationId;
+    if (!conversationId) {
+      // The host left a conversation for a new chat: forget it, or the next message would go
+      // to it. A chat started here while the prop stayed null keeps going (null → null).
+      if (before && session.conversationId) {
+        session.reset();
+        attemptedId = null;
+        selectedArtifact = null;
+        artifactsOpen = false;
+      }
+      return;
+    }
     if (
       conversationId &&
       conversationId !== session.loadedConversationId &&
@@ -146,11 +181,10 @@
     }
   });
   $effect(() => {
-    if (mode && !session.mode) session.mode = mode;
+    if (mode && !hostSession && !session.mode) session.mode = mode;
   });
 
   let composer: Composer | undefined = $state();
-  let draft = $state('');
   let files = $state<FileRef[]>([]);
   let selectedArtifact = $state<string | null>(null);
   let artifactsOpen = $state(false);
@@ -174,7 +208,7 @@
   }
   function retry(): void {
     const last = session.messages[session.messages.length - 1];
-    if (last?.role === 'assistant') void session.retry(last.requestId);
+    if (last?.role === 'assistant') thenFocus(session.retry(last.requestId));
   }
   const agentName = $derived(agents?.find((a) => a.key === session.agent)?.name);
   const pickAgent = $derived(
@@ -213,7 +247,7 @@
     if (conversationId) void session.load(conversationId);
   }
   function prompt(text: string): void {
-    draft = text;
+    session.draft = text;
     composer?.focus();
   }
 </script>
@@ -259,7 +293,7 @@
       title={welcomeTitle}
       description={welcomeDescription}
       {suggestions}
-      compact={variant === 'panel'}
+      {compact}
       disabled={session.status !== 'idle'}
       onselect={(text) => thenFocus(send(text))}
     />
@@ -292,6 +326,7 @@
       streaming={session.streaming}
       {sandboxOrigin}
       fileUrl={(id) => client.fileUrl(id)}
+      loadFile={client.fetchFile ? (id) => client.fetchFile!(id) : undefined}
       {toolLabels}
       {onnavigate}
       onopenartifact={(id) => {
@@ -312,13 +347,13 @@
         : undefined}
       oncontinue={() => {
         const answer = session.current;
-        if (answer) void session.continue(answer.requestId);
+        if (answer) thenFocus(session.continue(answer.requestId));
       }}
       empty={emptyState}
     />
     <Composer
       bind:this={composer}
-      bind:value={draft}
+      bind:value={session.draft}
       bind:files
       disabled={session.status === 'loading'}
       streaming={session.streaming}

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

@@ -2,9 +2,18 @@ import type { AgentApiClient } from '@classic-homes/agent-client';
 import type { AgentKey, AgentSummary, ClientKind, DocumentContext } from '@classic-homes/agent-contracts';
 import type { BackendMode } from '@classic-homes/agent-contracts';
 import type { ComposerPrompt } from '../composer-prompts.js';
+import { ChatSession } from '../session.svelte.js';
 import type { WelcomeSuggestion } from '../welcome.js';
 interface Props {
     client: AgentApiClient;
+    /**
+     * A session the host owns, so it survives this component being unmounted and mounted
+     * elsewhere (launcher, floating window, dock) without dropping a running answer. The host
+     * then configures it itself: `mode`, `agent`, `clientKind`, `getContext`,
+     * `onconversationstarted`, `ontoolresult` and `onturnend` here are ignored. Without it the
+     * component creates its own, as before.
+     */
+    session?: ChatSession;
     /** Sandbox origin for artifacts and MCP-UI (agent-api `/frame`). */
     sandboxOrigin: string;
     conversationId?: string | null;
@@ -20,7 +29,8 @@ interface Props {
     /** The agent of this conversation changed (picked, or learned from a loaded conversation). */
     onagentchange?: (agent: AgentKey) => void;
     clientKind?: ClientKind;
-    variant?: 'page' | 'panel';
+    /** `float` is the detached window: laid out like the panel. */
+    variant?: 'page' | 'panel' | 'float';
     getContext?: () => DocumentContext | null | undefined;
     onconversationstarted?: (conversationId: string) => void;
     ontoolresult?: (name: string, status: string) => void;

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

@@ -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;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;AAqPH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"AgentChat.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/AgentChat.svelte.ts"],"names":[],"mappings":"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"}

package/dist/components/ArtifactPanel.svelte

@@ -115,8 +115,10 @@
     <div class="min-h-0 flex-1 overflow-auto p-3">
       {#if selected.mediaType === 'text/markdown'}
         <Markdown html={markdownHtml} />
-      {:else if selected.mediaType === 'application/vnd.ant.code' || (selected.mediaType === 'application/vnd.ant.mermaid' && selected.open)}
-        <!-- Mermaid renders once the artifact is complete; a partial diagram is a parse error. -->
+      {:else if selected.mediaType === 'application/vnd.ant.code' || selected.open}
+        <!-- Framed artifacts (html, svg, react, mermaid) render once complete: the source shows
+             while it streams, so the sandbox is not reloaded on every delta (and a partial
+             diagram is a parse error). -->
         <pre class="overflow-auto whitespace-pre font-mono text-[13px] leading-relaxed"><code
             >{selected.text}</code
           ></pre>

package/dist/components/AssistantMessage.svelte

@@ -7,8 +7,9 @@
   import { Alert, Button, Icon } from '@classic-homes/theme-svelte';
   import type { TurnRating } from '@classic-homes/agent-contracts';
   import type { AssistantMessage } from '../reducer.js';
-  import { errorTitle } from '../reducer.js';
+  import { errorTitle, isContinuable } from '../reducer.js';
   import { parseMarkdown } from '../markdown.js';
+  import { THINKING_PHRASE_MS, pickThinkingPhrase } from '../thinking.js';
   import ArtifactChip from './ArtifactChip.svelte';
   import Markdown from './Markdown.svelte';
   import MessageActions from './MessageActions.svelte';
@@ -24,6 +25,8 @@
     last?: boolean;
     sandboxOrigin: string;
     fileUrl: (fileId: string) => string;
+    /** Fetch a file with the host's credentials (blob URLs); without it files link to `fileUrl`. */
+    loadFile?: (fileId: string) => Promise<Blob>;
     toolLabels?: Record<string, string>;
     onnavigate?: (href: string) => void;
     onopenartifact?: (artifactId: string) => void;
@@ -44,6 +47,7 @@
     last = false,
     sandboxOrigin,
     fileUrl,
+    loadFile,
     toolLabels,
     onnavigate,
     onopenartifact,
@@ -98,8 +102,16 @@
       !message.tools.some((t) => !t.status) &&
       !message.artifacts.some((a) => a.open),
   );
-  // Continue carries on the text so far; a reply stopped before any text is retried instead.
-  const canContinue = $derived(last && !!oncontinue && !!message.text);
+  // A homebuilding verb while there is nothing to show yet, changed every few seconds.
+  let phrase = $state(pickThinkingPhrase());
+  $effect(() => {
+    if (!thinking) return;
+    const timer = setInterval(() => (phrase = pickThinkingPhrase(phrase)), THINKING_PHRASE_MS);
+    return () => clearInterval(timer);
+  });
+  // Continue carries on the text so far of an answer cut short or stopped; a reply stopped before
+  // any text, or one that failed or lost its connection, is retried instead.
+  const canContinue = $derived(last && !!oncontinue && isContinuable(message));
 </script>
 
 <div class="group/message flex gap-3 px-4 py-2" data-role="assistant" data-status={message.status}>
@@ -120,17 +132,15 @@
     {/if}
     {#if html}<Markdown {html} streaming={streaming && !!message.text} onclick={handleClick} />{/if}
     {#if thinking}
-      <div class="flex items-center gap-2 text-sm text-muted-foreground" role="status">
-        <span class="flex gap-1" aria-hidden="true">
-          <span class="h-1.5 w-1.5 rounded-full bg-current motion-safe:animate-bounce"></span>
-          <span
-            class="h-1.5 w-1.5 rounded-full bg-current motion-safe:animate-bounce [animation-delay:150ms]"
-          ></span>
-          <span
-            class="h-1.5 w-1.5 rounded-full bg-current motion-safe:animate-bounce [animation-delay:300ms]"
-          ></span>
-        </span>
-        Thinking
+      <!-- aria-live off: the phrase changes for the eye; announcing each one would be noise. -->
+      <div
+        class="flex items-center gap-2 text-sm italic text-muted-foreground"
+        role="status"
+        aria-live="off"
+        data-agent-thinking
+      >
+        <span>{phrase}</span>
+        <span class="thinking-loader" aria-hidden="true"></span>
       </div>
     {/if}
     {#if message.artifacts.length}
@@ -143,7 +153,7 @@
     {#each message.ui as resource (resource.callId + resource.uri)}
       <UiFrame {resource} {sandboxOrigin} {onprompt} {ontool} {onnotify} />
     {/each}
-    {#if message.files.length}<MessageFiles files={message.files} {fileUrl} />{/if}
+    {#if message.files.length}<MessageFiles files={message.files} {fileUrl} {loadFile} />{/if}
     {#if message.proposals.length}
       <div class="flex flex-col gap-1.5">
         {#each message.proposals as operation (operation.operationId)}
@@ -158,7 +168,10 @@
             <strong class="font-semibold">{errorTitle(message.error.code)}.</strong>
             {message.error.message}
           </p>
-          {#if message.error.retryable && onretry}
+          {#if canContinue}
+            <!-- A continuation failed: the text so far is kept and can still be continued. -->
+            <Button variant="outline" size="sm" onclick={oncontinue}>Continue</Button>
+          {:else if message.error.retryable && onretry}
             <Button variant="outline" size="sm" onclick={onretry}>
               <Icon name="refresh" size={14} /> Try again
             </Button>
@@ -170,6 +183,8 @@
         <Icon name="stop" size={14} /> Stopped
         {#if canContinue}
           <Button variant="link" size="sm" class="h-auto p-0" onclick={oncontinue}>Continue</Button>
+        {:else if last && !message.text && onretry}
+          <Button variant="link" size="sm" class="h-auto p-0" onclick={onretry}>Try again</Button>
         {/if}
       </div>
     {:else if message.status === 'incomplete'}
@@ -195,3 +210,30 @@
     {/if}
   </div>
 </div>
+
+<style>
+  /* Six blocks with one lit, stepping along (the Classic Chat widget's loader). Only custom
+     properties and an animation here: nothing a host's base styles compete with. */
+  .thinking-loader {
+    display: inline-block;
+    width: 60px;
+    height: 10px;
+    flex-shrink: 0;
+    -webkit-mask: linear-gradient(90deg, #000 70%, #0000 0) left / 20% 100%;
+    mask: linear-gradient(90deg, #000 70%, #0000 0) left / 20% 100%;
+    background: linear-gradient(hsl(var(--primary)) 0 0) left -25% top 0 / 20% 100% no-repeat
+      hsl(var(--muted-foreground) / 0.25);
+    animation: thinking-slide 1s infinite steps(6);
+  }
+  @keyframes thinking-slide {
+    100% {
+      background-position: right -25% top 0;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .thinking-loader {
+      animation: none;
+      background-position: left 37.5% top 0;
+    }
+  }
+</style>

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

@@ -7,6 +7,8 @@ interface Props {
     last?: boolean;
     sandboxOrigin: string;
     fileUrl: (fileId: string) => string;
+    /** Fetch a file with the host's credentials (blob URLs); without it files link to `fileUrl`. */
+    loadFile?: (fileId: string) => Promise<Blob>;
     toolLabels?: Record<string, string>;
     onnavigate?: (href: string) => void;
     onopenartifact?: (artifactId: string) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"AssistantMessage.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/AssistantMessage.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAYpD,UAAU,KAAK;IACb,OAAO,EAAE,gBAAgB,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uFAAuF;IACvF,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,8EAA8E;IAC9E,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,iDAAiD;IACjD,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI,EAAE,OAAO,CAAC,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/E,8DAA8D;IAC9D,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AA4JH;;;GAGG;AACH,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"AssistantMessage.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/AssistantMessage.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAapD,UAAU,KAAK;IACb,OAAO,EAAE,gBAAgB,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uFAAuF;IACvF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,gGAAgG;IAChG,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7C,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,8EAA8E;IAC9E,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,iDAAiD;IACjD,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI,EAAE,OAAO,CAAC,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/E,8DAA8D;IAC9D,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AA0KH;;;GAGG;AACH,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/components/ChatHeader.svelte

@@ -34,6 +34,8 @@
     onerror?: (message: string) => void;
     /** Host shortcuts for the "Keyboard shortcuts" dialog, e.g. opening the panel. */
     shortcuts?: ChatShortcut[];
+    /** Whether the chat offers saved prompts (`AgentChat`'s `prompts`); false hides the `/` shortcut. */
+    savedPrompts?: boolean;
     /** Extra controls before the menu. */
     actions?: Snippet;
     class?: string;
@@ -49,6 +51,7 @@
     ondelete,
     onerror,
     shortcuts,
+    savedPrompts = true,
     actions,
     class: className,
   }: Props = $props();
@@ -131,4 +134,4 @@
 </header>
 
 <ConversationDialogs bind:renaming bind:deleting {onrename} {ondelete} {onerror} {returnFocus} />
-<ShortcutsDialog bind:open={showingShortcuts} {shortcuts} {returnFocus} />
+<ShortcutsDialog bind:open={showingShortcuts} {shortcuts} {returnFocus} {savedPrompts} />

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

@@ -15,6 +15,8 @@ interface Props {
     onerror?: (message: string) => void;
     /** Host shortcuts for the "Keyboard shortcuts" dialog, e.g. opening the panel. */
     shortcuts?: ChatShortcut[];
+    /** Whether the chat offers saved prompts (`AgentChat`'s `prompts`); false hides the `/` shortcut. */
+    savedPrompts?: boolean;
     /** Extra controls before the menu. */
     actions?: Snippet;
     class?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"ChatHeader.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/ChatHeader.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAKlD,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,yDAAyD;IACzD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qEAAqE;IACrE,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3E,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5D,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,kFAAkF;IAClF,SAAS,CAAC,EAAE,YAAY,EAAE,CAAC;IAC3B,sCAAsC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAuFH;;;;;GAKG;AACH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"ChatHeader.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/ChatHeader.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAKlD,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,yDAAyD;IACzD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qEAAqE;IACrE,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3E,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5D,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,kFAAkF;IAClF,SAAS,CAAC,EAAE,YAAY,EAAE,CAAC;IAC3B,qGAAqG;IACrG,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,sCAAsC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAwFH;;;;;GAKG;AACH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}