@happyvertical/smrt-chat 0.51.39 → 0.52.0

package/dist/svelte/components/assistant/AssistantComposer.svelte

@@ -9,9 +9,20 @@
  * flow, which is sized for a dedicated upload panel, not a one-line composer
  * (#2904 review fix).
  */
-import { Textarea } from '@happyvertical/smrt-ui/forms';
+import {
+  Dictation,
+  DictationButton,
+  type DictationSourceProvider,
+  DictationStatus,
+  type DictationTranscribe,
+  insertTextAtCursor,
+  longPress,
+  primeReadyBeep,
+  Textarea,
+} from '@happyvertical/smrt-ui/forms';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
 import { Button } from '@happyvertical/smrt-ui/ui';
+import { onDestroy } from 'svelte';
 import { M } from '../../i18n.js';
 import type { AssistantAttachmentRef } from './assistant-transport.js';
 
@@ -38,6 +49,23 @@ export interface Props {
    * the user to edit, and read back what they typed. Setting it never sends.
    * Cleared after `onsend` resolves. */
   value?: string;
+  /**
+   * Speak instead of typing: a speech source (smrt-svelte's
+   * `createSttDictationSource()`). With one, the composer shows a
+   * microphone button, and pressing and holding the message box starts
+   * listening too (it keeps listening after the finger comes up; tap the
+   * microphone, send, or press Escape to stop). Heard words go in at the
+   * cursor. Without one there is no microphone.
+   */
+  dictation?: DictationSourceProvider | null;
+  /**
+   * Writes a recorded message down, for browsers whose speech recognition
+   * is missing or broken (Firefox, Brave): the composer then records the
+   * message and shows "Writing it down…" while this runs. Normally smrt-ui's
+   * `createHttpTranscriber('/your/route')`. Also shows the microphone on its
+   * own, without `dictation`.
+   */
+  transcribe?: DictationTranscribe | null;
 }
 
 let {
@@ -46,7 +74,10 @@ let {
   disabled = false,
   placeholder = 'Ask the assistant…',
   value: content = $bindable(''),
+  dictation: dictationSource = null,
+  transcribe = null,
 }: Props = $props();
+const canDictate = $derived(Boolean(dictationSource || transcribe));
 let stagedAttachments = $state<AssistantAttachmentRef[]>([]);
 let uploading = $state(false);
 let sending = $state(false);
@@ -69,6 +100,35 @@ let textareaComponent:
   | { getElement(): HTMLTextAreaElement | null }
   | undefined = $state();
 
+function messageField(): HTMLTextAreaElement | null {
+  textareaEl ??= textareaComponent?.getElement() ?? undefined;
+  return textareaEl ?? null;
+}
+
+// One dictation per composer; the source is read when listening starts.
+const dictation = new Dictation({
+  source: () => {
+    if (!dictationSource) throw new Error('Speech input is not available.');
+    return dictationSource();
+  },
+  onText: (text) => {
+    const field = messageField();
+    if (field) insertTextAtCursor(field, text);
+    else content = content ? `${content} ${text}` : text;
+  },
+});
+// The recording fallback follows the prop (a host may set it later).
+$effect.pre(() => {
+  dictation.setOptions({ transcribe });
+});
+
+onDestroy(() => dictation.dispose());
+
+function startDictationFromHold() {
+  if (disabled || uploading || dictation.active) return;
+  void dictation.start();
+}
+
 function resize(el: HTMLTextAreaElement) {
   el.style.height = 'auto';
   el.style.height = `${Math.min(el.scrollHeight, 120)}px`;
@@ -127,6 +187,7 @@ async function handleDrop(event: DragEvent) {
 async function handleSend() {
   const trimmed = content.trim();
   if (!trimmed || disabled || sending) return;
+  if (dictation.active) void dictation.stop();
   sendError = null;
   sending = true;
   // #2904 review finding 4: keep the draft text/attachments until onsend
@@ -152,6 +213,11 @@ async function handleSend() {
 }
 
 function handleKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape' && dictation.active) {
+    event.preventDefault();
+    void dictation.stop();
+    return;
+  }
   // Matches ../messages/MessageInput.svelte's handleKeydown convention:
   // plain Enter sends, Shift+Enter inserts a newline. `isComposing` guards
   // against an IME's confirmation Enter being treated as a send.
@@ -205,6 +271,9 @@ function removeAttachment(id: string) {
       {/each}
     </ul>
   {/if}
+  {#if canDictate}
+    <DictationStatus {dictation} />
+  {/if}
   <div class="assistant-composer-row">
     <!-- raw-primitive-allow: compact icon-only attach control backed by a hidden native file input; opens the OS picker, matching MessageInput's icon-button send control pattern -->
     <Button
@@ -239,17 +308,30 @@ function removeAttachment(id: string) {
       tabindex="-1"
       aria-label={t(M['chat.assistant_composer.attach_files'])}
     />
-    <Textarea
-      bind:this={textareaComponent}
-      bind:value={content}
-      class="assistant-composer-textarea"
-      {placeholder}
-      disabled={disabled || uploading}
-      rows={1}
-      onkeydown={handleKeydown}
-      oninput={handleInput}
-      aria-label={t(M['chat.assistant_composer.message_label'])}
-    />
+    <div
+      class="assistant-composer-field"
+      use:longPress={{
+        onPressStart: () => primeReadyBeep(),
+        onLongPress: startDictationFromHold,
+        onRelease: () => void dictation.unlock(),
+        disabled: !canDictate || disabled || uploading,
+      }}
+    >
+      <Textarea
+        bind:this={textareaComponent}
+        bind:value={content}
+        class="assistant-composer-textarea"
+        {placeholder}
+        disabled={disabled || uploading}
+        rows={1}
+        onkeydown={handleKeydown}
+        oninput={handleInput}
+        aria-label={t(M['chat.assistant_composer.message_label'])}
+      />
+    </div>
+    {#if canDictate}
+      <DictationButton {dictation} disabled={disabled || uploading} />
+    {/if}
     <Button
       type="button"
       class="assistant-composer-send"
@@ -280,8 +362,8 @@ function removeAttachment(id: string) {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: 32px;
-    height: 32px;
+    width: 44px;
+    height: 44px;
     padding: 0;
     border: 1px solid var(--smrt-color-outline-variant, #c4c6cf);
     border-radius: var(--smrt-radius-full, 9999px);
@@ -307,6 +389,12 @@ function removeAttachment(id: string) {
     clip: rect(0 0 0 0);
   }
 
+  .assistant-composer-field {
+    flex: 1;
+    display: flex;
+    min-inline-size: 0;
+  }
+
   :global(.assistant-composer-textarea) {
     flex: 1;
     resize: none;
@@ -314,6 +402,20 @@ function removeAttachment(id: string) {
     font-family: var(--smrt-font-family, inherit);
   }
 
+  /* Phones: 16px text so iOS Safari doesn't zoom the page when the
+     message field gets focus. */
+  @media (max-width: 48rem) {
+    .assistant-composer-field {
+    flex: 1;
+    display: flex;
+    min-inline-size: 0;
+  }
+
+  :global(.assistant-composer-textarea) {
+      font-size: max(1rem, 16px);
+    }
+  }
+
   :global(.assistant-composer-send) {
     flex-shrink: 0;
     padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-3, 12px);

package/dist/svelte/components/assistant/AssistantComposer.svelte.d.ts

@@ -1,3 +1,14 @@
+/**
+ * AssistantComposer - text + attachment composer for AssistantDock (#2904).
+ *
+ * Enter-to-send / Shift+Enter-for-newline matches the package convention in
+ * `../messages/MessageInput.svelte` (same `Textarea` primitive, same
+ * `handleKeydown` shape). Attachments use a compact attach button + a small
+ * chip row instead of the full `../shared/FileUpload.svelte` dropzone/preview
+ * flow, which is sized for a dedicated upload panel, not a one-line composer
+ * (#2904 review fix).
+ */
+import { type DictationSourceProvider, type DictationTranscribe } from '@happyvertical/smrt-ui/forms';
 import type { AssistantAttachmentRef } from './assistant-transport.js';
 export interface Props {
     /** Called with the trimmed message text and any staged attachments when
@@ -17,6 +28,23 @@ export interface Props {
      * the user to edit, and read back what they typed. Setting it never sends.
      * Cleared after `onsend` resolves. */
     value?: string;
+    /**
+     * Speak instead of typing: a speech source (smrt-svelte's
+     * `createSttDictationSource()`). With one, the composer shows a
+     * microphone button, and pressing and holding the message box starts
+     * listening too (it keeps listening after the finger comes up; tap the
+     * microphone, send, or press Escape to stop). Heard words go in at the
+     * cursor. Without one there is no microphone.
+     */
+    dictation?: DictationSourceProvider | null;
+    /**
+     * Writes a recorded message down, for browsers whose speech recognition
+     * is missing or broken (Firefox, Brave): the composer then records the
+     * message and shows "Writing it down…" while this runs. Normally smrt-ui's
+     * `createHttpTranscriber('/your/route')`. Also shows the microphone on its
+     * own, without `dictation`.
+     */
+    transcribe?: DictationTranscribe | null;
 }
 declare const AssistantComposer: import("svelte").Component<Props, {}, "value">;
 type AssistantComposer = ReturnType<typeof AssistantComposer>;

package/dist/svelte/components/assistant/AssistantComposer.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AssistantComposer.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/assistant/AssistantComposer.svelte.ts"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAGvE,MAAM,WAAW,KAAK;IACpB;;;;4DAIwD;IACxD,MAAM,EAAE,CACN,OAAO,EAAE,MAAM,EACf,WAAW,EAAE,sBAAsB,EAAE,KAClC,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1B;sEACkE;IAClE,QAAQ,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,OAAO,CAAC,sBAAsB,EAAE,CAAC,CAAC;IACjE,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+CAA+C;IAC/C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;0CAEsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA8LD,QAAA,MAAM,iBAAiB,gDAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"AssistantComposer.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/assistant/AssistantComposer.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;;;;GASG;AACH,OAAO,EAGL,KAAK,uBAAuB,EAE5B,KAAK,mBAAmB,EAKzB,MAAM,8BAA8B,CAAC;AAKtC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAGvE,MAAM,WAAW,KAAK;IACpB;;;;4DAIwD;IACxD,MAAM,EAAE,CACN,OAAO,EAAE,MAAM,EACf,WAAW,EAAE,sBAAsB,EAAE,KAClC,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1B;sEACkE;IAClE,QAAQ,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,OAAO,CAAC,sBAAsB,EAAE,CAAC,CAAC;IACjE,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+CAA+C;IAC/C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;0CAEsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,uBAAuB,GAAG,IAAI,CAAC;IAC3C;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAC;CACzC;AAkPD,QAAA,MAAM,iBAAiB,gDAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/svelte/components/assistant/AssistantDock.svelte

@@ -15,25 +15,39 @@ import type {
   DataSurfaceIdentity,
   DataSurfaceRegistry,
 } from '@happyvertical/smrt-ui/data-surface';
+import type {
+  DictationSourceProvider,
+  DictationTranscribe,
+} from '@happyvertical/smrt-ui/forms';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
 import { Button } from '@happyvertical/smrt-ui/ui';
 import { type Snippet, tick, untrack } from 'svelte';
+import type { AssistantStatus } from '../../../assistant-turn-events.js';
 import { M } from '../../i18n.js';
 import ToolCallDisplay from '../agent/ToolCallDisplay.svelte';
 import ModelPicker from '../shared/ModelPicker.svelte';
+import AssistantChoiceCards from './AssistantChoiceCards.svelte';
 import AssistantComposer from './AssistantComposer.svelte';
 import AssistantThreadList from './AssistantThreadList.svelte';
 import { toolCallStatusForAction } from './action-status.js';
+import type { AssistantChoiceSourceRegistry } from './assistant-choices.svelte.js';
 import type {
   AssistantAttachmentRef,
   AssistantMessage,
   AssistantTransport,
 } from './assistant-transport.js';
 import { safeAttachmentHref } from './attachment-href.js';
+import {
+  type AssistantClientTool,
+  type AssistantClientToolPolicy,
+  type AssistantClientToolSource,
+  defaultClientToolPolicy,
+} from './client-tools.js';
 import {
   type AssistantActionClient,
   type AssistantActionOutcome,
   type AssistantDockController,
+  type AssistantRun,
   createAssistantDockController,
 } from './create-assistant-dock-controller.svelte.js';
 
@@ -117,6 +131,39 @@ export interface Props {
   /** Placeholder for the composer's empty textarea (#2991). Defaults to the
    * composer's own placeholder. */
   composerPlaceholder?: string;
+  /** The page's browser tools (#2908) — typically
+   * `installWebMcpPageToolRegistry()` from
+   * `@happyvertical/smrt-web/webmcp-page-tools`. Offered to the model each
+   * turn; see `./client-tools.ts` for when a call waits for the user. */
+  pageTools?: AssistantClientToolSource;
+  /** Narrows when a browser tool call waits for the user (#2908).
+   * Destructive calls always wait. */
+  clientToolPolicy?: (tool: AssistantClientTool) => AssistantClientToolPolicy;
+  /** Called whenever the assistant's generic status changes (#2908), for a
+   * host's own "working" line. Also readable as `controller.status`. */
+  onstatus?: (status: AssistantStatus) => void;
+  /** Waits for the page to settle after a step's browser tools ran, before
+   * the turn resumes. See `AssistantDockControllerOptions.settle`. */
+  settle?: () => Promise<void> | void;
+  /** Narrows the page tools the dock declares and runs (e.g. a person's
+   * setting). See `AssistantDockControllerOptions.clientToolFilter`. */
+  clientToolFilter?: (tool: AssistantClientTool) => boolean;
+  /** How long a paused run may wait before it stops. Default 15 min. */
+  maxPauseMs?: number;
+  /** Called whenever the supervised run changes (#assistant-watch). Also
+   * readable as `controller.run`. */
+  onrun?: (run: AssistantRun | null) => void;
+  /** Page features that can offer a few options for the person to pick
+   * (see `./assistant-choices.svelte.ts`). The options show as cards here;
+   * the person's click applies one. */
+  choiceSources?: AssistantChoiceSourceRegistry;
+  /** Speak instead of typing in the composer (a speech source, e.g.
+   * smrt-svelte's `createSttDictationSource()`); see `AssistantComposer`. */
+  dictation?: DictationSourceProvider | null;
+  /** Writes a recorded message down when the browser cannot recognise
+   * speech (Firefox, Brave), e.g. smrt-ui's `createHttpTranscriber()`;
+   * see `AssistantComposer`. */
+  transcribe?: DictationTranscribe | null;
 }
 
 const {
@@ -131,6 +178,16 @@ const {
   onactionsettled,
   initialDraft,
   composerPlaceholder,
+  pageTools,
+  clientToolPolicy,
+  onstatus,
+  settle,
+  clientToolFilter,
+  maxPauseMs,
+  onrun,
+  choiceSources,
+  dictation,
+  transcribe,
 }: Props = $props();
 const { t } = useI18n();
 
@@ -157,8 +214,34 @@ const controller: AssistantDockController = createAssistantDockController({
   onActionSettled: (request, outcome) => onactionsettled?.(request, outcome),
   // Read once, on mount, like the controller itself.
   initialDraft: untrack(() => initialDraft),
+  get pageTools() {
+    return pageTools;
+  },
+  // Read per call so a reassigned prop is observed; the controller still
+  // forces `confirm` for a destructive tool whatever this returns.
+  clientToolPolicy: (tool) =>
+    (clientToolPolicy ?? defaultClientToolPolicy)(tool),
+  onStatus: (status) => onstatus?.(status),
+  settle: () => settle?.(),
+  // Read per call so a changed setting applies to the next step.
+  clientToolFilter: (tool) => clientToolFilter?.(tool) ?? true,
+  get maxPauseMs() {
+    return maxPauseMs;
+  },
+  onRun: (run) => onrun?.(run),
+  get choiceSources() {
+    return choiceSources;
+  },
 });
 
+function formatToolArgs(args: Record<string, unknown>): string {
+  try {
+    return JSON.stringify(args, null, 2);
+  } catch {
+    return '';
+  }
+}
+
 // F1 (#2904 review): the whole body runs under `untrack` so the effect takes
 // NO dependency on any $state read transitively by loadThreads/loadModels/
 // startPolling (e.g. controller.pendingSends inside startPolling). Without
@@ -365,7 +448,18 @@ async function handleConfirmAction(requestId: string) {
         </p>
       {/if}
 
-      {#if controller.surfaces.length === 0}
+      {#if controller.status.state === 'working'}
+        <div class="assistant-dock-status" role="status" aria-live="polite">
+          <span class="assistant-dock-status-label">{controller.status.label}</span>
+          {#if controller.status.cancellable}
+            <Button type="button" size="sm" variant="ghost" onclick={() => controller.cancel()}>
+              {t(M['chat.assistant_dock.stop'])}
+            </Button>
+          {/if}
+        </div>
+      {/if}
+
+      {#if controller.surfaces.length === 0 && !pageTools}
         <p class="assistant-dock-empty">
           {t(M['chat.assistant_dock.no_surfaces'])}
         </p>
@@ -423,6 +517,54 @@ async function handleConfirmAction(requestId: string) {
           {/each}
         </ul>
 
+        {#if controller.streamingText}
+          <div
+            class="assistant-dock-streaming"
+            aria-label={t(M['chat.assistant_dock.reply_in_progress'])}
+          >
+            <MessageBubble variant="agent" own={false}>
+              {#snippet children()}
+                <p class="assistant-dock-message-content">{controller.streamingText}</p>
+              {/snippet}
+            </MessageBubble>
+          </div>
+        {/if}
+
+        {#each controller.toolRequests.filter((r) => r.status === 'waiting') as request (request.id)}
+          <div class="assistant-dock-tool-request" role="group" aria-label={t(M['chat.assistant_dock.tool_request_title'])}>
+            <p class="assistant-dock-tool-request-title">
+              {t(M['chat.assistant_dock.tool_request_title'])}
+            </p>
+            <p class="assistant-dock-tool-request-description">{request.description || request.name}</p>
+            {#if request.effect === 'destructive'}
+              <p class="assistant-dock-tool-request-warning">
+                {t(M['chat.assistant_dock.tool_request_destructive'])}
+              </p>
+            {/if}
+            <details class="assistant-dock-tool-request-details">
+              <summary>{t(M['chat.assistant_dock.tool_request_details'])}</summary>
+              <pre>{formatToolArgs(request.args)}</pre>
+            </details>
+            <div class="assistant-dock-tool-request-actions">
+              <Button type="button" size="sm" onclick={() => controller.approveToolRequest(request.id)}>
+                {t(M['chat.assistant_dock.tool_request_allow'])}
+              </Button>
+              <Button type="button" size="sm" variant="ghost" onclick={() => controller.declineToolRequest(request.id)}>
+                {t(M['chat.assistant_dock.tool_request_decline'])}
+              </Button>
+            </div>
+          </div>
+        {/each}
+
+        <AssistantChoiceCards
+          choices={controller.choices}
+          onchoose={(setId, optionId) => void controller.chooseOption(setId, optionId)}
+          ondismiss={(setId) => controller.dismissChoices(setId)}
+          onpreview={(setId, optionId) => void controller.previewOption(setId, optionId)}
+          oncommit={(setId) => void controller.commitOption(setId)}
+          oncancel={(setId) => controller.cancelChoices(setId)}
+        />
+
         {#if controller.actions.size > 0}
           <ul class="assistant-dock-actions">
             {#each [...controller.actions.entries()] as [requestId, action] (requestId)}
@@ -524,6 +666,8 @@ async function handleConfirmAction(requestId: string) {
           onupload={handleUpload}
           disabled={!controller.activeThreadId}
           placeholder={composerPlaceholder}
+          {dictation}
+          {transcribe}
         />
       </div>
     </div>
@@ -549,10 +693,59 @@ async function handleConfirmAction(requestId: string) {
     min-height: 0;
   }
 
+  .assistant-dock-status {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    padding: 0.35rem 0.75rem;
+    border-bottom: 1px solid var(--smrt-color-outline-variant, #c4c7c5);
+    font-size: var(--smrt-typography-body-medium-size, 0.85rem);
+    color: var(--smrt-color-on-surface-variant, #44474e);
+  }
+
+  .assistant-dock-tool-request {
+    margin: 0.5rem 0;
+    padding: 0.75rem;
+    border: 1px solid var(--smrt-color-outline-variant, #c4c7c5);
+    border-radius: var(--smrt-radius-md, 8px);
+    background: var(--smrt-color-surface-container, #f3f3f3);
+  }
+
+  .assistant-dock-tool-request p {
+    margin: 0 0 0.4rem;
+  }
+
+  .assistant-dock-tool-request-title {
+    font-weight: var(--smrt-typography-weight-semibold, 600);
+  }
+
+  .assistant-dock-tool-request-warning {
+    color: var(--smrt-color-error, #b3261e);
+  }
+
+  .assistant-dock-tool-request-details pre {
+    max-height: 10rem;
+    overflow: auto;
+    font-size: var(--smrt-typography-body-small-size, 0.75rem);
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+
+  .assistant-dock-tool-request-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin-top: 0.5rem;
+  }
+
   .assistant-dock-threads {
     display: flex;
     flex-shrink: 0;
     min-height: 0;
+    /* A long thread title must not squeeze the conversation (titles clip). */
+    max-width: min(16rem, 40%);
+    min-width: 0;
   }
 
   .assistant-dock .assistant-dock-layout > :global(.assistant-dock-threads-toggle) {
@@ -571,6 +764,7 @@ async function handleConfirmAction(requestId: string) {
       gap: var(--smrt-spacing-2, 8px);
       flex-shrink: 0;
       width: 100%;
+      min-height: 44px;
       padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-3, 12px);
       border: none;
       border-bottom: 1px solid var(--smrt-color-outline-variant, #c4c6cf);
@@ -604,6 +798,7 @@ async function handleConfirmAction(requestId: string) {
 
     .assistant-dock-layout[data-threads-open] .assistant-dock-threads {
       display: flex;
+      max-width: none;
       max-height: 40%;
       border-bottom: 1px solid var(--smrt-color-outline-variant, #c4c6cf);
     }

package/dist/svelte/components/assistant/AssistantDock.svelte.d.ts

@@ -1,7 +1,11 @@
 import type { DataSurfaceActionRequest, DataSurfaceActionResult, DataSurfaceIdentity, DataSurfaceRegistry } from '@happyvertical/smrt-ui/data-surface';
+import type { DictationSourceProvider, DictationTranscribe } from '@happyvertical/smrt-ui/forms';
 import { type Snippet } from 'svelte';
+import type { AssistantStatus } from '../../../assistant-turn-events.js';
+import type { AssistantChoiceSourceRegistry } from './assistant-choices.svelte.js';
 import type { AssistantMessage, AssistantTransport } from './assistant-transport.js';
-import { type AssistantActionClient, type AssistantActionOutcome, type AssistantDockController } from './create-assistant-dock-controller.svelte.js';
+import { type AssistantClientTool, type AssistantClientToolPolicy, type AssistantClientToolSource } from './client-tools.js';
+import { type AssistantActionClient, type AssistantActionOutcome, type AssistantDockController, type AssistantRun } from './create-assistant-dock-controller.svelte.js';
 export interface Props {
     /** Thread/message I/O backend; see `./assistant-transport.js`. */
     transport: AssistantTransport;
@@ -50,6 +54,39 @@ export interface Props {
     /** Placeholder for the composer's empty textarea (#2991). Defaults to the
      * composer's own placeholder. */
     composerPlaceholder?: string;
+    /** The page's browser tools (#2908) — typically
+     * `installWebMcpPageToolRegistry()` from
+     * `@happyvertical/smrt-web/webmcp-page-tools`. Offered to the model each
+     * turn; see `./client-tools.ts` for when a call waits for the user. */
+    pageTools?: AssistantClientToolSource;
+    /** Narrows when a browser tool call waits for the user (#2908).
+     * Destructive calls always wait. */
+    clientToolPolicy?: (tool: AssistantClientTool) => AssistantClientToolPolicy;
+    /** Called whenever the assistant's generic status changes (#2908), for a
+     * host's own "working" line. Also readable as `controller.status`. */
+    onstatus?: (status: AssistantStatus) => void;
+    /** Waits for the page to settle after a step's browser tools ran, before
+     * the turn resumes. See `AssistantDockControllerOptions.settle`. */
+    settle?: () => Promise<void> | void;
+    /** Narrows the page tools the dock declares and runs (e.g. a person's
+     * setting). See `AssistantDockControllerOptions.clientToolFilter`. */
+    clientToolFilter?: (tool: AssistantClientTool) => boolean;
+    /** How long a paused run may wait before it stops. Default 15 min. */
+    maxPauseMs?: number;
+    /** Called whenever the supervised run changes (#assistant-watch). Also
+     * readable as `controller.run`. */
+    onrun?: (run: AssistantRun | null) => void;
+    /** Page features that can offer a few options for the person to pick
+     * (see `./assistant-choices.svelte.ts`). The options show as cards here;
+     * the person's click applies one. */
+    choiceSources?: AssistantChoiceSourceRegistry;
+    /** Speak instead of typing in the composer (a speech source, e.g.
+     * smrt-svelte's `createSttDictationSource()`); see `AssistantComposer`. */
+    dictation?: DictationSourceProvider | null;
+    /** Writes a recorded message down when the browser cannot recognise
+     * speech (Firefox, Brave), e.g. smrt-ui's `createHttpTranscriber()`;
+     * see `AssistantComposer`. */
+    transcribe?: DictationTranscribe | null;
 }
 declare const AssistantDock: import("svelte").Component<Props, {}, "">;
 type AssistantDock = ReturnType<typeof AssistantDock>;

package/dist/svelte/components/assistant/AssistantDock.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AssistantDock.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/assistant/AssistantDock.svelte.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EACV,wBAAwB,EACxB,uBAAuB,EACvB,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,qCAAqC,CAAC;AAG7C,OAAO,EAAE,KAAK,OAAO,EAAiB,MAAM,QAAQ,CAAC;AAOrD,OAAO,KAAK,EAEV,gBAAgB,EAChB,kBAAkB,EACnB,MAAM,0BAA0B,CAAC;AAElC,OAAO,EACL,KAAK,qBAAqB,EAC1B,KAAK,sBAAsB,EAC3B,KAAK,uBAAuB,EAE7B,MAAM,8CAA8C,CAAC;AAGtD,MAAM,WAAW,KAAK;IACpB,kEAAkE;IAClE,SAAS,EAAE,kBAAkB,CAAC;IAC9B;;qBAEiB;IACjB,QAAQ,EAAE,mBAAmB,CAAC;IAC9B;qEACiE;IACjE,YAAY,CAAC,EAAE,qBAAqB,CAAC;IACrC;;;;;;;;gEAQ4D;IAC5D,QAAQ,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACjC,yEAAyE;IACzE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;0EAIsE;IACtE,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC;IACvC;;;yEAGqE;IACrE,YAAY,CAAC,EAAE,CAAC,UAAU,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAC7D;2DACuD;IACvD,eAAe,CAAC,EAAE,CAChB,OAAO,EAAE,wBAAwB,EACjC,MAAM,EAAE,uBAAuB,KAC5B,IAAI,CAAC;IACV;;2DAEuD;IACvD,eAAe,CAAC,EAAE,CAChB,OAAO,EAAE,wBAAwB,EACjC,OAAO,EAAE,sBAAsB,KAC5B,IAAI,CAAC;IACV;;;0DAGsD;IACtD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;qCACiC;IACjC,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAwYD,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"AssistantDock.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/assistant/AssistantDock.svelte.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EACV,wBAAwB,EACxB,uBAAuB,EACvB,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,qCAAqC,CAAC;AAC7C,OAAO,KAAK,EACV,uBAAuB,EACvB,mBAAmB,EACpB,MAAM,8BAA8B,CAAC;AAGtC,OAAO,EAAE,KAAK,OAAO,EAAiB,MAAM,QAAQ,CAAC;AACrD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAQzE,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,+BAA+B,CAAC;AACnF,OAAO,KAAK,EAEV,gBAAgB,EAChB,kBAAkB,EACnB,MAAM,0BAA0B,CAAC;AAElC,OAAO,EACL,KAAK,mBAAmB,EACxB,KAAK,yBAAyB,EAC9B,KAAK,yBAAyB,EAE/B,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EACL,KAAK,qBAAqB,EAC1B,KAAK,sBAAsB,EAC3B,KAAK,uBAAuB,EAC5B,KAAK,YAAY,EAElB,MAAM,8CAA8C,CAAC;AAGtD,MAAM,WAAW,KAAK;IACpB,kEAAkE;IAClE,SAAS,EAAE,kBAAkB,CAAC;IAC9B;;qBAEiB;IACjB,QAAQ,EAAE,mBAAmB,CAAC;IAC9B;qEACiE;IACjE,YAAY,CAAC,EAAE,qBAAqB,CAAC;IACrC;;;;;;;;gEAQ4D;IAC5D,QAAQ,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACjC,yEAAyE;IACzE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;0EAIsE;IACtE,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC;IACvC;;;yEAGqE;IACrE,YAAY,CAAC,EAAE,CAAC,UAAU,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAC7D;2DACuD;IACvD,eAAe,CAAC,EAAE,CAChB,OAAO,EAAE,wBAAwB,EACjC,MAAM,EAAE,uBAAuB,KAC5B,IAAI,CAAC;IACV;;2DAEuD;IACvD,eAAe,CAAC,EAAE,CAChB,OAAO,EAAE,wBAAwB,EACjC,OAAO,EAAE,sBAAsB,KAC5B,IAAI,CAAC;IACV;;;0DAGsD;IACtD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;qCACiC;IACjC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;2EAGuE;IACvE,SAAS,CAAC,EAAE,yBAAyB,CAAC;IACtC;wCACoC;IACpC,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,mBAAmB,KAAK,yBAAyB,CAAC;IAC5E;0EACsE;IACtE,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;IAC7C;wEACoE;IACpE,MAAM,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IACpC;0EACsE;IACtE,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,mBAAmB,KAAK,OAAO,CAAC;IAC1D,sEAAsE;IACtE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;uCACmC;IACnC,KAAK,CAAC,EAAE,CAAC,GAAG,EAAE,YAAY,GAAG,IAAI,KAAK,IAAI,CAAC;IAC3C;;yCAEqC;IACrC,aAAa,CAAC,EAAE,6BAA6B,CAAC;IAC9C;+EAC2E;IAC3E,SAAS,CAAC,EAAE,uBAAuB,GAAG,IAAI,CAAC;IAC3C;;kCAE8B;IAC9B,UAAU,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAC;CACzC;AAkeD,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/svelte/components/assistant/AssistantThreadList.svelte

@@ -99,9 +99,10 @@ const { threads, activeThreadId = null, onselect, oncreate }: Props = $props();
   :global(.assistant-thread-list-item) {
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    justify-content: flex-start;
     gap: var(--smrt-spacing-2, 8px);
     width: 100%;
+    min-width: 0;
     padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-3, 12px);
     border: none;
     border-radius: var(--smrt-radius-medium, 8px);
@@ -112,6 +113,16 @@ const { threads, activeThreadId = null, onselect, oncreate }: Props = $props();
     cursor: pointer;
   }
 
+  /* The Button's inner row: title left (clipped with an ellipsis), count right. */
+  :global(.assistant-thread-list-item > .content) {
+    flex: 1 1 auto;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--smrt-spacing-2, 8px);
+  }
+
   :global(.assistant-thread-list-item:hover) {
     background: var(--smrt-color-surface-container, #f0f0f4);
   }
@@ -123,6 +134,7 @@ const { threads, activeThreadId = null, onselect, oncreate }: Props = $props();
   }
 
   .title {
+    min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;