@assistant-ui/react 0.5.41 → 0.5.45

package/dist/index.mjs

@@ -164,6 +164,7 @@ import { create as create4 } from "zustand";
 var getThreadStateFromRuntime = (runtime) => {
   const lastMessage = runtime.messages.at(-1);
   return Object.freeze({
+    threadId: runtime.threadId,
     capabilities: runtime.capabilities,
     isDisabled: runtime.isDisabled,
     isRunning: lastMessage?.role !== "assistant" ? false : lastMessage.status.type === "running"
@@ -636,6 +637,9 @@ var useSmooth = (state, smooth = false) => {
     setDisplayedText(text2);
     useSmoothStatus2?.setState(text2 !== state.part.text ? SMOOTH_STATUS : state.status);
   });
+  useEffect(() => {
+    useSmoothStatus2?.setState(text !== displayedText ? SMOOTH_STATUS : state.status);
+  }, [useSmoothStatus2, text, displayedText, state.status]);
   const [animatorRef] = useState2(
     new TextStreamAnimator(text, setText)
   );
@@ -1072,59 +1076,12 @@ var useEdgeRuntime = ({
 // 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 LocalThreadRuntime = class {
   constructor(configProvider, adapter, { initialMessages, ...options }) {
     this.configProvider = configProvider;
     this.adapter = adapter;
+    this.threadId = generateId();
     this.options = options;
     if (initialMessages) {
       let parentId = null;
@@ -1146,6 +1103,7 @@ var LocalThreadRuntime = class {
     unstable_copy: true,
     speak: false
   };
+  threadId;
   isDisabled = false;
   get messages() {
     return this.repository.getMessages();
@@ -1158,6 +1116,9 @@ var LocalThreadRuntime = class {
     }
   };
   _options;
+  get options() {
+    return this._options;
+  }
   set options({ initialMessages, ...options }) {
     this._options = options;
     const canSpeak = options.adapters?.speech !== void 0;
@@ -1239,7 +1200,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({
@@ -1334,10 +1295,24 @@ var LocalThreadRuntime = class {
       this.performRoundtrip(parentId, message);
     }
   }
+  // TODO lift utterance state to thread runtime
+  _utterance;
   speak(messageId) {
+    const adapter = this.options.adapters?.speech;
+    if (!adapter) throw new Error("Speech adapter not configured");
     const { message } = this.repository.getMessage(messageId);
-    const adapter = new WebSpeechSynthesisAdapter();
-    return adapter.speak(message);
+    if (this._utterance) {
+      this._utterance.cancel();
+      this._utterance = void 0;
+    }
+    const utterance = adapter.speak(message);
+    utterance.onEnd(() => {
+      if (this._utterance === utterance) {
+        this._utterance = void 0;
+      }
+    });
+    this._utterance = utterance;
+    return this._utterance;
   }
   export() {
     return this.repository.export();
@@ -1431,11 +1406,12 @@ var getAutoStatus = (isLast, isRunning) => isLast && isRunning ? AUTO_STATUS_RUN
 
 // src/runtimes/external-store/ThreadMessageLike.tsx
 var fromThreadMessageLike = (like, fallbackId, fallbackStatus) => {
-  const { role, content, id, createdAt, status } = like;
+  const { role, id, createdAt, status } = like;
   const common = {
     id: id ?? fallbackId,
     createdAt: createdAt ?? /* @__PURE__ */ new Date()
   };
+  const content = typeof like.content === "string" ? [{ type: "text", text: like.content }] : like.content;
   switch (role) {
     case "assistant":
       return {
@@ -1445,6 +1421,8 @@ var fromThreadMessageLike = (like, fallbackId, fallbackStatus) => {
           const type = part.type;
           switch (type) {
             case "text":
+              if (part.text.trim().length === 0) return null;
+              return part;
             case "ui":
               return part;
             case "tool-call": {
@@ -1459,7 +1437,7 @@ var fromThreadMessageLike = (like, fallbackId, fallbackStatus) => {
               throw new Error(`Unknown content part type: ${unhandledType}`);
             }
           }
-        }),
+        }).filter((c) => !!c),
         status: status ?? fallbackStatus
       };
     case "user":
@@ -1497,6 +1475,14 @@ 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";
@@ -1516,8 +1502,9 @@ var ExternalStoreThreadRuntime = class {
   get capabilities() {
     return this._capabilities;
   }
-  messages = [];
-  isDisabled = false;
+  threadId;
+  messages;
+  isDisabled;
   converter = new ThreadMessageConverter();
   _store;
   composer = {
@@ -1530,8 +1517,12 @@ var ExternalStoreThreadRuntime = class {
   constructor(store) {
     this.store = store;
   }
+  get store() {
+    return this._store;
+  }
   set store(store) {
     if (this._store === store) return;
+    this.threadId = store.threadId ?? this.threadId ?? generateId();
     const isRunning = store.isRunning ?? false;
     this.isDisabled = store.isDisabled ?? false;
     const oldStore = this._store;
@@ -1667,6 +1658,9 @@ var ExternalStoreRuntime = class extends BaseAssistantRuntime {
   constructor(store) {
     super(new ExternalStoreThreadRuntime(store));
   }
+  get store() {
+    return this.thread.store;
+  }
   set store(store) {
     this.thread.store = store;
   }
@@ -1707,6 +1701,153 @@ var useExternalStoreRuntime = (store) => {
   return runtime;
 };
 
+// src/runtimes/external-store/external-message-converter.tsx
+import { useMemo as useMemo2 } from "react";
+var joinExternalMessages = (messages) => {
+  const assistantMessage = {
+    role: "assistant",
+    content: []
+  };
+  for (const output of messages) {
+    if (output.role === "tool") {
+      const toolCallIdx = assistantMessage.content.findIndex(
+        (c) => c.type === "tool-call" && c.toolCallId === output.toolCallId
+      );
+      if (toolCallIdx !== -1) {
+        const toolCall = assistantMessage.content[toolCallIdx];
+        if (output.toolName) {
+          if (toolCall.toolName !== output.toolName)
+            throw new Error(
+              `Tool call name ${output.toolCallId} ${output.toolName} does not match existing tool call ${toolCall.toolName}`
+            );
+        }
+        assistantMessage.content[toolCallIdx] = {
+          ...toolCall,
+          result: output.result
+        };
+      } else {
+        throw new Error(
+          `Tool call ${output.toolCallId} ${output.toolName} not found in assistant message`
+        );
+      }
+    } else {
+      const content = output.content;
+      const role = output.role;
+      switch (role) {
+        case "system":
+        case "user":
+          return { role, content };
+        case "assistant":
+          if (assistantMessage.content.length === 0) {
+            assistantMessage.id = output.id;
+            assistantMessage.createdAt ??= output.createdAt;
+            assistantMessage.status ??= output.status;
+          }
+          assistantMessage.content.push(...content);
+          break;
+        default: {
+          const unsupportedRole = role;
+          throw new Error(`Unknown message role: ${unsupportedRole}`);
+        }
+      }
+    }
+  }
+  return assistantMessage;
+};
+var chunkExternalMessages = (callbackResults) => {
+  const results = [];
+  let isAssistant = false;
+  let inputs = [];
+  let outputs = [];
+  const flush = () => {
+    if (outputs.length) {
+      results.push({
+        inputs,
+        outputs
+      });
+    }
+    inputs = [];
+    outputs = [];
+  };
+  for (const callbackResult of callbackResults) {
+    for (const output of callbackResult.outputs) {
+      if (!isAssistant || output.role === "user" || output.role === "system") {
+        flush();
+      }
+      isAssistant = output.role === "assistant" || output.role === "tool";
+      if (inputs.at(-1) !== callbackResult.input) {
+        inputs.push(callbackResult.input);
+      }
+      outputs.push(output);
+    }
+  }
+  flush();
+  return results;
+};
+var useExternalMessageConverter = ({
+  callback,
+  messages,
+  isRunning
+}) => {
+  const state = useMemo2(
+    () => ({
+      callback,
+      callbackCache: /* @__PURE__ */ new WeakMap(),
+      chunkCache: /* @__PURE__ */ new WeakMap(),
+      converterCache: new ThreadMessageConverter()
+    }),
+    [callback]
+  );
+  return useMemo2(() => {
+    const callbackResults = [];
+    for (const message of messages) {
+      let result = state.callbackCache.get(message);
+      if (!result) {
+        const output = state.callback(message);
+        const outputs = Array.isArray(output) ? output : [output];
+        result = { input: message, outputs };
+        state.callbackCache.set(message, result);
+      }
+      callbackResults.push(result);
+    }
+    const chunks = chunkExternalMessages(callbackResults).map((m) => {
+      const key = m.outputs[0];
+      if (!key) return m;
+      const cached = state.chunkCache.get(key);
+      if (cached && shallowArrayEqual(cached.outputs, m.outputs)) return cached;
+      state.chunkCache.set(key, m);
+      return m;
+    });
+    return state.converterCache.convertMessages(
+      chunks,
+      (cache, message, idx) => {
+        const isLast = idx === chunks.length - 1;
+        const autoStatus = getAutoStatus(isLast, isRunning);
+        if (cache && (cache.role !== "assistant" || !isAutoStatus(cache.status) || cache.status === autoStatus)) {
+          const inputs = getExternalStoreMessage(cache);
+          if (shallowArrayEqual(inputs, message.inputs)) {
+            return cache;
+          }
+        }
+        const newMessage = fromThreadMessageLike(
+          joinExternalMessages(message.outputs),
+          idx.toString(),
+          autoStatus
+        );
+        newMessage[symbolInnerMessage] = message.inputs;
+        return newMessage;
+      }
+    );
+  }, [state, messages, isRunning]);
+};
+var shallowArrayEqual = (a, b) => {
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) {
+    if (a[i] !== b[i]) return false;
+  }
+  return true;
+};
+
 // src/runtimes/dangerous-in-browser/useDangerousInBrowserRuntime.ts
 import { useState as useState6 } from "react";
 
@@ -1743,6 +1884,47 @@ var useDangerousInBrowserRuntime = ({
   return useLocalRuntime(adapter, { initialMessages });
 };
 
+// src/runtimes/speech/WebSpeechSynthesisAdapter.ts
+var WebSpeechSynthesisAdapter = class {
+  speak(message) {
+    const text = getThreadMessageText(message);
+    const utterance = new SpeechSynthesisUtterance(text);
+    const endHandlers = /* @__PURE__ */ new Set();
+    const handleEnd = (reason, error) => {
+      if (res.status.type === "ended") return;
+      res.status = { type: "ended", reason, error };
+      endHandlers.forEach((handler) => handler());
+    };
+    utterance.addEventListener("end", () => handleEnd("finished"));
+    utterance.addEventListener("error", (e) => handleEnd("error", e.error));
+    window.speechSynthesis.speak(utterance);
+    const res = {
+      status: { type: "running" },
+      cancel: () => {
+        window.speechSynthesis.cancel();
+        handleEnd("cancelled");
+      },
+      onEnd: (callback) => {
+        if (res.status.type === "ended") {
+          let cancelled = false;
+          queueMicrotask(() => {
+            if (!cancelled) callback();
+          });
+          return () => {
+            cancelled = true;
+          };
+        } else {
+          endHandlers.add(callback);
+          return () => {
+            endHandlers.delete(callback);
+          };
+        }
+      }
+    };
+    return res;
+  }
+};
+
 // src/context/providers/ThreadProvider.tsx
 import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
 var ThreadProvider = ({
@@ -1770,7 +1952,7 @@ var ThreadProvider = ({
       const thread = provider.thread;
       const oldState = context.useThread.getState();
       const state = getThreadStateFromRuntime(thread);
-      if (oldState.isDisabled !== state.isDisabled || oldState.isRunning !== state.isRunning || // TODO ensure capabilities is memoized
+      if (oldState.threadId !== state.threadId || oldState.isDisabled !== state.isDisabled || oldState.isRunning !== state.isRunning || // TODO ensure capabilities is memoized
       oldState.capabilities !== state.capabilities) {
         context.useThread.setState(
           state,
@@ -1859,7 +2041,7 @@ var AssistantRuntimeProviderImpl = ({ children, runtime }) => {
 var AssistantRuntimeProvider = memo(AssistantRuntimeProviderImpl);
 
 // src/context/react/ComposerContext.ts
-import { useMemo as useMemo2 } from "react";
+import { useMemo as useMemo3 } from "react";
 
 // src/context/react/MessageContext.ts
 import { createContext as createContext4, useContext as useContext4 } from "react";
@@ -1877,7 +2059,7 @@ function useMessageContext(options) {
 var useComposerContext = () => {
   const { useComposer } = useThreadContext();
   const { useEditComposer } = useMessageContext({ optional: true }) ?? {};
-  return useMemo2(
+  return useMemo3(
     () => ({
       useComposer: useEditComposer ?? useComposer,
       type: useEditComposer ? "edit" : "new"
@@ -2017,7 +2199,7 @@ var useAssistantInstructions = (instruction) => {
 import { useCallback as useCallback3 } from "react";
 
 // src/utils/combined/useCombinedStore.ts
-import { useMemo as useMemo3 } from "react";
+import { useMemo as useMemo4 } from "react";
 
 // src/utils/combined/createCombinedStore.ts
 import { useSyncExternalStore } from "react";
@@ -2038,7 +2220,7 @@ var createCombinedStore = (stores) => {
 
 // src/utils/combined/useCombinedStore.ts
 var useCombinedStore = (stores, selector) => {
-  const useCombined = useMemo3(() => createCombinedStore(stores), stores);
+  const useCombined = useMemo4(() => createCombinedStore(stores), stores);
   return useCombined(selector);
 };
 
@@ -2900,6 +3082,7 @@ var MessageContentPartComponent = ({
       const Tool = by_name[part.toolName] || Fallback2;
       const addResult = (result) => addToolResult({
         messageId: useMessage.getState().message.id,
+        toolName: part.toolName,
         toolCallId: part.toolCallId,
         result
       });
@@ -3335,7 +3518,7 @@ var makeMessageUtilsStore = () => create14((set) => {
     },
     isSpeaking: false,
     stopSpeaking: () => {
-      utterance?.stop();
+      utterance?.cancel();
     },
     addUtterance: (utt) => {
       utterance = utt;
@@ -3537,28 +3720,29 @@ import {
   StopCircleIcon
 } from "lucide-react";
 import { Fragment as Fragment4, jsx as jsx32, jsxs as jsxs5 } from "react/jsx-runtime";
-var useAllowCopy = () => {
+var useAllowCopy = (ensureCapability = false) => {
   const { assistantMessage: { allowCopy = true } = {} } = useThreadConfig();
   const { useThread } = useThreadContext();
   const copySupported = useThread((t) => t.capabilities.unstable_copy);
-  return copySupported && allowCopy;
+  return allowCopy && (!ensureCapability || copySupported);
 };
-var useAllowSpeak = () => {
+var useAllowSpeak = (ensureCapability = false) => {
   const { assistantMessage: { allowSpeak = true } = {} } = useThreadConfig();
   const { useThread } = useThreadContext();
   const speakSupported = useThread((t) => t.capabilities.speak);
-  return speakSupported && allowSpeak;
+  return allowSpeak && (!ensureCapability || speakSupported);
 };
-var useAllowReload = () => {
+var useAllowReload = (ensureCapability = false) => {
   const { assistantMessage: { allowReload = true } = {} } = useThreadConfig();
   const { useThread } = useThreadContext();
   const reloadSupported = useThread((t) => t.capabilities.reload);
-  return reloadSupported && allowReload;
+  return allowReload && (!ensureCapability || reloadSupported);
 };
 var AssistantActionBar = () => {
-  const allowCopy = useAllowCopy();
-  const allowReload = useAllowReload();
-  if (!allowCopy && !allowReload) return null;
+  const allowCopy = useAllowCopy(true);
+  const allowReload = useAllowReload(true);
+  const allowSpeak = useAllowSpeak(true);
+  if (!allowCopy && !allowReload && !allowSpeak) return null;
   return /* @__PURE__ */ jsxs5(
     AssistantActionBarRoot,
     {
@@ -3566,9 +3750,9 @@ var AssistantActionBar = () => {
       autohide: "not-last",
       autohideFloat: "single-branch",
       children: [
-        /* @__PURE__ */ jsx32(AssistantActionBarSpeechControl, {}),
-        /* @__PURE__ */ jsx32(AssistantActionBarCopy, {}),
-        /* @__PURE__ */ jsx32(AssistantActionBarReload, {})
+        allowSpeak && /* @__PURE__ */ jsx32(AssistantActionBarSpeechControl, {}),
+        allowCopy && /* @__PURE__ */ jsx32(AssistantActionBarCopy, {}),
+        allowReload && /* @__PURE__ */ jsx32(AssistantActionBarReload, {})
       ]
     }
   );
@@ -3584,8 +3768,6 @@ var AssistantActionBarCopy = forwardRef20((props, ref) => {
       assistantMessage: { copy: { tooltip = "Copy" } = {} } = {}
     } = {}
   } = useThreadConfig();
-  const allowCopy = useAllowCopy();
-  if (!allowCopy) return null;
   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, {}) })
@@ -3979,14 +4161,14 @@ import { forwardRef as forwardRef26 } from "react";
 import { forwardRef as forwardRef25 } from "react";
 import { PencilIcon } from "lucide-react";
 import { jsx as jsx40 } from "react/jsx-runtime";
-var useAllowEdit = () => {
+var useAllowEdit = (ensureCapability = false) => {
   const { userMessage: { allowEdit = true } = {} } = useThreadConfig();
   const { useThread } = useThreadContext();
   const editSupported = useThread((t) => t.capabilities.edit);
-  return editSupported && allowEdit;
+  return allowEdit && (!ensureCapability || editSupported);
 };
 var UserActionBar = () => {
-  const allowEdit = useAllowEdit();
+  const allowEdit = useAllowEdit(true);
   if (!allowEdit) return null;
   return /* @__PURE__ */ jsx40(UserActionBarRoot, { hideWhenRunning: true, autohide: "not-last", children: /* @__PURE__ */ jsx40(UserActionBarEdit, {}) });
 };
@@ -4310,6 +4492,7 @@ export {
   useContentPartText,
   useDangerousInBrowserRuntime,
   useEdgeRuntime,
+  useExternalMessageConverter,
   useExternalStoreRuntime,
   useLocalRuntime,
   useMessageContext,