@assistant-ui/react 0.10.50 → 0.11.0

package/src/context/providers/ThreadListItemProvider.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import { useMemo, type FC, type PropsWithChildren } from "react";
+import {
+  AssistantApi,
+  AssistantApiProvider,
+  useAssistantApi,
+  createAssistantApiField,
+} from "../react/AssistantApiContext";
+import { AssistantEventSelector, AssistantEvents } from "../../types";
+import { Unsubscribe } from "@assistant-ui/tap";
+import {
+  checkEventScope,
+  normalizeEventSelector,
+} from "../../types/EventTypes";
+
+export const ThreadListItemByIndexProvider: FC<
+  PropsWithChildren<{
+    index: number;
+    archived: boolean;
+  }>
+> = ({ index, archived, children }) => {
+  const api = useAssistantApi();
+
+  const api2 = useMemo(() => {
+    const getItem = () => api.threads().item({ index, archived });
+    return {
+      threadListItem: createAssistantApiField({
+        source: "threads",
+        query: { type: "index", index, archived },
+        get: () => getItem(),
+      }),
+      on<TEvent extends keyof AssistantEvents>(
+        selector: AssistantEventSelector<TEvent>,
+        callback: (e: AssistantEvents[TEvent]) => void,
+      ): Unsubscribe {
+        const { event, scope } = normalizeEventSelector(selector);
+        if (scope !== "thread-list-item") return api.on(selector, callback);
+
+        return api.on({ scope: "*", event }, (e: AssistantEvents[TEvent]) => {
+          if (e.threadId === getItem().getState().id) {
+            callback(e);
+          }
+        });
+      },
+    } satisfies Partial<AssistantApi>;
+  }, [api, index, archived]);
+
+  return <AssistantApiProvider api={api2}>{children}</AssistantApiProvider>;
+};
+
+export const ThreadListItemByIdProvider: FC<
+  PropsWithChildren<{
+    id: string;
+  }>
+> = ({ id, children }) => {
+  const api = useAssistantApi();
+
+  const api2 = useMemo(() => {
+    const getItem = () => api.threads().item({ id });
+    return {
+      threadListItem: createAssistantApiField({
+        source: "threads",
+        query: { type: "id", id },
+        get: () => getItem(),
+      }),
+      on<TEvent extends keyof AssistantEvents>(
+        selector: AssistantEventSelector<TEvent>,
+        callback: (e: AssistantEvents[TEvent]) => void,
+      ): Unsubscribe {
+        const { event, scope } = normalizeEventSelector(selector);
+        if (!checkEventScope("thread-list-item", scope, event))
+          return api.on(selector, callback);
+
+        return api.on({ scope: "*", event }, (e: AssistantEvents[TEvent]) => {
+          if (e.threadId !== getItem().getState().id) return;
+          callback(e);
+        });
+      },
+    } satisfies Partial<AssistantApi>;
+  }, [api, id]);
+
+  return <AssistantApiProvider api={api2}>{children}</AssistantApiProvider>;
+};

package/src/context/providers/index.ts

@@ -1,5 +1,12 @@
 export { AssistantRuntimeProvider } from "./AssistantRuntimeProvider";
+export {
+  ThreadListItemByIndexProvider,
+  ThreadListItemByIdProvider,
+} from "./ThreadListItemProvider";
+export { MessageByIndexProvider } from "./MessageProvider";
+export { PartByIndexProvider } from "./PartProvider";
+export {
+  MessageAttachmentByIndexProvider,
+  ComposerAttachmentByIndexProvider,
+} from "./AttachmentProvider";
 export { TextMessagePartProvider } from "./TextMessagePartProvider";
-
-// TODO remove in v0.11
-export { TextMessagePartProvider as TextContentPartProvider } from "./TextMessagePartProvider";

package/src/context/react/AssistantApiContext.tsx

