@assistant-ui/react 0.15.2 → 0.15.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@assistant-ui/react",
-  "version": "0.15.2",
+  "version": "0.15.4",
   "description": "Open-source TypeScript/React library for building production-grade AI chat experiences",
   "keywords": [
     "ai",
@@ -55,8 +55,8 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@assistant-ui/core": "^0.3.3",
-    "@assistant-ui/store": "^0.3.1",
+    "@assistant-ui/core": "^0.3.5",
+    "@assistant-ui/store": "^0.3.3",
     "@assistant-ui/tap": "^0.9.9",
     "@radix-ui/primitive": "^1.1.7",
     "@radix-ui/react-collection": "^1.1.15",
@@ -66,12 +66,12 @@
     "@radix-ui/react-use-callback-ref": "^1.1.4",
     "@radix-ui/react-use-controllable-state": "^1.2.6",
     "@radix-ui/react-use-escape-keydown": "^1.1.5",
-    "assistant-cloud": "^0.1.37",
-    "assistant-stream": "^0.3.30",
+    "assistant-cloud": "^0.1.38",
+    "assistant-stream": "^0.3.33",
     "nanoid": "^6.0.0",
     "radix-ui": "^1.6.7",
     "react-textarea-autosize": "^8.5.9",
-    "safe-content-frame": "^0.0.25",
+    "safe-content-frame": "^0.0.26",
     "zod": "^4.4.3",
     "zustand": "^5.0.14"
   },

package/src/client/ExternalThread.ts

