@assistant-ui/react 0.1.7 → 0.1.9

package/dist/index.js

@@ -98,7 +98,7 @@ var getMessageText = (message) => {
 
 // src/actions/useCopyMessage.tsx
 var useCopyMessage = ({ copiedDuration = 3e3 }) => {
-  const { useMessage, useComposer } = useMessageContext();
+  const { useMessage, useMessageUtils, useComposer } = useMessageContext();
   const hasCopyableContent = useCombinedStore(
     [useMessage, useComposer],
     (m, c) => {
@@ -106,13 +106,14 @@ var useCopyMessage = ({ copiedDuration = 3e3 }) => {
     }
   );
   const callback = (0, import_react4.useCallback)(() => {
+    const { message } = useMessage.getState();
+    const { setIsCopied } = useMessageUtils.getState();
     const { isEditing, value: composerValue } = useComposer.getState();
-    const { message, setIsCopied } = useMessage.getState();
     const valueToCopy = isEditing ? composerValue : getMessageText(message);
     navigator.clipboard.writeText(valueToCopy);
     setIsCopied(true);
     setTimeout(() => setIsCopied(false), copiedDuration);
-  }, [useComposer, useMessage, copiedDuration]);
+  }, [useMessage, useMessageUtils, useComposer, copiedDuration]);
   if (!hasCopyableContent) return null;
   return callback;
 };
@@ -134,7 +135,7 @@ var useThreadContext = () => {
 
 // src/actions/useReloadMessage.tsx
 var useReloadMessage = () => {
-  const { useThread, useViewport } = useThreadContext();
+  const { useThread, useThreadActions, useViewport } = useThreadContext();
   const { useMessage } = useMessageContext();
   const disabled = useCombinedStore(
     [useThread, useMessage],
@@ -142,9 +143,9 @@ var useReloadMessage = () => {
   );
   const callback = (0, import_react6.useCallback)(() => {
     const { parentId } = useMessage.getState();
-    useThread.getState().startRun(parentId);
+    useThreadActions.getState().startRun(parentId);
     useViewport.getState().scrollToBottom();
-  }, [useMessage, useThread, useViewport]);
+  }, [useThreadActions, useMessage, useViewport]);
   if (disabled) return null;
   return callback;
 };
@@ -168,7 +169,7 @@ var useBeginMessageEdit = () => {
 // src/actions/useGoToNextBranch.tsx
 var import_react8 = require("react");
 var useGoToNextBranch = () => {
-  const { useThread } = useThreadContext();
+  const { useThreadActions } = useThreadContext();
   const { useMessage, useComposer } = useMessageContext();
   const disabled = useCombinedStore(
     [useMessage, useComposer],
@@ -176,8 +177,8 @@ var useGoToNextBranch = () => {
   );
   const callback = (0, import_react8.useCallback)(() => {
     const { message, branches } = useMessage.getState();
-    useThread.getState().switchToBranch(branches[branches.indexOf(message.id) + 1]);
-  }, [useMessage, useThread]);
+    useThreadActions.getState().switchToBranch(branches[branches.indexOf(message.id) + 1]);
+  }, [useThreadActions, useMessage]);
   if (disabled) return null;
   return callback;
 };
@@ -185,7 +186,7 @@ var useGoToNextBranch = () => {
 // src/actions/useGoToPreviousBranch.tsx
 var import_react9 = require("react");
 var useGoToPreviousBranch = () => {
-  const { useThread } = useThreadContext();
+  const { useThreadActions } = useThreadContext();
   const { useMessage, useComposer } = useMessageContext();
   const disabled = useCombinedStore(
     [useMessage, useComposer],
@@ -193,8 +194,8 @@ var useGoToPreviousBranch = () => {
   );
   const callback = (0, import_react9.useCallback)(() => {
     const { message, branches } = useMessage.getState();
-    useThread.getState().switchToBranch(branches[branches.indexOf(message.id) - 1]);
-  }, [useMessage, useThread]);
+    useThreadActions.getState().switchToBranch(branches[branches.indexOf(message.id) - 1]);
+  }, [useThreadActions, useMessage]);
   if (disabled) return null;
   return callback;
 };
