@assistant-ui/react 0.10.50 → 0.11.1

package/src/legacy-runtime/cloud/AssistantCloudThreadHistoryAdapter.tsx

@@ -0,0 +1,185 @@
+import { RefObject, useState } from "react";
+import { ThreadHistoryAdapter } from "../runtime-cores/adapters/thread-history/ThreadHistoryAdapter";
+import { ExportedMessageRepositoryItem } from "../runtime-cores/utils/MessageRepository";
+import { AssistantCloud } from "assistant-cloud";
+import { auiV0Decode, auiV0Encode } from "./auiV0";
+import {
+  MessageFormatAdapter,
+  MessageFormatItem,
+  MessageFormatRepository,
+  MessageStorageEntry,
+} from "../runtime-cores/adapters/thread-history/MessageFormatAdapter";
+import { GenericThreadHistoryAdapter } from "../runtime-cores/adapters/thread-history/ThreadHistoryAdapter";
+import { ReadonlyJSONObject } from "assistant-stream/utils";
+import {
+  AssistantApi,
+  useAssistantApi,
+} from "../../context/react/AssistantApiContext";
+import { ThreadListItemClientApi } from "../../client/types/ThreadListItem";
+
+// Global WeakMap to store message ID mappings across adapter instances
+const globalMessageIdMapping = new WeakMap<
+  ThreadListItemClientApi,
+  Record<string, string | Promise<string>>
+>();
+
+class FormattedThreadHistoryAdapter<TMessage, TStorageFormat>
+  implements GenericThreadHistoryAdapter<TMessage>
+{
+  constructor(
+    private parent: AssistantCloudThreadHistoryAdapter,
+    private formatAdapter: MessageFormatAdapter<TMessage, TStorageFormat>,
+  ) {}
+
+  async append(item: MessageFormatItem<TMessage>) {
+    // Encode the message using the format adapter
+    const encoded = this.formatAdapter.encode(item);
+    const messageId = this.formatAdapter.getId(item.message);
+
+    // Delegate to parent's internal append method with the encoded format
+    return this.parent._appendWithFormat(
+      item.parentId,
+      messageId,
+      this.formatAdapter.format,
+      encoded,
+    );
+  }
+
+  async load(): Promise<MessageFormatRepository<TMessage>> {
+    // Delegate to parent's internal load method with format filter
+    return this.parent._loadWithFormat(
+      this.formatAdapter.format,
+      (message: MessageStorageEntry<TStorageFormat>) =>
+        this.formatAdapter.decode(message),
+    );
+  }
+}
+
+class AssistantCloudThreadHistoryAdapter implements ThreadHistoryAdapter {
+  constructor(
+    private cloudRef: RefObject<AssistantCloud>,
+    private store: AssistantApi,
+  ) {}
+
+  private get _getIdForLocalId(): Record<string, string | Promise<string>> {
+    if (!globalMessageIdMapping.has(this.store.threadListItem())) {
+      globalMessageIdMapping.set(this.store.threadListItem(), {});
+    }
+    return globalMessageIdMapping.get(this.store.threadListItem())!;
+  }
+
+  withFormat<TMessage, TStorageFormat>(
+    formatAdapter: MessageFormatAdapter<TMessage, TStorageFormat>,
+  ): GenericThreadHistoryAdapter<TMessage> {
+    return new FormattedThreadHistoryAdapter(this, formatAdapter);
+  }
+
+  async append({ parentId, message }: ExportedMessageRepositoryItem) {
+    const { remoteId } = await this.store.threadListItem().initialize();
+    const task = this.cloudRef.current.threads.messages
+      .create(remoteId, {
+        parent_id: parentId
+          ? ((await this._getIdForLocalId[parentId]) ?? parentId)
+          : null,
+        format: "aui/v0",
+        content: auiV0Encode(message),
+      })
+      .then(({ message_id }) => {
+        this._getIdForLocalId[message.id] = message_id;
+        return message_id;
+      });
+
+    this._getIdForLocalId[message.id] = task;
+
+    return task.then(() => {});
+  }
+
+  async load() {
+    const remoteId = this.store.threadListItem().getState().remoteId;
+    if (!remoteId) return { messages: [] };
+    const { messages } = await this.cloudRef.current.threads.messages.list(
+      remoteId,
+      {
+        format: "aui/v0",
+      },
+    );
+    const payload = {
+      messages: messages
+        .filter(
+          (m): m is typeof m & { format: "aui/v0" } => m.format === "aui/v0",
+        )
+        .map(auiV0Decode)
+        .reverse(),
+    };
+    return payload;
+  }
+
+  // Internal methods for FormattedThreadHistoryAdapter
+  async _appendWithFormat<T>(
+    parentId: string | null,
+    messageId: string,
+    format: string,
+    content: T,
+  ) {
+    const { remoteId } = await this.store.threadListItem().initialize();
+
+    const task = this.cloudRef.current.threads.messages
+      .create(remoteId, {
+        parent_id: parentId
+          ? ((await this._getIdForLocalId[parentId]) ?? parentId)
+          : null,
+        format,
+        content: content as ReadonlyJSONObject,
+      })
+      .then(({ message_id }) => {
+        this._getIdForLocalId[messageId] = message_id;
+        return message_id;
+      });
+
+    this._getIdForLocalId[messageId] = task;
+
+    return task.then(() => {});
+  }
+
+  async _loadWithFormat<TMessage, TStorageFormat>(
+    format: string,
+    decoder: (
+      message: MessageStorageEntry<TStorageFormat>,
+    ) => MessageFormatItem<TMessage>,
+  ): Promise<MessageFormatRepository<TMessage>> {
+    const remoteId = this.store.threadListItem().getState().remoteId;
+    if (!remoteId) return { messages: [] };
+
+    const { messages } = await this.cloudRef.current.threads.messages.list(
+      remoteId,
+      {
+        format,
+      },
+    );
+
+    return {
+      messages: messages
+        .filter((m) => m.format === format)
+        .map((m) =>
+          decoder({
+            id: m.id,
+            parent_id: m.parent_id,
+            format: m.format,
+            content: m.content as TStorageFormat,
+          }),
+        )
+        .reverse(),
+    };
+  }
+}
+
+export const useAssistantCloudThreadHistoryAdapter = (
+  cloudRef: RefObject<AssistantCloud>,
+): ThreadHistoryAdapter => {
+  const store = useAssistantApi();
+  const [adapter] = useState(
+    () => new AssistantCloudThreadHistoryAdapter(cloudRef, store),
+  );
+
+  return adapter;
+};

