@sero-ai/ui 0.5.0 → 0.6.0

package/.turbo/turbo-test.log

@@ -1,18 +1,19 @@
 
-> @sero-ai/ui@0.4.2 test /Users/danielcarter/Documents/Dev/projects/sero/sero/packages/ui
+> @sero-ai/ui@0.5.0 test /Users/danielcarter/Documents/Dev/projects/sero/sero/packages/ui
 > vitest run
 
 
- RUN  v4.1.7 /Users/danielcarter/Documents/Dev/projects/sero/sero/packages/ui
+ RUN  v4.1.10 /Users/danielcarter/Documents/Dev/projects/sero/sero/packages/ui
 
- ✓ src/plugin-style-scope.test.tsx (1 test) 54ms
- ✓ src/components/dashboard/__tests__/catalog.test.ts (5 tests) 5ms
- ✓ src/components/dashboard/__tests__/glass.test.tsx (4 tests) 47ms
- ✓ src/components/dashboard/__tests__/state.test.tsx (14 tests) 58ms
- ✓ src/components/dashboard/__tests__/variants.test.tsx (13 tests) 161ms
+ ✓ src/plugin-style-scope.test.tsx (1 test) 19ms
+ ✓ src/components/dashboard/__tests__/variants.test.tsx (13 tests) 36ms
+ ✓ src/components/dashboard/__tests__/glass.test.tsx (4 tests) 11ms
+ ✓ src/components/dashboard/__tests__/state.test.tsx (14 tests) 64ms
+ ✓ src/components/dashboard/__tests__/catalog.test.ts (5 tests) 7ms
+ ✓ src/components/model-selection/thinking-picker.test.tsx (2 tests) 32ms
 
- Test Files  5 passed (5)
-      Tests  37 passed (37)
-   Start at  20:23:20
-   Duration  3.62s (transform 702ms, setup 0ms, import 4.83s, tests 325ms, environment 8.29s)
+ Test Files  6 passed (6)
+      Tests  39 passed (39)
+   Start at  22:43:26
+   Duration  1.83s (transform 862ms, setup 0ms, import 3.20s, tests 169ms, environment 5.28s)
 

package/CHANGELOG.md

@@ -72,5 +72,5 @@
   worked examples, importable to preview or copy-paste. (Replaces the removed
   `sero-showcase-plugin`.)
 
-See `docs/features/dashboard-ui/dashboard-widgets-plan.md` and
-`glass-restyle-spec.md` for the design and authoring guidance.
+See `apps/docs-site/docs/guide/dashboard-widgets.md` and
+`apps/docs-site/docs/reference/dashboard-components.md` for authoring guidance.

package/dist/components/ai-elements/conversation-virtual.cjs

