zidane-ui 9.1.1 → 9.1.4

package/src/chat/composer/ModelChainRow.tsx

@@ -1,191 +0,0 @@
-/**
- * One row of the model chain picker: the model's natural name, its id (or
- * an aggregator's vendor), the legacy / not-in-catalog / context / reasoning
- * meta, and its place in the chain (the check, or a 1-based priority once
- * two or more are picked, with a remove button under the cursor).
- *
- * The list positions it (`top`, `height`: it mounts only the rows in view)
- * and memoizes it: its handlers take the row's index, so they are the same
- * for every row, and moving the cursor renders the two rows it leaves and
- * enters.
- */
-import { memo, useLayoutEffect, useRef, type CSSProperties } from 'react';
-import { modelDisplayName } from 'zidane/chat/pure';
-
-import { IconButton } from '../../components/IconButton';
-import { providerColor } from '../provider-color';
-import { useChatLabels } from '../useChatLabels';
-import { rowKey, type ModelCatalogRow } from './model-catalog';
-import { ModelMeta, ModelProviderChip } from './ModelFacts';
-
-/** Props for {@link ModelChainRow}. */
-export interface ModelChainRowProps {
-  /** The row's index in the list, handed back to the handlers. */
-  idx: number;
-  /** The model the row shows. */
-  entry: ModelCatalogRow;
-  /** Offset below its section's header. */
-  top: number;
-  /** The row's height in pixels. */
-  height: number;
-  /** Compact one-line row, as in the popover. */
-  dense: boolean;
-  /** The keyboard cursor is on the row. */
-  isCursor: boolean;
-  /** 1-based place in the chain; `null`: not in it. */
-  position: number | null;
-  /**
-   * Its place in the chain shows up front: the In use rows once two or more
-   * are picked. Elsewhere a chain member keeps its check, and no row keeps an
-   * empty column for a number.
-   */
-  numbered: boolean;
-  /** Another account of this provider is in the chain: picking replaces it, it can't be a fallback. */
-  blocked?: boolean;
-  /** An older model the lineup would hide: drawn dimmed. */
-  legacy: boolean;
-  /** The provider chip (the pinned "In use" rows, from several providers). */
-  showProvider: boolean;
-  /** A typed id's route: the provider is the row's name, the id sits in the group header. */
-  route?: boolean;
-  /** The row joined the list with this commit: it sharpens in. */
-  isNew: (key: string) => boolean;
-  /** Called with `idx` when the pointer moves over the row. */
-  onHover: (idx: number) => void;
-  /** Called with `idx` and whether Shift was held when the user picks the row. */
-  onPick: (idx: number, shift: boolean) => void;
-  /** Absent: the row can't be removed from here (single mode). */
-  onRemove?: (idx: number) => void;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/** One row of the model chain picker: the model's name and meta, and its place in the chain. */
-export const ModelChainRow = memo(function ModelChainRow({
-  idx,
-  entry,
-  top,
-  height,
-  dense,
-  isCursor,
-  position,
-  numbered,
-  blocked = false,
-  legacy,
-  showProvider,
-  route = false,
-  isNew,
-  onHover,
-  onPick,
-  onRemove,
-  className,
-  style,
-}: ModelChainRowProps) {
-  const labels = useChatLabels();
-  const item = useRef<HTMLLIElement>(null);
-  // Asked as it mounts, before the paint. React keeps the class: the item's
-  // className never changes, so a later render (a hover) can't cut it short.
-  useLayoutEffect(() => {
-    if (isNew(rowKey(entry))) item.current?.classList.add('zg-model-row-in');
-  }, [isNew, entry]);
-  // The natural name (`modelDisplayName`: no own-brand prefix, no "(latest)");
-  // an aggregator's vendor ("Anthropic") takes the meta slot, else the id does.
-  const display = modelDisplayName(entry);
-  const name = display.name;
-  const sub = display.vendor ?? (name !== entry.modelId ? entry.modelId : null);
-  const color = providerColor(entry.providerKey);
-  const member = position !== null;
-  // A modal row is two lines tall; with only one, it sits in the middle.
-  const oneLine = !dense && (route || !sub);
-  return (
-    <li
-      ref={item}
-      className={['group absolute inset-x-0', className].filter(Boolean).join(' ')}
-      style={{ top, height, ...style }}
-    >
-      <button
-        type="button"
-        data-row={idx}
-        data-model={entry.modelId}
-        data-account={entry.account?.id}
-        title={blocked ? labels.modelAccountBlocked(entry.providerLabel) : undefined}
-        // Not `disabled`: a disabled button swallows the hover its lock's tooltip needs.
-        aria-disabled={entry.unavailable ? true : undefined}
-        data-size={dense ? 'md' : 'lg'}
-        data-active={isCursor ? '' : undefined}
-        // A move, not an enter: rows passing under a still pointer while the wheel scrolls are not hovers.
-        onMouseMove={isCursor ? undefined : () => onHover(idx)}
-        onClick={(e) => onPick(idx, e.shiftKey)}
-        className={`zg-menu-row zg-press-subtle relative h-full ${oneLine ? '!items-center' : ''} ${entry.unavailable ? 'opacity-50 cursor-not-allowed' : legacy ? 'opacity-75' : ''}`}
-      >
-        {numbered && (
-          /*
-           * The place stands in the column of the In use pin above it: the
-           * pin's width at the header's inset (a row's padding is 8px dense,
-           * 10px full; the header's 8px), so the name starts where the
-           * header's label does. Two-line rows centre it on the name's line.
-           */
-          <span
-            className={`w-2.5 shrink-0 flex items-center justify-center ${dense ? '-mr-0.5' : '-mx-0.5 h-[1lh]'}`}
-            data-place={position ?? undefined}
-          >
-            {member && (
-              <span
-                className={`text-zg-badge font-semibold tabular-nums leading-none ${
-                  position === 1 ? 'text-[var(--zg-accent)]' : 'text-[var(--zg-text-muted)]'
-                }`}
-                title={position === 1 ? labels.modelPrimaryHint : labels.modelFallbackPosition(position - 1)}
-              >
-                {position > 9 ? '+' : position}
-              </span>
-            )}
-          </span>
-        )}
-
-        {route ? (
-          <span className="flex-1 min-w-0 flex items-center gap-2">
-            <span className="shrink-0 text-zg-label text-[var(--zg-text-subtle)]">{labels.modelVia}</span>
-            <span aria-hidden className="w-2 h-2 rounded-full shrink-0" style={{ background: color }} />
-            <span className="truncate" title={labels.modelViaHint(entry.modelId, entry.providerLabel)}>
-              {entry.providerLabel}
-            </span>
-          </span>
-        ) : (
-          <span className={`flex-1 min-w-0 flex ${dense ? 'items-baseline gap-2' : 'flex-col'}`}>
-            <span className="truncate" title={entry.modelId}>
-              {name}
-            </span>
-            {sub && <span className="zg-meta truncate">{sub}</span>}
-          </span>
-        )}
-
-        <span className="shrink-0 flex items-center gap-2">
-          {showProvider && <ModelProviderChip entry={entry} />}
-          <ModelMeta entry={entry} legacy={legacy} route={route} />
-          {member && (
-            // The checked style; the remove button takes its place under the cursor.
-            <span
-              aria-label={labels.modelInUse}
-              className={`i-ph-check text-zg-ui text-[var(--zg-accent)] ${!onRemove ? '' : isCursor ? 'opacity-0' : 'group-hover:opacity-0'}`}
-            />
-          )}
-        </span>
-      </button>
-
-      {member && onRemove && (
-        <IconButton
-          icon="i-ph-x"
-          size="xs"
-          label={position === 1 ? labels.modelRemovePrimary : labels.modelRemoveFallback(position - 1)}
-          title={labels.modelRemoveFromChain}
-          onClick={() => onRemove(idx)}
-          className={`absolute right-1.5 inset-y-0 my-auto ${
-            isCursor ? 'opacity-100' : 'opacity-0 group-hover:opacity-100 focus-visible:opacity-100'
-          }`}
-        />
-      )}
-    </li>
-  );
-});

package/src/chat/composer/ModelChainRows.tsx

@@ -1,223 +0,0 @@
-/**
- * The model chain picker's scrolling body: every section as a positioned
- * block (its header sticky while its rows scroll under it) holding only the
- * rows in view plus overscan, placed by arithmetic from
- * `model-list-layout`. The scroll position comes from the scroll event and
- * is never read back during a render or a commit, which would force a
- * layout of the whole window.
- *
- * Scrolling is list-local (`scrollTop`), never `scrollIntoView`, which would
- * also scroll the page under a popover and jump the transcript.
- */
-import { memo, useEffect, useLayoutEffect, useRef, useState, type CSSProperties, type ReactNode } from 'react';
-import { positionKeyed } from 'zidane/chat/pure';
-
-import { canJoinChain, lineupKeyOf, pickRefOf, refKey, rowKey, type ModelPickRef } from './model-catalog';
-import {
-  groupAt,
-  maxScroll,
-  placeOfRow,
-  rowsBetween,
-  rowTop,
-  scrollToShow,
-  type ModelListLayout,
-} from './model-list-layout';
-import { ModelGroupHeader } from './ModelChainParts';
-import { ModelChainRow } from './ModelChainRow';
-
-/** Rows kept mounted beyond each edge of the view, so a fast scroll never shows a gap. */
-const OVERSCAN_PX = 320;
-/**
- * The list's height until it is measured (right after its first layout), and
- * the least it mounts rows for: at least the host's cap (the popover's list
- * tops out near 375, the modal's near 440; less in a short window), so the
- * first frame has no gap. Opening mounts only the rows that show; the
- * overscan joins a frame later, before anyone can scroll.
- */
-const VIEW_GUESS = { dense: 380, full: 440 } as const;
-
-/** The highlighted row, and what moved it there: only the keyboard scrolls the list to follow it. */
-export interface Cursor {
-  /** Index of the row under the cursor. */
-  index: number;
-  /** What moved it there: the keyboard or the pointer. */
-  by: 'key' | 'mouse';
-}
-
-/** Props for {@link ModelChainRows}. */
-export interface ModelChainRowsProps {
-  /** Where each section and row sits (`model-list-layout`). */
-  layout: ModelListLayout;
-  /** The row under the cursor; a keyboard move keeps it in view. */
-  cursor: Cursor;
-  /** A provider pill's jump: brings its section to the top; `seq` makes a repeat a new jump. */
-  jump: { key: string; seq: number } | null;
-  /** The picked models, primary first. */
-  chain: readonly ModelPickRef[];
-  /** The lineup: a row outside it is tagged legacy. */
-  current: ReadonlySet<string>;
-  /** The row joined the list with this commit: it sharpens in. Asked as a row mounts. */
-  isNew: (key: string) => boolean;
-  /** Compact one-line rows, as in the popover. */
-  dense: boolean;
-  /** One model, no chain: rows can't be removed from the list. */
-  single: boolean;
-  /** Headers say how many models the lineup hides (not while searching, nor with Legacy on). */
-  countHidden: boolean;
-  /** Called with a row's index when the pointer moves over it. */
-  onHover: (index: number) => void;
-  /** Called with a row's index and whether Shift was held when the user picks it. */
-  onPick: (index: number, shift: boolean) => void;
-  /** Called with a row's index when the user removes it from the chain. */
-  onRemove: (index: number) => void;
-  /** The section under the list's top edge, whenever it changes. */
-  onSpy: (key: string | null) => void;
-  /** The user moved the list (wheel, pointer): a pill's pin lets go. */
-  onUserMove: () => void;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/** Renders the picker's sections and the rows of each that are in view. */
-export const ModelChainRows = memo(function ModelChainRows({
-  layout,
-  cursor,
-  jump,
-  chain,
-  current,
-  isNew,
-  dense,
-  single,
-  countHidden,
-  onHover,
-  onPick,
-  onRemove,
-  onSpy,
-  onUserMove,
-  className,
-  style,
-}: ModelChainRowsProps) {
-  const scroller = useRef<HTMLDivElement>(null);
-  const guess = dense ? VIEW_GUESS.dense : VIEW_GUESS.full;
-  const [scrollTop, setScrollTop] = useState(0);
-  const [viewHeight, setViewHeight] = useState<number>(guess);
-  const [overscan, setOverscan] = useState(0);
-
-  useLayoutEffect(() => {
-    const el = scroller.current;
-    if (!el) return undefined;
-    const frame = requestAnimationFrame(() => setOverscan(OVERSCAN_PX));
-    const onScroll = () => setScrollTop(el.scrollTop);
-    el.addEventListener('scroll', onScroll, { passive: true });
-    // The view is what the host's cap leaves after the search, pills and
-    // footer: measured when its size settles, where layout is already done.
-    // Its border box (the list has no border), not `clientHeight`: that one
-    // rounds, and the cursor's row would end half a pixel past the edge.
-    const resize =
-      typeof ResizeObserver === 'undefined'
-        ? null
-        : new ResizeObserver(([entry]) => setViewHeight(entry?.borderBoxSize[0]?.blockSize ?? el.clientHeight));
-    resize?.observe(el);
-    return () => {
-      cancelAnimationFrame(frame);
-      el.removeEventListener('scroll', onScroll);
-      resize?.disconnect();
-    };
-  }, []);
-
-  /*
-   * A keyboard move keeps its row in view; a pill's jump brings its section
-   * to the top. The render places the list, so the rows for the new place
-   * mount in this commit, and the commit scrolls the DOM there.
-   */
-  const [handled, setHandled] = useState({ cursor, jump });
-  const [scrollTo, setScrollTo] = useState<{ top: number } | null>(null);
-  if (handled.cursor !== cursor || handled.jump !== jump) {
-    setHandled({ cursor, jump });
-    const section = jump && jump !== handled.jump ? layout.groups.find((g) => g.group.key === jump.key) : undefined;
-    const row = !section && cursor !== handled.cursor && cursor.by === 'key' ? placeOfRow(layout, cursor.index) : null;
-    const follow = row === null ? null : scrollToShow(layout, row, scrollTop, viewHeight);
-    if (section) {
-      setScrollTop(Math.min(section.top, maxScroll(layout, viewHeight)));
-      setScrollTo({ top: section.top });
-    } else if (follow !== null) {
-      setScrollTop(follow);
-      setScrollTo({ top: follow });
-    }
-  }
-  useLayoutEffect(() => {
-    if (scrollTo && scroller.current) scroller.current.scrollTop = scrollTo.top;
-  }, [scrollTo]);
-
-  const spied = groupAt(layout, scrollTop, viewHeight);
-  useEffect(() => {
-    onSpy(spied);
-  }, [spied, onSpy]);
-
-  const multi = chain.length > 1;
-  const from = scrollTop - overscan;
-  // Rows mount for at least the guess: a list still loading its catalog is a
-  // few pixels tall, and the frame where the rows arrive would mount rows for
-  // that. Following the cursor and the spy use the measured view.
-  const to = scrollTop + Math.max(viewHeight, guess) + overscan;
-
-  return (
-    <div
-      ref={scroller}
-      onWheel={onUserMove}
-      onPointerDown={onUserMove}
-      className={['relative flex-1 overflow-y-auto px-1.5 pb-1.5', className].filter(Boolean).join(' ')}
-      style={style}
-      data-testid="model-list"
-    >
-      <ul className="relative list-none m-0 p-0" style={{ height: layout.height }}>
-        {layout.groups.map((placed) => {
-          const { group } = placed;
-          const hidden = countHidden && group.providerKey ? group.total - group.rows.length : 0;
-          const span = rowsBetween(layout, placed, from, to);
-          const visible: ReactNode[] = [];
-          for (let k = span?.[0] ?? 0; span && k <= span[1]; k++) {
-            const entry = group.rows[k]!;
-            const idx = placed.first + k;
-            const key = rowKey(entry);
-            const position = positionKeyed(chain, key, refKey);
-            visible.push(
-              <ModelChainRow
-                key={key}
-                idx={idx}
-                entry={entry}
-                top={rowTop(layout, k)}
-                height={layout.rowH}
-                dense={dense}
-                isCursor={idx === cursor.index}
-                position={position}
-                numbered={multi && group.key === 'in-use'}
-                blocked={position === null && !canJoinChain(chain, pickRefOf(entry))}
-                legacy={!entry.offCatalog && !current.has(lineupKeyOf(entry))}
-                showProvider={group.key === 'in-use'}
-                route={group.key === 'typed'}
-                isNew={isNew}
-                onHover={onHover}
-                onPick={onPick}
-                {...(single ? {} : { onRemove })}
-              />,
-            );
-          }
-          return (
-            <li
-              key={group.key}
-              className="absolute inset-x-0 list-none"
-              style={{ top: placed.top, height: placed.height }}
-              data-group={group.key}
-            >
-              <ModelGroupHeader group={group} hidden={hidden} />
-              <ul className="relative list-none m-0 p-0">{visible}</ul>
-            </li>
-          );
-        })}
-      </ul>
-    </div>
-  );
-});

package/src/chat/composer/ModelChainTooltip.tsx

@@ -1,121 +0,0 @@
-/**
- * The model pill's tooltip: every model of the chain in order (the primary,
- * then its fallbacks), each with what its picker row says, set in columns:
- * its place, its natural name and id (or an aggregator's vendor), the
- * provider chip with the account when the provider has several, its context
- * window and the reasoning glyph (`ModelFacts`). A row's `details` stay in
- * the picker: they say what picking it would cost. A fallback serving this
- * run is named first; the next chat's default says so. A last line says how
- * to change it.
- */
-import type { CSSProperties, ReactNode } from 'react';
-import { modelDisplayName } from 'zidane/chat/pure';
-
-import { useChatLabels } from '../useChatLabels';
-import { refKey, resolvePick, rowKey, type ModelCatalogRow, type ModelPickRef } from './model-catalog';
-import { ModelProviderChip, ModelReasoning, ModelWindow } from './ModelFacts';
-
-/** Props for {@link ModelChainTooltip}. */
-export interface ModelChainTooltipProps {
-  /** The chain in force: the primary, then its fallbacks. Empty: none picked yet. */
-  chain: readonly ModelPickRef[];
-  /** The models offered, to describe each pick; `null` while they load (picks show by id). */
-  catalog: readonly ModelCatalogRow[] | null;
-  /** A fallback serving this run instead of the primary, by name. */
-  serving?: string | null;
-  /** The chain is the default for the next chat, not a session's. */
-  forNextChat?: boolean;
-  /** How to change it, on the last line (`Switch model` and its keycaps). */
-  footer?: ReactNode;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/** A pick as the picker lists it: its catalog row, or a bare row naming its id when the catalog lacks it. */
-function rowOf(pick: ModelPickRef, catalog: readonly ModelCatalogRow[] | null): ModelCatalogRow {
-  if (catalog) {
-    // A pick naming no account is the active account's row, as the picker pins it (`resolvePick`).
-    const key = refKey(resolvePick(pick, catalog));
-    const hit = catalog.find((entry) => rowKey(entry) === key);
-    if (hit) return hit;
-  }
-  return {
-    providerKey: pick.providerKey,
-    providerLabel: catalog?.find((entry) => entry.providerKey === pick.providerKey)?.providerLabel ?? pick.providerKey,
-    modelId: pick.modelId,
-    modelName: pick.modelId,
-    contextWindow: null,
-    supportsReasoning: false,
-  };
-}
-
-/**
- * Renders the chain the model pill stands for, as tooltip content.
- *
- * @param props - The {@link ModelChainTooltipProps}.
- */
-export function ModelChainTooltip({
-  chain,
-  catalog,
-  serving = null,
-  forNextChat = false,
-  footer,
-  className,
-  style,
-}: ModelChainTooltipProps) {
-  const labels = useChatLabels();
-  const rows = chain.map((pick) => rowOf(pick, catalog));
-  const primaryName = rows[0] ? modelDisplayName(rows[0]).name : labels.modelServingFallback;
-  return (
-    <span
-      className={['flex flex-col gap-1.5 py-0.5 text-left whitespace-normal', className].filter(Boolean).join(' ')}
-      style={style}
-      data-testid="model-chain-tooltip"
-    >
-      {serving && <span className="text-zg-warn leading-snug">{labels.modelServing(primaryName, serving)}</span>}
-      {forNextChat && <span className="zg-meta">{labels.modelForNextChat}</span>}
-      {rows.length === 0 ? (
-        <span className="text-[var(--zg-text-muted)]">{labels.modelChainNoModel}</span>
-      ) : (
-        <span
-          role="list"
-          aria-label={labels.modelChain}
-          className="grid grid-cols-[auto_minmax(0,1fr)_auto_auto_auto] items-center gap-x-2 gap-y-1"
-        >
-          {rows.map((entry, i) => {
-            const display = modelDisplayName(entry);
-            const sub = display.vendor ?? (display.name !== entry.modelId ? entry.modelId : null);
-            return (
-              <span key={`${rowKey(entry)}:${i}`} role="listitem" className="contents" data-model={entry.modelId}>
-                <span
-                  className={`text-zg-badge font-semibold tabular-nums text-center ${
-                    i === 0 ? 'text-[var(--zg-accent)]' : 'text-[var(--zg-text-muted)]'
-                  }`}
-                  title={i === 0 ? labels.modelPrimaryHint : labels.modelFallbackPosition(i)}
-                >
-                  {i + 1}
-                </span>
-                <span className="min-w-0 flex items-baseline gap-2">
-                  <span className="truncate text-[var(--zg-text)]">{display.name}</span>
-                  {sub && <span className="zg-meta truncate">{sub}</span>}
-                </span>
-                <span className="flex">
-                  <ModelProviderChip entry={entry} />
-                </span>
-                <span className="flex justify-end">
-                  <ModelWindow entry={entry} />
-                </span>
-                <span className="flex w-3 justify-center">
-                  <ModelReasoning entry={entry} />
-                </span>
-              </span>
-            );
-          })}
-        </span>
-      )}
-      {footer && <span className="zg-meta flex items-center gap-1.5 pt-0.5">{footer}</span>}
-    </span>
-  );
-}