@assistant-ui/react 0.10.50 → 0.11.1

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 { AssistantRuntimeProvider } from "../../legacy-runtime/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,291 @@
+"use client";
+
+import {
+  createContext,
+  FC,
+  PropsWithChildren,
+  useContext,
+  useMemo,
+} from "react";
+
+import { ToolUIApi, ToolUIState, ToolUIMeta } from "../../client/types/ToolUI";
+import {
+  MessageClientApi,
+  MessageClientState,
+} from "../../client/types/Message";
+import {
+  ThreadListItemClientApi,
+  ThreadListItemClientState,
+} from "../../client/types/ThreadListItem";
+import {
+  MessagePartClientApi,
+  MessagePartClientState,
+} from "../../client/types/Part";
+import { ThreadClientApi, ThreadClientState } from "../../client/types/Thread";
+import {
+  ComposerClientApi,
+  ComposerClientState,
+} from "../../client/types/Composer";
+import {
+  AttachmentClientApi,
+  AttachmentClientState,
+} from "../../client/types/Attachment";
+import { Unsubscribe } from "@assistant-ui/tap";
+import { ModelContextProvider } from "../../model-context";
+import { AssistantRuntime } from "../../legacy-runtime/runtime/AssistantRuntime";
+import {
+  AssistantEventSelector,
+  AssistantEvents,
+  normalizeEventSelector,
+} from "../../types/EventTypes";
+import {
+  ThreadListClientApi,
+  ThreadListClientState,
+} from "../../client/types/ThreadList";
+
+export type AssistantState = {
+  readonly threads: ThreadListClientState;
+  readonly toolUIs: ToolUIState;
+
+  readonly threadListItem: ThreadListItemClientState;
+  readonly thread: ThreadClientState;
+  readonly composer: ComposerClientState;
+  readonly message: MessageClientState;
+  readonly part: MessagePartClientState;
+  readonly attachment: AttachmentClientState;
+};
+
+type AssistantApiField<
+  TApi,
+  TMeta extends { source: string | null; query: any },
+> = (() => TApi) & (TMeta | { source: null; query: Record<string, never> });
+
+// Meta types for each API method
+type ThreadsMeta = {
+  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<ThreadListClientApi, ThreadsMeta>;
+  toolUIs: AssistantApiField<ToolUIApi, ToolUIMeta>;
+  threadListItem: AssistantApiField<
+    ThreadListItemClientApi,
+    ThreadListItemMeta
+  >;
+  thread: AssistantApiField<ThreadClientApi, ThreadMeta>;
+  composer: AssistantApiField<ComposerClientApi, ComposerMeta>;
+  message: AssistantApiField<MessageClientApi, MessageMeta>;
+  part: AssistantApiField<MessagePartClientApi, PartMeta>;
+  attachment: AssistantApiField<AttachmentClientApi, 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 = <
+  TApi,
+  TMeta extends { source: any; query: any },
+>(
+  config: {
+    get: () => TApi;
+  } & (TMeta | { source: null; query: Record<string, never> }),
+): AssistantApiField<TApi, TMeta> => {
+  const fn = config.get as AssistantApiField<TApi, 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);
+};
+
+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/hooks/useAssistantEvent.ts

@@ -0,0 +1,24 @@
+import { useEffect, useRef } from "react";
+import { useAssistantApi } from "../../react/AssistantApiContext";
+import {
+  AssistantEventSelector,
+  AssistantEvents,
+  normalizeEventSelector,
+} from "../../../types/EventTypes";
+
+export const useAssistantEvent = <TEvent extends keyof AssistantEvents>(
+  selector: AssistantEventSelector<TEvent>,
+  callback: (e: AssistantEvents[TEvent]) => void,
+) => {
+  const api = useAssistantApi();
+  const callbackRef = useRef(callback);
+  useEffect(() => {
+    callbackRef.current = callback;
+  });
+
+  const { scope, event } = normalizeEventSelector(selector);
+  useEffect(
+    () => api.on({ scope, event }, (e) => callbackRef.current(e)),
+    [api, scope, event],
+  );
+};