package/src/legacy-runtime/cloud/auiV0.ts

@@ -0,0 +1,158 @@
+import { ThreadMessage } from "../../types";
+import { MessageStatus } from "../../types/AssistantTypes";
+import { fromThreadMessageLike } from "../runtime-cores/external-store/ThreadMessageLike";
+import { CloudMessage } from "assistant-cloud";
+import { isJSONValue } from "../../utils/json/is-json";
+import { ReadonlyJSONObject, ReadonlyJSONValue } from "assistant-stream/utils";
+import { ExportedMessageRepositoryItem } from "../runtime-cores/utils/MessageRepository";
+
+type AuiV0MessageMessagePart =
+  | {
+      readonly type: "text";
+      readonly text: string;
+    }
+  | {
+      readonly type: "reasoning";
+      readonly text: string;
+    }
+  | {
+      readonly type: "source";
+      readonly sourceType: "url";
+      readonly id: string;
+      readonly url: string;
+      readonly title?: string;
+    }
+  | {
+      readonly type: "tool-call";
+      readonly toolCallId: string;
+      readonly toolName: string;
+      readonly args: ReadonlyJSONObject;
+      readonly result?: ReadonlyJSONValue;
+      readonly isError?: true;
+    }
+  | {
+      readonly type: "tool-call";
+      readonly toolCallId: string;
+      readonly toolName: string;
+      readonly argsText: string;
+      readonly result?: ReadonlyJSONValue;
+      readonly isError?: true;
+    };
+
+type AuiV0Message = {
+  readonly role: "assistant" | "user" | "system";
+  readonly status?: MessageStatus;
+  readonly content: readonly AuiV0MessageMessagePart[];
+  readonly metadata: {
+    readonly unstable_state?: ReadonlyJSONValue;
+    readonly unstable_annotations: readonly ReadonlyJSONValue[];
+    readonly unstable_data: readonly ReadonlyJSONValue[];
+    readonly steps: readonly {
+      readonly usage?: {
+        readonly promptTokens: number;
+        readonly completionTokens: number;
+      };
+    }[];
+    readonly custom: ReadonlyJSONObject;
+  };
+};
+
+export const auiV0Encode = (message: ThreadMessage): AuiV0Message => {
+  // TODO attachments are currently intentionally ignored
+  // info: ID and createdAt are ignored (we use the server value instead)
+  return {
+    role: message.role,
+    content: message.content.map((part) => {
+      const type = part.type;
+      switch (type) {
+        case "text": {
+          return {
+            type: "text",
+            text: part.text,
+          };
+        }
+
+        case "reasoning": {
+          return {
+            type: "reasoning",
+            text: part.text,
+          };
+        }
+
+        case "source": {
+          return {
+            type: "source",
+            sourceType: part.sourceType,
+            id: part.id,
+            url: part.url,
+            ...(part.title ? { title: part.title } : undefined),
+          };
+        }
+
+        case "tool-call": {
+          if (!isJSONValue(part.result)) {
+            console.warn(
+              "tool-call result is not JSON! " + JSON.stringify(part),
+            );
+          }
+          return {
+            type: "tool-call",
+            toolCallId: part.toolCallId,
+            toolName: part.toolName,
+            ...(JSON.stringify(part.args) === part.argsText
+              ? {
+                  args: part.args,
+                }
+              : { argsText: part.argsText }),
+            ...(part.result
+              ? { result: part.result as ReadonlyJSONValue }
+              : {}),
+            ...(part.isError ? { isError: true } : {}),
+          };
+        }
+
+        default: {
+          const unhandledType: "image" | "file" | "audio" = type;
+          throw new Error(
+            `Message part type not supported by aui/v0: ${unhandledType}`,
+          );
+        }
+      }
+    }),
+    metadata: message.metadata as AuiV0Message["metadata"],
+    ...(message.status
+      ? {
+          status:
+            message.status?.type === "running"
+              ? {
+                  type: "incomplete",
+                  reason: "cancelled",
+                }
+              : message.status,
+        }
+      : undefined),
+  };
+};
+
+export const auiV0Decode = (
+  cloudMessage: CloudMessage & { format: "aui/v0" },
+): ExportedMessageRepositoryItem => {
+  const payload = cloudMessage.content as unknown as AuiV0Message;
+  const message = fromThreadMessageLike(
+    {
+      id: cloudMessage.id,
+      createdAt: cloudMessage.created_at,
+      ...payload,
+    },
+    cloudMessage.id,
+    {
+      type: "complete",
+      reason: "unknown",
+    },
+  );
+
+  return {
+    parentId: cloudMessage.parent_id,
+    message,
+  };
+};

