@assistant-ui/react 0.12.3 → 0.12.6

package/src/client/InMemoryThreadList.ts

@@ -0,0 +1,197 @@
+import { resource, tapState, tapMemo } from "@assistant-ui/tap";
+import {
+  type ClientOutput,
+  tapClientLookup,
+  Derived,
+  attachDefaultPeers,
+  tapClientResource,
+} from "@assistant-ui/store";
+import { withKey } from "@assistant-ui/tap";
+import type { ResourceElement } from "@assistant-ui/tap";
+import type { ThreadState } from "../types/scopes/thread";
+import { Suggestions } from "./Suggestions";
+import { ModelContext } from "./ModelContextClient";
+import { Tools } from "./Tools";
+
+export type InMemoryThreadListProps = {
+  thread: (threadId: string) => ResourceElement<ClientOutput<"thread">>;
+  onSwitchToThread?: (threadId: string) => void;
+  onSwitchToNewThread?: () => void;
+};
+
+type ThreadData = {
+  id: string;
+  title?: string;
+  status: "regular" | "archived";
+};
+
+// ThreadListItem Client
+const ThreadListItemClient = resource(
+  (props: {
+    data: ThreadData;
+    onSwitchTo: () => void;
+    onArchive: () => void;
+    onUnarchive: () => void;
+    onDelete: () => void;
+  }): ClientOutput<"threadListItem"> => {
+    const { data, onSwitchTo, onArchive, onUnarchive, onDelete } = props;
+    const state = tapMemo(
+      () => ({
+        id: data.id,
+        remoteId: undefined,
+        externalId: undefined,
+        title: data.title,
+        status: data.status,
+      }),
+      [data.id, data.title, data.status],
+    );
+
+    return {
+      state,
+      methods: {
+        getState: () => state,
+        switchTo: onSwitchTo,
+        rename: () => {},
+        archive: onArchive,
+        unarchive: onUnarchive,
+        delete: onDelete,
+        generateTitle: () => {},
+        initialize: async () => ({ remoteId: data.id, externalId: undefined }),
+        detach: () => {},
+      },
+    };
+  },
+);
+
+// InMemoryThreadList Client
+export const InMemoryThreadList = resource(
+  (props: InMemoryThreadListProps): ClientOutput<"threads"> => {
+    const {
+      thread: threadFactory,
+      onSwitchToThread,
+      onSwitchToNewThread,
+    } = props;
+
+    const [mainThreadId, setMainThreadId] = tapState("main");
+    const [threads, setThreads] = tapState<readonly ThreadData[]>(() => [
+      { id: "main", title: "Main Thread", status: "regular" },
+    ]);
+
+    const handleSwitchToThread = (threadId: string) => {
+      setMainThreadId(threadId);
+      onSwitchToThread?.(threadId);
+    };
+
+    const handleArchive = (threadId: string) => {
+      setThreads((prev) =>
+        prev.map((t) =>
+          t.id === threadId ? { ...t, status: "archived" as const } : t,
+        ),
+      );
+    };
+
+    const handleUnarchive = (threadId: string) => {
+      setThreads((prev) =>
+        prev.map((t) =>
+          t.id === threadId ? { ...t, status: "regular" as const } : t,
+        ),
+      );
+    };
+
+    const handleDelete = (threadId: string) => {
+      setThreads((prev) => prev.filter((t) => t.id !== threadId));
+      if (mainThreadId === threadId) {
+        const remaining = threads.filter((t) => t.id !== threadId);
+        setMainThreadId(remaining[0]?.id || "main");
+      }
+    };
+
+    const handleSwitchToNewThread = () => {
+      const newId = `thread-${Date.now()}`;
+      setThreads((prev) => [
+        ...prev,
+        { id: newId, title: "New Thread", status: "regular" },
+      ]);
+      setMainThreadId(newId);
+      onSwitchToNewThread?.();
+    };
+
+    const threadListItems = tapClientLookup(
+      () =>
+        threads.map((t) =>
+          withKey(
+            t.id,
+            ThreadListItemClient({
+              data: t,
+              onSwitchTo: () => handleSwitchToThread(t.id),
+              onArchive: () => handleArchive(t.id),
+              onUnarchive: () => handleUnarchive(t.id),
+              onDelete: () => handleDelete(t.id),
+            }),
+          ),
+        ),
+      [threads],
+    );
+
+    // Create the main thread
+    const mainThreadClient = tapClientResource(threadFactory(mainThreadId));
+
+    const state = tapMemo(() => {
+      const regularThreads = threads.filter((t) => t.status === "regular");
+      const archivedThreads = threads.filter((t) => t.status === "archived");
+      const mainThreadState = mainThreadClient.state as ThreadState;
+
+      return {
+        mainThreadId,
+        newThreadId: null,
+        isLoading: false,
+        threadIds: regularThreads.map((t) => t.id),
+        archivedThreadIds: archivedThreads.map((t) => t.id),
+        threadItems: threadListItems.state,
+        main: mainThreadState,
+      };
+    }, [mainThreadId, threads, threadListItems.state, mainThreadClient.state]);
+
+    return {
+      state,
+      methods: {
+        getState: () => state,
+        switchToThread: handleSwitchToThread,
+        switchToNewThread: handleSwitchToNewThread,
+        item: (selector) => {
+          if (selector === "main") {
+            const index = threads.findIndex((t) => t.id === mainThreadId);
+            return threadListItems.get({ index: index === -1 ? 0 : index });
+          }
+          if ("id" in selector) {
+            const index = threads.findIndex((t) => t.id === selector.id);
+            return threadListItems.get({ index });
+          }
+          return threadListItems.get(selector);
+        },
+        thread: () => mainThreadClient.methods,
+      },
+    };
+  },
+);
+
+attachDefaultPeers(InMemoryThreadList, {
+  thread: Derived({
+    source: "threads",
+    query: { type: "main" },
+    get: (aui) => aui.threads().thread("main"),
+  }),
+  threadListItem: Derived({
+    source: "threads",
+    query: { type: "main" },
+    get: (aui) => aui.threads().item("main"),
+  }),
+  composer: Derived({
+    source: "thread",
+    query: {},
+    get: (aui) => aui.threads().thread("main").composer,
+  }),
+  modelContext: ModelContext(),
+  tools: Tools({}),
+  suggestions: Suggestions(),
+});

