@assistant-ui/react 0.10.49 → 0.11.0

package/src/api/ThreadListRuntime.ts

@@ -22,13 +22,14 @@ export type ThreadListState = {
   readonly threads: readonly string[];
   readonly archivedThreads: readonly string[];
   readonly isLoading: boolean;
+  readonly threadItems: Readonly<
+    Record<string, Omit<ThreadListItemState, "isMain" | "threadId">>
+  >;
 };
 
 export type ThreadListRuntime = {
   getState(): ThreadListState;
 
-  readonly isLoading: boolean;
-
   subscribe(callback: () => void): Unsubscribe;
 
   readonly main: ThreadRuntime;
@@ -52,6 +53,7 @@ const getThreadListState = (
     threads: threadList.threadIds,
     archivedThreads: threadList.archivedThreadIds,
     isLoading: threadList.isLoading,
+    threadItems: threadList.threadData,
   };
 };
 
@@ -64,13 +66,13 @@ const getThreadListItemState = (
   const threadData = threadList.getItemById(threadId);
   if (!threadData) return SKIP_UPDATE;
   return {
-    id: threadData.threadId,
-    threadId: threadData.threadId, // TODO remove in 0.8.0
+    id: threadData.id,
+    threadId: threadData.id, // TODO remove in 0.8.0
     remoteId: threadData.remoteId,
     externalId: threadData.externalId,
     title: threadData.title,
     status: threadData.status,
-    isMain: threadData.threadId === threadList.mainThreadId,
+    isMain: threadData.id === threadList.mainThreadId,
   };
 };
 
@@ -118,6 +120,8 @@ export class ThreadListRuntimeImpl implements ThreadListRuntime {
       }),
       this._mainThreadListItemRuntime, // TODO capture "main" threadListItem from context around useLocalRuntime / useExternalStoreRuntime
     );
+
+    this.__internal_bindMethods();
   }
 
   protected __internal_bindMethods() {
@@ -143,10 +147,6 @@ export class ThreadListRuntimeImpl implements ThreadListRuntime {
     return this._getState();
   }
 
-  public get isLoading() {
-    return this._core.isLoading;
-  }
-
   public subscribe(callback: () => void): Unsubscribe {
     return this._core.subscribe(callback);
   }

package/src/api/ThreadRuntime.ts

@@ -275,13 +275,13 @@ export type ThreadRuntime = {
    */
   reset(initialMessages?: readonly ThreadMessageLike[]): void;
 
-  getMesssageByIndex(idx: number): MessageRuntime;
-  getMesssageById(messageId: string): MessageRuntime;
+  getMessageByIndex(idx: number): MessageRuntime;
+  getMessageById(messageId: string): MessageRuntime;
 
   /**
    * @deprecated This API is still under active development and might change without notice.
    */
-  stopSpeaking: () => void;
+  stopSpeaking(): void;
 
   unstable_on(event: ThreadRuntimeEventType, callback: () => void): Unsubscribe;
 };
@@ -339,6 +339,8 @@ export class ThreadRuntimeImpl implements ThreadRuntime {
         subscribe: (callback) => this._threadBinding.subscribe(callback),
       }),
     );
