@assistant-ui/react 0.11.57 → 0.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@assistant-ui/react",
-  "version": "0.11.57",
+  "version": "0.12.0",
   "description": "TypeScript/React library for AI Chat",
   "keywords": [
     "radix-ui",
@@ -49,8 +49,9 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "assistant-cloud": "^0.1.12",
-    "@assistant-ui/tap": "^0.3.5",
+    "assistant-cloud": "^0.1.13",
+    "@assistant-ui/tap": "^0.4.0",
+    "@assistant-ui/store": "^0.1.0",
     "@radix-ui/primitive": "^1.1.3",
     "@radix-ui/react-compose-refs": "^1.1.2",
     "@radix-ui/react-context": "^1.1.3",
@@ -60,11 +61,11 @@
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-use-callback-ref": "^1.1.1",
     "@radix-ui/react-use-escape-keydown": "^1.1.1",
-    "assistant-stream": "^0.2.46",
+    "assistant-stream": "^0.2.47",
     "nanoid": "^5.1.6",
     "react-textarea-autosize": "^8.5.9",
     "zod": "^4.3.5",
-    "zustand": "^5.0.9"
+    "zustand": "^5.0.10"
   },
   "peerDependencies": {
     "@types/react": "*",
@@ -82,12 +83,12 @@
   },
   "devDependencies": {
     "@types/json-schema": "^7.0.15",
-    "@types/node": "^25.0.3",
-    "@types/react": "^19.2.7",
+    "@types/node": "^25.0.9",
+    "@types/react": "^19.2.9",
     "@types/react-dom": "^19.2.3",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
-    "vitest": "^4.0.16",
+    "vitest": "^4.0.17",
     "@assistant-ui/x-buildutils": "0.0.1"
   },
   "publishConfig": {

package/src/client/ModelContextClient.ts

@@ -1,16 +1,23 @@
-import { resource, tapState } from "@assistant-ui/tap";
-import { tapApi } from "../utils/tap-store";
+import { resource, tapMemo, tapState } from "@assistant-ui/tap";
+import { type ClientOutput } from "@assistant-ui/store";
 import { CompositeContextProvider } from "../utils/CompositeContextProvider";
-import type { ModelContextState, ModelContextApi } from "./types/ModelContext";
+import type { ModelContextState } from "../types/scopes";
 
-export const ModelContext = resource(() => {
-  const [state] = tapState<ModelContextState>(() => ({}));
-  const composite = new CompositeContextProvider();
+const version = 1;
 
-  return tapApi<ModelContextApi>({
-    getState: () => state,
-    getModelContext: () => composite.getModelContext(),
-    subscribe: (callback) => composite.subscribe(callback),
-    register: (provider) => composite.registerModelContextProvider(provider),
-  });
+export const ModelContext = resource((): ClientOutput<"modelContext"> => {
+  const [state] = tapState<ModelContextState>(
+    () => ({ version: version + 1 }) as unknown as ModelContextState,
+  );
+  const composite = tapMemo(() => new CompositeContextProvider(), []);
+
+  return {
+    state,
+    methods: {
+      getState: () => state,
+      getModelContext: () => composite.getModelContext(),
+      subscribe: (callback) => composite.subscribe(callback),
+      register: (provider) => composite.registerModelContextProvider(provider),
+    },
+  };
 });

package/src/client/NoOpComposerClient.tsx

@@ -1,11 +1,11 @@
 "use client";
 import { resource, tapMemo } from "@assistant-ui/tap";
-import type { ComposerClientState, ComposerClientApi } from "./types/Composer";
-import { tapApi } from "../utils/tap-store";
+import type { ClientOutput } from "@assistant-ui/store";
+import type { ComposerState } from "../types/scopes";
 
 export const NoOpComposerClient = resource(
-  ({ type }: { type: "edit" | "thread" }) => {
-    const state = tapMemo<ComposerClientState>(() => {
+  ({ type }: { type: "edit" | "thread" }): ClientOutput<"composer"> => {
+    const state = tapMemo<ComposerState>(() => {
       return {
         isEditing: false,
         isEmpty: true,
@@ -20,44 +20,47 @@ export const NoOpComposerClient = resource(
       };
     }, [type]);
 
-    return tapApi<ComposerClientApi>({
-      getState: () => state,
-      setText: () => {
-        throw new Error("Not supported");
+    return {
+      state,
+      methods: {
+        getState: () => state,
+        setText: () => {
+          throw new Error("Not supported");
+        },
+        setRole: () => {
+          throw new Error("Not supported");
+        },
+        setRunConfig: () => {
+          throw new Error("Not supported");
+        },
+        addAttachment: () => {
+          throw new Error("Not supported");
+        },
+        clearAttachments: () => {
+          throw new Error("Not supported");
+        },
+        attachment: () => {
+          throw new Error("Not supported");
+        },
+        reset: () => {
+          throw new Error("Not supported");
+        },
+        send: () => {
+          throw new Error("Not supported");
+        },
+        cancel: () => {
+          throw new Error("Not supported");
+        },
+        startDictation: () => {
+          throw new Error("Not supported");
+        },
+        stopDictation: () => {
+          throw new Error("Not supported");
+        },
+        beginEdit: () => {
+          throw new Error("Not supported");
+        },
       },
-      setRole: () => {
-        throw new Error("Not supported");
-      },
-      setRunConfig: () => {
-        throw new Error("Not supported");
-      },
-      addAttachment: () => {
-        throw new Error("Not supported");
-      },
-      clearAttachments: () => {
-        throw new Error("Not supported");
-      },
-      attachment: () => {
-        throw new Error("Not supported");
-      },
-      reset: () => {
-        throw new Error("Not supported");
-      },
-      send: () => {
-        throw new Error("Not supported");
-      },
-      cancel: () => {
-        throw new Error("Not supported");
-      },
-      beginEdit: () => {
-        throw new Error("Not supported");
-      },
-      startDictation: () => {
-        throw new Error("Not supported");
-      },
-      stopDictation: () => {
-        throw new Error("Not supported");
-      },
-    });
+    };
   },
 );

package/src/client/ThreadMessageClient.tsx

@@ -4,12 +4,10 @@ import {
   tapMemo,
   tapState,
   tapInlineResource,
+  withKey,
 } from "@assistant-ui/tap";
-import { AttachmentClientApi } from "./types/Attachment";
-import { MessageClientState, MessageClientApi } from "./types/Message";
-import { MessagePartClientState, MessagePartClientApi } from "./types/Part";
-import { tapLookupResources } from "./util-hooks/tapLookupResources";
-import { tapApi } from "../utils/tap-store";
+import { type ClientOutput, tapClientLookup } from "@assistant-ui/store";
+import { MessageState, PartState } from "../types/scopes";
 import {
   ThreadAssistantMessagePart,
   ThreadUserMessagePart,
@@ -19,16 +17,21 @@ import {
 import { NoOpComposerClient } from "./NoOpComposerClient";
 
 const ThreadMessagePartClient = resource(
-  ({ part }: { part: ThreadAssistantMessagePart | ThreadUserMessagePart }) => {
-    const state = tapMemo<MessagePartClientState>(() => {
+  ({
+    part,
+  }: {
+    part: ThreadAssistantMessagePart | ThreadUserMessagePart;
+  }): ClientOutput<"part"> => {
+    const state = tapMemo<PartState>(() => {
       return {
         ...part,
         status: { type: "complete" },
       };
     }, [part]);
 
-    return tapApi<MessagePartClientApi>(
-      {
+    return {
+      state,
+      methods: {
         getState: () => state,
         addToolResult: () => {
           throw new Error("Not supported");
@@ -37,28 +40,21 @@ const ThreadMessagePartClient = resource(
           throw new Error("Not supported");
         },
       },
-      {
-        key:
-          state.type === "tool-call"
-            ? `toolCallId-${state.toolCallId}`
-            : undefined,
-      },
-    );
+    };
   },
 );
+
 const ThreadMessageAttachmentClient = resource(
-  ({ attachment }: { attachment: Attachment }) => {
-    return tapApi<AttachmentClientApi>(
-      {
+  ({ attachment }: { attachment: Attachment }): ClientOutput<"attachment"> => {
+    return {
+      state: attachment,
+      methods: {
         getState: () => attachment,
         remove: () => {
           throw new Error("Not supported");
         },
       },
-      {
-        key: attachment.id,
-      },
-    );
+    };
   },
 );
 export type ThreadMessageClientProps = {
@@ -68,6 +64,7 @@ export type ThreadMessageClientProps = {
   branchNumber?: number;
   branchCount?: number;
 };
+
 export const ThreadMessageClient = resource(
   ({
     message,
@@ -75,35 +72,38 @@ export const ThreadMessageClient = resource(
     isLast = true,
     branchNumber = 1,
     branchCount = 1,
-  }: ThreadMessageClientProps) => {
+  }: ThreadMessageClientProps): ClientOutput<"message"> => {
     const [isCopiedState, setIsCopied] = tapState(false);
     const [isHoveringState, setIsHovering] = tapState(false);
 
-    const parts = tapLookupResources(
-      message.content.map((part, idx) => [
-        "toolCallId" in part && part.toolCallId != null
-          ? `toolCallId-${part.toolCallId}`
-          : `index-${idx}`,
-        ThreadMessagePartClient({ part }),
-      ]),
+    const parts = tapClientLookup(
+      () =>
+        message.content.map((part, idx) =>
+          withKey(
+            "toolCallId" in part && part.toolCallId != null
+              ? `toolCallId-${part.toolCallId}`
+              : `index-${idx}`,
+            ThreadMessagePartClient({ part }),
+          ),
+        ),
+      [message.content],
     );
 
-    const attachments = tapLookupResources(
-      message.attachments?.map((attachment) => [
-        attachment.id,
-        ThreadMessageAttachmentClient({ attachment }),
-      ]) ?? [],
+    const attachments = tapClientLookup(
+      () =>
+        (message.attachments ?? []).map((attachment) =>
+          withKey(attachment.id, ThreadMessageAttachmentClient({ attachment })),
+        ),
+      [message.attachments],
     );
 
-    const composerState = tapInlineResource(
-      NoOpComposerClient({ type: "edit" }),
-    );
+    const composer = tapInlineResource(NoOpComposerClient({ type: "edit" }));
 
-    const state = tapMemo<MessageClientState>(() => {
+    const state = tapMemo<MessageState>(() => {
       return {
         ...message,
         parts: parts.state,
-        composer: composerState.state,
+        composer: composer.state,
         parentId: null,
         index,
         isLast,
@@ -114,52 +114,65 @@ export const ThreadMessageClient = resource(
         isCopied: isCopiedState,
         isHovering: isHoveringState,
       };
-    }, [message, index, isCopiedState, isHoveringState, isLast]);
+    }, [
+      message,
+      index,
+      isCopiedState,
+      isHoveringState,
+      isLast,
+      parts.state,
+      composer.state,
+      branchNumber,
+      branchCount,
+    ]);
 
-    return tapApi<MessageClientApi>({
-      getState: () => state,
-      composer: composerState.api,
-      part: (selector) => {
-        if ("index" in selector) {
-          return parts.api({ index: selector.index });
-        } else {
-          return parts.api({ key: `toolCallId-${selector.toolCallId}` });
-        }
-      },
-      attachment: (selector) => {
-        if ("id" in selector) {
-          return attachments.api({ key: selector.id });
-        } else {
-          return attachments.api(selector);
-        }
-      },
-      reload: () => {
-        throw new Error("Not supported in ThreadMessageProvider");
-      },
-      speak: () => {
-        throw new Error("Not supported in ThreadMessageProvider");
-      },
-      stopSpeaking: () => {
-        throw new Error("Not supported in ThreadMessageProvider");
-      },
-      submitFeedback: () => {
-        throw new Error("Not supported in ThreadMessageProvider");
-      },
-      switchToBranch: () => {
-        throw new Error("Not supported in ThreadMessageProvider");
-      },
-      getCopyText: () => {
-        return message.content
-          .map((part) => {
-            if ("text" in part && typeof part.text === "string") {
-              return part.text;
-            }
-            return "";
-          })
-          .join("\n");
+    return {
+      state,
+      methods: {
+        getState: () => state,
+        composer: composer.methods,
+        part: (selector) => {
+          if ("index" in selector) {
+            return parts.get({ index: selector.index });
+          } else {
+            return parts.get({ key: `toolCallId-${selector.toolCallId}` });
+          }
+        },
+        attachment: (selector) => {
+          if ("id" in selector) {
+            return attachments.get({ key: selector.id });
+          } else {
+            return attachments.get(selector);
+          }
+        },
+        reload: () => {
+          throw new Error("Not supported in ThreadMessageProvider");
+        },
+        speak: () => {
+          throw new Error("Not supported in ThreadMessageProvider");
+        },
+        stopSpeaking: () => {
+          throw new Error("Not supported in ThreadMessageProvider");
+        },
+        submitFeedback: () => {
+          throw new Error("Not supported in ThreadMessageProvider");
+        },
+        switchToBranch: () => {
+          throw new Error("Not supported in ThreadMessageProvider");
+        },
+        getCopyText: () => {
+          return message.content
+            .map((part) => {
+              if ("text" in part && typeof part.text === "string") {
+                return part.text;
+              }
+              return "";
+            })
+            .join("\n");
+        },
+        setIsCopied,
+        setIsHovering,
       },
-      setIsCopied,
-      setIsHovering,
-    });
+    };
   },
 );

package/src/client/Tools.ts

@@ -1,77 +1,88 @@
-import { resource, tapState, tapEffect } from "@assistant-ui/tap";
-import { tapApi } from "../utils/tap-store";
-import { tapModelContext } from "./ModelContext";
-import { ToolsState, ToolsApi } from "./types/Tools";
+import { resource, tapState, tapEffect, tapCallback } from "@assistant-ui/tap";
+import { tapAssistantClientRef, type ClientOutput } from "@assistant-ui/store";
+import { ToolsState } from "../types/scopes";
 import type { Tool } from "assistant-stream";
 import { type Toolkit } from "../model-context/toolbox";
+import { ToolCallMessagePartComponent } from "../types";
 
-export const Tools = resource(({ toolkit }: { toolkit?: Toolkit }) => {
-  const [state, setState] = tapState<ToolsState>(() => ({
-    tools: {},
-  }));
+export const Tools = resource(
+  ({ toolkit }: { toolkit?: Toolkit }): ClientOutput<"tools"> => {
+    const [state, setState] = tapState<ToolsState>(() => ({
+      tools: {},
+    }));
 
-  const modelContext = tapModelContext();
+    const clientRef = tapAssistantClientRef();
 
-  tapEffect(() => {
-    if (!toolkit) return;
-    const unsubscribes: (() => void)[] = [];
+    const setToolUI = tapCallback(
+      (toolName: string, render: ToolCallMessagePartComponent) => {
+        setState((prev) => {
+          return {
+            ...prev,
+            tools: {
+              ...prev.tools,
+              [toolName]: [...(prev.tools[toolName] ?? []), render],
+            },
+          };
+        });
 
-    // Register tool UIs (exclude symbols)
-    for (const [toolName, tool] of Object.entries(toolkit)) {
-      if (tool.render) {
-        unsubscribes.push(setToolUI(toolName, tool.render));
-      }
-    }
-
-    // Register tools with model context (exclude symbols)
-    const toolsWithoutRender = Object.entries(toolkit).reduce(
-      (acc, [name, tool]) => {
-        const { render, ...rest } = tool;
-        acc[name] = rest;
-        return acc;
+        return () => {
+          setState((prev) => {
+            return {
+              ...prev,
+              tools: {
+                ...prev.tools,
+                [toolName]:
+                  prev.tools[toolName]?.filter((r) => r !== render) ?? [],
+              },
+            };
+          });
+        };
       },
-      {} as Record<string, Tool<any, any>>,
+      [],
     );
 
-    const modelContextProvider = {
-      getModelContext: () => ({
-        tools: toolsWithoutRender,
-      }),
-    };
+    tapEffect(() => {
+      if (!toolkit) return;
+      const unsubscribes: (() => void)[] = [];
 
-    unsubscribes.push(modelContext.register(modelContextProvider));
-
-    return () => {
-      unsubscribes.forEach((fn) => fn());
-    };
-  }, [toolkit, modelContext]);
+      // Register tool UIs (exclude symbols)
+      for (const [toolName, tool] of Object.entries(toolkit)) {
+        if (tool.render) {
+          unsubscribes.push(setToolUI(toolName, tool.render));
+        }
+      }
 
-  const setToolUI = (toolName: string, render: any) => {
-    setState((prev) => {
-      return {
-        ...prev,
-        tools: {
-          ...prev.tools,
-          [toolName]: [...(prev.tools[toolName] ?? []), render],
+      // Register tools with model context (exclude symbols)
+      const toolsWithoutRender = Object.entries(toolkit).reduce(
+        (acc, [name, tool]) => {
+          const { render, ...rest } = tool;
+          acc[name] = rest;
+          return acc;
         },
+        {} as Record<string, Tool<any, any>>,
+      );
+
+      const modelContextProvider = {
+        getModelContext: () => ({
+          tools: toolsWithoutRender,
+        }),
       };
-    });
 
-    return () => {
-      setState((prev) => {
-        return {
-          ...prev,
-          tools: {
-            ...prev.tools,
-            [toolName]: prev.tools[toolName]?.filter((r) => r !== render) ?? [],
-          },
-        };
-      });
-    };
-  };
+      unsubscribes.push(
+        clientRef.current!.modelContext().register(modelContextProvider),
+      );
 
-  return tapApi<ToolsApi>({
-    getState: () => state,
-    setToolUI,
-  });
-});
+      return () => {
+        unsubscribes.forEach((fn) => fn());
+      };
+    }, [toolkit, setToolUI, clientRef]);
+
+    return {
+      state,
+      methods: {
+        getState: () => state,
+        setToolUI,
+      },
+    };
+  },
+);

package/src/context/providers/AttachmentByIndexProvider.tsx

@@ -1,29 +1,22 @@
 "use client";
 
 import { type FC, type PropsWithChildren } from "react";
-
-import {
-  AssistantProvider,
-  useAssistantApi,
-  useExtendedAssistantApi,
-} from "../react/AssistantApiContext";
-import { DerivedScope } from "../../utils/tap-store/derived-scopes";
+import { useAui, AuiProvider, Derived } from "@assistant-ui/store";
 
 export const MessageAttachmentByIndexProvider: FC<
   PropsWithChildren<{
     index: number;
   }>
 > = ({ index, children }) => {
-  const baseApi = useAssistantApi();
-  const api = useExtendedAssistantApi({
-    attachment: DerivedScope({
+  const aui = useAui({
+    attachment: Derived({
       source: "message",
       query: { type: "index", index },
-      get: () => baseApi.message().attachment({ index }),
+      get: (aui) => aui.message().attachment({ index }),
     }),
   });
 
-  return <AssistantProvider api={api}>{children}</AssistantProvider>;
+  return <AuiProvider value={aui}>{children}</AuiProvider>;
 };
 
 export const ComposerAttachmentByIndexProvider: FC<
@@ -31,14 +24,13 @@ export const ComposerAttachmentByIndexProvider: FC<
     index: number;
   }>
 > = ({ index, children }) => {
-  const baseApi = useAssistantApi();
-  const api = useExtendedAssistantApi({
-    attachment: DerivedScope({
+  const aui = useAui({
+    attachment: Derived({
       source: "composer",
       query: { type: "index", index },
-      get: () => baseApi.composer().attachment({ index }),
+      get: (aui) => aui.composer().attachment({ index }),
     }),
   });
 
-  return <AssistantProvider api={api}>{children}</AssistantProvider>;
+  return <AuiProvider value={aui}>{children}</AuiProvider>;
 };