@assistant-ui/react 0.15.17 → 0.15.19

package/src/tests/toolCallTiming.test.tsx

@@ -7,8 +7,10 @@ import { AssistantRuntimeProvider } from "../context";
 import * as MessagePrimitive from "../primitives/message";
 import * as ThreadPrimitive from "../primitives/thread";
 import { useLocalRuntime } from "../legacy-runtime/runtime-cores/local/useLocalRuntime";
-import type { ChatModelAdapter, ThreadMessageLike } from "../index";
 import {
+  type ChatModelAdapter,
+  type ThreadMessageLike,
+  useExternalStoreRuntime,
   useToolCallElapsed,
   unstable_useMessageStallDetection,
 } from "../index";
@@ -60,6 +62,22 @@ const RuntimeProvider: FC<
   );
 };
 
+const ExternalRuntimeProvider: FC<
+  PropsWithChildren<{ messages: ThreadMessageLike[] }>
+> = ({ messages, children }) => {
+  const runtime = useExternalStoreRuntime({
+    messages,
+    isRunning: true,
+    convertMessage: (message) => message,
+    onNew: async () => {},
+  });
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      {children}
+    </AssistantRuntimeProvider>
+  );
+};
+
 const renderHarness = async (messages: ThreadMessageLike[], probe: FC) => {
   render(<Harness messages={messages} probe={probe} />);
   // Flush the runtime's deferred initialization, which fake timers hold back.
@@ -83,6 +101,19 @@ const Harness: FC<{ messages: ThreadMessageLike[]; probe: FC }> = ({
   </RuntimeProvider>
 );
 
+const ExternalHarness: FC<{
+  messages: ThreadMessageLike[];
+  probe: FC;
+}> = ({ messages, probe: Probe }) => (
+  <ExternalRuntimeProvider messages={messages}>
+    <ThreadPrimitive.Messages
+      components={{
+        Message: () => <MessagePrimitive.Parts components={{ Text: Probe }} />,
+      }}
+    />
+  </ExternalRuntimeProvider>
+);
+
 describe("useToolCallElapsed", () => {
   beforeEach(() => {
     vi.useFakeTimers();
@@ -218,4 +249,27 @@ describe("unstable_useMessageStallDetection", () => {
 
     expect(screen.getByTestId("stalled").textContent).toBe("false");
   });
+
+  it("resets the timer for equal-length content changes", async () => {
+    const message = (text: string): ThreadMessageLike => ({
+      role: "assistant",
+      content: [{ type: "text", text }],
+      status: { type: "running" },
+    });
+    const view = render(
+      <ExternalHarness messages={[message("first")]} probe={StallProbe} />,
+    );
+    await act(async () => vi.advanceTimersByTimeAsync(0));
+
+    await act(async () => vi.advanceTimersByTimeAsync(1500));
+    view.rerender(
+      <ExternalHarness messages={[message("other")]} probe={StallProbe} />,
+    );
+    await act(async () => vi.advanceTimersByTimeAsync(1000));
+
+    expect(screen.getByTestId("stalled").textContent).toBe("false");
+
+    await act(async () => vi.advanceTimersByTimeAsync(1000));
+    expect(screen.getByTestId("stalled").textContent).toBe("true");
+  });
 });

package/src/unstable/useComposerInputHistory.test.tsx

@@ -23,7 +23,8 @@ vi.mock("@assistant-ui/store", () => ({
     },
   }),
 }));
-vi.mock("@assistant-ui/tap", () => ({
+vi.mock("@assistant-ui/tap", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@assistant-ui/tap")>()),
   flushTapSync: (fn: () => void) => fn(),
 }));
 vi.mock("../primitives/composer/trigger/TriggerPopoverRootContext", () => ({

package/src/unstable/useLiveCompletionAdapter.test.tsx

@@ -1,5 +1,5 @@
 /** @vitest-environment jsdom */
-import { startTransition, Suspense } from "react";
+import { startTransition, Suspense, useLayoutEffect } from "react";
 import { act, render, renderHook } from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import type { Unstable_TriggerItem } from "@assistant-ui/core";
@@ -62,6 +62,159 @@ describe("unstable_useLiveCompletionAdapter", () => {
     expect(fetcher).not.toHaveBeenCalled();
   });
 
+  it("does not start a queued fetch after unmount", async () => {
+    const fetcher = vi.fn(async () => []);
+    const { result, unmount } = renderHook(() =>
+      unstable_useLiveCompletionAdapter({ fetcher, debounceMs: 0 }),
+    );
+
+    result.current.adapter.search!("alice");
+    unmount();
+    await Promise.resolve();
+
+    expect(vi.getTimerCount()).toBe(0);
+    await vi.runAllTimersAsync();
+
+    expect(fetcher).not.toHaveBeenCalled();
+  });
+
+  it("keeps an in-flight fetch when the debounce changes", async () => {
+    let resolve!: (items: readonly Unstable_TriggerItem[]) => void;
+    const fetcher = vi.fn(
+      () =>
+        new Promise<readonly Unstable_TriggerItem[]>((r) => {
+          resolve = r;
+        }),
+    );
+    const { result, rerender } = renderHook(
+      ({ debounceMs }) =>
+        unstable_useLiveCompletionAdapter({ fetcher, debounceMs }),
+      { initialProps: { debounceMs: 0 } },
+    );
+
+    await act(async () => {
+      result.current.adapter.search!("alice");
+      await vi.advanceTimersByTimeAsync(0);
+    });
+    expect(fetcher).toHaveBeenCalledOnce();
+
+    rerender({ debounceMs: 50 });
+    await act(async () => resolve([item("alice")]));
+
+    expect(result.current.adapter.search!("alice")).toEqual([item("alice")]);
+    expect(result.current.isLoading).toBe(false);
+  });
+
+  it("replays a search queued while the adapter is hidden", async () => {
+    const fetcher = vi.fn(async () => []);
+    const suspended = new Promise<never>(() => {});
+    let committed!: ReturnType<typeof unstable_useLiveCompletionAdapter>;
+    const Harness = ({ blocked }: { blocked: boolean }) => {
+      const current = unstable_useLiveCompletionAdapter({
+        fetcher,
+        debounceMs: 0,
+      });
+      useLayoutEffect(() => {
+        committed = current;
+      }, [current]);
+      if (blocked) throw suspended;
+      return null;
+    };
+    const view = (blocked: boolean) => (
+      <Suspense fallback={null}>
+        <Harness blocked={blocked} />
+      </Suspense>
+    );
+    const rendered = render(view(false));
+
+    await act(async () => rendered.rerender(view(true)));
+    committed.adapter.search!("alice");
+    await Promise.resolve();
+
+    expect(vi.getTimerCount()).toBe(0);
+    await act(async () => rendered.rerender(view(false)));
+    await act(async () => vi.advanceTimersByTimeAsync(0));
+
+    expect(fetcher).toHaveBeenCalledOnce();
+    expect(fetcher).toHaveBeenCalledWith("alice");
+  });
+
+  it("drops a hidden search superseded by a cached query", async () => {
+    const fetcher = vi.fn(async (query: string) => [item(query)]);
+    const suspended = new Promise<never>(() => {});
+    let committed!: ReturnType<typeof unstable_useLiveCompletionAdapter>;
+    const Harness = ({ blocked }: { blocked: boolean }) => {
+      const current = unstable_useLiveCompletionAdapter({
+        fetcher,
+        debounceMs: 0,
+      });
+      useLayoutEffect(() => {
+        committed = current;
+      }, [current]);
+      if (blocked) throw suspended;
+      return null;
+    };
+    const view = (blocked: boolean) => (
+      <Suspense fallback={null}>
+        <Harness blocked={blocked} />
+      </Suspense>
+    );
+    const rendered = render(view(false));
+
+    await act(async () => {
+      committed.adapter.search!("alice");
+      await vi.advanceTimersByTimeAsync(0);
+    });
+    expect(committed.adapter.search!("alice")).toEqual([item("alice")]);
+
+    await act(async () => rendered.rerender(view(true)));
+    committed.adapter.search!("bob");
+    await Promise.resolve();
+    committed.adapter.search!("alice");
+    await Promise.resolve();
+
+    await act(async () => rendered.rerender(view(false)));
+    await act(async () => vi.advanceTimersByTimeAsync(0));
+
+    expect(fetcher).toHaveBeenCalledOnce();
+    expect(fetcher).toHaveBeenCalledWith("alice");
+  });
+
+  it("settles loading when a suspended adapter is shown again", async () => {
+    const fetcher = vi.fn(() => new Promise<never>(() => {}));
+    const suspended = new Promise<never>(() => {});
+    let committed!: ReturnType<typeof unstable_useLiveCompletionAdapter>;
+    const Harness = ({ blocked }: { blocked: boolean }) => {
+      const current = unstable_useLiveCompletionAdapter({
+        fetcher,
+        debounceMs: 0,
+      });
+      useLayoutEffect(() => {
+        committed = current;
+      }, [current]);
+      if (blocked) throw suspended;
+      return <output data-testid="status">{String(current.isLoading)}</output>;
+    };
+    const view = (blocked: boolean) => (
+      <Suspense fallback={null}>
+        <Harness blocked={blocked} />
+      </Suspense>
+    );
+    const rendered = render(view(false));
+
+    await act(async () => {
+      committed.adapter.search!("alice");
+      await vi.advanceTimersByTimeAsync(0);
+    });
+    expect(fetcher).toHaveBeenCalledOnce();
+    expect(rendered.getByTestId("status").textContent).toBe("true");
+
+    await act(async () => rendered.rerender(view(true)));
+    await act(async () => rendered.rerender(view(false)));
+
+    expect(rendered.getByTestId("status").textContent).toBe("false");
+  });
+
   it("does not fetch when disabled and clears cached items", async () => {
     const fetcher = vi.fn(async () => [item("a")]);
     const { result, rerender } = renderHook(
@@ -435,6 +588,54 @@ describe("unstable_useLiveCompletionAdapter", () => {
     expect(result.current.adapter.search!("alice")).toEqual([item("alice")]);
   });
 
+  it("re-arms a failed query when its retry is hidden", async () => {
+    const fetcher = vi
+      .fn<(query: string) => Promise<readonly Unstable_TriggerItem[]>>()
+      .mockRejectedValueOnce(new Error("temporarily unavailable"))
+      .mockImplementationOnce(() => new Promise(() => {}))
+      .mockResolvedValueOnce([item("alice")]);
+    const suspended = new Promise<never>(() => {});
+    let committed!: ReturnType<typeof unstable_useLiveCompletionAdapter>;
+    const Harness = ({ blocked }: { blocked: boolean }) => {
+      const current = unstable_useLiveCompletionAdapter({
+        fetcher,
+        debounceMs: 0,
+      });
+      useLayoutEffect(() => {
+        committed = current;
+      }, [current]);
+      if (blocked) throw suspended;
+      return null;
+    };
+    const view = (blocked: boolean) => (
+      <Suspense fallback={null}>
+        <Harness blocked={blocked} />
+      </Suspense>
+    );
+    const rendered = render(view(false));
+
+    await act(async () => {
+      committed.adapter.search!("alice");
+      await vi.advanceTimersByTimeAsync(0);
+    });
+    expect(fetcher).toHaveBeenCalledOnce();
+
+    await act(async () => {
+      committed.adapter.search!("alice");
+      await vi.advanceTimersByTimeAsync(0);
+    });
+    expect(fetcher).toHaveBeenCalledTimes(2);
+
+    await act(async () => rendered.rerender(view(true)));
+    await act(async () => rendered.rerender(view(false)));
+    await act(async () => {
+      committed.adapter.search!("alice");
+      await vi.advanceTimersByTimeAsync(0);
+    });
+
+    expect(fetcher).toHaveBeenCalledTimes(3);
+  });
+
   it("drops an in-flight fetch when the query returns to a cached value", async () => {
     const resolvers: Record<
       string,

package/src/unstable/useLiveCompletionAdapter.ts

@@ -84,6 +84,8 @@ export function unstable_useLiveCompletionAdapter(
   const pendingQueryRef = useRef<string | null>(null);
   const retryableQueryRef = useRef<string | null>(null);
   const pendingRetryQueryRef = useRef<string | null>(null);
+  const inactiveRef = useRef(true);
+  const deferredQueryRef = useRef<string | null>(null);
 
   const cancelTimer = useCallback(() => {
     if (timerRef.current !== null) {
@@ -102,6 +104,10 @@ export function unstable_useLiveCompletionAdapter(
   const scheduleFetch = useCallback(
     (query: string) => {
       if (!enabled) return;
+      if (inactiveRef.current) {
+        deferredQueryRef.current = query;
+        return;
+      }
       if (pendingQueryRef.current === query) return;
       rearmPendingRetry();
       if (retryableQueryRef.current === query) {
@@ -136,6 +142,11 @@ export function unstable_useLiveCompletionAdapter(
     [enabled, debounceMs, cancelTimer, rearmPendingRetry],
   );
 
+  const scheduleFetchRef = useRef(scheduleFetch);
+  useLayoutEffect(() => {
+    scheduleFetchRef.current = scheduleFetch;
+  }, [scheduleFetch]);
+
   const invalidatePending = useCallback(() => {
     rearmPendingRetry();
     cancelTimer();
@@ -162,7 +173,18 @@ export function unstable_useLiveCompletionAdapter(
     );
   }, [enabled, invalidatePending]);
 
-  useEffect(() => cancelTimer, [cancelTimer]);
+  // Render-time searches can outlive an abandoned render, so they only arm
+  // request work after this hook commits.
+  useLayoutEffect(() => {
+    inactiveRef.current = false;
+    const deferredQuery = deferredQueryRef.current;
+    deferredQueryRef.current = null;
+    if (deferredQuery !== null) scheduleFetchRef.current(deferredQuery);
+    return () => {
+      inactiveRef.current = true;
+      invalidatePending();
+    };
+  }, [invalidatePending]);
 
   // Arm retries only after the failed state commits. Arming during rejection
   // would let the failure render immediately schedule another request.
@@ -179,13 +201,21 @@ export function unstable_useLiveCompletionAdapter(
         // queueMicrotask so they are not dispatched while another component renders.
         if (query !== state.query || retryableQueryRef.current === query) {
           queueMicrotask(() => scheduleFetch(query));
-        } else if (
-          pendingQueryRef.current !== null &&
-          pendingQueryRef.current !== query
-        ) {
-          // the query returned to a cached value while a fetch for a different
-          // query is in flight; drop it so its result cannot overwrite the cache
-          queueMicrotask(invalidatePending);
+        } else {
+          queueMicrotask(() => {
+            if (
+              deferredQueryRef.current !== null &&
+              deferredQueryRef.current !== query
+            ) {
+              deferredQueryRef.current = null;
+            }
+            if (
+              pendingQueryRef.current !== null &&
+              pendingQueryRef.current !== query
+            ) {
+              invalidatePending();
+            }
+          });
         }
         return state.items;
       },