@assistant-ui/react 0.5.74 → 0.5.75

package/dist/index.mjs

@@ -605,20 +605,13 @@ var useActionBarReload = () => {
 // src/primitive-hooks/actionBar/useActionBarSpeak.tsx
 import { useCallback as useCallback6 } from "react";
 var useActionBarSpeak = () => {
-  const messageStore = useMessageStore();
-  const editComposerStore = useEditComposerStore();
   const messageRunime = useMessageRuntime();
-  const messageUtilsStore = useMessageUtilsStore();
-  const hasSpeakableContent = useCombinedStore(
-    [messageStore, editComposerStore],
-    (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 utt = messageRunime.speak();
-    messageUtilsStore.getState().addUtterance(utt);
-  }, [messageRunime, messageUtilsStore]);
+    messageRunime.speak();
+  }, [messageRunime]);
+  const hasSpeakableContent = useMessage((m) => {
+    return (m.role !== "assistant" || m.status.type !== "running") && m.content.some((c) => c.type === "text" && c.text.length > 0);
+  });
   if (!hasSpeakableContent) return null;
   return callback;
 };
@@ -626,11 +619,11 @@ var useActionBarSpeak = () => {
 // src/primitive-hooks/actionBar/useActionBarStopSpeaking.tsx
 import { useCallback as useCallback7 } from "react";
 var useActionBarStopSpeaking = () => {
-  const messageUtilsStore = useMessageUtilsStore();
-  const isSpeaking = useMessageUtils((u) => u.isSpeaking);
+  const messageRuntime = useMessageRuntime();
+  const isSpeaking = useMessage((u) => u.speech != null);
   const callback = useCallback7(async () => {
-    messageUtilsStore.getState().stopSpeaking();
-  }, [messageUtilsStore]);
+    messageRuntime.stopSpeaking();
+  }, [messageRuntime]);
   if (!isSpeaking) return null;
   return callback;
 };
