@assistant-ui/react 0.14.14 → 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";
@@ -28,172 +27,164 @@ type ThreadData = {
 };
 
 // ThreadListItem Client
-const ThreadListItemClient = resource(
-  (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 = tapMemo(
-      () => ({
-        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: () => {},
-    };
-  },
-);
+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),
+          }),
         ),
-      );
-    };
-
-    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");
-      }
-    };
+      ),
+    [threads],
+  );
 
-    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),
-              onUpdateCustom: (custom) => handleUpdateCustom(t.id, custom),
-              onArchive: () => handleArchive(t.id),
-              onUnarchive: () => handleUnarchive(t.id),
-              onDelete: () => handleDelete(t.id),
-            }),
-          ),
-        ),
-      [threads],
-    );
+  // Create the main thread
+  const mainThreadClient = useClientResource(threadFactory(mainThreadId));
 
-    // 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,36 +1,39 @@
-import { resource, tapMemo, tapState } 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"> => {
-  const [custom, setCustom] = tapState<Record<string, unknown> | undefined>();
+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: () => {},
-  };
-});
+    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">;
@@ -41,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 {
@@ -192,9 +198,11 @@ export {
   type ToolkitDefinitionEntry,
   defineToolkit,
   stubTool,
+  externalTool,
   useAuiToolOverrides,
   hitl,
   hitlTool,
+  humanTool,
   providerTool,
   type ProviderToolConfig,
   defineMcpToolkit,
@@ -365,7 +373,6 @@ export {
   ExternalThread,
   type ExternalThreadProps,
   type ExternalThreadMessage,
-  type ExternalThreadQueueAdapter,
 } from "./client/ExternalThread";
 export {
   InMemoryThreadList,

package/src/mcp-apps/McpAppRenderer.tsx

@@ -14,13 +14,8 @@ import type {
   ToolCallMessagePartProps,
 } from "@assistant-ui/core/react";
 import { useAui } from "@assistant-ui/store";
-import {
-  resource,
-  tapConst,
-  tapRef,
-  tapResource,
-  type ResourceElement,
-} from "@assistant-ui/tap";
+
+import { useResource, resource, type ResourceElement } from "@assistant-ui/tap";
 import { McpAppFrame } from "./app-frame";
 import type {
   McpAppBridgeHandlers,
@@ -136,7 +131,7 @@ function InlineRenderer({
     return () => {
       cancelled = true;
     };
-    // oxlint-disable-next-line tap-hooks/exhaustive-deps -- re-fetch only when URI changes; appForRender identity is unstable and internalsRef is a stable ref
+    // oxlint-disable-next-line react/exhaustive-deps -- re-fetch only when URI changes; appForRender identity is unstable and internalsRef is a stable ref
   }, [resourceUri]);
 
   const bridgeHandlers = useMemo<McpAppBridgeHandlers>(
@@ -200,30 +195,28 @@ function InlineRenderer({
  * renderer loads that resource from the configured host and displays it in a
  * sandboxed frame.
  */
-export const McpAppRenderer = resource(
-  (
-    options: McpAppRendererOptions,
-  ): { readonly render: ToolCallMessagePartComponent } => {
-    const host = tapResource(options.host);
-
-    const optionsRef = tapRef<McpAppRendererOptions>(options);
-    optionsRef.current = options;
-
-    const internalsRef = tapRef<{ host: McpAppsHost }>({ host });
-    internalsRef.current = { host };
-
-    const render = tapConst((): ToolCallMessagePartComponent => {
-      const Render: ToolCallMessagePartComponent = (props) => (
-        <InlineRenderer
-          part={props}
-          internalsRef={internalsRef}
-          optionsRef={optionsRef}
-        />
-      );
-      Render.displayName = "McpAppRenderer";
-      return Render;
-    }, []);
-
-    return { render };
-  },
-);
+export const McpAppRenderer = resource(function McpAppRenderer(
+  options: McpAppRendererOptions,
+): { readonly render: ToolCallMessagePartComponent } {
+  const host = useResource(options.host);
+
+  const optionsRef = useRef<McpAppRendererOptions>(options);
+  optionsRef.current = options;
+
+  const internalsRef = useRef<{ host: McpAppsHost }>({ host });
+  internalsRef.current = { host };
+
+  const render = useMemo((): ToolCallMessagePartComponent => {
+    const Render: ToolCallMessagePartComponent = (props) => (
+      <InlineRenderer
+        part={props}
+        internalsRef={internalsRef}
+        optionsRef={optionsRef}
+      />
+    );
+    Render.displayName = "McpAppRenderer";
+    return Render;
+  }, []);
+
+  return { render };
+});