package/src/context/react/hooks/useAssistantState.tsx

@@ -0,0 +1,65 @@
+import { useMemo, useSyncExternalStore, useDebugValue } from "react";
+import {
+  AssistantState,
+  AssistantApi,
+  useAssistantApi,
+} from "../AssistantApiContext";
+
+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();
+  }
+}
+
+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;
+};

package/src/context/react/index.ts

@@ -2,23 +2,9 @@
 // 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 { useAssistantApi } from "./AssistantApiContext";
+export { useAssistantState } from "./hooks/useAssistantState";
+export { useAssistantEvent } from "./hooks/useAssistantEvent";
 
 export {
   useThreadViewport,
@@ -26,31 +12,45 @@ export {
 } from "./ThreadViewportContext";
 
 export {
-  useThreadListItemRuntime,
-  useThreadListItem,
-} from "./ThreadListItemContext";
+  useAssistantRuntime,
+  useThreadList,
+} from "../../legacy-runtime/hooks/AssistantContext";
+
+export {
+  useAttachmentRuntime,
+  useAttachment,
+  useThreadComposerAttachmentRuntime,
+  useThreadComposerAttachment,
+  useEditComposerAttachmentRuntime,
+  useEditComposerAttachment,
+  useMessageAttachment,
+  useMessageAttachmentRuntime,
+} from "../../legacy-runtime/hooks/AttachmentContext";
+
+export {
+  useComposerRuntime,
+  useComposer,
+} from "../../legacy-runtime/hooks/ComposerContext";
 
 export {
   useMessageRuntime,
-  useMessage,
   useEditComposer,
-  useMessageUtils,
-  useMessageUtilsStore,
-} from "./MessageContext";
-export { useMessagePartRuntime, useMessagePart } from "./MessagePartContext";
-export { useComposerRuntime, useComposer } from "./ComposerContext";
+  useMessage,
+} from "../../legacy-runtime/hooks/MessageContext";
 
 export {
-  useAttachment,
-  useAttachmentRuntime,
+  useMessagePartRuntime,
+  useMessagePart,
+} from "../../legacy-runtime/hooks/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-runtime/hooks/ThreadContext";
 
-export { useRuntimeState } from "./utils/useRuntimeState";
+export {
+  useThreadListItemRuntime,
+  useThreadListItem,
+} from "../../legacy-runtime/hooks/ThreadListItemContext";

package/src/context/stores/index.ts

@@ -1,3 +1 @@
-export type { AssistantToolUIsState } from "./AssistantToolUIs";
-export type { MessageUtilsState } from "./MessageUtils";
 export type { ThreadViewportState } from "./ThreadViewport";

package/src/index.ts

@@ -1,9 +1,10 @@
-export * from "./api";
-export * from "./cloud";
+export * from "./legacy-runtime/runtime";
+export * from "./legacy-runtime/cloud";
+export * from "./legacy-runtime/runtime-cores";
+
 export * from "./context";
 export * from "./model-context";
 export * from "./primitives";
-export * from "./runtimes";
 export * from "./types";
 
 export * as INTERNAL from "./internal";

package/src/internal.ts

@@ -1,18 +1,18 @@
-export type { ThreadRuntimeCore } from "./runtimes/core/ThreadRuntimeCore";
-export type { ThreadListRuntimeCore } from "./runtimes/core/ThreadListRuntimeCore";
-export { DefaultThreadComposerRuntimeCore } from "./runtimes/composer/DefaultThreadComposerRuntimeCore";
+export type { ThreadRuntimeCore } from "./legacy-runtime/runtime-cores/core/ThreadRuntimeCore";
+export type { ThreadListRuntimeCore } from "./legacy-runtime/runtime-cores/core/ThreadListRuntimeCore";
+export { DefaultThreadComposerRuntimeCore } from "./legacy-runtime/runtime-cores/composer/DefaultThreadComposerRuntimeCore";
 export { CompositeContextProvider } from "./utils/CompositeContextProvider";