@@ -0,0 +1,115 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
+var _jsxruntime = require('react/jsx-runtime');
+var _react = require('react');
+var _reactvirtual = require('@tanstack/react-virtual');
+var _usesticktobottom = require('use-stick-to-bottom');
+var _utils = require('../../lib/utils');
+function ConversationVirtualList({
+  items,
+  getItemKey,
+  renderItem,
+  onReachStart,
+  startThreshold = 240,
+  estimateSize = 96,
+  initialScrollToEnd = false,
+  overscan = 6,
+  rowClassName,
+  className
+}) {
+  const { scrollRef, state: scrollState } = _usesticktobottom.useStickToBottomContext.call(void 0, );
+  const [initialPositioned, setInitialPositioned] = _react.useState.call(void 0, !initialScrollToEnd);
+  const [scrollElement, setScrollElement] = _react.useState.call(void 0, null);
+  _react.useEffect.call(void 0, () => {
+    setScrollElement(scrollRef.current);
+  }, [scrollRef]);
+  const virtualizer = _reactvirtual.useVirtualizer.call(void 0, {
+    count: items.length,
+    getScrollElement: () => scrollElement,
+    estimateSize: () => estimateSize,
+    overscan,
+    getItemKey: (index) => getItemKey(items[index], index)
+  });
+  _react.useEffect.call(void 0, () => {
+    if (initialPositioned) return;
+    const timeout = setTimeout(() => setInitialPositioned(true), 250);
+    return () => clearTimeout(timeout);
+  }, [initialPositioned]);
+  _react.useEffect.call(void 0, () => {
+    if (initialPositioned || !scrollElement || items.length === 0) return;
+    let frame;
+    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 = _optionalChain([lastRow, 'optionalAccess', _ => _.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]);
+  const firstKeyRef = _react.useRef.call(void 0, null);
+  const totalSizeRef = _react.useRef.call(void 0, 0);
+  const firstKey = items.length > 0 ? getItemKey(items[0], 0) : null;
+  _react.useLayoutEffect.call(void 0, () => {
+    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 scrollElement2 = scrollRef.current;
+    if (!scrollElement2) return;
+    scrollElement2.scrollTop += totalSizeRef.current - previousTotal;
+  });
+  const onReachStartRef = _react.useRef.call(void 0, onReachStart);
+  _react.useLayoutEffect.call(void 0, () => {
+    onReachStartRef.current = onReachStart;
+  }, [onReachStart]);
+  _react.useEffect.call(void 0, () => {
+    const scrollElement2 = scrollRef.current;
+    if (!scrollElement2) return;
+    const handleScroll = () => {
+      if (scrollElement2.scrollTop <= startThreshold) _optionalChain([onReachStartRef, 'access', _2 => _2.current, 'optionalCall', _3 => _3()]);
+    };
+    scrollElement2.addEventListener("scroll", handleScroll, { passive: true });
+    return () => scrollElement2.removeEventListener("scroll", handleScroll);
+  }, [scrollRef, startThreshold]);
+  const measureRow = _react.useCallback.call(void 0, 
+    (node) => virtualizer.measureElement(node),
+    [virtualizer]
+  );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      className: _utils.cn.call(void 0, "relative w-full", className),
+      style: { height: virtualizer.getTotalSize(), visibility: initialPositioned ? void 0 : "hidden" },
+      children: virtualizer.getVirtualItems().map((virtualRow) => {
+        const content = renderItem(items[virtualRow.index], virtualRow.index);
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "div",
+          {
+            "data-index": virtualRow.index,
+            ref: measureRow,
+            className: "absolute top-0 left-0 w-full",
+            style: { transform: `translateY(${virtualRow.start}px)` },
+            children: content === null ? null : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: rowClassName, children: content })
+          },
+          virtualRow.key
+        );
+      })
+    }
+  );
+}
+
+
+exports.ConversationVirtualList = ConversationVirtualList;

package/dist/components/ai-elements/conversation-virtual.d.cts

@@ -0,0 +1,30 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+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.
+ */
+declare function ConversationVirtualList<T>({ items, getItemKey, renderItem, onReachStart, startThreshold, estimateSize, initialScrollToEnd, overscan, rowClassName, className, }: ConversationVirtualListProps<T>): react_jsx_runtime.JSX.Element;
+
+export { ConversationVirtualList, type ConversationVirtualListProps };

package/dist/components/ai-elements/conversation-virtual.d.ts

@@ -0,0 +1,30 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+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.
+ */
+declare function ConversationVirtualList<T>({ items, getItemKey, renderItem, onReachStart, startThreshold, estimateSize, initialScrollToEnd, overscan, rowClassName, className, }: ConversationVirtualListProps<T>): react_jsx_runtime.JSX.Element;
+
+export { ConversationVirtualList, type ConversationVirtualListProps };

package/dist/components/ai-elements/conversation-virtual.js

