@assistant-ui/react 0.11.58 → 0.12.1

package/src/context/providers/ThreadListItemProvider.tsx

@@ -1,16 +1,9 @@
 "use client";
 
 import { type FC, type PropsWithChildren } from "react";
-import {
-  AssistantProvider,
-  useAssistantApi,
-  useExtendedAssistantApi,
-} from "../react/AssistantApiContext";
-import {
-  checkEventScope,
-  normalizeEventSelector,
-} from "../../types/EventTypes";
-import { DerivedScope } from "../../utils/tap-store/derived-scopes";
+import { useAui, AuiProvider, Derived } from "@assistant-ui/store";
+import type { ThreadListItemRuntime } from "../../legacy-runtime/runtime/ThreadListItemRuntime";
+import { ThreadListItemClient } from "../../legacy-runtime/client/ThreadListItemRuntimeClient";
 
 export const ThreadListItemByIndexProvider: FC<
   PropsWithChildren<{
@@ -18,56 +11,25 @@ export const ThreadListItemByIndexProvider: FC<
     archived: boolean;
   }>
 > = ({ index, archived, children }) => {
-  const baseApi = useAssistantApi();
-
-  const api = useExtendedAssistantApi({
-    threadListItem: DerivedScope({
+  const aui = useAui({
+    threadListItem: Derived({
       source: "threads",
       query: { type: "index", index, archived },
-      get: () => baseApi.threads().item({ index, archived }),
+      get: (aui) => aui.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 baseApi.on({ scope: "*", event }, (e) => {
-        if (e.threadId === getItem().getState().id) {
-          callback(e);
-        }
-      });
-    },
   });
 
-  return <AssistantProvider api={api}>{children}</AssistantProvider>;
+  return <AuiProvider value={aui}>{children}</AuiProvider>;
 };
 
-export const ThreadListItemByIdProvider: FC<
+export const ThreadListItemRuntimeProvider: FC<
   PropsWithChildren<{
-    id: string;
+    runtime: ThreadListItemRuntime;
   }>
-> = ({ id, children }) => {
-  const baseApi = useAssistantApi();
-
-  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 baseApi.on({ scope: "*", event }, (e) => {
-        if (e.threadId !== getItem().getState().id) return;
-        callback(e);
-      });
-    },
+> = ({ runtime, children }) => {
+  const aui = useAui({
+    threadListItem: ThreadListItemClient({ runtime }),
   });
 
-  return <AssistantProvider api={api}>{children}</AssistantProvider>;
+  return <AuiProvider value={aui}>{children}</AuiProvider>;
 };

package/src/context/providers/index.ts

@@ -1,7 +1,7 @@
 export { AssistantRuntimeProvider } from "../../legacy-runtime/AssistantRuntimeProvider";
 export {
   ThreadListItemByIndexProvider,
-  ThreadListItemByIdProvider,
+  ThreadListItemRuntimeProvider,
 } from "./ThreadListItemProvider";
 export { MessageByIndexProvider } from "./MessageByIndexProvider";
 export { PartByIndexProvider } from "./PartByIndexProvider";

package/src/context/react/index.ts

@@ -1,15 +1,4 @@
 "use client";
-// TODO createContextStoreHook does not work well with server-side nextjs bundler
-// use client necessary here for now
-
-export {
-  useAssistantApi,
-  useExtendedAssistantApi,
-  type AssistantApi,
-  type AssistantState,
-} from "./AssistantApiContext";
-export { useAssistantState } from "./hooks/useAssistantState";
-export { useAssistantEvent } from "./hooks/useAssistantEvent";
 
 export {
   useThreadViewport,
@@ -59,5 +48,3 @@ export {
   useThreadListItemRuntime,
   useThreadListItem,
 } from "../../legacy-runtime/hooks/ThreadListItemContext";
-
-export { AssistantProvider } from "./AssistantApiContext";

package/src/devtools/DevToolsHooks.ts

@@ -1,4 +1,4 @@
-import { AssistantApi } from "../context/react/AssistantApiContext";
+import { AssistantClient } from "@assistant-ui/store";
 import { Unsubscribe } from "../types";
 
 export interface EventLog {
@@ -8,7 +8,7 @@ export interface EventLog {
 }
 
 interface DevToolsApiEntry {
-  api: Partial<AssistantApi>;
+  api: Partial<AssistantClient>;
   logs: EventLog[];
 }
 
@@ -85,22 +85,22 @@ export class DevToolsHooks {
 export class DevToolsProviderApi {
   private static readonly MAX_EVENT_LOGS_PER_API = 200;
 
-  static register(api: Partial<AssistantApi>): Unsubscribe {
+  static register(aui: Partial<AssistantClient>): Unsubscribe {
     const hook = getHook();
 
     for (const entry of hook.apis.values()) {
-      if (entry.api === api) {
+      if (entry.api === aui) {
         return () => {};
       }
     }
 
     const apiId = hook.nextId++;
     const entry: DevToolsApiEntry = {
-      api,
+      api: aui,
       logs: [],
     };
 
-    const eventUnsubscribe = api.on?.("*", (e) => {
+    const eventUnsubscribe = aui.on?.("*", (e) => {
       const entry = hook.apis.get(apiId);
       if (!entry) return;
 
@@ -119,7 +119,7 @@ export class DevToolsProviderApi {
       DevToolsProviderApi.notifyListeners(apiId);
     });
 
-    const stateUnsubscribe = api.subscribe?.(() => {
+    const stateUnsubscribe = aui.subscribe?.(() => {
       DevToolsProviderApi.notifyListeners(apiId);
     });
 

package/src/index.ts

@@ -1,3 +1,21 @@
+import "./types/store-augmentation";
+
+// Re-export from @assistant-ui/store
+export {
+  useAui,
+  AuiProvider,
+  useAuiState,
+  useAuiEvent,
+  AuiIf,
+  type AssistantClient,
+  type AssistantState,
+  type AssistantEventScope,
+  type AssistantEventSelector,
+  type AssistantEventName,
+  type AssistantEventPayload,
+  type AssistantEventCallback,
+} from "@assistant-ui/store";
+
 export * from "./legacy-runtime/runtime";
 export * from "./legacy-runtime/cloud";
 export * from "./legacy-runtime/runtime-cores";
@@ -12,3 +30,27 @@ export * as INTERNAL from "./internal";
 export type { ToolExecutionStatus } from "./internal";
 
 export type { Assistant } from "./augmentations";
+
+// ============================================================================
+// Backwards compatibility - deprecated exports
+// ============================================================================
+
+/**
+ * @deprecated Use `useAui` instead. This alias will be removed in v0.13.
+ */
+export { useAui as useAssistantApi } from "@assistant-ui/store";
+
+/**
+ * @deprecated Use `useAuiState` instead. This alias will be removed in v0.13.
+ */
+export { useAuiState as useAssistantState } from "@assistant-ui/store";
+
+/**
+ * @deprecated Use `useAuiEvent` instead. This alias will be removed in v0.13.
+ */
+export { useAuiEvent as useAssistantEvent } from "@assistant-ui/store";
+
+/**
+ * @deprecated Use `AuiIf` instead. This alias will be removed in v0.13.
+ */
+export { AuiIf as AssistantIf } from "@assistant-ui/store";

package/src/legacy-runtime/AssistantRuntimeProvider.tsx

@@ -1,10 +1,7 @@
 "use client";
 
 import { FC, memo, PropsWithChildren } from "react";
-import {
-  useAssistantApi,
-  AssistantProvider,
-} from "../context/react/AssistantApiContext";
+import { useAui, AuiProvider } from "@assistant-ui/store";
 import { AssistantRuntime } from "./runtime/AssistantRuntime";
 import { AssistantRuntimeCore } from "./runtime-cores/core/AssistantRuntimeCore";
 import { RuntimeAdapter } from "./RuntimeAdapter";
@@ -26,14 +23,14 @@ const getRenderComponent = (runtime: AssistantRuntime) => {
 export const AssistantRuntimeProviderImpl: FC<
   AssistantRuntimeProvider.Props
 > = ({ children, runtime }) => {
-  const api = useAssistantApi({
+  const aui = useAui({
     threads: RuntimeAdapter(runtime),
   });
 
   const RenderComponent = getRenderComponent(runtime);
 
   return (
-    <AssistantProvider api={api}>
+    <AuiProvider value={aui}>
       {RenderComponent && <RenderComponent />}
 
       {/* TODO temporarily allow accessing viewport state from outside the viewport */}
@@ -41,7 +38,7 @@ export const AssistantRuntimeProviderImpl: FC<
       <ThreadPrimitiveViewportProvider>
         {children}
       </ThreadPrimitiveViewportProvider>
-    </AssistantProvider>
+    </AuiProvider>
   );
 };
 

package/src/legacy-runtime/RuntimeAdapter.ts

@@ -1,14 +1,22 @@
 import { resource, tapEffect, tapInlineResource } from "@assistant-ui/tap";
 import type { AssistantRuntime } from "./runtime/AssistantRuntime";
 import { ThreadListClient } from "./client/ThreadListRuntimeClient";
-import { tapModelContext } from "../client/ModelContext";
+import {
+  tapAssistantClientRef,
+  Derived,
+  attachDefaultPeers,
+} from "@assistant-ui/store";
+import { ModelContext } from "../client/ModelContextClient";
+import { Tools } from "../model-context";
 
 export const RuntimeAdapter = resource((runtime: AssistantRuntime) => {
-  const modelContext = tapModelContext();
+  const clientRef = tapAssistantClientRef();
 
   tapEffect(() => {
-    return runtime.registerModelContextProvider(modelContext);
-  }, [runtime, modelContext]);
+    return runtime.registerModelContextProvider(
+      clientRef.current!.modelContext(),
+    );
+  }, [runtime, clientRef]);
 
   return tapInlineResource(
     ThreadListClient({
@@ -17,3 +25,23 @@ export const RuntimeAdapter = resource((runtime: AssistantRuntime) => {
     }),
   );
 });
+
+attachDefaultPeers(RuntimeAdapter, {
+  modelContext: ModelContext(),
+  tools: Tools({}),
+  threadListItem: Derived({
+    source: "threads",
+    query: { type: "main" },
+    get: (aui) => aui.threads().item("main"),
+  }),
+  thread: Derived({
+    source: "threads",
+    query: { type: "main" },
+    get: (aui) => aui.threads().thread("main"),
+  }),
+  composer: Derived({
+    source: "thread",
+    query: {},
+    get: (aui) => aui.threads().thread("main").composer,
+  }),
+});

package/src/legacy-runtime/client/AttachmentRuntimeClient.ts

@@ -1,21 +1,19 @@
 import { resource } from "@assistant-ui/tap";
-import { AttachmentClientApi } from "../../client/types/Attachment";
-import { tapApi } from "../../utils/tap-store";
+import { type ClientOutput } from "@assistant-ui/store";
 import { AttachmentRuntime } from "../runtime";
 import { tapSubscribable } from "../util-hooks/tapSubscribable";
 
 export const AttachmentRuntimeClient = resource(
-  ({ runtime }: { runtime: AttachmentRuntime }) => {
+  ({ runtime }: { runtime: AttachmentRuntime }): ClientOutput<"attachment"> => {
     const state = tapSubscribable(runtime);
-    return tapApi<AttachmentClientApi>(
-      {
+
+    return {
+      state,
+      methods: {
         getState: () => state,
         remove: runtime.remove,
         __internal_getRuntime: () => runtime,
       },
-      {
-        key: state.id,
-      },
-    );
+    };
   },
 );

package/src/legacy-runtime/client/ComposerRuntimeClient.ts

@@ -4,21 +4,20 @@ import {
   tapEffect,
   tapInlineResource,
   type tapRef,
+  withKey,
 } from "@assistant-ui/tap";
+import {
+  type ClientOutput,
+  tapAssistantEmit,
+  tapClientLookup,
+} from "@assistant-ui/store";
 import {
   ComposerRuntime,
   EditComposerRuntime,
 } from "../runtime/ComposerRuntime";
 import { Unsubscribe } from "../../types";
-
-import { tapApi } from "../../utils/tap-store";
 import { ComposerRuntimeEventType } from "../runtime-cores/core/ComposerRuntimeCore";
-import { tapEvents } from "../../client/EventContext";
-import {
-  ComposerClientState,
-  ComposerClientApi,
-} from "../../client/types/Composer";
-import { tapLookupResources } from "../../client/util-hooks/tapLookupResources";
+import { ComposerState } from "../../types/scopes";
 import { AttachmentRuntimeClient } from "./AttachmentRuntimeClient";
 import { tapSubscribable } from "../util-hooks/tapSubscribable";
 
@@ -46,9 +45,9 @@ export const ComposerClient = resource(
     threadIdRef: tapRef.RefObject<string>;
     messageIdRef?: tapRef.RefObject<string>;
     runtime: ComposerRuntime;
-  }) => {
+  }): ClientOutput<"composer"> => {
     const runtimeState = tapSubscribable(runtime);
-    const events = tapEvents();
+    const emit = tapAssistantEmit();
 
     // Bind composer events to event manager
     tapEffect(() => {
@@ -57,12 +56,12 @@ export const ComposerClient = resource(
       // Subscribe to composer events
       const composerEvents: ComposerRuntimeEventType[] = [
         "send",
-        "attachment-add",
+        "attachmentAdd",
       ];
 
       for (const event of composerEvents) {
         const unsubscribe = runtime.unstable_on(event, () => {
-          events.emit(`composer.${event}`, {
+          emit(`composer.${event}`, {
             threadId: threadIdRef.current,
             ...(messageIdRef && { messageId: messageIdRef.current }),
           });
@@ -73,16 +72,23 @@ export const ComposerClient = resource(
       return () => {
         for (const unsub of unsubscribers) unsub();
       };
-    }, [runtime, events, threadIdRef, messageIdRef]);
-
-    const attachments = tapLookupResources(
-      runtimeState.attachments.map((attachment, idx) => [
-        attachment.id,
-        ComposerAttachmentClientByIndex({ runtime: runtime, index: idx }),
-      ]),
+    }, [runtime, emit, threadIdRef, messageIdRef]);
+
+    const attachments = tapClientLookup(
+      () =>
+        runtimeState.attachments.map((attachment, idx) =>
+          withKey(
+            attachment.id,
+            ComposerAttachmentClientByIndex({
+              runtime,
+              index: idx,
+            }),
+          ),
+        ),
+      [runtimeState.attachments, runtime],
     );
 
-    const state = tapMemo<ComposerClientState>(() => {
+    const state = tapMemo<ComposerState>(() => {
       return {
         text: runtimeState.text,
         role: runtimeState.role,
@@ -97,36 +103,34 @@ export const ComposerClient = resource(
       };
     }, [runtimeState, attachments.state]);
 
-    return tapApi<ComposerClientApi>({
-      getState: () => state,
-
-      setText: runtime.setText,
-      setRole: runtime.setRole,
-      setRunConfig: runtime.setRunConfig,
-      addAttachment: runtime.addAttachment,
-      reset: runtime.reset,
-
-      clearAttachments: runtime.clearAttachments,
-      send: runtime.send,
-      cancel: runtime.cancel,
-      beginEdit:
-        (runtime as EditComposerRuntime).beginEdit ??
-        (() => {
-          throw new Error("beginEdit is not supported in this runtime");
-        }),
-
-      startDictation: runtime.startDictation,
-      stopDictation: runtime.stopDictation,
-
-      attachment: (selector) => {
-        if ("id" in selector) {
-          return attachments.api({ key: selector.id });
-        } else {
-          return attachments.api(selector);
-        }
+    return {
+      state,
+      methods: {
+        getState: () => state,
+        setText: runtime.setText,
+        setRole: runtime.setRole,
+        setRunConfig: runtime.setRunConfig,
+        addAttachment: runtime.addAttachment,
+        reset: runtime.reset,
+        clearAttachments: runtime.clearAttachments,
+        send: runtime.send,
+        cancel: runtime.cancel,
+        beginEdit:
+          (runtime as EditComposerRuntime).beginEdit ??
+          (() => {
+            throw new Error("beginEdit is not supported in this runtime");
+          }),
+        startDictation: runtime.startDictation,
+        stopDictation: runtime.stopDictation,
+        attachment: (selector) => {
+          if ("id" in selector) {
+            return attachments.get({ key: selector.id });
+          } else {
+            return attachments.get(selector);
+          }
+        },
+        __internal_getRuntime: () => runtime,
       },
-
-      __internal_getRuntime: () => runtime,
-    });
+    };
   },
 );

package/src/legacy-runtime/client/MessagePartRuntimeClient.ts

@@ -1,25 +1,20 @@
 import { resource } from "@assistant-ui/tap";
-import { tapApi } from "../../utils/tap-store";
+import { type ClientOutput } from "@assistant-ui/store";
 import { MessagePartRuntime } from "../runtime/MessagePartRuntime";
 import { tapSubscribable } from "../util-hooks/tapSubscribable";
-import { MessagePartClientApi } from "../../client/types/Part";
-export const MessagePartClient = resource(
-  ({ runtime }: { runtime: MessagePartRuntime }) => {
-    const runtimeState = tapSubscribable(runtime);
 
-    const api: MessagePartClientApi = {
-      getState: () => runtimeState,
+export const MessagePartClient = resource(
+  ({ runtime }: { runtime: MessagePartRuntime }): ClientOutput<"part"> => {
+    const state = tapSubscribable(runtime);
 
-      addToolResult: (result) => runtime.addToolResult(result),
-      resumeToolCall: (payload) => runtime.resumeToolCall(payload),
-      __internal_getRuntime: () => runtime,
+    return {
+      state,
+      methods: {
+        getState: () => state,
+        addToolResult: (result) => runtime.addToolResult(result),
+        resumeToolCall: (payload) => runtime.resumeToolCall(payload),
+        __internal_getRuntime: () => runtime,
+      },
     };
-
-    return tapApi<MessagePartClientApi>(api, {
-      key:
-        runtimeState.type === "tool-call"
-          ? `toolCallId-${runtimeState.toolCallId}`
-          : undefined,
-    });
   },
 );

package/src/legacy-runtime/client/MessageRuntimeClient.ts

@@ -1,20 +1,21 @@
 import {
+  withKey,
   resource,
   tapInlineResource,
   tapMemo,
   tapState,
 } from "@assistant-ui/tap";
-import { tapApi } from "../../utils/tap-store";
+import {
+  type ClientOutput,
+  tapClientLookup,
+  tapClientResource,
+} from "@assistant-ui/store";
 import { MessageRuntime } from "../runtime/MessageRuntime";
 import { tapSubscribable } from "../util-hooks/tapSubscribable";
 import { ComposerClient } from "./ComposerRuntimeClient";
 import { MessagePartClient } from "./MessagePartRuntimeClient";
-import { tapLookupResources } from "../../client/util-hooks/tapLookupResources";
 import { RefObject } from "react";
-import {
-  MessageClientState,
-  MessageClientApi,
-} from "../../client/types/Message";
+import { MessageState } from "../../types/scopes";
 import { AttachmentRuntimeClient } from "./AttachmentRuntimeClient";
 
 const MessageAttachmentClientByIndex = resource(
@@ -46,7 +47,7 @@ export const MessageClient = resource(
   }: {
     runtime: MessageRuntime;
     threadIdRef: RefObject<string>;
-  }) => {
+  }): ClientOutput<"message"> => {
     const runtimeState = tapSubscribable(runtime);
 
     const [isCopiedState, setIsCopied] = tapState(false);
@@ -61,7 +62,7 @@ export const MessageClient = resource(
       [runtime],
     );
 
-    const composer = tapInlineResource(
+    const composer = tapClientResource(
       ComposerClient({
         runtime: runtime.composer,
         threadIdRef,
@@ -69,25 +70,33 @@ export const MessageClient = resource(
       }),
     );
 
-    const parts = tapLookupResources(
-      runtimeState.content.map((part, idx) => [
-        "toolCallId" in part && part.toolCallId != null
-          ? `toolCallId-${part.toolCallId}`
-          : `index-${idx}`,
-        MessagePartByIndex({ runtime, index: idx }),
-      ]),
+    const parts = tapClientLookup(
+      () =>
+        runtimeState.content.map((part, idx) =>
+          withKey(
+            "toolCallId" in part && part.toolCallId != null
+              ? `toolCallId-${part.toolCallId}`
+              : `index-${idx}`,
+            MessagePartByIndex({ runtime, index: idx }),
+          ),
+        ),
+      [runtimeState.content, runtime],
     );
 
-    const attachments = tapLookupResources(
-      runtimeState.attachments?.map((attachment, idx) => [
-        attachment.id,
-        MessageAttachmentClientByIndex({ runtime, index: idx }),
-      ]) ?? [],
+    const attachments = tapClientLookup(
+      () =>
+        (runtimeState.attachments ?? []).map((attachment, idx) =>
+          withKey(
+            attachment.id,
+            MessageAttachmentClientByIndex({ runtime, index: idx }),
+          ),
+        ),
+      [runtimeState.attachments, runtime],
     );
 
-    const state = tapMemo<MessageClientState>(() => {
+    const state = tapMemo<MessageState>(() => {
       return {
-        ...(runtimeState as MessageClientState),
+        ...(runtimeState as MessageState),
 
         parts: parts.state,
         composer: composer.state,
@@ -103,11 +112,12 @@ export const MessageClient = resource(
       isHoveringState,
     ]);
 
-    return tapApi<MessageClientApi>(
-      {
+    return {
+      state,
+      methods: {
         getState: () => state,
 
-        composer: composer.api,
+        composer: composer.methods,
 
         reload: (config) => runtime.reload(config),
         speak: () => runtime.speak(),
@@ -115,20 +125,19 @@ export const MessageClient = resource(
         submitFeedback: (feedback) => runtime.submitFeedback(feedback),
         switchToBranch: (options) => runtime.switchToBranch(options),
         getCopyText: () => runtime.unstable_getCopyText(),
-
         part: (selector) => {
           if ("index" in selector) {
-            return parts.api({ index: selector.index });
+            return parts.get({ index: selector.index });
           } else {
-            return parts.api({ key: `toolCallId-${selector.toolCallId}` });
+            return parts.get({ key: `toolCallId-${selector.toolCallId}` });
           }
         },
 
         attachment: (selector) => {
           if ("id" in selector) {
-            return attachments.api({ key: selector.id });
+            return attachments.get({ key: selector.id });
           } else {
-            return attachments.api(selector);
+            return attachments.get(selector);
           }
         },
 
@@ -137,9 +146,6 @@ export const MessageClient = resource(
 
         __internal_getRuntime: () => runtime,
       },
-      {
-        key: runtimeState.id,
-      },
-    );
+    };
   },
 );