@sero-ai/ui 0.5.0 → 0.6.0

package/src/components/ai-elements/conversation-virtual.test.tsx

@@ -0,0 +1,126 @@
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { Conversation, ConversationContent } from './conversation';
+import { ConversationVirtualList } from './conversation-virtual';
+
+function Chat({ session, items, initialScrollToEnd = false }: { session: string; items: string[]; initialScrollToEnd?: boolean }) {
+  return (
+    <Conversation key={session} initial="instant">
+      <ConversationContent>
+        {items.length > 0 && (
+          <ConversationVirtualList
+            initialScrollToEnd={initialScrollToEnd}
+            items={items}
+            getItemKey={(item) => item}
+            renderItem={(item) => <p>{item}</p>}
+          />
+        )}
+      </ConversationContent>
+    </Conversation>
+  );
+}
+
+let container: HTMLDivElement;
+let root: Root;
+
+beforeEach(() => {
+  vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true);
+  vi.stubGlobal('ResizeObserver', class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  });
+  vi.spyOn(HTMLElement.prototype, 'offsetHeight', 'get').mockReturnValue(600);
+  vi.spyOn(HTMLElement.prototype, 'offsetWidth', 'get').mockReturnValue(400);
+  vi.stubGlobal('requestAnimationFrame', () => 0);
+  vi.stubGlobal('cancelAnimationFrame', () => {});
+  container = document.createElement('div');
+  document.body.append(container);
+  root = createRoot(container);
+});
+
+afterEach(() => {
+  act(() => root.unmount());
+  container.remove();
+  vi.restoreAllMocks();
+  vi.unstubAllGlobals();
+  vi.useRealTimers();
+});
+
+describe('ConversationVirtualList', () => {
+  it('hides initial measurement jumps and reveals only a stable bottom position', () => {
+    const frames: FrameRequestCallback[] = [];
+    vi.stubGlobal('requestAnimationFrame', (callback: FrameRequestCallback) => {
+      frames.push(callback);
+      return frames.length;
+    });
+    let height = 1200;
+    vi.spyOn(HTMLElement.prototype, 'scrollHeight', 'get').mockImplementation(() => height);
+    vi.spyOn(HTMLElement.prototype, 'clientHeight', 'get').mockReturnValue(600);
+    act(() => root.render(<Chat session="a" items={['Last message']} initialScrollToEnd />));
+    const list = container.querySelector('[data-index]')!.parentElement!;
+    const scroller = container.querySelector('[role="log"]')!.firstElementChild!;
+    const advanceFrame = () => act(() => {
+      const pending = frames.splice(0);
+      pending.forEach((callback) => callback(0));
+    });
+
+    expect(list.style.visibility).toBe('hidden');
+    advanceFrame();
+    expect(scroller.scrollTop).toBe(599);
+    height = 1800;
+    advanceFrame();
+    expect(scroller.scrollTop).toBe(1199);
+    expect(list.style.visibility).toBe('hidden');
+    advanceFrame();
+    expect(list.style.visibility).toBe('hidden');
+    advanceFrame();
+    expect(list.style.visibility).toBe('');
+
+    scroller.scrollTop = 200;
+    act(() => root.render(<Chat session="a" items={['Last message', 'New message']} initialScrollToEnd />));
+    advanceFrame();
+    expect(scroller.scrollTop).toBe(200);
+    expect(list.style.visibility).toBe('');
+  });
+
+  it('reveals a continuously growing transcript without restarting the deadline on new items', () => {
+    vi.useFakeTimers();
+    vi.stubGlobal('requestAnimationFrame', (callback: FrameRequestCallback) =>
+      setTimeout(() => callback(performance.now()), 16));
+    vi.stubGlobal('cancelAnimationFrame', clearTimeout);
+    let height = 1200;
+    vi.spyOn(HTMLElement.prototype, 'scrollHeight', 'get').mockImplementation(() => height);
+    vi.spyOn(HTMLElement.prototype, 'clientHeight', 'get').mockReturnValue(600);
+    const items = ['Running tool output'];
+    act(() => root.render(<Chat session="streaming" items={items} initialScrollToEnd />));
+    const list = container.querySelector('[data-index]')!.parentElement!;
+    expect(list.style.visibility).toBe('hidden');
+
+    for (let frame = 0; frame < 16; frame += 1) {
+      height += 100;
+      // Changing the count also restarts the positioning effect, as new tool
+      // messages can arrive while the current output row grows.
+      items.push(`Tool update ${frame}`);
+      act(() => root.render(<Chat session="streaming" items={[...items]} initialScrollToEnd />));
+      act(() => vi.advanceTimersByTime(16));
+      if (frame < 15) expect(list.style.visibility).toBe('hidden');
+    }
+    expect(list.style.visibility).toBe('');
+  });
+
+  it('shows cached messages after switching away and returning', () => {
+    act(() => root.render(<Chat session="a" items={[]} />));
+    act(() => root.render(<Chat session="a" items={['Session A message']} />));
+    expect(container.textContent).toContain('Session A message');
+
+    act(() => root.render(<Chat session="b" items={[]} />));
+    act(() => root.render(<Chat session="b" items={['Session B message']} />));
+    expect(container.textContent).toContain('Session B message');
+
+    act(() => root.render(<Chat session="a" items={['Session A message']} />));
+    expect(container.textContent).toContain('Session A message');
+    expect(container.textContent).not.toContain('Session B message');
+  });
+});