@@ -810,7 +803,7 @@ var useMessageIf = (props) => {
   const messageUtilsStore = useMessageUtilsStore();
   return useCombinedStore(
     [messageStore, messageUtilsStore],
-    ({ role, attachments, branchCount, isLast }, { isCopied, isHovering, isSpeaking, submittedFeedback }) => {
+    ({ role, attachments, branchCount, isLast, speech }, { isCopied, isHovering, submittedFeedback }) => {
       if (props.hasBranches === true && branchCount < 2) return false;
       if (props.user && role !== "user") return false;
       if (props.assistant && role !== "assistant") return false;
@@ -818,8 +811,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;
+      if (props.speaking === true && speech == null) return false;
+      if (props.speaking === false && speech != null) return false;
       if (props.hasAttachments === true && (role !== "user" || !attachments.length))
         return false;
       if (props.hasAttachments === false && role === "user" && !!attachments.length)
@@ -1348,7 +1341,7 @@ __export(branchPicker_exports, {
   Count: () => BranchPickerPrimitiveCount,
   Next: () => BranchPickerPrimitiveNext,
   Number: () => BranchPickerPrimitiveNumber,
-  Previous: () => BranchPickerPrevious,
+  Previous: () => BranchPickerPrimitivePrevious,
   Root: () => BranchPickerPrimitiveRoot
 });
 
@@ -1359,7 +1352,7 @@ var BranchPickerPrimitiveNext = createActionButton(
 );
 
 // src/primitives/branchPicker/BranchPickerPrevious.tsx
-var BranchPickerPrevious = createActionButton(
+var BranchPickerPrimitivePrevious = createActionButton(
   "BranchPickerPrimitive.Previous",
   useBranchPickerPrevious
 );
@@ -2173,6 +2166,16 @@ var MessageRuntimeImpl = class {
     if (!state) throw new Error("Message is not available");
     return this._threadBinding.getState().speak(state.id);
   }
+  stopSpeaking() {
+    const state = this._core.getState();
+    if (!state) throw new Error("Message is not available");
+    const thread = this._threadBinding.getState();
+    if (thread.speech?.messageId === state.id) {
+      this._threadBinding.getState().stopSpeaking();
+    } else {
+      throw new Error("Message is not being spoken");
+    }
+  }
   submitFeedback({ type }) {
     const state = this._core.getState();
     if (!state) throw new Error("Message is not available");
@@ -2817,7 +2820,6 @@ import { create as create10 } from "zustand";
 // src/context/stores/MessageUtils.ts
 import { create as create9 } from "zustand";
 var makeMessageUtilsStore = () => create9((set) => {
-  let utterance = null;
   return {
     isCopied: false,
     setIsCopied: (value) => {
@@ -2827,17 +2829,6 @@ var makeMessageUtilsStore = () => create9((set) => {
     setIsHovering: (value) => {
       set({ isHovering: value });
     },
-    isSpeaking: false,
-    stopSpeaking: () => {
-      utterance?.cancel();
-    },
-    addUtterance: (utt) => {
-      utterance = utt;
-      set({ isSpeaking: true });
-      utt.onEnd(() => {
-        set({ isSpeaking: false });
-      });
-    },
     submittedFeedback: null,
     setSubmittedFeedback: (feedback) => {
       set({ submittedFeedback: feedback });
@@ -3571,7 +3562,8 @@ var getThreadState = (runtime) => {
     isRunning: lastMessage?.role !== "assistant" ? false : lastMessage.status.type === "running",
     messages: runtime.messages,
     suggestions: runtime.suggestions,
-    extras: runtime.extras
+    extras: runtime.extras,
+    speech: runtime.speech
   });
 };
 var ThreadRuntimeImpl = class {
@@ -3618,6 +3610,12 @@ var ThreadRuntimeImpl = class {
   get messages() {
     return this._threadBinding.getState().messages;
   }
+  /**
+   * @deprecated Use `getState().speechState` instead. This will be removed in 0.6.0.
+   */
+  get speech() {
+    return this._threadBinding.getState().speech;
+  }
   unstable_getCore() {
     return this._threadBinding.getState();
   }
@@ -3678,15 +3676,18 @@ var ThreadRuntimeImpl = class {
   switchToBranch(branchId) {
     return this._threadBinding.getState().switchToBranch(branchId);
   }
-  // /**
-  //  * @deprecated Use `getMesssageById(id).speak()` instead. This will be removed in 0.6.0.
-  //  */
+  /**
+   * @deprecated Use `getMesssageById(id).speak()` instead. This will be removed in 0.6.0.
+   */
   speak(messageId) {
     return this._threadBinding.getState().speak(messageId);
   }
-  // /**
-  //  * @deprecated Use `getMesssageById(id).submitFeedback({ type })` instead. This will be removed in 0.6.0.
-  //  */
+  stopSpeaking() {
+    return this._threadBinding.getState().stopSpeaking();
+  }
+  /**
+   * @deprecated Use `getMesssageById(id).submitFeedback({ type })` instead. This will be removed in 0.6.0.
+   */
   submitFeedback(options) {
     return this._threadBinding.getState().submitFeedback(options);
   }
@@ -3713,7 +3714,7 @@ var ThreadRuntimeImpl = class {
     return new MessageRuntimeImpl(
       new ShallowMemoizeSubject({
         getState: () => {
-          const messages2 = this.getState().messages;
+          const { messages: messages2, speech: speechState } = this.getState();
           const message = messages2[idx];
           if (!message) return SKIP_UPDATE;
           const branches = this._threadBinding.getState().getBranches(message.id);
@@ -3724,7 +3725,8 @@ var ThreadRuntimeImpl = class {
             parentId: messages2[idx - 1]?.id ?? null,
             branches,
             branchNumber: branches.indexOf(message.id) + 1,
-            branchCount: branches.length
+            branchCount: branches.length,
+            speech: speechState?.messageId === message.id ? speechState : null
           };
         },
         subscribe: (callback) => this._threadBinding.subscribe(callback)
@@ -4364,24 +4366,35 @@ var LocalThreadRuntimeCore = class {
       this.performRoundtrip(parentId, message);
     }
   }
-  // TODO lift utterance state to thread runtime
-  _utterance;
+  // TODO speech runtime?
+  _stopSpeaking;
+  speech = null;
   speak(messageId) {
     const adapter = this.options.adapters?.speech;
     if (!adapter) throw new Error("Speech adapter not configured");
     const { message } = this.repository.getMessage(messageId);
-    if (this._utterance) {
-      this._utterance.cancel();
-      this._utterance = void 0;
-    }
+    this._stopSpeaking?.();
     const utterance = adapter.speak(message);
-    utterance.onEnd(() => {
-      if (this._utterance === utterance) {
-        this._utterance = void 0;
+    const unsub = utterance.subscribe(() => {
+      if (utterance.status.type === "ended") {
+        this._stopSpeaking = void 0;
+        this.speech = null;
+      } else {
+        this.speech = { messageId, status: utterance.status };
       }
+      this.notifySubscribers();
     });
-    this._utterance = utterance;
-    return this._utterance;
+    this.speech = { messageId, status: utterance.status };
+    this._stopSpeaking = () => {
+      utterance.cancel();
+      unsub();
+      this.speech = null;
+      this._stopSpeaking = void 0;
+    };
+  }
+  stopSpeaking() {
+    if (!this._stopSpeaking) throw new Error("No message is being spoken");
+    this._stopSpeaking();
   }
   submitFeedback({ messageId, type }) {
     const adapter = this.options.adapters?.feedback;
@@ -4740,11 +4753,38 @@ var ExternalStoreThreadRuntimeCore = class {
       throw new Error("Runtime does not support tool results.");
     this._store.onAddToolResult(options);
   }
+  // TODO speech runtime?
+  _stopSpeaking;
+  speech = null;
   speak(messageId) {
-    if (!this._store.onSpeak)
-      throw new Error("Runtime does not support speaking.");
+    let adapter = this.store.adapters?.speech;
+    if (!adapter && this.store.onSpeak) {
+      adapter = { speak: this.store.onSpeak };
+    }
+    if (!adapter) throw new Error("Speech adapter not configured");
     const { message } = this.repository.getMessage(messageId);
-    return this._store.onSpeak(message);
+    this._stopSpeaking?.();
+    const utterance = adapter.speak(message);
+    const unsub = utterance.subscribe(() => {
+      if (utterance.status.type === "ended") {
+        this._stopSpeaking = void 0;
+        this.speech = null;
+      } else {
+        this.speech = { messageId, status: utterance.status };
+      }
+      this.notifySubscribers();
+    });
+    this.speech = { messageId, status: utterance.status };
+    this._stopSpeaking = () => {
+      utterance.cancel();
+      unsub();
+      this.speech = null;
+      this._stopSpeaking = void 0;
+    };
+  }
+  stopSpeaking() {
+    if (!this._stopSpeaking) throw new Error("No message is being spoken");
+    this._stopSpeaking();
   }
   submitFeedback({ messageId, type }) {
     const adapter = this._store.adapters?.feedback;
@@ -5011,11 +5051,11 @@ var WebSpeechSynthesisAdapter = class {
   speak(message) {
     const text = getThreadMessageText(message);
     const utterance = new SpeechSynthesisUtterance(text);
-    const endHandlers = /* @__PURE__ */ new Set();
+    const subscribers = /* @__PURE__ */ new Set();
     const handleEnd = (reason, error) => {
       if (res.status.type === "ended") return;
       res.status = { type: "ended", reason, error };
-      endHandlers.forEach((handler) => handler());
+      subscribers.forEach((handler) => handler());
     };
     utterance.addEventListener("end", () => handleEnd("finished"));
     utterance.addEventListener("error", (e) => handleEnd("error", e.error));
@@ -5026,7 +5066,7 @@ var WebSpeechSynthesisAdapter = class {
         window.speechSynthesis.cancel();
         handleEnd("cancelled");
       },
-      onEnd: (callback) => {
+      subscribe: (callback) => {
         if (res.status.type === "ended") {
           let cancelled = false;
           queueMicrotask(() => {
@@ -5036,9 +5076,9 @@ var WebSpeechSynthesisAdapter = class {
             cancelled = true;
           };
         } else {
-          endHandlers.add(callback);
+          subscribers.add(callback);
           return () => {
-            endHandlers.delete(callback);
+            subscribers.delete(callback);
           };
         }
       }
@@ -5288,13 +5328,13 @@ var AssistantActionBarRoot = withDefaults(actionBar_exports.Root, {
   className: "aui-assistant-action-bar-root"
 });
 AssistantActionBarRoot.displayName = "AssistantActionBarRoot";
-var AssistantActionBarCopy = forwardRef24((props, ref) => {
+var AssistantActionBarCopy = forwardRef24(({ copiedDuration, ...props }, ref) => {
   const {
     strings: {
       assistantMessage: { copy: { tooltip = "Copy" } = {} } = {}
     } = {}
   } = useThreadConfig();
-  return /* @__PURE__ */ jsx39(actionBar_exports.Copy, { asChild: true, children: /* @__PURE__ */ jsx39(TooltipIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsxs4(Fragment5, { children: [
+  return /* @__PURE__ */ jsx39(actionBar_exports.Copy, { copiedDuration, asChild: true, children: /* @__PURE__ */ jsx39(TooltipIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsxs4(Fragment5, { children: [
     /* @__PURE__ */ jsx39(message_exports.If, { copied: true, children: /* @__PURE__ */ jsx39(CheckIcon, {}) }),
     /* @__PURE__ */ jsx39(message_exports.If, { copied: false, children: /* @__PURE__ */ jsx39(CopyIcon, {}) })
   ] }) }) });
@@ -5409,7 +5449,7 @@ var BranchPicker = () => {
   const allowBranchPicker = useAllowBranchPicker(true);
   if (!allowBranchPicker) return null;
   return /* @__PURE__ */ jsxs5(BranchPickerRoot, { hideWhenSingleBranch: true, children: [
-    /* @__PURE__ */ jsx40(BranchPickerPrevious2, {}),
+    /* @__PURE__ */ jsx40(BranchPickerPrevious, {}),
     /* @__PURE__ */ jsx40(BranchPickerState, {}),
     /* @__PURE__ */ jsx40(BranchPickerNext, {})
   ] });
@@ -5419,7 +5459,7 @@ var BranchPickerRoot = withDefaults(branchPicker_exports.Root, {
   className: "aui-branch-picker-root"
 });
 BranchPickerRoot.displayName = "BranchPickerRoot";
-var BranchPickerPrevious2 = forwardRef25((props, ref) => {
+var BranchPickerPrevious = forwardRef25((props, ref) => {
   const {
     strings: {
       branchPicker: { previous: { tooltip = "Previous" } = {} } = {}
@@ -5428,7 +5468,7 @@ var BranchPickerPrevious2 = forwardRef25((props, ref) => {
   const allowBranchPicker = useAllowBranchPicker();
   return /* @__PURE__ */ jsx40(branchPicker_exports.Previous, { disabled: !allowBranchPicker, asChild: true, children: /* @__PURE__ */ jsx40(TooltipIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx40(ChevronLeftIcon, {}) }) });
 });
-BranchPickerPrevious2.displayName = "BranchPickerPrevious";
+BranchPickerPrevious.displayName = "BranchPickerPrevious";
 var BranchPickerStateWrapper = withDefaults("span", {
   className: "aui-branch-picker-state"
 });
@@ -5450,7 +5490,7 @@ var BranchPickerNext = forwardRef25((props, ref) => {
 BranchPickerNext.displayName = "BranchPickerNext";
 var exports2 = {
   Root: BranchPickerRoot,
-  Previous: BranchPickerPrevious2,
+  Previous: BranchPickerPrevious,
   Next: BranchPickerNext
 };
 var branch_picker_default = Object.assign(BranchPicker, exports2);
@@ -5720,23 +5760,27 @@ var ComposerSendButton = withDefaults(TooltipIconButton, {
   variant: "default",
   className: "aui-composer-send"
 });
-var ComposerSend = forwardRef28((props, ref) => {
-  const {
-    strings: { composer: { send: { tooltip = "Send" } = {} } = {} } = {}
-  } = useThreadConfig();
-  return /* @__PURE__ */ jsx46(composer_exports.Send, { asChild: true, children: /* @__PURE__ */ jsx46(ComposerSendButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx46(SendHorizontalIcon, {}) }) });
-});
+var ComposerSend = forwardRef28(
+  (props, ref) => {
+    const {
+      strings: { composer: { send: { tooltip = "Send" } = {} } = {} } = {}
+    } = useThreadConfig();
+    return /* @__PURE__ */ jsx46(composer_exports.Send, { asChild: true, children: /* @__PURE__ */ jsx46(ComposerSendButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx46(SendHorizontalIcon, {}) }) });
+  }
+);
 ComposerSend.displayName = "ComposerSend";
 var ComposerCancelButton = withDefaults(TooltipIconButton, {
   variant: "default",
   className: "aui-composer-cancel"
 });
-var ComposerCancel = forwardRef28((props, ref) => {
-  const {
-    strings: { composer: { cancel: { tooltip = "Cancel" } = {} } = {} } = {}
-  } = useThreadConfig();
-  return /* @__PURE__ */ jsx46(composer_exports.Cancel, { asChild: true, children: /* @__PURE__ */ jsx46(ComposerCancelButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx46(CircleStopIcon, {}) }) });
-});
+var ComposerCancel = forwardRef28(
+  (props, ref) => {
+    const {
+      strings: { composer: { cancel: { tooltip = "Cancel" } = {} } = {} } = {}
+    } = useThreadConfig();
+    return /* @__PURE__ */ jsx46(composer_exports.Cancel, { asChild: true, children: /* @__PURE__ */ jsx46(ComposerCancelButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx46(CircleStopIcon, {}) }) });
+  }
+);
 ComposerCancel.displayName = "ComposerCancel";
 var exports6 = {
   Root: ComposerRoot,
@@ -5768,11 +5812,9 @@ var ThreadWelcomeRootStyled = withDefaults("div", {
 var ThreadWelcomeCenter = withDefaults("div", {
   className: "aui-thread-welcome-center"
 });
-var ThreadWelcomeRoot = forwardRef29(
-  (props, ref) => {
-    return /* @__PURE__ */ jsx47(thread_exports.Empty, { children: /* @__PURE__ */ jsx47(ThreadWelcomeRootStyled, { ...props, ref }) });
-  }
-);
+var ThreadWelcomeRoot = forwardRef29((props, ref) => {
+  return /* @__PURE__ */ jsx47(thread_exports.Empty, { children: /* @__PURE__ */ jsx47(ThreadWelcomeRootStyled, { ...props, ref }) });
+});
 ThreadWelcomeRoot.displayName = "ThreadWelcomeRoot";
 var ThreadWelcomeAvatar = () => {
   const { assistantAvatar: avatar = { fallback: "A" } } = useThreadConfig();
@@ -5889,19 +5931,17 @@ UserMessageRoot.displayName = "UserMessageRoot";
 var UserMessageContentWrapper = withDefaults("div", {
   className: "aui-user-message-content"
 });
-var UserMessageContent = forwardRef31(
-  ({ components, ...props }, ref) => {
-    return /* @__PURE__ */ jsx50(UserMessageContentWrapper, { ...props, ref, children: /* @__PURE__ */ jsx50(
-      message_exports.Content,
-      {
-        components: {
-          ...components,
-          Text: components?.Text ?? content_part_default.Text
-        }
+var UserMessageContent = forwardRef31(({ components, ...props }, ref) => {
+  return /* @__PURE__ */ jsx50(UserMessageContentWrapper, { ...props, ref, children: /* @__PURE__ */ jsx50(
+    message_exports.Content,
+    {
+      components: {
+        ...components,
+        Text: components?.Text ?? content_part_default.Text
       }
-    ) });
-  }
-);
+    }
+  ) });
+});
 UserMessageContent.displayName = "UserMessageContent";
 var UserMessageAttachmentsContainer = withDefaults("div", {
   className: "aui-user-message-attachments"
@@ -5951,25 +5991,19 @@ var EditComposerFooter = withDefaults("div", {
   className: "aui-edit-composer-footer"
 });
 EditComposerFooter.displayName = "EditComposerFooter";
-var EditComposerCancel = forwardRef32(
-  (props, ref) => {
-    const {
-      strings: {
-        editComposer: { cancel: { label = "Cancel" } = {} } = {}
-      } = {}
-    } = useThreadConfig();
-    return /* @__PURE__ */ jsx51(composer_exports.Cancel, { asChild: true, children: /* @__PURE__ */ jsx51(Button, { variant: "ghost", ...props, ref, children: props.children ?? label }) });
-  }
-);
+var EditComposerCancel = forwardRef32((props, ref) => {
+  const {
+    strings: { editComposer: { cancel: { label = "Cancel" } = {} } = {} } = {}
+  } = useThreadConfig();
+  return /* @__PURE__ */ jsx51(composer_exports.Cancel, { asChild: true, children: /* @__PURE__ */ jsx51(Button, { variant: "ghost", ...props, ref, children: props.children ?? label }) });
+});
 EditComposerCancel.displayName = "EditComposerCancel";
-var EditComposerSend = forwardRef32(
-  (props, ref) => {
-    const {
-      strings: { editComposer: { send: { label = "Send" } = {} } = {} } = {}
-    } = useThreadConfig();
-    return /* @__PURE__ */ jsx51(composer_exports.Send, { asChild: true, children: /* @__PURE__ */ jsx51(Button, { ...props, ref, children: props.children ?? label }) });
-  }
-);
+var EditComposerSend = forwardRef32((props, ref) => {
+  const {
+    strings: { editComposer: { send: { label = "Send" } = {} } = {} } = {}
+  } = useThreadConfig();
+  return /* @__PURE__ */ jsx51(composer_exports.Send, { asChild: true, children: /* @__PURE__ */ jsx51(Button, { ...props, ref, children: props.children ?? label }) });
+});
 EditComposerSend.displayName = "EditComposerSend";
 var exports11 = {
   Root: EditComposerRoot,
@@ -6081,7 +6115,10 @@ var AssistantModal = (config) => {
   ] });
 };
 AssistantModal.displayName = "AssistantModal";
-var AssistantModalRoot = ({ config, ...props }) => {
+var AssistantModalRoot = ({
+  config,
+  ...props
+}) => {
   return /* @__PURE__ */ jsx53(ThreadConfigProvider, { config, children: /* @__PURE__ */ jsx53(assistantModal_exports.Root, { ...props }) });
 };
 AssistantModalRoot.displayName = "AssistantModalRoot";