@assistant-ui/react 0.5.40 → 0.5.41

package/dist/index.mjs

@@ -204,7 +204,8 @@ var makeThreadActionStore = (runtimeStore) => {
       startRun: (parentId) => runtimeStore.getState().startRun(parentId),
       append: (message) => runtimeStore.getState().append(message),
       cancelRun: () => runtimeStore.getState().cancelRun(),
-      addToolResult: (options) => runtimeStore.getState().addToolResult(options)
+      addToolResult: (options) => runtimeStore.getState().addToolResult(options),
+      speak: (messageId) => runtimeStore.getState().speak(messageId)
     })
   );
 };
@@ -1057,31 +1058,77 @@ var EdgeChatAdapter = class {
 var useEdgeRuntime = ({
   initialMessages,
   maxToolRoundtrips,
+  adapters,
   ...options
 }) => {
   const [adapter] = useState3(() => new EdgeChatAdapter(options));
-  return useLocalRuntime(adapter, { initialMessages, maxToolRoundtrips });
+  return useLocalRuntime(adapter, {
+    initialMessages,
+    maxToolRoundtrips,
+    adapters
+  });
 };
 
 // src/runtimes/local/shouldContinue.tsx
 var shouldContinue = (result) => result.status?.type === "requires-action" && result.status.reason === "tool-calls" && result.content.every((c) => c.type !== "tool-call" || !!c.result);
 
+// src/utils/getThreadMessageText.tsx
+var getThreadMessageText = (message) => {
+  const textParts = message.content.filter(
+    (part) => part.type === "text"
+  );
+  return textParts.map((part) => part.text).join("\n\n");
+};
+
+// src/runtimes/speech/WebSpeechSynthesisAdapter.ts
+var WebSpeechSynthesisAdapter = class {
+  speak(message) {
+    const text = getThreadMessageText(message);
+    const utterance = new SpeechSynthesisUtterance(text);
+    let ended = false;
+    const endHandlers = /* @__PURE__ */ new Set();
+    const handleEnd = () => {
+      if (ended) return;
+      ended = true;
+      endHandlers.forEach((handler) => handler());
+    };
+    utterance.addEventListener("end", handleEnd);
+    utterance.addEventListener("error", handleEnd);
+    window.speechSynthesis.speak(utterance);
+    return {
+      stop: () => {
+        window.speechSynthesis.cancel();
+        handleEnd();
+      },
+      onEnd: (callback) => {
+        if (ended) {
+          let cancelled = false;
+          queueMicrotask(() => {
+            if (!cancelled) callback();
+          });
+          return () => {
+            cancelled = true;
+          };
+        } else {
+          endHandlers.add(callback);
+          return () => {
+            endHandlers.delete(callback);
+          };
+        }
+      }
+    };
+  }
+};
+
 // src/runtimes/local/LocalThreadRuntime.tsx
-var CAPABILITIES = Object.freeze({
-  switchToBranch: true,
-  edit: true,
-  reload: true,
-  cancel: true,
-  copy: true
-});
 var LocalThreadRuntime = class {
-  constructor(configProvider, adapter, options) {
+  constructor(configProvider, adapter, { initialMessages, ...options }) {
     this.configProvider = configProvider;
     this.adapter = adapter;
     this.options = options;
-    if (options.initialMessages) {
+    if (initialMessages) {
       let parentId = null;
-      const messages = fromCoreMessages(options.initialMessages);
+      const messages = fromCoreMessages(initialMessages);
       for (const message of messages) {
         this.repository.addOrUpdateMessage(parentId, message);
         parentId = message.id;
@@ -1091,7 +1138,14 @@ var LocalThreadRuntime = class {
   _subscriptions = /* @__PURE__ */ new Set();
   abortController = null;
   repository = new MessageRepository();
-  capabilities = CAPABILITIES;
+  capabilities = {
+    switchToBranch: true,
+    edit: true,
+    reload: true,
+    cancel: true,
+    unstable_copy: true,
+    speak: false
+  };
   isDisabled = false;
   get messages() {
     return this.repository.getMessages();
@@ -1103,6 +1157,15 @@ var LocalThreadRuntime = class {
       this.notifySubscribers();
     }
   };
+  _options;
+  set options({ initialMessages, ...options }) {
+    this._options = options;
+    const canSpeak = options.adapters?.speech !== void 0;
+    if (this.capabilities.speak !== canSpeak) {
+      this.capabilities.speak = canSpeak;
+      this.notifySubscribers();
+    }
+  }
   getBranches(messageId) {
     return this.repository.getBranches(messageId);
   }
@@ -1176,7 +1239,7 @@ var LocalThreadRuntime = class {
       this.repository.addOrUpdateMessage(parentId, message);
       this.notifySubscribers();
     };
-    const maxToolRoundtrips = this.options.maxToolRoundtrips ?? 1;
+    const maxToolRoundtrips = this._options.maxToolRoundtrips ?? 1;
     const toolRoundtrips = message.metadata?.roundtrips?.length ?? 0;
     if (toolRoundtrips > maxToolRoundtrips) {
       updateMessage({
@@ -1240,7 +1303,11 @@ var LocalThreadRuntime = class {
     this._subscriptions.add(callback);
     return () => this._subscriptions.delete(callback);
   }
-  addToolResult({ messageId, toolCallId, result }) {
+  addToolResult({
+    messageId,
+    toolCallId,
+    result
+  }) {
     let { parentId, message } = this.repository.getMessage(messageId);
     if (message.role !== "assistant")
       throw new Error("Tried to add tool result to non-assistant message");
@@ -1267,6 +1334,11 @@ var LocalThreadRuntime = class {
       this.performRoundtrip(parentId, message);
     }
   }
+  speak(messageId) {
+    const { message } = this.repository.getMessage(messageId);
+    const adapter = new WebSpeechSynthesisAdapter();
+    return adapter.speak(message);
+  }
   export() {
     return this.repository.export();
   }
@@ -1425,14 +1497,6 @@ var fromThreadMessageLike = (like, fallbackId, fallbackStatus) => {
   }
 };
 
-// src/utils/getThreadMessageText.tsx
-var getThreadMessageText = (message) => {
-  const textParts = message.content.filter(
-    (part) => part.type === "text"
-  );
-  return textParts.map((part) => part.text).join("\n\n");
-};
-
 // src/runtimes/external-store/ExternalStoreThreadRuntime.tsx
 var hasUpcomingMessage = (isRunning, messages) => {
   return isRunning && messages[messages.length - 1]?.role !== "assistant";
@@ -1446,7 +1510,8 @@ var ExternalStoreThreadRuntime = class {
     edit: false,
     reload: false,
     cancel: false,
-    copy: false
+    unstable_copy: false,
+    speak: false
   };
   get capabilities() {
     return this._capabilities;
@@ -1476,7 +1541,8 @@ var ExternalStoreThreadRuntime = class {
       edit: this._store.onEdit !== void 0,
       reload: this._store.onReload !== void 0,
       cancel: this._store.onCancel !== void 0,
-      copy: this._store.onCopy !== null
+      unstable_copy: this._store.unstable_capabilities?.copy !== null,
+      speak: this._store.onSpeak !== void 0
     };
     if (oldStore) {
       if (oldStore.convertMessage !== store.convertMessage) {
@@ -1573,6 +1639,17 @@ var ExternalStoreThreadRuntime = class {
       this.updateMessages(messages);
     }, 0);
   }
+  addToolResult(options) {
+    if (!this._store.onAddToolResult)
+      throw new Error("Runtime does not support tool results.");
+    this._store.onAddToolResult(options);
+  }
+  speak(messageId) {
+    if (!this._store.onSpeak)
+      throw new Error("Runtime does not support speaking.");
+    const { message } = this.repository.getMessage(messageId);
+    return this._store.onSpeak(message);
+  }
   subscribe(callback) {
     this._subscriptions.add(callback);
     return () => this._subscriptions.delete(callback);
@@ -1582,11 +1659,6 @@ var ExternalStoreThreadRuntime = class {
       messages.flatMap(getExternalStoreMessage).filter((m) => m != null)
     );
   };
-  addToolResult(options) {
-    if (!this._store.onAddToolResult)
-      throw new Error("Runtime does not support tool results.");
-    this._store.onAddToolResult(options);
-  }
 };
 
 // src/runtimes/external-store/ExternalStoreRuntime.tsx
@@ -1977,8 +2049,8 @@ var useActionBarCopy = ({
   const { useMessage, useMessageUtils, useEditComposer } = useMessageContext();
   const hasCopyableContent = useCombinedStore(
     [useMessage, useEditComposer],
-    (m, c) => {
-      return !c.isEditing && m.message.content.some((c2) => c2.type === "text" && c2.text.length > 0);
+    ({ message }, c) => {
+      return !c.isEditing && (message.role !== "assistant" || message.status.type !== "running") && message.content.some((c2) => c2.type === "text" && c2.text.length > 0);
     }
   );
   const callback = useCallback3(() => {
@@ -2030,6 +2102,38 @@ var useActionBarReload = () => {
   return callback;
 };
 
+// src/primitive-hooks/actionBar/useActionBarSpeak.tsx
+import { useCallback as useCallback6 } from "react";
+var useActionBarSpeak = () => {
+  const { useThreadActions } = useThreadContext();
+  const { useMessage, useEditComposer, useMessageUtils } = useMessageContext();
+  const hasSpeakableContent = useCombinedStore(
+    [useMessage, useEditComposer],
+    ({ message }, c) => {
+      return !c.isEditing && (message.role !== "assistant" || message.status.type !== "running") && message.content.some((c2) => c2.type === "text" && c2.text.length > 0);
+    }
+  );
+  const callback = useCallback6(async () => {
+    const { message } = useMessage.getState();
+    const utt = useThreadActions.getState().speak(message.id);
+    useMessageUtils.getState().addUtterance(utt);
+  }, [useThreadActions, useMessage, useMessageUtils]);
+  if (!hasSpeakableContent) return null;
+  return callback;
+};
+
+// src/primitive-hooks/actionBar/useActionBarStopSpeaking.tsx
+import { useCallback as useCallback7 } from "react";
+var useActionBarStopSpeaking = () => {
+  const { useMessageUtils } = useMessageContext();
+  const isSpeaking = useMessageUtils((u) => u.isSpeaking);
+  const callback = useCallback7(async () => {
+    useMessageUtils.getState().stopSpeaking();
+  }, [useMessageUtils]);
+  if (!isSpeaking) return null;
+  return callback;
+};
+
 // src/primitive-hooks/branchPicker/useBranchPickerCount.tsx
 var useBranchPickerCount = () => {
   const { useMessage } = useMessageContext();
@@ -2038,7 +2142,7 @@ var useBranchPickerCount = () => {
 };
 
 // src/primitive-hooks/branchPicker/useBranchPickerNext.tsx
-import { useCallback as useCallback6 } from "react";
+import { useCallback as useCallback8 } from "react";
 var useBranchPickerNext = () => {
   const { useThreadActions } = useThreadContext();
   const { useMessage, useEditComposer } = useMessageContext();
@@ -2046,7 +2150,7 @@ var useBranchPickerNext = () => {
     [useMessage, useEditComposer],
     (m, c) => c.isEditing || m.branches.indexOf(m.message.id) + 1 >= m.branches.length
   );
-  const callback = useCallback6(() => {
+  const callback = useCallback8(() => {
     const { message, branches } = useMessage.getState();
     useThreadActions.getState().switchToBranch(branches[branches.indexOf(message.id) + 1]);
   }, [useThreadActions, useMessage]);
@@ -2062,7 +2166,7 @@ var useBranchPickerNumber = () => {
 };
 
 // src/primitive-hooks/branchPicker/useBranchPickerPrevious.tsx
-import { useCallback as useCallback7 } from "react";
+import { useCallback as useCallback9 } from "react";
 var useBranchPickerPrevious = () => {
   const { useThreadActions } = useThreadContext();
   const { useMessage, useEditComposer } = useMessageContext();
@@ -2070,7 +2174,7 @@ var useBranchPickerPrevious = () => {
     [useMessage, useEditComposer],
     (m, c) => c.isEditing || m.branches.indexOf(m.message.id) <= 0
   );
-  const callback = useCallback7(() => {
+  const callback = useCallback9(() => {
     const { message, branches } = useMessage.getState();
     useThreadActions.getState().switchToBranch(branches[branches.indexOf(message.id) - 1]);
   }, [useThreadActions, useMessage]);
@@ -2079,11 +2183,11 @@ var useBranchPickerPrevious = () => {
 };
 
 // src/primitive-hooks/composer/useComposerCancel.tsx
-import { useCallback as useCallback8 } from "react";
+import { useCallback as useCallback10 } from "react";
 var useComposerCancel = () => {
   const { useComposer } = useComposerContext();
   const disabled = useComposer((c) => !c.canCancel);
-  const callback = useCallback8(() => {
+  const callback = useCallback10(() => {
     const { cancel } = useComposer.getState();
     cancel();
   }, [useComposer]);
@@ -2102,7 +2206,7 @@ var useComposerIf = (props) => {
 };
 
 // src/primitive-hooks/composer/useComposerSend.tsx
-import { useCallback as useCallback9 } from "react";
+import { useCallback as useCallback11 } from "react";
 var useComposerSend = () => {
   const {
     useThread,
@@ -2114,7 +2218,7 @@ var useComposerSend = () => {
     [useThread, useComposer],
     (t, c) => t.isRunning || !c.isEditing || c.text.length === 0
   );
-  const callback = useCallback9(() => {
+  const callback = useCallback11(() => {
     const composerState = useComposer.getState();
     if (!composerState.isEditing) return;
     composerState.send();
@@ -2169,7 +2273,7 @@ var useMessageIf = (props) => {
   const { useMessage, useMessageUtils } = useMessageContext();
   return useCombinedStore(
     [useMessage, useMessageUtils],
-    ({ message, branches, isLast }, { isCopied, isHovering }) => {
+    ({ message, branches, isLast }, { isCopied, isHovering, isSpeaking }) => {
       if (props.hasBranches === true && branches.length < 2) return false;
       if (props.user && message.role !== "user") return false;
       if (props.assistant && message.role !== "assistant") return false;
@@ -2177,6 +2281,8 @@ var useMessageIf = (props) => {
       if (props.lastOrHover === true && !isHovering && !isLast) return false;
       if (props.copied === true && !isCopied) return false;
       if (props.copied === false && isCopied) return false;
+      if (props.speaking === true && !isSpeaking) return false;
+      if (props.speaking === false && isSpeaking) return false;
       return true;
     }
   );
@@ -2205,11 +2311,11 @@ var useThreadEmpty = () => {
 };
 
 // src/primitive-hooks/thread/useThreadScrollToBottom.tsx
-import { useCallback as useCallback10 } from "react";
+import { useCallback as useCallback12 } from "react";
 var useThreadScrollToBottom = () => {
   const { useComposer, useViewport } = useThreadContext();
   const isAtBottom = useViewport((s) => s.isAtBottom);
-  const handleScrollToBottom = useCallback10(() => {
+  const handleScrollToBottom = useCallback12(() => {
     useViewport.getState().scrollToBottom();
     useComposer.getState().focus();
   }, [useViewport, useComposer]);
@@ -2218,7 +2324,7 @@ var useThreadScrollToBottom = () => {
 };
 
 // src/primitive-hooks/thread/useThreadSuggestion.tsx
-import { useCallback as useCallback11 } from "react";
+import { useCallback as useCallback13 } from "react";
 var useThreadSuggestion = ({
   prompt,
   autoSend
@@ -2226,7 +2332,7 @@ var useThreadSuggestion = ({
   const { useThread, useComposer } = useThreadContext();
   const append = useAppendMessage();
   const disabled = useThread((t) => t.isDisabled);
-  const callback = useCallback11(() => {
+  const callback = useCallback13(() => {
     const thread = useThread.getState();
     const composer = useComposer.getState();
     if (autoSend && !thread.isRunning) {
@@ -2246,7 +2352,9 @@ __export(actionBar_exports, {
   Copy: () => ActionBarPrimitiveCopy,
   Edit: () => ActionBarPrimitiveEdit,
   Reload: () => ActionBarPrimitiveReload,
-  Root: () => ActionBarPrimitiveRoot
+  Root: () => ActionBarPrimitiveRoot,
+  Speak: () => ActionBarPrimitiveSpeak,
+  StopSpeaking: () => ActionBarPrimitiveStopSpeaking
 });
 
 // src/primitives/actionBar/ActionBarRoot.tsx
@@ -2348,6 +2456,40 @@ var ActionBarPrimitiveEdit = createActionButton(
   useActionBarEdit
 );
 
+// src/primitives/actionBar/ActionBarSpeak.tsx
+var ActionBarPrimitiveSpeak = createActionButton(
+  "ActionBarPrimitive.Speak",
+  useActionBarSpeak
+);
+
+// src/primitives/actionBar/ActionBarStopSpeaking.tsx
+import { forwardRef as forwardRef7 } from "react";
+import { useEscapeKeydown } from "@radix-ui/react-use-escape-keydown";
+import { Primitive as Primitive4 } from "@radix-ui/react-primitive";
+import { composeEventHandlers as composeEventHandlers2 } from "@radix-ui/primitive";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var ActionBarPrimitiveStopSpeaking = forwardRef7((props, ref) => {
+  const callback = useActionBarStopSpeaking();
+  useEscapeKeydown((e) => {
+    if (callback) {
+      e.preventDefault();
+      callback();
+    }
+  });
+  return /* @__PURE__ */ jsx11(
+    Primitive4.button,
+    {
+      type: "button",
+      disabled: !callback,
+      ...props,
+      ref,
+      onClick: composeEventHandlers2(props.onClick, () => {
+        callback?.();
+      })
+    }
+  );
+});
+
 // src/primitives/assistantModal/index.ts
 var assistantModal_exports = {};
 __export(assistantModal_exports, {
@@ -2360,7 +2502,7 @@ __export(assistantModal_exports, {
 // src/primitives/assistantModal/AssistantModalRoot.tsx
 import { useState as useState9 } from "react";
 import * as PopoverPrimitive2 from "@radix-ui/react-popover";
-import { composeEventHandlers as composeEventHandlers2 } from "@radix-ui/primitive";
+import { composeEventHandlers as composeEventHandlers3 } from "@radix-ui/primitive";
 
 // src/utils/hooks/useOnComposerFocus.tsx
 import { useCallbackRef as useCallbackRef2 } from "@radix-ui/react-use-callback-ref";
@@ -2380,7 +2522,7 @@ import * as PopoverPrimitive from "@radix-ui/react-popover";
 var usePopoverScope = PopoverPrimitive.createPopoverScope();
 
 // src/primitives/assistantModal/AssistantModalRoot.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var useAssistantModalOpenState = (defaultOpen = false) => {
   const state = useState9(defaultOpen);
   const [, setOpen] = state;
@@ -2398,12 +2540,12 @@ var AssistantModalPrimitiveRoot = ({
 }) => {
   const scope = usePopoverScope(__scopeAssistantModal);
   const [modalOpen, setOpen] = useAssistantModalOpenState(defaultOpen);
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     PopoverPrimitive2.Root,
     {
       ...scope,
       open: open === void 0 ? modalOpen : open,
-      onOpenChange: composeEventHandlers2(onOpenChange, setOpen),
+      onOpenChange: composeEventHandlers3(onOpenChange, setOpen),
       ...rest
     }
   );
@@ -2411,26 +2553,26 @@ var AssistantModalPrimitiveRoot = ({
 AssistantModalPrimitiveRoot.displayName = "AssistantModalPrimitive.Root";
 
 // src/primitives/assistantModal/AssistantModalTrigger.tsx
-import { forwardRef as forwardRef7 } from "react";
+import { forwardRef as forwardRef8 } from "react";
 import * as PopoverPrimitive3 from "@radix-ui/react-popover";
-import { jsx as jsx12 } from "react/jsx-runtime";
-var AssistantModalPrimitiveTrigger = forwardRef7(
+import { jsx as jsx13 } from "react/jsx-runtime";
+var AssistantModalPrimitiveTrigger = forwardRef8(
   ({
     __scopeAssistantModal,
     ...rest
   }, ref) => {
     const scope = usePopoverScope(__scopeAssistantModal);
-    return /* @__PURE__ */ jsx12(PopoverPrimitive3.Trigger, { ...scope, ...rest, ref });
+    return /* @__PURE__ */ jsx13(PopoverPrimitive3.Trigger, { ...scope, ...rest, ref });
   }
 );
 AssistantModalPrimitiveTrigger.displayName = "AssistantModalPrimitive.Trigger";
 
 // src/primitives/assistantModal/AssistantModalContent.tsx
-import { forwardRef as forwardRef8 } from "react";
+import { forwardRef as forwardRef9 } from "react";
 import * as PopoverPrimitive4 from "@radix-ui/react-popover";
-import { composeEventHandlers as composeEventHandlers3 } from "@radix-ui/primitive";
-import { jsx as jsx13 } from "react/jsx-runtime";
-var AssistantModalPrimitiveContent = forwardRef8(
+import { composeEventHandlers as composeEventHandlers4 } from "@radix-ui/primitive";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var AssistantModalPrimitiveContent = forwardRef9(
   ({
     __scopeAssistantModal,
     side,
@@ -2440,7 +2582,7 @@ var AssistantModalPrimitiveContent = forwardRef8(
     ...props
   }, forwardedRef) => {
     const scope = usePopoverScope(__scopeAssistantModal);
-    return /* @__PURE__ */ jsx13(PopoverPrimitive4.Portal, { ...scope, children: /* @__PURE__ */ jsx13(
+    return /* @__PURE__ */ jsx14(PopoverPrimitive4.Portal, { ...scope, children: /* @__PURE__ */ jsx14(
       PopoverPrimitive4.Content,
       {
         ...scope,
@@ -2448,7 +2590,7 @@ var AssistantModalPrimitiveContent = forwardRef8(
         ref: forwardedRef,
         side: side ?? "top",
         align: align ?? "end",
-        onInteractOutside: composeEventHandlers3(
+        onInteractOutside: composeEventHandlers4(
           onInteractOutside,
           dissmissOnInteractOutside ? void 0 : (e) => e.preventDefault()
         )
@@ -2459,16 +2601,16 @@ var AssistantModalPrimitiveContent = forwardRef8(
 AssistantModalPrimitiveContent.displayName = "AssistantModalPrimitive.Content";
 
 // src/primitives/assistantModal/AssistantModalAnchor.tsx
-import { forwardRef as forwardRef9 } from "react";
+import { forwardRef as forwardRef10 } from "react";
 import * as PopoverPrimitive5 from "@radix-ui/react-popover";
-import { jsx as jsx14 } from "react/jsx-runtime";
-var AssistantModalPrimitiveAnchor = forwardRef9(
+import { jsx as jsx15 } from "react/jsx-runtime";
+var AssistantModalPrimitiveAnchor = forwardRef10(
   ({
     __scopeAssistantModal,
     ...rest
   }, ref) => {
     const scope = usePopoverScope(__scopeAssistantModal);
-    return /* @__PURE__ */ jsx14(PopoverPrimitive5.Anchor, { ...scope, ...rest, ref });
+    return /* @__PURE__ */ jsx15(PopoverPrimitive5.Anchor, { ...scope, ...rest, ref });
   }
 );
 AssistantModalPrimitiveAnchor.displayName = "AssistantModalPrimitive.Anchor";
@@ -2496,24 +2638,24 @@ var BranchPickerPrevious = createActionButton(
 );
 
 // src/primitives/branchPicker/BranchPickerCount.tsx
-import { Fragment, jsx as jsx15 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx16 } from "react/jsx-runtime";
 var BranchPickerPrimitiveCount = () => {
   const branchCount = useBranchPickerCount();
-  return /* @__PURE__ */ jsx15(Fragment, { children: branchCount });
+  return /* @__PURE__ */ jsx16(Fragment, { children: branchCount });
 };
 BranchPickerPrimitiveCount.displayName = "BranchPickerPrimitive.Count";
 
 // src/primitives/branchPicker/BranchPickerNumber.tsx
-import { Fragment as Fragment2, jsx as jsx16 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx17 } from "react/jsx-runtime";
 var BranchPickerPrimitiveNumber = () => {
   const branchNumber = useBranchPickerNumber();
-  return /* @__PURE__ */ jsx16(Fragment2, { children: branchNumber });
+  return /* @__PURE__ */ jsx17(Fragment2, { children: branchNumber });
 };
 BranchPickerPrimitiveNumber.displayName = "BranchPickerPrimitive.Number";
 
 // src/primitives/branchPicker/BranchPickerRoot.tsx
-import { Primitive as Primitive6 } from "@radix-ui/react-primitive";
-import { forwardRef as forwardRef13 } from "react";
+import { Primitive as Primitive7 } from "@radix-ui/react-primitive";
+import { forwardRef as forwardRef14 } from "react";
 
 // src/primitives/message/index.ts
 var message_exports = {};
@@ -2525,17 +2667,17 @@ __export(message_exports, {
 });
 
 // src/primitives/message/MessageRoot.tsx
-import { Primitive as Primitive4 } from "@radix-ui/react-primitive";
+import { Primitive as Primitive5 } from "@radix-ui/react-primitive";
 import {
-  forwardRef as forwardRef10,
-  useCallback as useCallback13
+  forwardRef as forwardRef11,
+  useCallback as useCallback15
 } from "react";
 
 // src/utils/hooks/useManagedRef.ts
-import { useCallback as useCallback12, useRef as useRef3 } from "react";
+import { useCallback as useCallback14, useRef as useRef3 } from "react";
 var useManagedRef = (callback) => {
   const cleanupRef = useRef3();
-  const ref = useCallback12(
+  const ref = useCallback14(
     (el) => {
       if (cleanupRef.current) {
         cleanupRef.current();
@@ -2551,10 +2693,10 @@ var useManagedRef = (callback) => {
 
 // src/primitives/message/MessageRoot.tsx
 import { useComposedRefs } from "@radix-ui/react-compose-refs";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var useIsHoveringRef = () => {
   const { useMessageUtils } = useMessageContext();
-  const callbackRef = useCallback13(
+  const callbackRef = useCallback15(
     (el) => {
       const setIsHovering = useMessageUtils.getState().setIsHovering;
       const handleMouseEnter = () => {
@@ -2575,10 +2717,10 @@ var useIsHoveringRef = () => {
   );
   return useManagedRef(callbackRef);
 };
-var MessagePrimitiveRoot = forwardRef10(({ onMouseEnter, onMouseLeave, ...rest }, forwardRef29) => {
+var MessagePrimitiveRoot = forwardRef11(({ onMouseEnter, onMouseLeave, ...rest }, forwardRef30) => {
   const isHoveringRef = useIsHoveringRef();
-  const ref = useComposedRefs(forwardRef29, isHoveringRef);
-  return /* @__PURE__ */ jsx17(Primitive4.div, { ...rest, ref });
+  const ref = useComposedRefs(forwardRef30, isHoveringRef);
+  return /* @__PURE__ */ jsx18(Primitive5.div, { ...rest, ref });
 });
 MessagePrimitiveRoot.displayName = "MessagePrimitive.Root";
 
@@ -2598,7 +2740,7 @@ import { memo as memo2 } from "react";
 // src/context/providers/ContentPartProvider.tsx
 import { useEffect as useEffect9, useState as useState10 } from "react";
 import { create as create12 } from "zustand";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var COMPLETE_STATUS = {
   type: "complete"
 };
@@ -2661,32 +2803,32 @@ var ContentPartProvider = ({
   children
 }) => {
   const context = useContentPartContext2(partIndex);
-  return /* @__PURE__ */ jsx18(ContentPartContext.Provider, { value: context, children });
+  return /* @__PURE__ */ jsx19(ContentPartContext.Provider, { value: context, children });
 };
 
 // src/primitives/contentPart/ContentPartText.tsx
 import {
-  forwardRef as forwardRef11
+  forwardRef as forwardRef12
 } from "react";
-import { jsx as jsx19 } from "react/jsx-runtime";
-var ContentPartPrimitiveText = forwardRef11(({ smooth = true, component: Component = "span", ...rest }, forwardedRef) => {
+import { jsx as jsx20 } from "react/jsx-runtime";
+var ContentPartPrimitiveText = forwardRef12(({ smooth = true, component: Component = "span", ...rest }, forwardedRef) => {
   const {
     part: { text },
     status
   } = useSmooth(useContentPartText(), smooth);
-  return /* @__PURE__ */ jsx19(Component, { "data-status": status.type, ...rest, ref: forwardedRef, children: text });
+  return /* @__PURE__ */ jsx20(Component, { "data-status": status.type, ...rest, ref: forwardedRef, children: text });
 });
 ContentPartPrimitiveText.displayName = "ContentPartPrimitive.Text";
 
 // src/primitives/contentPart/ContentPartImage.tsx
-import { Primitive as Primitive5 } from "@radix-ui/react-primitive";
-import { forwardRef as forwardRef12 } from "react";
-import { jsx as jsx20 } from "react/jsx-runtime";
-var ContentPartPrimitiveImage = forwardRef12((props, forwardedRef) => {
+import { Primitive as Primitive6 } from "@radix-ui/react-primitive";
+import { forwardRef as forwardRef13 } from "react";
+import { jsx as jsx21 } from "react/jsx-runtime";
+var ContentPartPrimitiveImage = forwardRef13((props, forwardedRef) => {
   const {
     part: { image }
   } = useContentPartImage();
-  return /* @__PURE__ */ jsx20(Primitive5.img, { src: image, ...props, ref: forwardedRef });
+  return /* @__PURE__ */ jsx21(Primitive6.img, { src: image, ...props, ref: forwardedRef });
 });
 ContentPartPrimitiveImage.displayName = "ContentPartPrimitive.Image";
 
@@ -2708,20 +2850,20 @@ var ContentPartPrimitiveInProgress = ({ children }) => {
 ContentPartPrimitiveInProgress.displayName = "ContentPartPrimitive.InProgress";
 
 // src/primitives/message/MessageContent.tsx
-import { jsx as jsx21, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs3 } from "react/jsx-runtime";
 var defaultComponents = {
   Text: () => /* @__PURE__ */ jsxs3("p", { style: { whiteSpace: "pre-line" }, children: [
-    /* @__PURE__ */ jsx21(ContentPartPrimitiveText, {}),
-    /* @__PURE__ */ jsx21(ContentPartPrimitiveInProgress, { children: /* @__PURE__ */ jsx21("span", { style: { fontFamily: "revert" }, children: " \u25CF" }) })
+    /* @__PURE__ */ jsx22(ContentPartPrimitiveText, {}),
+    /* @__PURE__ */ jsx22(ContentPartPrimitiveInProgress, { children: /* @__PURE__ */ jsx22("span", { style: { fontFamily: "revert" }, children: " \u25CF" }) })
   ] }),
-  Image: () => /* @__PURE__ */ jsx21(ContentPartPrimitiveImage, {}),
-  UI: () => /* @__PURE__ */ jsx21(ContentPartPrimitiveDisplay, {}),
+  Image: () => /* @__PURE__ */ jsx22(ContentPartPrimitiveImage, {}),
+  UI: () => /* @__PURE__ */ jsx22(ContentPartPrimitiveDisplay, {}),
   tools: {
     Fallback: (props) => {
       const { useToolUIs } = useAssistantContext();
       const Render = useToolUIs((s) => s.getToolUI(props.part.toolName));
       if (!Render) return null;
-      return /* @__PURE__ */ jsx21(Render, { ...props });
+      return /* @__PURE__ */ jsx22(Render, { ...props });
     }
   }
 };
@@ -2744,16 +2886,16 @@ var MessageContentPartComponent = ({
     case "text":
       if (status.type === "requires-action")
         throw new Error("Encountered unexpected requires-action status");
-      if (part === EMPTY_CONTENT) return /* @__PURE__ */ jsx21(Empty, { part, status });
-      return /* @__PURE__ */ jsx21(Text2, { part, status });
+      if (part === EMPTY_CONTENT) return /* @__PURE__ */ jsx22(Empty, { part, status });
+      return /* @__PURE__ */ jsx22(Text2, { part, status });
     case "image":
       if (status.type === "requires-action")
         throw new Error("Encountered unexpected requires-action status");
-      return /* @__PURE__ */ jsx21(Image2, { part, status });
+      return /* @__PURE__ */ jsx22(Image2, { part, status });
     case "ui":
       if (status.type === "requires-action")
         throw new Error("Encountered unexpected requires-action status");
-      return /* @__PURE__ */ jsx21(UI, { part, status });
+      return /* @__PURE__ */ jsx22(UI, { part, status });
     case "tool-call": {
       const Tool = by_name[part.toolName] || Fallback2;
       const addResult = (result) => addToolResult({
@@ -2761,7 +2903,7 @@ var MessageContentPartComponent = ({
         toolCallId: part.toolCallId,
         result
       });
-      return /* @__PURE__ */ jsx21(Tool, { part, status, addResult });
+      return /* @__PURE__ */ jsx22(Tool, { part, status, addResult });
     }
     default:
       const unhandledType = type;
@@ -2772,7 +2914,7 @@ var MessageContentPartImpl = ({
   partIndex,
   components
 }) => {
-  return /* @__PURE__ */ jsx21(ContentPartProvider, { partIndex, children: /* @__PURE__ */ jsx21(MessageContentPartComponent, { components }) });
+  return /* @__PURE__ */ jsx22(ContentPartProvider, { partIndex, children: /* @__PURE__ */ jsx22(MessageContentPartComponent, { components }) });
 };
 var MessageContentPart = memo2(
   MessageContentPartImpl,
@@ -2785,7 +2927,7 @@ var MessagePrimitiveContent = ({
   const contentLength = useMessage((s) => s.message.content.length) || 1;
   return new Array(contentLength).fill(null).map((_, idx) => {
     const partIndex = idx;
-    return /* @__PURE__ */ jsx21(
+    return /* @__PURE__ */ jsx22(
       MessageContentPart,
       {
         partIndex,
@@ -2804,9 +2946,9 @@ var MessagePrimitiveInProgress = () => {
 MessagePrimitiveInProgress.displayName = "MessagePrimitive.InProgress";
 
 // src/primitives/branchPicker/BranchPickerRoot.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
-var BranchPickerPrimitiveRoot = forwardRef13(({ hideWhenSingleBranch, ...rest }, ref) => {
-  return /* @__PURE__ */ jsx22(MessagePrimitiveIf, { hasBranches: hideWhenSingleBranch ? true : void 0, children: /* @__PURE__ */ jsx22(Primitive6.div, { ...rest, ref }) });
+import { jsx as jsx23 } from "react/jsx-runtime";
+var BranchPickerPrimitiveRoot = forwardRef14(({ hideWhenSingleBranch, ...rest }, ref) => {
+  return /* @__PURE__ */ jsx23(MessagePrimitiveIf, { hasBranches: hideWhenSingleBranch ? true : void 0, children: /* @__PURE__ */ jsx23(Primitive7.div, { ...rest, ref }) });
 });
 BranchPickerPrimitiveRoot.displayName = "BranchPickerPrimitive.Root";
 
@@ -2821,44 +2963,44 @@ __export(composer_exports, {
 });
 
 // src/primitives/composer/ComposerRoot.tsx
-import { composeEventHandlers as composeEventHandlers4 } from "@radix-ui/primitive";
-import { Primitive as Primitive7 } from "@radix-ui/react-primitive";
+import { composeEventHandlers as composeEventHandlers5 } from "@radix-ui/primitive";
+import { Primitive as Primitive8 } from "@radix-ui/react-primitive";
 import {
-  forwardRef as forwardRef14
+  forwardRef as forwardRef15
 } from "react";
-import { jsx as jsx23 } from "react/jsx-runtime";
-var ComposerPrimitiveRoot = forwardRef14(({ onSubmit, ...rest }, forwardedRef) => {
+import { jsx as jsx24 } from "react/jsx-runtime";
+var ComposerPrimitiveRoot = forwardRef15(({ onSubmit, ...rest }, forwardedRef) => {
   const send = useComposerSend();
   const handleSubmit = (e) => {
     e.preventDefault();
     if (!send) return;
     send();
   };
-  return /* @__PURE__ */ jsx23(
-    Primitive7.form,
+  return /* @__PURE__ */ jsx24(
+    Primitive8.form,
     {
       ...rest,
       ref: forwardedRef,
-      onSubmit: composeEventHandlers4(onSubmit, handleSubmit)
+      onSubmit: composeEventHandlers5(onSubmit, handleSubmit)
     }
   );
 });
 ComposerPrimitiveRoot.displayName = "ComposerPrimitive.Root";
 
 // src/primitives/composer/ComposerInput.tsx
-import { composeEventHandlers as composeEventHandlers5 } from "@radix-ui/primitive";
+import { composeEventHandlers as composeEventHandlers6 } from "@radix-ui/primitive";
 import { useComposedRefs as useComposedRefs2 } from "@radix-ui/react-compose-refs";
 import { Slot } from "@radix-ui/react-slot";
 import {
-  forwardRef as forwardRef15,
-  useCallback as useCallback14,
+  forwardRef as forwardRef16,
+  useCallback as useCallback16,
   useEffect as useEffect10,
   useRef as useRef4
 } from "react";
 import TextareaAutosize from "react-textarea-autosize";
-import { useEscapeKeydown } from "@radix-ui/react-use-escape-keydown";
-import { jsx as jsx24 } from "react/jsx-runtime";
-var ComposerPrimitiveInput = forwardRef15(
+import { useEscapeKeydown as useEscapeKeydown2 } from "@radix-ui/react-use-escape-keydown";
+import { jsx as jsx25 } from "react/jsx-runtime";
+var ComposerPrimitiveInput = forwardRef16(
   ({
     autoFocus = false,
     asChild,
@@ -2877,7 +3019,7 @@ var ComposerPrimitiveInput = forwardRef15(
     const isDisabled = useThread((t) => t.isDisabled) ?? disabledProp ?? false;
     const textareaRef = useRef4(null);
     const ref = useComposedRefs2(forwardedRef, textareaRef);
-    useEscapeKeydown((e) => {
+    useEscapeKeydown2((e) => {
       const composer = useComposer.getState();
       if (composer.canCancel) {
         composer.cancel();
@@ -2896,7 +3038,7 @@ var ComposerPrimitiveInput = forwardRef15(
       }
     };
     const autoFocusEnabled = autoFocus && !isDisabled;
-    const focus = useCallback14(() => {
+    const focus = useCallback16(() => {
       const textarea = textareaRef.current;
       if (!textarea || !autoFocusEnabled) return;
       textarea.focus({ preventScroll: true });
@@ -2911,7 +3053,7 @@ var ComposerPrimitiveInput = forwardRef15(
         focus();
       }
     });
-    return /* @__PURE__ */ jsx24(
+    return /* @__PURE__ */ jsx25(
       Component,
       {
         name: "input",
@@ -2919,12 +3061,12 @@ var ComposerPrimitiveInput = forwardRef15(
         ...rest,
         ref,
         disabled: isDisabled,
-        onChange: composeEventHandlers5(onChange, (e) => {
+        onChange: composeEventHandlers6(onChange, (e) => {
           const composerState = useComposer.getState();
           if (!composerState.isEditing) return;
           return composerState.setText(e.target.value);
         }),
-        onKeyDown: composeEventHandlers5(onKeyDown, handleKeyPress)
+        onKeyDown: composeEventHandlers6(onKeyDown, handleKeyPress)
       }
     );
   }
@@ -2932,14 +3074,14 @@ var ComposerPrimitiveInput = forwardRef15(
 ComposerPrimitiveInput.displayName = "ComposerPrimitive.Input";
 
 // src/primitives/composer/ComposerSend.tsx
-import { forwardRef as forwardRef16 } from "react";
-import { Primitive as Primitive8 } from "@radix-ui/react-primitive";
-import { jsx as jsx25 } from "react/jsx-runtime";
-var ComposerPrimitiveSend = forwardRef16(({ disabled, ...rest }, ref) => {
+import { forwardRef as forwardRef17 } from "react";
+import { Primitive as Primitive9 } from "@radix-ui/react-primitive";
+import { jsx as jsx26 } from "react/jsx-runtime";
+var ComposerPrimitiveSend = forwardRef17(({ disabled, ...rest }, ref) => {
   const { useComposer } = useComposerContext();
   const hasValue = useComposer((c) => c.isEditing && c.text.length > 0);
-  return /* @__PURE__ */ jsx25(
-    Primitive8.button,
+  return /* @__PURE__ */ jsx26(
+    Primitive9.button,
     {
       type: "submit",
       ...rest,
@@ -2988,11 +3130,11 @@ __export(thread_exports, {
 });
 
 // src/primitives/thread/ThreadRoot.tsx
-import { Primitive as Primitive9 } from "@radix-ui/react-primitive";
-import { forwardRef as forwardRef17 } from "react";
-import { jsx as jsx26 } from "react/jsx-runtime";
-var ThreadPrimitiveRoot = forwardRef17((props, ref) => {
-  return /* @__PURE__ */ jsx26(Primitive9.div, { ...props, ref });
+import { Primitive as Primitive10 } from "@radix-ui/react-primitive";
+import { forwardRef as forwardRef18 } from "react";
+import { jsx as jsx27 } from "react/jsx-runtime";
+var ThreadPrimitiveRoot = forwardRef18((props, ref) => {
+  return /* @__PURE__ */ jsx27(Primitive10.div, { ...props, ref });
 });
 ThreadPrimitiveRoot.displayName = "ThreadPrimitive.Root";
 
@@ -3017,8 +3159,8 @@ ThreadPrimitiveIf.displayName = "ThreadPrimitive.If";
 
 // src/primitives/thread/ThreadViewport.tsx
 import { useComposedRefs as useComposedRefs4 } from "@radix-ui/react-compose-refs";
-import { Primitive as Primitive10 } from "@radix-ui/react-primitive";
-import { forwardRef as forwardRef18 } from "react";
+import { Primitive as Primitive11 } from "@radix-ui/react-primitive";
+import { forwardRef as forwardRef19 } from "react";
 
 // src/primitive-hooks/thread/useThreadViewportAutoScroll.tsx
 import { useComposedRefs as useComposedRefs3 } from "@radix-ui/react-compose-refs";
@@ -3026,10 +3168,10 @@ import { useRef as useRef5 } from "react";
 
 // src/utils/hooks/useOnResizeContent.tsx
 import { useCallbackRef as useCallbackRef3 } from "@radix-ui/react-use-callback-ref";
-import { useCallback as useCallback15 } from "react";
+import { useCallback as useCallback17 } from "react";
 var useOnResizeContent = (callback) => {
   const callbackRef = useCallbackRef3(callback);
-  const refCallback = useCallback15(
+  const refCallback = useCallback17(
     (el) => {
       const resizeObserver = new ResizeObserver(() => {
         callbackRef();
@@ -3129,13 +3271,13 @@ var useThreadViewportAutoScroll = ({
 };
 
 // src/primitives/thread/ThreadViewport.tsx
-import { jsx as jsx27 } from "react/jsx-runtime";
-var ThreadPrimitiveViewport = forwardRef18(({ autoScroll, onScroll, children, ...rest }, forwardedRef) => {
+import { jsx as jsx28 } from "react/jsx-runtime";
+var ThreadPrimitiveViewport = forwardRef19(({ autoScroll, onScroll, children, ...rest }, forwardedRef) => {
   const autoScrollRef = useThreadViewportAutoScroll({
     autoScroll
   });
   const ref = useComposedRefs4(forwardedRef, autoScrollRef);
-  return /* @__PURE__ */ jsx27(Primitive10.div, { ...rest, ref, children });
+  return /* @__PURE__ */ jsx28(Primitive11.div, { ...rest, ref, children });
 });
 ThreadPrimitiveViewport.displayName = "ThreadPrimitive.Viewport";
 
@@ -3180,19 +3322,33 @@ var makeEditComposerStore = ({
 
 // src/context/stores/MessageUtils.ts
 import { create as create14 } from "zustand";
-var makeMessageUtilsStore = () => create14((set) => ({
-  isCopied: false,
-  setIsCopied: (value) => {
-    set({ isCopied: value });
-  },
-  isHovering: false,
-  setIsHovering: (value) => {
-    set({ isHovering: value });
-  }
-}));
+var makeMessageUtilsStore = () => create14((set) => {
+  let utterance = null;
+  return {
+    isCopied: false,
+    setIsCopied: (value) => {
+      set({ isCopied: value });
+    },
+    isHovering: false,
+    setIsHovering: (value) => {
+      set({ isHovering: value });
+    },
+    isSpeaking: false,
+    stopSpeaking: () => {
+      utterance?.stop();
+    },
+    addUtterance: (utt) => {
+      utterance = utt;
+      set({ isSpeaking: true });
+      utt.onEnd(() => {
+        set({ isSpeaking: false });
+      });
+    }
+  };
+});
 
 // src/context/providers/MessageProvider.tsx
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var getIsLast = (messages, message) => {
   return messages[messages.length - 1]?.id === message.id;
 };
@@ -3276,11 +3432,11 @@ var MessageProvider = ({
   children
 }) => {
   const context = useMessageContext2(messageIndex);
-  return /* @__PURE__ */ jsx28(MessageContext.Provider, { value: context, children });
+  return /* @__PURE__ */ jsx29(MessageContext.Provider, { value: context, children });
 };
 
 // src/primitives/thread/ThreadMessages.tsx
-import { jsx as jsx29, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs4 } from "react/jsx-runtime";
 var DEFAULT_SYSTEM_MESSAGE = () => null;
 var getComponents = (components) => {
   return {
@@ -3297,11 +3453,11 @@ var ThreadMessageImpl = ({
   const { UserMessage: UserMessage2, EditComposer: EditComposer2, AssistantMessage: AssistantMessage2, SystemMessage: SystemMessage2 } = getComponents(components);
   return /* @__PURE__ */ jsxs4(MessageProvider, { messageIndex, children: [
     /* @__PURE__ */ jsxs4(MessagePrimitiveIf, { user: true, children: [
-      /* @__PURE__ */ jsx29(ComposerPrimitiveIf, { editing: false, children: /* @__PURE__ */ jsx29(UserMessage2, {}) }),
-      /* @__PURE__ */ jsx29(ComposerPrimitiveIf, { editing: true, children: /* @__PURE__ */ jsx29(EditComposer2, {}) })
+      /* @__PURE__ */ jsx30(ComposerPrimitiveIf, { editing: false, children: /* @__PURE__ */ jsx30(UserMessage2, {}) }),
+      /* @__PURE__ */ jsx30(ComposerPrimitiveIf, { editing: true, children: /* @__PURE__ */ jsx30(EditComposer2, {}) })
     ] }),
-    /* @__PURE__ */ jsx29(MessagePrimitiveIf, { assistant: true, children: /* @__PURE__ */ jsx29(AssistantMessage2, {}) }),
-    /* @__PURE__ */ jsx29(MessagePrimitiveIf, { system: true, children: /* @__PURE__ */ jsx29(SystemMessage2, {}) })
+    /* @__PURE__ */ jsx30(MessagePrimitiveIf, { assistant: true, children: /* @__PURE__ */ jsx30(AssistantMessage2, {}) }),
+    /* @__PURE__ */ jsx30(MessagePrimitiveIf, { system: true, children: /* @__PURE__ */ jsx30(SystemMessage2, {}) })
   ] });
 };
 var ThreadMessage = memo3(
@@ -3316,7 +3472,7 @@ var ThreadPrimitiveMessagesImpl = ({
   if (messagesLength === 0) return null;
   return new Array(messagesLength).fill(null).map((_, idx) => {
     const messageIndex = idx;
-    return /* @__PURE__ */ jsx29(
+    return /* @__PURE__ */ jsx30(
       ThreadMessage,
       {
         messageIndex,
@@ -3350,7 +3506,7 @@ import {
   createContext as createContext6,
   useContext as useContext6
 } from "react";
-import { Fragment as Fragment3, jsx as jsx30 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx31 } from "react/jsx-runtime";
 var ThreadConfigContext = createContext6({});
 var useThreadConfig = () => {
   return useContext6(ThreadConfigContext);
@@ -3360,27 +3516,39 @@ var ThreadConfigProvider = ({
   config
 }) => {
   const assistant = useAssistantContext({ optional: true });
-  const configProvider = config && Object.keys(config ?? {}).length > 0 ? /* @__PURE__ */ jsx30(ThreadConfigContext.Provider, { value: config, children }) : /* @__PURE__ */ jsx30(Fragment3, { children });
+  const configProvider = config && Object.keys(config ?? {}).length > 0 ? /* @__PURE__ */ jsx31(ThreadConfigContext.Provider, { value: config, children }) : /* @__PURE__ */ jsx31(Fragment3, { children });
   if (!config?.runtime) return configProvider;
   if (assistant) {
     throw new Error(
       "You provided a runtime to <Thread> while simulataneously using <AssistantRuntimeProvider>. This is not allowed."
     );
   }
-  return /* @__PURE__ */ jsx30(AssistantRuntimeProvider, { runtime: config.runtime, children: configProvider });
+  return /* @__PURE__ */ jsx31(AssistantRuntimeProvider, { runtime: config.runtime, children: configProvider });
 };
 ThreadConfigProvider.displayName = "ThreadConfigProvider";
 
 // src/ui/assistant-action-bar.tsx
-import { forwardRef as forwardRef19 } from "react";
-import { CheckIcon, CopyIcon, RefreshCwIcon } from "lucide-react";
-import { Fragment as Fragment4, jsx as jsx31, jsxs as jsxs5 } from "react/jsx-runtime";
+import { forwardRef as forwardRef20 } from "react";
+import {
+  AudioLinesIcon,
+  CheckIcon,
+  CopyIcon,
+  RefreshCwIcon,
+  StopCircleIcon
+} from "lucide-react";
+import { Fragment as Fragment4, jsx as jsx32, jsxs as jsxs5 } from "react/jsx-runtime";
 var useAllowCopy = () => {
   const { assistantMessage: { allowCopy = true } = {} } = useThreadConfig();
   const { useThread } = useThreadContext();
-  const copySupported = useThread((t) => t.capabilities.copy);
+  const copySupported = useThread((t) => t.capabilities.unstable_copy);
   return copySupported && allowCopy;
 };
+var useAllowSpeak = () => {
+  const { assistantMessage: { allowSpeak = true } = {} } = useThreadConfig();
+  const { useThread } = useThreadContext();
+  const speakSupported = useThread((t) => t.capabilities.speak);
+  return speakSupported && allowSpeak;
+};
 var useAllowReload = () => {
   const { assistantMessage: { allowReload = true } = {} } = useThreadConfig();
   const { useThread } = useThreadContext();
@@ -3398,8 +3566,9 @@ var AssistantActionBar = () => {
       autohide: "not-last",
       autohideFloat: "single-branch",
       children: [
-        /* @__PURE__ */ jsx31(AssistantActionBarCopy, {}),
-        /* @__PURE__ */ jsx31(AssistantActionBarReload, {})
+        /* @__PURE__ */ jsx32(AssistantActionBarSpeechControl, {}),
+        /* @__PURE__ */ jsx32(AssistantActionBarCopy, {}),
+        /* @__PURE__ */ jsx32(AssistantActionBarReload, {})
       ]
     }
   );
@@ -3409,21 +3578,51 @@ var AssistantActionBarRoot = withDefaults(actionBar_exports.Root, {
   className: "aui-assistant-action-bar-root"
 });
 AssistantActionBarRoot.displayName = "AssistantActionBarRoot";
-var AssistantActionBarCopy = forwardRef19((props, ref) => {
+var AssistantActionBarCopy = forwardRef20((props, ref) => {
   const {
     strings: {
-      assistantMessage: { reload: { tooltip = "Copy" } = {} } = {}
+      assistantMessage: { copy: { tooltip = "Copy" } = {} } = {}
     } = {}
   } = useThreadConfig();
   const allowCopy = useAllowCopy();
   if (!allowCopy) return null;
-  return /* @__PURE__ */ jsx31(actionBar_exports.Copy, { asChild: true, children: /* @__PURE__ */ jsx31(TooltipIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsxs5(Fragment4, { children: [
-    /* @__PURE__ */ jsx31(message_exports.If, { copied: true, children: /* @__PURE__ */ jsx31(CheckIcon, {}) }),
-    /* @__PURE__ */ jsx31(message_exports.If, { copied: false, children: /* @__PURE__ */ jsx31(CopyIcon, {}) })
+  return /* @__PURE__ */ jsx32(actionBar_exports.Copy, { asChild: true, children: /* @__PURE__ */ jsx32(TooltipIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsxs5(Fragment4, { children: [
+    /* @__PURE__ */ jsx32(message_exports.If, { copied: true, children: /* @__PURE__ */ jsx32(CheckIcon, {}) }),
+    /* @__PURE__ */ jsx32(message_exports.If, { copied: false, children: /* @__PURE__ */ jsx32(CopyIcon, {}) })
   ] }) }) });
 });
 AssistantActionBarCopy.displayName = "AssistantActionBarCopy";
-var AssistantActionBarReload = forwardRef19((props, ref) => {
+var AssistantActionBarSpeechControl = () => {
+  return /* @__PURE__ */ jsxs5(Fragment4, { children: [
+    /* @__PURE__ */ jsx32(message_exports.If, { speaking: false, children: /* @__PURE__ */ jsx32(AssistantActionBarSpeak, {}) }),
+    /* @__PURE__ */ jsx32(message_exports.If, { speaking: true, children: /* @__PURE__ */ jsx32(AssistantActionBarStopSpeaking, {}) })
+  ] });
+};
+var AssistantActionBarSpeak = forwardRef20((props, ref) => {
+  const {
+    strings: {
+      assistantMessage: { speak: { tooltip = "Read aloud" } = {} } = {}
+    } = {}
+  } = useThreadConfig();
+  const allowSpeak = useAllowSpeak();
+  if (!allowSpeak) return null;
+  return /* @__PURE__ */ jsx32(actionBar_exports.Speak, { asChild: true, children: /* @__PURE__ */ jsx32(TooltipIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx32(AudioLinesIcon, {}) }) });
+});
+AssistantActionBarSpeak.displayName = "AssistantActionBarSpeak";
+var AssistantActionBarStopSpeaking = forwardRef20((props, ref) => {
+  const {
+    strings: {
+      assistantMessage: {
+        speak: { stop: { tooltip: stopTooltip = "Stop" } = {} } = {}
+      } = {}
+    } = {}
+  } = useThreadConfig();
+  const allowSpeak = useAllowSpeak();
+  if (!allowSpeak) return null;
+  return /* @__PURE__ */ jsx32(actionBar_exports.StopSpeaking, { asChild: true, children: /* @__PURE__ */ jsx32(TooltipIconButton, { tooltip: stopTooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx32(StopCircleIcon, {}) }) });
+});
+AssistantActionBarStopSpeaking.displayName = "AssistantActionBarStopSpeaking";
+var AssistantActionBarReload = forwardRef20((props, ref) => {
   const {
     strings: {
       assistantMessage: { reload: { tooltip = "Refresh" } = {} } = {}
@@ -3431,13 +3630,16 @@ var AssistantActionBarReload = forwardRef19((props, ref) => {
   } = useThreadConfig();
   const allowReload = useAllowReload();
   if (!allowReload) return null;
-  return /* @__PURE__ */ jsx31(actionBar_exports.Reload, { asChild: true, children: /* @__PURE__ */ jsx31(TooltipIconButton, { tooltip, ...props, ref, children: /* @__PURE__ */ jsx31(RefreshCwIcon, {}) }) });
+  return /* @__PURE__ */ jsx32(actionBar_exports.Reload, { asChild: true, children: /* @__PURE__ */ jsx32(TooltipIconButton, { tooltip, ...props, ref, children: /* @__PURE__ */ jsx32(RefreshCwIcon, {}) }) });
 });
 AssistantActionBarReload.displayName = "AssistantActionBarReload";
 var exports = {
   Root: AssistantActionBarRoot,
   Reload: AssistantActionBarReload,
-  Copy: AssistantActionBarCopy
+  Copy: AssistantActionBarCopy,
+  Speak: AssistantActionBarSpeak,
+  StopSpeaking: AssistantActionBarStopSpeaking,
+  SpeechControl: AssistantActionBarSpeechControl
 };
 var assistant_action_bar_default = Object.assign(
   AssistantActionBar,
@@ -3445,12 +3647,12 @@ var assistant_action_bar_default = Object.assign(
 );
 
 // src/ui/assistant-message.tsx
-import { forwardRef as forwardRef21 } from "react";
+import { forwardRef as forwardRef22 } from "react";
 
 // src/ui/branch-picker.tsx
-import { forwardRef as forwardRef20 } from "react";
+import { forwardRef as forwardRef21 } from "react";
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
-import { jsx as jsx32, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs6 } from "react/jsx-runtime";
 var useAllowBranchPicker = () => {
   const { branchPicker: { allowBranchPicker = true } = {} } = useThreadConfig();
   const { useThread } = useThreadContext();
@@ -3461,9 +3663,9 @@ var BranchPicker = () => {
   const allowBranchPicker = useAllowBranchPicker();
   if (!allowBranchPicker) return null;
   return /* @__PURE__ */ jsxs6(BranchPickerRoot, { hideWhenSingleBranch: true, children: [
-    /* @__PURE__ */ jsx32(BranchPickerPrevious2, {}),
-    /* @__PURE__ */ jsx32(BranchPickerState, {}),
-    /* @__PURE__ */ jsx32(BranchPickerNext, {})
+    /* @__PURE__ */ jsx33(BranchPickerPrevious2, {}),
+    /* @__PURE__ */ jsx33(BranchPickerState, {}),
+    /* @__PURE__ */ jsx33(BranchPickerNext, {})
   ] });
 };
 BranchPicker.displayName = "BranchPicker";
@@ -3471,31 +3673,31 @@ var BranchPickerRoot = withDefaults(branchPicker_exports.Root, {
   className: "aui-branch-picker-root"
 });
 BranchPickerRoot.displayName = "BranchPickerRoot";
-var BranchPickerPrevious2 = forwardRef20((props, ref) => {
+var BranchPickerPrevious2 = forwardRef21((props, ref) => {
   const {
     strings: {
       branchPicker: { previous: { tooltip = "Previous" } = {} } = {}
     } = {}
   } = useThreadConfig();
-  return /* @__PURE__ */ jsx32(branchPicker_exports.Previous, { asChild: true, children: /* @__PURE__ */ jsx32(TooltipIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx32(ChevronLeftIcon, {}) }) });
+  return /* @__PURE__ */ jsx33(branchPicker_exports.Previous, { asChild: true, children: /* @__PURE__ */ jsx33(TooltipIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx33(ChevronLeftIcon, {}) }) });
 });
 BranchPickerPrevious2.displayName = "BranchPickerPrevious";
 var BranchPickerStateWrapper = withDefaults("span", {
   className: "aui-branch-picker-state"
 });
-var BranchPickerState = forwardRef20((props, ref) => {
+var BranchPickerState = forwardRef21((props, ref) => {
   return /* @__PURE__ */ jsxs6(BranchPickerStateWrapper, { ...props, ref, children: [
-    /* @__PURE__ */ jsx32(branchPicker_exports.Number, {}),
+    /* @__PURE__ */ jsx33(branchPicker_exports.Number, {}),
     " / ",
-    /* @__PURE__ */ jsx32(branchPicker_exports.Count, {})
+    /* @__PURE__ */ jsx33(branchPicker_exports.Count, {})
   ] });
 });
 BranchPickerState.displayName = "BranchPickerState";
-var BranchPickerNext = forwardRef20((props, ref) => {
+var BranchPickerNext = forwardRef21((props, ref) => {
   const {
     strings: { branchPicker: { next: { tooltip = "Next" } = {} } = {} } = {}
   } = useThreadConfig();
-  return /* @__PURE__ */ jsx32(branchPicker_exports.Next, { asChild: true, children: /* @__PURE__ */ jsx32(TooltipIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx32(ChevronRightIcon, {}) }) });
+  return /* @__PURE__ */ jsx33(branchPicker_exports.Next, { asChild: true, children: /* @__PURE__ */ jsx33(TooltipIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx33(ChevronRightIcon, {}) }) });
 });
 BranchPickerNext.displayName = "BranchPickerNext";
 var exports2 = {
@@ -3507,12 +3709,12 @@ var branch_picker_default = Object.assign(BranchPicker, exports2);
 
 // src/ui/base/avatar.tsx
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
-import { jsx as jsx33, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs7 } from "react/jsx-runtime";
 var Avatar = ({ src, alt, fallback }) => {
   if (src == null && fallback == null) return null;
   return /* @__PURE__ */ jsxs7(AvatarRoot, { children: [
-    src != null && /* @__PURE__ */ jsx33(AvatarImage, { src, alt }),
-    fallback != null && /* @__PURE__ */ jsx33(AvatarFallback, { children: fallback })
+    src != null && /* @__PURE__ */ jsx34(AvatarImage, { src, alt }),
+    fallback != null && /* @__PURE__ */ jsx34(AvatarFallback, { children: fallback })
   ] });
 };
 Avatar.displayName = "Avatar";
@@ -3531,10 +3733,10 @@ AvatarFallback.displayName = "AvatarFallback";
 
 // src/ui/content-part.tsx
 import classNames2 from "classnames";
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var Text = () => {
   const status = useSmoothStatus();
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx35(
     contentPart_exports.Text,
     {
       className: classNames2(
@@ -3549,19 +3751,19 @@ var exports3 = { Text: withSmoothContextProvider(Text) };
 var content_part_default = exports3;
 
 // src/ui/assistant-message.tsx
-import { jsx as jsx35, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs8 } from "react/jsx-runtime";
 var AssistantMessage = () => {
   return /* @__PURE__ */ jsxs8(AssistantMessageRoot, { children: [
-    /* @__PURE__ */ jsx35(AssistantMessageAvatar, {}),
-    /* @__PURE__ */ jsx35(AssistantMessageContent, {}),
-    /* @__PURE__ */ jsx35(branch_picker_default, {}),
-    /* @__PURE__ */ jsx35(assistant_action_bar_default, {})
+    /* @__PURE__ */ jsx36(AssistantMessageAvatar, {}),
+    /* @__PURE__ */ jsx36(AssistantMessageContent, {}),
+    /* @__PURE__ */ jsx36(branch_picker_default, {}),
+    /* @__PURE__ */ jsx36(assistant_action_bar_default, {})
   ] });
 };
 AssistantMessage.displayName = "AssistantMessage";
 var AssistantMessageAvatar = () => {
   const { assistantAvatar: avatar = { fallback: "A" } } = useThreadConfig();
-  return /* @__PURE__ */ jsx35(Avatar, { ...avatar });
+  return /* @__PURE__ */ jsx36(Avatar, { ...avatar });
 };
 var AssistantMessageRoot = withDefaults(message_exports.Root, {
   className: "aui-assistant-message-root"
@@ -3570,9 +3772,9 @@ AssistantMessageRoot.displayName = "AssistantMessageRoot";
 var AssistantMessageContentWrapper = withDefaults("div", {
   className: "aui-assistant-message-content"
 });
-var AssistantMessageContent = forwardRef21(({ components: componentsProp, ...rest }, ref) => {
+var AssistantMessageContent = forwardRef22(({ components: componentsProp, ...rest }, ref) => {
   const { assistantMessage: { components = {} } = {} } = useThreadConfig();
-  return /* @__PURE__ */ jsx35(AssistantMessageContentWrapper, { ...rest, ref, children: /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36(AssistantMessageContentWrapper, { ...rest, ref, children: /* @__PURE__ */ jsx36(
     message_exports.Content,
     {
       components: {
@@ -3594,21 +3796,21 @@ var assistant_message_default = Object.assign(
 );
 
 // src/ui/assistant-modal.tsx
-import { forwardRef as forwardRef28 } from "react";
+import { forwardRef as forwardRef29 } from "react";
 import { BotIcon, ChevronDownIcon } from "lucide-react";
 
 // src/ui/thread.tsx
-import { forwardRef as forwardRef27 } from "react";
+import { forwardRef as forwardRef28 } from "react";
 import { ArrowDownIcon } from "lucide-react";
 
 // src/ui/composer.tsx
-import { forwardRef as forwardRef22 } from "react";
+import { forwardRef as forwardRef23 } from "react";
 import { SendHorizontalIcon } from "lucide-react";
 
 // src/ui/base/CircleStopIcon.tsx
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 var CircleStopIcon = () => {
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -3616,18 +3818,18 @@ var CircleStopIcon = () => {
       fill: "currentColor",
       width: "16",
       height: "16",
-      children: /* @__PURE__ */ jsx36("rect", { width: "10", height: "10", x: "3", y: "3", rx: "2" })
+      children: /* @__PURE__ */ jsx37("rect", { width: "10", height: "10", x: "3", y: "3", rx: "2" })
     }
   );
 };
 CircleStopIcon.displayName = "CircleStopIcon";
 
 // src/ui/composer.tsx
-import { Fragment as Fragment5, jsx as jsx37, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx38, jsxs as jsxs9 } from "react/jsx-runtime";
 var Composer = () => {
   return /* @__PURE__ */ jsxs9(ComposerRoot, { children: [
-    /* @__PURE__ */ jsx37(ComposerInput, { autoFocus: true }),
-    /* @__PURE__ */ jsx37(ComposerAction, {})
+    /* @__PURE__ */ jsx38(ComposerInput, { autoFocus: true }),
+    /* @__PURE__ */ jsx38(ComposerAction, {})
   ] });
 };
 Composer.displayName = "Composer";
@@ -3640,14 +3842,14 @@ var ComposerInputStyled = withDefaults(composer_exports.Input, {
   autoFocus: true,
   className: "aui-composer-input"
 });
-var ComposerInput = forwardRef22(
+var ComposerInput = forwardRef23(
   (props, ref) => {
     const {
       strings: {
         composer: { input: { placeholder = "Write a message..." } = {} } = {}
       } = {}
     } = useThreadConfig();
-    return /* @__PURE__ */ jsx37(ComposerInputStyled, { placeholder, ...props, ref });
+    return /* @__PURE__ */ jsx38(ComposerInputStyled, { placeholder, ...props, ref });
   }
 );
 ComposerInput.displayName = "ComposerInput";
@@ -3658,10 +3860,10 @@ var useAllowCancel = () => {
 };
 var ComposerAction = () => {
   const allowCancel = useAllowCancel();
-  if (!allowCancel) return /* @__PURE__ */ jsx37(ComposerSend, {});
+  if (!allowCancel) return /* @__PURE__ */ jsx38(ComposerSend, {});
   return /* @__PURE__ */ jsxs9(Fragment5, { children: [
-    /* @__PURE__ */ jsx37(thread_exports.If, { running: false, children: /* @__PURE__ */ jsx37(ComposerSend, {}) }),
-    /* @__PURE__ */ jsx37(thread_exports.If, { running: true, children: /* @__PURE__ */ jsx37(ComposerCancel, {}) })
+    /* @__PURE__ */ jsx38(thread_exports.If, { running: false, children: /* @__PURE__ */ jsx38(ComposerSend, {}) }),
+    /* @__PURE__ */ jsx38(thread_exports.If, { running: true, children: /* @__PURE__ */ jsx38(ComposerCancel, {}) })
   ] });
 };
 ComposerAction.displayName = "ComposerAction";
@@ -3669,22 +3871,22 @@ var ComposerSendButton = withDefaults(TooltipIconButton, {
   variant: "default",
   className: "aui-composer-send"
 });
-var ComposerSend = forwardRef22((props, ref) => {
+var ComposerSend = forwardRef23((props, ref) => {
   const {
     strings: { composer: { send: { tooltip = "Send" } = {} } = {} } = {}
   } = useThreadConfig();
-  return /* @__PURE__ */ jsx37(composer_exports.Send, { asChild: true, children: /* @__PURE__ */ jsx37(ComposerSendButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx37(SendHorizontalIcon, {}) }) });
+  return /* @__PURE__ */ jsx38(composer_exports.Send, { asChild: true, children: /* @__PURE__ */ jsx38(ComposerSendButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx38(SendHorizontalIcon, {}) }) });
 });
 ComposerSend.displayName = "ComposerSend";
 var ComposerCancelButton = withDefaults(TooltipIconButton, {
   variant: "default",
   className: "aui-composer-cancel"
 });
-var ComposerCancel = forwardRef22((props, ref) => {
+var ComposerCancel = forwardRef23((props, ref) => {
   const {
     strings: { composer: { cancel: { tooltip = "Cancel" } = {} } = {} } = {}
   } = useThreadConfig();
-  return /* @__PURE__ */ jsx37(composer_exports.Cancel, { asChild: true, children: /* @__PURE__ */ jsx37(ComposerCancelButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx37(CircleStopIcon, {}) }) });
+  return /* @__PURE__ */ jsx38(composer_exports.Cancel, { asChild: true, children: /* @__PURE__ */ jsx38(ComposerCancelButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx38(CircleStopIcon, {}) }) });
 });
 ComposerCancel.displayName = "ComposerCancel";
 var exports5 = {
@@ -3697,15 +3899,15 @@ var exports5 = {
 var composer_default = Object.assign(Composer, exports5);
 
 // src/ui/thread-welcome.tsx
-import { forwardRef as forwardRef23 } from "react";
-import { jsx as jsx38, jsxs as jsxs10 } from "react/jsx-runtime";
+import { forwardRef as forwardRef24 } from "react";
+import { jsx as jsx39, jsxs as jsxs10 } from "react/jsx-runtime";
 var ThreadWelcome = () => {
   return /* @__PURE__ */ jsxs10(ThreadWelcomeRoot, { children: [
     /* @__PURE__ */ jsxs10(ThreadWelcomeCenter, { children: [
-      /* @__PURE__ */ jsx38(ThreadWelcomeAvatar, {}),
-      /* @__PURE__ */ jsx38(ThreadWelcomeMessage, {})
+      /* @__PURE__ */ jsx39(ThreadWelcomeAvatar, {}),
+      /* @__PURE__ */ jsx39(ThreadWelcomeMessage, {})
     ] }),
-    /* @__PURE__ */ jsx38(ThreadWelcomeSuggestions, {})
+    /* @__PURE__ */ jsx39(ThreadWelcomeSuggestions, {})
   ] });
 };
 ThreadWelcome.displayName = "ThreadWelcome";
@@ -3715,22 +3917,22 @@ var ThreadWelcomeRootStyled = withDefaults("div", {
 var ThreadWelcomeCenter = withDefaults("div", {
   className: "aui-thread-welcome-center"
 });
-var ThreadWelcomeRoot = forwardRef23(
+var ThreadWelcomeRoot = forwardRef24(
   (props, ref) => {
-    return /* @__PURE__ */ jsx38(thread_exports.Empty, { children: /* @__PURE__ */ jsx38(ThreadWelcomeRootStyled, { ...props, ref }) });
+    return /* @__PURE__ */ jsx39(thread_exports.Empty, { children: /* @__PURE__ */ jsx39(ThreadWelcomeRootStyled, { ...props, ref }) });
   }
 );
 ThreadWelcomeRoot.displayName = "ThreadWelcomeRoot";
 var ThreadWelcomeAvatar = () => {
   const { assistantAvatar: avatar = { fallback: "A" } } = useThreadConfig();
-  return /* @__PURE__ */ jsx38(Avatar, { ...avatar });
+  return /* @__PURE__ */ jsx39(Avatar, { ...avatar });
 };
 var ThreadWelcomeMessageStyled = withDefaults("p", {
   className: "aui-thread-welcome-message"
 });
-var ThreadWelcomeMessage = forwardRef23(({ message: messageProp, ...rest }, ref) => {
+var ThreadWelcomeMessage = forwardRef24(({ message: messageProp, ...rest }, ref) => {
   const { welcome: { message = "How can I help you today?" } = {} } = useThreadConfig();
-  return /* @__PURE__ */ jsx38(ThreadWelcomeMessageStyled, { ...rest, ref, children: messageProp ?? message });
+  return /* @__PURE__ */ jsx39(ThreadWelcomeMessageStyled, { ...rest, ref, children: messageProp ?? message });
 });
 ThreadWelcomeMessage.displayName = "ThreadWelcomeMessage";
 var ThreadWelcomeSuggestionContainer = withDefaults("div", {
@@ -3742,21 +3944,21 @@ var ThreadWelcomeSuggestionStyled = withDefaults(thread_exports.Suggestion, {
 var ThreadWelcomeSuggestion = ({
   suggestion: { text, prompt }
 }) => {
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39(
     ThreadWelcomeSuggestionStyled,
     {
       prompt,
       method: "replace",
       autoSend: true,
-      children: /* @__PURE__ */ jsx38("span", { className: "aui-thread-welcome-suggestion-text", children: text ?? prompt })
+      children: /* @__PURE__ */ jsx39("span", { className: "aui-thread-welcome-suggestion-text", children: text ?? prompt })
     }
   );
 };
 var ThreadWelcomeSuggestions = () => {
   const { welcome: { suggestions } = {} } = useThreadConfig();
-  return /* @__PURE__ */ jsx38(ThreadWelcomeSuggestionContainer, { children: suggestions?.map((suggestion, idx) => {
+  return /* @__PURE__ */ jsx39(ThreadWelcomeSuggestionContainer, { children: suggestions?.map((suggestion, idx) => {
     const key = `${suggestion.prompt}-${idx}`;
-    return /* @__PURE__ */ jsx38(ThreadWelcomeSuggestion, { suggestion }, key);
+    return /* @__PURE__ */ jsx39(ThreadWelcomeSuggestion, { suggestion }, key);
   }) });
 };
 ThreadWelcomeSuggestions.displayName = "ThreadWelcomeSuggestions";
@@ -3771,12 +3973,12 @@ var exports6 = {
 var thread_welcome_default = Object.assign(ThreadWelcome, exports6);
 
 // src/ui/user-message.tsx
-import { forwardRef as forwardRef25 } from "react";
+import { forwardRef as forwardRef26 } from "react";
 
 // src/ui/user-action-bar.tsx
-import { forwardRef as forwardRef24 } from "react";
+import { forwardRef as forwardRef25 } from "react";
 import { PencilIcon } from "lucide-react";
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 var useAllowEdit = () => {
   const { userMessage: { allowEdit = true } = {} } = useThreadConfig();
   const { useThread } = useThreadContext();
@@ -3786,20 +3988,20 @@ var useAllowEdit = () => {
 var UserActionBar = () => {
   const allowEdit = useAllowEdit();
   if (!allowEdit) return null;
-  return /* @__PURE__ */ jsx39(UserActionBarRoot, { hideWhenRunning: true, autohide: "not-last", children: /* @__PURE__ */ jsx39(UserActionBarEdit, {}) });
+  return /* @__PURE__ */ jsx40(UserActionBarRoot, { hideWhenRunning: true, autohide: "not-last", children: /* @__PURE__ */ jsx40(UserActionBarEdit, {}) });
 };
 UserActionBar.displayName = "UserActionBar";
 var UserActionBarRoot = withDefaults(actionBar_exports.Root, {
   className: "aui-user-action-bar-root"
 });
 UserActionBarRoot.displayName = "UserActionBarRoot";
-var UserActionBarEdit = forwardRef24((props, ref) => {
+var UserActionBarEdit = forwardRef25((props, ref) => {
   const {
     strings: { userMessage: { edit: { tooltip = "Edit" } = {} } = {} } = {}
   } = useThreadConfig();
   const allowEdit = useAllowEdit();
   if (!allowEdit) return null;
-  return /* @__PURE__ */ jsx39(actionBar_exports.Edit, { asChild: true, children: /* @__PURE__ */ jsx39(TooltipIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx39(PencilIcon, {}) }) });
+  return /* @__PURE__ */ jsx40(actionBar_exports.Edit, { asChild: true, children: /* @__PURE__ */ jsx40(TooltipIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx40(PencilIcon, {}) }) });
 });
 UserActionBarEdit.displayName = "UserActionBarEdit";
 var exports7 = {
@@ -3809,12 +4011,12 @@ var exports7 = {
 var user_action_bar_default = Object.assign(UserActionBar, exports7);
 
 // src/ui/user-message.tsx
-import { jsx as jsx40, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs11 } from "react/jsx-runtime";
 var UserMessage = () => {
   return /* @__PURE__ */ jsxs11(UserMessageRoot, { children: [
-    /* @__PURE__ */ jsx40(user_action_bar_default, {}),
-    /* @__PURE__ */ jsx40(UserMessageContent, {}),
-    /* @__PURE__ */ jsx40(branch_picker_default, {})
+    /* @__PURE__ */ jsx41(user_action_bar_default, {}),
+    /* @__PURE__ */ jsx41(UserMessageContent, {}),
+    /* @__PURE__ */ jsx41(branch_picker_default, {})
   ] });
 };
 UserMessage.displayName = "UserMessage";
@@ -3825,9 +4027,9 @@ UserMessageRoot.displayName = "UserMessageRoot";
 var UserMessageContentWrapper = withDefaults("div", {
   className: "aui-user-message-content"
 });
-var UserMessageContent = forwardRef25(
+var UserMessageContent = forwardRef26(
   ({ components, ...props }, ref) => {
-    return /* @__PURE__ */ jsx40(UserMessageContentWrapper, { ...props, ref, children: /* @__PURE__ */ jsx40(
+    return /* @__PURE__ */ jsx41(UserMessageContentWrapper, { ...props, ref, children: /* @__PURE__ */ jsx41(
       message_exports.Content,
       {
         components: {
@@ -3846,14 +4048,14 @@ var exports8 = {
 var user_message_default = Object.assign(UserMessage, exports8);
 
 // src/ui/edit-composer.tsx
-import { forwardRef as forwardRef26 } from "react";
-import { jsx as jsx41, jsxs as jsxs12 } from "react/jsx-runtime";
+import { forwardRef as forwardRef27 } from "react";
+import { jsx as jsx42, jsxs as jsxs12 } from "react/jsx-runtime";
 var EditComposer = () => {
   return /* @__PURE__ */ jsxs12(EditComposerRoot, { children: [
-    /* @__PURE__ */ jsx41(EditComposerInput, {}),
+    /* @__PURE__ */ jsx42(EditComposerInput, {}),
     /* @__PURE__ */ jsxs12(EditComposerFooter, { children: [
-      /* @__PURE__ */ jsx41(EditComposerCancel, {}),
-      /* @__PURE__ */ jsx41(EditComposerSend, {})
+      /* @__PURE__ */ jsx42(EditComposerCancel, {}),
+      /* @__PURE__ */ jsx42(EditComposerSend, {})
     ] })
   ] });
 };
@@ -3870,23 +4072,23 @@ var EditComposerFooter = withDefaults("div", {
   className: "aui-edit-composer-footer"
 });
 EditComposerFooter.displayName = "EditComposerFooter";
-var EditComposerCancel = forwardRef26(
+var EditComposerCancel = forwardRef27(
   (props, ref) => {
     const {
       strings: {
         editComposer: { cancel: { label = "Cancel" } = {} } = {}
       } = {}
     } = useThreadConfig();
-    return /* @__PURE__ */ jsx41(composer_exports.Cancel, { asChild: true, children: /* @__PURE__ */ jsx41(Button, { variant: "ghost", ...props, ref, children: props.children ?? label }) });
+    return /* @__PURE__ */ jsx42(composer_exports.Cancel, { asChild: true, children: /* @__PURE__ */ jsx42(Button, { variant: "ghost", ...props, ref, children: props.children ?? label }) });
   }
 );
 EditComposerCancel.displayName = "EditComposerCancel";
-var EditComposerSend = forwardRef26(
+var EditComposerSend = forwardRef27(
   (props, ref) => {
     const {
       strings: { editComposer: { send: { label = "Send" } = {} } = {} } = {}
     } = useThreadConfig();
-    return /* @__PURE__ */ jsx41(composer_exports.Send, { asChild: true, children: /* @__PURE__ */ jsx41(Button, { ...props, ref, children: props.children ?? label }) });
+    return /* @__PURE__ */ jsx42(composer_exports.Send, { asChild: true, children: /* @__PURE__ */ jsx42(Button, { ...props, ref, children: props.children ?? label }) });
   }
 );
 EditComposerSend.displayName = "EditComposerSend";
@@ -3900,23 +4102,23 @@ var exports9 = {
 var edit_composer_default = Object.assign(EditComposer, exports9);
 
 // src/ui/thread.tsx
-import { jsx as jsx42, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs13 } from "react/jsx-runtime";
 var Thread = (config) => {
-  return /* @__PURE__ */ jsx42(ThreadRoot, { config, children: /* @__PURE__ */ jsxs13(ThreadViewport, { children: [
-    /* @__PURE__ */ jsx42(thread_welcome_default, {}),
-    /* @__PURE__ */ jsx42(ThreadMessages, {}),
+  return /* @__PURE__ */ jsx43(ThreadRoot, { config, children: /* @__PURE__ */ jsxs13(ThreadViewport, { children: [
+    /* @__PURE__ */ jsx43(thread_welcome_default, {}),
+    /* @__PURE__ */ jsx43(ThreadMessages, {}),
     /* @__PURE__ */ jsxs13(ThreadViewportFooter, { children: [
-      /* @__PURE__ */ jsx42(ThreadScrollToBottom, {}),
-      /* @__PURE__ */ jsx42(composer_default, {})
+      /* @__PURE__ */ jsx43(ThreadScrollToBottom, {}),
+      /* @__PURE__ */ jsx43(composer_default, {})
     ] })
   ] }) });
 };
 var ThreadRootStyled = withDefaults(thread_exports.Root, {
   className: "aui-root aui-thread-root"
 });
-var ThreadRoot = forwardRef27(
+var ThreadRoot = forwardRef28(
   ({ config, ...props }, ref) => {
-    return /* @__PURE__ */ jsx42(ThreadConfigProvider, { config, children: /* @__PURE__ */ jsx42(ThreadRootStyled, { ...props, ref }) });
+    return /* @__PURE__ */ jsx43(ThreadConfigProvider, { config, children: /* @__PURE__ */ jsx43(ThreadRootStyled, { ...props, ref }) });
   }
 );
 ThreadRoot.displayName = "ThreadRoot";
@@ -3930,7 +4132,7 @@ var ThreadViewportFooter = withDefaults("div", {
 ThreadViewportFooter.displayName = "ThreadViewportFooter";
 var SystemMessage = () => null;
 var ThreadMessages = ({ components, ...rest }) => {
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(
     thread_exports.Messages,
     {
       components: {
@@ -3948,13 +4150,13 @@ var ThreadScrollToBottomIconButton = withDefaults(TooltipIconButton, {
   variant: "outline",
   className: "aui-thread-scroll-to-bottom"
 });
-var ThreadScrollToBottom = forwardRef27((props, ref) => {
+var ThreadScrollToBottom = forwardRef28((props, ref) => {
   const {
     strings: {
       thread: { scrollToBottom: { tooltip = "Scroll to bottom" } = {} } = {}
     } = {}
   } = useThreadConfig();
-  return /* @__PURE__ */ jsx42(thread_exports.ScrollToBottom, { asChild: true, children: /* @__PURE__ */ jsx42(ThreadScrollToBottomIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx42(ArrowDownIcon, {}) }) });
+  return /* @__PURE__ */ jsx43(thread_exports.ScrollToBottom, { asChild: true, children: /* @__PURE__ */ jsx43(ThreadScrollToBottomIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx43(ArrowDownIcon, {}) }) });
 });
 ThreadScrollToBottom.displayName = "ThreadScrollToBottom";
 var exports10 = {
@@ -3967,20 +4169,20 @@ var exports10 = {
 var thread_default = Object.assign(Thread, exports10);
 
 // src/ui/assistant-modal.tsx
-import { Fragment as Fragment6, jsx as jsx43, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx44, jsxs as jsxs14 } from "react/jsx-runtime";
 var AssistantModal = (config) => {
   return /* @__PURE__ */ jsxs14(AssistantModalRoot, { config, children: [
-    /* @__PURE__ */ jsx43(AssistantModalTrigger, {}),
-    /* @__PURE__ */ jsx43(AssistantModalContent, { children: /* @__PURE__ */ jsx43(thread_default, {}) })
+    /* @__PURE__ */ jsx44(AssistantModalTrigger, {}),
+    /* @__PURE__ */ jsx44(AssistantModalContent, { children: /* @__PURE__ */ jsx44(thread_default, {}) })
   ] });
 };
 AssistantModal.displayName = "AssistantModal";
 var AssistantModalRoot = ({ config, ...props }) => {
-  return /* @__PURE__ */ jsx43(ThreadConfigProvider, { config, children: /* @__PURE__ */ jsx43(assistantModal_exports.Root, { ...props }) });
+  return /* @__PURE__ */ jsx44(ThreadConfigProvider, { config, children: /* @__PURE__ */ jsx44(assistantModal_exports.Root, { ...props }) });
 };
 AssistantModalRoot.displayName = "AssistantModalRoot";
-var AssistantModalTrigger = forwardRef28((props, ref) => {
-  return /* @__PURE__ */ jsx43(AssistantModalAnchor, { children: /* @__PURE__ */ jsx43(assistantModal_exports.Trigger, { asChild: true, children: /* @__PURE__ */ jsx43(AssistantModalButton, { ...props, ref }) }) });
+var AssistantModalTrigger = forwardRef29((props, ref) => {
+  return /* @__PURE__ */ jsx44(AssistantModalAnchor, { children: /* @__PURE__ */ jsx44(assistantModal_exports.Trigger, { asChild: true, children: /* @__PURE__ */ jsx44(AssistantModalButton, { ...props, ref }) }) });
 });
 AssistantModalTrigger.displayName = "AssistantModalTrigger";
 var AssistantModalAnchor = withDefaults(assistantModal_exports.Anchor, {
@@ -3991,7 +4193,7 @@ var ModalButtonStyled = withDefaults(TooltipIconButton, {
   variant: "default",
   className: "aui-modal-button"
 });
-var AssistantModalButton = forwardRef28(({ "data-state": state, ...rest }, ref) => {
+var AssistantModalButton = forwardRef29(({ "data-state": state, ...rest }, ref) => {
   const {
     strings: {
       assistantModal: {
@@ -4005,7 +4207,7 @@ var AssistantModalButton = forwardRef28(({ "data-state": state, ...rest }, ref)
     } = {}
   } = useThreadConfig();
   const tooltip = state === "open" ? openTooltip : closedTooltip;
-  return /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx44(
     ModalButtonStyled,
     {
       side: "left",
@@ -4014,14 +4216,14 @@ var AssistantModalButton = forwardRef28(({ "data-state": state, ...rest }, ref)
       ...rest,
       ref,
       children: rest.children ?? /* @__PURE__ */ jsxs14(Fragment6, { children: [
-        /* @__PURE__ */ jsx43(
+        /* @__PURE__ */ jsx44(
           BotIcon,
           {
             "data-state": state,
             className: "aui-modal-button-closed-icon"
           }
         ),
-        /* @__PURE__ */ jsx43(
+        /* @__PURE__ */ jsx44(
           ChevronDownIcon,
           {
             "data-state": state,
@@ -4070,6 +4272,7 @@ export {
   thread_welcome_default as ThreadWelcome,
   user_action_bar_default as UserActionBar,
   user_message_default as UserMessage,
+  WebSpeechSynthesisAdapter,
   fromCoreMessage,
   fromCoreMessages,
   fromLanguageModelMessages,
@@ -4086,6 +4289,8 @@ export {
   useActionBarCopy,
   useActionBarEdit,
   useActionBarReload,
+  useActionBarSpeak,
+  useActionBarStopSpeaking,
   useAppendMessage,
   useAssistantContext,
   useAssistantInstructions,