@assistant-ui/react 0.15.25 → 0.15.26

package/src/primitives/message/MessagePartsGrouped.test.tsx

@@ -12,10 +12,12 @@ import { describe, expect, it } from "vitest";
 import type { ThreadMessageLike } from "@assistant-ui/core";
 import {
   AssistantRuntimeProvider,
+  Tools,
   useAssistantDataUI,
   useExternalStoreRuntime,
 } from "@assistant-ui/core/react";
-import { useAui } from "@assistant-ui/store";
+import { AuiConfig, useAui } from "@assistant-ui/store";
+import { resource } from "@assistant-ui/tap";
 import { ThreadPrimitiveMessageByIndex } from "../thread/ThreadMessages";
 import {
   type MessagePrimitiveUnstable_PartsGrouped,
@@ -48,6 +50,11 @@ const partsMessage =
 const Named = () => <b>named</b>;
 const Fallback = () => <i>fallback</i>;
 const GlobalFallback = () => <b>global-fallback</b>;
+const Mcp = () => <b>mcp</b>;
+const McpApp = resource(function McpApp() {
+  return { render: Mcp };
+});
+const mcpConfig = AuiConfig({ tools: Tools({ mcpApp: McpApp() }) });
 
 const RegisterFallbackDataUI: FC<{ render: typeof GlobalFallback }> = ({
   render,
@@ -69,11 +76,13 @@ const Example = ({
   content,
   Message: MessageComponent = Message,
   extra,
+  config,
   isRunning = false,
 }: {
   content: ThreadMessageLike["content"];
   Message?: FC;
   extra?: ReactNode;
+  config?: AuiConfig;
   isRunning?: boolean;
 }) => {
   const messages: ThreadMessageLike[] = [
@@ -86,7 +95,10 @@ const Example = ({
     onNew: async () => {},
   });
   return (
-    <AssistantRuntimeProvider runtime={runtime}>
+    <AssistantRuntimeProvider
+      runtime={runtime}
+      {...(config === undefined ? {} : { config })}
+    >
       {extra}
       <ThreadPrimitiveMessageByIndex
         index={0}
@@ -439,6 +451,17 @@ describe("MessagePrimitive.Unstable_PartsGroupedByParentId", () => {
     },
   );
 
+  it("falls back to the default text component for an undefined slot", () => {
+    render(
+      <Example
+        content={[{ type: "text", text: "hello" }]}
+        Message={partsMessage({ Text: undefined })}
+      />,
+    );
+
+    expect(screen.getByText("hello")).toBeTruthy();
+  });
+
   it("renders tool and data UIs registered under an inherited name", () => {
     const { container } = render(
       <Example
@@ -461,6 +484,87 @@ describe("MessagePrimitive.Unstable_PartsGroupedByParentId", () => {
     expect(container.innerHTML).toBe("<b>named</b><b>named</b>");
   });
 
+  it("renders tools.mcpApp for a tool call with a ui:// resource", () => {
+    const { container } = render(
+      <Example
+        content={[
+          {
+            type: "tool-call",
+            toolCallId: "call",
+            toolName: "show_chart",
+            args: {},
+            mcp: { app: { resourceUri: "ui://chart" } },
+          },
+        ]}
+        Message={partsMessage({ tools: { Fallback } })}
+        config={mcpConfig}
+      />,
+    );
+
+    expect(container.innerHTML).toBe("<b>mcp</b>");
+  });
+
+  it("prefers an inline by_name component over tools.mcpApp", () => {
+    const { container } = render(
+      <Example
+        content={[
+          {
+            type: "tool-call",
+            toolCallId: "call",
+            toolName: "show_chart",
+            args: {},
+            mcp: { app: { resourceUri: "ui://chart" } },
+          },
+        ]}
+        Message={partsMessage({
+          tools: { by_name: { show_chart: Named }, Fallback },
+        })}
+        config={mcpConfig}
+      />,
+    );
+
+    expect(container.innerHTML).toBe("<b>named</b>");
+  });
+
+  it("uses inline Fallback when the tool call has no ui:// resource", () => {
+    const { container } = render(
+      <Example
+        content={[
+          {
+            type: "tool-call",
+            toolCallId: "call",
+            toolName: "show_chart",
+            args: {},
+          },
+        ]}
+        Message={partsMessage({ tools: { Fallback } })}
+        config={mcpConfig}
+      />,
+    );
+
+    expect(container.innerHTML).toBe("<i>fallback</i>");
+  });
+
+  it("uses inline Fallback when the resource URI is not an MCP App URI", () => {
+    const { container } = render(
+      <Example
+        content={[
+          {
+            type: "tool-call",
+            toolCallId: "call",
+            toolName: "show_chart",
+            args: {},
+            mcp: { app: { resourceUri: "https://example.com/chart" } },
+          },
+        ]}
+        Message={partsMessage({ tools: { Fallback } })}
+        config={mcpConfig}
+      />,
+    );
+
+    expect(container.innerHTML).toBe("<i>fallback</i>");
+  });
+
   it("uses dataRenderers.fallbacks[0] before inline data.Fallback", async () => {
     const { container } = render(
       <Example

package/src/primitives/message/MessagePartsGrouped.tsx

@@ -7,23 +7,23 @@ import {
   type PropsWithChildren,
   useMemo,
 } from "react";
-import { useAuiState, useAui } from "@assistant-ui/store";
+import { useAuiState } from "@assistant-ui/store";
 import { PartByIndexProvider } from "../../context/providers/PartByIndexProvider";
 import { TextMessagePartProvider } from "../../context/providers/TextMessagePartProvider";
 import { MessagePartPrimitiveText } from "../messagePart/MessagePartText";
 import { MessagePartPrimitiveImage } from "../messagePart/MessagePartImage";
-import type {
-  Unstable_AudioMessagePartComponent,
-  DataMessagePartComponent,
-  DataMessagePartProps,
-  EmptyMessagePartComponent,
-  TextMessagePartComponent,
-  ImageMessagePartComponent,
-  SourceMessagePartComponent,
-  ToolCallMessagePartComponent,
-  ToolCallMessagePartProps,
-  FileMessagePartComponent,
-  ReasoningMessagePartComponent,
+import {
+  MessagePartComponent,
+  type Unstable_AudioMessagePartComponent,
+  type DataMessagePartComponent,
+  type EmptyMessagePartComponent,
+  type TextMessagePartComponent,
+  type ImageMessagePartComponent,
+  type SourceMessagePartComponent,
+  type ToolCallMessagePartComponent,
+  type ToolCallMessagePartProps,
+  type FileMessagePartComponent,
+  type ReasoningMessagePartComponent,
 } from "@assistant-ui/core/react";
 import { MessagePartPrimitiveInProgress } from "../messagePart/MessagePartInProgress";
 import type { MessagePartStatus } from "@assistant-ui/core";
@@ -86,6 +86,13 @@ const useMessagePartsGrouped = (
   return { groups, partKeys: getMessagePartKeys(parts) };
 };
 
+/**
+ * @deprecated Prefer `<MessagePrimitive.GroupedParts>` for adjacent
+ * grouping — it dispatches all rendering through one `switch (part.type)`
+ * and supports nested group paths. Keep this primitive only for
+ * non-adjacent clustering (e.g., gathering parts with the same parent-id
+ * across the message).
+ */
 export namespace MessagePrimitiveUnstable_PartsGrouped {
   export type Props = {
     /**
@@ -231,34 +238,6 @@ export namespace MessagePrimitiveUnstable_PartsGrouped {
   };
 }
 
-const ToolUIDisplay = ({
-  Fallback,
-  ...props
-}: {
-  Fallback: ToolCallMessagePartComponent | undefined;
-} & ToolCallMessagePartProps) => {
-  const Render = useAuiState(
-    (s) => s.tools.toolUIs[props.toolName]?.[0]?.render ?? Fallback,
-  );
-  if (!Render) return null;
-  return <Render {...props} />;
-};
-
-const DataUIDisplay = ({
-  Fallback,
-  ...props
-}: {
-  Fallback: DataMessagePartComponent | undefined;
-} & DataMessagePartProps) => {
-  const Render = useAuiState((s) => {
-    const named = s.dataRenderers.renderers[props.name]?.[0];
-    if (named) return named;
-    return s.dataRenderers.fallbacks[0] ?? Fallback;
-  });
-  if (!Render) return null;
-  return <Render {...props} />;
-};
-
 const defaultComponents = {
   Text: () => (
     <p style={{ whiteSpace: "pre-line" }}>
@@ -280,104 +259,17 @@ type MessagePartComponentProps = {
   components: MessagePrimitiveUnstable_PartsGrouped.Props["components"];
 };
 
-const MessagePartComponent: FC<MessagePartComponentProps> = ({
-  components: {
-    Text = defaultComponents.Text,
-    Reasoning = defaultComponents.Reasoning,
-    Image = defaultComponents.Image,
-    Source = defaultComponents.Source,
-    File = defaultComponents.File,
-    Unstable_Audio: Audio = defaultComponents.Unstable_Audio,
-    tools = {},
-    data,
-  } = {},
-}) => {
-  const aui = useAui();
-  const part = useAuiState((s) => s.part);
-
-  const type = part.type;
-  if (type === "tool-call") {
-    const addResult = aui.part.addToolResult;
-    const resume = aui.part.resumeToolCall;
-    const respondToApproval = aui.part.respondToToolApproval;
-    const unstable_recordInteraction = aui.part.unstable_recordInteraction;
-    if ("Override" in tools)
-      return (
-        <tools.Override
-          {...part}
-          addResult={addResult}
-          resume={resume}
-          respondToApproval={respondToApproval}
-          {...(unstable_recordInteraction && { unstable_recordInteraction })}
-        />
-      );
-    const Tool =
-      (tools.by_name && Object.hasOwn(tools.by_name, part.toolName)
-        ? tools.by_name[part.toolName]
-        : undefined) ?? tools.Fallback;
-    return (
-      <ToolUIDisplay
-        {...part}
-        Fallback={Tool}
-        addResult={addResult}
-        resume={resume}
-        respondToApproval={respondToApproval}
-        {...(unstable_recordInteraction && { unstable_recordInteraction })}
-      />
-    );
-  }
-
-  if (part.status?.type === "requires-action")
-    throw new Error("Encountered unexpected requires-action status");
-
-  switch (type) {
-    case "text":
-      return <Text {...part} />;
-
-    case "reasoning":
-      return <Reasoning {...part} />;
-
-    case "source":
-      return <Source {...part} />;
-
-    case "image":
-      return <Image {...part} />;
-
-    case "file":
-      return <File {...part} />;
-
-    case "audio":
-      return <Audio {...part} />;
-
-    case "data": {
-      const Data =
-        (data?.by_name && Object.hasOwn(data.by_name, part.name)
-          ? data.by_name[part.name]
-          : undefined) ?? data?.Fallback;
-      return <DataUIDisplay {...part} Fallback={Data} />;
-    }
-
-    default:
-      console.warn(`Unknown message part type: ${type}`);
-      return null;
-  }
-};
-
 type MessagePartProps = {
   partIndex: number;
   components: MessagePrimitiveUnstable_PartsGrouped.Props["components"];
 };
 
-const MessagePartImpl: FC<MessagePartProps> = ({ partIndex, components }) => {
-  return (
+const MessagePart = memo(
+  ({ partIndex, components }: MessagePartProps) => (
     <PartByIndexProvider index={partIndex}>
       <MessagePartComponent components={components} />
     </PartByIndexProvider>
-  );
-};
-
-const MessagePart = memo(
-  MessagePartImpl,
+  ),
   (prev, next) =>
     prev.partIndex === next.partIndex &&
     prev.components?.Text === next.components?.Text &&
@@ -387,8 +279,7 @@ const MessagePart = memo(
     prev.components?.File === next.components?.File &&
     prev.components?.Unstable_Audio === next.components?.Unstable_Audio &&
     prev.components?.tools === next.components?.tools &&
-    prev.components?.data === next.components?.data &&
-    prev.components?.Group === next.components?.Group,
+    prev.components?.data === next.components?.data,
 );
 
 const EmptyPartFallback: FC<{
@@ -473,6 +364,17 @@ export const MessagePrimitiveUnstable_PartsGrouped: FC<
       return <EmptyParts components={components} />;
     }
 
+    const leafComponents = {
+      ...components,
+      Text: components?.Text ?? defaultComponents.Text,
+      Reasoning: components?.Reasoning ?? defaultComponents.Reasoning,
+      Image: components?.Image ?? defaultComponents.Image,
+      Source: components?.Source ?? defaultComponents.Source,
+      File: components?.File ?? defaultComponents.File,
+      Unstable_Audio:
+        components?.Unstable_Audio ?? defaultComponents.Unstable_Audio,
+    };
+
     return messageGroups.map((group, groupIndex) => {
       const GroupComponent = components?.Group ?? defaultComponents.Group;
       const identity = partKeys[group.indices[0]!];
@@ -491,7 +393,7 @@ export const MessagePrimitiveUnstable_PartsGrouped: FC<
             <MessagePart
               key={partKeys[partIndex]}
               partIndex={partIndex}
-              components={components}
+              components={leafComponents}
             />
           ))}
         </GroupComponent>

package/src/primitives/selectionToolbar/SelectionToolbarRoot.test.tsx

@@ -1,6 +1,6 @@
 /** @vitest-environment jsdom */
 import type { MouseEvent, ReactNode } from "react";
-import { fireEvent, render } from "@testing-library/react";
+import { act, fireEvent, render } from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import type * as StoreModule from "@assistant-ui/store";
 import { ThreadPrimitiveRoot } from "../thread/ThreadRoot";
@@ -96,14 +96,6 @@ describe("SelectionToolbarPrimitiveRoot onMouseDown composition", () => {
 });
 
 describe("SelectionToolbarPrimitiveRoot selection changes", () => {
-  it("opens from a selectionchange event without a mouse or key event", () => {
-    render(<SelectionToolbarPrimitiveRoot data-testid="toolbar" />);
-
-    fireEvent(document, new Event("selectionchange"));
-
-    expect(document.querySelector('[data-testid="toolbar"]')).not.toBeNull();
-  });
-
   it("closes an open toolbar when the selection collapses", () => {
     render(<SelectionToolbarPrimitiveRoot data-testid="toolbar" />);
     fireEvent(document, new Event("selectionchange"));
@@ -282,17 +274,33 @@ describe("SelectionToolbarPrimitiveRoot frame cleanup", () => {
     expect(frames).toHaveLength(2);
   });
 
-  it("recovers when the window blurs during a drag", () => {
+  it("shows the toolbar when the window blurs during a drag", () => {
     const { frames } = deferFrames();
-    render(<SelectionToolbarPrimitiveRoot />);
+    render(<SelectionToolbarPrimitiveRoot data-testid="toolbar" />);
 
     fireEvent.mouseDown(document);
     fireEvent(document, new Event("selectionchange"));
     expect(frames).toHaveLength(0);
 
     fireEvent.blur(window);
-    fireEvent(document, new Event("selectionchange"));
     expect(frames).toHaveLength(1);
+
+    act(() => frames[0]?.(0));
+
+    expect(document.querySelector('[data-testid="toolbar"]')).not.toBeNull();
+  });
+
+  it("does not reopen a toolbar hidden by scroll on an unrelated window blur", () => {
+    render(<SelectionToolbarPrimitiveRoot data-testid="toolbar" />);
+
+    fireEvent(document, new Event("selectionchange"));
+    expect(document.querySelector('[data-testid="toolbar"]')).not.toBeNull();
+
+    fireEvent.scroll(document);
+    expect(document.querySelector('[data-testid="toolbar"]')).toBeNull();
+
+    fireEvent.blur(window);
+    expect(document.querySelector('[data-testid="toolbar"]')).toBeNull();
   });
 
   it("recovers when a context menu consumes the mouseup of a press", () => {

package/src/primitives/selectionToolbar/SelectionToolbarRoot.tsx

@@ -134,12 +134,16 @@ export const SelectionToolbarPrimitiveRoot = forwardRef<
       isMouseDragging = false;
     };
 
+    const handleWindowBlur = () => {
+      if (isMouseDragging) handleMouseUp();
+    };
+
     document.addEventListener("mousedown", handleMouseDown, true);
     document.addEventListener("mouseup", handleMouseUp, true);
     document.addEventListener("dragend", handleMouseUp, true);
     // A context menu can consume the mouseup of the press that opened it.
     document.addEventListener("contextmenu", handleMouseCancel, true);
-    window.addEventListener("blur", handleMouseCancel);
+    window.addEventListener("blur", handleWindowBlur);
     document.addEventListener("selectionchange", handleSelectionChange);
     document.addEventListener("scroll", handleScroll, true);
 
@@ -149,7 +153,7 @@ export const SelectionToolbarPrimitiveRoot = forwardRef<
       document.removeEventListener("mouseup", handleMouseUp, true);
       document.removeEventListener("dragend", handleMouseUp, true);
       document.removeEventListener("contextmenu", handleMouseCancel, true);
-      window.removeEventListener("blur", handleMouseCancel);
+      window.removeEventListener("blur", handleWindowBlur);
       document.removeEventListener("selectionchange", handleSelectionChange);
       document.removeEventListener("scroll", handleScroll, true);
     };

package/src/primitives/thread/ThreadViewport.tsx

@@ -7,7 +7,6 @@ import {
   forwardRef,
   type ComponentPropsWithoutRef,
   useCallback,
-  useLayoutEffect,
   useMemo,
 } from "react";
 import { useAuiState } from "@assistant-ui/store";
@@ -20,6 +19,7 @@ import {
   useThreadViewportStore,
 } from "../../context/react/ThreadViewportContext";
 import { useTopAnchorReserve } from "./topAnchor/useTopAnchorReserve";
+import { useIsomorphicLayoutEffect } from "../../utils/useIsomorphicLayoutEffect";
 import {
   getActiveTopAnchorAnchorId,
   getActiveTopAnchorTargetId,
@@ -124,13 +124,13 @@ const useTopAnchorTurn = (enabled: boolean) => {
       isTopAnchorTurnValid(topAnchorTurn, s.thread.messages),
   );
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (!topAnchorTurn || topAnchorTurnIsValid) return;
 
     threadViewportStore.getState().setTopAnchorTurn(null);
   }, [threadViewportStore, topAnchorTurn, topAnchorTurnIsValid]);
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (!activeTurn) return;
 
     const state = threadViewportStore.getState();

package/src/primitives/thread/topAnchor/useTopAnchorReserve.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { useLayoutEffect } from "react";
+import { useIsomorphicLayoutEffect } from "../../../utils/useIsomorphicLayoutEffect";
 import { useThreadViewportStore } from "../../../context/react/ThreadViewportContext";
 import { mountTopAnchorReserve } from "./mountTopAnchorReserve";
 
@@ -12,7 +12,7 @@ import { mountTopAnchorReserve } from "./mountTopAnchorReserve";
 export const useTopAnchorReserve = (enabled: boolean) => {
   const threadViewportStore = useThreadViewportStore();
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (!enabled) return;
     return mountTopAnchorReserve(threadViewportStore);
   }, [enabled, threadViewportStore]);