@assistant-ui/react 0.15.2 → 0.15.4

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/threadListItemIsRunning.test.tsx

@@ -0,0 +1,198 @@
+// @vitest-environment jsdom
+
+import { act, render, screen, waitFor } from "@testing-library/react";
+import { type FC, useEffect, useReducer } from "react";
+import { describe, expect, it } from "vitest";
+import { useRemoteThreadListRuntime } from "@assistant-ui/core/react";
+import { makeAdapter } from "./remote-thread-list-test-helpers";
+import { AssistantRuntimeProvider } from "../context";
+import * as ThreadListPrimitive from "../primitives/threadList";
+import {
+  useAui,
+  useAuiState,
+  type AssistantRuntime,
+  type ChatModelAdapter,
+} from "../index";
+import { useExternalStoreRuntime } from "../legacy-runtime/runtime-cores/external-store/useExternalStoreRuntime";
+import { useLocalRuntime } from "../legacy-runtime/runtime-cores/local/useLocalRuntime";
+
+const Probe: FC = () => {
+  const id = useAuiState((s) => s.threadListItem.id);
+  const isRunning = useAuiState((s) => s.threadListItem.isRunning);
+  return (
+    <span data-testid={`item-${id}`}>{isRunning ? "running" : "idle"}</span>
+  );
+};
+
+const Items: FC = () => (
+  <ThreadListPrimitive.Items components={{ ThreadListItem: Probe }} />
+);
+
+describe("threadListItem.isRunning", () => {
+  // LocalThreadListRuntimeCore reports no per-thread run state, so the item
+  // reaches its own run state only through the open thread.
+  it("tracks the open thread's run on a thread list with no per-thread capability", async () => {
+    let release!: () => void;
+    const adapter: ChatModelAdapter = {
+      async *run() {
+        await new Promise<void>((resolve) => {
+          release = resolve;
+        });
+        yield { content: [{ type: "text", text: "done" }] };
+      },
+    };
+
+    const capture: { runtime: AssistantRuntime | null } = { runtime: null };
+    const Inner: FC = () => {
+      const runtime = useLocalRuntime(adapter);
+      capture.runtime = runtime;
+      return (
+        <AssistantRuntimeProvider runtime={runtime}>
+          <Probe />
+        </AssistantRuntimeProvider>
+      );
+    };
+
+    await act(async () => {
+      render(<Inner />);
+    });
+    const testId = `item-${capture.runtime!.threads.mainItem.getState().id}`;
+    expect(screen.getByTestId(testId).textContent).toBe("idle");
+
+    await act(async () => {
+      capture.runtime!.thread.append({
+        role: "user",
+        content: [{ type: "text", text: "hi" }],
+      });
+    });
+    await waitFor(() =>
+      expect(screen.getByTestId(testId).textContent).toBe("running"),
+    );
+
+    await act(async () => {
+      release();
+    });
+    await waitFor(() =>
+      expect(screen.getByTestId(testId).textContent).toBe("idle"),
+    );
+  });
+
+  it("reports the run of a single-thread runtime that cannot observe background threads", async () => {
+    const Inner: FC<{ isRunning: boolean }> = ({ isRunning }) => {
+      const runtime = useExternalStoreRuntime({
+        messages: [],
+        isRunning,
+        onNew: async () => {},
+      });
+      return (
+        <AssistantRuntimeProvider runtime={runtime}>
+          <Items />
+        </AssistantRuntimeProvider>
+      );
+    };
+
+    const view = render(<Inner isRunning={false} />);
+    await waitFor(() =>
+      expect(screen.getByTestId("item-DEFAULT_THREAD_ID").textContent).toBe(
+        "idle",
+      ),
+    );
+
+    await act(async () => {
+      view.rerender(<Inner isRunning />);
+    });
+
+    expect(screen.getByTestId("item-DEFAULT_THREAD_ID").textContent).toBe(
+      "running",
+    );
+  });
+
+  it("keeps reporting a thread the user switched away from as running", async () => {
+    const running = new Map<string, boolean>();
+    const listeners = new Set<() => void>();
+    const setRunning = (threadId: string, value: boolean) => {
+      running.set(threadId, value);
+      for (const listener of listeners) listener();
+    };
+
+    const useTestRuntimeHook = () => {
+      const aui = useAui();
+      const threadId = aui.threadListItem.getState().id;
+      const [, forceUpdate] = useReducer((n: number) => n + 1, 0);
+      useEffect(() => {
+        listeners.add(forceUpdate);
+        return () => {
+          listeners.delete(forceUpdate);
+        };
+      }, []);
+
+      return useExternalStoreRuntime({
+        messages: [],
+        isRunning: running.get(threadId) ?? false,
+        onNew: async () => {},
+      });
+    };
+
+    const adapter = makeAdapter({
+      list: async () => ({
+        threads: [
+          {
+            status: "regular" as const,
+            remoteId: "t-1",
+            externalId: "t-1",
+            title: "First",
+          },
+          {
+            status: "regular" as const,
+            remoteId: "t-2",
+            externalId: "t-2",
+            title: "Second",
+          },
+        ],
+      }),
+    });
+
+    const capture: { runtime: AssistantRuntime | null } = { runtime: null };
+    const Inner: FC = () => {
+      const runtime = useRemoteThreadListRuntime({
+        runtimeHook: useTestRuntimeHook,
+        adapter,
+      });
+      capture.runtime = runtime;
+      return (
+        <AssistantRuntimeProvider runtime={runtime}>
+          <Items />
+        </AssistantRuntimeProvider>
+      );
+    };
+
+    await act(async () => {
+      render(<Inner />);
+    });
+    await waitFor(() => expect(screen.getByTestId("item-t-1")).toBeTruthy());
+
+    await act(async () => {
+      await capture.runtime!.threads.switchToThread("t-1");
+    });
+    await act(async () => {
+      setRunning("t-1", true);
+    });
+    await waitFor(() =>
+      expect(screen.getByTestId("item-t-1").textContent).toBe("running"),
+    );
+
+    await act(async () => {
+      await capture.runtime!.threads.switchToThread("t-2");
+    });
+
+    expect(screen.getByTestId("item-t-1").textContent).toBe("running");
+    expect(screen.getByTestId("item-t-2").textContent).toBe("idle");
+
+    await act(async () => {
+      setRunning("t-1", false);
+    });
+    await waitFor(() =>
+      expect(screen.getByTestId("item-t-1").textContent).toBe("idle"),
+    );
+  });
+});