@assistant-ui/react 0.15.22 → 0.15.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@assistant-ui/react",
-  "version": "0.15.22",
+  "version": "0.15.24",
   "description": "Open-source TypeScript/React library for building production-grade AI chat experiences",
   "keywords": [
     "ai",
@@ -55,14 +55,14 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@assistant-ui/core": "^0.3.21",
-    "@assistant-ui/store": "^0.3.15",
-    "@assistant-ui/tap": "^0.9.19",
-    "assistant-cloud": "^0.2.3",
-    "assistant-stream": "^0.3.45",
+    "@assistant-ui/core": "^0.3.23",
+    "@assistant-ui/store": "^0.3.17",
+    "@assistant-ui/tap": "^0.9.21",
+    "assistant-cloud": "^0.2.5",
+    "assistant-stream": "^0.3.47",
     "radix-ui": "^1.6.7",
     "react-textarea-autosize": "^8.5.9",
-    "safe-content-frame": "^0.0.31",
+    "safe-content-frame": "^0.0.32",
     "zod": "^4.6.5",
     "zustand": "^5.0.15"
   },
@@ -81,17 +81,18 @@
     }
   },
   "devDependencies": {
-    "@assistant-ui/vite": "0.0.19",
-    "@assistant-ui/x-buildutils": "0.0.29",
+    "@assistant-ui/vite": "0.0.20",
+    "@assistant-ui/x-buildutils": "0.0.30",
+    "@assistant-ui/x-react18": "0.0.0",
     "@testing-library/react": "^16.3.3",
     "@types/json-schema": "^7.0.15",
-    "@types/node": "^26.5.1",
+    "@types/node": "^26.6.3",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
     "jsdom": "^30.0.1",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
-    "vitest": "^5.0.1"
+    "vitest": "^5.0.3"
   },
   "publishConfig": {
     "access": "public",
@@ -110,6 +111,8 @@
     "build": "aui-build",
     "test": "vitest run",
     "typecheck": "tsc --noEmit",
-    "test:watch": "vitest"
+    "test:peer-react18": "vitest run --config vitest.peer-react18.config.ts",
+    "test:watch": "vitest",
+    "test:types:peer-react18": "aui-react18-types"
   }
 }

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

