@assistant-ui/react 0.1.6 → 0.1.8

package/dist/index.js

@@ -126,7 +126,9 @@ var ThreadContext = (0, import_react5.createContext)(null);
 var useThreadContext = () => {
   const context = (0, import_react5.useContext)(ThreadContext);
   if (!context)
-    throw new Error("This component must be used within an AssistantRuntimeProvider.");
+    throw new Error(
+      "This component must be used within an AssistantRuntimeProvider."
+    );
   return context;
 };
 
@@ -218,6 +220,7 @@ var ThreadRoot = (0, import_react10.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.div, { ...props, ref });
   }
 );
+ThreadRoot.displayName = "ThreadRoot";
 
 // src/primitives/thread/ThreadIf.tsx
 var useThreadIf = (props) => {
@@ -252,8 +255,8 @@ var import_react_use_callback_ref = require("@radix-ui/react-use-callback-ref");
 var import_react11 = require("react");
 var useOnResizeContent = (ref, callback) => {
   const callbackRef = (0, import_react_use_callback_ref.useCallbackRef)(callback);
+  const el = ref.current;
   (0, import_react11.useEffect)(() => {
-    const el = ref.current;
     if (!el) return;
     const resizeObserver = new ResizeObserver(() => {
       callbackRef();
@@ -282,7 +285,7 @@ var useOnResizeContent = (ref, callback) => {
       resizeObserver.disconnect();
       mutationObserver.disconnect();
     };
-  }, [ref.current, callbackRef]);
+  }, [el, callbackRef]);
 };
 
 // src/utils/hooks/useOnScrollToBottom.tsx
@@ -351,6 +354,7 @@ var ThreadViewport = (0, import_react13.forwardRef)(({ autoScroll = true, onScro
     }
   );
 });
+ThreadViewport.displayName = "ThreadViewport";
 
 // src/primitives/thread/ThreadMessages.tsx
 var import_react16 = require("react");
@@ -588,6 +592,7 @@ var ThreadScrollToBottom = (0, import_react17.forwardRef)(({ onClick, ...rest },
     }
   );
 });
+ThreadScrollToBottom.displayName = "ThreadScrollToBottom";
 
 // src/primitives/thread/ThreadSuggestion.tsx
 var import_primitive3 = require("@radix-ui/primitive");
@@ -615,6 +620,7 @@ var ThreadSuggestion = (0, import_react18.forwardRef)(({ onClick, prompt, method
     }
   );
 });
+ThreadSuggestion.displayName = "ThreadSuggestion";
 
 // src/primitives/composer/index.ts
 var composer_exports = {};
@@ -655,6 +661,7 @@ var ComposerRoot = (0, import_react19.forwardRef)(
     );
   }
 );
+ComposerRoot.displayName = "ComposerRoot";
 
 // src/primitives/composer/ComposerInput.tsx
 var import_primitive5 = require("@radix-ui/primitive");
@@ -724,6 +731,7 @@ var ComposerInput = (0, import_react20.forwardRef)(
     );
   }
 );
+ComposerInput.displayName = "ComposerInput";
 
 // src/primitives/composer/ComposerSend.tsx
 var import_react_primitive6 = require("@radix-ui/react-primitive");
@@ -744,6 +752,7 @@ var ComposerSend = (0, import_react21.forwardRef)(
     );
   }
 );
+ComposerSend.displayName = "ComposerSend";
 
 // src/primitives/composer/ComposerCancel.tsx
 var import_primitive6 = require("@radix-ui/primitive");
@@ -765,6 +774,7 @@ var ComposerCancel = (0, import_react22.forwardRef)(({ onClick, ...rest }, ref)
     }
   );
 });
+ComposerCancel.displayName = "ComposerCancel";
 
 // src/primitives/message/index.ts
 var message_exports = {};
@@ -801,6 +811,7 @@ var MessageRoot = (0, import_react23.forwardRef)(
     );
   }
 );
+MessageRoot.displayName = "MessageRoot";
 
 // src/primitives/message/MessageContent.tsx
 var import_react28 = require("react");
@@ -910,6 +921,7 @@ var ContentPartText = (0, import_react27.forwardRef)((props, forwardedRef) => {
   });
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_primitive9.Primitive.span, { ...props, ref: forwardedRef, children: text });
 });
+ContentPartText.displayName = "ContentPartText";
 
 // src/primitives/message/MessageContent.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
@@ -922,10 +934,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 });
     }
