@sero-ai/ui 0.4.2 → 0.6.0

package/scripts/smoke-dist.mjs

@@ -7,13 +7,14 @@
 // any entrypoint no longer resolves. Run after `pnpm build`.
 
 import { createRequire } from "node:module";
-import { existsSync, readFileSync } from "node:fs";
-import { fileURLToPath } from "node:url";
+import { existsSync, readFileSync, statSync } from "node:fs";
+import { fileURLToPath, pathToFileURL } from "node:url";
 import { dirname, resolve } from "node:path";
 
 const require = createRequire(import.meta.url);
 const here = dirname(fileURLToPath(import.meta.url));
 const dist = resolve(here, "..", "dist");
+const packageRoot = resolve(here, "..");
 
 const fail = (msg) => {
   console.error(`✗ ${msg}`);
@@ -25,6 +26,105 @@ if (!existsSync(dist)) {
   process.exit(1);
 }
 
+// The lightweight root must not re-export specialized dependency graphs.
+const rootEntries = ["index.js", "index.cjs", "index.d.ts", "index.d.cts"];
+const forbiddenRootImports = [
+  "@sero-ai/ui/ai-elements",
+  "@sero-ai/ui/model-selection",
+  "@sero-ai/ui/components/context-editor",
+  "components/ai-elements",
+  "components/model-selection",
+  "components/context-editor",
+  "mermaid",
+  "shiki",
+  "react-jsx-parser",
+  "streamdown",
+  "unified",
+];
+
+const importPatterns = [
+  /(?:from\s+|import\s*)["'](\.[^"']+)["']/g,
+  /(?:require|import)\(\s*["'](\.[^"']+)["']\s*\)/g,
+];
+
+function localImports(contents) {
+  return importPatterns.flatMap((pattern) =>
+    [...contents.matchAll(pattern)].map((match) => match[1]),
+  );
+}
+
+function emittedExtension(file) {
+  if (file.endsWith(".d.cts")) return ".d.cts";
+  if (file.endsWith(".d.ts")) return ".d.ts";
+  if (file.endsWith(".cjs")) return ".cjs";
+  return ".js";
+}
+
+function resolveLocalImport(fromFile, specifier) {
+  const base = resolve(dirname(fromFile), specifier);
+  const extension = emittedExtension(fromFile);
+  const candidates = [];
+
+  if (extension.startsWith(".d.") && specifier.endsWith(".js")) {
+    candidates.push(base.replace(/\.js$/, extension));
+  }
+  candidates.push(base, `${base}${extension}`, resolve(base, `index${extension}`));
+
+  return candidates.find(
+    (candidate) => existsSync(candidate) && statSync(candidate).isFile(),
+  );
+}
+
+function inspectRootGraph(entry) {
+  const pending = [resolve(dist, entry)];
+  const visited = new Set();
+
+  while (pending.length > 0) {
+    const file = pending.pop();
+    if (visited.has(file)) continue;
+    visited.add(file);
+
+    const contents = readFileSync(file, "utf8");
+    const relativeFile = file.slice(dist.length + 1);
+    const leak = forbiddenRootImports.find(
+      (dependency) =>
+        relativeFile.includes(dependency) || contents.includes(dependency),
+    );
+    if (leak) fail(`${relativeFile} exposes unrelated dependency ${leak}`);
+
+    for (const specifier of localImports(contents)) {
+      const dependency = resolveLocalImport(file, specifier);
+      if (dependency) pending.push(dependency);
+      else fail(`${relativeFile} has unresolved local import ${specifier}`);
+    }
+  }
+}
+
+for (const file of rootEntries) {
+  inspectRootGraph(file);
+}
+
+// Specialized components remain available through stable public subpaths.
+const packageJson = JSON.parse(
+  readFileSync(resolve(packageRoot, "package.json"), "utf8"),
+);
+for (const [subpath, output] of [
+  ["./ai-elements/*", "components/ai-elements/message.js"],
+  ["./model-selection/*", "components/model-selection/available-model-picker.js"],
+]) {
+  if (!packageJson.publishConfig.exports[subpath]) {
+    fail(`publishConfig is missing ${subpath}`);
+  }
+  if (!existsSync(resolve(dist, output))) fail(`${output} not emitted to dist`);
+}
+for (const style of [
+  "styles/ai-elements.css",
+  "styles/model-selection.css",
+  "styles/context-editor.css",
+]) {
+  if (!existsSync(resolve(dist, style))) fail(`${style} not emitted to dist`);
+}
+
 // 1. Reference entrypoint resolves as ESM and exposes the example widgets.
 const EXPECTED = [
   "StarterExample",
@@ -33,7 +133,7 @@ const EXPECTED = [
   "ActivityExample",
 ];
 
-const esm = await import(resolve(dist, "reference.js"));
+const esm = await import(pathToFileURL(resolve(dist, "reference.js")).href);
 for (const name of EXPECTED) {
   if (typeof esm[name] !== "function") fail(`reference.js missing export ${name}`);
 }
@@ -64,5 +164,7 @@ else {
 if (process.exitCode) {
   console.error("Smoke test failed.");
 } else {
-  console.log("✓ dist entrypoints resolve (reference esm+cjs, catalog json)");
+  console.log(
+    "✓ dist entrypoints resolve and the root excludes specialized dependencies",
+  );
 }

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>
   );