package/src/legacy-runtime/cloud/useCloudThreadListRuntime.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { AssistantCloud } from "assistant-cloud";
+import { AssistantRuntime } from "../runtime";
+import { useRemoteThreadListRuntime } from "../runtime-cores/remote-thread-list/useRemoteThreadListRuntime";
+import { useCloudThreadListAdapter } from "../runtime-cores/remote-thread-list/adapter/cloud";
+
+type ThreadData = {
+  externalId: string;
+};
+
+type CloudThreadListAdapter = {
+  cloud: AssistantCloud;
+
+  runtimeHook: () => AssistantRuntime;
+
+  create?(): Promise<ThreadData>;
+  delete?(threadId: string): Promise<void>;
+};
+
+export const useCloudThreadListRuntime = ({
+  runtimeHook,
+  ...adapterOptions
+}: CloudThreadListAdapter) => {
+  const adapter = useCloudThreadListAdapter(adapterOptions);
+  const runtime = useRemoteThreadListRuntime({
+    runtimeHook: runtimeHook,
+    adapter,
+  });
+
+  return runtime;
+};

package/src/legacy-runtime/hooks/AssistantContext.ts

@@ -0,0 +1,53 @@
+"use client";
+
+import { useAssistantApi } from "../../context/react/AssistantApiContext";
+import { AssistantRuntime } from "../runtime/AssistantRuntime";
+import type { ThreadListRuntime } from "../runtime/ThreadListRuntime";
+import { createStateHookForRuntime } from "../../context/react/utils/createStateHookForRuntime";
+
+/**
+ * Hook to access the AssistantRuntime from the current context.
+ *
+ * The AssistantRuntime provides access to the top-level assistant state and actions,
+ * including thread management, tool registration, and configuration.
+ *
+ * @param options Configuration options
+ * @param options.optional Whether the hook should return null if no context is found
+ * @returns The AssistantRuntime instance, or null if optional is true and no context exists
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const runtime = useAssistantRuntime();
+ *
+ *   const handleNewThread = () => {
+ *     runtime.switchToNewThread();
+ *   };
+ *
+ *   return <button onClick={handleNewThread}>New Thread</button>;
+ * }
+ * ```
+ */
+export function useAssistantRuntime(options?: {
+  optional?: false | undefined;
+}): AssistantRuntime;
+export function useAssistantRuntime(options?: {
+  optional?: boolean | undefined;
+}): AssistantRuntime | null;
+export function useAssistantRuntime(options?: {
+  optional?: boolean | undefined;
+}) {
+  const api = useAssistantApi();
+  const runtime = api.__internal_getRuntime();
+
+  if (!runtime && !options?.optional) {
+    throw new Error("AssistantRuntime is not available");
+  }
+
+  return runtime;
+}
+
+const useThreadListRuntime = (opt: {
+  optional: boolean | undefined;
+}): ThreadListRuntime | null => useAssistantRuntime(opt)?.threads ?? null;
+export const useThreadList = createStateHookForRuntime(useThreadListRuntime);

