@assistant-ui/react 0.10.50 → 0.11.0

package/src/client/MessageClient.ts

@@ -0,0 +1,196 @@
+import {
+  resource,
+  tapInlineResource,
+  tapMemo,
+  tapState,
+} from "@assistant-ui/tap";
+import { tapApi } from "../utils/tap-store";
+import { MessageRuntime } from "../api/MessageRuntime";
+import { tapSubscribable } from "./util-hooks/tapSubscribable";
+import {
+  ComposerClient,
+  ComposerClientActions,
+  ComposerClientState,
+} from "./ComposerClient";
+import {
+  MessagePartClient,
+  MessagePartClientActions,
+  MessagePartClientState,
+} from "./MessagePartClient";
+import { ThreadMessage } from "../types";
+import {
+  SpeechState,
+  SubmittedFeedback,
+} from "../runtimes/core/ThreadRuntimeCore";
+import { RunConfig } from "../types/AssistantTypes";
+import { tapLookupResources } from "./util-hooks/tapLookupResources";
+import {
+  AttachmentClientActions,
+  AttachmentClientState,
+} from "./AttachmentClient";
+import { StoreApi } from "../utils/tap-store/tap-store-api";
+import { EventManagerActions } from "./EventManagerClient";
+import { RefObject } from "react";
+
+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 MessageClientActions = {
+  readonly composer: StoreApi<ComposerClientState, ComposerClientActions>;
+
+  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 },
+  ) => StoreApi<MessagePartClientState, MessagePartClientActions>;
+  attachment(selector: {
+    index: number;
+  }): StoreApi<AttachmentClientState, AttachmentClientActions>;
+
+  setIsCopied(value: boolean): void;
+  setIsHovering(value: boolean): void;
+
+  /** @internal */
+  __internal_getRuntime(): MessageRuntime;
+};
+
+const MessagePartByIndex = resource(
+  ({ runtime, index }: { runtime: MessageRuntime; index: number }) => {
+    const partRuntime = tapMemo(
+      () => runtime.getMessagePartByIndex(index),
+      [runtime, index],
+    );
+    return tapInlineResource(MessagePartClient({ runtime: partRuntime }));
+  },
+);
+
+export const MessageClient = resource(
+  ({
+    runtime,
+    events,
+    threadIdRef,
+  }: {
+    runtime: MessageRuntime;
+    events: EventManagerActions;
+    threadIdRef: RefObject<string>;
+  }) => {
+    const runtimeState = tapSubscribable(runtime);
+
+    const [isCopiedState, setIsCopied] = tapState(false);
+    const [isHoveringState, setIsHovering] = tapState(false);
+
+    const messageIdRef = tapMemo(
+      () => ({
+        get current() {
+          return runtime.getState().id;
+        },
+      }),
+      [runtime],
+    );
+
+    const composer = tapInlineResource(
+      ComposerClient({
+        runtime: runtime.composer,
+        events,
+        threadIdRef,
+        messageIdRef,
+      }),
+    );
+
+    const parts = tapLookupResources(
+      runtimeState.content.map((_, idx) =>
+        MessagePartByIndex({ runtime, index: idx }, { key: idx }),
+      ),
+    );
+
+    const state = tapMemo<MessageClientState>(() => {
+      return {
+        ...(runtimeState as MessageClientState),
+
+        parts: parts.state,
+        composer: composer.state,
+
+        isCopied: isCopiedState,
+        isHovering: isHoveringState,
+      };
+    }, [
+      runtimeState,
+      parts.state,
+      composer.state,
+      isCopiedState,
+      isHoveringState,
+    ]);
+
+    const api = tapApi<MessageClientState, MessageClientActions>(state, {
+      composer: composer.api,
+
+      reload: (config) => runtime.reload(config),
+      speak: () => runtime.speak(),
+      stopSpeaking: () => runtime.stopSpeaking(),
+      submitFeedback: (feedback) => runtime.submitFeedback(feedback),
+      switchToBranch: (options) => runtime.switchToBranch(options),
+      getCopyText: () => runtime.unstable_getCopyText(),
+
+      part: (selector) => {
+        if ("index" in selector) {
+          return parts.api({ index: selector.index });
+        } else {
+          return parts.api({ key: "toolCallId-" + selector.toolCallId });
+        }
+      },
+
+      attachment: ({ index }) => {
+        const attachmentRuntime = runtime.getAttachmentByIndex(index);
+        return {
+          getState: attachmentRuntime.getState,
+
+          remove: attachmentRuntime.remove,
+
+          __internal_getRuntime: () => attachmentRuntime,
+        };
+      },
+
+      setIsCopied,
+      setIsHovering,
+
+      __internal_getRuntime: () => runtime,
+    });
+
+    return {
+      key: runtimeState.id,
+      state,
+      api,
+    };
+  },
+);