package/src/client/index.ts

@@ -0,0 +1,12 @@
+export { ModelContext as ModelContextClient } from "./ModelContextClient";
+export { Tools } from "./Tools";
+export { Suggestions, type SuggestionConfig } from "./Suggestions";
+export {
+  ExternalThread,
+  type ExternalThreadProps,
+  type ExternalThreadMessage,
+} from "./ExternalThread";
+export {
+  InMemoryThreadList,
+  type InMemoryThreadListProps,
+} from "./InMemoryThreadList";

package/src/devtools/index.ts

@@ -1 +1 @@
-export { DevToolsHooks } from "./DevToolsHooks";
+export { DevToolsHooks, DevToolsProviderApi } from "./DevToolsHooks";

package/src/index.ts

@@ -25,6 +25,7 @@ export * from "./model-context";
 export * from "./primitives";
 export * from "./types";
 export * from "./devtools";
+export * from "./client";
 
 export * as INTERNAL from "./internal";
 export type { ToolExecutionStatus } from "./internal";

package/src/legacy-runtime/AssistantRuntimeProvider.tsx

@@ -1,11 +1,12 @@
 "use client";
 
-import { FC, memo, PropsWithChildren } from "react";
+import { FC, memo, PropsWithChildren, useEffect } from "react";
 import { useAui, AuiProvider, AssistantClient } from "@assistant-ui/store";
 import { AssistantRuntime } from "./runtime/AssistantRuntime";
 import { AssistantRuntimeCore } from "./runtime-cores/core/AssistantRuntimeCore";
 import { RuntimeAdapter } from "./RuntimeAdapter";
 import { ThreadPrimitiveViewportProvider } from "../context/providers/ThreadViewportProvider";
