@assistant-ui/react 0.11.35 → 0.11.37

package/src/client/Tools.ts

@@ -0,0 +1,68 @@
+import { resource, tapState, tapEffect } from "@assistant-ui/tap";
+import { tapApi } from "../utils/tap-store";
+import { tapModelContext } from "./ModelContext";
+import { tapToolUI } from "./ToolUIContext";
+import { ToolsState, ToolsApi } from "./types/Tools";
+import type { Tool } from "assistant-stream";
+import {
+  type Toolkit,
+  FallbackSymbol,
+  LayoutSymbol,
+} from "../model-context/toolbox";
+
+export const Tools = resource(({ toolkit }: { toolkit?: Toolkit }) => {
+  const [state] = tapState<ToolsState>(() => ({}));
+
+  const modelContext = tapModelContext();
+  const toolUI = tapToolUI();
+
+  tapEffect(() => {
+    if (!toolkit) return;
+    const unsubscribes: (() => void)[] = [];
+
+    // Register fallback UI
+    const fallback = toolkit[FallbackSymbol];
+    if (fallback?.render) {
+      unsubscribes.push(toolUI.setFallbackToolUI(fallback.render));
+    }
+
+    // Register layout
+    const layout = toolkit[LayoutSymbol];
+    if (layout?.render) {
+      unsubscribes.push(toolUI.setToolUILayout(layout.render));
+    }
+
+    // Register tool UIs (exclude symbols)
+    for (const [toolName, tool] of Object.entries(toolkit)) {
+      if (tool.render) {
+        unsubscribes.push(toolUI.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;
+      },
+      {} as Record<string, Tool<any, any>>,
+    );
+
+    const modelContextProvider = {
+      getModelContext: () => ({
+        tools: toolsWithoutRender,
+      }),
+    };
+
+    unsubscribes.push(modelContext.register(modelContextProvider));
+
+    return () => {
+      unsubscribes.forEach((fn) => fn());
+    };
+  }, [toolkit, modelContext, toolUI]);
+
+  return tapApi<ToolsApi>({
+    getState: () => state,
+  });
+});

package/src/client/types/ModelContext.ts

@@ -0,0 +1,15 @@
+import type { Unsubscribe } from "@assistant-ui/tap";
+import type { ModelContextProvider } from "../../model-context/ModelContextTypes";
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export type ModelContextState = {};
+
+export type ModelContextApi = ModelContextProvider & {
+  getState(): ModelContextState;
+  register: (provider: ModelContextProvider) => Unsubscribe;
+};
+
+export type ModelContextMeta = {
+  source: "root";
+  query: Record<string, never>;
+};

package/src/client/types/ThreadList.ts

@@ -3,6 +3,7 @@ import {
   ThreadListItemClientApi,
 } from "./ThreadListItem";
 import { ThreadClientApi, ThreadClientState } from "./Thread";
+import type { AssistantRuntime } from "../../legacy-runtime/runtime/AssistantRuntime";
 
 export type ThreadListClientState = {
   readonly mainThreadId: string;
@@ -29,4 +30,7 @@ export type ThreadListClientApi = {
   ): ThreadListItemClientApi;
 
   thread(selector: "main"): ThreadClientApi;
+
+  /** @internal */
+  __internal_getAssistantRuntime?(): AssistantRuntime;
 };

package/src/client/types/ToolUI.ts

@@ -1,7 +1,12 @@
 import { Unsubscribe } from "@assistant-ui/tap";
+import type { ComponentType, ReactNode } from "react";
 import { ToolCallMessagePartComponent } from "../../types";
 
-export type ToolUIState = Record<string, ToolCallMessagePartComponent[]>;
+export type ToolUIState = {
+  tools: Record<string, ToolCallMessagePartComponent[]>;
+  fallback: ToolCallMessagePartComponent[];
+  layout: ComponentType<{ children: ReactNode }>[];
+};
 
 export type ToolUIApi = {
   getState(): ToolUIState;
@@ -10,6 +15,10 @@ export type ToolUIApi = {
     toolName: string,
     render: ToolCallMessagePartComponent,
   ): Unsubscribe;
+
+  setFallbackToolUI(render: ToolCallMessagePartComponent): Unsubscribe;
+
+  setToolUILayout(render: ComponentType<{ children: ReactNode }>): Unsubscribe;
 };
 
 export type ToolUIMeta = {

package/src/client/types/Tools.ts

@@ -0,0 +1,11 @@
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export type ToolsState = {};
+
+export type ToolsApi = {
+  getState(): ToolsState;
+};
+
+export type ToolsMeta = {
+  source: "root";
+  query: Record<string, never>;
+};

package/src/context/providers/AttachmentByIndexProvider.tsx

@@ -1,31 +1,29 @@
 "use client";
 
-import { useMemo, type FC, type PropsWithChildren } from "react";
+import { type FC, type PropsWithChildren } from "react";
 
 import {
-  AssistantApi,
   AssistantProvider,
   useAssistantApi,
-  createAssistantApiField,
+  useExtendedAssistantApi,
 } from "../react/AssistantApiContext";
+import { DerivedScope } from "../../utils/tap-store/derived-scopes";
 
 export const MessageAttachmentByIndexProvider: FC<
   PropsWithChildren<{
     index: number;
   }>
 > = ({ index, children }) => {
-  const api = useAssistantApi();
-  const api2 = useMemo(() => {
-    return {
-      attachment: createAssistantApiField({
-        source: "message",
-        query: { type: "index", index },
-        get: () => api.message().attachment({ index }),
-      }),
-    } satisfies Partial<AssistantApi>;
-  }, [api, index]);
+  const baseApi = useAssistantApi();
+  const api = useExtendedAssistantApi({
+    attachment: DerivedScope({
+      source: "message",
+      query: { type: "index", index },
+      get: () => baseApi.message().attachment({ index }),
+    }),
+  });
 
-  return <AssistantProvider api={api2}>{children}</AssistantProvider>;
+  return <AssistantProvider api={api}>{children}</AssistantProvider>;
 };
 
 export const ComposerAttachmentByIndexProvider: FC<
@@ -33,16 +31,14 @@ export const ComposerAttachmentByIndexProvider: FC<
     index: number;
   }>
 > = ({ index, children }) => {
-  const api = useAssistantApi();
-  const api2 = useMemo(() => {
-    return {
-      attachment: createAssistantApiField({
-        source: "composer",
-        query: { type: "index", index },
-        get: () => api.composer().attachment({ index }),
-      }),
-    } satisfies Partial<AssistantApi>;
-  }, [api, index]);
+  const baseApi = useAssistantApi();
+  const api = useExtendedAssistantApi({
+    attachment: DerivedScope({
+      source: "composer",
+      query: { type: "index", index },
+      get: () => baseApi.composer().attachment({ index }),
+    }),
+  });
 
-  return <AssistantProvider api={api2}>{children}</AssistantProvider>;
+  return <AssistantProvider api={api}>{children}</AssistantProvider>;
 };

package/src/context/providers/MessageByIndexProvider.tsx

@@ -1,52 +1,50 @@
 "use client";
 
-import { useMemo, type FC, type PropsWithChildren } from "react";
+import { type FC, type PropsWithChildren } from "react";
 import {
-  AssistantApi,
   AssistantProvider,
   useAssistantApi,
-  createAssistantApiField,
+  useExtendedAssistantApi,
 } from "../react/AssistantApiContext";
 import {
   checkEventScope,
   normalizeEventSelector,
 } from "../../types/EventTypes";
+import { DerivedScope } from "../../utils/tap-store/derived-scopes";
 
 export const MessageByIndexProvider: FC<
   PropsWithChildren<{
     index: number;
   }>
 > = ({ index, children }) => {
-  const api = useAssistantApi();
-  const api2 = useMemo(() => {
-    const getMessage = () => api.thread().message({ index });
-    return {
-      message: createAssistantApiField({
-        source: "thread",
-        query: { type: "index", index },
-        get: () => getMessage(),
-      }),
-      composer: createAssistantApiField({
-        source: "message",
-        query: {},
-        get: () => getMessage().composer,
-      }),
-      on(selector, callback) {
-        const { event, scope } = normalizeEventSelector(selector);
-        if (
-          !checkEventScope("composer", scope, event) &&
-          !checkEventScope("message", scope, event)
-        )
-          return api.on(selector, callback);
+  const baseApi = useAssistantApi();
+  const api = useExtendedAssistantApi({
+    message: DerivedScope({
+      source: "thread",
+      query: { type: "index", index },
+      get: () => baseApi.thread().message({ index }),
+    }),
+    composer: DerivedScope({
+      source: "message",
+      query: {},
+      get: () => baseApi.thread().message({ index }).composer,
+    }),
+    on(selector, callback) {
+      const getMessage = () => baseApi.thread().message({ index });
+      const { event, scope } = normalizeEventSelector(selector);
+      if (
+        !checkEventScope("composer", scope, event) &&
+        !checkEventScope("message", scope, event)
+      )
+        return baseApi.on(selector, callback);
 
-        return api.on({ scope: "thread", event }, (e) => {
-          if (e.messageId === getMessage().getState().id) {
-            callback(e);
-          }
-        });
-      },
-    } satisfies Partial<AssistantApi>;
-  }, [api, index]);
+      return baseApi.on({ scope: "thread", event }, (e) => {
+        if (e.messageId === getMessage().getState().id) {
+          callback(e);
+        }
+      });
+    },
+  });
 
-  return <AssistantProvider api={api2}>{children}</AssistantProvider>;
+  return <AssistantProvider api={api}>{children}</AssistantProvider>;
 };

package/src/context/providers/MessageProvider.tsx

@@ -1,10 +1,9 @@
 "use client";
 
-import { useMemo, type FC, type PropsWithChildren } from "react";
+import { type FC, type PropsWithChildren } from "react";
 import {
   AssistantProvider,
-  AssistantApi,
-  createAssistantApiField,
+  useExtendedAssistantApi,
 } from "../react/AssistantApiContext";
 import { useResource } from "@assistant-ui/tap/react";
 import { asStore } from "../../utils/tap-store";
@@ -12,22 +11,21 @@ import {
   ThreadMessageClientProps,
   ThreadMessageClient,
 } from "../../client/ThreadMessageClient";
+import { DerivedScope } from "../../utils/tap-store/derived-scopes";
 
 export const MessageProvider: FC<
   PropsWithChildren<ThreadMessageClientProps>
 > = ({ children, ...props }) => {
   const store = useResource(asStore(ThreadMessageClient(props)));
-  const api = useMemo(() => {
-    return {
-      message: createAssistantApiField({
-        source: "root",
-        query: {},
-        get: () => store.getState().api,
-      }),
-      subscribe: store.subscribe,
-      flushSync: store.flushSync,
-    } satisfies Partial<AssistantApi>;
-  }, [store]);
+  const api = useExtendedAssistantApi({
+    message: DerivedScope({
+      source: "root",
+      query: {},
+      get: () => store.getState().api,
+    }),
+    subscribe: store.subscribe,
+    flushSync: store.flushSync,
+  });
 
   return <AssistantProvider api={api}>{children}</AssistantProvider>;
 };

package/src/context/providers/PartByIndexProvider.tsx

@@ -1,28 +1,26 @@
 "use client";
 
-import { useMemo, type FC, type PropsWithChildren } from "react";
+import { type FC, type PropsWithChildren } from "react";
 import {
-  AssistantApi,
   AssistantProvider,
   useAssistantApi,
-  createAssistantApiField,
+  useExtendedAssistantApi,
 } from "../react/AssistantApiContext";
+import { DerivedScope } from "../../utils/tap-store/derived-scopes";
 
 export const PartByIndexProvider: FC<
   PropsWithChildren<{
     index: number;
   }>
 > = ({ index, children }) => {
-  const api = useAssistantApi();
-  const api2 = useMemo(() => {
-    return {
-      part: createAssistantApiField({
-        source: "message",
-        query: { type: "index", index },
-        get: () => api.message().part({ index }),
-      }),
-    } satisfies Partial<AssistantApi>;
-  }, [api, index]);
+  const baseApi = useAssistantApi();
+  const api = useExtendedAssistantApi({
+    part: DerivedScope({
+      source: "message",
+      query: { type: "index", index },
+      get: () => baseApi.message().part({ index }),
+    }),
+  });
 
-  return <AssistantProvider api={api2}>{children}</AssistantProvider>;
+  return <AssistantProvider api={api}>{children}</AssistantProvider>;
 };

package/src/context/providers/TextMessagePartProvider.tsx

@@ -1,10 +1,9 @@
 "use client";
 
-import { useMemo, type FC, type PropsWithChildren } from "react";
+import { type FC, type PropsWithChildren } from "react";
 import {
   AssistantProvider,
-  AssistantApi,
-  createAssistantApiField,
+  useExtendedAssistantApi,
 } from "../react/AssistantApiContext";
 import {
   MessagePartClientApi,
@@ -13,6 +12,7 @@ import {
 import { resource, tapMemo } from "@assistant-ui/tap";
 import { useResource } from "@assistant-ui/tap/react";
 import { asStore, tapApi } from "../../utils/tap-store";
+import { DerivedScope } from "../../utils/tap-store/derived-scopes";
 
 const TextMessagePartClient = resource(
   ({ text, isRunning }: { text: string; isRunning: boolean }) => {
@@ -46,17 +46,15 @@ export const TextMessagePartProvider: FC<
   const store = useResource(
     asStore(TextMessagePartClient({ text, isRunning })),
   );
-  const api = useMemo(() => {
-    return {
-      part: createAssistantApiField({
-        source: "root",
-        query: {},
-        get: () => store.getState().api,
-      }),
-      subscribe: store.subscribe,
-      flushSync: store.flushSync,
-    } satisfies Partial<AssistantApi>;
-  }, [store]);
+  const api = useExtendedAssistantApi({
+    part: DerivedScope({
+      source: "root",
+      query: {},
+      get: () => store.getState().api,
+    }),
+    subscribe: store.subscribe,
+    flushSync: store.flushSync,
+  });
 
   return <AssistantProvider api={api}>{children}</AssistantProvider>;
 };

package/src/context/providers/ThreadListItemProvider.tsx

@@ -1,16 +1,16 @@
 "use client";
 
-import { useMemo, type FC, type PropsWithChildren } from "react";
+import { type FC, type PropsWithChildren } from "react";
 import {
-  AssistantApi,
   AssistantProvider,
   useAssistantApi,
-  createAssistantApiField,
+  useExtendedAssistantApi,
 } from "../react/AssistantApiContext";
 import {
   checkEventScope,
   normalizeEventSelector,
 } from "../../types/EventTypes";
+import { DerivedScope } from "../../utils/tap-store/derived-scopes";
 
 export const ThreadListItemByIndexProvider: FC<
   PropsWithChildren<{
@@ -18,31 +18,29 @@ export const ThreadListItemByIndexProvider: FC<
     archived: boolean;
   }>
 > = ({ index, archived, children }) => {
-  const api = useAssistantApi();
+  const baseApi = useAssistantApi();
 
-  const api2 = useMemo(() => {
-    const getItem = () => api.threads().item({ index, archived });
-    return {
-      threadListItem: createAssistantApiField({
-        source: "threads",
-        query: { type: "index", index, archived },
-        get: () => getItem(),
-      }),
-      on(selector, callback) {
-        const { event, scope } = normalizeEventSelector(selector);
-        if (!checkEventScope("thread-list-item", scope, event))
-          return api.on(selector, callback);
+  const api = useExtendedAssistantApi({
+    threadListItem: DerivedScope({
+      source: "threads",
+      query: { type: "index", index, archived },
+      get: () => baseApi.threads().item({ index, archived }),
+    }),
+    on(selector, callback) {
+      const getItem = () => baseApi.threads().item({ index, archived });
+      const { event, scope } = normalizeEventSelector(selector);
+      if (!checkEventScope("thread-list-item", scope, event))
+        return baseApi.on(selector, callback);
 
-        return api.on({ scope: "*", event }, (e) => {
-          if (e.threadId === getItem().getState().id) {
-            callback(e);
-          }
-        });
-      },
-    } satisfies Partial<AssistantApi>;
-  }, [api, index, archived]);
+      return baseApi.on({ scope: "*", event }, (e) => {
+        if (e.threadId === getItem().getState().id) {
+          callback(e);
+        }
+      });
+    },
+  });
 
-  return <AssistantProvider api={api2}>{children}</AssistantProvider>;
+  return <AssistantProvider api={api}>{children}</AssistantProvider>;
 };
 
 export const ThreadListItemByIdProvider: FC<
@@ -50,28 +48,26 @@ export const ThreadListItemByIdProvider: FC<
     id: string;
   }>
 > = ({ id, children }) => {
-  const api = useAssistantApi();
+  const baseApi = useAssistantApi();
 
-  const api2 = useMemo(() => {
-    const getItem = () => api.threads().item({ id });
-    return {
-      threadListItem: createAssistantApiField({
-        source: "threads",
-        query: { type: "id", id },
-        get: () => getItem(),
-      }),
-      on(selector, callback) {
-        const { event, scope } = normalizeEventSelector(selector);
-        if (!checkEventScope("thread-list-item", scope, event))
-          return api.on(selector, callback);
+  const api = useExtendedAssistantApi({
+    threadListItem: DerivedScope({
+      source: "threads",
+      query: { type: "id", id },
+      get: () => baseApi.threads().item({ id }),
+    }),
+    on(selector, callback) {
+      const getItem = () => baseApi.threads().item({ id });
+      const { event, scope } = normalizeEventSelector(selector);
+      if (!checkEventScope("thread-list-item", scope, event))
+        return baseApi.on(selector, callback);
 
-        return api.on({ scope: "*", event }, (e) => {
-          if (e.threadId !== getItem().getState().id) return;
-          callback(e);
-        });
-      },
-    } satisfies Partial<AssistantApi>;
-  }, [api, id]);
+      return baseApi.on({ scope: "*", event }, (e) => {
+        if (e.threadId !== getItem().getState().id) return;
+        callback(e);
+      });
+    },
+  });
 
-  return <AssistantProvider api={api2}>{children}</AssistantProvider>;
+  return <AssistantProvider api={api}>{children}</AssistantProvider>;
 };