@@ -835,6 +835,7 @@ const useExternalThread = ({
         edit: hasEdit,
         delete: false,
         reload: hasReload,
+        refetchThread: false,
         cancel: isRunning,
         speech: false,
         attachments: hasAttachments,

package/src/client/InMemoryThreadList.ts

@@ -29,14 +29,24 @@ type ThreadData = {
 // ThreadListItem Client
 const useThreadListItemClient = (props: {
   data: ThreadData;
+  isRunning: boolean;
   onSwitchTo: () => void;
+  onRename: (title: string) => 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 {
+    data,
+    isRunning,
+    onSwitchTo,
+    onRename,
+    onUpdateCustom,
+    onArchive,
+    onUnarchive,
+    onDelete,
+  } = props;
   const state = useMemo(
     () => ({
       id: data.id,
@@ -45,14 +55,15 @@ const useThreadListItemClient = (props: {
       title: data.title,
       status: data.status,
       custom: data.custom,
+      isRunning,
     }),
-    [data.id, data.title, data.status, data.custom],
+    [data.id, data.title, data.status, data.custom, isRunning],
   );
 
   return {
     getState: () => state,
     switchTo: onSwitchTo,
-    rename: () => {},
+    rename: onRename,
     updateCustom: onUpdateCustom,
     archive: onArchive,
     unarchive: onUnarchive,
@@ -85,6 +96,12 @@ const useInMemoryThreadList = (
     onSwitchToThread?.(threadId);
   };
 
+  const handleRename = (threadId: string, title: string) => {
+    setThreads((prev) =>
+      prev.map((t) => (t.id === threadId ? { ...t, title } : t)),
+    );
+  };
+
   const handleArchive = (threadId: string) => {
     setThreads((prev) =>
       prev.map((t) =>
@@ -128,13 +145,18 @@ const useInMemoryThreadList = (
     onSwitchToNewThread?.();
   };
 
+  // Only the main thread is mounted, so it is the only thread that can run.
+  const mainThreadClient = useClientResource(threadFactory(mainThreadId));
+
   const threadListItems = useClientLookup(
     threads.map((t) =>
       withKey(
         t.id,
         ThreadListItemClient({
           data: t,
+          isRunning: t.id === mainThreadId && mainThreadClient.state.isRunning,
           onSwitchTo: () => handleSwitchToThread(t.id),
+          onRename: (title) => handleRename(t.id, title),
           onUpdateCustom: (custom) => handleUpdateCustom(t.id, custom),
           onArchive: () => handleArchive(t.id),
           onUnarchive: () => handleUnarchive(t.id),
@@ -144,9 +166,6 @@ const useInMemoryThreadList = (
     ),
   );
 
-  // Create the main thread
-  const mainThreadClient = useClientResource(threadFactory(mainThreadId));
-
   const state = useMemo(() => {
     const regularThreads = threads.filter((t) => t.status === "regular");
     const archivedThreads = threads.filter((t) => t.status === "archived");
@@ -170,6 +189,7 @@ const useInMemoryThreadList = (
     switchToNewThread: handleSwitchToNewThread,
     getLoadThreadsPromise: () => RESOLVED_PROMISE,
     reload: () => RESOLVED_PROMISE,
+    reloadMainThread: () => RESOLVED_PROMISE,
     loadMore: () => RESOLVED_PROMISE,
     item: (selector) => {
       if (selector === "main") {

package/src/client/SingleThreadList.ts

@@ -9,7 +9,11 @@ import {
 const RESOLVED_PROMISE = Promise.resolve();
 const THREAD_ID = "default";
 
-const useSingleThreadListItem = (): ClientOutput<"threadListItem"> => {
+const useSingleThreadListItem = ({
+  isRunning,
+}: {
+  isRunning: boolean;
+}): ClientOutput<"threadListItem"> => {
   const [custom, setCustom] = useState<Record<string, unknown> | undefined>();
 
   return {
@@ -20,6 +24,7 @@ const useSingleThreadListItem = (): ClientOutput<"threadListItem"> => {
       title: undefined,
       status: "regular",
       custom,
+      isRunning,
     }),
     switchTo: () => {},
     rename: () => {},
@@ -47,8 +52,10 @@ type SingleThreadListProps = {
 const useSingleThreadList = ({
   thread,
 }: SingleThreadListProps): ClientOutput<"threads"> => {
-  const itemClient = useClientResource(SingleThreadListItem());
   const threadClient = useClientResource(thread);
+  const itemClient = useClientResource(
+    SingleThreadListItem({ isRunning: threadClient.state.isRunning }),
+  );
 
   const state = useMemo(
     () => ({
@@ -75,6 +82,7 @@ const useSingleThreadList = ({
     },
     getLoadThreadsPromise: () => RESOLVED_PROMISE,
     reload: () => RESOLVED_PROMISE,
+    reloadMainThread: () => RESOLVED_PROMISE,
     loadMore: () => RESOLVED_PROMISE,
     item: (selector) => {
       if (

package/src/legacy-runtime/cloud/auiV0.ts

@@ -77,6 +77,7 @@ type AuiV0MessagePart =
       readonly data: string;
       readonly mimeType: string;
       readonly filename?: string;
+      readonly sourceType?: "url" | "id";
     };
 
 type AuiV0AttachmentPart =
@@ -94,6 +95,7 @@ type AuiV0AttachmentPart =
       readonly data: string;
       readonly mimeType: string;
       readonly filename?: string;
+      readonly sourceType?: "url" | "id";
     }
   | {
       readonly type: "audio";
@@ -157,6 +159,9 @@ const encodeAttachmentPart = (
         data: part.data,
         mimeType: part.mimeType,
         ...(part.filename != null ? { filename: part.filename } : undefined),
+        ...(part.sourceType != null
+          ? { sourceType: part.sourceType }
+          : undefined),
       };
 
     case "audio":
@@ -252,7 +257,7 @@ export function auiV0Encode(message: ThreadMessage): AuiV0Message {
           };
 
         case "tool-call": {
-          if (!isJSONValue(part.result)) {
+          if (part.result !== undefined && !isJSONValue(part.result)) {
             console.warn(
               `tool-call result is not JSON! ${JSON.stringify(part)}`,
             );
@@ -264,7 +269,7 @@ export function auiV0Encode(message: ThreadMessage): AuiV0Message {
             ...(JSON.stringify(part.args) === part.argsText
               ? { args: part.args }
               : { argsText: part.argsText }),
-            ...(part.result
+            ...(part.result !== undefined
               ? { result: part.result as ReadonlyJSONValue }
               : undefined),
             ...(part.isError ? { isError: true } : undefined),
@@ -281,6 +286,7 @@ export function auiV0Encode(message: ThreadMessage): AuiV0Message {
             data: part.data,
             mimeType: part.mimeType,
             ...(part.filename ? { filename: part.filename } : undefined),
+            ...(part.sourceType ? { sourceType: part.sourceType } : undefined),
           };
 
         default: {

package/src/legacy-runtime/runtime-cores/assistant-transport/types.ts

@@ -110,6 +110,12 @@ export type AssistantTransportOptions<T> = {
   api: string;
   resumeApi?: string;
   protocol?: AssistantTransportProtocol;
+  /**
+   * When `false`, stream decoding and state reconciliation tolerate malformed
+   * input (invalid chunks are dropped with a console log) instead of throwing.
+   * Resume runs always decode leniently. Defaults to `true`.
+   */
+  strict?: boolean;
   converter: AssistantTransportStateConverter<T>;
   headers: HeadersValue | (() => Promise<HeadersValue>);
   body?: object | (() => Promise<object | undefined>);

package/src/legacy-runtime/runtime-cores/assistant-transport/useAssistantTransportRuntime.test.tsx

@@ -112,6 +112,7 @@ const mountRuntime = (
 
 afterEach(() => {
   vi.unstubAllGlobals();
+  vi.restoreAllMocks();
 });
 
 describe("useAssistantTransportRuntime", () => {
@@ -145,6 +146,36 @@ describe("useAssistantTransportRuntime", () => {
     expect(fetchMock.requests).toHaveLength(1);
   });
 
+  it("skips add-message commands with no supported parts", async () => {
+    const fetchMock = installFetch();
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const { aui, sendCommand } = mountRuntime();
+    await waitFor(() =>
+      expect(
+        (aui().thread.getState().extras as { sendCommand?: unknown })
+          ?.sendCommand,
+      ).toBeTypeOf("function"),
+    );
+
+    act(() =>
+      aui().thread.append({
+        role: "user",
+        content: [{ type: "audio", audio: { data: "", format: "mp3" } }],
+      }),
+    );
+
+    await act(async () => {});
+    expect(warn).toHaveBeenCalledWith(
+      "[assistant-ui] Skipped add-message command with no supported parts",
+    );
+    expect(fetchMock.requests).toHaveLength(0);
+
+    // The skipped message must not leak its parentId into later batches.
+    act(() => sendCommand(createMessageCommand("follow-up")));
+    await waitFor(() => expect(fetchMock.requests).toHaveLength(1));
+    expect(fetchMock.requests[0]!.body).not.toHaveProperty("parentId");
+  });
+
   it("flushes commands enqueued during a resume run in a follow-up run", async () => {
     const fetchMock = installFetch();
     const { aui, sendCommand } = mountRuntime({

package/src/legacy-runtime/runtime-cores/assistant-transport/useAssistantTransportRuntime.ts

@@ -42,7 +42,7 @@ import type { UserExternalState } from "../../../augmentations";
 
 const convertAppendMessageToCommand = (
   message: AppendMessage,
-): AddMessageCommand => {
+): AddMessageCommand | null => {
   if (message.role !== "user")
     throw new Error("Only user messages are supported");
 
@@ -59,6 +59,8 @@ const convertAppendMessageToCommand = (
     }
   }
 
+  if (parts.length === 0) return null;
+
   return {
     type: "add-message",
     message: {
@@ -127,6 +129,20 @@ const useAssistantTransportThreadRuntime = <T>(
     onQueue: () => runManager.schedule(),
   });
 
+  const enqueueAppendMessage = (message: AppendMessage) => {
+    const command = convertAppendMessageToCommand(message);
+    if (!command) {
+      console.warn(
+        "[assistant-ui] Skipped add-message command with no supported parts",
+      );
+      return;
+    }
+    parentIdRef.current = message.parentId;
+    commandQueue.enqueue(command, {
+      schedule: message.startRun ?? message.role === "user",
+    });
+  };
+
   const threadId = useAuiState((s) => s.threadListItem.remoteId);
 
   const runManager = useRunManager({
@@ -201,10 +217,12 @@ const useAssistantTransportThreadRuntime = <T>(
 
       // Select decoder based on protocol option
       const protocol = options.protocol ?? "data-stream";
+      // Resume replays a best-effort buffer; always reconcile leniently.
+      const strict = isResume ? false : (options.strict ?? true);
       const decoder =
         protocol === "assistant-transport"
-          ? new AssistantTransportDecoder()
-          : new DataStreamDecoder();
+          ? new AssistantTransportDecoder({ strict })
+          : new DataStreamDecoder({ strict });
 
       let err: string | undefined;
       const stream = body.pipeThrough(decoder).pipeThrough(
@@ -214,6 +232,7 @@ const useAssistantTransportThreadRuntime = <T>(
               (agentStateRef.current as ReadonlyJSONValue) ?? null,
           }),
           throttle: isResume,
+          strict,
           onError: (error) => {
             err = error;
           },
@@ -329,21 +348,11 @@ const useAssistantTransportThreadRuntime = <T>(
       },
       state: agentStateRef.current as UserExternalState,
     } satisfies AssistantTransportExtras,
-    onNew: async (message: AppendMessage): Promise<void> => {
-      parentIdRef.current = message.parentId;
-      const command = convertAppendMessageToCommand(message);
-      commandQueue.enqueue(command, {
-        schedule: message.startRun ?? message.role === "user",
-      });
-    },
+    onNew: async (message: AppendMessage): Promise<void> =>
+      enqueueAppendMessage(message),
     ...(options.capabilities?.edit && {
-      onEdit: async (message: AppendMessage): Promise<void> => {
-        parentIdRef.current = message.parentId;
-        const command = convertAppendMessageToCommand(message);
-        commandQueue.enqueue(command, {
-          schedule: message.startRun ?? message.role === "user",
-        });
-      },
+      onEdit: async (message: AppendMessage): Promise<void> =>
+        enqueueAppendMessage(message),
     }),
     ...(commandQueue.state.queued.length > 0 && {
       onReload: async (parentId: string | null) => {

package/src/mcp-apps/McpAppRenderer.test.tsx

@@ -1,9 +1,17 @@
 // @vitest-environment jsdom
 import { render, waitFor } from "@testing-library/react";
-import { resource, useResource } from "@assistant-ui/tap";
-import type { ToolCallMessagePartProps } from "@assistant-ui/core/react";
+import { resource, useResource, withKey } from "@assistant-ui/tap";
+import { memo } from "react";
+import type {
+  ToolCallMessagePartComponent,
+  ToolCallMessagePartProps,
+} from "@assistant-ui/core/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
-import type { McpAppBridgeHandlers, McpAppsHost } from "./types";
+import type {
+  McpAppBridgeHandlers,
+  McpAppsHost,
+  McpAppsRemoteHostOptions,
+} from "./types";
 
 const { framePropsMock } = vi.hoisted(() => ({ framePropsMock: vi.fn() }));
 
@@ -22,10 +30,19 @@ vi.mock("./app-frame", () => ({
 }));
 
 import { McpAppRenderer } from "./McpAppRenderer";
+import { McpAppsRemoteHost } from "./McpAppsRemoteHost";
 
 const useHost = ({ host }: { host: McpAppsHost }) => host;
 const Host = resource(useHost);
 
+const createDeferred = <T,>() => {
+  let resolve!: (value: T) => void;
+  const promise = new Promise<T>((res) => {
+    resolve = res;
+  });
+  return { promise, resolve };
+};
+
 const createPart = (serverId?: string): ToolCallMessagePartProps => ({
   type: "tool-call",
   toolCallId: "call-1",
@@ -54,6 +71,43 @@ function Harness({ host, serverId }: { host: McpAppsHost; serverId?: string }) {
   return <Renderer {...createPart(serverId)} />;
 }
 
+const MemoizedPart = memo(function MemoizedPart({
+  Renderer,
+}: {
+  Renderer: ToolCallMessagePartComponent;
+}) {
+  return <Renderer {...createPart()} />;
+});
+
+function MemoizedHarness({ host }: { host: McpAppsHost }) {
+  const renderer = useResource(
+    McpAppRenderer({
+      host: Host({ host }),
+    }),
+  );
+  return <MemoizedPart Renderer={renderer.render} />;
+}
+
+function RemoteHarness({
+  url,
+  headers,
+  fetch,
+  resourceKey,
+}: {
+  url: string;
+  headers: NonNullable<McpAppsRemoteHostOptions["headers"]>;
+  fetch: typeof globalThis.fetch;
+  resourceKey?: string | number;
+}) {
+  const host = McpAppsRemoteHost({ url, headers, fetch });
+  const renderer = useResource(
+    McpAppRenderer({
+      host: resourceKey === undefined ? host : withKey(resourceKey, host),
+    }),
+  );
+  return <MemoizedPart Renderer={renderer.render} />;
+}
+
 describe("McpAppRenderer", () => {
   beforeEach(() => {
     framePropsMock.mockReset();
@@ -88,6 +142,211 @@ describe("McpAppRenderer", () => {
     });
   });
 
+  it("reloads the resource and hides stale HTML when the host changes", async () => {
+    const nextResource = createDeferred<{
+      uri: string;
+      mimeType: "text/html;profile=mcp-app";
+      html: string;
+    }>();
+    const firstHost: McpAppsHost = {
+      loadResource: vi.fn(async ({ uri }) => ({
+        uri,
+        mimeType: "text/html;profile=mcp-app" as const,
+        html: "first host",
+      })),
+      callTool: vi.fn(),
+      readResource: vi.fn(),
+      listResources: vi.fn(),
+    };
+    const nextHost: McpAppsHost = {
+      loadResource: vi.fn(() => nextResource.promise),
+      callTool: vi.fn(),
+      readResource: vi.fn(),
+      listResources: vi.fn(),
+    };
+
+    const view = render(<MemoizedHarness host={firstHost} />);
+    await waitFor(() =>
+      expect(framePropsMock.mock.lastCall?.[0].resource.html).toBe(
+        "first host",
+      ),
+    );
+
+    framePropsMock.mockClear();
+    view.rerender(<MemoizedHarness host={nextHost} />);
+
+    expect(nextHost.loadResource).toHaveBeenCalledTimes(1);
+    expect(framePropsMock).not.toHaveBeenCalled();
+
+    nextResource.resolve({
+      uri: "ui://example/search",
+      mimeType: "text/html;profile=mcp-app",
+      html: "next host",
+    });
+    await waitFor(() =>
+      expect(framePropsMock.mock.lastCall?.[0].resource.html).toBe("next host"),
+    );
+  });
+
+  it("reloads remote resources when the URL changes and keeps headers current", async () => {
+    const fetch = vi.fn(
+      async (url: string | URL | Request, init?: RequestInit) =>
+        Response.json({
+          uri: "ui://example/search",
+          mimeType: "text/html;profile=mcp-app",
+          html: `${String(url)}:${new Headers(init?.headers).get("authorization")}`,
+        }),
+    ) as unknown as typeof globalThis.fetch;
+
+    const view = render(
+      <RemoteHarness
+        url="/host-a"
+        headers={{ authorization: "Bearer a" }}
+        fetch={fetch}
+      />,
+    );
+    await waitFor(() =>
+      expect(framePropsMock.mock.lastCall?.[0].resource.html).toBe(
+        "/host-a:Bearer a",
+      ),
+    );
+
+    view.rerender(
+      <RemoteHarness
+        url="/host-b"
+        headers={{ authorization: "Bearer a" }}
+        fetch={fetch}
+      />,
+    );
+    await waitFor(() =>
+      expect(framePropsMock.mock.lastCall?.[0].resource.html).toBe(
+        "/host-b:Bearer a",
+      ),
+    );
+
+    view.rerender(
+      <RemoteHarness
+        url="/host-b"
+        headers={{ authorization: "Bearer b" }}
+        fetch={fetch}
+      />,
+    );
+    expect(fetch).toHaveBeenCalledTimes(2);
+    await framePropsMock.mock.lastCall?.[0].handlers.callTool({
+      name: "search",
+    });
+    expect(fetch).toHaveBeenNthCalledWith(
+      3,
+      "/host-b",
+      expect.objectContaining({
+        headers: {
+          "content-type": "application/json",
+          authorization: "Bearer b",
+        },
+      }),
+    );
+
+    view.rerender(
+      <RemoteHarness
+        url="/host-b"
+        headers={{ authorization: "Bearer b" }}
+        fetch={fetch}
+      />,
+    );
+    expect(fetch).toHaveBeenCalledTimes(3);
+  });
+
+  it("keeps mutated static headers current without reloading the resource", async () => {
+    const fetch = vi.fn(
+      async (url: string | URL | Request, init?: RequestInit) =>
+        Response.json({
+          uri: "ui://example/search",
+          mimeType: "text/html;profile=mcp-app",
+          html: `${String(url)}:${new Headers(init?.headers).get("authorization")}`,
+        }),
+    ) as unknown as typeof globalThis.fetch;
+    const headers = { authorization: "Bearer a" };
+
+    const view = render(
+      <RemoteHarness url="/host" headers={headers} fetch={fetch} />,
+    );
+    await waitFor(() =>
+      expect(framePropsMock.mock.lastCall?.[0].resource.html).toBe(
+        "/host:Bearer a",
+      ),
+    );
+
+    headers.authorization = "Bearer b";
+    view.rerender(
+      <RemoteHarness url="/host" headers={headers} fetch={fetch} />,
+    );
+    expect(fetch).toHaveBeenCalledTimes(1);
+    await framePropsMock.mock.lastCall?.[0].handlers.callTool({
+      name: "search",
+    });
+    expect(fetch).toHaveBeenNthCalledWith(
+      2,
+      "/host",
+      expect.objectContaining({
+        headers: {
+          "content-type": "application/json",
+          authorization: "Bearer b",
+        },
+      }),
+    );
+    expect(fetch).toHaveBeenCalledTimes(2);
+  });
+
+  it("uses resource keys to reload dynamic headers without callback identity churn", async () => {
+    const fetch = vi.fn(
+      async (url: string | URL | Request, init?: RequestInit) =>
+        Response.json({
+          uri: "ui://example/search",
+          mimeType: "text/html;profile=mcp-app",
+          html: `${String(url)}:${new Headers(init?.headers).get("authorization")}`,
+        }),
+    ) as unknown as typeof globalThis.fetch;
+
+    const view = render(
+      <RemoteHarness
+        url="/host"
+        headers={() => ({ authorization: "Bearer a" })}
+        resourceKey="workspace-a"
+        fetch={fetch}
+      />,
+    );
+    await waitFor(() =>
+      expect(framePropsMock.mock.lastCall?.[0].resource.html).toBe(
+        "/host:Bearer a",
+      ),
+    );
+
+    view.rerender(
+      <RemoteHarness
+        url="/host"
+        headers={() => ({ authorization: "Bearer a" })}
+        resourceKey="workspace-a"
+        fetch={fetch}
+      />,
+    );
+    expect(fetch).toHaveBeenCalledTimes(1);
+
+    view.rerender(
+      <RemoteHarness
+        url="/host"
+        headers={() => ({ authorization: "Bearer b" })}
+        resourceKey="workspace-b"
+        fetch={fetch}
+      />,
+    );
+    await waitFor(() =>
+      expect(framePropsMock.mock.lastCall?.[0].resource.html).toBe(
+        "/host:Bearer b",
+      ),
+    );
+    expect(fetch).toHaveBeenCalledTimes(2);
+  });
+
   it("gives the renderer serverId precedence in listResources", async () => {
     const listResources = vi.fn();
     const host: McpAppsHost = {