@assistant-ui/react 0.14.16 → 0.14.19

package/src/index.ts

@@ -141,6 +141,7 @@ export {
   type MessageQueueDriver,
   type MessageQueueController,
   type ExternalThreadQueueAdapter,
+  type ExternalThreadBranchAdapter,
 } from "@assistant-ui/core";
 export { useExternalStoreRuntime } from "./legacy-runtime/runtime-cores/external-store/useExternalStoreRuntime";
 export { useExternalStoreSharedOptions } from "@assistant-ui/core/react";
@@ -288,6 +289,13 @@ export { useThreadViewportAutoScroll } from "./primitives/thread/useThreadViewpo
 export { useScrollLock } from "./primitives/reasoning/useScrollLock";
 export { useMessageQuote } from "./hooks/useMessageQuote";
 export { useMessageTiming } from "./hooks/useMessageTiming";
+export { useToolCallElapsed } from "./hooks/useToolCallElapsed";
+export {
+  unstable_useMessageStallDetection,
+  type Unstable_MessageStallDetection,
+  type Unstable_MessageStallDetectionOptions,
+} from "./unstable/useMessageStallDetection";
+export { useSmooth, type SmoothOptions } from "./utils/smooth/useSmooth";
 
 // Re-export core types from @assistant-ui/core
 export type {
@@ -307,7 +315,12 @@ export type {
   GenerativeUINode,
   GenerativeUISpec,
   Unstable_AudioMessagePart,
+  RespondToToolApprovalOptions,
+  ToolApprovalOption,
+  ToolApprovalOptionKind,
+  ToolApprovalResponse,
   ToolCallMessagePart,
+  ToolCallTiming,
   ToolModelContentPart,
   MessageStatus,
   MessagePartStatus,
@@ -421,6 +434,12 @@ export type {
 } from "@assistant-ui/core";
 export { unstable_defaultDirectiveFormatter } from "@assistant-ui/core";
 
+// Unstable - composer input history (terminal-style ArrowUp/ArrowDown recall)
+export {
+  unstable_useComposerInputHistory,
+  type Unstable_ComposerInputHistory,
+} from "./unstable/useComposerInputHistory";
+
 export type { Assistant } from "./augmentations";
 
 // --- mcp-apps ---

package/src/mcp-apps/McpAppRenderer.tsx

@@ -195,9 +195,9 @@ function InlineRenderer({
  * renderer loads that resource from the configured host and displays it in a
  * sandboxed frame.
  */
-export const McpAppRenderer = resource(function McpAppRenderer(
+const useMcpAppRenderer = (
   options: McpAppRendererOptions,
-): { readonly render: ToolCallMessagePartComponent } {
+): { readonly render: ToolCallMessagePartComponent } => {
   const host = useResource(options.host);
 
   const optionsRef = useRef<McpAppRendererOptions>(options);
@@ -219,4 +219,6 @@ export const McpAppRenderer = resource(function McpAppRenderer(
   }, []);
 
   return { render };
-});
+};
+
+export const McpAppRenderer = resource(useMcpAppRenderer);

package/src/mcp-apps/McpAppsRemoteHost.ts

@@ -34,9 +34,9 @@ async function postToHost(
  * params }`, using the method names expected by the assistant-ui MCP Apps
  * guide.
  */
-export const McpAppsRemoteHost = resource(function McpAppsRemoteHost(
+const useMcpAppsRemoteHost = (
   options: McpAppsRemoteHostOptions,
-): McpAppsHost {
+): McpAppsHost => {
   const optionsRef = useRef(options);
   optionsRef.current = options;
 
@@ -57,4 +57,6 @@ export const McpAppsRemoteHost = resource(function McpAppsRemoteHost(
     }),
     [],
   );
-});
+};
+
+export const McpAppsRemoteHost = resource(useMcpAppsRemoteHost);

package/src/primitives/composer/ComposerInput.test.tsx

@@ -61,7 +61,7 @@ vi.mock("@assistant-ui/store", () => {
 });
 
 vi.mock("@assistant-ui/tap", () => ({
-  flushResourcesSync: (fn: () => void) => fn(),
+  flushTapSync: (fn: () => void) => fn(),
 }));
 
 vi.mock("./ComposerInputPluginContext", () => ({

package/src/primitives/composer/ComposerInput.tsx

@@ -22,7 +22,7 @@ import { useEscapeKeydown } from "@radix-ui/react-use-escape-keydown";
 import { useOnScrollToBottom } from "../../utils/hooks/useOnScrollToBottom";
 import { useMediaQuery } from "../../utils/hooks/useMediaQuery";
 import { useAuiState, useAui } from "@assistant-ui/store";
-import { flushResourcesSync } from "@assistant-ui/tap";
+import { flushTapSync } from "@assistant-ui/tap";
 import { useComposerInputPluginRegistryOptional } from "./ComposerInputPluginContext";
 import { useTriggerPopoverActiveAriaOptional } from "./trigger/TriggerPopoverRootContext";
 
@@ -350,7 +350,7 @@ export const ComposerPrimitiveInput = forwardRef<
           }
           const isComposing = nativeIsComposing || compositionRef.current;
           // keep controlled value in sync mid-IME so react does not reset the textarea to a stale value
-          flushResourcesSync(() => {
+          flushTapSync(() => {
             aui.composer().setText(e.target.value);
           });
           if (isComposing) return;
@@ -377,7 +377,7 @@ export const ComposerPrimitiveInput = forwardRef<
           compositionRef.current = false;
           if (!aui.composer().getState().isEditing) return;
           const target = e.target as HTMLTextAreaElement;
-          flushResourcesSync(() => {
+          flushTapSync(() => {
             aui.composer().setText(target.value);
           });
           const pos = target.selectionStart ?? target.value.length;

package/src/primitives/composer/trigger/TriggerPopover.tsx

@@ -9,6 +9,7 @@ import {
   useCallback,
   useContext,
   useEffect,
+  useEffectEvent,
   useId,
   useMemo,
   useRef,
@@ -161,23 +162,21 @@ export const ComposerPrimitiveTriggerPopover = forwardRef<
       }),
     );
 
-    // Wrapper changes per render, but tap-stable methods inside don't.
-    const resourceRef = useRef(resource);
-    resourceRef.current = resource;
+    const getResource = useEffectEvent(() => resource);
 
     const root = useTriggerPopoverRootContext();
     useEffect(() => {
       return root.register({
         char,
         ...(behavior ? { behavior } : {}),
-        resource: resourceRef.current,
+        resource: getResource(),
       });
     }, [root, char, behavior]);
 
     const pluginRegistry = useComposerInputPluginRegistryOptional();
     useEffect(() => {
       if (!pluginRegistry) return undefined;
-      return pluginRegistry.register(resourceRef.current);
+      return pluginRegistry.register(getResource());
     }, [pluginRegistry]);
 
     const open = behavior !== null && resource.open;

package/src/primitives/composer/trigger/TriggerPopoverResource.ts

@@ -51,7 +51,7 @@ export type TriggerPopoverResourceOutput = {
 };
 
 /** Composes detection, navigation, keyboard, and selection sub-resources. */
-export const TriggerPopoverResource = resource(function TriggerPopoverResource({
+const useTriggerPopoverResource = ({
   adapter,
   text,
   triggerChar,
@@ -66,7 +66,7 @@ export const TriggerPopoverResource = resource(function TriggerPopoverResource({
   aui: AssistantClient;
   /** Stable ID for accessible element IDs (pass React's useId() from component layer). */
   popoverId: string;
-}): TriggerPopoverResourceOutput {
+}): TriggerPopoverResourceOutput => {
   const detection = useResource(
     TriggerDetectionResource({ text, triggerChar }),
   );
@@ -133,4 +133,6 @@ export const TriggerPopoverResource = resource(function TriggerPopoverResource({
     setCursorPosition: detection.setCursorPosition,
     registerSelectItemOverride: selection.registerSelectItemOverride,
   };
-});
+};
+
+export const TriggerPopoverResource = resource(useTriggerPopoverResource);

package/src/primitives/composer/trigger/triggerDetectionResource.ts

@@ -18,27 +18,27 @@ export type TriggerDetectionResourceOutput = {
 };
 
 /** Tracks cursor position and derives the active trigger + query from composer text. */
-export const TriggerDetectionResource = resource(
-  function TriggerDetectionResource({
-    text,
-    triggerChar,
-  }: {
-    text: string;
-    triggerChar: string;
-  }): TriggerDetectionResourceOutput {
-    const [cursorPosition, setCursorPosition] = useState(text.length);
+const useTriggerDetectionResource = ({
+  text,
+  triggerChar,
+}: {
+  text: string;
+  triggerChar: string;
+}): TriggerDetectionResourceOutput => {
+  const [cursorPosition, setCursorPosition] = useState(text.length);
 
-    const trigger = useMemo(() => {
-      const pos = Math.min(cursorPosition, text.length);
-      return detectTrigger(text, triggerChar, pos);
-    }, [cursorPosition, text, triggerChar]);
+  const trigger = useMemo(() => {
+    const pos = Math.min(cursorPosition, text.length);
+    return detectTrigger(text, triggerChar, pos);
+  }, [cursorPosition, text, triggerChar]);
 
-    const query = trigger?.query ?? "";
+  const query = trigger?.query ?? "";
 
-    return {
-      trigger,
-      query,
-      setCursorPosition,
-    };
-  },
-);
+  return {
+    trigger,
+    query,
+    setCursorPosition,
+  };
+};
+
+export const TriggerDetectionResource = resource(useTriggerDetectionResource);

package/src/primitives/composer/trigger/triggerKeyboardResource.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi } from "vitest";
-import { createResourceRoot } from "@assistant-ui/tap";
+import { createTapRoot, useResource } from "@assistant-ui/tap";
 import type {
   Unstable_TriggerCategory,
   Unstable_TriggerItem,
@@ -41,9 +41,10 @@ const render = (
     close: vi.fn(),
     ...overrides,
   };
-  const root = createResourceRoot();
-  const sub = root.render(TriggerKeyboardResource(props));
-  return { sub, props };
+  const root = createTapRoot(function Root() {
+    return useResource(TriggerKeyboardResource(props));
+  });
+  return { sub: root, props };
 };
 
 describe("TriggerKeyboardResource", () => {

package/src/primitives/composer/trigger/triggerKeyboardResource.ts

@@ -34,113 +34,111 @@ export type TriggerKeyboardResourceOutput = {
  * Owns keyboard-driven highlight state for the popover. Delegates selection,
  * category drill-in, back, and close to the callbacks supplied by the parent.
  */
-export const TriggerKeyboardResource = resource(
-  function TriggerKeyboardResource({
-    navigableList,
-    isSearchMode,
-    activeCategoryId,
-    query,
-    popoverId,
-    open,
-    selectItem,
-    selectCategory,
-    goBack,
-    close,
-  }: {
-    navigableList: readonly (Unstable_TriggerCategory | Unstable_TriggerItem)[];
-    isSearchMode: boolean;
-    activeCategoryId: string | null;
-    query: string;
-    popoverId: string;
-    open: boolean;
-    selectItem: (item: Unstable_TriggerItem) => void;
-    selectCategory: (categoryId: string) => void;
-    goBack: () => void;
-    close: () => void;
-  }): TriggerKeyboardResourceOutput {
-    const [highlightedIndex, setHighlightedIndex] = useState(0);
+const useTriggerKeyboardResource = ({
+  navigableList,
+  isSearchMode,
+  activeCategoryId,
+  query,
+  popoverId,
+  open,
+  selectItem,
+  selectCategory,
+  goBack,
+  close,
+}: {
+  navigableList: readonly (Unstable_TriggerCategory | Unstable_TriggerItem)[];
+  isSearchMode: boolean;
+  activeCategoryId: string | null;
+  query: string;
+  popoverId: string;
+  open: boolean;
+  selectItem: (item: Unstable_TriggerItem) => void;
+  selectCategory: (categoryId: string) => void;
+  goBack: () => void;
+  close: () => void;
+}): TriggerKeyboardResourceOutput => {
+  const [highlightedIndex, setHighlightedIndex] = useState(0);
 
-    useEffect(() => {
-      setHighlightedIndex(0);
-    }, [navigableList]);
+  useEffect(() => {
+    setHighlightedIndex(0);
+  }, [navigableList]);
 
-    useEffect(() => {
-      setHighlightedIndex(0);
-    }, [isSearchMode, activeCategoryId]);
+  useEffect(() => {
+    setHighlightedIndex(0);
+  }, [isSearchMode, activeCategoryId]);
 
-    const highlightIndex = useEffectEvent((index: number) => {
-      if (index < 0 || index >= navigableList.length) return;
-      if (index === highlightedIndex) return;
-      setHighlightedIndex(index);
-    });
+  const highlightIndex = useEffectEvent((index: number) => {
+    if (index < 0 || index >= navigableList.length) return;
+    if (index === highlightedIndex) return;
+    setHighlightedIndex(index);
+  });
 
-    const handleKeyDown = useEffectEvent(
-      (e: TriggerPopoverKeyEvent): boolean => {
-        if (!open) return false;
+  const handleKeyDown = useEffectEvent((e: TriggerPopoverKeyEvent): boolean => {
+    if (!open) return false;
 
-        switch (e.key) {
-          case "ArrowDown": {
-            e.preventDefault();
-            setHighlightedIndex((prev) => {
-              const len = navigableList.length;
-              if (len === 0) return 0;
-              return prev < len - 1 ? prev + 1 : 0;
-            });
-            return true;
-          }
-          case "ArrowUp": {
-            e.preventDefault();
-            setHighlightedIndex((prev) => {
-              const len = navigableList.length;
-              if (len === 0) return 0;
-              return prev > 0 ? prev - 1 : len - 1;
-            });
-            return true;
-          }
-          case "Enter":
-          case "Tab": {
-            if (e.shiftKey) return false;
-            e.preventDefault();
-            const item = navigableList[highlightedIndex];
-            if (!item) return true;
+    switch (e.key) {
+      case "ArrowDown": {
+        e.preventDefault();
+        setHighlightedIndex((prev) => {
+          const len = navigableList.length;
+          if (len === 0) return 0;
+          return prev < len - 1 ? prev + 1 : 0;
+        });
+        return true;
+      }
+      case "ArrowUp": {
+        e.preventDefault();
+        setHighlightedIndex((prev) => {
+          const len = navigableList.length;
+          if (len === 0) return 0;
+          return prev > 0 ? prev - 1 : len - 1;
+        });
+        return true;
+      }
+      case "Enter":
+      case "Tab": {
+        if (e.shiftKey) return false;
+        e.preventDefault();
+        const item = navigableList[highlightedIndex];
+        if (!item) return true;
 
-            if (isTriggerItem(item)) {
-              selectItem(item);
-            } else {
-              selectCategory(item.id);
-            }
-            return true;
-          }
-          case "Escape": {
-            e.preventDefault();
-            close();
-            return true;
-          }
-          case "Backspace": {
-            if (activeCategoryId && query === "") {
-              e.preventDefault();
-              goBack();
-              return true;
-            }
-            return false;
-          }
-          default:
-            return false;
+        if (isTriggerItem(item)) {
+          selectItem(item);
+        } else {
+          selectCategory(item.id);
         }
-      },
-    );
+        return true;
+      }
+      case "Escape": {
+        e.preventDefault();
+        close();
+        return true;
+      }
+      case "Backspace": {
+        if (activeCategoryId && query === "") {
+          e.preventDefault();
+          goBack();
+          return true;
+        }
+        return false;
+      }
+      default:
+        return false;
+    }
+  });
+
+  const highlightedEntry = navigableList[highlightedIndex];
+  const highlightedItemId =
+    open && highlightedEntry
+      ? `${popoverId}-option-${highlightedEntry.id}`
+      : undefined;
 
-    const highlightedEntry = navigableList[highlightedIndex];
-    const highlightedItemId =
-      open && highlightedEntry
-        ? `${popoverId}-option-${highlightedEntry.id}`
-        : undefined;
+  return {
+    highlightedIndex,
+    highlightedItemId,
+    highlightIndex,
+    handleKeyDown,
+  };
+};
 
-    return {
-      highlightedIndex,
-      highlightedItemId,
-      highlightIndex,
-      handleKeyDown,
-    };
-  },
-);
+export const TriggerKeyboardResource = resource(useTriggerKeyboardResource);