@@ -0,0 +1,392 @@
+"use client";
+
+import {
+  createContext,
+  FC,
+  PropsWithChildren,
+  useContext,
+  useDebugValue,
+  useMemo,
+  useSyncExternalStore,
+} from "react";
+
+import {
+  AssistantToolUIActions,
+  AssistantToolUIState,
+} from "../../client/AssistantRuntimeClient";
+import {
+  MessageClientActions,
+  MessageClientState,
+} from "../../client/MessageClient";
+import {
+  ThreadListItemClientActions,
+  ThreadListItemClientState,
+} from "../../client/ThreadListItemClient";
+import {
+  MessagePartClientActions,
+  MessagePartClientState,
+} from "../../client/MessagePartClient";
+import {
+  ThreadClientActions,
+  ThreadClientState,
+} from "../../client/ThreadClient";
+import {
+  ComposerClientActions,
+  ComposerClientState,
+} from "../../client/ComposerClient";
+import {
+  AttachmentClientActions,
+  AttachmentClientState,
+} from "../../client/AttachmentClient";
+import { StoreApi } from "../../utils/tap-store/tap-store-api";
+import { Unsubscribe } from "@assistant-ui/tap";
+import { ModelContextProvider } from "../../model-context";
+import { AssistantRuntime } from "../../api";
+import {
+  AssistantEventSelector,
+  AssistantEvents,
+  normalizeEventSelector,
+} from "../../types/EventTypes";
+import {
+  ThreadListClientActions,
+  ThreadListClientState,
+} from "../../client/ThreadListClient";
+
+export type AssistantState = {
+  readonly threads: ThreadListClientState;
+  readonly toolUIs: AssistantToolUIState;
+
+  readonly threadListItem: ThreadListItemClientState;
+  readonly thread: ThreadClientState;
+  readonly composer: ComposerClientState;
+  readonly message: MessageClientState;
+  readonly part: MessagePartClientState;
+  readonly attachment: AttachmentClientState;
+};
+
+type AssistantApiField<
+  TState,
+  TActions,
+  TMeta extends { source: string | null; query: any },
+> = (() => StoreApi<TState, TActions>) &
+  (TMeta | { source: null; query: Record<string, never> });
+
+// Meta types for each API method
+type ThreadsMeta = {
+  source: "root";
+  query: Record<string, never>;
+};
+
+type ToolUIMeta = {
+  source: "root";
+  query: Record<string, never>;
+};
+
+type ThreadListItemMeta = {
+  source: "threads";
+  query:
+    | { type: "index"; index: number; archived: boolean }
+    | { type: "main" }
+    | { type: "id"; id: string };
+};
+
+type ThreadMeta = {
+  source: "threads";
+  query: { type: "main" };
+};
+
+type ComposerMeta = {
+  source: "message" | "thread";
+  query: Record<string, never>;
+};
+
+type MessageMeta = {
+  source: "thread";
+  query: { type: "index"; index: number };
+};
+
+type PartMeta = {
+  source: "message" | "root";
+  query: { type: "index"; index: number } | Record<string, never>;
+};
+
+type AttachmentMeta = {
+  source: "message" | "composer";
+  query: { type: "index"; index: number };
+};
+
+export type AssistantApi = {
+  threads: AssistantApiField<
+    ThreadListClientState,
+    ThreadListClientActions,
+    ThreadsMeta
+  >;
+  toolUIs: AssistantApiField<
+    AssistantToolUIState,
+    AssistantToolUIActions,
+    ToolUIMeta
+  >;
+  threadListItem: AssistantApiField<
+    ThreadListItemClientState,
+    ThreadListItemClientActions,
+    ThreadListItemMeta
+  >;
+  thread: AssistantApiField<ThreadClientState, ThreadClientActions, ThreadMeta>;
+  composer: AssistantApiField<
+    ComposerClientState,
+    ComposerClientActions,
+    ComposerMeta
+  >;
+  message: AssistantApiField<
+    MessageClientState,
+    MessageClientActions,
+    MessageMeta
+  >;
+  part: AssistantApiField<
+    MessagePartClientState,
+    MessagePartClientActions,
+    PartMeta
+  >;
+  attachment: AssistantApiField<
+    AttachmentClientState,
+    AttachmentClientActions,
+    AttachmentMeta
+  >;
+
+  subscribe(listener: () => void): Unsubscribe;
+  flushSync(): void;
+
+  on<TEvent extends keyof AssistantEvents>(
+    event: AssistantEventSelector<TEvent>,
+    callback: (e: AssistantEvents[TEvent]) => void,
+  ): Unsubscribe;
+
+  // temp
+  registerModelContextProvider(provider: ModelContextProvider): void;
+  /** @internal */
+  __internal_getRuntime(): AssistantRuntime | null;
+};
+
+export const createAssistantApiField = <
+  TState,
+  TActions,
+  TMeta extends { source: any; query: any },
+>(
+  config: {
+    get: () => StoreApi<TState, TActions>;
+  } & (TMeta | { source: null; query: Record<string, never> }),
+): AssistantApiField<TState, TActions, TMeta> => {
+  const fn = config.get as AssistantApiField<TState, TActions, TMeta>;
+  fn.source = config.source;
+  fn.query = config.query;
+  return fn;
+};
+
+const NO_OP_FN = () => () => {};
+
+const AssistantApiContext = createContext<AssistantApi>({
+  threads: createAssistantApiField({
+    source: null,
+    query: {},
+    get: () => {
+      throw new Error("Threads is only available inside <AssistantProvider />");
+    },
+  }),
+  toolUIs: createAssistantApiField({
+    source: null,
+    query: {},
+    get: (): never => {
+      throw new Error("ToolUIs is only available inside <AssistantProvider />");
+    },
+  }),
+  threadListItem: createAssistantApiField({
+    source: null,
+    query: {},
+    get: (): never => {
+      throw new Error(
+        "ThreadListItem is only available inside <AssistantProvider />",
+      );
+    },
+  }),
+  thread: createAssistantApiField({
+    source: null,
+    query: {},
+    get: (): never => {
+      throw new Error("Thread is only available inside <AssistantProvider />");
+    },
+  }),
+  composer: createAssistantApiField({
+    source: null,
+    query: {},
+    get: (): never => {
+      throw new Error(
+        "Composer is only available inside <AssistantProvider />",
+      );
+    },
+  }),
+  message: createAssistantApiField({
+    source: null,
+    query: {},
+    get: (): never => {
+      throw new Error(
+        "Message is only available inside <ThreadPrimitive.Messages />",
+      );
+    },
+  }),
+  part: createAssistantApiField({
+    source: null,
+    query: {},
+    get: (): never => {
+      throw new Error(
+        "Part is only available inside <MessagePrimitive.Parts />",
+      );
+    },
+  }),
+  attachment: createAssistantApiField({
+    source: null,
+    query: {},
+    get: (): never => {
+      throw new Error(
+        "Attachment is only available inside <MessagePrimitive.Attachments /> or <ComposerPrimitive.Attachments />",
+      );
+    },
+  }),
+
+  subscribe: NO_OP_FN,
+  flushSync: NO_OP_FN,
+  on: (selector) => {
+    const { scope } = normalizeEventSelector(selector);
+    throw new Error(`Event scope is not available in this component: ${scope}`);
+  },
+
+  registerModelContextProvider: () => {
+    throw new Error(
+      "Registering model context providers is only available inside <AssistantProvider />",
+    );
+  },
+  __internal_getRuntime: () => {
+    return null;
+  },
+});
+
+export const useAssistantApi = (): AssistantApi => {
+  return useContext(AssistantApiContext);
+};
+
+export const useAssistantState = <T,>(
+  selector: (state: AssistantState) => T,
+): T => {
+  const api = useAssistantApi();
+  const proxiedState = useMemo(() => new ProxiedAssistantState(api), [api]);
+  const slice = useSyncExternalStore(
+    api.subscribe,
+    () => selector(proxiedState),
+    () => selector(proxiedState),
+  );
+  useDebugValue(slice);
+
+  if (slice instanceof ProxiedAssistantState)
+    throw new Error(
+      "You tried to return the entire AssistantState. This is not supported due to technical limitations.",
+    );
+
+  return slice;
+};
+
+class ProxiedAssistantState implements AssistantState {
+  #api: AssistantApi;
+  constructor(api: AssistantApi) {
+    this.#api = api;
+  }
+
+  get threads() {
+    return this.#api.threads().getState();
+  }
+
+  get toolUIs() {
+    return this.#api.toolUIs().getState();
+  }
+
+  get threadListItem() {
+    return this.#api.threadListItem().getState();
+  }
+
+  get thread() {
+    return this.#api.thread().getState();
+  }
+
+  get composer() {
+    return this.#api.composer().getState();
+  }
+
+  get message() {
+    return this.#api.message().getState();
+  }
+
+  get part() {
+    return this.#api.part().getState();
+  }
+
+  get attachment() {
+    return this.#api.attachment().getState();
+  }
+}
+
+const mergeFns = <TArgs extends Array<unknown>>(
+  fn1: (...args: TArgs) => void,
+  fn2: (...args: TArgs) => void,
+) => {
+  if (fn1 === NO_OP_FN) return fn2;
+  if (fn2 === NO_OP_FN) return fn1;
+
+  return (...args: TArgs) => {
+    fn1(...args);
+    fn2(...args);
+  };
+};
+
+const mergeFnsWithUnsubscribe = <TArgs extends Array<unknown>>(
+  fn1: (...args: TArgs) => Unsubscribe,
+  fn2: (...args: TArgs) => Unsubscribe,
+) => {
+  if (fn1 === NO_OP_FN) return fn2;
+  if (fn2 === NO_OP_FN) return fn1;
+
+  return (...args: TArgs) => {
+    const unsubscribe1 = fn1(...args);
+    const unsubscribe2 = fn2(...args);
+
+    return () => {
+      unsubscribe1();
+      unsubscribe2();
+    };
+  };
+};
+
+const extendApi = (
+  api: AssistantApi,
+  api2: Partial<AssistantApi>,
+): AssistantApi => {
+  const api2Subscribe = api2.subscribe;
+  const api2FlushSync = api2.flushSync;
+  return {
+    ...api,
+    ...api2,
+    subscribe: mergeFnsWithUnsubscribe(
+      api.subscribe,
+      api2Subscribe ?? NO_OP_FN,
+    ),
+    flushSync: mergeFns(api.flushSync, api2FlushSync ?? NO_OP_FN),
+  };
+};
+
+export const AssistantApiProvider: FC<
+  PropsWithChildren<{ api: Partial<AssistantApi> }>
+> = ({ api: api2, children }) => {
+  const api = useAssistantApi();
+  const extendedApi = useMemo(() => extendApi(api, api2), [api, api2]);
+
+  return (
+    <AssistantApiContext value={extendedApi}>{children}</AssistantApiContext>
+  );
+};