+
+    this.__internal_bindMethods();
   }
 
   protected __internal_bindMethods() {
@@ -350,8 +352,8 @@ export class ThreadRuntimeImpl implements ThreadRuntime {
     this.export = this.export.bind(this);
     this.import = this.import.bind(this);
     this.reset = this.reset.bind(this);
-    this.getMesssageByIndex = this.getMesssageByIndex.bind(this);
-    this.getMesssageById = this.getMesssageById.bind(this);
+    this.getMessageByIndex = this.getMessageByIndex.bind(this);
+    this.getMessageById = this.getMessageById.bind(this);
     this.subscribe = this.subscribe.bind(this);
     this.unstable_on = this.unstable_on.bind(this);
     this.getModelContext = this.getModelContext.bind(this);
@@ -417,7 +419,7 @@ export class ThreadRuntimeImpl implements ThreadRuntime {
     this._threadBinding.getState().reset(initialMessages);
   }
 
-  public getMesssageByIndex(idx: number) {
+  public getMessageByIndex(idx: number) {
     if (idx < 0) throw new Error("Message index must be >= 0");
 
     return this._getMessageRuntime(
@@ -438,7 +440,7 @@ export class ThreadRuntimeImpl implements ThreadRuntime {
     );
   }
 
-  public getMesssageById(messageId: string) {
+  public getMessageById(messageId: string) {
     return this._getMessageRuntime(
       {
         ...this.path,

package/src/client/AssistantRuntimeClient.ts

@@ -0,0 +1,197 @@
+import {
+  tapMemo,
+  resource,
+  tapState,
+  Unsubscribe,
+  tapInlineResource,
+} from "@assistant-ui/tap";
+import { ThreadListClientState } from "./ThreadListClient";
+import { ThreadListClientActions } from "./ThreadListClient";
+import { AssistantRuntime } from "../api/AssistantRuntime";
+import { ThreadListClient } from "./ThreadListClient";
+import { ModelContextProvider } from "../model-context";
+import { asStore, Store, tapApi } from "../utils/tap-store";
+import { useResource } from "@assistant-ui/tap/react";
+import { ToolCallMessagePartComponent } from "../types/MessagePartComponentTypes";
+import { StoreApi } from "../utils/tap-store/tap-store-api";
+import { useMemo } from "react";
+import {
+  AssistantEventSelector,
+  AssistantEvents,
+  checkEventScope,
+  normalizeEventSelector,
+} from "../types/EventTypes";
+import { EventManagerClient } from "./EventManagerClient";
+import {
+  AssistantApi,
+  createAssistantApiField,
+} from "../context/react/AssistantApiContext";
+
+export type AssistantToolUIState = Record<
+  string,
+  ToolCallMessagePartComponent[]
+>;
+export type AssistantToolUIActions = {
+  setToolUI(
+    toolName: string,
+    render: ToolCallMessagePartComponent,
+  ): Unsubscribe;
+};
+
+export const AssistantToolUIClient = resource(() => {
+  const [state, setState] = tapState<AssistantToolUIState>(() => ({}));
+
+  const api = tapApi<AssistantToolUIState, AssistantToolUIActions>(state, {
+    setToolUI: (toolName, render) => {
+      setState((prev) => {
+        return {
+          ...prev,
+          [toolName]: [...(prev[toolName] ?? []), render],
+        };
+      });
+
+      return () => {
+        setState((prev) => {
+          return {
+            ...prev,
+            [toolName]: prev[toolName]?.filter((r) => r !== render) ?? [],
+          };
+        });
+      };
+    },
+  });
+
+  return {
+    state,
+    api,
+  };
+});
+
+export type AssistantClientState = {
+  readonly threads: ThreadListClientState;
+  readonly toolUIs: AssistantToolUIState;
+};
+
+export type AssistantClientActions = {
+  readonly threads: StoreApi<ThreadListClientState, ThreadListClientActions>;
+  readonly toolUIs: StoreApi<AssistantToolUIState, AssistantToolUIActions>;
+
+  on<TEvent extends keyof AssistantEvents>(
+    event: keyof AssistantEvents,
+    callback: (e: AssistantEvents[TEvent]) => void,
+  ): Unsubscribe;
+
+  registerModelContextProvider(provider: ModelContextProvider): Unsubscribe;
+  /** @internal */
+  __internal_getRuntime(): AssistantRuntime | null;
+};
+
+export type AssistantClient = Store<
+  AssistantClientState,
+  AssistantClientActions
+>;
+
+export const AssistantClient = resource(
+  ({ runtime }: { runtime: AssistantRuntime }) => {
+    const events = tapInlineResource(EventManagerClient());
+
+    const threads = tapInlineResource(
+      ThreadListClient({
+        runtime: runtime.threads,
+        events,
+      }),
+    );
+    const toolUIs = tapInlineResource(AssistantToolUIClient());
+
+    const state = tapMemo<AssistantClientState>(() => {
+      return {
+        threads: threads.state,
+        toolUIs: toolUIs.state,
+      };
+    }, [threads.state, toolUIs.state]);
+
+    const api = tapApi<AssistantClientState, AssistantClientActions>(state, {
+      threads: threads.api,
+      registerModelContextProvider: (provider: ModelContextProvider) => {
+        return runtime.registerModelContextProvider(provider);
+      },
+      toolUIs: toolUIs.api,
+      on: events.on,
+
+      __internal_getRuntime: () => runtime,
+    });
+
+    return {
+      state,
+      api,
+    };
+  },
+);
+
+export const useAssistantRuntimeClient = (runtime: AssistantRuntime) => {
+  const client = useResource(asStore(AssistantClient({ runtime: runtime })));
+  const api = useMemo(() => {
+    const getItem = () => {
+      return client.getApi().threads.item("main");
+    };
+    return {
+      threads: createAssistantApiField({
+        source: "root",
+        query: {},
+        get: () => client.getApi().threads,
+      }),
+      toolUIs: createAssistantApiField({
+        source: "root",
+        query: {},
+        get: () => client.getApi().toolUIs,
+      }),
+      thread: createAssistantApiField({
+        source: "threads",
+        query: { type: "main" },
+        get: () => client.getApi().threads.thread("main"),
+      }),
+      threadListItem: createAssistantApiField({
+        source: "threads",
+        query: { type: "main" },
+        get: () => getItem(),
+      }),
+      composer: createAssistantApiField({
+        source: "thread",
+        query: {},
+        get: () => client.getApi().threads.thread("main").composer,
+      }),
+      registerModelContextProvider(provider: ModelContextProvider) {
+        return client.getApi().registerModelContextProvider(provider);
+      },
+      __internal_getRuntime() {
+        return client.getApi().__internal_getRuntime();
+      },
+      on<TEvent extends keyof AssistantEvents>(
+        selector: AssistantEventSelector<TEvent>,
+        callback: (e: AssistantEvents[TEvent]) => void,
+      ): Unsubscribe {
+        const { event, scope } = normalizeEventSelector(selector);
+        if (scope === "*") return client.getApi().on(event, callback);
+
+        if (
+          checkEventScope("thread", scope, event) ||
+          checkEventScope("thread-list-item", scope, event) ||
+          checkEventScope("composer", scope, event)
+        ) {
+          return client.getApi().on(event, (e) => {
+            if (e.threadId !== getItem().getState().id) return;
+            callback(e);
+          });
+        }
+
+        throw new Error(
+          `Event scope is not available in this component: ${scope}`,
+        );
+      },
+      subscribe: client.subscribe,
+      flushSync: client.flushSync,
+    } satisfies Partial<AssistantApi>;
+  }, [client]);
+
+  return api;
+};

package/src/client/AttachmentClient.ts

@@ -0,0 +1,11 @@
+import { AttachmentRuntime } from "../api";
+import { Attachment } from "../types";
+
+export type AttachmentClientState = Attachment;
+
+export type AttachmentClientActions = {
+  readonly remove: () => Promise<void>;
+
+  /** @internal */
+  __internal_getRuntime(): AttachmentRuntime;
+};

package/src/client/ComposerClient.ts

@@ -0,0 +1,133 @@
+import { resource, tapMemo, tapEffect, RefObject } from "@assistant-ui/tap";
+import { ComposerRuntime, EditComposerRuntime } from "../api/ComposerRuntime";
+import { Attachment, Unsubscribe } from "../types";
+import { MessageRole, RunConfig } from "../types/AssistantTypes";
+import { tapSubscribable } from "./util-hooks/tapSubscribable";
+import { tapApi } from "../utils/tap-store";
+import {
+  AttachmentClientActions,
+  AttachmentClientState,
+} from "./AttachmentClient";
+import { StoreApi } from "../utils/tap-store/tap-store-api";
+import { EventManagerActions } from "./EventManagerClient";
+import { ComposerRuntimeEventType } from "../runtimes/core/ComposerRuntimeCore";
+
+export type ComposerClientState = {
+  readonly text: string;
+  readonly role: MessageRole;
+  readonly attachments: readonly Attachment[];
+  readonly runConfig: RunConfig;
+  readonly isEditing: boolean;
+  readonly canCancel: boolean;
+  readonly attachmentAccept: string;
+  readonly isEmpty: boolean;
+  readonly type: "thread" | "edit";
+};
+
+export type ComposerClientActions = {
+  setText(text: string): void;
+  setRole(role: MessageRole): void;
+  setRunConfig(runConfig: RunConfig): void;
+  addAttachment(file: File): Promise<void>;
+  clearAttachments(): Promise<void>;
+  attachment(selector: {
+    index: number;
+  }): StoreApi<AttachmentClientState, AttachmentClientActions>;
+  reset(): Promise<void>;
+  send(): void;
+  cancel(): void;
+  beginEdit(): void;
+
+  /** @internal */
+  __internal_getRuntime(): ComposerRuntime;
+};
+
+export const ComposerClient = resource(
+  ({
+    threadIdRef,
+    messageIdRef,
+    events,
+    runtime,
+  }: {
+    threadIdRef: RefObject<string>;
+    messageIdRef?: RefObject<string>;
+    runtime: ComposerRuntime;
+    events: EventManagerActions;
+  }) => {
+    const runtimeState = tapSubscribable(runtime);
+
+    // 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 state = tapMemo<ComposerClientState>(() => {
+      return {
+        text: runtimeState.text,
+        role: runtimeState.role,
+        attachments: runtimeState.attachments,
+        runConfig: runtimeState.runConfig,
+        isEditing: runtimeState.isEditing,
+        canCancel: runtimeState.canCancel,
+        attachmentAccept: runtimeState.attachmentAccept,
+        isEmpty: runtimeState.isEmpty,
+        type: runtimeState.type ?? "thread",
+      };
+    }, [runtimeState]);
+
+    const api = tapApi<ComposerClientState, ComposerClientActions>(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: ({ index }) => {
+        const attachmentRuntime = runtime.getAttachmentByIndex(index);
+        return {
+          getState: attachmentRuntime.getState,
+
+          remove: attachmentRuntime.remove,
+
+          __internal_getRuntime: () => runtime.getAttachmentByIndex(index),
+        };
+      },
+
+      __internal_getRuntime: () => runtime,
+    });
+
+    return {
+      state,
+      api,
+    };
+  },
+);

package/src/client/EventManagerClient.ts

@@ -0,0 +1,63 @@
+import { resource, tapState } from "@assistant-ui/tap";
+import { tapApi } from "../utils/tap-store";
+import { AssistantEvents, Unsubscribe } from "../types";
+
+type EventCallback<TEvent extends keyof AssistantEvents> = (
+  payload: AssistantEvents[TEvent],
+) => void;
+
+export type EventManagerActions = {
+  on<TEvent extends keyof AssistantEvents>(
+    event: TEvent,
+    callback: EventCallback<TEvent>,
+  ): Unsubscribe;
+  emit<TEvent extends keyof AssistantEvents>(
+    event: TEvent,
+    payload: AssistantEvents[TEvent],
+  ): void;
+};
+
+export const EventManagerClient = resource(() => {
+  // Map of event name to set of callbacks
+  const [listeners] = tapState<Map<string, Set<EventCallback<any>>>>(
+    () => new Map(),
+  );
+
+  const api = tapApi<Record<string, never>, EventManagerActions>(
+    {},
+    {
+      on: <TEvent extends keyof AssistantEvents>(
+        event: TEvent,
+        callback: EventCallback<TEvent>,
+      ): Unsubscribe => {
+        if (!listeners.has(event)) {
+          listeners.set(event, new Set());
+        }
+
+        const eventListeners = listeners.get(event)!;
+        eventListeners.add(callback);
+
+        return () => {
+          eventListeners.delete(callback);
+          if (eventListeners.size === 0) {
+            listeners.delete(event);
+          }
+        };
+      },
+
+      emit: (event: keyof AssistantEvents, payload: any) => {
+        const eventListeners = listeners.get(event);
+        if (!eventListeners) return;
+
+        // make sure state updates flush
+        queueMicrotask(() => {
+          for (const callback of eventListeners) {
+            callback(payload);
+          }
+        });
+      },
+    },
+  );
+
+  return api;
+});