package/src/components/ai-elements/conversation-virtual.tsx

@@ -0,0 +1,162 @@
+"use client";
+
+import { useCallback, useEffect, useLayoutEffect, useRef, useState, type ReactNode } from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { useStickToBottomContext } from "use-stick-to-bottom";
+
+import { cn } from "../../lib/utils";
+
+export interface ConversationVirtualListProps<T> {
+  items: T[];
+  getItemKey: (item: T, index: number) => string;
+  /** Return null for an item that renders nothing; it then takes no space. */
+  renderItem: (item: T, index: number) => ReactNode;
+  /** Called on a scroll within `startThreshold` of the top, including programmatic scrolls. */
+  onReachStart?: () => void;
+  startThreshold?: number;
+  estimateSize?: number;
+  /** Reveal the initial transcript only after its last row is positioned. */
+  initialScrollToEnd?: boolean;
+  overscan?: number;
+  /** Class for the wrapper around each rendered item, for example a bottom gap. */
+  rowClassName?: string;
+  className?: string;
+}
+
+/**
+ * Windowed rows inside a `Conversation`. Only rows near the viewport are in
+ * the DOM, so node count stays bounded for any thread length. The scroll
+ * element and stick-to-bottom behavior stay with `StickToBottom`.
+ *
+ * Items prepended to `items` (older history) keep the viewport anchored:
+ * the scroll offset moves by the height the new rows added above it.
+ */
+export function ConversationVirtualList<T>({
+  items,
+  getItemKey,
+  renderItem,
+  onReachStart,
+  startThreshold = 240,
+  estimateSize = 96,
+  initialScrollToEnd = false,
+  overscan = 6,
+  rowClassName,
+  className,
+}: ConversationVirtualListProps<T>) {
+  const { scrollRef, state: scrollState } = useStickToBottomContext();
+  const [initialPositioned, setInitialPositioned] = useState(!initialScrollToEnd);
+  const [scrollElement, setScrollElement] = useState<HTMLElement | null>(null);
+
+  // The parent scroll ref attaches after child layout effects. Read it after
+  // commit so a cached transcript also gets a render with a viewport.
+  useEffect(() => {
+    setScrollElement(scrollRef.current);
+  }, [scrollRef]);
+
+  const virtualizer = useVirtualizer<HTMLElement, HTMLDivElement>({
+    count: items.length,
+    getScrollElement: () => scrollElement,
+    estimateSize: () => estimateSize,
+    overscan,
+    getItemKey: (index) => getItemKey(items[index], index),
+  });
+
+  // Live output may never reach a stable height. Keep the reveal deadline
+  // independent of item updates so streaming cannot restart the wait.
+  useEffect(() => {
+    if (initialPositioned) return;
+    const timeout = setTimeout(() => setInitialPositioned(true), 250);
+    return () => clearTimeout(timeout);
+  }, [initialPositioned]);
+
+  // Virtual rows replace estimated heights over several frames. Position them
+  // while hidden so opening history does not display those intermediate jumps.
+  useEffect(() => {
+    if (initialPositioned || !scrollElement || items.length === 0) return;
+    let frame: number;
+    let previousHeight = -1;
+    let stableFrames = 0;
+    const position = () => {
+      const height = scrollElement.scrollHeight;
+      const target = Math.max(0, scrollState.calculatedTargetScrollTop);
+      const lastRow = virtualizer.getVirtualItems().at(-1);
+      const settled = lastRow?.index === items.length - 1
+        && Math.abs(scrollElement.scrollTop - target) <= 1
+        && height === previousHeight;
+      stableFrames = settled ? stableFrames + 1 : 0;
+      previousHeight = height;
+      scrollState.scrollTop = target;
+      if (stableFrames >= 2) {
+        setInitialPositioned(true);
+        return;
+      }
+      frame = requestAnimationFrame(position);
+    };
+    frame = requestAnimationFrame(position);
+    return () => cancelAnimationFrame(frame);
+  }, [initialPositioned, items.length, scrollElement, scrollState, virtualizer]);
+
+  // Prepend anchoring: remember where the previous first item went, and shift
+  // the scroll offset by the height that now sits above it.
+  const firstKeyRef = useRef<string | null>(null);
+  const totalSizeRef = useRef(0);
+  const firstKey = items.length > 0 ? getItemKey(items[0], 0) : null;
+
+  useLayoutEffect(() => {
+    const previousFirstKey = firstKeyRef.current;
+    const previousTotal = totalSizeRef.current;
+    firstKeyRef.current = firstKey;
+    totalSizeRef.current = virtualizer.getTotalSize();
+
+    if (previousFirstKey === null || previousFirstKey === firstKey) return;
+    const previousFirstIndex = items.findIndex((item, index) => getItemKey(item, index) === previousFirstKey);
+    if (previousFirstIndex <= 0) return;
+
+    const scrollElement = scrollRef.current;
+    if (!scrollElement) return;
+    scrollElement.scrollTop += totalSizeRef.current - previousTotal;
+  });
+
+  // Native scroll events include programmatic positioning and prepend anchoring.
+  // The caller must guard duplicate or in-flight history requests.
+  const onReachStartRef = useRef(onReachStart);
+  useLayoutEffect(() => {
+    onReachStartRef.current = onReachStart;
+  }, [onReachStart]);
+  useEffect(() => {
+    const scrollElement = scrollRef.current;
+    if (!scrollElement) return;
+    const handleScroll = () => {
+      if (scrollElement.scrollTop <= startThreshold) onReachStartRef.current?.();
+    };
+    scrollElement.addEventListener("scroll", handleScroll, { passive: true });
+    return () => scrollElement.removeEventListener("scroll", handleScroll);
+  }, [scrollRef, startThreshold]);
+
+  const measureRow = useCallback(
+    (node: HTMLDivElement | null) => virtualizer.measureElement(node),
+    [virtualizer],
+  );
+
+  return (
+    <div
+      className={cn("relative w-full", className)}
+      style={{ height: virtualizer.getTotalSize(), visibility: initialPositioned ? undefined : "hidden" }}
+    >
+      {virtualizer.getVirtualItems().map((virtualRow) => {
+        const content = renderItem(items[virtualRow.index], virtualRow.index);
+        return (
+          <div
+            key={virtualRow.key}
+            data-index={virtualRow.index}
+            ref={measureRow}
+            className="absolute top-0 left-0 w-full"
+            style={{ transform: `translateY(${virtualRow.start}px)` }}
+          >
+            {content === null ? null : <div className={rowClassName}>{content}</div>}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/model-selection/available-model-picker.tsx

@@ -1,16 +1,23 @@
-import { useCallback, useMemo, useRef, useState } from 'react';
-import { Check, ChevronDown, Sparkles, X } from 'lucide-react';
+/**
+ * A model picker shaped as a settings field.
+ *
+ * The trigger is a full-width box that names the current model. The list
+ * itself is `ModelPickerBody`, so a composer can show the same list under
+ * a compact chip instead. Thinking is a separate control here: a settings
+ * card keeps it visible beside the model rather than behind a click.
+ */
+
+import { useCallback, useMemo, useState } from 'react';
+import { ChevronDown, Sparkles, X } from 'lucide-react';
 import {
-  filterModelGroups,
   findGroup,
   findModel,
-  modelKey,
   parseModelKey,
   type SharedAvailableModelGroup,
   type SharedModelInfo,
 } from '@sero-ai/common';
 import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
-import { SearchInput } from '../ui/search-input';
+import { ModelPickerBody, ProviderLogo } from './model-picker-body';
 import { cn } from '../../lib/utils';
 
 interface AvailableModelPickerProps<
@@ -45,8 +52,6 @@ export function AvailableModelPicker<
   className,
 }: AvailableModelPickerProps<TModel, TGroup>) {
   const [open, setOpen] = useState(false);
-  const [query, setQuery] = useState('');
-  const inputRef = useRef<HTMLInputElement>(null);
 
   const selected = useMemo(() => {
     const parsed = parseModelKey(value);
@@ -65,38 +70,19 @@ export function AvailableModelPicker<
     };
   }, [groups, value]);
 
-  const filteredGroups = useMemo(
-    () => filterModelGroups(groups, query),
-    [groups, query],
-  );
-
-  const totalResults = useMemo(
-    () => filteredGroups.reduce((count, group) => count + group.models.length, 0),
-    [filteredGroups],
-  );
-
-  const handleOpenChange = useCallback((nextOpen: boolean) => {
-    setOpen(nextOpen);
-    if (!nextOpen) return;
-    setQuery('');
-    requestAnimationFrame(() => inputRef.current?.focus());
-  }, []);
-
-  const handleSelect = useCallback((provider: string, modelId: string) => {
-    onChange(modelKey(provider, modelId));
+  const handleSelect = useCallback((nextValue: string) => {
+    onChange(nextValue);
     setOpen(false);
-    setQuery('');
   }, [onChange]);
 
   const handleClear = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
     event.stopPropagation();
     onChange('');
     setOpen(false);
-    setQuery('');
   }, [onChange]);
 
   return (
-    <Popover open={open} onOpenChange={handleOpenChange}>
+    <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild disabled={disabled}>
         <div
           role="button"
@@ -110,10 +96,10 @@ export function AvailableModelPicker<
         >
           {selected.group && selected.model ? (
             <>
-              <img
-                src={selected.group.logo}
-                alt={selected.group.displayName}
-                className="size-4 shrink-0 rounded-sm dark:invert"
+              <ProviderLogo
+                logo={selected.group.logo}
+                displayName={selected.group.displayName}
+                className="size-4"
               />
               <div className="min-w-0 flex-1">
                 <div className="flex items-center gap-1.5">
@@ -159,72 +145,14 @@ export function AvailableModelPicker<
         className="w-[var(--radix-popover-trigger-width)] overflow-hidden rounded-xl border-border/60 bg-background p-0 shadow-xl"
         onWheel={(event) => event.stopPropagation()}
       >
-        <SearchInput
-          ref={inputRef}
-          value={query}
-          onChange={(event) => setQuery(event.target.value)}
-          placeholder={searchPlaceholder}
-          containerClassName="border-b border-border/40"
+        <ModelPickerBody
+          groups={groups}
+          value={value}
+          onChange={handleSelect}
+          searchPlaceholder={searchPlaceholder}
+          emptyLabel={emptyLabel}
+          noModelsLabel={noModelsLabel}
         />
-
-        <div className="max-h-[280px] overflow-y-auto py-1">
-          {groups.length === 0 ? (
-            <div className="px-3 py-4 text-center text-sm text-muted-foreground">
-              {noModelsLabel}
-            </div>
-          ) : totalResults === 0 ? (
-            <div className="px-3 py-4 text-center text-sm text-muted-foreground">
-              {emptyLabel}
-            </div>
-          ) : (
-            filteredGroups.map((group, index) => (
-              <div key={group.provider}>
-                {index > 0 ? <div className="mx-3 border-t border-border/30" /> : null}
-                <div className="flex items-center gap-2 px-3 pb-1 pt-2">
-                  <img
-                    src={group.logo}
-                    alt={group.displayName}
-                    className="size-3.5 shrink-0 rounded-sm dark:invert"
-                  />
-                  <span className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">
-                    {group.displayName}
-                  </span>
-                </div>
-                <div className="px-1">
-                  {group.models.map((model) => {
-                    const nextValue = modelKey(model.provider, model.modelId);
-                    const isSelected = nextValue === value;
-                    return (
-                      <button
-                        key={nextValue}
-                        type="button"
-                        onClick={() => handleSelect(model.provider, model.modelId)}
-                        className={cn(
-                          'flex w-full items-center gap-2.5 rounded-lg px-2.5 py-1.5 text-left text-sm transition-colors',
-                          isSelected
-                            ? 'bg-secondary text-foreground'
-                            : 'text-muted-foreground hover:bg-secondary/60 hover:text-foreground',
-                        )}
-                      >
-                        <div className="flex size-4 shrink-0 items-center justify-center">
-                          {isSelected ? (
-                            <Check className="size-3.5 text-emerald-500" />
-                          ) : (
-                            <div className="size-1.5 rounded-full bg-border" />
-                          )}
-                        </div>
-                        <span className="min-w-0 flex-1 truncate font-medium">{model.name}</span>
-                        {model.reasoning ? (
-                          <Sparkles className="size-3 shrink-0 text-amber-500/60" />
-                        ) : null}
-                      </button>
-                    );
-                  })}
-                </div>
-              </div>
-            ))
-          )}
-        </div>
       </PopoverContent>
     </Popover>
   );

package/src/components/model-selection/model-picker-body.test.tsx

@@ -0,0 +1,152 @@
+import { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it, vi } from 'vitest';
+import { ModelPickerBody, ProviderLogo } from './model-picker-body';
+
+const GROUPS = [
+  {
+    provider: 'openai',
+    displayName: 'OpenAI',
+    logo: 'https://models.dev/logos/openai.svg',
+    models: [
+      { provider: 'openai', modelId: 'gpt-5', name: 'GPT-5', reasoning: true },
+      { provider: 'openai', modelId: 'gpt-5-mini', name: 'GPT-5 Mini', reasoning: false },
+    ],
+  },
+  {
+    provider: 'anthropic',
+    displayName: 'Anthropic',
+    logo: '',
+    models: [
+      { provider: 'anthropic', modelId: 'claude-opus-5', name: 'Claude Opus 5', reasoning: true },
+    ],
+  },
+];
+
+describe('ProviderLogo', () => {
+  it('renders nothing when the provider has no logo', () => {
+    const html = renderToStaticMarkup(<ProviderLogo logo="" displayName="Anthropic" />);
+
+    // An empty src renders a broken image, which looks like a fault.
+    expect(html).toBe('');
+  });
+
+  it('hides itself when the logo fails to load', () => {
+    // Logos are remote models.dev URLs. A phone on the local network may
+    // have no route to the internet, and must not show broken images.
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    const root = createRoot(host);
+
+    act(() => {
+      root.render(<ProviderLogo logo="https://models.dev/logos/openai.svg" displayName="OpenAI" />);
+    });
+    const img = host.querySelector('img');
+    expect(img).not.toBeNull();
+
+    act(() => {
+      img?.dispatchEvent(new Event('error', { bubbles: false }));
+    });
+    expect(host.querySelector('img')).toBeNull();
+
+    act(() => root.unmount());
+    host.remove();
+  });
+});
+
+describe('ModelPickerBody', () => {
+  it('lists every provider group and its models', () => {
+    const html = renderToStaticMarkup(
+      <ModelPickerBody groups={GROUPS} value="openai/gpt-5" onChange={vi.fn()} />,
+    );
+
+    expect(html).toContain('OpenAI');
+    expect(html).toContain('Anthropic');
+    expect(html).toContain('GPT-5 Mini');
+    expect(html).toContain('Claude Opus 5');
+  });
+
+  it('shows no logos when the caller turns them off', () => {
+    const withLogos = renderToStaticMarkup(
+      <ModelPickerBody groups={GROUPS} value="" onChange={vi.fn()} />,
+    );
+    const withoutLogos = renderToStaticMarkup(
+      <ModelPickerBody groups={GROUPS} value="" onChange={vi.fn()} showProviderLogos={false} />,
+    );
+
+    expect(withLogos).toContain('<img');
+    expect(withoutLogos).not.toContain('<img');
+  });
+
+  it('says so when the host has no models at all', () => {
+    const html = renderToStaticMarkup(
+      <ModelPickerBody
+        groups={[]}
+        value=""
+        onChange={vi.fn()}
+        noModelsLabel="No models available"
+      />,
+    );
+
+    expect(html).toContain('No models available');
+  });
+
+  it('hands back the selected model as provider/modelId', () => {
+    const onChange = vi.fn();
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    const root = createRoot(host);
+
+    act(() => {
+      root.render(
+        <ModelPickerBody
+          groups={GROUPS}
+          value="openai/gpt-5"
+          onChange={onChange}
+          autoFocusSearch={false}
+        />,
+      );
+    });
+
+    const button = [...host.querySelectorAll('button')].find(
+      (candidate) => candidate.textContent?.includes('Claude Opus 5'),
+    );
+    act(() => button?.click());
+
+    expect(onChange).toHaveBeenCalledWith('anthropic/claude-opus-5');
+
+    act(() => root.unmount());
+    host.remove();
+  });
+
+  it('filters the list by the search query', () => {
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    const root = createRoot(host);
+
+    act(() => {
+      root.render(
+        <ModelPickerBody groups={GROUPS} value="" onChange={vi.fn()} autoFocusSearch={false} />,
+      );
+    });
+
+    const input = host.querySelector('input');
+    expect(input).not.toBeNull();
+    act(() => {
+      // React tracks the value, so set it through the native setter.
+      const setter = Object.getOwnPropertyDescriptor(
+        window.HTMLInputElement.prototype,
+        'value',
+      )?.set;
+      setter?.call(input, 'opus');
+      input?.dispatchEvent(new Event('input', { bubbles: true }));
+    });
+
+    expect(host.textContent).toContain('Claude Opus 5');
+    expect(host.textContent).not.toContain('GPT-5 Mini');
+
+    act(() => root.unmount());
+    host.remove();
+  });
+});