package/src/context/react/index.ts

@@ -2,55 +2,48 @@
 // TODO createContextStoreHook does not work well with server-side nextjs bundler
 // use client necessary here for now
 
-export {
-  useAssistantRuntime,
-  useThreadList,
-  useToolUIs,
-  useToolUIsStore,
-} from "./AssistantContext";
-
-export {
-  useThreadRuntime,
-  useThread,
-  useThreadComposer,
-  useThreadModelContext,
-  /**
-   * @deprecated This method was renamed to `useThreadModelContext`.
-   */
-  useThreadModelContext as useThreadModelConfig,
-} from "./ThreadContext";
+export { useAssistantState, useAssistantApi } from "./AssistantApiContext";
+export { useAssistantEvent } from "../../hooks/useAssistantEvent";
 
 export {
   useThreadViewport,
   useThreadViewportStore,
 } from "./ThreadViewportContext";
 
+export { useAssistantRuntime, useThreadList } from "./legacy/AssistantContext";
+
 export {
-  useThreadListItemRuntime,
-  useThreadListItem,
-} from "./ThreadListItemContext";
+  useAttachmentRuntime,
+  useAttachment,
+  useThreadComposerAttachmentRuntime,
+  useThreadComposerAttachment,
+  useEditComposerAttachmentRuntime,
+  useEditComposerAttachment,
+  useMessageAttachment,
+  useMessageAttachmentRuntime,
+} from "./legacy/AttachmentContext";
+
+export { useComposerRuntime, useComposer } from "./legacy/ComposerContext";
 
 export {
   useMessageRuntime,
-  useMessage,
   useEditComposer,
-  useMessageUtils,
-  useMessageUtilsStore,
-} from "./MessageContext";
-export { useMessagePartRuntime, useMessagePart } from "./MessagePartContext";
-export { useComposerRuntime, useComposer } from "./ComposerContext";
+  useMessage,
+} from "./legacy/MessageContext";
 
 export {
-  useAttachment,
-  useAttachmentRuntime,
+  useMessagePartRuntime,
+  useMessagePart,
+} from "./legacy/MessagePartContext";
 
