@assistant-ui/react 0.14.13 → 0.14.15

package/src/client/InMemoryThreadList.ts

@@ -1,13 +1,12 @@
-import { resource, tapState, tapMemo } from "@assistant-ui/tap";
+import { useState, useMemo } from "react";
+import { resource, withKey, type ResourceElement } from "@assistant-ui/tap";
 import {
   type ClientOutput,
-  tapClientLookup,
+  useClientLookup,
   Derived,
   attachTransformScopes,
-  tapClientResource,
+  useClientResource,
 } from "@assistant-ui/store";
-import { withKey } from "@assistant-ui/tap";
-import type { ResourceElement } from "@assistant-ui/tap";
 
 import { ModelContext, Suggestions } from "@assistant-ui/core/store";
 import { Tools, DataRenderers } from "@assistant-ui/core/react";
@@ -24,155 +23,168 @@ type ThreadData = {
   id: string;
   title?: string;
   status: "regular" | "archived";
+  custom?: Record<string, unknown> | undefined;
 };
 
 // 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 {
-      getState: () => state,
-      switchTo: onSwitchTo,
-      rename: () => {},
-      archive: onArchive,
-      unarchive: onUnarchive,
-      delete: onDelete,
-      generateTitle: () => {},
-      initialize: async () => ({ remoteId: data.id, externalId: undefined }),
-      detach: () => {},
-    };
-  },
-);
+const ThreadListItemClient = resource(function ThreadListItemClient(props: {
+  data: ThreadData;
+  onSwitchTo: () => void;
+  onUpdateCustom: (custom: Record<string, unknown> | undefined) => void;
+  onArchive: () => void;
+  onUnarchive: () => void;
+  onDelete: () => void;
+}): ClientOutput<"threadListItem"> {
+  const { data, onSwitchTo, onUpdateCustom, onArchive, onUnarchive, onDelete } =
+    props;
+  const state = useMemo(
+    () => ({
+      id: data.id,
+      remoteId: undefined,
+      externalId: undefined,
+      title: data.title,
+      status: data.status,
+      custom: data.custom,
+    }),
+    [data.id, data.title, data.status, data.custom],
+  );
+
+  return {
+    getState: () => state,
+    switchTo: onSwitchTo,
+    rename: () => {},
+    updateCustom: onUpdateCustom,
+    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,
-        ),
-      );
-    };
+export const InMemoryThreadList = resource(function InMemoryThreadList(
+  props: InMemoryThreadListProps,
+): ClientOutput<"threads"> {
+  const {
+    thread: threadFactory,
+    onSwitchToThread,
+    onSwitchToNewThread,
+  } = props;
+
+  const [mainThreadId, setMainThreadId] = useState("main");
+  const [threads, setThreads] = useState<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 handleUnarchive = (threadId: string) => {
+    setThreads((prev) =>
+      prev.map((t) =>
+        t.id === threadId ? { ...t, status: "regular" as const } : t,
+      ),
+    );
+  };
+
+  const handleUpdateCustom = (
+    threadId: string,
+    custom: Record<string, unknown> | undefined,
+  ) => {
+    setThreads((prev) =>
+      prev.map((t) => (t.id === threadId ? { ...t, custom } : 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 = useClientLookup(
+    () =>
+      threads.map((t) =>
+        withKey(
+          t.id,
+          ThreadListItemClient({
+            data: t,
+            onSwitchTo: () => handleSwitchToThread(t.id),
+            onUpdateCustom: (custom) => handleUpdateCustom(t.id, custom),
+            onArchive: () => handleArchive(t.id),
+            onUnarchive: () => handleUnarchive(t.id),
+            onDelete: () => handleDelete(t.id),
+          }),
         ),
-      );
-    };
+      ),
+    [threads],
+  );
 
-    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");
-      }
-    };
+  // Create the main thread
+  const mainThreadClient = useClientResource(threadFactory(mainThreadId));
 
-    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");
-
-      return {
-        mainThreadId,
-        newThreadId: null,
-        isLoading: false,
-        isLoadingMore: false,
-        hasMore: false,
-        threadIds: regularThreads.map((t) => t.id),
-        archivedThreadIds: archivedThreads.map((t) => t.id),
-        threadItems: threadListItems.state,
-        main: mainThreadClient.state,
-      };
-    }, [mainThreadId, threads, threadListItems.state, mainThreadClient.state]);
+  const state = useMemo(() => {
+    const regularThreads = threads.filter((t) => t.status === "regular");
+    const archivedThreads = threads.filter((t) => t.status === "archived");
 
     return {
-      getState: () => state,
-      switchToThread: handleSwitchToThread,
-      switchToNewThread: handleSwitchToNewThread,
-      getLoadThreadsPromise: () => RESOLVED_PROMISE,
-      reload: () => RESOLVED_PROMISE,
-      loadMore: () => RESOLVED_PROMISE,
-      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,
+      mainThreadId,
+      newThreadId: null,
+      isLoading: false,
+      isLoadingMore: false,
+      hasMore: false,
+      threadIds: regularThreads.map((t) => t.id),
+      archivedThreadIds: archivedThreads.map((t) => t.id),
+      threadItems: threadListItems.state,
+      main: mainThreadClient.state,
     };
-  },
-);
+  }, [mainThreadId, threads, threadListItems.state, mainThreadClient.state]);
+
+  return {
+    getState: () => state,
+    switchToThread: handleSwitchToThread,
+    switchToNewThread: handleSwitchToNewThread,
+    getLoadThreadsPromise: () => RESOLVED_PROMISE,
+    reload: () => RESOLVED_PROMISE,
+    loadMore: () => RESOLVED_PROMISE,
+    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,
+  };
+});
 
 attachTransformScopes(InMemoryThreadList, (scopes, parent) => {
   scopes.thread ??= Derived({

package/src/client/SingleThreadList.ts

@@ -1,32 +1,39 @@
-import { resource, tapMemo } from "@assistant-ui/tap";
+import { useMemo, useState } from "react";
+import { resource } from "@assistant-ui/tap";
 import {
   type ClientElement,
   type ClientOutput,
-  tapClientResource,
+  useClientResource,
 } from "@assistant-ui/store";
 
 const RESOLVED_PROMISE = Promise.resolve();
 const THREAD_ID = "default";
 
-const SingleThreadListItem = resource((): ClientOutput<"threadListItem"> => {
-  return {
-    getState: () => ({
-      id: THREAD_ID,
-      remoteId: undefined,
-      externalId: undefined,
-      title: undefined,
-      status: "regular",
-    }),
-    switchTo: () => {},
-    rename: () => {},
-    archive: () => {},
-    unarchive: () => {},
-    delete: () => {},
-    generateTitle: () => {},
-    initialize: async () => ({ remoteId: THREAD_ID, externalId: undefined }),
-    detach: () => {},
-  };
-});
+const SingleThreadListItem = resource(
+  function SingleThreadListItem(): ClientOutput<"threadListItem"> {
+    const [custom, setCustom] = useState<Record<string, unknown> | undefined>();
+
+    return {
+      getState: () => ({
+        id: THREAD_ID,
+        remoteId: undefined,
+        externalId: undefined,
+        title: undefined,
+        status: "regular",
+        custom,
+      }),
+      switchTo: () => {},
+      rename: () => {},
+      updateCustom: setCustom,
+      archive: () => {},
+      unarchive: () => {},
+      delete: () => {},
+      generateTitle: () => {},
+      initialize: async () => ({ remoteId: THREAD_ID, externalId: undefined }),
+      detach: () => {},
+    };
+  },
+);
 
 type SingleThreadListProps = {
   thread: ClientElement<"thread">;
@@ -37,65 +44,65 @@ type SingleThreadListProps = {
  * Automatically provided by ExternalThread when no threads scope exists.
  * Mounts the provided thread resource element.
  */
-export const SingleThreadList = resource(
-  ({ thread }: SingleThreadListProps): ClientOutput<"threads"> => {
-    const itemClient = tapClientResource(SingleThreadListItem());
-    const threadClient = tapClientResource(thread);
+export const SingleThreadList = resource(function SingleThreadList({
+  thread,
+}: SingleThreadListProps): ClientOutput<"threads"> {
+  const itemClient = useClientResource(SingleThreadListItem());
+  const threadClient = useClientResource(thread);
 
-    const state = tapMemo(
-      () => ({
-        mainThreadId: THREAD_ID,
-        newThreadId: null,
-        isLoading: false,
-        isLoadingMore: false,
-        hasMore: false,
-        threadIds: [THREAD_ID],
-        archivedThreadIds: [],
-        threadItems: [itemClient.state],
-        main: threadClient.state,
-      }),
-      [itemClient.state, threadClient.state],
-    );
+  const state = useMemo(
+    () => ({
+      mainThreadId: THREAD_ID,
+      newThreadId: null,
+      isLoading: false,
+      isLoadingMore: false,
+      hasMore: false,
+      threadIds: [THREAD_ID],
+      archivedThreadIds: [],
+      threadItems: [itemClient.state],
+      main: threadClient.state,
+    }),
+    [itemClient.state, threadClient.state],
+  );
 
-    return {
-      getState: () => state,
-      switchToThread: () => {
-        throw new Error("SingleThreadList does not support switchToThread");
-      },
-      switchToNewThread: () => {
-        throw new Error("SingleThreadList does not support switchToNewThread");
-      },
-      getLoadThreadsPromise: () => RESOLVED_PROMISE,
-      reload: () => RESOLVED_PROMISE,
-      loadMore: () => RESOLVED_PROMISE,
-      item: (selector) => {
-        if (
-          selector !== "main" &&
-          !(
-            typeof selector === "object" &&
-            "id" in selector &&
-            selector.id === THREAD_ID
-          ) &&
-          !(
-            typeof selector === "object" &&
-            "index" in selector &&
-            selector.index === 0
-          )
-        ) {
-          throw new Error(
-            `SingleThreadList: unknown item selector ${JSON.stringify(selector)}`,
-          );
-        }
-        return itemClient.methods;
-      },
-      thread: (selector) => {
-        if (selector !== "main" && selector !== THREAD_ID) {
-          throw new Error(
-            `SingleThreadList: unknown thread selector ${JSON.stringify(selector)}`,
-          );
-        }
-        return threadClient.methods;
-      },
-    };
-  },
-);
+  return {
+    getState: () => state,
+    switchToThread: () => {
+      throw new Error("SingleThreadList does not support switchToThread");
+    },
+    switchToNewThread: () => {
+      throw new Error("SingleThreadList does not support switchToNewThread");
+    },
+    getLoadThreadsPromise: () => RESOLVED_PROMISE,
+    reload: () => RESOLVED_PROMISE,
+    loadMore: () => RESOLVED_PROMISE,
+    item: (selector) => {
+      if (
+        selector !== "main" &&
+        !(
+          typeof selector === "object" &&
+          "id" in selector &&
+          selector.id === THREAD_ID
+        ) &&
+        !(
+          typeof selector === "object" &&
+          "index" in selector &&
+          selector.index === 0
+        )
+      ) {
+        throw new Error(
+          `SingleThreadList: unknown item selector ${JSON.stringify(selector)}`,
+        );
+      }
+      return itemClient.methods;
+    },
+    thread: (selector) => {
+      if (selector !== "main" && selector !== THREAD_ID) {
+        throw new Error(
+          `SingleThreadList: unknown thread selector ${JSON.stringify(selector)}`,
+        );
+      }
+      return threadClient.methods;
+    },
+  };
+});

package/src/context/providers/ThreadViewportProvider.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import type { FC, PropsWithChildren } from "react";
-import { useEffect, useState } from "react";
+import { type FC, type PropsWithChildren, useEffect, useState } from "react";
+
 import {
   makeThreadViewportStore,
   type ThreadViewportStoreOptions,

package/src/index.ts

@@ -136,6 +136,12 @@ export type {
   ExternalStoreThreadListAdapter,
   ExternalStoreThreadData,
 } from "@assistant-ui/core";
+export {
+  createMessageQueue,
+  type MessageQueueDriver,
+  type MessageQueueController,
+  type ExternalThreadQueueAdapter,
+} from "@assistant-ui/core";
 export { useExternalStoreRuntime } from "./legacy-runtime/runtime-cores/external-store/useExternalStoreRuntime";
 export { useExternalStoreSharedOptions } from "@assistant-ui/core/react";
 export {
@@ -187,10 +193,20 @@ export {
   useInlineRender,
   type Toolkit,
   type ToolDefinition,
-  type ToolkitDeclaration,
-  type ToolkitDeclarationDefinition,
+  type ToolCallText,
+  type ToolkitDefinition,
+  type ToolkitDefinitionEntry,
   defineToolkit,
+  stubTool,
+  externalTool,
+  useAuiToolOverrides,
   hitl,
+  hitlTool,
+  humanTool,
+  providerTool,
+  type ProviderToolConfig,
+  defineMcpToolkit,
+  type McpToolkitDefinition,
   Tools,
   DataRenderers,
   Interactables,
@@ -357,7 +373,6 @@ export {
   ExternalThread,
   type ExternalThreadProps,
   type ExternalThreadMessage,
-  type ExternalThreadQueueAdapter,
 } from "./client/ExternalThread";
 export {
   InMemoryThreadList,