package/src/client/MessagePartClient.ts

@@ -0,0 +1,53 @@
+import { resource } from "@assistant-ui/tap";
+import { tapApi } from "../utils/tap-store";
+import { MessagePartRuntime } from "../api/MessagePartRuntime";
+import { tapSubscribable } from "./util-hooks/tapSubscribable";
+import {
+  ThreadAssistantMessagePart,
+  ThreadUserMessagePart,
+  MessagePartStatus,
+  ToolCallMessagePartStatus,
+} from "../types/AssistantTypes";
+import { ToolResponse } from "assistant-stream";
+
+export type MessagePartClientState = (
+  | ThreadUserMessagePart
+  | ThreadAssistantMessagePart
+) & {
+  readonly status: MessagePartStatus | ToolCallMessagePartStatus;
+};
+
+export type MessagePartClientActions = {
+  /**
+   * 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;
+};
+
+export const MessagePartClient = resource(
+  ({ runtime }: { runtime: MessagePartRuntime }) => {
+    const runtimeState = tapSubscribable(runtime);
+
+    const api = tapApi<MessagePartClientState, MessagePartClientActions>(
+      runtimeState,
+      {
+        addToolResult: (result) => runtime.addToolResult(result),
+
+        __internal_getRuntime: () => runtime,
+      },
+    );
+
+    return {
+      key:
+        runtimeState.type === "tool-call"
+          ? "toolCallId-" + runtimeState.toolCallId
+          : undefined,
+      state: runtimeState,
+      api,
+    };
+  },
+);

package/src/client/ThreadClient.ts

@@ -0,0 +1,280 @@
+import { ReadonlyJSONValue } from "assistant-stream/utils";
+import {
+  RuntimeCapabilities,
+  SpeechState,
+  ThreadRuntimeEventType,
+  ThreadSuggestion,
+} from "../runtimes/core/ThreadRuntimeCore";
+import { CreateAppendMessage, CreateStartRunConfig } from "../api";
+import { CreateResumeRunConfig, ThreadRuntime } from "../api/ThreadRuntime";
+import {
+  resource,
+  tapInlineResource,
+  tapMemo,
+  tapEffect,
+  RefObject,
+} from "@assistant-ui/tap";
+import { ModelContext } from "../model-context";
+import { ExportedMessageRepository, ThreadMessageLike } from "../runtimes";
+import {
+  ComposerClient,
+  ComposerClientActions,
+  ComposerClientState,
+} from "./ComposerClient";
+import {
+  MessageClient,
+  MessageClientActions,
+  MessageClientState,
+} from "./MessageClient";
+import { tapSubscribable } from "./util-hooks/tapSubscribable";
+import { tapApi } from "../utils/tap-store";
+import { tapLookupResources } from "./util-hooks/tapLookupResources";
+import { StoreApi } from "../utils/tap-store/tap-store-api";
+import { Unsubscribe } from "../types";
+import { EventManagerActions } from "./EventManagerClient";
+
+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 ThreadClientActions = {
+  /**
+   * The thread composer runtime.
+   */
+  readonly composer: StoreApi<ComposerClientState, ComposerClientActions>;
+
+  /**
+   * 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 },
+  ): StoreApi<MessageClientState, MessageClientActions>;
+
+  /**
+   * @deprecated This API is still under active development and might change without notice.
+   */
+  stopSpeaking(): void;
+
+  /** @internal */
+  __internal_getRuntime(): ThreadRuntime;
+};
+
+const MessageClientById = resource(
+  ({
+    runtime,
+    id,
+    events,
+    threadIdRef,
+  }: {
+    runtime: ThreadRuntime;
+    id: string;
+    events: EventManagerActions;
+    threadIdRef: RefObject<string>;
+  }) => {
+    const messageRuntime = tapMemo(
+      () => runtime.getMessageById(id),
+      [runtime, id],
+    );
+
+    return tapInlineResource(
+      MessageClient({ runtime: messageRuntime, events, threadIdRef }),
+    );
+  },
+);
+
+export const ThreadClient = resource(
+  ({
+    runtime,
+    events,
+  }: {
+    runtime: ThreadRuntime;
+    events: EventManagerActions;
+  }) => {
+    const runtimeState = tapSubscribable(runtime);
+
+    // Bind thread events to event manager
+    tapEffect(() => {
+      const unsubscribers: Unsubscribe[] = [];
+
+      // Subscribe to thread events
+      const threadEvents: ThreadRuntimeEventType[] = [
+        "run-start",
+        "run-end",
+        "initialize",
+        "model-context-update",
+      ];
+
+      for (const event of threadEvents) {
+        const unsubscribe = runtime.unstable_on(event, () => {
+          const threadId = runtime.getState()?.threadId || "unknown";
+          events.emit(`thread.${event}`, {
+            threadId,
+          });
+        });
+        unsubscribers.push(unsubscribe);
+      }
+
+      return () => {
+        for (const unsub of unsubscribers) unsub();
+      };
+    }, [runtime, events]);
+
+    const threadIdRef = tapMemo(
+      () => ({
+        get current() {
+          return runtime.getState()!.threadId;
+        },
+      }),
+      [runtime],
+    );
+
+    const composer = tapInlineResource(
+      ComposerClient({
+        runtime: runtime.composer,
+        events,
+        threadIdRef,
+      }),
+    );
+
+    const messages = tapLookupResources(
+      runtimeState.messages.map((m) =>
+        MessageClientById(
+          { runtime: runtime, id: m.id, events, threadIdRef },
+          { key: m.id },
+        ),
+      ),
+    );
+
+    const state = tapMemo<ThreadClientState>(() => {
+      return {
+        isDisabled: runtimeState.isDisabled,
+        isLoading: runtimeState.isLoading,
+        isRunning: runtimeState.isRunning,
+        capabilities: runtimeState.capabilities,
+        state: runtimeState.state,
+        suggestions: runtimeState.suggestions,
+        extras: runtimeState.extras,
+        speech: runtimeState.speech,
+
+        composer: composer.state,
+        messages: messages.state,
+      };
+    }, [runtimeState, messages, composer.state]);
+
+    const api = tapApi<ThreadClientState, ThreadClientActions>(state, {
+      composer: composer.api,
+
+      append: runtime.append,
+      startRun: runtime.startRun,
+      unstable_resumeRun: runtime.unstable_resumeRun,
+      cancelRun: runtime.cancelRun,
+      getModelContext: runtime.getModelContext,
+      export: runtime.export,
+      import: runtime.import,
+      reset: runtime.reset,
+      stopSpeaking: runtime.stopSpeaking,
+
+      message: (selector) => {
+        if ("id" in selector) {
+          return messages.api({ key: selector.id });
+        } else {
+          return messages.api(selector);
+        }
+      },
+
+      __internal_getRuntime: () => runtime,
+    });
+
+    return {
+      state,
+      api,
+    };
+  },
+);