@@ -939,6 +949,8 @@ var MessageContentPartComponent = ({
     tools: { by_name = {}, Fallback = defaultComponents.tools.Fallback } = {}
   } = {}
 }) => {
+  const { useThread } = useThreadContext();
+  const addToolResult = useThread((t) => t.addToolResult);
   const { useContentPart } = useContentPartContext();
   const { part, status } = useContentPart();
   const type = part.type;
@@ -951,7 +963,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}`);
@@ -994,6 +1007,7 @@ var MessageInProgress = (0, import_react29.forwardRef)((props, ref) => {
   }, [useMessage, props, ref]);
   return null;
 });
+MessageInProgress.displayName = "MessageInProgress";
 
 // src/primitives/branchPicker/index.ts
 var branchPicker_exports = {};
@@ -1011,21 +1025,21 @@ var import_react_primitive11 = require("@radix-ui/react-primitive");
 var import_react30 = require("react");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var createActionButton = (useActionButton) => {
-  return (0, import_react30.forwardRef)(
-    (props, forwardedRef) => {
-      const onClick = useActionButton(props);
-      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-        import_react_primitive11.Primitive.button,
-        {
-          type: "button",
-          disabled: !onClick,
-          ...props,
-          ref: forwardedRef,
-          onClick: (0, import_primitive8.composeEventHandlers)(props.onClick, onClick ?? void 0)
-        }
-      );
-    }
-  );
+  const ActionButton = (0, import_react30.forwardRef)((props, forwardedRef) => {
+    const onClick = useActionButton(props);
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      import_react_primitive11.Primitive.button,
+      {
+        type: "button",
+        disabled: !onClick,
+        ...props,
+        ref: forwardedRef,
+        onClick: (0, import_primitive8.composeEventHandlers)(props.onClick, onClick ?? void 0)
+      }
+    );
+  });
+  ActionButton.displayName = "ActionButton";
+  return ActionButton;
 };
 
 // src/primitives/branchPicker/BranchPickerNext.tsx
@@ -1057,6 +1071,7 @@ var import_jsx_runtime20 = require("react/jsx-runtime");
 var BranchPickerRoot = (0, import_react31.forwardRef)(({ hideWhenSingleBranch, ...rest }, ref) => {
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(MessageIf, { hasBranches: hideWhenSingleBranch ? true : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_primitive12.Primitive.div, { ...rest, ref }) });
 });
+BranchPickerRoot.displayName = "BranchPickerRoot";
 
 // src/primitives/actionBar/index.ts
 var actionBar_exports = {};
@@ -1096,6 +1111,7 @@ var ActionBarRoot = (0, import_react32.forwardRef)(({ hideWhenRunning, autohide,
     }
   );
 });
+ActionBarRoot.displayName = "ActionBarRoot";
 
 // src/primitives/actionBar/ActionBarCopy.tsx
 var ActionBarCopy = createActionButton(useCopyMessage);
@@ -1130,6 +1146,7 @@ var ContentPartImage = (0, import_react33.forwardRef)((props, forwardedRef) => {
   });
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_primitive14.Primitive.img, { src: image, ...props, ref: forwardedRef });
 });
+ContentPartImage.displayName = "ContentPartImage";
 
 // src/runtime/local/useLocalRuntime.tsx
 var import_react34 = require("react");
@@ -1411,6 +1428,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
@@ -1458,18 +1478,18 @@ var makeAssistantModelConfigStore = () => (0, import_zustand4.create)(() => {
   };
 });
 
-// src/context/stores/AssistantToolRenderers.ts
+// src/context/stores/AssistantToolUIs.ts
 var import_zustand5 = require("zustand");
-var makeAssistantToolRenderersStore = () => (0, import_zustand5.create)((set) => {
+var makeAssistantToolUIsStore = () => (0, import_zustand5.create)((set) => {
   const renderers = /* @__PURE__ */ new Map();
   return {
-    getToolRenderer: (name) => {
+    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 = [];
@@ -1524,7 +1544,8 @@ var makeThreadStore = (runtimeRef) => {
     switchToBranch: (branchId) => runtimeRef.current.switchToBranch(branchId),
     startRun: (parentId) => runtimeRef.current.startRun(parentId),
     append: (message) => runtimeRef.current.append(message),
-    cancelRun: () => runtimeRef.current.cancelRun()
+    cancelRun: () => runtimeRef.current.cancelRun(),
+    addToolResult: (toolCallId, result) => runtimeRef.current.addToolResult(toolCallId, result)
   }));
   const onRuntimeUpdate = () => {
     useThread.setState({
@@ -1601,8 +1622,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)(() => {