@assistant-ui/react 0.1.7 → 0.1.9

package/dist/index.mjs

@@ -9,7 +9,7 @@ import {
   useContentPartContext,
   useMessageContext,
   useThreadContext
-} from "./chunk-XVZ2GVQM.mjs";
+} from "./chunk-7O2URLFI.mjs";
 
 // src/actions/useCopyMessage.tsx
 import { useCallback } from "react";
@@ -50,7 +50,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) => {
@@ -58,13 +58,14 @@ var useCopyMessage = ({ copiedDuration = 3e3 }) => {
     }
   );
   const callback = 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;
 };
@@ -72,7 +73,7 @@ var useCopyMessage = ({ copiedDuration = 3e3 }) => {
 // src/actions/useReloadMessage.tsx
 import { useCallback as useCallback2 } from "react";
 var useReloadMessage = () => {
-  const { useThread, useViewport } = useThreadContext();
+  const { useThread, useThreadActions, useViewport } = useThreadContext();
   const { useMessage } = useMessageContext();
   const disabled = useCombinedStore(
     [useThread, useMessage],
@@ -80,9 +81,9 @@ var useReloadMessage = () => {
   );
   const callback = useCallback2(() => {
     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;
 };
@@ -106,7 +107,7 @@ var useBeginMessageEdit = () => {
 // src/actions/useGoToNextBranch.tsx
 import { useCallback as useCallback4 } from "react";
 var useGoToNextBranch = () => {
-  const { useThread } = useThreadContext();
+  const { useThreadActions } = useThreadContext();
   const { useMessage, useComposer } = useMessageContext();
   const disabled = useCombinedStore(
     [useMessage, useComposer],
@@ -114,8 +115,8 @@ var useGoToNextBranch = () => {
   );
   const callback = useCallback4(() => {
     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;
 };
@@ -123,7 +124,7 @@ var useGoToNextBranch = () => {
 // src/actions/useGoToPreviousBranch.tsx
 import { useCallback as useCallback5 } from "react";
 var useGoToPreviousBranch = () => {
-  const { useThread } = useThreadContext();
+  const { useThreadActions } = useThreadContext();
   const { useMessage, useComposer } = useMessageContext();
   const disabled = useCombinedStore(
     [useMessage, useComposer],
@@ -131,8 +132,8 @@ var useGoToPreviousBranch = () => {
   );
   const callback = useCallback5(() => {
     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;
 };
@@ -278,7 +279,9 @@ var ThreadViewport = forwardRef2(({ autoScroll = true, onScroll, children, ...re
     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;
   };
@@ -302,7 +305,7 @@ import { memo } from "react";
 
 // src/context/providers/MessageProvider.tsx
 import { useEffect as useEffect3, useState } from "react";
-import { create as create2 } from "zustand";
+import { create as create3 } from "zustand";
 
 // src/context/stores/MessageComposer.ts
 import { create } from "zustand";
@@ -338,17 +341,34 @@ var makeEditComposerStore = ({
   }
 }));
 
+// src/context/stores/MessageUtils.ts
+import { create as create2 } from "zustand";
+var makeMessageUtilsStore = () => create2((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
 import { jsx as jsx4 } from "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;
@@ -360,26 +380,10 @@ var syncMessage = (thread, useMessage, messageIndex) => {
   });
 };
 var useMessageContext2 = (messageIndex) => {
-  const { useThread } = useThreadContext();
+  const { useThread, useThreadActions } = useThreadContext();
   const [context] = useState(() => {
-    const useMessage = create2((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 = create3(() => ({}));
+    const useMessageUtils = makeMessageUtilsStore();
     const useComposer = makeEditComposerStore({
       onEdit: () => {
         const message = useMessage.getState().message;
@@ -399,20 +403,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 };
   });
   useEffect3(() => {
     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 = ({
@@ -439,16 +453,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);
@@ -727,8 +744,8 @@ import { forwardRef as forwardRef9 } from "react";
 import { jsx as jsx12 } from "react/jsx-runtime";
 var MessageRoot = forwardRef9(
   ({ 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);
     };
@@ -753,7 +770,7 @@ import { memo as memo2 } from "react";
 
 // src/context/providers/ContentPartProvider.tsx
 import { useEffect as useEffect5, useState as useState2 } from "react";
-import { create as create3 } from "zustand";
+import { create as create4 } from "zustand";
 import { jsx as jsx13 } from "react/jsx-runtime";
 var syncContentPart = ({ message }, useContentPart, partIndex) => {
   const part = message.content[partIndex];
@@ -762,19 +779,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] = useState2(() => {
-    const useContentPart = create3(() => ({
-      part: { type: "text", text: "" },
-      status: "done"
-    }));
+    const useContentPart = create4(
+      () => ({})
+    );
     syncContentPart(useMessage.getState(), useContentPart, partIndex);
     return { useContentPart };
   });
   useEffect5(() => {
+    syncContentPart(useMessage.getState(), context.useContentPart, partIndex);
     return useMessage.subscribe((message) => {
       syncContentPart(message, context.useContentPart, partIndex);
     });
@@ -804,10 +826,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;
@@ -841,10 +863,8 @@ var defaultComponents = {
   UI: () => /* @__PURE__ */ jsx15(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__ */ jsx15(Render, { ...props });
     }
@@ -858,6 +878,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;
@@ -870,7 +892,8 @@ var MessageContentPartComponent = ({
       return /* @__PURE__ */ jsx15(UI, { part, status });
     case "tool-call": {
       const Tool = by_name[part.toolName] || Fallback;
-      return /* @__PURE__ */ jsx15(Tool, { part, status });
+      const addResult = (result) => addToolResult(part.toolCallId, result);
+      return /* @__PURE__ */ jsx15(Tool, { part, status, addResult });
     }
     default:
       throw new Error(`Unknown content part type: ${type}`);
@@ -910,10 +933,10 @@ import {
 } from "react";
 import { jsx as jsx16 } from "react/jsx-runtime";
 var MessageInProgress = forwardRef11((props, ref) => {
-  const { useMessage } = useMessageContext();
+  const { useMessageUtils } = useMessageContext();
   useMemo2(() => {
-    useMessage.getState().setInProgressIndicator(/* @__PURE__ */ jsx16(Primitive10.span, { ...props, ref }));
-  }, [useMessage, props, ref]);
+    useMessageUtils.getState().setInProgressIndicator(/* @__PURE__ */ jsx16(Primitive10.span, { ...props, ref }));
+  }, [useMessageUtils, props, ref]);
   return null;
 });
 MessageInProgress.displayName = "MessageInProgress";
@@ -997,14 +1020,14 @@ import { forwardRef as forwardRef14 } from "react";
 import { jsx as jsx21 } from "react/jsx-runtime";
 var ActionBarRoot = forwardRef14(({ 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 */;
@@ -1337,6 +1360,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
@@ -1355,7 +1381,7 @@ import { memo as memo3 } from "react";
 import { useEffect as useEffect7, useInsertionEffect as useInsertionEffect3, useRef as useRef5, useState as useState5 } from "react";
 
 // src/context/stores/AssistantModelConfig.ts
-import { create as create4 } from "zustand";
+import { create as create5 } from "zustand";
 
 // src/utils/ProxyConfigProvider.ts
 var ProxyConfigProvider = class {
@@ -1372,30 +1398,30 @@ var ProxyConfigProvider = class {
 };
 
 // src/context/stores/AssistantModelConfig.ts
-var makeAssistantModelConfigStore = () => create4(() => {
+var makeAssistantModelConfigStore = () => create5(() => {
   const proxy = new ProxyConfigProvider();
-  return {
+  return Object.freeze({
     getModelConfig: () => {
       return proxy.getModelConfig();
     },
     registerModelConfigProvider: (provider) => {
       return proxy.registerModelConfigProvider(provider);
     }
-  };
+  });
 });
 
-// src/context/stores/AssistantToolRenderers.ts
-import { create as create5 } from "zustand";
-var makeAssistantToolRenderersStore = () => create5((set) => {
+// src/context/stores/AssistantToolUIs.ts
+import { create as create6 } from "zustand";
+var makeAssistantToolUIsStore = () => create6((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 = [];
@@ -1408,25 +1434,27 @@ var makeAssistantToolRenderersStore = () => create5((set) => {
         if (index !== -1) {
           arr.splice(index, 1);
         }
-        set({});
+        if (index === arr.length) {
+          set({});
+        }
       };
     }
-  };
+  });
 });
 
 // src/context/providers/ThreadProvider.tsx
 import { useEffect as useEffect6, useInsertionEffect as useInsertionEffect2, useRef as useRef4, useState as useState4 } from "react";
 
 // src/context/stores/Composer.ts
-import { create as create6 } from "zustand";
-var makeComposerStore = (useThread) => create6()((set, get, store) => {
+import { create as create7 } from "zustand";
+var makeComposerStore = (useThread, useThreadActions) => create7()((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 }]
       });
@@ -1434,41 +1462,26 @@ var makeComposerStore = (useThread) => create6()((set, get, store) => {
     cancel: () => {
       const thread = useThread.getState();
       if (!thread.isRunning) return false;
-      useThread.getState().cancelRun();
+      useThreadActions.getState().cancelRun();
       return true;
     }
   };
 });
 
 // src/context/stores/Thread.ts
-import { create as create7 } from "zustand";
+import { create as create8 } from "zustand";
 var makeThreadStore = (runtimeRef) => {
-  const useThread = create7(() => ({
+  return create8(() => ({
     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
-import { create as create8 } from "zustand";
+import { create as create9 } from "zustand";
 var makeThreadViewportStore = () => {
   const scrollToBottomListeners = /* @__PURE__ */ new Set();
-  return create8(() => ({
+  return create9(() => ({
     isAtBottom: true,
     scrollToBottom: () => {
       for (const listener of scrollToBottomListeners) {
@@ -1484,6 +1497,21 @@ var makeThreadViewportStore = () => {
   }));
 };
 
+// src/context/stores/ThreadActions.ts
+import { create as create10 } from "zustand";
+var makeThreadActionStore = (runtimeRef) => {
+  return create10(
+    () => 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
 import { jsx as jsx23, jsxs as jsxs4 } from "react/jsx-runtime";
 var ThreadProvider = ({
@@ -1494,23 +1522,31 @@ var ThreadProvider = ({
   useInsertionEffect2(() => {
     runtimeRef.current = runtime;
   });
-  const [{ context, onRuntimeUpdate }] = useState4(() => {
-    const { useThread, onRuntimeUpdate: onRuntimeUpdate2 } = makeThreadStore(runtimeRef);
+  const [context] = useState4(() => {
+    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
     };
   });
   useEffect6(() => {
+    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__ */ jsxs4(ThreadContext.Provider, { value: context, children: [
     RuntimeSynchronizer && /* @__PURE__ */ jsx23(RuntimeSynchronizer, {}),
@@ -1527,8 +1563,8 @@ var AssistantProvider = ({ children, runtime }) => {
   });
   const [context] = useState5(() => {
     const useModelConfig = makeAssistantModelConfigStore();
-    const useToolRenderers = makeAssistantToolRenderersStore();
-    return { useModelConfig, useToolRenderers };
+    const useToolUIs = makeAssistantToolUIsStore();
+    return { useModelConfig, useToolUIs };
   });
   const getModelCOnfig = context.useModelConfig((c) => c.getModelConfig);
   useEffect7(() => {