@assistant-ui/react 0.11.0 → 0.11.2

package/src/context/react/AssistantApiContext.tsx

@@ -5,56 +5,47 @@ import {
   FC,
   PropsWithChildren,
   useContext,
-  useDebugValue,
   useMemo,
-  useSyncExternalStore,
 } from "react";
 
+import { ToolUIApi, ToolUIState, ToolUIMeta } from "../../client/types/ToolUI";
 import {
-  AssistantToolUIActions,
-  AssistantToolUIState,
-} from "../../client/AssistantRuntimeClient";
-import {
-  MessageClientActions,
+  MessageClientApi,
   MessageClientState,
-} from "../../client/MessageClient";
+} from "../../client/types/Message";
 import {
-  ThreadListItemClientActions,
+  ThreadListItemClientApi,
   ThreadListItemClientState,
-} from "../../client/ThreadListItemClient";
+} from "../../client/types/ThreadListItem";
 import {
-  MessagePartClientActions,
+  MessagePartClientApi,
   MessagePartClientState,
-} from "../../client/MessagePartClient";
-import {
-  ThreadClientActions,
-  ThreadClientState,
-} from "../../client/ThreadClient";
+} from "../../client/types/Part";
+import { ThreadClientApi, ThreadClientState } from "../../client/types/Thread";
 import {
-  ComposerClientActions,
+  ComposerClientApi,
   ComposerClientState,
-} from "../../client/ComposerClient";
+} from "../../client/types/Composer";
 import {
-  AttachmentClientActions,
+  AttachmentClientApi,
   AttachmentClientState,
-} from "../../client/AttachmentClient";
-import { StoreApi } from "../../utils/tap-store/tap-store-api";
+} from "../../client/types/Attachment";
 import { Unsubscribe } from "@assistant-ui/tap";
 import { ModelContextProvider } from "../../model-context";
