@assistant-ui/react 0.5.42 → 0.5.46

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)
   );
@@ -1077,6 +1081,7 @@ 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;
@@ -1098,6 +1103,7 @@ var LocalThreadRuntime = class {
     unstable_copy: true,
     speak: false
   };
+  threadId;
   isDisabled = false;
   get messages() {
     return this.repository.getMessages();
@@ -1400,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 {
@@ -1414,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": {
@@ -1428,7 +1437,7 @@ var fromThreadMessageLike = (like, fallbackId, fallbackStatus) => {
               throw new Error(`Unknown content part type: ${unhandledType}`);
             }
           }
-        }),
+        }).filter((c) => !!c),
         status: status ?? fallbackStatus
       };
     case "user":
@@ -1493,8 +1502,9 @@ var ExternalStoreThreadRuntime = class {
   get capabilities() {
     return this._capabilities;
   }
-  messages = [];
-  isDisabled = false;
+  threadId;
+  messages;
+  isDisabled;
   converter = new ThreadMessageConverter();
   _store;
   composer = {
@@ -1507,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;
@@ -1644,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;
   }
@@ -1684,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";
 
@@ -1788,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,
@@ -1877,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";
@@ -1895,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"
@@ -1992,6 +2156,7 @@ var makeAssistantTool = (tool) => {
     useAssistantTool(tool);
     return null;
   };
+  Tool.unstable_tool = tool;
   return Tool;
 };
 
@@ -2013,6 +2178,7 @@ var makeAssistantToolUI = (tool) => {
     useAssistantToolUI(tool);
     return null;
   };
+  ToolUI.unstable_tool = tool;
   return ToolUI;
 };
 
@@ -2035,7 +2201,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";
@@ -2056,7 +2222,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);
 };
 
@@ -2869,21 +3035,22 @@ ContentPartPrimitiveInProgress.displayName = "ContentPartPrimitive.InProgress";
 
 // src/primitives/message/MessageContent.tsx
 import { jsx as jsx22, jsxs as jsxs3 } from "react/jsx-runtime";
+var ToolUIDisplay = ({
+  UI,
+  ...props
+}) => {
+  const { useToolUIs } = useAssistantContext();
+  const Render = useToolUIs((s) => s.getToolUI(props.part.toolName)) ?? UI;
+  if (!Render) return null;
+  return /* @__PURE__ */ jsx22(Render, { ...props });
+};
 var defaultComponents = {
   Text: () => /* @__PURE__ */ jsxs3("p", { style: { whiteSpace: "pre-line" }, children: [
     /* @__PURE__ */ jsx22(ContentPartPrimitiveText, {}),
     /* @__PURE__ */ jsx22(ContentPartPrimitiveInProgress, { children: /* @__PURE__ */ jsx22("span", { style: { fontFamily: "revert" }, children: " \u25CF" }) })
   ] }),
   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__ */ jsx22(Render, { ...props });
-    }
-  }
+  UI: () => /* @__PURE__ */ jsx22(ContentPartPrimitiveDisplay, {})
 };
 var MessageContentPartComponent = ({
   components: {
@@ -2891,7 +3058,7 @@ var MessageContentPartComponent = ({
     Text: Text2 = defaultComponents.Text,
     Image: Image2 = defaultComponents.Image,
     UI = defaultComponents.UI,
-    tools: { by_name = {}, Fallback: Fallback2 = defaultComponents.tools.Fallback } = {}
+    tools: { by_name = {}, Fallback: Fallback2 = void 0 } = {}
   } = {}
 }) => {
   const { useThreadActions } = useThreadContext();
@@ -2918,10 +3085,19 @@ 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
       });
-      return /* @__PURE__ */ jsx22(Tool, { part, status, addResult });
+      return /* @__PURE__ */ jsx22(
+        ToolUIDisplay,
+        {
+          UI: Tool,
+          part,
+          status,
+          addResult
+        }
+      );
     }
     default:
       const unhandledType = type;
@@ -3790,13 +3966,22 @@ var AssistantMessageContentWrapper = withDefaults("div", {
   className: "aui-assistant-message-content"
 });
 var AssistantMessageContent = forwardRef22(({ components: componentsProp, ...rest }, ref) => {
-  const { assistantMessage: { components = {} } = {} } = useThreadConfig();
+  const { tools, assistantMessage: { components = {} } = {} } = useThreadConfig();
   return /* @__PURE__ */ jsx36(AssistantMessageContentWrapper, { ...rest, ref, children: /* @__PURE__ */ jsx36(
     message_exports.Content,
     {
       components: {
         ...componentsProp,
-        Text: componentsProp?.Text ?? components.Text ?? content_part_default.Text
+        Text: componentsProp?.Text ?? components.Text ?? content_part_default.Text,
+        tools: {
+          by_name: !tools ? void 0 : Object.fromEntries(
+            tools.map((t) => [
+              t.unstable_tool.toolName,
+              t.unstable_tool.render
+            ])
+          ),
+          Fallback: components.ToolFallback
+        }
       }
     }
   ) });
@@ -4327,6 +4512,7 @@ export {
   useContentPartText,
   useDangerousInBrowserRuntime,
   useEdgeRuntime,
+  useExternalMessageConverter,
   useExternalStoreRuntime,
   useLocalRuntime,
   useMessageContext,