@assistant-ui/react 0.11.0 → 0.11.2

package/src/client/AssistantClient.ts

@@ -0,0 +1,168 @@
+import {
+  tapMemo,
+  resource,
+  Unsubscribe,
+  tapInlineResource,
+  ResourceElement,
+  tapResource,
+} from "@assistant-ui/tap";
+import { ThreadListClientApi, ThreadListClientState } from "./types/ThreadList";
+import { AssistantRuntime } from "../legacy-runtime/runtime/AssistantRuntime";
+import { ModelContextProvider } from "../model-context";
+import { asStore, Store, tapApi } from "../utils/tap-store";
+import { useResource } from "@assistant-ui/tap/react";
+import { useMemo } from "react";
+import {
+  AssistantEventSelector,
+  AssistantEvents,
+  checkEventScope,
+  normalizeEventSelector,
+} from "../types/EventTypes";
+import { EventManager } from "../legacy-runtime/client/EventManagerRuntimeClient";
+import {
+  AssistantApi,
+  createAssistantApiField,
+} from "../context/react/AssistantApiContext";
+import { ToolUIClient } from "./ToolUIClient";
+import { withEventsProvider } from "./EventContext";
+import { ToolUIApi, ToolUIState } from "./types/ToolUI";
+
+type AssistantClientState = {
+  readonly threads: ThreadListClientState;
+  readonly toolUIs: ToolUIState;
+};
+
+type AssistantClientApi = {
+  getState(): AssistantClientState;
+
+  readonly threads: ThreadListClientApi;
+  readonly toolUIs: ToolUIApi;
+
+  on<TEvent extends keyof AssistantEvents>(
+    event: keyof AssistantEvents,
+    callback: (e: AssistantEvents[TEvent]) => void,
+  ): Unsubscribe;
+
+  registerModelContextProvider(provider: ModelContextProvider): Unsubscribe;
+
+  /** @internal */
+  __internal_getRuntime(): AssistantRuntime | null;
+};
+
+const AssistantStore = resource(
+  ({
+    threads: threadsEl,
+    registerModelContextProvider,
+    __internal_runtime,
+  }: AssistantClientProps) => {
+    const events = tapInlineResource(EventManager());
+
+    const { threads, toolUIs } = withEventsProvider(events, () => {
+      return {
+        toolUIs: tapInlineResource(ToolUIClient()),
+        threads: tapResource(threadsEl, [threadsEl]),
+      };
+    });
+
+    const state = tapMemo<AssistantClientState>(
+      () => ({
+        threads: threads.state,
+        toolUIs: toolUIs.state,
+      }),
+      [threads.state, toolUIs.state],
+    );
+
+    const api = tapApi<AssistantClientApi>({
+      getState: () => state,
+
+      threads: threads.api,
+      toolUIs: toolUIs.api,
+      on: events.on,
+
+      registerModelContextProvider: registerModelContextProvider,
+      __internal_getRuntime: () => __internal_runtime ?? null,
+    });
+
+    // notify the store of state changes
+    return tapMemo(() => ({ api }), [state]);
+  },
+);
+
+const getClientFromStore = (client: Store<{ api: AssistantClientApi }>) => {
+  const getItem = () => {
+    return client.getState().api.threads.item("main");
+  };
+  return {
+    threads: createAssistantApiField({
+      source: "root",
+      query: {},
+      get: () => client.getState().api.threads,
+    }),
+    toolUIs: createAssistantApiField({
+      source: "root",
+      query: {},
+      get: () => client.getState().api.toolUIs,
+    }),
+    thread: createAssistantApiField({
+      source: "threads",
+      query: { type: "main" },
+      get: () => client.getState().api.threads.thread("main"),
+    }),
+    threadListItem: createAssistantApiField({
+      source: "threads",
+      query: { type: "main" },
+      get: () => getItem(),
+    }),
+    composer: createAssistantApiField({
+      source: "thread",
+      query: {},
+      get: () => client.getState().api.threads.thread("main").composer,
+    }),
+    registerModelContextProvider(provider: ModelContextProvider) {
+      return client.getState().api.registerModelContextProvider(provider);
+    },
+    __internal_getRuntime() {
+      return client.getState().api.__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.getState().api.on(event, callback);
+
+      if (
+        checkEventScope("thread", scope, event) ||
+        checkEventScope("thread-list-item", scope, event) ||
+        checkEventScope("composer", scope, event)
+      ) {
+        return client.getState().api.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>;
+};
+
+type AssistantClientProps = {
+  threads: ResourceElement<{
+    state: ThreadListClientState;
+    api: ThreadListClientApi;
+  }>;
+  registerModelContextProvider: (provider: ModelContextProvider) => Unsubscribe;
+
+  /** @internal */
+  __internal_runtime?: AssistantRuntime;
+};
+
+export const useAssistantClient = (props: AssistantClientProps) => {
+  const client = useResource(asStore(AssistantStore(props)));
+  return useMemo(() => getClientFromStore(client), [client]);
+};

package/src/client/EventContext.ts

@@ -0,0 +1,22 @@
+import {
+  createContext,
+  tapContext,
+  withContextProvider,
+} from "@assistant-ui/tap";
+import { EventManager } from "../legacy-runtime/client/EventManagerRuntimeClient";
+
+const EventsContext = createContext<EventManager | null>(null);
+
+export const withEventsProvider = <TResult>(
+  events: EventManager,
+  fn: () => TResult,
+) => {
+  return withContextProvider(EventsContext, events, fn);
+};
+
+export const tapEvents = () => {
+  const events = tapContext(EventsContext);
+  if (!events) throw new Error("Events context is not available");
+
+  return events;
+};

package/src/client/ToolUIClient.ts

@@ -0,0 +1,34 @@
+import { resource, tapState } from "@assistant-ui/tap";
+import { tapApi } from "../utils/tap-store";
+import { ToolUIState, ToolUIApi } from "./types/ToolUI";
+
+export const ToolUIClient = resource(() => {
+  const [state, setState] = tapState<ToolUIState>(() => ({}));
+
+  const api = tapApi<ToolUIApi>({
+    getState: () => 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,
+  };
+});

package/src/client/types/Attachment.ts

@@ -0,0 +1,13 @@
+import { AttachmentRuntime } from "../../legacy-runtime/runtime";
+import { Attachment } from "../../types";
+
+export type AttachmentClientState = Attachment;
+
+export type AttachmentClientApi = {
+  getState(): AttachmentClientState;
+
+  remove(): Promise<void>;
+
+  /** @internal */
+  __internal_getRuntime(): AttachmentRuntime | null;
+};

package/src/client/types/Composer.ts

@@ -0,0 +1,34 @@
+import { ComposerRuntime } from "../../legacy-runtime/runtime";
+import { Attachment } from "../../types";
+import { MessageRole, RunConfig } from "../../types/AssistantTypes";
+import { AttachmentClientApi } from "./Attachment";
+
+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 ComposerClientApi = {
+  getState(): ComposerClientState;
+
+  setText(text: string): void;
+  setRole(role: MessageRole): void;
+  setRunConfig(runConfig: RunConfig): void;
+  addAttachment(file: File): Promise<void>;
+  clearAttachments(): Promise<void>;
+  attachment(selector: { index: number }): AttachmentClientApi;
+  reset(): Promise<void>;
+  send(): void;
+  cancel(): void;
+  beginEdit(): void;
+
+  /** @internal */
+  __internal_getRuntime(): ComposerRuntime | null;
+};

package/src/client/types/Message.ts

@@ -0,0 +1,66 @@
+import { ComposerClientState, ComposerClientApi } from "./Composer";
+import { MessagePartClientApi, MessagePartClientState } from "./Part";
+import { MessageRuntime } from "../../legacy-runtime/runtime";
+import {
+  SpeechState,
+  SubmittedFeedback,
+} from "../../legacy-runtime/runtime-cores/core/ThreadRuntimeCore";
+import { ThreadMessage } from "../../types";
+import { RunConfig } from "../../types/AssistantTypes";
+import { AttachmentClientApi } from "./Attachment";
+
+export type MessageClientState = ThreadMessage & {
+  readonly parentId: string | null;
+  readonly isLast: boolean;
+
+  readonly branchNumber: number;
+  readonly branchCount: number;
+
+  /**
+   * @deprecated This API is still under active development and might change without notice.
+   */
+  readonly speech: SpeechState | undefined;
+  readonly submittedFeedback: SubmittedFeedback | undefined;
+
+  readonly composer: ComposerClientState;
+  readonly parts: readonly MessagePartClientState[];
+
+  readonly isCopied: boolean;
+  readonly isHovering: boolean;
+};
+
+export type MessageClientApi = {
+  /**
+   * Get the current state of the message.
+   */
+  getState(): MessageClientState;
+
+  readonly composer: ComposerClientApi;
+
+  reload(config?: { runConfig?: RunConfig }): void;
+  /**
+   * @deprecated This API is still under active development and might change without notice.
+   */
+  speak(): void;
+  /**
+   * @deprecated This API is still under active development and might change without notice.
+   */
+  stopSpeaking(): void;
+  submitFeedback(feedback: { type: "positive" | "negative" }): void;
+  switchToBranch(options: {
+    position?: "previous" | "next";
+    branchId?: string;
+  }): void;
+  getCopyText(): string;
+
+  part: (
+    selector: { index: number } | { toolCallId: string },
+  ) => MessagePartClientApi;
+  attachment(selector: { index: number }): AttachmentClientApi;
+
+  setIsCopied(value: boolean): void;
+  setIsHovering(value: boolean): void;
+
+  /** @internal */
+  __internal_getRuntime(): MessageRuntime | null;
+};

package/src/client/types/Part.ts

@@ -0,0 +1,31 @@
+import { ToolResponse } from "assistant-stream";
+import { MessagePartRuntime } from "../../legacy-runtime/runtime";
+import {
+  ThreadUserMessagePart,
+  ThreadAssistantMessagePart,
+  MessagePartStatus,
+  ToolCallMessagePartStatus,
+} from "../../types";
+
+export type MessagePartClientState = (
+  | ThreadUserMessagePart
+  | ThreadAssistantMessagePart
+) & {
+  readonly status: MessagePartStatus | ToolCallMessagePartStatus;
+};
+
+export type MessagePartClientApi = {
+  /**
+   * Get the current state of the message part.
+   */
+  getState(): MessagePartClientState;
+
+  /**
+   * Add tool result to a tool call message part that has no tool result yet.
+   * This is useful when you are collecting a tool result via user input ("human tool calls").
+   */
+  addToolResult(result: any | ToolResponse<any>): void;
+
+  /** @internal */
+  __internal_getRuntime(): MessagePartRuntime | null;
+};

package/src/client/types/Thread.ts

@@ -0,0 +1,135 @@
+import { ReadonlyJSONValue } from "assistant-stream/utils";
+import { ComposerClientState, ComposerClientApi } from "./Composer";
+import { MessageClientApi, MessageClientState } from "./Message";
+import {
+  CreateAppendMessage,
+  CreateStartRunConfig,
+  ThreadRuntime,
+} from "../../legacy-runtime/runtime";
+import {
+  ThreadSuggestion,
+  ExportedMessageRepository,
+  ThreadMessageLike,
+} from "../../legacy-runtime/runtime-cores";
+import {
+  RuntimeCapabilities,
+  SpeechState,
+} from "../../legacy-runtime/runtime-cores/core/ThreadRuntimeCore";
+import { CreateResumeRunConfig } from "../../legacy-runtime/runtime/ThreadRuntime";
+import { ModelContext } from "../../model-context";
+
+export type ThreadClientState = {
+  /**
+   * Whether the thread is disabled. Disabled threads cannot receive new messages.
+   */
+  readonly isDisabled: boolean;
+
+  /**
+   * Whether the thread is loading its history.
+   */
+  readonly isLoading: boolean;
+
+  /**
+   * Whether the thread is running. A thread is considered running when there is an active stream connection to the backend.
+   */
+  readonly isRunning: boolean;
+
+  /**
+   * The capabilities of the thread, such as whether the thread supports editing, branch switching, etc.
+   */
+  readonly capabilities: RuntimeCapabilities;
+
+  /**
+   * The messages in the currently selected branch of the thread.
+   */
+  readonly messages: readonly MessageClientState[];
+
+  /**
+   * The thread state.
+   *
+   * @deprecated This feature is experimental
+   */
+  readonly state: ReadonlyJSONValue;
+
+  /**
+   * Follow up message suggestions to show the user.
+   */
+  readonly suggestions: readonly ThreadSuggestion[];
+
+  /**
+   * Custom extra information provided by the runtime.
+   */
+  readonly extras: unknown;
+
+  /**
+   * @deprecated This API is still under active development and might change without notice.
+   */
+  readonly speech: SpeechState | undefined;
+
+  readonly composer: ComposerClientState;
+};
+
+export type ThreadClientApi = {
+  /**
+   * Get the current state of the thread.
+   */
+  getState(): ThreadClientState;
+
+  /**
+   * The thread composer runtime.
+   */
+  readonly composer: ComposerClientApi;
+
+  /**
+   * Append a new message to the thread.
+   *
+   * @example ```ts
+   * // append a new user message with the text "Hello, world!"
+   * threadRuntime.append("Hello, world!");
+   * ```
+   *
+   * @example ```ts
+   * // append a new assistant message with the text "Hello, world!"
+   * threadRuntime.append({
+   *   role: "assistant",
+   *   content: [{ type: "text", text: "Hello, world!" }],
+   * });
+   * ```
+   */
+  append(message: CreateAppendMessage): void;
+
+  /**
+   * Start a new run with the given configuration.
+   * @param config The configuration for starting the run
+   */
+  startRun(config: CreateStartRunConfig): void;
+
+  /**
+   * Resume a run with the given configuration.
+   * @param config The configuration for resuming the run
+   **/
+  unstable_resumeRun(config: CreateResumeRunConfig): void;
+
+  cancelRun(): void;
+  getModelContext(): ModelContext;
+
+  export(): ExportedMessageRepository;
+  import(repository: ExportedMessageRepository): void;
+
+  /**
+   * Reset the thread with optional initial messages.
+   *
+   * @param initialMessages - Optional array of initial messages to populate the thread
+   */
+  reset(initialMessages?: readonly ThreadMessageLike[]): void;
+
+  message(selector: { id: string } | { index: number }): MessageClientApi;
+
+  /**
+   * @deprecated This API is still under active development and might change without notice.
+   */
+  stopSpeaking(): void;
+
+  /** @internal */
+  __internal_getRuntime(): ThreadRuntime | null;
+};

package/src/client/types/ThreadList.ts

@@ -0,0 +1,32 @@
+import {
+  ThreadListItemClientState,
+  ThreadListItemClientApi,
+} from "./ThreadListItem";
+import { ThreadClientApi, ThreadClientState } from "./Thread";
+
+export type ThreadListClientState = {
+  readonly mainThreadId: string;
+  readonly newThreadId: string | undefined;
+  readonly isLoading: boolean;
+  readonly threadIds: readonly string[];
+  readonly archivedThreadIds: readonly string[];
+
+  readonly threadItems: readonly ThreadListItemClientState[];
+
+  readonly main: ThreadClientState;
+};
+
+export type ThreadListClientApi = {
+  getState(): ThreadListClientState;
+
+  switchToThread(threadId: string): void;
+  switchToNewThread(): void;
+  item(
+    threadIdOrOptions:
+      | "main"
+      | { id: string }
+      | { index: number; archived?: boolean },
+  ): ThreadListItemClientApi;
+
+  thread(selector: "main"): ThreadClientApi;
+};

package/src/client/types/ThreadListItem.ts

@@ -0,0 +1,26 @@
+import { ThreadListItemRuntime } from "../../legacy-runtime/runtime";
+import { ThreadListItemStatus } from "../../types";
+
+export type ThreadListItemClientState = {
+  readonly id: string;
+  readonly remoteId: string | undefined;
+  readonly externalId: string | undefined;
+  readonly title?: string | undefined;
+  readonly status: ThreadListItemStatus;
+};
+
+export type ThreadListItemClientApi = {
+  getState(): ThreadListItemClientState;
+
+  switchTo(): void;
+  rename(newTitle: string): void;
+  archive(): void;
+  unarchive(): void;
+  delete(): void;
+  generateTitle(): void;
+  initialize(): Promise<{ remoteId: string; externalId: string | undefined }>;
+  detach(): void;
+
+  /** @internal */
+  __internal_getRuntime(): ThreadListItemRuntime | null;
+};

package/src/client/types/ToolUI.ts

@@ -0,0 +1,18 @@
+import { Unsubscribe } from "@assistant-ui/tap";
+import { ToolCallMessagePartComponent } from "../../types";
+
+export type ToolUIState = Record<string, ToolCallMessagePartComponent[]>;
+
+export type ToolUIApi = {
+  getState(): ToolUIState;
+
+  setToolUI(
+    toolName: string,
+    render: ToolCallMessagePartComponent,
+  ): Unsubscribe;
+};
+
+export type ToolUIMeta = {
+  source: "root";
+  query: Record<string, never>;
+};

package/src/context/providers/TextMessagePartProvider.tsx

@@ -7,19 +7,13 @@ import {
   createAssistantApiField,
 } from "../react/AssistantApiContext";
 import {
-  MessagePartClientActions,
+  MessagePartClientApi,
   MessagePartClientState,
-} from "../../client/MessagePartClient";
+} from "../../client/types/Part";
 import { resource, tapMemo } from "@assistant-ui/tap";
 import { useResource } from "@assistant-ui/tap/react";
 import { asStore, tapApi } from "../../utils/tap-store";
 
-const TextMessagePartActions = new Proxy({} as MessagePartClientActions, {
-  get() {
-    throw new Error("Not implemented");
-  },
-});
-
 const TextMessagePartClient = resource(
   ({ text, isRunning }: { text: string; isRunning: boolean }) => {
     const state = tapMemo<MessagePartClientState>(
@@ -31,12 +25,15 @@ const TextMessagePartClient = resource(
       [text, isRunning],
     );
 
-    const api = tapApi(state, TextMessagePartActions);
+    const api = tapApi<MessagePartClientApi>({
+      getState: () => state,
+      addToolResult: () => {
+        throw new Error("Not supported");
+      },
+      __internal_getRuntime: () => null,
+    });
 
-    return {
-      state,
-      api,
-    };
+    return api;
   },
 );
 
@@ -54,7 +51,7 @@ export const TextMessagePartProvider: FC<
       part: createAssistantApiField({
         source: "root",
         query: {},
-        get: () => store.getApi(),
+        get: () => store.getState(),
       }),
       subscribe: store.subscribe,
       // flushSync: store.flushSync,

package/src/context/providers/index.ts

@@ -1,4 +1,4 @@
-export { AssistantRuntimeProvider } from "./AssistantRuntimeProvider";
+export { AssistantRuntimeProvider } from "../../legacy-runtime/AssistantRuntimeProvider";
 export {
   ThreadListItemByIndexProvider,
   ThreadListItemByIdProvider,