-export { MessageRepository } from "./runtimes/utils/MessageRepository";
-export { BaseAssistantRuntimeCore } from "./runtimes/core/BaseAssistantRuntimeCore";
+export { MessageRepository } from "./legacy-runtime/runtime-cores/utils/MessageRepository";
+export { BaseAssistantRuntimeCore } from "./legacy-runtime/runtime-cores/core/BaseAssistantRuntimeCore";
 export { generateId } from "./utils/idUtils";
-export { AssistantRuntimeImpl } from "./api/AssistantRuntime";
+export { AssistantRuntimeImpl } from "./legacy-runtime/runtime/AssistantRuntime";
 export {
   ThreadRuntimeImpl,
   type ThreadRuntimeCoreBinding,
   type ThreadListItemRuntimeBinding,
-} from "./api/ThreadRuntime";
-export { fromThreadMessageLike } from "./runtimes/external-store/ThreadMessageLike";
-export { getAutoStatus } from "./runtimes/external-store/auto-status";
-export { splitLocalRuntimeOptions } from "./runtimes/local/LocalRuntimeOptions";
+} from "./legacy-runtime/runtime/ThreadRuntime";
+export { fromThreadMessageLike } from "./legacy-runtime/runtime-cores/external-store/ThreadMessageLike";
+export { getAutoStatus } from "./legacy-runtime/runtime-cores/external-store/auto-status";
+export { splitLocalRuntimeOptions } from "./legacy-runtime/runtime-cores/local/LocalRuntimeOptions";
 
 export * from "./utils/smooth";

package/src/legacy-runtime/AssistantRuntimeProvider.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { FC, memo, PropsWithChildren } from "react";
+import { AssistantApiProvider } from "../context/react/AssistantApiContext";
+import { AssistantRuntime } from "./runtime/AssistantRuntime";
+import { AssistantRuntimeCore } from "./runtime-cores/core/AssistantRuntimeCore";
+import { useAssistantClient } from "../client/AssistantClient";
+
+import { ThreadViewportProvider } from "../context/providers/ThreadViewportProvider";
+import { ThreadListClient } from "./client/ThreadListRuntimeClient";
+
+export namespace AssistantProvider {
+  export type Props = PropsWithChildren<{
+    /**
+     * The runtime to provide to the rest of your app.
+     */
+    runtime: AssistantRuntime;
+  }>;
+}
+
+const getRenderComponent = (runtime: AssistantRuntime) => {
+  return (runtime as { _core?: AssistantRuntimeCore })._core?.RenderComponent;
+};
+
+export const AssistantRuntimeProviderImpl: FC<AssistantProvider.Props> = ({
+  children,
+  runtime,
+}) => {
+  const api = useAssistantClient({
+    threads: ThreadListClient({
+      runtime: runtime.threads,
+    }),
+    registerModelContextProvider: runtime.registerModelContextProvider,
+    __internal_runtime: runtime,
+  });
+
+  const RenderComponent = getRenderComponent(runtime);
+
+  return (
+    <AssistantProvider api={api}>
+      {RenderComponent && <RenderComponent />}
+
+      {children}
+    </AssistantProvider>
+  );
+};
+
+export const AssistantRuntimeProvider = memo(AssistantRuntimeProviderImpl);
+
+const AssistantProvider: FC<
+  PropsWithChildren<{ api: ReturnType<typeof useAssistantClient> }>
+> = ({ children, api }) => {
+  return (
+    <AssistantApiProvider api={api}>
+      {/* TODO temporarily allow accessing viewport state from outside the viewport */}
+      {/* TODO figure out if this behavior should be deprecated, since it is quite hacky */}
+      <ThreadViewportProvider>{children}</ThreadViewportProvider>
+    </AssistantApiProvider>
+  );
+};