@@ -0,0 +1,115 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { useStickToBottomContext } from "use-stick-to-bottom";
+import { cn } from "../../lib/utils";
+function ConversationVirtualList({
+  items,
+  getItemKey,
+  renderItem,
+  onReachStart,
+  startThreshold = 240,
+  estimateSize = 96,
+  initialScrollToEnd = false,
+  overscan = 6,
+  rowClassName,
+  className
+}) {
+  const { scrollRef, state: scrollState } = useStickToBottomContext();
+  const [initialPositioned, setInitialPositioned] = useState(!initialScrollToEnd);
+  const [scrollElement, setScrollElement] = useState(null);
+  useEffect(() => {
+    setScrollElement(scrollRef.current);
+  }, [scrollRef]);
+  const virtualizer = useVirtualizer({
+    count: items.length,
+    getScrollElement: () => scrollElement,
+    estimateSize: () => estimateSize,
+    overscan,
+    getItemKey: (index) => getItemKey(items[index], index)
+  });
+  useEffect(() => {
+    if (initialPositioned) return;
+    const timeout = setTimeout(() => setInitialPositioned(true), 250);
+    return () => clearTimeout(timeout);
+  }, [initialPositioned]);
+  useEffect(() => {
+    if (initialPositioned || !scrollElement || items.length === 0) return;
+    let frame;
+    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]);
+  const firstKeyRef = useRef(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 scrollElement2 = scrollRef.current;
+    if (!scrollElement2) return;
+    scrollElement2.scrollTop += totalSizeRef.current - previousTotal;
+  });
+  const onReachStartRef = useRef(onReachStart);
+  useLayoutEffect(() => {
+    onReachStartRef.current = onReachStart;
+  }, [onReachStart]);
+  useEffect(() => {
+    const scrollElement2 = scrollRef.current;
+    if (!scrollElement2) return;
+    const handleScroll = () => {
+      if (scrollElement2.scrollTop <= startThreshold) onReachStartRef.current?.();
+    };
+    scrollElement2.addEventListener("scroll", handleScroll, { passive: true });
+    return () => scrollElement2.removeEventListener("scroll", handleScroll);
+  }, [scrollRef, startThreshold]);
+  const measureRow = useCallback(
+    (node) => virtualizer.measureElement(node),
+    [virtualizer]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("relative w-full", className),
+      style: { height: virtualizer.getTotalSize(), visibility: initialPositioned ? void 0 : "hidden" },
+      children: virtualizer.getVirtualItems().map((virtualRow) => {
+        const content = renderItem(items[virtualRow.index], virtualRow.index);
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-index": virtualRow.index,
+            ref: measureRow,
+            className: "absolute top-0 left-0 w-full",
+            style: { transform: `translateY(${virtualRow.start}px)` },
+            children: content === null ? null : /* @__PURE__ */ jsx("div", { className: rowClassName, children: content })
+          },
+          virtualRow.key
+        );
+      })
+    }
+  );
+}
+export {
+  ConversationVirtualList
+};

package/dist/components/model-selection/available-model-picker.cjs

@@ -1,15 +1,13 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }var _jsxruntime = require('react/jsx-runtime');
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }var _jsxruntime = require('react/jsx-runtime');
 var _react = require('react');
 var _lucidereact = require('lucide-react');
 
 
 
 
-
-
 var _common = require('@sero-ai/common');
 var _popover = require('../ui/popover');