-  // TODO decide if we want to export/drop these?
-  // useEditComposerAttachment,
-  // useEditComposerAttachmentRuntime,
-  // useMessageAttachment,
-  // useMessageAttachmentRuntime,
-  // useThreadComposerAttachment,
-  // useThreadComposerAttachmentRuntime,
-} from "./AttachmentContext";
+export {
+  useThreadRuntime,
+  useThread,
+  useThreadComposer,
+  useThreadModelContext,
+} from "./legacy/ThreadContext";
 
-export { useRuntimeState } from "./utils/useRuntimeState";
+export {
+  useThreadListItemRuntime,
+  useThreadListItem,
+} from "./legacy/ThreadListItemContext";

package/src/context/react/{AssistantContext.ts → legacy/AssistantContext.ts}

@@ -1,28 +1,9 @@
 "use client";
 
-import { createContext } from "react";
-import type { AssistantToolUIsState } from "../stores/AssistantToolUIs";
-import { ReadonlyStore } from "../ReadonlyStore";
-import { createContextHook } from "./utils/createContextHook";
-import { createContextStoreHook } from "./utils/createContextStoreHook";
-import { UseBoundStore } from "zustand";
-import { AssistantRuntime } from "../../api/AssistantRuntime";
-import { ThreadListRuntime } from "../../api/ThreadListRuntime";
-import { createStateHookForRuntime } from "./utils/createStateHookForRuntime";
-
-export type AssistantContextValue = {
-  useAssistantRuntime: UseBoundStore<ReadonlyStore<AssistantRuntime>>;
-  useToolUIs: UseBoundStore<ReadonlyStore<AssistantToolUIsState>>;
-};
-
-export const AssistantContext = createContext<AssistantContextValue | null>(
-  null,
-);
-
-export const useAssistantContext = createContextHook(
-  AssistantContext,
-  "AssistantRuntimeProvider",
-);
+import { useAssistantApi } from "../AssistantApiContext";
+import { AssistantRuntime } from "../../../api/AssistantRuntime";
+import { ThreadListRuntime } from "../../../api/ThreadListRuntime";
+import { createStateHookForRuntime } from "../utils/createStateHookForRuntime";
 
 /**
  * Hook to access the AssistantRuntime from the current context.
@@ -56,15 +37,15 @@ export function useAssistantRuntime(options?: {
 export function useAssistantRuntime(options?: {
   optional?: boolean | undefined;
 }) {
-  const context = useAssistantContext(options);
-  if (!context) return null;
-  return context.useAssistantRuntime();
-}
+  const api = useAssistantApi();
+  const runtime = api.__internal_getRuntime();
+
+  if (!runtime && !options?.optional) {
+    throw new Error("AssistantRuntime is not available");
+  }
 
-export const { useToolUIs, useToolUIsStore } = createContextStoreHook(
-  useAssistantContext,
-  "useToolUIs",
-);
+  return runtime;
+}
 
 const useThreadListRuntime = (opt: {
   optional: boolean | undefined;

package/src/context/react/{AttachmentContext.ts → legacy/AttachmentContext.ts}

@@ -1,24 +1,8 @@
 "use client";
 
-import { createContext } from "react";
-import { ReadonlyStore } from "../ReadonlyStore";
-import { AttachmentRuntime } from "../../api/AttachmentRuntime";
-import { UseBoundStore } from "zustand";
-import { createContextHook } from "./utils/createContextHook";
-import { createStateHookForRuntime } from "./utils/createStateHookForRuntime";
-
-export type AttachmentContextValue = {
-  useAttachmentRuntime: UseBoundStore<ReadonlyStore<AttachmentRuntime>>;
-};
-
-export const AttachmentContext = createContext<AttachmentContextValue | null>(
-  null,
-);
-
-const useAttachmentContext = createContextHook(
-  AttachmentContext,
-  "a ComposerPrimitive.Attachments or MessagePrimitive.Attachments component",
-);
+import { AttachmentRuntime } from "../../../api/AttachmentRuntime";
+import { createStateHookForRuntime } from "../utils/createStateHookForRuntime";
+import { useAssistantApi } from "..";
 
 export function useAttachmentRuntime(options?: {
   optional?: false | undefined;
@@ -29,9 +13,14 @@ export function useAttachmentRuntime(options?: {
 export function useAttachmentRuntime(options?: {
   optional?: boolean | undefined;
 }): AttachmentRuntime | null {
-  const attachmentRuntime = useAttachmentContext(options);
-  if (!attachmentRuntime) return null;
-  return attachmentRuntime.useAttachmentRuntime();
+  const api = useAssistantApi();
+  const runtime = api.attachment.source
+    ? api.attachment().__internal_getRuntime()
+    : null;
+  if (!runtime && !options?.optional) {
+    throw new Error("AttachmentRuntime is not available");
+  }
+  return runtime;
 }
 
 export function useThreadComposerAttachmentRuntime(options?: {