@@ -133,6 +133,7 @@ const fireKeyDown = (
     ctrlKey?: boolean;
     metaKey?: boolean;
     isComposing?: boolean;
+    keyCode?: number;
   } = {},
 ): KeyboardEvent => {
   const event = new KeyboardEvent("keydown", {
@@ -143,6 +144,7 @@ const fireKeyDown = (
     ctrlKey: opts.ctrlKey ?? false,
     metaKey: opts.metaKey ?? false,
     isComposing: opts.isComposing ?? false,
+    keyCode: opts.keyCode ?? 0,
   });
   textarea.dispatchEvent(event);
   return event;
@@ -441,6 +443,20 @@ describe("ComposerPrimitiveInput", () => {
       expect(event.defaultPrevented).toBe(false);
     });
 
+    it("ignores the Enter that commits an IME composition after compositionend (Safari)", async () => {
+      const textarea = await mount();
+
+      let event!: KeyboardEvent;
+      await act(async () => {
+        fireCompositionStart(textarea);
+        fireCompositionEnd(textarea, "日本語");
+        event = fireKeyDown(textarea, { key: "Enter", keyCode: 229 });
+      });
+
+      expect(requestSubmitSpy).not.toHaveBeenCalled();
+      expect(event.defaultPrevented).toBe(false);
+    });
+
     it("submitMode='ctrlEnter' submits on Cmd/Ctrl+Enter but not on plain Enter", async () => {
       const textarea = await mount({ submitMode: "ctrlEnter" });
 
@@ -566,13 +582,14 @@ describe("ComposerPrimitiveInput", () => {
   describe("escape behavior", () => {
     const fireEscape = (
       textarea: HTMLTextAreaElement,
-      opts: { isComposing?: boolean } = {},
+      opts: { isComposing?: boolean; keyCode?: number } = {},
     ): KeyboardEvent => {
       const event = new KeyboardEvent("keydown", {
         bubbles: true,
         cancelable: true,
         key: "Escape",
         isComposing: opts.isComposing ?? false,
+        keyCode: opts.keyCode ?? 0,
       });
       textarea.dispatchEvent(event);
       escapeKeydownHandler?.(event);
@@ -604,6 +621,21 @@ describe("ComposerPrimitiveInput", () => {
       expect(cancelSpy).not.toHaveBeenCalled();
       expect(event.defaultPrevented).toBe(false);
     });
+
+    it("ignores the Escape that cancels an IME composition after compositionend (Safari)", async () => {
+      composerState.canCancel = true;
+      const textarea = await mount();
+
+      let event!: KeyboardEvent;
+      await act(async () => {
+        fireCompositionStart(textarea);
+        fireCompositionEnd(textarea, "");
+        event = fireEscape(textarea, { keyCode: 229 });
+      });
+
+      expect(cancelSpy).not.toHaveBeenCalled();
+      expect(event.defaultPrevented).toBe(false);
+    });
   });
 
   describe("paste attachments", () => {

package/src/primitives/composer/ComposerInput.tsx

@@ -22,6 +22,7 @@ import { useEscapeKeydown } from "radix-ui/internal";
 import { useOnScrollToBottom } from "../../utils/hooks/useOnScrollToBottom";
 import { useMediaQuery } from "../../utils/hooks/useMediaQuery";
 import { renderSlot } from "../../utils/Primitive";
+import { isCompositionKey } from "../../utils/isCompositionKey";
 import { useAui } from "@assistant-ui/store";
 import { flushTapSync } from "@assistant-ui/tap";
 import { useComposerInputPluginRegistryOptional } from "./ComposerInputPluginContext";
@@ -200,7 +201,7 @@ export const ComposerPrimitiveInput = forwardRef<
       if (!textareaRef.current?.contains(e.target as Node)) return;
 
       // ignore IME composition events
-      if (e.isComposing) return;
+      if (isCompositionKey(e)) return;
 
       // Let registered plugins (mention, slash command, etc.) handle Escape first
       if (pluginRegistry) {
@@ -222,7 +223,7 @@ export const ComposerPrimitiveInput = forwardRef<
       if (isDisabled) return;
 
       // ignore IME composition events
-      if (e.nativeEvent.isComposing) return;
+      if (isCompositionKey(e.nativeEvent)) return;
 
       // Let registered plugins (mention, slash command, etc.) handle keyboard events first
       if (pluginRegistry) {

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

@@ -0,0 +1,72 @@
+// @vitest-environment jsdom
+
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import type { ThreadMessageLike } from "@assistant-ui/core";
+import {
+  AssistantRuntimeProvider,
+  useExternalStoreRuntime,
+} from "@assistant-ui/core/react";
+import { useAuiState } from "@assistant-ui/store";
+import { ThreadPrimitiveMessages } from "../thread/ThreadMessages";
+import { ThreadPrimitiveRoot } from "../thread/ThreadRoot";
+import { MessagePrimitiveIf } from "./MessageIf";
+
+const messages: ThreadMessageLike[] = [
+  { id: "u", role: "user", content: [{ type: "text", text: "u" }] },
+  { id: "a", role: "assistant", content: [{ type: "text", text: "a" }] },
+  { id: "s", role: "system", content: [{ type: "text", text: "s" }] },
+];
+
+const roles = ["user", "assistant", "system"] as const;
+type Role = (typeof roles)[number];
+
+const roleFilter = (role: Role, value: boolean | undefined) =>
+  ({ [role]: value }) as MessagePrimitiveIf.Props;
+
+const renderRoles = (filter: MessagePrimitiveIf.Props) => {
+  const Message = () => {
+    const role = useAuiState((s) => s.message.role);
+    return (
+      <MessagePrimitiveIf {...filter}>
+        <span data-testid={`shown-${role}`} />
+      </MessagePrimitiveIf>
+    );
+  };
+  const Example = () => {
+    const runtime = useExternalStoreRuntime({
+      messages,
+      convertMessage: (message) => message,
+      onNew: async () => {},
+    });
+    return (
+      <AssistantRuntimeProvider runtime={runtime}>
+        <ThreadPrimitiveRoot>
+          <ThreadPrimitiveMessages components={{ Message }} />
+        </ThreadPrimitiveRoot>
+      </AssistantRuntimeProvider>
+    );
+  };
+  const { queryByTestId } = render(<Example />);
+  return roles.filter((role) => queryByTestId(`shown-${role}`) !== null);
+};
+
+describe("MessagePrimitive.If role filters", () => {
+  it.each(roles)("%s={true} renders only that role", (role) => {
+    expect(renderRoles(roleFilter(role, true))).toEqual([role]);
+  });
+
+  it.each(roles)("%s={false} renders every other role", (role) => {
+    expect(renderRoles(roleFilter(role, false))).toEqual(
+      roles.filter((r) => r !== role),
+    );
+  });
+
+  it.each(roles)("%s={undefined} renders every role", (role) => {
+    expect(renderRoles(roleFilter(role, undefined))).toEqual([...roles]);
+  });
+
+  it("combines a true filter with a false filter", () => {
+    expect(renderRoles({ assistant: false, system: false })).toEqual(["user"]);
+  });
+});

package/src/primitives/message/MessageIf.ts

@@ -34,9 +34,14 @@ const useMessageIf = (props: UseMessageIfProps) => {
 
     if (props.hasBranches === true && branchCount < 2) return false;
 
-    if (props.user && role !== "user") return false;
-    if (props.assistant && role !== "assistant") return false;
-    if (props.system && role !== "system") return false;
+    if (props.user === true && role !== "user") return false;
+    if (props.user === false && role === "user") return false;
+
+    if (props.assistant === true && role !== "assistant") return false;
+    if (props.assistant === false && role === "assistant") return false;
+
+    if (props.system === true && role !== "system") return false;
+    if (props.system === false && role === "system") return false;
 
     if (props.lastOrHover === true && !isHovering && !isLast) return false;
     if (props.last !== undefined && props.last !== isLast) return false;

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

@@ -1,7 +1,13 @@
 // @vitest-environment jsdom
 
 import { render, screen, waitFor } from "@testing-library/react";
-import { useEffect, type FC, type ReactNode } from "react";
+import {
+  useEffect,
+  useState,
+  type FC,
+  type ReactNode,
+  type PropsWithChildren,
+} from "react";
 import { describe, expect, it } from "vitest";
 import type { ThreadMessageLike } from "@assistant-ui/core";
 import {
@@ -63,10 +69,12 @@ const Example = ({
   content,
   Message: MessageComponent = Message,
   extra,
+  isRunning = false,
 }: {
   content: ThreadMessageLike["content"];
   Message?: FC;
   extra?: ReactNode;
+  isRunning?: boolean;
 }) => {
   const messages: ThreadMessageLike[] = [
     { id: "message", role: "assistant", content },
@@ -74,6 +82,7 @@ const Example = ({
   const runtime = useExternalStoreRuntime({
     messages,
     convertMessage: (message) => message,
+    isRunning,
     onNew: async () => {},
   });
   return (
@@ -88,6 +97,267 @@ const Example = ({
 };
 
 describe("MessagePrimitive.Unstable_PartsGroupedByParentId", () => {
+  it.each(["tool-call", "reasoning"] as const)(
+    "keeps wrapper and mounted state when a tool call is appended after %s",
+    (firstType) => {
+      let mounts = 0;
+      const Group = ({ children }: PropsWithChildren) => {
+        const [mount] = useState(() => ++mounts);
+        return <section data-mount={mount}>{children}</section>;
+      };
+      const Text = ({ text }: { text: string }) => {
+        const [seed] = useState(text);
+        return <span>{`${seed}:${text}`}</span>;
+      };
+      const Tool = ({ argsText }: { argsText: string }) => (
+        <Text text={argsText} />
+      );
+      const Message = partsMessage({
+        Reasoning: Text,
+        Group,
+        tools: { Fallback: Tool },
+      });
+      const first =
+        firstType === "tool-call"
+          ? {
+              type: "tool-call" as const,
+              toolCallId: "t2",
+              toolName: "task",
+              args: {},
+              argsText: "draft",
+              parentId: "parent",
+            }
+          : {
+              type: "reasoning" as const,
+              id: "r1",
+              text: "draft",
+              parentId: "parent",
+            };
+      const view = render(
+        <Example Message={Message} content={[first]} isRunning />,
+      );
+      const wrapper = view.container.querySelector("section");
+      const streamed =
+        first.type === "tool-call"
+          ? { ...first, argsText: "streamed" }
+          : { ...first, text: "streamed" };
+      const appended = {
+        type: "tool-call" as const,
+        toolCallId: "t1",
+        toolName: "task",
+        args: {},
+        argsText: "appended",
+        parentId: "parent",
+      };
+      view.rerender(
+        <Example Message={Message} content={[streamed, appended]} isRunning />,
+      );
+      expect(view.container.querySelector("section")).toBe(wrapper);
+      expect(wrapper?.dataset.mount).toBe("1");
+      expect(
+        Array.from(
+          view.container.querySelectorAll("span"),
+          (el) => el.textContent,
+        ),
+      ).toEqual(["draft:streamed", "appended:appended"]);
+      view.rerender(
+        <Example
+          Message={Message}
+          content={[
+            streamed,
+            { ...appended, argsText: "updated" },
+            { ...appended, toolCallId: "t0", argsText: "last" },
+          ]}
+          isRunning
+        />,
+      );
+      expect(view.container.querySelector("section")).toBe(wrapper);
+      expect(
+        Array.from(
+          view.container.querySelectorAll("span"),
+          (el) => el.textContent,
+        ),
+      ).toEqual(["draft:streamed", "appended:updated", "last:last"]);
+    },
+  );
+
+  it("keeps parent names and part ids with key delimiters separate", () => {
+    let mounts = 0;
+    const Group = ({ children }: PropsWithChildren) => {
+      const [mount] = useState(() => ++mounts);
+      return <section data-mount={mount}>{children}</section>;
+    };
+    const Text = ({ text }: { text: string }) => {
+      const [seed] = useState(text);
+      return <span>{`${seed}:${text}`}</span>;
+    };
+    const Message = partsMessage({ Text, Group });
+    const first = {
+      type: "text" as const,
+      id: "x-id:text:y",
+      text: "first",
+      parentId: "a",
+    };
+    const second = {
+      type: "text" as const,
+      id: "y",
+      text: "second",
+      parentId: "a-id:text:x",
+    };
+    const view = render(
+      <Example Message={Message} content={[first, second]} />,
+    );
+    view.rerender(
+      <Example
+        Message={Message}
+        content={[
+          { ...second, text: "second updated" },
+          { ...first, text: "first updated" },
+        ]}
+      />,
+    );
+    expect(
+      Array.from(
+        view.container.querySelectorAll("section"),
+        (el) => el.dataset.mount,
+      ),
+    ).toEqual(["2", "1"]);
+    expect(
+      Array.from(
+        view.container.querySelectorAll("span"),
+        (el) => el.textContent,
+      ),
+    ).toEqual(["second:second updated", "first:first updated"]);
+  });
+
+  it.each([undefined, "parent"])(
+    "keeps wrapper and leaf state when later identified parts swap with parent=%s",
+    (parentId) => {
+      let mounts = 0;
+      const Group = ({ children }: PropsWithChildren) => {
+        const [mount] = useState(() => ++mounts);
+        return <section data-mount={mount}>{children}</section>;
+      };
+      const Text = ({ text }: { text: string }) => {
+        const [seed] = useState(text);
+        return <span>{`${seed}:${text}`}</span>;
+      };
+      const Message = partsMessage({ Text, Group });
+      const first = {
+        type: "text" as const,
+        id: "p1",
+        text: "first",
+        ...(parentId !== undefined && { parentId }),
+      };
+      const second = {
+        type: "text" as const,
+        id: "p2",
+        text: "second",
+        ...(parentId !== undefined && { parentId }),
+      };
+      const third = {
+        ...second,
+        id: "p3",
+        text: "third",
+      };
+      const view = render(
+        <Example Message={Message} content={[first, second, third]} />,
+      );
+      view.rerender(
+        <Example
+          Message={Message}
+          content={[
+            { ...first, text: "first updated" },
+            { ...third, text: "third updated" },
+            { ...second, text: "second updated" },
+          ]}
+        />,
+      );
+      expect(
+        Array.from(
+          view.container.querySelectorAll("span"),
+          (el) => el.textContent,
+        ),
+      ).toEqual([
+        "first:first updated",
+        "third:third updated",
+        "second:second updated",
+      ]);
+      expect(
+        Array.from(
+          view.container.querySelectorAll("section"),
+          (el) => el.dataset.mount,
+        ),
+      ).toEqual(parentId === undefined ? ["1", "3", "2"] : ["1"]);
+    },
+  );
+
+  it("keys unidentified groups by index and keeps parent names separate", () => {
+    let mounts = 0;
+    const Group = ({
+      groupKey,
+      children,
+    }: PropsWithChildren<{ groupKey: string | undefined }>) => {
+      const [mount] = useState(() => ++mounts);
+      return (
+        <section data-mount={mount} data-parent={groupKey}>
+          {children}
+        </section>
+      );
+    };
+    const Message = partsMessage({ Group });
+    const parts = [
+      { type: "text" as const, text: "first" },
+      { type: "text" as const, text: "second" },
+    ];
+    const view = render(<Example Message={Message} content={parts} />);
+    view.rerender(
+      <Example
+        Message={Message}
+        content={[
+          { type: "text", text: "parented", parentId: "ungrouped" },
+          ...parts,
+        ]}
+      />,
+    );
+    expect(
+      Array.from(
+        view.container.querySelectorAll("section"),
+        (el) => el.dataset.mount,
+      ),
+    ).toEqual(["3", "2", "4"]);
+  });
+
+  it("keeps a text seed while streaming and resets it for a replacement id", () => {
+    const SeededText = ({ text }: { text: string }) => {
+      const [seed] = useState(text);
+      return <span>{`${seed}:${text}`}</span>;
+    };
+    const Message = partsMessage({ Text: SeededText });
+    const view = render(
+      <Example
+        Message={Message}
+        content={[{ type: "text", id: "p1", text: "old" }]}
+      />,
+    );
+
+    view.rerender(
+      <Example
+        Message={Message}
+        content={[{ type: "text", id: "p1", text: "old streamed" }]}
+      />,
+    );
+    expect(view.container.textContent).toBe("old:old streamed");
+
+    view.rerender(
+      <Example
+        Message={Message}
+        content={[{ type: "text", id: "p2", text: "new" }]}
+      />,
+    );
+    expect(view.container.textContent).toBe("new:new");
+  });
+
   it("keeps parent IDs separate from ungrouped parts across content updates", () => {
     const { rerender } = render(
       <Example

package/src/primitives/message/MessagePartsGrouped.tsx

@@ -27,6 +27,7 @@ import type {
 } from "@assistant-ui/core/react";
 import { MessagePartPrimitiveInProgress } from "../messagePart/MessagePartInProgress";
 import type { MessagePartStatus } from "@assistant-ui/core";
+import { getMessagePartKeys } from "@assistant-ui/core/internal";
 
 type MessagePartGroup = {
   groupKey: string | undefined;
@@ -73,15 +74,16 @@ const groupMessagePartsByParentId: GroupingFunction = (
 
 const useMessagePartsGrouped = (
   groupingFunction: GroupingFunction,
-): MessagePartGroup[] => {
+): { groups: MessagePartGroup[]; partKeys: string[] } => {
   const parts = useAuiState((s) => s.message.parts);
 
-  return useMemo(() => {
+  const groups = useMemo(() => {
     if (parts.length === 0) {
       return [];
     }
     return groupingFunction(parts);
   }, [parts, groupingFunction]);
+  return { groups, partKeys: getMessagePartKeys(parts) };
 };
 
 export namespace MessagePrimitiveUnstable_PartsGrouped {
@@ -463,7 +465,8 @@ export const MessagePrimitiveUnstable_PartsGrouped: FC<
   MessagePrimitiveUnstable_PartsGrouped.Props
 > = ({ groupingFunction, components }) => {
   const contentLength = useAuiState((s) => s.message.parts.length);
-  const messageGroups = useMessagePartsGrouped(groupingFunction);
+  const { groups: messageGroups, partKeys } =
+    useMessagePartsGrouped(groupingFunction);
 
   const partsElements = useMemo(() => {
     if (contentLength === 0) {
@@ -472,16 +475,21 @@ export const MessagePrimitiveUnstable_PartsGrouped: FC<
 
     return messageGroups.map((group, groupIndex) => {
       const GroupComponent = components?.Group ?? defaultComponents.Group;
+      const identity = partKeys[group.indices[0]!];
 
       return (
         <GroupComponent
-          key={`group-${groupIndex}-${group.groupKey ?? "ungrouped"}`}
+          key={JSON.stringify([
+            "group",
+            group.groupKey ?? null,
+            identity?.includes(":") ? `id:${identity}` : groupIndex,
+          ])}
           groupKey={group.groupKey}
           indices={group.indices}
         >
           {group.indices.map((partIndex) => (
             <MessagePart
-              key={partIndex}
+              key={partKeys[partIndex]}
               partIndex={partIndex}
               components={components}
             />
@@ -489,7 +497,7 @@ export const MessagePrimitiveUnstable_PartsGrouped: FC<
         </GroupComponent>
       );
     });
-  }, [messageGroups, components, contentLength]);
+  }, [messageGroups, components, contentLength, partKeys]);
 
   return <>{partsElements}</>;
 };