-var _searchinput = require('../ui/search-input');
+var _modelpickerbody = require('./model-picker-body');
 var _utils = require('../../lib/utils');
 function AvailableModelPicker({
   groups,
@@ -24,8 +22,6 @@ function AvailableModelPicker({
   className
 }) {
   const [open, setOpen] = _react.useState.call(void 0, false);
-  const [query, setQuery] = _react.useState.call(void 0, "");
-  const inputRef = _react.useRef.call(void 0, null);
   const selected = _react.useMemo.call(void 0, () => {
     const parsed = _common.parseModelKey.call(void 0, value);
     if (!parsed) {
@@ -39,32 +35,16 @@ function AvailableModelPicker({
       fallbackLabel: model ? null : value
     };
   }, [groups, value]);
-  const filteredGroups = _react.useMemo.call(void 0, 
-    () => _common.filterModelGroups.call(void 0, groups, query),
-    [groups, query]
-  );
-  const totalResults = _react.useMemo.call(void 0, 
-    () => filteredGroups.reduce((count, group) => count + group.models.length, 0),
-    [filteredGroups]
-  );
-  const handleOpenChange = _react.useCallback.call(void 0, (nextOpen) => {
-    setOpen(nextOpen);
-    if (!nextOpen) return;
-    setQuery("");
-    requestAnimationFrame(() => _optionalChain([inputRef, 'access', _ => _.current, 'optionalAccess', _2 => _2.focus, 'call', _3 => _3()]));
-  }, []);
-  const handleSelect = _react.useCallback.call(void 0, (provider, modelId) => {
-    onChange(_common.modelKey.call(void 0, provider, modelId));
+  const handleSelect = _react.useCallback.call(void 0, (nextValue) => {
+    onChange(nextValue);
     setOpen(false);
-    setQuery("");
   }, [onChange]);
   const handleClear = _react.useCallback.call(void 0, (event) => {
     event.stopPropagation();
     onChange("");
     setOpen(false);
-    setQuery("");
   }, [onChange]);
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _popover.Popover, { open, onOpenChange: handleOpenChange, children: [
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _popover.Popover, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _popover.PopoverTrigger, { asChild: true, disabled, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       "div",
       {
@@ -79,11 +59,11 @@ function AvailableModelPicker({
         children: [
           selected.group && selected.model ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              "img",
+              _modelpickerbody.ProviderLogo,
               {
-                src: selected.group.logo,
-                alt: selected.group.displayName,
-                className: "size-4 shrink-0 rounded-sm dark:invert"
+                logo: selected.group.logo,
+                displayName: selected.group.displayName,
+                className: "size-4"
               }
             ),
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "min-w-0 flex-1", children: [
@@ -108,7 +88,7 @@ function AvailableModelPicker({
         ]
       }
     ) }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       _popover.PopoverContent,
       {
         side: "bottom",
@@ -116,53 +96,17 @@ function AvailableModelPicker({
         sideOffset: 4,
         className: "w-[var(--radix-popover-trigger-width)] overflow-hidden rounded-xl border-border/60 bg-background p-0 shadow-xl",
         onWheel: (event) => event.stopPropagation(),
-        children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _searchinput.SearchInput,
-            {
-              ref: inputRef,
-              value: query,
-              onChange: (event) => setQuery(event.target.value),
-              placeholder: searchPlaceholder,
-              containerClassName: "border-b border-border/40"
-            }
-          ),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "max-h-[280px] overflow-y-auto py-1", children: groups.length === 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "px-3 py-4 text-center text-sm text-muted-foreground", children: noModelsLabel }) : totalResults === 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "px-3 py-4 text-center text-sm text-muted-foreground", children: emptyLabel }) : filteredGroups.map((group, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
-            index > 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "mx-3 border-t border-border/30" }) : null,
-            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2 px-3 pb-1 pt-2", children: [
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                "img",
-                {
-                  src: group.logo,
-                  alt: group.displayName,
-                  className: "size-3.5 shrink-0 rounded-sm dark:invert"
-                }
-              ),
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-sm font-semibold uppercase tracking-wider text-muted-foreground", children: group.displayName })
-            ] }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "px-1", children: group.models.map((model) => {
-              const nextValue = _common.modelKey.call(void 0, model.provider, model.modelId);
-              const isSelected = nextValue === value;
-              return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-                "button",
-                {
-                  type: "button",
-                  onClick: () => handleSelect(model.provider, model.modelId),
-                  className: _utils.cn.call(void 0, 
-                    "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"
-                  ),
-                  children: [
-                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex size-4 shrink-0 items-center justify-center", children: isSelected ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Check, { className: "size-3.5 text-emerald-500" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "size-1.5 rounded-full bg-border" }) }),
-                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "min-w-0 flex-1 truncate font-medium", children: model.name }),
-                    model.reasoning ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Sparkles, { className: "size-3 shrink-0 text-amber-500/60" }) : null
-                  ]
-                },
-                nextValue
-              );
-            }) })
-          ] }, group.provider)) })
-        ]
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _modelpickerbody.ModelPickerBody,
+          {
+            groups,
+            value,
+            onChange: handleSelect,
+            searchPlaceholder,
+            emptyLabel,
+            noModelsLabel
+          }
+        )
       }
     )
   ] });

package/dist/components/model-selection/available-model-picker.js