package/src/client/ThreadListClient.ts

@@ -0,0 +1,135 @@
+import { tapApi } from "../utils/tap-store";
+import { resource, tapInlineResource, tapMemo } from "@assistant-ui/tap";
+import { ThreadListRuntime } from "../api/ThreadListRuntime";
+import { tapSubscribable } from "./util-hooks/tapSubscribable";
+import {
+  ThreadListItemClientState,
+  ThreadListItemClientActions,
+  ThreadListItemClient,
+} from "./ThreadListItemClient";
+import {
+  ThreadClient,
+  ThreadClientActions,
+  ThreadClientState,
+} from "./ThreadClient";
+import { StoreApi } from "../utils/tap-store/tap-store-api";
+import { tapLookupResources } from "./util-hooks/tapLookupResources";
+import { EventManagerActions } from "./EventManagerClient";
+
+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 ThreadListClientActions = {
+  switchToThread(threadId: string): void;
+  switchToNewThread(): void;
+  item(
+    threadIdOrOptions:
+      | "main"
+      | { id: string }
+      | { index: number; archived?: boolean },
+  ): StoreApi<ThreadListItemClientState, ThreadListItemClientActions>;
+
+  thread(selector: "main"): StoreApi<ThreadClientState, ThreadClientActions>;
+};
+
+const ThreadListItemClientById = resource(
+  ({
+    runtime,
+    id,
+    events,
+  }: {
+    runtime: ThreadListRuntime;
+    id: string;
+    events: EventManagerActions;
+  }) => {
+    const threadListItemRuntime = tapMemo(
+      () => runtime.getItemById(id),
+      [runtime, id],
+    );
+    return tapInlineResource(
+      ThreadListItemClient({
+        runtime: threadListItemRuntime,
+        events,
+      }),
+    );
+  },
+);
+
+export const ThreadListClient = resource(
+  ({
+    runtime,
+    events,
+  }: {
+    runtime: ThreadListRuntime;
+    events: EventManagerActions;
+  }) => {
+    const runtimeState = tapSubscribable(runtime);
+
+    const main = tapInlineResource(
+      ThreadClient({
+        runtime: runtime.main,
+        events,
+      }),
+    );
+
+    const threadItems = tapLookupResources(
+      Object.keys(runtimeState.threadItems).map((id) =>
+        ThreadListItemClientById({ runtime, id, events }, { key: id }),
+      ),
+    );
+
+    const state = tapMemo<ThreadListClientState>(() => {
+      return {
+        mainThreadId: runtimeState.mainThreadId,
+        newThreadId: runtimeState.newThread,
+        isLoading: runtimeState.isLoading,
+        threadIds: runtimeState.threads,
+        archivedThreadIds: runtimeState.archivedThreads,
+        threadItems: threadItems.state,
+
+        main: main.state,
+      };
+    }, [runtimeState, threadItems.state, main.state]);
+
+    const api = tapApi<ThreadListClientState, ThreadListClientActions>(state, {
+      thread: () => main.api,
+
+      item: (threadIdOrOptions) => {
+        if (threadIdOrOptions === "main") {
+          return threadItems.api({ key: state.mainThreadId });
+        }
+
+        if ("id" in threadIdOrOptions) {
+          return threadItems.api({ key: threadIdOrOptions.id });
+        }
+
+        const { index, archived = false } = threadIdOrOptions;
+        const id = archived
+          ? state.archivedThreadIds[index]!
+          : state.threadIds[index]!;
+        return threadItems.api({ key: id });
+      },
+
+      switchToThread: (threadId) => {
+        runtime.switchToThread(threadId);
+      },
+      switchToNewThread: () => {
+        runtime.switchToNewThread();
+      },
+    });
+
+    return {
+      state,
+      api,
+    };
+  },
+);