package/src/legacy-runtime/hooks/AttachmentContext.ts

@@ -0,0 +1,91 @@
+"use client";
+
+import { AttachmentRuntime } from "../runtime/AttachmentRuntime";
+import { createStateHookForRuntime } from "../../context/react/utils/createStateHookForRuntime";
+import { useAssistantApi } from "../../context/react";
+
+export function useAttachmentRuntime(options?: {
+  optional?: false | undefined;
+}): AttachmentRuntime;
+export function useAttachmentRuntime(options?: {
+  optional?: boolean | undefined;
+}): AttachmentRuntime | null;
+export function useAttachmentRuntime(options?: {
+  optional?: boolean | undefined;
+}): AttachmentRuntime | null {
+  const api = useAssistantApi();
+  const runtime = api.attachment.source
+    ? api.attachment().__internal_getRuntime()
+    : null;
+  if (!runtime && !options?.optional) {
+    throw new Error("AttachmentRuntime is not available");
+  }
+  return runtime;
+}
+
+export function useThreadComposerAttachmentRuntime(options?: {
+  optional?: false | undefined;
+}): AttachmentRuntime<"thread-composer">;
+export function useThreadComposerAttachmentRuntime(options?: {
+  optional?: boolean | undefined;
+}): AttachmentRuntime<"thread-composer"> | null;
+export function useThreadComposerAttachmentRuntime(options?: {
+  optional?: boolean | undefined;
+}): AttachmentRuntime<"thread-composer"> | null {
+  const attachmentRuntime = useAttachmentRuntime(options);
+  if (!attachmentRuntime) return null;
+  if (attachmentRuntime.source !== "thread-composer")
+    throw new Error(
+      "This component must be used within a thread's ComposerPrimitive.Attachments component.",
+    );
+  return attachmentRuntime as AttachmentRuntime<"thread-composer">;
+}
+
+export function useEditComposerAttachmentRuntime(options?: {
+  optional?: false | undefined;
+}): AttachmentRuntime<"edit-composer">;
+export function useEditComposerAttachmentRuntime(options?: {
+  optional?: boolean | undefined;
+}): AttachmentRuntime<"edit-composer"> | null;
+export function useEditComposerAttachmentRuntime(options?: {
+  optional?: boolean | undefined;
+}): AttachmentRuntime<"edit-composer"> | null {
+  const attachmentRuntime = useAttachmentRuntime(options);
+  if (!attachmentRuntime) return null;
+  if (attachmentRuntime.source !== "edit-composer")
+    throw new Error(
+      "This component must be used within a message's ComposerPrimitive.Attachments component.",
+    );
+
+  return attachmentRuntime as AttachmentRuntime<"edit-composer">;
+}
+
+export function useMessageAttachmentRuntime(options?: {
+  optional?: false | undefined;
+}): AttachmentRuntime<"message">;
+export function useMessageAttachmentRuntime(options?: {
+  optional?: boolean | undefined;
+}): AttachmentRuntime<"message"> | null;
+export function useMessageAttachmentRuntime(options?: {
+  optional?: boolean | undefined;
+}): AttachmentRuntime<"message"> | null {
+  const attachmentRuntime = useAttachmentRuntime(options);
+  if (!attachmentRuntime) return null;
+  if (attachmentRuntime.source !== "message")
+    throw new Error(
+      "This component must be used within a MessagePrimitive.Attachments component.",
+    );
+  return attachmentRuntime as AttachmentRuntime<"message">;
+}
+
+export const useAttachment = createStateHookForRuntime(useAttachmentRuntime);
+
+export const useThreadComposerAttachment = createStateHookForRuntime(
+  useThreadComposerAttachmentRuntime,
+);
+export const useEditComposerAttachment = createStateHookForRuntime(
+  useEditComposerAttachmentRuntime,
+);
+export const useMessageAttachment = createStateHookForRuntime(
+  useMessageAttachmentRuntime,
+);

