@assistant-ui/react 0.15.1 → 0.15.3

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/index.ts

@@ -358,6 +358,7 @@ export type {
   ToolModelContentPart,
   MessageStatus,
   MessagePartStatus,
+  MessagePartStreamStatus,
   ToolCallMessagePartStatus,
   MessageTiming,
   ThreadUserMessagePart,

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

@@ -1,14 +1,9 @@
 import type {
   CompleteAttachment,
-  DataMessagePart,
-  FileMessagePart,
-  ImageMessagePart,
   MessageStatus,
   SourceProviderMetadata,
   ThreadMessage,
-  TextMessagePart,
   ToolApprovalOption,
-  Unstable_AudioMessagePart,
 } from "@assistant-ui/core";
 import { fromThreadMessageLike } from "../runtime-cores/external-store/ThreadMessageLike";
 import type { CloudMessage } from "assistant-cloud";
@@ -82,14 +77,38 @@ type AuiV0MessagePart =
       readonly data: string;
       readonly mimeType: string;
       readonly filename?: string;
+      readonly sourceType?: "url" | "id";
     };
 
 type AuiV0AttachmentPart =
-  | TextMessagePart
-  | ImageMessagePart
-  | FileMessagePart
-  | Unstable_AudioMessagePart
-  | DataMessagePart<ReadonlyJSONValue>;
+  | {
+      readonly type: "text";
+      readonly text: string;
+    }
+  | {
+      readonly type: "image";
+      readonly image: string;
+      readonly filename?: string;
+    }
+  | {
+      readonly type: "file";
+      readonly data: string;
+      readonly mimeType: string;
+      readonly filename?: string;
+      readonly sourceType?: "url" | "id";
+    }
+  | {
+      readonly type: "audio";
+      readonly audio: {
+        readonly data: string;
+        readonly format: "mp3" | "wav";
+      };
+    }
+  | {
+      readonly type: "data";
+      readonly name: string;
+      readonly data: ReadonlyJSONValue;
+    };
 
 type AuiV0Attachment = {
   readonly id: string;
@@ -125,16 +144,41 @@ const encodeAttachmentPart = (
   const type = part.type;
   switch (type) {
     case "text":
+      return { type: "text", text: part.text };
+
     case "image":
+      return {
+        type: "image",
+        image: part.image,
+        ...(part.filename != null ? { filename: part.filename } : undefined),
+      };
+
     case "file":
+      return {
+        type: "file",
+        data: part.data,
+        mimeType: part.mimeType,
+        ...(part.filename != null ? { filename: part.filename } : undefined),
+        ...(part.sourceType != null
+          ? { sourceType: part.sourceType }
+          : undefined),
+      };
+
     case "audio":
-      return part;
+      return {
+        type: "audio",
+        audio: { data: part.audio.data, format: part.audio.format },
+      };
 
     case "data": {
       if (!isJSONValue(part.data)) {
         console.warn(`attachment data is not JSON! ${JSON.stringify(part)}`);
       }
-      return { ...part, data: part.data as ReadonlyJSONValue };
+      return {
+        type: "data",
+        name: part.name,
+        data: part.data as ReadonlyJSONValue,
+      };
     }
 
     default: {
@@ -213,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)}`,
             );
@@ -225,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),
@@ -242,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/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 = {