@assistant-ui/react 0.15.1 → 0.15.3

package/src/mcp-apps/McpAppRenderer.tsx

@@ -14,6 +14,7 @@ import type {
   ToolCallMessagePartProps,
 } from "@assistant-ui/core/react";
 import { useAui } from "@assistant-ui/store";
+import { create, type StoreApi, type UseBoundStore } from "zustand";
 
 import { useResource, resource, type ResourceElement } from "@assistant-ui/tap";
 import { McpAppFrame } from "./app-frame";
@@ -55,12 +56,15 @@ export type McpAppRendererOptions = {
 };
 
 type LoadedResourceState = {
+  host: McpAppsHost;
   resourceUri: string;
   serverId?: string;
   resource?: McpAppResource;
   error?: Error;
 };
 
+type UseHostStore = UseBoundStore<StoreApi<{ host: McpAppsHost }>>;
+
 function getInput(part: {
   status: { type: string };
   argsText: string;
@@ -91,11 +95,11 @@ function extractSendMessageText(params: unknown): string | undefined {
 
 function InlineRenderer({
   part,
-  internalsRef,
+  useHostStore,
   optionsRef,
 }: {
   part: ToolCallMessagePartProps;
-  internalsRef: MutableRefObject<{ host: McpAppsHost }>;
+  useHostStore: UseHostStore;
   optionsRef: MutableRefObject<McpAppRendererOptions>;
 }) {
   const opts = optionsRef.current;
@@ -113,17 +117,19 @@ function InlineRenderer({
 
   const [loadedResource, setLoadedResource] = useState<LoadedResourceState>();
 
+  const host = useHostStore((state) => state.host);
   const resourceUri = appForRender?.resourceUri;
   const serverId = appForRender?.serverId;
   const serverIdRef = useRef<string | undefined>(undefined);
   serverIdRef.current = serverId;
   useEffect(() => {
-    if (appForRender == null || resourceUri == null) return;
+    if (resourceUri == null) return;
     let cancelled = false;
+    const targetHost = host;
     const targetUri = resourceUri;
     const targetServerId = serverId;
 
-    internalsRef.current.host
+    targetHost
       .loadResource({
         uri: targetUri,
         ...(targetServerId ? { serverId: targetServerId } : {}),
@@ -131,6 +137,7 @@ function InlineRenderer({
       .then((res) => {
         if (!cancelled)
           setLoadedResource({
+            host: targetHost,
             resourceUri: targetUri,
             ...(targetServerId !== undefined
               ? { serverId: targetServerId }
@@ -141,6 +148,7 @@ function InlineRenderer({
       .catch((error: unknown) => {
         if (!cancelled) {
           setLoadedResource({
+            host: targetHost,
             resourceUri: targetUri,
             ...(targetServerId !== undefined
               ? { serverId: targetServerId }
@@ -153,8 +161,7 @@ function InlineRenderer({
     return () => {
       cancelled = true;
     };
-    // oxlint-disable-next-line react/exhaustive-deps -- re-fetch only when URI or server identity changes; appForRender identity is unstable and internalsRef is a stable ref
-  }, [resourceUri, serverId]);
+  }, [host, resourceUri, serverId]);
 
   const bridgeHandlers = useMemo<McpAppBridgeHandlers>(
     () => ({
@@ -166,29 +173,30 @@ function InlineRenderer({
         return { ok: true };
       },
       callTool: (params) =>
-        internalsRef.current.host.callTool({
+        useHostStore.getState().host.callTool({
           ...params,
           ...(serverIdRef.current ? { serverId: serverIdRef.current } : {}),
         }),
       readResource: (params) =>
-        internalsRef.current.host.readResource({
+        useHostStore.getState().host.readResource({
           ...params,
           ...(serverIdRef.current ? { serverId: serverIdRef.current } : {}),
         }),
       listResources: (params) => {
         if (!serverIdRef.current) {
-          return internalsRef.current.host.listResources(params);
+          return useHostStore.getState().host.listResources(params);
         }
-        return internalsRef.current.host.listResources({
+        return useHostStore.getState().host.listResources({
           ...(isRecord(params) ? params : {}),
           serverId: serverIdRef.current,
         });
       },
     }),
-    [aui, internalsRef],
+    [aui, useHostStore],
   );
 
   const loadedResourceForApp =
+    loadedResource?.host === host &&
     loadedResource?.resourceUri === appForRender?.resourceUri &&
     loadedResource?.serverId === appForRender?.serverId
       ? loadedResource
@@ -241,20 +249,24 @@ const useMcpAppRenderer = (
   const optionsRef = useRef<McpAppRendererOptions>(options);
   optionsRef.current = options;
 
-  const internalsRef = useRef<{ host: McpAppsHost }>({ host });
-  internalsRef.current = { host };
+  const [useHostStore] = useState(() =>
+    create<{ host: McpAppsHost }>(() => ({ host })),
+  );
+  useEffect(() => {
+    useHostStore.setState({ host });
+  }, [host, useHostStore]);
 
   const render = useMemo((): ToolCallMessagePartComponent => {
     const Render: ToolCallMessagePartComponent = (props) => (
       <InlineRenderer
         part={props}
-        internalsRef={internalsRef}
+        useHostStore={useHostStore}
         optionsRef={optionsRef}
       />
     );
     Render.displayName = "McpAppRenderer";
     return Render;
-  }, []);
+  }, [useHostStore]);
 
   return { render };
 };

package/src/mcp-apps/McpAppsRemoteHost.ts

@@ -79,23 +79,32 @@ const useMcpAppsRemoteHost = (
   const optionsRef = useRef(options);
   optionsRef.current = options;
 
-  return useMemo(
-    (): McpAppsHost => ({
+  const url = options.url;
+
+  return useMemo((): McpAppsHost => {
+    const getCurrentOptions = (): McpAppsRemoteHostOptions => {
+      const current = optionsRef.current;
+      return {
+        url,
+        ...(current.fetch !== undefined ? { fetch: current.fetch } : {}),
+        ...(current.headers !== undefined ? { headers: current.headers } : {}),
+      };
+    };
+    return {
       loadResource: (params) =>
         postToHost(
-          optionsRef.current,
+          getCurrentOptions(),
           "mcp-apps/read-resource",
           params,
         ) as Promise<McpAppResource>,
       callTool: (params) =>
-        postToHost(optionsRef.current, "tools/call", params),
+        postToHost(getCurrentOptions(), "tools/call", params),
       readResource: (params) =>
-        postToHost(optionsRef.current, "resources/read", params),
+        postToHost(getCurrentOptions(), "resources/read", params),
       listResources: (params) =>
-        postToHost(optionsRef.current, "resources/list", params),
-    }),
-    [],
-  );
+        postToHost(getCurrentOptions(), "resources/list", params),
+    };
+  }, [url]);
 };
 
 export const McpAppsRemoteHost = resource(useMcpAppsRemoteHost);

package/src/primitives/message/MessagePartsGrouped.tsx

@@ -151,7 +151,12 @@ export namespace MessagePrimitiveUnstable_PartsGrouped {
           Image?: ImageMessagePartComponent | undefined;
           /** Component for rendering file content */
           File?: FileMessagePartComponent | undefined;
-          /** Component for rendering audio content (experimental) */
+          /**
+           * Component for rendering audio content.
+           *
+           * @deprecated Render audio through the `File` slot instead, branching
+           * on an `audio/*` mime type.
+           */
           Unstable_Audio?: Unstable_AudioMessagePartComponent | undefined;
           /** Configuration for data part rendering */
           data?:

package/src/primitives/suggestion/SuggestionTrigger.ts

@@ -5,12 +5,12 @@ import {
   type ActionButtonProps,
   createActionButton,
 } from "../../utils/createActionButton";
-import { useCallback } from "react";
-import { useAuiState, useAui } from "@assistant-ui/store";
+import { useAuiState } from "@assistant-ui/store";
+import { useSuggestionTrigger as useSuggestionTriggerBehavior } from "@assistant-ui/core/react";
 
 const useSuggestionTrigger = ({
   send,
-  clearComposer = true,
+  clearComposer,
 }: {
   /**
    * When true, automatically sends the message.
@@ -19,7 +19,8 @@ const useSuggestionTrigger = ({
   send?: boolean | undefined;
 
   /**
-   * Whether to clear the composer after sending.
+   * Whether to clear the composer after sending. A send queued while a run is
+   * in progress never clears the composer.
    * When send is set to false, determines if composer text is replaced with suggestion (true, default),
    * or if it's appended to the composer text (false).
    *
@@ -27,37 +28,15 @@ const useSuggestionTrigger = ({
    */
   clearComposer?: boolean | undefined;
 }) => {
-  const aui = useAui();
-  const disabled = useAuiState((s) => s.thread.isDisabled);
   const prompt = useAuiState((s) => s.suggestion.prompt);
-
-  const resolvedSend = send ?? false;
-
-  const callback = useCallback(() => {
-    const isRunning = aui.thread.getState().isRunning;
-
-    if (resolvedSend && !isRunning) {
-      aui.thread.append({
-        content: [{ type: "text", text: prompt }],
-        runConfig: aui.composer.getState().runConfig,
-      });
-      if (clearComposer) {
-        aui.composer.setText("");
-      }
-    } else {
-      if (clearComposer) {
-        aui.composer.setText(prompt);
-      } else {
-        const currentText = aui.composer.getState().text;
-        aui.composer.setText(
-          currentText.trim() ? `${currentText} ${prompt}` : prompt,
-        );
-      }
-    }
-  }, [aui, resolvedSend, clearComposer, prompt]);
+  const { trigger, disabled } = useSuggestionTriggerBehavior({
+    prompt,
+    send,
+    clearComposer,
+  });
 
   if (disabled) return null;
-  return callback;
+  return trigger;
 };
 
 export namespace SuggestionPrimitiveTrigger {

package/src/primitives/thread/ThreadSuggestion.ts

@@ -24,7 +24,8 @@ const useThreadSuggestion = ({
   send?: boolean | undefined;
 
   /**
-   * Whether to clear the composer after sending.
+   * Whether to clear the composer after sending. A send queued while a run is
+   * in progress never clears the composer.
    * When send is set to false, determines if composer text is replaced with suggestion (true, default),
    * or if it's appended to the composer text (false).
    *

package/src/tests/RemoteThreadListRuntime.reloadMainThread.test.tsx

@@ -0,0 +1,115 @@
+// @vitest-environment jsdom
+
+import { act, render, waitFor } from "@testing-library/react";
+import { type FC, useEffect } from "react";
+import { describe, expect, it } from "vitest";
+import {
+  useRemoteThreadListRuntime,
+  type AssistantRuntime,
+} from "@assistant-ui/core/react";
+import { makeAdapter } from "./remote-thread-list-test-helpers";
+import { useLocalRuntime } from "../legacy-runtime/runtime-cores/local/useLocalRuntime";
+import { AssistantRuntimeProvider } from "../context";
+import type { ChatModelAdapter } from "../index";
+
+const noOpAdapter: ChatModelAdapter = {
+  async *run() {},
+};
+
+const renderThreadList = async (mounts: { count: number }) => {
+  const capture: { runtime: AssistantRuntime | null } = { runtime: null };
+
+  const adapter = makeAdapter({
+    list: async () => ({
+      threads: [
+        {
+          status: "regular" as const,
+          remoteId: "t-1",
+          externalId: "t-1",
+          title: "Open",
+        },
+      ],
+    }),
+  });
+
+  const Inner: FC = () => {
+    const runtime = useRemoteThreadListRuntime({
+      runtimeHook: function useTestRuntimeHook() {
+        useEffect(() => {
+          mounts.count++;
+        }, []);
+        return useLocalRuntime(noOpAdapter);
+      },
+      adapter,
+    });
+    capture.runtime = runtime;
+    return (
+      <AssistantRuntimeProvider runtime={runtime}>
+        {null}
+      </AssistantRuntimeProvider>
+    );
+  };
+
+  await act(async () => {
+    render(<Inner />);
+  });
+  await waitFor(() => expect(capture.runtime).not.toBeNull());
+  return capture;
+};
+
+// binders mount asynchronously, so a snapshot taken too early attributes a
+// still-pending mount to whatever ran next
+const settle = async (mounts: { count: number }) => {
+  let previous = -1;
+  await waitFor(() => {
+    const seen = mounts.count;
+    const stable = seen === previous;
+    previous = seen;
+    expect(stable).toBe(true);
+  });
+  return mounts.count;
+};
+
+describe("threads.reloadMainThread", () => {
+  it("remounts the runtime hook of the open thread", async () => {
+    const mounts = { count: 0 };
+    const capture = await renderThreadList(mounts);
+    const runtime = capture.runtime!;
+
+    await act(async () => {
+      await runtime.threads.switchToThread("t-1");
+    });
+    const beforeReload = await settle(mounts);
+    expect(beforeReload).toBeGreaterThan(0);
+
+    await act(async () => {
+      await runtime.threads.reloadMainThread();
+    });
+
+    // the hook ran again, which is what re-runs the adapter's load()
+    await waitFor(() => expect(mounts.count).toBe(beforeReload + 1));
+  });
+
+  it("keeps a thread runtime readable across the remount", async () => {
+    const mounts = { count: 0 };
+    const capture = await renderThreadList(mounts);
+    const runtime = capture.runtime!;
+
+    await act(async () => {
+      await runtime.threads.switchToThread("t-1");
+    });
+
+    const seen: boolean[] = [];
+    const unsubscribe = runtime.threads.subscribe(() => {
+      seen.push(runtime.threads.getState().mainThreadId === "t-1");
+    });
+
+    await act(async () => {
+      await runtime.threads.reloadMainThread();
+    });
+    unsubscribe();
+
+    expect(seen.length).toBeGreaterThan(0);
+    expect(seen.every(Boolean)).toBe(true);
+  });
+});

package/src/tests/external-thread-parity.test.tsx

@@ -36,29 +36,36 @@ const renderThread = (props: ExternalThreadProps) => {
   };
 };
 
-const assistantMessage = (
+const assistantMessageWithContent = (
   status: ThreadMessage["status"],
-  result?: string,
+  content: ExternalThreadMessage["content"],
+  id = "a1",
 ): ExternalThreadMessage =>
   ({
-    id: "a1",
+    id,
     role: "assistant",
-    content: [
-      { type: "text", text: "let me check" },
-      {
-        type: "tool-call",
-        toolCallId: "tc1",
-        toolName: "probe_tool",
-        args: {},
-        argsText: "{}",
-        ...(result !== undefined && { result }),
-      },
-    ],
+    content,
     createdAt: new Date(0),
     status,
     metadata: { custom: {} },
   }) as unknown as ExternalThreadMessage;
 
+const assistantMessage = (
+  status: ThreadMessage["status"],
+  result?: string,
+): ExternalThreadMessage =>
+  assistantMessageWithContent(status, [
+    { type: "text", text: "let me check" },
+    {
+      type: "tool-call",
+      toolCallId: "tc1",
+      toolName: "probe_tool",
+      args: {},
+      argsText: "{}",
+      ...(result !== undefined && { result }),
+    },
+  ]);
+
 describe("ExternalThread part status", () => {
   it("gives an unresolved tool call its message's status", () => {
     const { aui } = renderThread({
@@ -70,14 +77,99 @@ describe("ExternalThread part status", () => {
     expect(part("tc1").status).toEqual({ type: "running" });
   });
 
-  it("marks a resolved tool call complete and streams only the last part", () => {
+  it("uses positional fallback for statusless parts and resolved tool calls", () => {
     const { aui } = renderThread({
-      messages: [assistantMessage({ type: "running" }, "ok")],
+      messages: [
+        assistantMessage({ type: "running" }, "ok"),
+        assistantMessageWithContent(
+          { type: "running" },
+          [
+            { type: "text", text: "first" },
+            { type: "reasoning", text: "last" },
+          ],
+          "a2",
+        ),
+      ],
       isRunning: true,
     });
     const state = aui().thread.message({ id: "a1" }).getState();
     expect(state.parts[0]!.status).toEqual({ type: "complete" });
     expect(state.parts[1]!.status).toEqual({ type: "complete" });
+    const fallbackState = aui().thread.message({ id: "a2" }).getState();
+    expect(fallbackState.parts[0]!.status).toEqual({ type: "complete" });
+    expect(fallbackState.parts[1]!.status).toEqual({ type: "running" });
+  });
+
+  it("honours supplied statuses while the message is running", () => {
+    const { aui } = renderThread({
+      messages: [
+        assistantMessageWithContent({ type: "running" }, [
+          { type: "text", text: "first", status: { type: "running" } },
+          {
+            type: "reasoning",
+            text: "last",
+            status: { type: "complete" },
+          },
+        ]),
+      ],
+      isRunning: true,
+    });
+    const state = aui().thread.message({ id: "a1" }).getState();
+
+    expect(state.parts[0]!.status).toEqual({ type: "running" });
+    expect(state.parts[1]!.status).toEqual({ type: "complete" });
+  });
+
+  it("ignores supplied statuses after the message completes", () => {
+    const { aui } = renderThread({
+      messages: [
+        assistantMessageWithContent({ type: "complete", reason: "stop" }, [
+          { type: "text", text: "truncated", status: { type: "running" } },
+        ]),
+      ],
+      isRunning: false,
+    });
+
+    expect(
+      aui().thread.message({ id: "a1" }).part({ index: 0 }).getState().status,
+    ).toEqual({ type: "complete", reason: "stop" });
+  });
+
+  it("normalizes supplied upstream statuses", () => {
+    const { aui } = renderThread({
+      messages: [
+        assistantMessageWithContent(
+          { type: "running" },
+          // assistant-stream sends shapes core's MessagePartStatus does not
+          // declare (a reason on complete, an unlisted incomplete reason);
+          // the normalizer absorbs them.
+          [
+            {
+              type: "text",
+              text: "done",
+              status: { type: "complete", reason: "unknown" },
+            },
+            {
+              type: "reasoning",
+              text: "interrupted",
+              status: {
+                type: "incomplete",
+                reason: "unknown",
+                error: "upstream error",
+              },
+            },
+          ] as unknown as ExternalThreadMessage["content"],
+        ),
+      ],
+      isRunning: true,
+    });
+    const state = aui().thread.message({ id: "a1" }).getState();
+
+    expect(state.parts[0]!.status).toEqual({ type: "complete" });
+    expect(state.parts[1]!.status).toEqual({
+      type: "incomplete",
+      reason: "other",
+    });
   });
 
   it("keeps parts complete on requires-action and user messages", () => {