@assistant-ui/react 0.11.57 → 0.12.0

package/src/context/providers/MessageByIndexProvider.tsx

@@ -1,50 +1,25 @@
 "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";
 
 export const MessageByIndexProvider: FC<
   PropsWithChildren<{
     index: number;
   }>
 > = ({ index, children }) => {
-  const baseApi = useAssistantApi();
-  const api = useExtendedAssistantApi({
-    message: DerivedScope({
+  const aui = useAui({
+    message: Derived({
       source: "thread",
       query: { type: "index", index },
-      get: () => baseApi.thread().message({ index }),
+      get: (aui) => aui.thread().message({ index }),
     }),
-    composer: DerivedScope({
+    composer: Derived({
       source: "message",
       query: {},
-      get: () => baseApi.thread().message({ index }).composer,
+      get: (aui) => aui.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 baseApi.on({ scope: "thread", event }, (e) => {
-        if (e.messageId === getMessage().getState().id) {
-          callback(e);
-        }
-      });
-    },
   });
 
-  return <AssistantProvider api={api}>{children}</AssistantProvider>;
+  return <AuiProvider value={aui}>{children}</AuiProvider>;
 };

package/src/context/providers/MessageProvider.tsx

@@ -1,30 +1,18 @@
 "use client";
 
 import { type FC, type PropsWithChildren } from "react";
-import {
-  AssistantProvider,
-  useExtendedAssistantApi,
-} from "../react/AssistantApiContext";
-import { useResource } from "@assistant-ui/tap/react";
-import { asStore } from "../../utils/tap-store";
+import { useAui, AuiProvider } from "@assistant-ui/store";
 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 = useExtendedAssistantApi({
-    message: DerivedScope({
-      source: "root",
-      query: {},
-      get: () => store.getState().api,
-    }),
-    subscribe: store.subscribe,
+  const aui = useAui({
+    message: ThreadMessageClient(props),
   });
 
-  return <AssistantProvider api={api}>{children}</AssistantProvider>;
+  return <AuiProvider value={aui}>{children}</AuiProvider>;
 };

package/src/context/providers/PartByIndexProvider.tsx

@@ -1,26 +1,20 @@
 "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 PartByIndexProvider: FC<
   PropsWithChildren<{
     index: number;
   }>
 > = ({ index, children }) => {
-  const baseApi = useAssistantApi();
-  const api = useExtendedAssistantApi({
-    part: DerivedScope({
+  const aui = useAui({
+    part: Derived({
       source: "message",
       query: { type: "index", index },
-      get: () => baseApi.message().part({ index }),
+      get: (aui) => aui.message().part({ index }),
     }),
   });
 
-  return <AssistantProvider api={api}>{children}</AssistantProvider>;
+  return <AuiProvider value={aui}>{children}</AuiProvider>;
 };

package/src/context/providers/TextMessagePartProvider.tsx

@@ -1,22 +1,19 @@
 "use client";
 
 import { type FC, type PropsWithChildren } from "react";
-import {
-  AssistantProvider,
-  useExtendedAssistantApi,
-} from "../react/AssistantApiContext";
-import {
-  MessagePartClientApi,
-  MessagePartClientState,
-} from "../../client/types/Part";
+import { useAui, AuiProvider, type ClientOutput } from "@assistant-ui/store";
+import { PartState } from "../../types/scopes";
 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 }) => {
-    const state = tapMemo<MessagePartClientState>(
+  ({
+    text,
+    isRunning,
+  }: {
+    text: string;
+    isRunning: boolean;
+  }): ClientOutput<"part"> => {
+    const state = tapMemo<PartState>(
       () => ({
         type: "text",
         text,
@@ -25,15 +22,18 @@ const TextMessagePartClient = resource(
       [text, isRunning],
     );
 
-    return tapApi<MessagePartClientApi>({
-      getState: () => state,
-      addToolResult: () => {
-        throw new Error("Not supported");
-      },
-      resumeToolCall: () => {
-        throw new Error("Not supported");
+    return {
+      state,
+      methods: {
+        getState: () => state,
+        addToolResult: () => {
+          throw new Error("Not supported");
+        },
+        resumeToolCall: () => {
+          throw new Error("Not supported");
+        },
       },
-    });
+    };
   },
 );
 
@@ -43,17 +43,9 @@ export const TextMessagePartProvider: FC<
     isRunning?: boolean;
   }>
 > = ({ text, isRunning = false, children }) => {
-  const store = useResource(
-    asStore(TextMessagePartClient({ text, isRunning })),
-  );
-  const api = useExtendedAssistantApi({
-    part: DerivedScope({
-      source: "root",
-      query: {},
-      get: () => store.getState().api,
-    }),
-    subscribe: store.subscribe,
+  const aui = useAui({
+    part: TextMessagePartClient({ text, isRunning }),
   });
 
-  return <AssistantProvider api={api}>{children}</AssistantProvider>;
+  return <AuiProvider value={aui}>{children}</AuiProvider>;
 };

package/src/context/providers/ThreadListItemProvider.tsx

@@ -1,16 +1,7 @@
 "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";
 
 export const ThreadListItemByIndexProvider: FC<
   PropsWithChildren<{
@@ -18,29 +9,15 @@ 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<
@@ -48,26 +25,13 @@ export const ThreadListItemByIdProvider: FC<
     id: string;
   }>
 > = ({ id, children }) => {
-  const baseApi = useAssistantApi();
-
-  const api = useExtendedAssistantApi({
-    threadListItem: DerivedScope({
+  const aui = useAui({
+    threadListItem: Derived({
       source: "threads",
       query: { type: "id", id },
-      get: () => baseApi.threads().item({ id }),
+      get: (aui) => aui.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);
-      });
-    },
   });
 
-  return <AssistantProvider api={api}>{children}</AssistantProvider>;
+  return <AuiProvider value={aui}>{children}</AuiProvider>;
 };

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,
-      },
-    );
+    };
   },
 );