package/src/legacy-runtime/hooks/ComposerContext.ts

@@ -0,0 +1,90 @@
+"use client";
+
+import { useAssistantApi } from "../../context/react";
+import { ComposerRuntime } from "../runtime/ComposerRuntime";
+import { createStateHookForRuntime } from "../../context/react/utils/createStateHookForRuntime";
+
+/**
+ * Hook to access the ComposerRuntime from the current context.
+ *
+ * The ComposerRuntime provides access to composer state and actions for message
+ * composition, including text input, attachments, and sending functionality.
+ * This hook automatically resolves to either the message's edit composer or
+ * the thread's main composer depending on the context.
+ *
+ * @param options Configuration options
+ * @param options.optional Whether the hook should return null if no context is found
+ * @returns The ComposerRuntime instance, or null if optional is true and no context exists
+ *
+ * @example
+ * ```tsx
+ * function ComposerActions() {
+ *   const runtime = useComposerRuntime();
+ *
+ *   const handleSend = () => {
+ *     if (runtime.getState().canSend) {
+ *       runtime.send();
+ *     }
+ *   };
+ *
+ *   const handleCancel = () => {
+ *     if (runtime.getState().canCancel) {
+ *       runtime.cancel();
+ *     }
+ *   };
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={handleSend}>Send</button>
+ *       <button onClick={handleCancel}>Cancel</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export function useComposerRuntime(options?: {
+  optional?: false | undefined;
+}): ComposerRuntime;
+export function useComposerRuntime(options?: {
+  optional?: boolean | undefined;
+}): ComposerRuntime | null;
+export function useComposerRuntime(options?: {
+  optional?: boolean | undefined;
+}): ComposerRuntime | null {
+  const api = useAssistantApi();
+  const runtime = api.composer.source
+    ? api.composer().__internal_getRuntime()
+    : null;
+  if (!runtime && !options?.optional) {
+    throw new Error("ComposerRuntime is not available");
+  }
+  return runtime;
+}
+
+/**
+ * Hook to access the current composer state.
+ *
+ * This hook provides reactive access to the composer's state, including text content,
+ * attachments, editing status, and send/cancel capabilities.
+ *
+ * @param selector Optional selector function to pick specific state properties
+ * @returns The selected composer state or the entire composer state if no selector provided
+ *
+ * @example
+ * ```tsx
+ * function ComposerStatus() {
+ *   const text = useComposer((state) => state.text);
+ *   const canSend = useComposer((state) => state.canSend);
+ *   const attachmentCount = useComposer((state) => state.attachments.length);
+ *
+ *   return (
+ *     <div>
+ *       Text: {text.length} chars,
+ *       Attachments: {attachmentCount},
+ *       Can send: {canSend}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export const useComposer = createStateHookForRuntime(useComposerRuntime);

package/src/legacy-runtime/hooks/MessageContext.ts

@@ -0,0 +1,90 @@
+"use client";
+
+import { MessageRuntime } from "../runtime/MessageRuntime";
+import { useAssistantApi } from "../../context/react";
+import { createStateHookForRuntime } from "../../context/react/utils/createStateHookForRuntime";
+import { EditComposerRuntime } from "../runtime";
+
+/**
+ * Hook to access the MessageRuntime from the current context.
+ *
+ * The MessageRuntime provides access to message-level state and actions,
+ * including message content, status, editing capabilities, and branching.
+ *
+ * @param options Configuration options
+ * @param options.optional Whether the hook should return null if no context is found
+ * @returns The MessageRuntime instance, or null if optional is true and no context exists
+ *
+ * @example
+ * ```tsx
+ * function MessageActions() {
+ *   const runtime = useMessageRuntime();
+ *
+ *   const handleReload = () => {
+ *     runtime.reload();
+ *   };
+ *
+ *   const handleEdit = () => {
+ *     runtime.startEdit();
+ *   };
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={handleReload}>Reload</button>
+ *       <button onClick={handleEdit}>Edit</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export function useMessageRuntime(options?: {
+  optional?: false | undefined;
+}): MessageRuntime;
+export function useMessageRuntime(options?: {
+  optional?: boolean | undefined;
+}): MessageRuntime | null;
+export function useMessageRuntime(options?: {
+  optional?: boolean | undefined;
+}) {
+  const api = useAssistantApi();
+  const runtime = api.message.source
+    ? api.message().__internal_getRuntime()
+    : null;
+  if (!runtime && !options?.optional) {
+    throw new Error("MessageRuntime is not available");
+  }
+  return runtime;
+}
+
+/**
+ * Hook to access the current message state.
+ *
+ * This hook provides reactive access to the message's state, including content,
+ * role, status, and other message-level properties.
+ *
+ * @param selector Optional selector function to pick specific state properties
+ * @returns The selected message state or the entire message state if no selector provided
+ *
+ * @example
+ * ```tsx
+ * function MessageContent() {
+ *   const role = useMessage((state) => state.role);
+ *   const content = useMessage((state) => state.content);
+ *   const isLoading = useMessage((state) => state.status.type === "running");
+ *
+ *   return (
+ *     <div className={`message-${role}`}>
+ *       {isLoading ? "Loading..." : content.map(part => part.text).join("")}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export const useMessage = createStateHookForRuntime(useMessageRuntime);
+
+const useEditComposerRuntime = (opt: {
+  optional: boolean | undefined;
+}): EditComposerRuntime | null => useMessageRuntime(opt)?.composer ?? null;
+export const useEditComposer = createStateHookForRuntime(
+  useEditComposerRuntime,
+);