@assistant-ui/react 0.12.3 → 0.12.5

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,11 @@ export const AssistantRuntimeProviderImpl: FC<
 > = ({ children, aui: parent = null, runtime }) => {
   const aui = useAui({ threads: RuntimeAdapter(runtime) }, { parent: parent });
 
+  useEffect(() => {
+    if (process.env["NODE_ENV"] === "production") return;
+    return DevToolsProviderApi.register(aui);
+  }, [aui]);
+
   const RenderComponent = getRenderComponent(runtime);
 
   return (

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} />;