-import { AssistantRuntime } from "../../api";
+import { AssistantRuntime } from "../../legacy-runtime/runtime/AssistantRuntime";
 import {
   AssistantEventSelector,
   AssistantEvents,
   normalizeEventSelector,
 } from "../../types/EventTypes";
 import {
-  ThreadListClientActions,
+  ThreadListClientApi,
   ThreadListClientState,
-} from "../../client/ThreadListClient";
+} from "../../client/types/ThreadList";
 
 export type AssistantState = {
   readonly threads: ThreadListClientState;
-  readonly toolUIs: AssistantToolUIState;
+  readonly toolUIs: ToolUIState;
 
   readonly threadListItem: ThreadListItemClientState;
   readonly thread: ThreadClientState;
@@ -65,11 +56,9 @@ export type AssistantState = {
 };
 
 type AssistantApiField<
-  TState,
-  TActions,
+  TApi,
   TMeta extends { source: string | null; query: any },
-> = (() => StoreApi<TState, TActions>) &
-  (TMeta | { source: null; query: Record<string, never> });
+> = (() => TApi) & (TMeta | { source: null; query: Record<string, never> });
 
 // Meta types for each API method
 type ThreadsMeta = {
@@ -77,11 +66,6 @@ type ThreadsMeta = {
   query: Record<string, never>;
 };
 
-type ToolUIMeta = {
-  source: "root";
-  query: Record<string, never>;
-};
-
 type ThreadListItemMeta = {
   source: "threads";
   query:
@@ -116,42 +100,17 @@ type AttachmentMeta = {
 };
 
 export type AssistantApi = {
-  threads: AssistantApiField<
-    ThreadListClientState,
-    ThreadListClientActions,
-    ThreadsMeta
-  >;
-  toolUIs: AssistantApiField<
-    AssistantToolUIState,
-    AssistantToolUIActions,
-    ToolUIMeta
-  >;
+  threads: AssistantApiField<ThreadListClientApi, ThreadsMeta>;
+  toolUIs: AssistantApiField<ToolUIApi, ToolUIMeta>;
   threadListItem: AssistantApiField<
-    ThreadListItemClientState,
-    ThreadListItemClientActions,
+    ThreadListItemClientApi,
     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
-  >;
+  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;
@@ -168,15 +127,14 @@ export type AssistantApi = {
 };
 
 export const createAssistantApiField = <
-  TState,
-  TActions,
+  TApi,
   TMeta extends { source: any; query: any },
 >(
   config: {
-    get: () => StoreApi<TState, TActions>;
+    get: () => TApi;
   } & (TMeta | { source: null; query: Record<string, never> }),
-): AssistantApiField<TState, TActions, TMeta> => {
-  const fn = config.get as AssistantApiField<TState, TActions, TMeta>;
+): AssistantApiField<TApi, TMeta> => {
+  const fn = config.get as AssistantApiField<TApi, TMeta>;
   fn.source = config.source;
   fn.query = config.query;
   return fn;
@@ -273,65 +231,6 @@ 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,

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,15 +2,19 @@
 // TODO createContextStoreHook does not work well with server-side nextjs bundler
 // use client necessary here for now
 
-export { useAssistantState, useAssistantApi } from "./AssistantApiContext";
-export { useAssistantEvent } from "../../hooks/useAssistantEvent";
+export { useAssistantApi } from "./AssistantApiContext";
+export { useAssistantState } from "./hooks/useAssistantState";
+export { useAssistantEvent } from "./hooks/useAssistantEvent";
 
 export {
   useThreadViewport,
   useThreadViewportStore,
 } from "./ThreadViewportContext";
 
-export { useAssistantRuntime, useThreadList } from "./legacy/AssistantContext";
+export {
+  useAssistantRuntime,
+  useThreadList,
+} from "../../legacy-runtime/hooks/AssistantContext";
 
 export {
   useAttachmentRuntime,
@@ -21,29 +25,32 @@ export {
   useEditComposerAttachment,
   useMessageAttachment,
   useMessageAttachmentRuntime,
-} from "./legacy/AttachmentContext";
+} from "../../legacy-runtime/hooks/AttachmentContext";
 
-export { useComposerRuntime, useComposer } from "./legacy/ComposerContext";
+export {
+  useComposerRuntime,
+  useComposer,
+} from "../../legacy-runtime/hooks/ComposerContext";
 
 export {
   useMessageRuntime,
   useEditComposer,
   useMessage,
-} from "./legacy/MessageContext";
+} from "../../legacy-runtime/hooks/MessageContext";
 
 export {
   useMessagePartRuntime,
   useMessagePart,
-} from "./legacy/MessagePartContext";
+} from "../../legacy-runtime/hooks/MessagePartContext";
 
 export {
   useThreadRuntime,
   useThread,
   useThreadComposer,
   useThreadModelContext,
-} from "./legacy/ThreadContext";
+} from "../../legacy-runtime/hooks/ThreadContext";
 
 export {
   useThreadListItemRuntime,
   useThreadListItem,
-} from "./legacy/ThreadListItemContext";
+} from "../../legacy-runtime/hooks/ThreadListItemContext";

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

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

@@ -0,0 +1,22 @@
+import { resource } from "../../../../tap/dist/core/resource";
+import { AttachmentClientApi } from "../../client/types/Attachment";
+import { tapApi } from "../../utils/tap-store";
+import { AttachmentRuntime } from "../runtime";
+import { tapSubscribable } from "../util-hooks/tapSubscribable";
+
+export const AttachmentRuntimeClient = resource(
+  ({ runtime }: { runtime: AttachmentRuntime }) => {
+    const state = tapSubscribable(runtime);
+    const api = tapApi<AttachmentClientApi>({
+      getState: () => state,
+      remove: runtime.remove,
+      __internal_getRuntime: () => runtime,
+    });
+
+    return {
+      state: state,
+      api,
+      key: undefined,
+    };
+  },
+);

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

@@ -0,0 +1,128 @@
+import {
+  resource,
+  tapMemo,
+  tapEffect,
+  RefObject,
+  tapInlineResource,
+} from "@assistant-ui/tap";
+import {
+  ComposerRuntime,
+  EditComposerRuntime,
+} from "../runtime/ComposerRuntime";
+import { Unsubscribe } from "../../types";
+import { tapSubscribable } from "../util-hooks/tapSubscribable";
+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 "../util-hooks/tapLookupResources";
+import { AttachmentRuntimeClient } from "./AttachmentRuntimeClient";
+
+const ComposerAttachmentClientByIndex = resource(
+  ({ runtime, index }: { runtime: ComposerRuntime; index: number }) => {
+    const attachmentRuntime = tapMemo(
+      () => runtime.getAttachmentByIndex(index),
+      [runtime, index],
+    );
+
+    return tapInlineResource(
+      AttachmentRuntimeClient({
+        runtime: attachmentRuntime,
+      }),
+    );
+  },
+);
+
+export const ComposerClient = resource(
+  ({
+    threadIdRef,
+    messageIdRef,
+    runtime,
+  }: {
+    threadIdRef: RefObject<string>;
+    messageIdRef?: RefObject<string>;
+    runtime: ComposerRuntime;
+  }) => {
+    const runtimeState = tapSubscribable(runtime);
+    const events = tapEvents();
+
+    // Bind composer events to event manager
+    tapEffect(() => {
+      const unsubscribers: Unsubscribe[] = [];
+
+      // Subscribe to composer events
+      const composerEvents: ComposerRuntimeEventType[] = [
+        "send",
+        "attachment-add",
+      ];
+
+      for (const event of composerEvents) {
+        const unsubscribe = runtime.unstable_on(event, () => {
+          events.emit(`composer.${event}`, {
+            threadId: threadIdRef.current,
+            ...(messageIdRef && { messageId: messageIdRef.current }),
+          });
+        });
+        unsubscribers.push(unsubscribe);
+      }
+
+      return () => {
+        for (const unsub of unsubscribers) unsub();
+      };
+    }, [runtime, events, threadIdRef, messageIdRef]);
+
+    const attachments = tapLookupResources(
+      runtimeState.attachments.map((_, idx) =>
+        ComposerAttachmentClientByIndex(
+          { runtime: runtime, index: idx },
+          { key: idx },
+        ),
+      ),
+    );
+
+    const state = tapMemo<ComposerClientState>(() => {
+      return {
+        text: runtimeState.text,
+        role: runtimeState.role,
+        attachments: attachments.state,
+        runConfig: runtimeState.runConfig,
+        isEditing: runtimeState.isEditing,
+        canCancel: runtimeState.canCancel,
+        attachmentAccept: runtimeState.attachmentAccept,
+        isEmpty: runtimeState.isEmpty,
+        type: runtimeState.type ?? "thread",
+      };
+    }, [runtimeState, attachments.state]);
+
+    const api = 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");
+        }),
+
+      attachment: attachments.api,
+
+      __internal_getRuntime: () => runtime,
+    });
+
+    return {
+      state,
+      api,
+    };
+  },
+);