@@ -1,15 +1,13 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useMemo, useRef, useState } from "react";
-import { Check, ChevronDown, Sparkles, X } from "lucide-react";
+import { useCallback, useMemo, useState } from "react";
+import { ChevronDown, Sparkles, X } from "lucide-react";
 import {
-  filterModelGroups,
   findGroup,
   findModel,
-  modelKey,
   parseModelKey
 } 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";
 function AvailableModelPicker({
   groups,
@@ -24,8 +22,6 @@ function AvailableModelPicker({
   className
 }) {
   const [open, setOpen] = useState(false);
-  const [query, setQuery] = useState("");
-  const inputRef = useRef(null);
   const selected = useMemo(() => {
     const parsed = parseModelKey(value);
     if (!parsed) {
@@ -39,32 +35,16 @@ function AvailableModelPicker({
       fallbackLabel: model ? null : value
     };
   }, [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) => {
-    setOpen(nextOpen);
-    if (!nextOpen) return;
-    setQuery("");
-    requestAnimationFrame(() => inputRef.current?.focus());
-  }, []);
-  const handleSelect = useCallback((provider, modelId) => {
-    onChange(modelKey(provider, modelId));
+  const handleSelect = useCallback((nextValue) => {
+    onChange(nextValue);
     setOpen(false);
-    setQuery("");
   }, [onChange]);
   const handleClear = useCallback((event) => {
     event.stopPropagation();
     onChange("");
     setOpen(false);
-    setQuery("");
   }, [onChange]);
-  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, disabled, children: /* @__PURE__ */ jsxs(
       "div",
       {
@@ -79,11 +59,11 @@ function AvailableModelPicker({
         children: [
           selected.group && selected.model ? /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(
-              "img",
+              ProviderLogo,
               {
-                src: selected.group.logo,
-                alt: selected.group.displayName,
-                className: "size-4 shrink-0 rounded-sm dark:invert"
+                logo: selected.group.logo,
+                displayName: selected.group.displayName,
+                className: "size-4"
               }
             ),
             /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
@@ -108,7 +88,7 @@ function AvailableModelPicker({
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(
       PopoverContent,
       {
         side: "bottom",
@@ -116,53 +96,17 @@ function AvailableModelPicker({
         sideOffset: 4,
         className: "w-[var(--radix-popover-trigger-width)] overflow-hidden rounded-xl border-border/60 bg-background p-0 shadow-xl",
         onWheel: (event) => event.stopPropagation(),
-        children: [
-          /* @__PURE__ */ jsx(
-            SearchInput,
-            {
-              ref: inputRef,
-              value: query,
-              onChange: (event) => setQuery(event.target.value),
-              placeholder: searchPlaceholder,
-              containerClassName: "border-b border-border/40"
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { className: "max-h-[280px] overflow-y-auto py-1", children: groups.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-3 py-4 text-center text-sm text-muted-foreground", children: noModelsLabel }) : totalResults === 0 ? /* @__PURE__ */ jsx("div", { className: "px-3 py-4 text-center text-sm text-muted-foreground", children: emptyLabel }) : filteredGroups.map((group, index) => /* @__PURE__ */ jsxs("div", { children: [
-            index > 0 ? /* @__PURE__ */ jsx("div", { className: "mx-3 border-t border-border/30" }) : null,
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 pb-1 pt-2", children: [
-              /* @__PURE__ */ jsx(
-                "img",
-                {
-                  src: group.logo,
-                  alt: group.displayName,
-                  className: "size-3.5 shrink-0 rounded-sm dark:invert"
-                }
-              ),
-              /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold uppercase tracking-wider text-muted-foreground", children: group.displayName })
-            ] }),
-            /* @__PURE__ */ jsx("div", { className: "px-1", children: group.models.map((model) => {
-              const nextValue = modelKey(model.provider, model.modelId);
-              const isSelected = nextValue === value;
-              return /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  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"
-                  ),
-                  children: [
-                    /* @__PURE__ */ jsx("div", { className: "flex size-4 shrink-0 items-center justify-center", children: isSelected ? /* @__PURE__ */ jsx(Check, { className: "size-3.5 text-emerald-500" }) : /* @__PURE__ */ jsx("div", { className: "size-1.5 rounded-full bg-border" }) }),
-                    /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate font-medium", children: model.name }),
-                    model.reasoning ? /* @__PURE__ */ jsx(Sparkles, { className: "size-3 shrink-0 text-amber-500/60" }) : null
-                  ]
-                },
-                nextValue
-              );
-            }) })
-          ] }, group.provider)) })
-        ]
+        children: /* @__PURE__ */ jsx(
+          ModelPickerBody,
+          {
+            groups,
+            value,
+            onChange: handleSelect,
+            searchPlaceholder,
+            emptyLabel,
+            noModelsLabel
+          }
+        )
       }
     )
   ] });