@@ -337,7 +338,9 @@ var ThreadViewport = (0, import_react13.forwardRef)(({ autoScroll = true, onScro
     if (!newIsAtBottom && lastScrollTop.current < div.scrollTop) {
     } else if (newIsAtBottom !== isAtBottom) {
       isScrollingToBottomRef.current = false;
-      useViewport.setState({ isAtBottom: newIsAtBottom });
+      useViewport.setState({
+        isAtBottom: newIsAtBottom
+      });
     }
     lastScrollTop.current = div.scrollTop;
   };
@@ -361,7 +364,7 @@ var import_react16 = require("react");
 
 // src/context/providers/MessageProvider.tsx
 var import_react14 = require("react");
-var import_zustand2 = require("zustand");
+var import_zustand3 = require("zustand");
 
 // src/context/stores/MessageComposer.ts
 var import_zustand = require("zustand");
@@ -397,17 +400,34 @@ var makeEditComposerStore = ({
   }
 }));
 
+// src/context/stores/MessageUtils.ts
+var import_zustand2 = require("zustand");
+var makeMessageUtilsStore = () => (0, import_zustand2.create)((set) => ({
+  inProgressIndicator: null,
+  setInProgressIndicator: (value) => {
+    set({ inProgressIndicator: value });
+  },
+  isCopied: false,
+  setIsCopied: (value) => {
+    set({ isCopied: value });
+  },
+  isHovering: false,
+  setIsHovering: (value) => {
+    set({ isHovering: value });
+  }
+}));
+
 // src/context/providers/MessageProvider.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var getIsLast = (thread, message) => {
   return thread.messages[thread.messages.length - 1]?.id === message.id;
 };