+import { DevToolsProviderApi } from "../devtools";
 
 export namespace AssistantRuntimeProvider {
   export type Props = PropsWithChildren<{
@@ -30,6 +31,15 @@ export const AssistantRuntimeProviderImpl: FC<
 > = ({ children, aui: parent = null, runtime }) => {
   const aui = useAui({ threads: RuntimeAdapter(runtime) }, { parent: parent });
 
+  useEffect(() => {
+    if (
+      typeof process === "undefined" ||
+      process.env["NODE_ENV"] === "production"
+    )
+      return;
+    return DevToolsProviderApi.register(aui);
+  }, [aui]);
+
   const RenderComponent = getRenderComponent(runtime);
 
   return (

package/src/legacy-runtime/runtime/ThreadRuntime.ts

@@ -256,8 +256,25 @@ export type ThreadRuntime = {
    **/
   unstable_resumeRun(config: CreateResumeRunConfig): void;
 
+  /**
+   * Export the thread state in the external store format.
+   * For AI SDK runtimes, this returns the AI SDK message format.
+   * For other runtimes, this may return different formats or throw an error.
+   * @returns The thread state in the external format (typed as any)
+   */
+  exportExternalState(): any;
+
+  /**
+   * Import thread state from the external store format.
+   * For AI SDK runtimes, this accepts AI SDK messages.
+   * For other runtimes, this may accept different formats or throw an error.
+   * @param state The thread state in the external format (typed as any)
+   */
+  importExternalState(state: any): void;
+
   /**
    * Load external state into the thread.
+   * @deprecated Use importExternalState instead. This method will be removed in 0.12.0.
    * @param state The state to load into the thread
    */
   unstable_loadExternalState(state: any): void;
@@ -354,6 +371,8 @@ export class ThreadRuntimeImpl implements ThreadRuntime {
     this.unstable_resumeRun = this.unstable_resumeRun.bind(this);
     this.unstable_loadExternalState =
       this.unstable_loadExternalState.bind(this);
+    this.importExternalState = this.importExternalState.bind(this);
+    this.exportExternalState = this.exportExternalState.bind(this);
     this.startRun = this.startRun.bind(this);
     this.cancelRun = this.cancelRun.bind(this);
     this.stopSpeaking = this.stopSpeaking.bind(this);
@@ -407,6 +426,14 @@ export class ThreadRuntimeImpl implements ThreadRuntime {
     return this._threadBinding.getState().resumeRun(toResumeRunConfig(config));
   }
 
+  public exportExternalState() {
+    return this._threadBinding.getState().exportExternalState();
+  }
+
+  public importExternalState(state: any) {
+    this._threadBinding.getState().importExternalState(state);
+  }
+
   public unstable_loadExternalState(state: any) {
     this._threadBinding.getState().unstable_loadExternalState(state);
   }

package/src/legacy-runtime/runtime-cores/core/BaseThreadRuntimeCore.tsx

@@ -48,6 +48,8 @@ export abstract class BaseThreadRuntimeCore implements ThreadRuntimeCore {
   public abstract addToolResult(options: AddToolResultOptions): void;
   public abstract resumeToolCall(options: ResumeToolCallOptions): void;
   public abstract cancelRun(): void;
+  public abstract exportExternalState(): any;
+  public abstract importExternalState(state: any): void;
   public abstract unstable_loadExternalState(state: any): void;
 
   public get messages() {

package/src/legacy-runtime/runtime-cores/core/ThreadRuntimeCore.tsx

@@ -127,8 +127,28 @@ export type ThreadRuntimeCore = Readonly<{
   import(repository: ExportedMessageRepository): void;
   export(): ExportedMessageRepository;
 
+  /**
+   * Export the thread state in the external store format.
+   * For AI SDK runtimes, this returns the AI SDK message format.
+   * For other runtimes, this may return different formats or throw an error.
+   * @returns The thread state in the external format (typed as any)
+   */
+  exportExternalState(): any;
+
+  /**
+   * Import thread state from the external store format.
+   * For AI SDK runtimes, this accepts AI SDK messages.
+   * For other runtimes, this may accept different formats or throw an error.
+   * @param state The thread state in the external format (typed as any)
+   */
+  importExternalState(state: any): void;
+
   reset(initialMessages?: readonly ThreadMessageLike[]): void;
 
   unstable_on(event: ThreadRuntimeEventType, callback: () => void): Unsubscribe;
+
+  /**
+   * @deprecated Use importExternalState instead. This method will be removed in 0.12.0.
+   */
   unstable_loadExternalState: (state: any) => void;
 }>;

package/src/legacy-runtime/runtime-cores/external-store/ExternalStoreAdapter.tsx

@@ -69,6 +69,7 @@ type ExternalStoreAdapterBase<T> = {
 
   setMessages?: ((messages: readonly T[]) => void) | undefined;
   onImport?: ((messages: readonly ThreadMessage[]) => void) | undefined;
+  onExportExternalState?: (() => any) | undefined;
   onLoadExternalState?: ((state: any) => void) | undefined;
   onNew: (message: AppendMessage) => Promise<void>;
   onEdit?: ((message: AppendMessage) => Promise<void>) | undefined;

package/src/legacy-runtime/runtime-cores/external-store/ExternalStoreThreadRuntimeCore.tsx

@@ -275,13 +275,24 @@ export class ExternalStoreThreadRuntimeCore
     await this._store.onResume(config);
   }
 
-  public unstable_loadExternalState(state: any): void {
+  public exportExternalState(): any {
+    if (!this._store.onExportExternalState)
+      throw new Error("Runtime does not support exporting external states.");
+
+    return this._store.onExportExternalState();
+  }
+
+  public importExternalState(state: any): void {
     if (!this._store.onLoadExternalState)
-      throw new Error("Runtime does not support importing states.");
+      throw new Error("Runtime does not support importing external states.");
 
     this._store.onLoadExternalState(state);
   }
 
+  public unstable_loadExternalState(state: any): void {
+    this.importExternalState(state);
+  }
+
   public cancelRun(): void {
     if (!this._store.onCancel)
       throw new Error("Runtime does not support cancelling runs.");

package/src/legacy-runtime/runtime-cores/local/LocalThreadRuntimeCore.tsx

@@ -203,6 +203,14 @@ export class LocalThreadRuntimeCore
     return this.startRun(startConfig, stream);
   }
 
+  public exportExternalState(): any {
+    throw new Error("Runtime does not support exporting external states.");
+  }
+
+  public importExternalState(): void {
+    throw new Error("Runtime does not support importing external states.");
+  }
+
   public unstable_loadExternalState(): void {
     throw new Error("Runtime does not support importing external states.");
   }

package/src/legacy-runtime/runtime-cores/remote-thread-list/EMPTY_THREAD_CORE.tsx

@@ -56,6 +56,14 @@ export const EMPTY_THREAD_CORE: ThreadRuntimeCore = {
     return {};
   },
 
+  exportExternalState() {
+    throw EMPTY_THREAD_ERROR;
+  },
+
+  importExternalState() {
+    throw EMPTY_THREAD_ERROR;
+  },
+
   unstable_loadExternalState() {
     throw EMPTY_THREAD_ERROR;
   },

package/src/primitives/message/MessagePartsGrouped.tsx

@@ -265,7 +265,7 @@ const MessagePartComponent: FC<MessagePartComponentProps> = ({
 
   const type = part.type;
   if (type === "tool-call") {
-    const addResult = (result: any) => aui.part().addToolResult(result);
+    const addResult = aui.part().addToolResult;
     const resume = aui.part().resumeToolCall;
     if ("Override" in tools)
       return <tools.Override {...part} addResult={addResult} resume={resume} />;