@assistant-ui/react 0.1.6 → 0.1.8

package/README.md

@@ -10,12 +10,41 @@
 
 - [Documentation](https://www.assistant-ui.com/docs/getting-started)
 
-## Minimal Example with Vercel AI SDK
+## Starter Template
 
+```
+npx assistant-ui@latest create
+```
+
+## Quick Start In Existing Project
+![Demo of my project](demo.gif)
+
+### PREREQUISITES:
+It is assumed that you have already installed and initialized node.js, tailwind, typescript, react, next.js. If not, follow the instructions:
+```sh
+npx create-next-app@latest my-app --typescript --tailwind
+```
+```sh
+cd my-app
+```
+```sh
+npm install @ai-sdk/react @assistant-ui/react @assistant-ui/react-ai-sdk
+```
+Install shadcn react components, follow instructins with default answers
+```sh
+npx shadcn-ui init
+```
+
+GETTING STARTED:
 ```sh
 npx assistant-ui@latest add modal
 ```
 
+Create/edit your desired page file:
+```
+/src/app/pages.tsx
+```
+
 ```tsx
 "use client";
 
@@ -24,7 +53,7 @@ import { AssistantRuntimeProvider } from "@assistant-ui/react";
 import { useVercelUseChatRuntime } from "@assistant-ui/react-ai-sdk";
 import { AssistantModal } from "@/components/ui/assistant-ui/assistant-modal";
 
-export default const MyApp = () => {
+const MyApp = () => {
   const chat = useChat({ 
     api: "/api/chat" // your backend route
   });
@@ -34,6 +63,52 @@ export default const MyApp = () => {
     <AssistantRuntimeProvider runtime={runtime}>
       <AssistantModal />
     </AssistantRuntimeProvider>
-  );
+);        
 }
-```
+
+export default MyApp; 
+```
+
+
+### Backend connection using Vercel AI SDK:
+
+```sh
+npm install @ai-sdk/openai
+```
+
+```sh
+npm install @assistant-ui/react-hook-form
+```
+
+Create backend route file:
+```
+/src/app/api/chat/route.ts
+```
+
+```tsx
+import { openai } from '@ai-sdk/openai';
+import { streamText } from 'ai';
+ 
+export const maxDuration = 30;
+ 
+export async function POST(req: Request) {
+  const { messages } = await req.json();
+  
+  const result = await streamText({
+    model: openai('gpt-4o'),
+    messages,
+  });
+ 
+  return result.toAIStreamResponse();
+}
+```
+
+```sh
+export OPENAI_API_KEY="skXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
+```
+
+```sh
+npm run dev
+```
+
+Now Open: [http://localhost:3000](http://localhost:3000)

package/dist/{Thread-ZUDFhMtm.d.mts → Thread-CoxBELWy.d.mts}

@@ -61,6 +61,7 @@ type UIContentPartComponent = ComponentType<UIContentPartProps>;
 type ToolCallContentPartProps<TArgs = any, TResult = any> = {
     part: ToolCallContentPart<TArgs, TResult>;
     status: ContentPartStatus;
+    addResult: (result: any) => void;
 };
 type ToolCallContentPartComponent<TArgs = any, TResult = any> = ComponentType<ToolCallContentPartProps<TArgs, TResult>>;
 
@@ -87,6 +88,7 @@ type ThreadState = {
     append: (message: AppendMessage) => void;
     startRun: (parentId: string | null) => void;
     cancelRun: () => void;
+    addToolResult: (toolCallId: string, result: any) => void;
 };
 
 export type { AssistantContentPart as A, ImageContentPartComponent as I, ModelConfigProvider as M, TextContentPartComponent as T, UIContentPartComponent as U, ToolCallContentPartComponent as a, ToolCallContentPartProps as b, ThreadState as c, Unsubscribe as d, ThreadMessage as e, ModelConfig as f, AppendMessage as g, AssistantMessage as h, UserMessage as i, UserContentPart as j, AppendContentPart as k, TextContentPart as l, Tool as m, ImageContentPart as n, ToolCallContentPart as o, UIContentPart as p, TextContentPartProps as q, ImageContentPartProps as r, UIContentPartProps as s };

package/dist/{Thread-ZUDFhMtm.d.ts → Thread-CoxBELWy.d.ts}

@@ -61,6 +61,7 @@ type UIContentPartComponent = ComponentType<UIContentPartProps>;
 type ToolCallContentPartProps<TArgs = any, TResult = any> = {
     part: ToolCallContentPart<TArgs, TResult>;
     status: ContentPartStatus;
+    addResult: (result: any) => void;
 };
 type ToolCallContentPartComponent<TArgs = any, TResult = any> = ComponentType<ToolCallContentPartProps<TArgs, TResult>>;
 
@@ -87,6 +88,7 @@ type ThreadState = {
     append: (message: AppendMessage) => void;
     startRun: (parentId: string | null) => void;
     cancelRun: () => void;
+    addToolResult: (toolCallId: string, result: any) => void;
 };
 
 export type { AssistantContentPart as A, ImageContentPartComponent as I, ModelConfigProvider as M, TextContentPartComponent as T, UIContentPartComponent as U, ToolCallContentPartComponent as a, ToolCallContentPartProps as b, ThreadState as c, Unsubscribe as d, ThreadMessage as e, ModelConfig as f, AppendMessage as g, AssistantMessage as h, UserMessage as i, UserContentPart as j, AppendContentPart as k, TextContentPart as l, Tool as m, ImageContentPart as n, ToolCallContentPart as o, UIContentPart as p, TextContentPartProps as q, ImageContentPartProps as r, UIContentPartProps as s };

package/dist/{chunk-KIP3YFVM.mjs → chunk-RITM2IUH.mjs}

@@ -22,7 +22,9 @@ var ThreadContext = createContext2(null);
 var useThreadContext = () => {
   const context = useContext2(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;
 };
 
@@ -80,4 +82,4 @@ export {
   ContentPartContext,
   useContentPartContext
 };
-//# sourceMappingURL=chunk-KIP3YFVM.mjs.map
+//# sourceMappingURL=chunk-RITM2IUH.mjs.map

package/dist/chunk-RITM2IUH.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/context/MessageContext.ts","../src/context/ThreadContext.ts","../src/context/ComposerContext.ts","../src/context/AssistantContext.ts","../src/context/ContentPartContext.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { StoreApi, UseBoundStore } from \"zustand\";\nimport type { MessageState } from \"./stores/Message\";\nimport type { EditComposerState } from \"./stores/MessageComposer\";\n\nexport type MessageContextValue = {\n  useMessage: UseBoundStore<StoreApi<MessageState>>;\n  useComposer: UseBoundStore<StoreApi<EditComposerState>>;\n};\n\nexport const MessageContext = createContext<MessageContextValue | null>(null);\n\nexport const useMessageContext = () => {\n  const context = useContext(MessageContext);\n  if (!context)\n    throw new Error(\n      \"This component can only be used inside a component passed to <ThreadPrimitive.Messages components={...} />.\",\n    );\n  return context;\n};\n","import { createContext, useContext } from \"react\";\nimport type { StoreApi, UseBoundStore } from \"zustand\";\nimport type { ComposerState } from \"./stores/Composer\";\nimport type { ThreadState } from \"./stores/Thread\";\nimport type { ThreadViewportState } from \"./stores/ThreadViewport\";\n\nexport type ThreadContextValue = {\n  useThread: UseBoundStore<StoreApi<ThreadState>>;\n  useComposer: UseBoundStore<StoreApi<ComposerState>>;\n  useViewport: UseBoundStore<StoreApi<ThreadViewportState>>;\n};\n\nexport const ThreadContext = createContext<ThreadContextValue | null>(null);\n\nexport const useThreadContext = (): ThreadContextValue => {\n  const context = useContext(ThreadContext);\n  if (!context)\n    throw new Error(\n      \"This component must be used within an AssistantRuntimeProvider.\",\n    );\n  return context;\n};\n","import { useContext, useMemo } from \"react\";\nimport type { StoreApi, UseBoundStore } from \"zustand\";\nimport { MessageContext } from \"./MessageContext\";\nimport { useThreadContext } from \"./ThreadContext\";\nimport type { ComposerState } from \"./stores/Composer\";\nimport type { EditComposerState } from \"./stores/MessageComposer\";\n\nexport type ComposerContextValue = {\n  useComposer: UseBoundStore<StoreApi<EditComposerState | ComposerState>>;\n  type: \"edit\" | \"new\";\n};\n\nexport const useComposerContext = (): ComposerContextValue => {\n  const { useComposer } = useThreadContext();\n  const { useComposer: useEditComposer } = useContext(MessageContext) ?? {};\n  return useMemo(\n    () => ({\n      useComposer: (useEditComposer ?? useComposer) as UseBoundStore<\n        StoreApi<EditComposerState | ComposerState>\n      >,\n      type: useEditComposer ? (\"edit\" as const) : (\"new\" as const),\n    }),\n    [useEditComposer, useComposer],\n  );\n};\n","import { createContext, useContext } from \"react\";\nimport type { StoreApi, UseBoundStore } from \"zustand\";\nimport type { AssistantModelConfigState } from \"./stores/AssistantModelConfig\";\nimport type { AssistantToolUIsState } from \"./stores/AssistantToolUIs\";\n\nexport type AssistantContextValue = {\n  useModelConfig: UseBoundStore<StoreApi<AssistantModelConfigState>>;\n  useToolUIs: UseBoundStore<StoreApi<AssistantToolUIsState>>;\n};\n\nexport const AssistantContext = createContext<AssistantContextValue | null>(\n  null,\n);\n\nexport const useAssistantContext = (): AssistantContextValue => {\n  const context = useContext(AssistantContext);\n  if (!context)\n    throw new Error(\n      \"This component must be used within an AssistantRuntimeProvider.\",\n    );\n  return context;\n};\n","import { createContext, useContext } from \"react\";\nimport type { StoreApi, UseBoundStore } from \"zustand\";\nimport type { ContentPartState } from \"./stores/ContentPart\";\n\nexport type ContentPartContextValue = {\n  useContentPart: UseBoundStore<StoreApi<ContentPartState>>;\n};\n\nexport const ContentPartContext = createContext<ContentPartContextValue | null>(\n  null,\n);\n\nexport const useContentPartContext = (): ContentPartContextValue => {\n  const context = useContext(ContentPartContext);\n  if (!context)\n    throw new Error(\n      \"This component can only be used inside a component passed to <MessagePrimitive.Content components={...} >.\",\n    );\n  return context;\n};\n"],"mappings":";;;;;;;AAAA,SAAS,eAAe,kBAAkB;AAUnC,IAAM,iBAAiB,cAA0C,IAAI;AAErE,IAAM,oBAAoB,MAAM;AACrC,QAAM,UAAU,WAAW,cAAc;AACzC,MAAI,CAAC;AACH,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AACF,SAAO;AACT;;;ACnBA,SAAS,iBAAAA,gBAAe,cAAAC,mBAAkB;AAYnC,IAAM,gBAAgBD,eAAyC,IAAI;AAEnE,IAAM,mBAAmB,MAA0B;AACxD,QAAM,UAAUC,YAAW,aAAa;AACxC,MAAI,CAAC;AACH,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AACF,SAAO;AACT;;;ACrBA,SAAS,cAAAC,aAAY,eAAe;AAY7B,IAAM,qBAAqB,MAA4B;AAC5D,QAAM,EAAE,YAAY,IAAI,iBAAiB;AACzC,QAAM,EAAE,aAAa,gBAAgB,IAAIC,YAAW,cAAc,KAAK,CAAC;AACxE,SAAO;AAAA,IACL,OAAO;AAAA,MACL,aAAc,mBAAmB;AAAA,MAGjC,MAAM,kBAAmB,SAAoB;AAAA,IAC/C;AAAA,IACA,CAAC,iBAAiB,WAAW;AAAA,EAC/B;AACF;;;ACxBA,SAAS,iBAAAC,gBAAe,cAAAC,mBAAkB;AAUnC,IAAM,mBAAmBD;AAAA,EAC9B;AACF;AAEO,IAAM,sBAAsB,MAA6B;AAC9D,QAAM,UAAUC,YAAW,gBAAgB;AAC3C,MAAI,CAAC;AACH,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AACF,SAAO;AACT;;;ACrBA,SAAS,iBAAAC,gBAAe,cAAAC,mBAAkB;AAQnC,IAAM,qBAAqBD;AAAA,EAChC;AACF;AAEO,IAAM,wBAAwB,MAA+B;AAClE,QAAM,UAAUC,YAAW,kBAAkB;AAC7C,MAAI,CAAC;AACH,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AACF,SAAO;AACT;","names":["createContext","useContext","useContext","useContext","createContext","useContext","createContext","useContext"]}

package/dist/experimental.d.mts

@@ -1,5 +1,5 @@
-import { M as ModelConfigProvider, e as ThreadMessage, d as Unsubscribe, a as ToolCallContentPartComponent, c as ThreadState, m as Tool } from './Thread-ZUDFhMtm.mjs';
-export { n as ImageContentPart, I as ImageContentPartComponent, r as ImageContentPartProps, f as ModelConfig, T as TextContentPartComponent, q as TextContentPartProps, o as ToolCallContentPart, b as ToolCallContentPartProps, p as UIContentPart, U as UIContentPartComponent, s as UIContentPartProps } from './Thread-ZUDFhMtm.mjs';
+import { M as ModelConfigProvider, e as ThreadMessage, d as Unsubscribe, a as ToolCallContentPartComponent, c as ThreadState, m as Tool } from './Thread-CoxBELWy.mjs';
+export { n as ImageContentPart, I as ImageContentPartComponent, r as ImageContentPartProps, f as ModelConfig, T as TextContentPartComponent, q as TextContentPartProps, o as ToolCallContentPart, b as ToolCallContentPartProps, p as UIContentPart, U as UIContentPartComponent, s as UIContentPartProps } from './Thread-CoxBELWy.mjs';
 import { ReactNode } from 'react';
 import { UseBoundStore, StoreApi } from 'zustand';
 import 'zod';
@@ -51,14 +51,14 @@ type ThreadViewportState = {
     onScrollToBottom: (callback: () => void) => Unsubscribe;
 };
 
-type AssistantToolRenderersState = {
-    getToolRenderer: (name: string) => ToolCallContentPartComponent | null;
-    setToolRenderer: (name: string, render: ToolCallContentPartComponent) => () => void;
+type AssistantToolUIsState = {
+    getToolUI: (toolName: string) => ToolCallContentPartComponent | null;
+    setToolUI: (toolName: string, render: ToolCallContentPartComponent) => () => void;
 };
 
 type AssistantContextValue = {
     useModelConfig: UseBoundStore<StoreApi<AssistantModelConfigState>>;
-    useToolRenderers: UseBoundStore<StoreApi<AssistantToolRenderersState>>;
+    useToolUIs: UseBoundStore<StoreApi<AssistantToolUIsState>>;
 };
 declare const useAssistantContext: () => AssistantContextValue;
 
@@ -89,19 +89,19 @@ declare const useContentPartContext: () => ContentPartContextValue;
 declare const useAssistantInstructions: (instruction: string) => void;
 
 type AssistantToolProps<TArgs, TResult> = Tool<TArgs, TResult> & {
-    name: string;
+    toolName: string;
     render?: ToolCallContentPartComponent<TArgs, TResult>;
 };
 declare const useAssistantTool: <TArgs, TResult>(tool: AssistantToolProps<TArgs, TResult>) => void;
 
-type AssistantToolRendererProps<TArgs, TResult> = {
-    name: string;
+type AssistantToolUIProps<TArgs, TResult> = {
+    toolName: string;
     render: ToolCallContentPartComponent<TArgs, TResult>;
 };
-declare const useAssistantToolRenderer: (tool: AssistantToolRendererProps<any, any> | null) => void;
+declare const useAssistantToolUI: (tool: AssistantToolUIProps<any, any> | null) => void;
 
-declare const makeTool: <TArgs, TResult>(tool: AssistantToolProps<TArgs, TResult>) => () => null;
+declare const makeAssistantTool: <TArgs, TResult>(tool: AssistantToolProps<TArgs, TResult>) => () => null;
 
-declare const makeToolRenderer: <TArgs, TResult>(tool: AssistantToolRendererProps<TArgs, TResult>) => () => null;
+declare const makeAssistantToolUI: <TArgs, TResult>(tool: AssistantToolUIProps<TArgs, TResult>) => () => null;
 
-export { type AssistantContextValue, type AssistantModelConfigState, type AssistantToolProps, type AssistantToolRendererProps, type ComposerContextValue, type ComposerState, type ContentPartContextValue, type ContentPartState, type EditComposerState, type MessageContextValue, type MessageState, ModelConfigProvider, type ThreadContextValue, ThreadState, type ThreadViewportState, ToolCallContentPartComponent, makeTool, makeToolRenderer, useAssistantContext, useAssistantInstructions, useAssistantTool, useAssistantToolRenderer, useComposerContext, useContentPartContext, useMessageContext, useThreadContext };
+export { type AssistantContextValue, type AssistantModelConfigState, type AssistantToolProps, type AssistantToolUIProps, type ComposerContextValue, type ComposerState, type ContentPartContextValue, type ContentPartState, type EditComposerState, type MessageContextValue, type MessageState, ModelConfigProvider, type ThreadContextValue, ThreadState, type ThreadViewportState, ToolCallContentPartComponent, makeAssistantTool, makeAssistantToolUI, useAssistantContext, useAssistantInstructions, useAssistantTool, useAssistantToolUI, useComposerContext, useContentPartContext, useMessageContext, useThreadContext };

package/dist/experimental.d.ts

@@ -1,5 +1,5 @@
-import { M as ModelConfigProvider, e as ThreadMessage, d as Unsubscribe, a as ToolCallContentPartComponent, c as ThreadState, m as Tool } from './Thread-ZUDFhMtm.js';
-export { n as ImageContentPart, I as ImageContentPartComponent, r as ImageContentPartProps, f as ModelConfig, T as TextContentPartComponent, q as TextContentPartProps, o as ToolCallContentPart, b as ToolCallContentPartProps, p as UIContentPart, U as UIContentPartComponent, s as UIContentPartProps } from './Thread-ZUDFhMtm.js';
+import { M as ModelConfigProvider, e as ThreadMessage, d as Unsubscribe, a as ToolCallContentPartComponent, c as ThreadState, m as Tool } from './Thread-CoxBELWy.js';
+export { n as ImageContentPart, I as ImageContentPartComponent, r as ImageContentPartProps, f as ModelConfig, T as TextContentPartComponent, q as TextContentPartProps, o as ToolCallContentPart, b as ToolCallContentPartProps, p as UIContentPart, U as UIContentPartComponent, s as UIContentPartProps } from './Thread-CoxBELWy.js';
 import { ReactNode } from 'react';
 import { UseBoundStore, StoreApi } from 'zustand';
 import 'zod';
@@ -51,14 +51,14 @@ type ThreadViewportState = {
     onScrollToBottom: (callback: () => void) => Unsubscribe;
 };
 
-type AssistantToolRenderersState = {
-    getToolRenderer: (name: string) => ToolCallContentPartComponent | null;
-    setToolRenderer: (name: string, render: ToolCallContentPartComponent) => () => void;
+type AssistantToolUIsState = {
+    getToolUI: (toolName: string) => ToolCallContentPartComponent | null;
+    setToolUI: (toolName: string, render: ToolCallContentPartComponent) => () => void;
 };
 
 type AssistantContextValue = {
     useModelConfig: UseBoundStore<StoreApi<AssistantModelConfigState>>;
-    useToolRenderers: UseBoundStore<StoreApi<AssistantToolRenderersState>>;
+    useToolUIs: UseBoundStore<StoreApi<AssistantToolUIsState>>;
 };
 declare const useAssistantContext: () => AssistantContextValue;
 
@@ -89,19 +89,19 @@ declare const useContentPartContext: () => ContentPartContextValue;
 declare const useAssistantInstructions: (instruction: string) => void;
 
 type AssistantToolProps<TArgs, TResult> = Tool<TArgs, TResult> & {
-    name: string;
+    toolName: string;
     render?: ToolCallContentPartComponent<TArgs, TResult>;
 };
 declare const useAssistantTool: <TArgs, TResult>(tool: AssistantToolProps<TArgs, TResult>) => void;
 
-type AssistantToolRendererProps<TArgs, TResult> = {
-    name: string;
+type AssistantToolUIProps<TArgs, TResult> = {
+    toolName: string;
     render: ToolCallContentPartComponent<TArgs, TResult>;
 };
-declare const useAssistantToolRenderer: (tool: AssistantToolRendererProps<any, any> | null) => void;
+declare const useAssistantToolUI: (tool: AssistantToolUIProps<any, any> | null) => void;
 
-declare const makeTool: <TArgs, TResult>(tool: AssistantToolProps<TArgs, TResult>) => () => null;
+declare const makeAssistantTool: <TArgs, TResult>(tool: AssistantToolProps<TArgs, TResult>) => () => null;
 
-declare const makeToolRenderer: <TArgs, TResult>(tool: AssistantToolRendererProps<TArgs, TResult>) => () => null;
+declare const makeAssistantToolUI: <TArgs, TResult>(tool: AssistantToolUIProps<TArgs, TResult>) => () => null;
 
-export { type AssistantContextValue, type AssistantModelConfigState, type AssistantToolProps, type AssistantToolRendererProps, type ComposerContextValue, type ComposerState, type ContentPartContextValue, type ContentPartState, type EditComposerState, type MessageContextValue, type MessageState, ModelConfigProvider, type ThreadContextValue, ThreadState, type ThreadViewportState, ToolCallContentPartComponent, makeTool, makeToolRenderer, useAssistantContext, useAssistantInstructions, useAssistantTool, useAssistantToolRenderer, useComposerContext, useContentPartContext, useMessageContext, useThreadContext };
+export { type AssistantContextValue, type AssistantModelConfigState, type AssistantToolProps, type AssistantToolUIProps, type ComposerContextValue, type ComposerState, type ContentPartContextValue, type ContentPartState, type EditComposerState, type MessageContextValue, type MessageState, ModelConfigProvider, type ThreadContextValue, ThreadState, type ThreadViewportState, ToolCallContentPartComponent, makeAssistantTool, makeAssistantToolUI, useAssistantContext, useAssistantInstructions, useAssistantTool, useAssistantToolUI, useComposerContext, useContentPartContext, useMessageContext, useThreadContext };

package/dist/experimental.js

@@ -20,12 +20,12 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/experimental.ts
 var experimental_exports = {};
 __export(experimental_exports, {
-  makeTool: () => makeTool,
-  makeToolRenderer: () => makeToolRenderer,
+  makeAssistantTool: () => makeAssistantTool,
+  makeAssistantToolUI: () => makeAssistantToolUI,
   useAssistantContext: () => useAssistantContext,
   useAssistantInstructions: () => useAssistantInstructions,
   useAssistantTool: () => useAssistantTool,
-  useAssistantToolRenderer: () => useAssistantToolRenderer,
+  useAssistantToolUI: () => useAssistantToolUI,
   useComposerContext: () => useComposerContext,
   useContentPartContext: () => useContentPartContext,
   useMessageContext: () => useMessageContext,
@@ -53,7 +53,9 @@ var ThreadContext = (0, import_react2.createContext)(null);
 var useThreadContext = () => {
   const context = (0, import_react2.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;
 };
 
@@ -117,41 +119,41 @@ var useAssistantInstructions = (instruction) => {
 // src/model-config/useAssistantTool.tsx
 var import_react7 = require("react");
 var useAssistantTool = (tool) => {
-  const { useModelConfig, useToolRenderers } = useAssistantContext();
+  const { useModelConfig, useToolUIs } = useAssistantContext();
   const registerModelConfigProvider = useModelConfig(
     (s) => s.registerModelConfigProvider
   );
-  const setToolRenderer = useToolRenderers((s) => s.setToolRenderer);
+  const setToolUI = useToolUIs((s) => s.setToolUI);
   (0, import_react7.useEffect)(() => {
-    const { name, render, ...rest } = tool;
+    const { toolName, render, ...rest } = tool;
     const config = {
       tools: {
-        [tool.name]: rest
+        [tool.toolName]: rest
       }
     };
     const unsub1 = registerModelConfigProvider(() => config);
-    const unsub2 = render ? setToolRenderer(name, render) : void 0;
+    const unsub2 = render ? setToolUI(toolName, render) : void 0;
     return () => {
       unsub1();
       unsub2?.();
     };
-  }, [registerModelConfigProvider, setToolRenderer, tool]);
+  }, [registerModelConfigProvider, setToolUI, tool]);
 };
 
-// src/model-config/useAssistantToolRenderer.tsx
+// src/model-config/useAssistantToolUI.tsx
 var import_react8 = require("react");
-var useAssistantToolRenderer = (tool) => {
-  const { useToolRenderers } = useAssistantContext();
-  const setToolRenderer = useToolRenderers((s) => s.setToolRenderer);
+var useAssistantToolUI = (tool) => {
+  const { useToolUIs } = useAssistantContext();
+  const setToolUI = useToolUIs((s) => s.setToolUI);
   (0, import_react8.useEffect)(() => {
     if (!tool) return;
-    const { name, render } = tool;
-    return setToolRenderer(name, render);
-  }, [setToolRenderer, tool]);
+    const { toolName, render } = tool;
+    return setToolUI(toolName, render);
+  }, [setToolUI, tool]);
 };
 
-// src/model-config/makeTool.tsx
-var makeTool = (tool) => {
+// src/model-config/makeAssistantTool.tsx
+var makeAssistantTool = (tool) => {
   const Tool = () => {
     useAssistantTool(tool);
     return null;
@@ -159,22 +161,22 @@ var makeTool = (tool) => {
   return Tool;
 };
 
-// src/model-config/makeToolRenderer.tsx
-var makeToolRenderer = (tool) => {
-  const ToolRenderer = () => {
-    useAssistantToolRenderer(tool);
+// src/model-config/makeAssistantToolUI.tsx
+var makeAssistantToolUI = (tool) => {
+  const ToolUI = () => {
+    useAssistantToolUI(tool);
     return null;
   };
-  return ToolRenderer;
+  return ToolUI;
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  makeTool,
-  makeToolRenderer,
+  makeAssistantTool,
+  makeAssistantToolUI,
   useAssistantContext,
   useAssistantInstructions,
   useAssistantTool,
-  useAssistantToolRenderer,
+  useAssistantToolUI,
   useComposerContext,
   useContentPartContext,
   useMessageContext,

package/dist/experimental.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/experimental.ts","../src/context/AssistantContext.ts","../src/context/ThreadContext.ts","../src/context/ComposerContext.ts","../src/context/MessageContext.ts","../src/context/ContentPartContext.ts","../src/model-config/useAssistantInstructions.tsx","../src/model-config/useAssistantTool.tsx","../src/model-config/useAssistantToolRenderer.tsx","../src/model-config/makeTool.tsx","../src/model-config/makeToolRenderer.tsx"],"sourcesContent":["export type {\n  ImageContentPart,\n  ToolCallContentPart,\n  UIContentPart,\n} from \"./utils/AssistantTypes\";\n\nexport type {\n  ModelConfigProvider,\n  ModelConfig,\n} from \"./utils/ModelConfigTypes\";\n\nexport type {\n  TextContentPartProps,\n  TextContentPartComponent,\n  ImageContentPartProps,\n  ImageContentPartComponent,\n  UIContentPartProps,\n  UIContentPartComponent,\n  ToolCallContentPartProps,\n  ToolCallContentPartComponent,\n} from \"./primitives/message/ContentPartComponentTypes\";\n\nexport * from \"./context\";\nexport { useAssistantInstructions } from \"./model-config/useAssistantInstructions\";\nexport {\n  useAssistantTool,\n  type AssistantToolProps,\n} from \"./model-config/useAssistantTool\";\nexport {\n  useAssistantToolRenderer,\n  type AssistantToolRendererProps,\n} from \"./model-config/useAssistantToolRenderer\";\nexport { makeTool } from \"./model-config/makeTool\";\nexport { makeToolRenderer } from \"./model-config/makeToolRenderer\";\n","import { createContext, useContext } from \"react\";\nimport type { StoreApi, UseBoundStore } from \"zustand\";\nimport type { AssistantModelConfigState } from \"./stores/AssistantModelConfig\";\nimport type { AssistantToolRenderersState } from \"./stores/AssistantToolRenderers\";\n\nexport type AssistantContextValue = {\n  useModelConfig: UseBoundStore<StoreApi<AssistantModelConfigState>>;\n  useToolRenderers: UseBoundStore<StoreApi<AssistantToolRenderersState>>;\n};\n\nexport const AssistantContext = createContext<AssistantContextValue | null>(\n  null,\n);\n\nexport const useAssistantContext = (): AssistantContextValue => {\n  const context = useContext(AssistantContext);\n  if (!context)\n    throw new Error(\n      \"This component must be used within an AssistantRuntimeProvider.\",\n    );\n  return context;\n};\n","import { createContext, useContext } from \"react\";\nimport type { StoreApi, UseBoundStore } from \"zustand\";\nimport type { ComposerState } from \"./stores/Composer\";\nimport type { ThreadState } from \"./stores/Thread\";\nimport type { ThreadViewportState } from \"./stores/ThreadViewport\";\n\nexport type ThreadContextValue = {\n  useThread: UseBoundStore<StoreApi<ThreadState>>;\n  useComposer: UseBoundStore<StoreApi<ComposerState>>;\n  useViewport: UseBoundStore<StoreApi<ThreadViewportState>>;\n};\n\nexport const ThreadContext = createContext<ThreadContextValue | null>(null);\n\nexport const useThreadContext = (): ThreadContextValue => {\n  const context = useContext(ThreadContext);\n  if (!context)\n    throw new Error(\"This component must be used within an AssistantRuntimeProvider.\");\n  return context;\n};\n","import { useContext, useMemo } from \"react\";\nimport type { StoreApi, UseBoundStore } from \"zustand\";\nimport { MessageContext } from \"./MessageContext\";\nimport { useThreadContext } from \"./ThreadContext\";\nimport type { ComposerState } from \"./stores/Composer\";\nimport type { EditComposerState } from \"./stores/MessageComposer\";\n\nexport type ComposerContextValue = {\n  useComposer: UseBoundStore<StoreApi<EditComposerState | ComposerState>>;\n  type: \"edit\" | \"new\";\n};\n\nexport const useComposerContext = (): ComposerContextValue => {\n  const { useComposer } = useThreadContext();\n  const { useComposer: useEditComposer } = useContext(MessageContext) ?? {};\n  return useMemo(\n    () => ({\n      useComposer: (useEditComposer ?? useComposer) as UseBoundStore<\n        StoreApi<EditComposerState | ComposerState>\n      >,\n      type: useEditComposer ? (\"edit\" as const) : (\"new\" as const),\n    }),\n    [useEditComposer, useComposer],\n  );\n};\n","import { createContext, useContext } from \"react\";\nimport type { StoreApi, UseBoundStore } from \"zustand\";\nimport type { MessageState } from \"./stores/Message\";\nimport type { EditComposerState } from \"./stores/MessageComposer\";\n\nexport type MessageContextValue = {\n  useMessage: UseBoundStore<StoreApi<MessageState>>;\n  useComposer: UseBoundStore<StoreApi<EditComposerState>>;\n};\n\nexport const MessageContext = createContext<MessageContextValue | null>(null);\n\nexport const useMessageContext = () => {\n  const context = useContext(MessageContext);\n  if (!context)\n    throw new Error(\n      \"This component can only be used inside a component passed to <ThreadPrimitive.Messages components={...} />.\",\n    );\n  return context;\n};\n","import { createContext, useContext } from \"react\";\nimport type { StoreApi, UseBoundStore } from \"zustand\";\nimport type { ContentPartState } from \"./stores/ContentPart\";\n\nexport type ContentPartContextValue = {\n  useContentPart: UseBoundStore<StoreApi<ContentPartState>>;\n};\n\nexport const ContentPartContext = createContext<ContentPartContextValue | null>(\n  null,\n);\n\nexport const useContentPartContext = (): ContentPartContextValue => {\n  const context = useContext(ContentPartContext);\n  if (!context)\n    throw new Error(\n      \"This component can only be used inside a component passed to <MessagePrimitive.Content components={...} >.\",\n    );\n  return context;\n};\n","\"use client\";\n\nimport { useEffect } from \"react\";\nimport { useAssistantContext } from \"../context/AssistantContext\";\n\nexport const useAssistantInstructions = (instruction: string) => {\n  const { useModelConfig } = useAssistantContext();\n  const registerModelConfigProvider = useModelConfig(\n    (s) => s.registerModelConfigProvider,\n  );\n  useEffect(() => {\n    const config = {\n      system: instruction,\n    };\n    return registerModelConfigProvider(() => config);\n  }, [registerModelConfigProvider, instruction]);\n};\n","\"use client\";\n\nimport { useEffect } from \"react\";\nimport { useAssistantContext } from \"../context/AssistantContext\";\nimport type { ToolCallContentPartComponent } from \"../primitives/message/ContentPartComponentTypes\";\nimport type { Tool } from \"../utils/ModelConfigTypes\";\n\nexport type AssistantToolProps<TArgs, TResult> = Tool<TArgs, TResult> & {\n  name: string;\n  render?: ToolCallContentPartComponent<TArgs, TResult>;\n};\n\nexport const useAssistantTool = <TArgs, TResult>(\n  tool: AssistantToolProps<TArgs, TResult>,\n) => {\n  const { useModelConfig, useToolRenderers } = useAssistantContext();\n  const registerModelConfigProvider = useModelConfig(\n    (s) => s.registerModelConfigProvider,\n  );\n  const setToolRenderer = useToolRenderers((s) => s.setToolRenderer);\n  useEffect(() => {\n    const { name, render, ...rest } = tool;\n    const config = {\n      tools: {\n        [tool.name]: rest,\n      },\n    };\n    const unsub1 = registerModelConfigProvider(() => config);\n    const unsub2 = render ? setToolRenderer(name, render) : undefined;\n    return () => {\n      unsub1();\n      unsub2?.();\n    };\n  }, [registerModelConfigProvider, setToolRenderer, tool]);\n};\n","\"use client\";\nimport { useEffect } from \"react\";\nimport { useAssistantContext } from \"../context/AssistantContext\";\nimport type { ToolCallContentPartComponent } from \"../primitives/message/ContentPartComponentTypes\";\n\nexport type AssistantToolRendererProps<TArgs, TResult> = {\n  name: string;\n  render: ToolCallContentPartComponent<TArgs, TResult>;\n};\n\nexport const useAssistantToolRenderer = (\n  // biome-ignore lint/suspicious/noExplicitAny: intentional any\n  tool: AssistantToolRendererProps<any, any> | null,\n) => {\n  const { useToolRenderers } = useAssistantContext();\n  const setToolRenderer = useToolRenderers((s) => s.setToolRenderer);\n  useEffect(() => {\n    if (!tool) return;\n    const { name, render } = tool;\n    return setToolRenderer(name, render);\n  }, [setToolRenderer, tool]);\n};\n","\"use client\";\nimport { type AssistantToolProps, useAssistantTool } from \"./useAssistantTool\";\n\nexport const makeTool = <TArgs, TResult>(\n  tool: AssistantToolProps<TArgs, TResult>,\n) => {\n  const Tool = () => {\n    useAssistantTool(tool);\n    return null;\n  };\n  return Tool;\n};\n","\"use client\";\nimport {\n  type AssistantToolRendererProps,\n  useAssistantToolRenderer,\n} from \"./useAssistantToolRenderer\";\n\nexport const makeToolRenderer = <TArgs, TResult>(\n  tool: AssistantToolRendererProps<TArgs, TResult>,\n) => {\n  const ToolRenderer = () => {\n    useAssistantToolRenderer(tool);\n    return null;\n  };\n  return ToolRenderer;\n};\n"],"mappings":"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","names":["import_react","import_react","import_react","import_react","import_react","import_react","import_react"]}
+{"version":3,"sources":["../src/experimental.ts","../src/context/AssistantContext.ts","../src/context/ThreadContext.ts","../src/context/ComposerContext.ts","../src/context/MessageContext.ts","../src/context/ContentPartContext.ts","../src/model-config/useAssistantInstructions.tsx","../src/model-config/useAssistantTool.tsx","../src/model-config/useAssistantToolUI.tsx","../src/model-config/makeAssistantTool.tsx","../src/model-config/makeAssistantToolUI.tsx"],"sourcesContent":["export type {\n  ImageContentPart,\n  ToolCallContentPart,\n  UIContentPart,\n} from \"./utils/AssistantTypes\";\n\nexport type {\n  ModelConfigProvider,\n  ModelConfig,\n} from \"./utils/ModelConfigTypes\";\n\nexport type {\n  TextContentPartProps,\n  TextContentPartComponent,\n  ImageContentPartProps,\n  ImageContentPartComponent,\n  UIContentPartProps,\n  UIContentPartComponent,\n  ToolCallContentPartProps,\n  ToolCallContentPartComponent,\n} from \"./primitives/message/ContentPartComponentTypes\";\n\nexport * from \"./context\";\nexport { useAssistantInstructions } from \"./model-config/useAssistantInstructions\";\nexport {\n  useAssistantTool,\n  type AssistantToolProps,\n} from \"./model-config/useAssistantTool\";\nexport {\n  useAssistantToolUI,\n  type AssistantToolUIProps,\n} from \"./model-config/useAssistantToolUI\";\nexport { makeAssistantTool } from \"./model-config/makeAssistantTool\";\nexport { makeAssistantToolUI } from \"./model-config/makeAssistantToolUI\";\n","import { createContext, useContext } from \"react\";\nimport type { StoreApi, UseBoundStore } from \"zustand\";\nimport type { AssistantModelConfigState } from \"./stores/AssistantModelConfig\";\nimport type { AssistantToolUIsState } from \"./stores/AssistantToolUIs\";\n\nexport type AssistantContextValue = {\n  useModelConfig: UseBoundStore<StoreApi<AssistantModelConfigState>>;\n  useToolUIs: UseBoundStore<StoreApi<AssistantToolUIsState>>;\n};\n\nexport const AssistantContext = createContext<AssistantContextValue | null>(\n  null,\n);\n\nexport const useAssistantContext = (): AssistantContextValue => {\n  const context = useContext(AssistantContext);\n  if (!context)\n    throw new Error(\n      \"This component must be used within an AssistantRuntimeProvider.\",\n    );\n  return context;\n};\n","import { createContext, useContext } from \"react\";\nimport type { StoreApi, UseBoundStore } from \"zustand\";\nimport type { ComposerState } from \"./stores/Composer\";\nimport type { ThreadState } from \"./stores/Thread\";\nimport type { ThreadViewportState } from \"./stores/ThreadViewport\";\n\nexport type ThreadContextValue = {\n  useThread: UseBoundStore<StoreApi<ThreadState>>;\n  useComposer: UseBoundStore<StoreApi<ComposerState>>;\n  useViewport: UseBoundStore<StoreApi<ThreadViewportState>>;\n};\n\nexport const ThreadContext = createContext<ThreadContextValue | null>(null);\n\nexport const useThreadContext = (): ThreadContextValue => {\n  const context = useContext(ThreadContext);\n  if (!context)\n    throw new Error(\n      \"This component must be used within an AssistantRuntimeProvider.\",\n    );\n  return context;\n};\n","import { useContext, useMemo } from \"react\";\nimport type { StoreApi, UseBoundStore } from \"zustand\";\nimport { MessageContext } from \"./MessageContext\";\nimport { useThreadContext } from \"./ThreadContext\";\nimport type { ComposerState } from \"./stores/Composer\";\nimport type { EditComposerState } from \"./stores/MessageComposer\";\n\nexport type ComposerContextValue = {\n  useComposer: UseBoundStore<StoreApi<EditComposerState | ComposerState>>;\n  type: \"edit\" | \"new\";\n};\n\nexport const useComposerContext = (): ComposerContextValue => {\n  const { useComposer } = useThreadContext();\n  const { useComposer: useEditComposer } = useContext(MessageContext) ?? {};\n  return useMemo(\n    () => ({\n      useComposer: (useEditComposer ?? useComposer) as UseBoundStore<\n        StoreApi<EditComposerState | ComposerState>\n      >,\n      type: useEditComposer ? (\"edit\" as const) : (\"new\" as const),\n    }),\n    [useEditComposer, useComposer],\n  );\n};\n","import { createContext, useContext } from \"react\";\nimport type { StoreApi, UseBoundStore } from \"zustand\";\nimport type { MessageState } from \"./stores/Message\";\nimport type { EditComposerState } from \"./stores/MessageComposer\";\n\nexport type MessageContextValue = {\n  useMessage: UseBoundStore<StoreApi<MessageState>>;\n  useComposer: UseBoundStore<StoreApi<EditComposerState>>;\n};\n\nexport const MessageContext = createContext<MessageContextValue | null>(null);\n\nexport const useMessageContext = () => {\n  const context = useContext(MessageContext);\n  if (!context)\n    throw new Error(\n      \"This component can only be used inside a component passed to <ThreadPrimitive.Messages components={...} />.\",\n    );\n  return context;\n};\n","import { createContext, useContext } from \"react\";\nimport type { StoreApi, UseBoundStore } from \"zustand\";\nimport type { ContentPartState } from \"./stores/ContentPart\";\n\nexport type ContentPartContextValue = {\n  useContentPart: UseBoundStore<StoreApi<ContentPartState>>;\n};\n\nexport const ContentPartContext = createContext<ContentPartContextValue | null>(\n  null,\n);\n\nexport const useContentPartContext = (): ContentPartContextValue => {\n  const context = useContext(ContentPartContext);\n  if (!context)\n    throw new Error(\n      \"This component can only be used inside a component passed to <MessagePrimitive.Content components={...} >.\",\n    );\n  return context;\n};\n","\"use client\";\n\nimport { useEffect } from \"react\";\nimport { useAssistantContext } from \"../context/AssistantContext\";\n\nexport const useAssistantInstructions = (instruction: string) => {\n  const { useModelConfig } = useAssistantContext();\n  const registerModelConfigProvider = useModelConfig(\n    (s) => s.registerModelConfigProvider,\n  );\n  useEffect(() => {\n    const config = {\n      system: instruction,\n    };\n    return registerModelConfigProvider(() => config);\n  }, [registerModelConfigProvider, instruction]);\n};\n","\"use client\";\n\nimport { useEffect } from \"react\";\nimport { useAssistantContext } from \"../context/AssistantContext\";\nimport type { ToolCallContentPartComponent } from \"../primitives/message/ContentPartComponentTypes\";\nimport type { Tool } from \"../utils/ModelConfigTypes\";\n\nexport type AssistantToolProps<TArgs, TResult> = Tool<TArgs, TResult> & {\n  toolName: string;\n  render?: ToolCallContentPartComponent<TArgs, TResult>;\n};\n\nexport const useAssistantTool = <TArgs, TResult>(\n  tool: AssistantToolProps<TArgs, TResult>,\n) => {\n  const { useModelConfig, useToolUIs } = useAssistantContext();\n  const registerModelConfigProvider = useModelConfig(\n    (s) => s.registerModelConfigProvider,\n  );\n  const setToolUI = useToolUIs((s) => s.setToolUI);\n  useEffect(() => {\n    const { toolName, render, ...rest } = tool;\n    const config = {\n      tools: {\n        [tool.toolName]: rest,\n      },\n    };\n    const unsub1 = registerModelConfigProvider(() => config);\n    const unsub2 = render ? setToolUI(toolName, render) : undefined;\n    return () => {\n      unsub1();\n      unsub2?.();\n    };\n  }, [registerModelConfigProvider, setToolUI, tool]);\n};\n","\"use client\";\nimport { useEffect } from \"react\";\nimport { useAssistantContext } from \"../context/AssistantContext\";\nimport type { ToolCallContentPartComponent } from \"../primitives/message/ContentPartComponentTypes\";\n\nexport type AssistantToolUIProps<TArgs, TResult> = {\n  toolName: string;\n  render: ToolCallContentPartComponent<TArgs, TResult>;\n};\n\nexport const useAssistantToolUI = (\n  tool: AssistantToolUIProps<any, any> | null,\n) => {\n  const { useToolUIs } = useAssistantContext();\n  const setToolUI = useToolUIs((s) => s.setToolUI);\n  useEffect(() => {\n    if (!tool) return;\n    const { toolName, render } = tool;\n    return setToolUI(toolName, render);\n  }, [setToolUI, tool]);\n};\n","\"use client\";\nimport { type AssistantToolProps, useAssistantTool } from \"./useAssistantTool\";\n\nexport const makeAssistantTool = <TArgs, TResult>(\n  tool: AssistantToolProps<TArgs, TResult>,\n) => {\n  const Tool = () => {\n    useAssistantTool(tool);\n    return null;\n  };\n  return Tool;\n};\n","\"use client\";\nimport {\n  type AssistantToolUIProps,\n  useAssistantToolUI,\n} from \"./useAssistantToolUI\";\n\nexport const makeAssistantToolUI = <TArgs, TResult>(\n  tool: AssistantToolUIProps<TArgs, TResult>,\n) => {\n  const ToolUI = () => {\n    useAssistantToolUI(tool);\n    return null;\n  };\n  return ToolUI;\n};\n"],"mappings":"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","names":["import_react","import_react","import_react","import_react","import_react","import_react","import_react"]}

package/dist/experimental.mjs

@@ -4,7 +4,7 @@ import {
   useContentPartContext,
   useMessageContext,
   useThreadContext
-} from "./chunk-KIP3YFVM.mjs";
+} from "./chunk-RITM2IUH.mjs";
 
 // src/model-config/useAssistantInstructions.tsx
 import { useEffect } from "react";
@@ -24,41 +24,41 @@ var useAssistantInstructions = (instruction) => {
 // src/model-config/useAssistantTool.tsx
 import { useEffect as useEffect2 } from "react";
 var useAssistantTool = (tool) => {
-  const { useModelConfig, useToolRenderers } = useAssistantContext();
+  const { useModelConfig, useToolUIs } = useAssistantContext();
   const registerModelConfigProvider = useModelConfig(
     (s) => s.registerModelConfigProvider
   );
-  const setToolRenderer = useToolRenderers((s) => s.setToolRenderer);
+  const setToolUI = useToolUIs((s) => s.setToolUI);
   useEffect2(() => {
-    const { name, render, ...rest } = tool;
+    const { toolName, render, ...rest } = tool;
     const config = {
       tools: {
-        [tool.name]: rest
+        [tool.toolName]: rest
       }
     };
     const unsub1 = registerModelConfigProvider(() => config);
-    const unsub2 = render ? setToolRenderer(name, render) : void 0;
+    const unsub2 = render ? setToolUI(toolName, render) : void 0;
     return () => {
       unsub1();
       unsub2?.();
     };
-  }, [registerModelConfigProvider, setToolRenderer, tool]);
+  }, [registerModelConfigProvider, setToolUI, tool]);
 };
 
-// src/model-config/useAssistantToolRenderer.tsx
+// src/model-config/useAssistantToolUI.tsx
 import { useEffect as useEffect3 } from "react";
-var useAssistantToolRenderer = (tool) => {
-  const { useToolRenderers } = useAssistantContext();
-  const setToolRenderer = useToolRenderers((s) => s.setToolRenderer);
+var useAssistantToolUI = (tool) => {
+  const { useToolUIs } = useAssistantContext();
+  const setToolUI = useToolUIs((s) => s.setToolUI);
   useEffect3(() => {
     if (!tool) return;
-    const { name, render } = tool;
-    return setToolRenderer(name, render);
-  }, [setToolRenderer, tool]);
+    const { toolName, render } = tool;
+    return setToolUI(toolName, render);
+  }, [setToolUI, tool]);
 };
 
-// src/model-config/makeTool.tsx
-var makeTool = (tool) => {
+// src/model-config/makeAssistantTool.tsx
+var makeAssistantTool = (tool) => {
   const Tool = () => {
     useAssistantTool(tool);
     return null;
@@ -66,21 +66,21 @@ var makeTool = (tool) => {
   return Tool;
 };
 
-// src/model-config/makeToolRenderer.tsx
-var makeToolRenderer = (tool) => {
-  const ToolRenderer = () => {
-    useAssistantToolRenderer(tool);
+// src/model-config/makeAssistantToolUI.tsx
+var makeAssistantToolUI = (tool) => {
+  const ToolUI = () => {
+    useAssistantToolUI(tool);
     return null;
   };
-  return ToolRenderer;
+  return ToolUI;
 };
 export {
-  makeTool,
-  makeToolRenderer,
+  makeAssistantTool,
+  makeAssistantToolUI,
   useAssistantContext,
   useAssistantInstructions,
   useAssistantTool,
-  useAssistantToolRenderer,
+  useAssistantToolUI,
   useComposerContext,
   useContentPartContext,
   useMessageContext,

package/dist/experimental.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/model-config/useAssistantInstructions.tsx","../src/model-config/useAssistantTool.tsx","../src/model-config/useAssistantToolRenderer.tsx","../src/model-config/makeTool.tsx","../src/model-config/makeToolRenderer.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect } from \"react\";\nimport { useAssistantContext } from \"../context/AssistantContext\";\n\nexport const useAssistantInstructions = (instruction: string) => {\n  const { useModelConfig } = useAssistantContext();\n  const registerModelConfigProvider = useModelConfig(\n    (s) => s.registerModelConfigProvider,\n  );\n  useEffect(() => {\n    const config = {\n      system: instruction,\n    };\n    return registerModelConfigProvider(() => config);\n  }, [registerModelConfigProvider, instruction]);\n};\n","\"use client\";\n\nimport { useEffect } from \"react\";\nimport { useAssistantContext } from \"../context/AssistantContext\";\nimport type { ToolCallContentPartComponent } from \"../primitives/message/ContentPartComponentTypes\";\nimport type { Tool } from \"../utils/ModelConfigTypes\";\n\nexport type AssistantToolProps<TArgs, TResult> = Tool<TArgs, TResult> & {\n  name: string;\n  render?: ToolCallContentPartComponent<TArgs, TResult>;\n};\n\nexport const useAssistantTool = <TArgs, TResult>(\n  tool: AssistantToolProps<TArgs, TResult>,\n) => {\n  const { useModelConfig, useToolRenderers } = useAssistantContext();\n  const registerModelConfigProvider = useModelConfig(\n    (s) => s.registerModelConfigProvider,\n  );\n  const setToolRenderer = useToolRenderers((s) => s.setToolRenderer);\n  useEffect(() => {\n    const { name, render, ...rest } = tool;\n    const config = {\n      tools: {\n        [tool.name]: rest,\n      },\n    };\n    const unsub1 = registerModelConfigProvider(() => config);\n    const unsub2 = render ? setToolRenderer(name, render) : undefined;\n    return () => {\n      unsub1();\n      unsub2?.();\n    };\n  }, [registerModelConfigProvider, setToolRenderer, tool]);\n};\n","\"use client\";\nimport { useEffect } from \"react\";\nimport { useAssistantContext } from \"../context/AssistantContext\";\nimport type { ToolCallContentPartComponent } from \"../primitives/message/ContentPartComponentTypes\";\n\nexport type AssistantToolRendererProps<TArgs, TResult> = {\n  name: string;\n  render: ToolCallContentPartComponent<TArgs, TResult>;\n};\n\nexport const useAssistantToolRenderer = (\n  // biome-ignore lint/suspicious/noExplicitAny: intentional any\n  tool: AssistantToolRendererProps<any, any> | null,\n) => {\n  const { useToolRenderers } = useAssistantContext();\n  const setToolRenderer = useToolRenderers((s) => s.setToolRenderer);\n  useEffect(() => {\n    if (!tool) return;\n    const { name, render } = tool;\n    return setToolRenderer(name, render);\n  }, [setToolRenderer, tool]);\n};\n","\"use client\";\nimport { type AssistantToolProps, useAssistantTool } from \"./useAssistantTool\";\n\nexport const makeTool = <TArgs, TResult>(\n  tool: AssistantToolProps<TArgs, TResult>,\n) => {\n  const Tool = () => {\n    useAssistantTool(tool);\n    return null;\n  };\n  return Tool;\n};\n","\"use client\";\nimport {\n  type AssistantToolRendererProps,\n  useAssistantToolRenderer,\n} from \"./useAssistantToolRenderer\";\n\nexport const makeToolRenderer = <TArgs, TResult>(\n  tool: AssistantToolRendererProps<TArgs, TResult>,\n) => {\n  const ToolRenderer = () => {\n    useAssistantToolRenderer(tool);\n    return null;\n  };\n  return ToolRenderer;\n};\n"],"mappings":";;;;;;;;;AAEA,SAAS,iBAAiB;AAGnB,IAAM,2BAA2B,CAAC,gBAAwB;AAC/D,QAAM,EAAE,eAAe,IAAI,oBAAoB;AAC/C,QAAM,8BAA8B;AAAA,IAClC,CAAC,MAAM,EAAE;AAAA,EACX;AACA,YAAU,MAAM;AACd,UAAM,SAAS;AAAA,MACb,QAAQ;AAAA,IACV;AACA,WAAO,4BAA4B,MAAM,MAAM;AAAA,EACjD,GAAG,CAAC,6BAA6B,WAAW,CAAC;AAC/C;;;ACdA,SAAS,aAAAA,kBAAiB;AAUnB,IAAM,mBAAmB,CAC9B,SACG;AACH,QAAM,EAAE,gBAAgB,iBAAiB,IAAI,oBAAoB;AACjE,QAAM,8BAA8B;AAAA,IAClC,CAAC,MAAM,EAAE;AAAA,EACX;AACA,QAAM,kBAAkB,iBAAiB,CAAC,MAAM,EAAE,eAAe;AACjE,EAAAC,WAAU,MAAM;AACd,UAAM,EAAE,MAAM,QAAQ,GAAG,KAAK,IAAI;AAClC,UAAM,SAAS;AAAA,MACb,OAAO;AAAA,QACL,CAAC,KAAK,IAAI,GAAG;AAAA,MACf;AAAA,IACF;AACA,UAAM,SAAS,4BAA4B,MAAM,MAAM;AACvD,UAAM,SAAS,SAAS,gBAAgB,MAAM,MAAM,IAAI;AACxD,WAAO,MAAM;AACX,aAAO;AACP,eAAS;AAAA,IACX;AAAA,EACF,GAAG,CAAC,6BAA6B,iBAAiB,IAAI,CAAC;AACzD;;;ACjCA,SAAS,aAAAC,kBAAiB;AASnB,IAAM,2BAA2B,CAEtC,SACG;AACH,QAAM,EAAE,iBAAiB,IAAI,oBAAoB;AACjD,QAAM,kBAAkB,iBAAiB,CAAC,MAAM,EAAE,eAAe;AACjE,EAAAC,WAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,UAAM,EAAE,MAAM,OAAO,IAAI;AACzB,WAAO,gBAAgB,MAAM,MAAM;AAAA,EACrC,GAAG,CAAC,iBAAiB,IAAI,CAAC;AAC5B;;;AClBO,IAAM,WAAW,CACtB,SACG;AACH,QAAM,OAAO,MAAM;AACjB,qBAAiB,IAAI;AACrB,WAAO;AAAA,EACT;AACA,SAAO;AACT;;;ACLO,IAAM,mBAAmB,CAC9B,SACG;AACH,QAAM,eAAe,MAAM;AACzB,6BAAyB,IAAI;AAC7B,WAAO;AAAA,EACT;AACA,SAAO;AACT;","names":["useEffect","useEffect","useEffect","useEffect"]}
+{"version":3,"sources":["../src/model-config/useAssistantInstructions.tsx","../src/model-config/useAssistantTool.tsx","../src/model-config/useAssistantToolUI.tsx","../src/model-config/makeAssistantTool.tsx","../src/model-config/makeAssistantToolUI.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect } from \"react\";\nimport { useAssistantContext } from \"../context/AssistantContext\";\n\nexport const useAssistantInstructions = (instruction: string) => {\n  const { useModelConfig } = useAssistantContext();\n  const registerModelConfigProvider = useModelConfig(\n    (s) => s.registerModelConfigProvider,\n  );\n  useEffect(() => {\n    const config = {\n      system: instruction,\n    };\n    return registerModelConfigProvider(() => config);\n  }, [registerModelConfigProvider, instruction]);\n};\n","\"use client\";\n\nimport { useEffect } from \"react\";\nimport { useAssistantContext } from \"../context/AssistantContext\";\nimport type { ToolCallContentPartComponent } from \"../primitives/message/ContentPartComponentTypes\";\nimport type { Tool } from \"../utils/ModelConfigTypes\";\n\nexport type AssistantToolProps<TArgs, TResult> = Tool<TArgs, TResult> & {\n  toolName: string;\n  render?: ToolCallContentPartComponent<TArgs, TResult>;\n};\n\nexport const useAssistantTool = <TArgs, TResult>(\n  tool: AssistantToolProps<TArgs, TResult>,\n) => {\n  const { useModelConfig, useToolUIs } = useAssistantContext();\n  const registerModelConfigProvider = useModelConfig(\n    (s) => s.registerModelConfigProvider,\n  );\n  const setToolUI = useToolUIs((s) => s.setToolUI);\n  useEffect(() => {\n    const { toolName, render, ...rest } = tool;\n    const config = {\n      tools: {\n        [tool.toolName]: rest,\n      },\n    };\n    const unsub1 = registerModelConfigProvider(() => config);\n    const unsub2 = render ? setToolUI(toolName, render) : undefined;\n    return () => {\n      unsub1();\n      unsub2?.();\n    };\n  }, [registerModelConfigProvider, setToolUI, tool]);\n};\n","\"use client\";\nimport { useEffect } from \"react\";\nimport { useAssistantContext } from \"../context/AssistantContext\";\nimport type { ToolCallContentPartComponent } from \"../primitives/message/ContentPartComponentTypes\";\n\nexport type AssistantToolUIProps<TArgs, TResult> = {\n  toolName: string;\n  render: ToolCallContentPartComponent<TArgs, TResult>;\n};\n\nexport const useAssistantToolUI = (\n  tool: AssistantToolUIProps<any, any> | null,\n) => {\n  const { useToolUIs } = useAssistantContext();\n  const setToolUI = useToolUIs((s) => s.setToolUI);\n  useEffect(() => {\n    if (!tool) return;\n    const { toolName, render } = tool;\n    return setToolUI(toolName, render);\n  }, [setToolUI, tool]);\n};\n","\"use client\";\nimport { type AssistantToolProps, useAssistantTool } from \"./useAssistantTool\";\n\nexport const makeAssistantTool = <TArgs, TResult>(\n  tool: AssistantToolProps<TArgs, TResult>,\n) => {\n  const Tool = () => {\n    useAssistantTool(tool);\n    return null;\n  };\n  return Tool;\n};\n","\"use client\";\nimport {\n  type AssistantToolUIProps,\n  useAssistantToolUI,\n} from \"./useAssistantToolUI\";\n\nexport const makeAssistantToolUI = <TArgs, TResult>(\n  tool: AssistantToolUIProps<TArgs, TResult>,\n) => {\n  const ToolUI = () => {\n    useAssistantToolUI(tool);\n    return null;\n  };\n  return ToolUI;\n};\n"],"mappings":";;;;;;;;;AAEA,SAAS,iBAAiB;AAGnB,IAAM,2BAA2B,CAAC,gBAAwB;AAC/D,QAAM,EAAE,eAAe,IAAI,oBAAoB;AAC/C,QAAM,8BAA8B;AAAA,IAClC,CAAC,MAAM,EAAE;AAAA,EACX;AACA,YAAU,MAAM;AACd,UAAM,SAAS;AAAA,MACb,QAAQ;AAAA,IACV;AACA,WAAO,4BAA4B,MAAM,MAAM;AAAA,EACjD,GAAG,CAAC,6BAA6B,WAAW,CAAC;AAC/C;;;ACdA,SAAS,aAAAA,kBAAiB;AAUnB,IAAM,mBAAmB,CAC9B,SACG;AACH,QAAM,EAAE,gBAAgB,WAAW,IAAI,oBAAoB;AAC3D,QAAM,8BAA8B;AAAA,IAClC,CAAC,MAAM,EAAE;AAAA,EACX;AACA,QAAM,YAAY,WAAW,CAAC,MAAM,EAAE,SAAS;AAC/C,EAAAC,WAAU,MAAM;AACd,UAAM,EAAE,UAAU,QAAQ,GAAG,KAAK,IAAI;AACtC,UAAM,SAAS;AAAA,MACb,OAAO;AAAA,QACL,CAAC,KAAK,QAAQ,GAAG;AAAA,MACnB;AAAA,IACF;AACA,UAAM,SAAS,4BAA4B,MAAM,MAAM;AACvD,UAAM,SAAS,SAAS,UAAU,UAAU,MAAM,IAAI;AACtD,WAAO,MAAM;AACX,aAAO;AACP,eAAS;AAAA,IACX;AAAA,EACF,GAAG,CAAC,6BAA6B,WAAW,IAAI,CAAC;AACnD;;;ACjCA,SAAS,aAAAC,kBAAiB;AASnB,IAAM,qBAAqB,CAChC,SACG;AACH,QAAM,EAAE,WAAW,IAAI,oBAAoB;AAC3C,QAAM,YAAY,WAAW,CAAC,MAAM,EAAE,SAAS;AAC/C,EAAAC,WAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,UAAM,EAAE,UAAU,OAAO,IAAI;AAC7B,WAAO,UAAU,UAAU,MAAM;AAAA,EACnC,GAAG,CAAC,WAAW,IAAI,CAAC;AACtB;;;ACjBO,IAAM,oBAAoB,CAC/B,SACG;AACH,QAAM,OAAO,MAAM;AACjB,qBAAiB,IAAI;AACrB,WAAO;AAAA,EACT;AACA,SAAO;AACT;;;ACLO,IAAM,sBAAsB,CACjC,SACG;AACH,QAAM,SAAS,MAAM;AACnB,uBAAmB,IAAI;AACvB,WAAO;AAAA,EACT;AACA,SAAO;AACT;","names":["useEffect","useEffect","useEffect","useEffect"]}