-var syncMessage = (thread, useMessage, messageIndex) => {
+var syncMessage = (thread, getBranches, useMessage, messageIndex) => {
   const parentId = thread.messages[messageIndex - 1]?.id ?? null;
   const message = thread.messages[messageIndex];
   if (!message) return;
   const isLast = getIsLast(thread, message);
-  const branches = thread.getBranches(message.id);
+  const branches = getBranches(message.id);
   const currentState = useMessage.getState();
   if (currentState.message === message && currentState.parentId === parentId && currentState.branches === branches && currentState.isLast === isLast)
     return;
@@ -419,26 +439,10 @@ var syncMessage = (thread, useMessage, messageIndex) => {
   });
 };
 var useMessageContext2 = (messageIndex) => {
-  const { useThread } = useThreadContext();
+  const { useThread, useThreadActions } = useThreadContext();
   const [context] = (0, import_react14.useState)(() => {
-    const useMessage = (0, import_zustand2.create)((set) => ({
-      message: null,
-      parentId: null,
-      branches: [],
-      isLast: false,
-      inProgressIndicator: null,
-      isCopied: false,
-      isHovering: false,
-      setInProgressIndicator: (value) => {
-        set({ inProgressIndicator: value });
-      },
-      setIsCopied: (value) => {
-        set({ isCopied: value });
-      },
-      setIsHovering: (value) => {
-        set({ isHovering: value });
-      }
-    }));
+    const useMessage = (0, import_zustand3.create)(() => ({}));
+    const useMessageUtils = makeMessageUtilsStore();
     const useComposer = makeEditComposerStore({
       onEdit: () => {
         const message = useMessage.getState().message;
@@ -458,20 +462,30 @@ var useMessageContext2 = (messageIndex) => {
         const nonTextParts = message.content.filter(
           (part) => part.type !== "text" && part.type !== "ui"
         );
-        useThread.getState().append({
+        useThreadActions.getState().append({
           parentId,
           content: [{ type: "text", text }, ...nonTextParts]
         });
       }
     });
-    syncMessage(useThread.getState(), useMessage, messageIndex);
-    return { useMessage, useComposer };
+    syncMessage(
+      useThread.getState(),
+      useThreadActions.getState().getBranches,
+      useMessage,
+      messageIndex
+    );
+    return { useMessage, useMessageUtils, useComposer };
   });
   (0, import_react14.useEffect)(() => {
     return useThread.subscribe((thread) => {
-      syncMessage(thread, context.useMessage, messageIndex);
+      syncMessage(
+        thread,
+        useThreadActions.getState().getBranches,
+        context.useMessage,
+        messageIndex
+      );
     });
-  }, [context, useThread, messageIndex]);
+  }, [useThread, useThreadActions, context, messageIndex]);
   return context;
 };
 var MessageProvider = ({
@@ -512,16 +526,19 @@ var ComposerIf = ({ children, ...query }) => {
 
 // src/primitives/message/MessageIf.tsx
 var useMessageIf = (props) => {
-  const { useMessage } = useMessageContext();
-  return useMessage(({ message, branches, isLast, isCopied, isHovering }) => {
-    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;
-    if (props.lastOrHover === true && !isHovering && !isLast) return false;
-    if (props.copied === true && !isCopied) return false;
-    if (props.copied === false && isCopied) return false;
-    return true;
-  });
+  const { useMessage, useMessageUtils } = useMessageContext();
+  return useCombinedStore(
+    [useMessage, useMessageUtils],
+    ({ message, branches, isLast }, { isCopied, isHovering }) => {
+      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;
+      if (props.lastOrHover === true && !isHovering && !isLast) return false;
+      if (props.copied === true && !isCopied) return false;
+      if (props.copied === false && isCopied) return false;
+      return true;
+    }
+  );
 };
 var MessageIf = ({ children, ...query }) => {
   const result = useMessageIf(query);
@@ -792,8 +809,8 @@ var import_react23 = require("react");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var MessageRoot = (0, import_react23.forwardRef)(
   ({ onMouseEnter, onMouseLeave, ...rest }, ref) => {
-    const { useMessage } = useMessageContext();
-    const setIsHovering = useMessage((s) => s.setIsHovering);
+    const { useMessageUtils } = useMessageContext();
+    const setIsHovering = useMessageUtils((s) => s.setIsHovering);
     const handleMouseEnter = () => {
       setIsHovering(true);
     };
@@ -846,7 +863,7 @@ var useContentPartContext = () => {
 
 // src/context/providers/ContentPartProvider.tsx
 var import_react26 = require("react");
-var import_zustand3 = require("zustand");
+var import_zustand4 = require("zustand");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var syncContentPart = ({ message }, useContentPart, partIndex) => {
   const part = message.content[partIndex];
@@ -855,19 +872,24 @@ var syncContentPart = ({ message }, useContentPart, partIndex) => {
   const status = partIndex === message.content.length - 1 ? messageStatus : "done";
   const currentState = useContentPart.getState();
   if (currentState.part === part && currentState.status === status) return;
-  useContentPart.setState({ part, status });
+  useContentPart.setState(
+    Object.freeze({
+      part,
+      status
+    })
+  );
 };
 var useContentPartContext2 = (partIndex) => {
   const { useMessage } = useMessageContext();
   const [context] = (0, import_react26.useState)(() => {
-    const useContentPart = (0, import_zustand3.create)(() => ({
-      part: { type: "text", text: "" },
-      status: "done"
-    }));
+    const useContentPart = (0, import_zustand4.create)(
+      () => ({})
+    );
     syncContentPart(useMessage.getState(), useContentPart, partIndex);
     return { useContentPart };
   });
   (0, import_react26.useEffect)(() => {
+    syncContentPart(useMessage.getState(), context.useContentPart, partIndex);
     return useMessage.subscribe((message) => {
       syncContentPart(message, context.useContentPart, partIndex);
     });
@@ -897,10 +919,10 @@ var ContentPartDisplay = () => {
 
 // src/primitives/contentPart/ContentPartInProgressIndicator.tsx
 var ContentPartInProgressIndicator = () => {
-  const { useMessage } = useMessageContext();
+  const { useMessageUtils } = useMessageContext();
   const { useContentPart } = useContentPartContext();
   const indicator = useCombinedStore(
-    [useMessage, useContentPart],
+    [useMessageUtils, useContentPart],
     (m, c) => c.status === "in_progress" ? m.inProgressIndicator : null
   );
   return indicator;
@@ -934,10 +956,8 @@ var defaultComponents = {
   UI: () => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ContentPartDisplay, {}),
   tools: {
     Fallback: (props) => {
-      const { useToolRenderers } = useAssistantContext();
-      const Render = useToolRenderers(
-        (s) => s.getToolRenderer(props.part.toolName)
-      );
+      const { useToolUIs } = useAssistantContext();
+      const Render = useToolUIs((s) => s.getToolUI(props.part.toolName));
       if (!Render) return null;
       return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Render, { ...props });
     }
@@ -951,6 +971,8 @@ var MessageContentPartComponent = ({
     tools: { by_name = {}, Fallback = defaultComponents.tools.Fallback } = {}
   } = {}
 }) => {
+  const { useThreadActions } = useThreadContext();
+  const addToolResult = useThreadActions((t) => t.addToolResult);
   const { useContentPart } = useContentPartContext();
   const { part, status } = useContentPart();
   const type = part.type;
@@ -963,7 +985,8 @@ var MessageContentPartComponent = ({
       return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(UI, { part, status });
     case "tool-call": {
       const Tool = by_name[part.toolName] || Fallback;
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Tool, { part, status });
+      const addResult = (result) => addToolResult(part.toolCallId, result);
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Tool, { part, status, addResult });
     }
     default:
       throw new Error(`Unknown content part type: ${type}`);
@@ -1000,10 +1023,10 @@ var import_react_primitive10 = require("@radix-ui/react-primitive");
 var import_react29 = require("react");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var MessageInProgress = (0, import_react29.forwardRef)((props, ref) => {
-  const { useMessage } = useMessageContext();
+  const { useMessageUtils } = useMessageContext();
   (0, import_react29.useMemo)(() => {
-    useMessage.getState().setInProgressIndicator(/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_primitive10.Primitive.span, { ...props, ref }));
-  }, [useMessage, props, ref]);
+    useMessageUtils.getState().setInProgressIndicator(/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_primitive10.Primitive.span, { ...props, ref }));
+  }, [useMessageUtils, props, ref]);
   return null;
 });
 MessageInProgress.displayName = "MessageInProgress";
@@ -1087,14 +1110,14 @@ var import_react32 = require("react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var ActionBarRoot = (0, import_react32.forwardRef)(({ hideWhenRunning, autohide, autohideFloat, ...rest }, ref) => {
   const { useThread } = useThreadContext();
-  const { useMessage } = useMessageContext();
+  const { useMessage, useMessageUtils } = useMessageContext();
   const hideAndfloatStatus = useCombinedStore(
-    [useThread, useMessage],
-    (t, m) => {
+    [useThread, useMessage, useMessageUtils],
+    (t, m, mu) => {
       if (hideWhenRunning && t.isRunning) return "hidden" /* Hidden */;
       const autohideEnabled = autohide === "always" || autohide === "not-last" && !m.isLast;
       if (!autohideEnabled) return "normal" /* Normal */;
-      if (!m.isHovering) return "hidden" /* Hidden */;
+      if (!mu.isHovering) return "hidden" /* Hidden */;
       if (autohideFloat === "always" || autohideFloat === "single-branch" && m.branches.length <= 1)
         return "floating" /* Floating */;
       return "normal" /* Normal */;
@@ -1427,6 +1450,9 @@ var LocalRuntime = class {
     this._configProviders.add(provider);
     return () => this._configProviders.delete(provider);
   }
+  addToolResult() {
+    throw new Error("LocalRuntime does not yet support tool results");
+  }
 };
 
 // src/runtime/local/useLocalRuntime.tsx
@@ -1445,7 +1471,7 @@ var import_react37 = require("react");
 var import_react36 = require("react");
 
 // src/context/stores/AssistantModelConfig.ts
-var import_zustand4 = require("zustand");
+var import_zustand5 = require("zustand");
 
 // src/utils/ProxyConfigProvider.ts
 var ProxyConfigProvider = class {
@@ -1462,30 +1488,30 @@ var ProxyConfigProvider = class {
 };
 
 // src/context/stores/AssistantModelConfig.ts
-var makeAssistantModelConfigStore = () => (0, import_zustand4.create)(() => {
+var makeAssistantModelConfigStore = () => (0, import_zustand5.create)(() => {
   const proxy = new ProxyConfigProvider();
-  return {
+  return Object.freeze({
     getModelConfig: () => {
       return proxy.getModelConfig();
     },
     registerModelConfigProvider: (provider) => {
       return proxy.registerModelConfigProvider(provider);
     }
-  };
+  });
 });
 
-// src/context/stores/AssistantToolRenderers.ts
-var import_zustand5 = require("zustand");
-var makeAssistantToolRenderersStore = () => (0, import_zustand5.create)((set) => {
+// src/context/stores/AssistantToolUIs.ts
+var import_zustand6 = require("zustand");
+var makeAssistantToolUIsStore = () => (0, import_zustand6.create)((set) => {
   const renderers = /* @__PURE__ */ new Map();
-  return {
-    getToolRenderer: (name) => {
+  return Object.freeze({
+    getToolUI: (name) => {
       const arr = renderers.get(name);
       const last = arr?.at(-1);
       if (last) return last;
       return null;
     },
-    setToolRenderer: (name, render) => {
+    setToolUI: (name, render) => {
       let arr = renderers.get(name);
       if (!arr) {
         arr = [];
@@ -1498,25 +1524,27 @@ var makeAssistantToolRenderersStore = () => (0, import_zustand5.create)((set) =>
         if (index !== -1) {
           arr.splice(index, 1);
         }
-        set({});
+        if (index === arr.length) {
+          set({});
+        }
       };
     }
-  };
+  });
 });
 
 // src/context/providers/ThreadProvider.tsx
 var import_react35 = require("react");
 
 // src/context/stores/Composer.ts
-var import_zustand6 = require("zustand");
-var makeComposerStore = (useThread) => (0, import_zustand6.create)()((set, get, store) => {
+var import_zustand7 = require("zustand");
+var makeComposerStore = (useThread, useThreadActions) => (0, import_zustand7.create)()((set, get, store) => {
   return {
     ...makeBaseComposer(set, get, store),
     isEditing: true,
     send: () => {
       const { setValue, value } = get();
       setValue("");
-      useThread.getState().append({
+      useThreadActions.getState().append({
         parentId: useThread.getState().messages.at(-1)?.id ?? null,
         content: [{ type: "text", text: value }]
       });
@@ -1524,41 +1552,26 @@ var makeComposerStore = (useThread) => (0, import_zustand6.create)()((set, get,
     cancel: () => {
       const thread = useThread.getState();
       if (!thread.isRunning) return false;
-      useThread.getState().cancelRun();
+      useThreadActions.getState().cancelRun();
       return true;
     }
   };
 });
 
 // src/context/stores/Thread.ts
-var import_zustand7 = require("zustand");
+var import_zustand8 = require("zustand");
 var makeThreadStore = (runtimeRef) => {
-  const useThread = (0, import_zustand7.create)(() => ({
+  return (0, import_zustand8.create)(() => ({
     messages: runtimeRef.current.messages,
-    isRunning: runtimeRef.current.isRunning,
-    getBranches: (messageId) => runtimeRef.current.getBranches(messageId),
-    switchToBranch: (branchId) => runtimeRef.current.switchToBranch(branchId),
-    startRun: (parentId) => runtimeRef.current.startRun(parentId),
-    append: (message) => runtimeRef.current.append(message),
-    cancelRun: () => runtimeRef.current.cancelRun()
+    isRunning: runtimeRef.current.isRunning
   }));
-  const onRuntimeUpdate = () => {
-    useThread.setState({
-      messages: runtimeRef.current.messages,
-      isRunning: runtimeRef.current.isRunning
-    });
-  };
-  return {
-    useThread,
-    onRuntimeUpdate
-  };
 };
 
 // src/context/stores/ThreadViewport.tsx
-var import_zustand8 = require("zustand");
+var import_zustand9 = require("zustand");
 var makeThreadViewportStore = () => {
   const scrollToBottomListeners = /* @__PURE__ */ new Set();
-  return (0, import_zustand8.create)(() => ({
+  return (0, import_zustand9.create)(() => ({
     isAtBottom: true,
     scrollToBottom: () => {
       for (const listener of scrollToBottomListeners) {
@@ -1574,6 +1587,21 @@ var makeThreadViewportStore = () => {
   }));
 };
 
+// src/context/stores/ThreadActions.ts
+var import_zustand10 = require("zustand");
+var makeThreadActionStore = (runtimeRef) => {
+  return (0, import_zustand10.create)(
+    () => Object.freeze({
+      getBranches: (messageId) => runtimeRef.current.getBranches(messageId),
+      switchToBranch: (branchId) => runtimeRef.current.switchToBranch(branchId),
+      startRun: (parentId) => runtimeRef.current.startRun(parentId),
+      append: (message) => runtimeRef.current.append(message),
+      cancelRun: () => runtimeRef.current.cancelRun(),
+      addToolResult: (toolCallId, result) => runtimeRef.current.addToolResult(toolCallId, result)
+    })
+  );
+};
+
 // src/context/providers/ThreadProvider.tsx
 var import_jsx_runtime23 = require("react/jsx-runtime");
 var ThreadProvider = ({
@@ -1584,23 +1612,31 @@ var ThreadProvider = ({
   (0, import_react35.useInsertionEffect)(() => {
     runtimeRef.current = runtime;
   });
-  const [{ context, onRuntimeUpdate }] = (0, import_react35.useState)(() => {
-    const { useThread, onRuntimeUpdate: onRuntimeUpdate2 } = makeThreadStore(runtimeRef);
+  const [context] = (0, import_react35.useState)(() => {
+    const useThread = makeThreadStore(runtimeRef);
+    const useThreadActions = makeThreadActionStore(runtimeRef);
     const useViewport = makeThreadViewportStore();
-    const useComposer = makeComposerStore(useThread);
+    const useComposer = makeComposerStore(useThread, useThreadActions);
     return {
-      context: {
-        useViewport,
-        useThread,
-        useComposer
-      },
-      onRuntimeUpdate: onRuntimeUpdate2
+      useThread,
+      useThreadActions,
+      useComposer,
+      useViewport
     };
   });
   (0, import_react35.useEffect)(() => {
+    const onRuntimeUpdate = () => {
+      context.useThread.setState(
+        Object.freeze({
+          messages: runtimeRef.current.messages,
+          isRunning: runtimeRef.current.isRunning
+        }),
+        true
+      );
+    };
     onRuntimeUpdate();
     return runtime.subscribe(onRuntimeUpdate);
-  }, [onRuntimeUpdate, runtime]);
+  }, [context, runtime]);
   const RuntimeSynchronizer = runtime.unstable_synchronizer;
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(ThreadContext.Provider, { value: context, children: [
     RuntimeSynchronizer && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(RuntimeSynchronizer, {}),
@@ -1617,8 +1653,8 @@ var AssistantProvider = ({ children, runtime }) => {
   });
   const [context] = (0, import_react36.useState)(() => {
     const useModelConfig = makeAssistantModelConfigStore();
-    const useToolRenderers = makeAssistantToolRenderersStore();
-    return { useModelConfig, useToolRenderers };
+    const useToolUIs = makeAssistantToolUIsStore();
+    return { useModelConfig, useToolUIs };
   });
   const getModelCOnfig = context.useModelConfig((c) => c.getModelConfig);
   (0, import_react36.useEffect)(() => {