zidane-ui 9.1.1 → 9.1.3

package/src/chat/composer/ModelPicker.tsx

@@ -1,513 +0,0 @@
-/**
- * The model pill of the composer's controls and its popover.
- *
- *   - `ModelPickerFrame`: the pill and the popover around a model list.
- *   - `ModelChainPopover`: the frame over the chain picker (`ModelChainList`):
- *     a plain pick commits and closes; a chain built in the popover (⇥,
- *     shift+click, ×) is committed when it is dismissed (Esc, outside
- *     press, the trigger). The pill names the primary and its `+N`
- *     fallbacks; hovering it shows the whole chain, each model with what its
- *     picker row says (`ModelChainTooltip`).
- *     With `images`, the popover has a Chat / Image switch beside the Legacy
- *     switch, under the search field both lists share: the Image tab
- *     (`ImageModelList`) picks the default model of `generate_image`.
- *     Both lists share one fixed height. `kind` shows one of the two lists
- *     only, with no switch.
- *   - `ModelPicker`: `ModelChainPopover` over the models a host offers
- *     (`host.models`), one model, no chain (`SendInput.model` takes one).
- *     Values are `provider/model` keys; a bare model id (a session's
- *     `modelId`) matches too.
- */
-import { useEffect, useMemo, useRef, useState, type CSSProperties, type ReactNode } from 'react';
-import { chainsEqualKeyed } from 'zidane/chat/pure';
-
-import type { ChatModel, ChatModelProvider } from '../headless/host';
-import { Popover } from '../../components/floating/Popover';
-import { Segmented } from '../../components/Segmented';
-import { Tooltip } from '../../components/Tooltip';
-import { useChatLabels } from '../useChatLabels';
-import {
-  catalogFromProviders,
-  modelLineup,
-  modelNameOf,
-  refKey,
-  type ModelCatalogRow,
-  type ModelPickRef,
-} from './model-catalog';
-import { effectiveImageModel, ImageModelList, type ImageModelRow } from './ImageModelList';
-import { ModelChainList } from './ModelChainList';
-import { ModelChainTooltip } from './ModelChainTooltip';
-import { PickerPill } from './PickerPill';
-
-/** A model picked from a provider's catalog. */
-export interface ModelChoice {
-  /** `provider/model`, what `SendInput.model` takes. */
-  key: string;
-  /** The provider that offers the model. */
-  provider: ChatModelProvider;
-  /** The model. */
-  model: ChatModel;
-}
-
-/**
- * Returns the `provider/model` key of a model, the form {@link SendInput} takes.
- *
- * @param provider - The model's provider.
- * @param model - The model.
- */
-export const modelKey = (provider: ChatModelProvider, model: ChatModel) => `${provider.key}/${model.id}`;
-
-/**
- * The model a value names: a `provider/model` key, or a bare id (the first provider offering it).
- *
- * @param providers - The providers to search.
- * @param value - A `provider/model` key or a bare model id. A missing value returns `null`.
- */
-export function findModel(
-  providers: readonly ChatModelProvider[],
-  value: string | null | undefined,
-): ModelChoice | null {
-  if (!value) return null;
-  for (const provider of providers) {
-    for (const model of provider.models) {
-      if (modelKey(provider, model) === value) return { key: value, provider, model };
-    }
-  }
-  for (const provider of providers) {
-    const model = provider.models.find((m) => m.id === value);
-    if (model) return { key: modelKey(provider, model), provider, model };
-  }
-  return null;
-}
-
-/** Props for {@link ModelPickerFrame}. */
-export interface ModelPickerFrameProps {
-  /** The picked model's name; null: none picked yet (`labels.chooseModel`). */
-  name: string | null;
-  /** How many fallbacks follow it in its chain: a `+N` suffix. */
-  fallbacks?: number;
-  /** A fallback serving this run instead of the pick: shown in amber in its place. */
-  serving?: string | null;
-  /** Shown while the pill is hovered or keyboard-focused, never while the popover is open. Absent: none. */
-  tooltip?: ReactNode;
-  /** The popover's name. Default `labels.switchModel`, or `labels.chooseModel` with nothing picked. */
-  ariaLabel?: string;
-  /** Default 440. */
-  width?: number;
-  /** Called when the popover is dismissed (Escape, outside press, or the trigger). */
-  onDismiss?: () => void;
-  /** Called when the popover opens or closes. */
-  onOpenChange?: (open: boolean) => void;
-  /** Renders the popover's body. Receives a function that closes the popover. */
-  children: (close: () => void) => ReactNode;
-  /** Extra classes on the root element (the pill, or its tooltip's wrapper when `tooltip` is set). */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders the model pill and the popover around a model list.
- *
- * @param props - The {@link ModelPickerFrameProps}.
- */
-export function ModelPickerFrame({
-  name,
-  fallbacks = 0,
-  serving = null,
-  tooltip,
-  ariaLabel,
-  width = 440,
-  onDismiss,
-  onOpenChange,
-  children,
-  className,
-  style,
-}: ModelPickerFrameProps) {
-  const labels = useChatLabels();
-  // Nothing picked: the pill reads "Choose model", so its tooltip and the popover say the same.
-  const verb = name || serving ? labels.switchModel : labels.chooseModel;
-  return (
-    <Popover
-      ariaLabel={ariaLabel ?? verb}
-      width={width}
-      {...(onDismiss ? { onDismiss } : {})}
-      {...(onOpenChange ? { onOpenChange } : {})}
-      trigger={(props, open) => {
-        const pill = (
-          // Named by what it shows; the tooltip describes the chain (`aria-describedby`).
-          <PickerPill {...props} data-testid="model-pill" {...(tooltip ? {} : { className, style })}>
-            {serving ? (
-              <span className="text-xs font-medium text-zg-warn max-w-[12rem] min-w-0 truncate">{serving}</span>
-            ) : name ? (
-              // Baseline, not centre: the mono "+N" otherwise rides above the name.
-              <span className="inline-flex items-baseline gap-1 min-w-0">
-                <span className="text-xs font-medium max-w-[12rem] min-w-0 truncate">{name}</span>
-                {fallbacks > 0 && (
-                  <span className="zg-meta shrink-0" data-testid="model-chain-suffix">
-                    +{fallbacks}
-                  </span>
-                )}
-              </span>
-            ) : (
-              <span className="text-xs font-medium min-w-0 truncate">{labels.chooseModel}</span>
-            )}
-          </PickerPill>
-        );
-        // Kept mounted, only quiet while the popover is open: the list says it all there.
-        return tooltip ? (
-          <Tooltip
-            label={tooltip}
-            side="top"
-            portal
-            maxWidth={420}
-            disabled={open}
-            className={['min-w-0 max-w-full', className].filter(Boolean).join(' ')}
-            style={style}
-          >
-            {pill}
-          </Tooltip>
-        ) : (
-          pill
-        );
-      }}
-    >
-      {children}
-    </Popover>
-  );
-}
-
-/** The popover's list: a fixed height when it switches between lists, else a ceiling. */
-const LIST_HEIGHT = 'h-[min(60vh,460px)]';
-const LIST_MAX_HEIGHT = 'max-h-[min(60vh,460px)]';
-
-/** Props for {@link ModelChainPopover}. */
-export interface ModelChainPopoverProps {
-  /** The models offered; `null` while they load. */
-  catalog: readonly ModelCatalogRow[] | null;
-  /** Why the catalog failed to load. */
-  loadError?: string | null;
-  /** Asks for the catalog again (a Retry next to `loadError`). */
-  onRetry?: () => void;
-  /** The chain in force: the primary, then its fallbacks. Empty: none picked yet. */
-  chain: readonly ModelPickRef[];
-  /** A pick: a plain one (the popover closes after it settles), or an edited chain on dismiss. */
-  onCommit: (chain: ModelPickRef[]) => void | Promise<void>;
-  /** List every model, not only the newest of each family. */
-  showLegacy: boolean;
-  /** Called when the user toggles the list between the newest models of each family and every model. */
-  onShowLegacyChange: (showLegacy: boolean) => void;
-  /** One model, no fallbacks. */
-  single?: boolean;
-  /** A fallback serving this run instead of the primary, by name: the pill shows it in amber. */
-  serving?: string | null;
-  /** The pill's name. Default: the primary's natural name from the catalog (`modelNameOf`). */
-  name?: string | null;
-  /** The chain is the default for the next chat, not a session's: the tooltip says so. */
-  forNextChat?: boolean;
-  /** The key binding that opens the popover (`ctrl+m`), drawn as keycaps on the tooltip's last line. */
-  shortcut?: ReactNode;
-  /** The popover's name. Default `labels.switchModel`, or `labels.chooseModel` with nothing picked. */
-  ariaLabel?: string;
-  /** Called when the popover opens or closes (a row's `details` can then carry what picking it would cost). */
-  onOpenChange?: (open: boolean) => void;
-  /** The image models and the default one: adds the Image tab. Absent: the popover lists chat models only. */
-  images?: ModelChainImages;
-  /**
-   * Shows one kind of model only, with no Chat / Image switch. `image` needs
-   * `images`, and the pill then names the default image model. Default: both
-   * kinds when `images` is given, chat models otherwise.
-   */
-  kind?: ModelKind;
-  /** Extra classes on the root element (the model pill's frame). */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/** The kinds of model the popover lists: chat models or image models. */
-export type ModelKind = 'chat' | 'image';
-
-/** The Image tab of {@link ModelChainPopover}. */
-export interface ModelChainImages {
-  /** The image models; `null` while they load. */
-  rows: readonly ImageModelRow[] | null;
-  /** The stored default, `providerKey/modelId` or '' (the model the tool falls back to). */
-  value: string;
-  /** Why the list failed to load. */
-  loadError?: string | null;
-  /** Called with the picked `providerKey/modelId`. The popover stays open. */
-  onPick: (key: string) => void;
-}
-
-/**
- * Renders the model pill with a popover over the chain picker. A plain pick commits and closes; a chain edited in the popover commits when it is dismissed.
- *
- * @param props - The {@link ModelChainPopoverProps}.
- */
-export function ModelChainPopover({
-  catalog,
-  loadError = null,
-  onRetry,
-  chain,
-  onCommit,
-  showLegacy,
-  onShowLegacyChange,
-  single = false,
-  serving = null,
-  name,
-  forNextChat = false,
-  shortcut,
-  ariaLabel,
-  onOpenChange,
-  images,
-  kind,
-  className,
-  style,
-}: ModelChainPopoverProps) {
-  const labels = useChatLabels();
-  const draft = useRef<{ initial: ModelPickRef[]; chain: ModelPickRef[] } | null>(null);
-  const [tab, setTab] = useState<ModelKind>('chat');
-  // One search for both lists: switching tabs keeps what was typed.
-  const [query, setQuery] = useState('');
-  const primary = chain[0];
-  const switchable = images !== undefined && kind === undefined;
-  const shown: ModelKind = kind === 'image' && images ? 'image' : switchable ? tab : 'chat';
-
-  // The list's lineup, worked out while nothing happens rather than on the first opening.
-  useEffect(() => {
-    if (!catalog || catalog.length === 0) return undefined;
-    const warm = () => void modelLineup(catalog);
-    if (typeof requestIdleCallback === 'function') {
-      const id = requestIdleCallback(warm, { timeout: 2_000 });
-      return () => cancelIdleCallback(id);
-    }
-    const id = setTimeout(warm, 200);
-    return () => clearTimeout(id);
-  }, [catalog]);
-  const commitDraft = async () => {
-    const edited = draft.current;
-    draft.current = null;
-    if (!edited?.chain[0] || chainsEqualKeyed(edited.chain, edited.initial, refKey)) return;
-    await onCommit(edited.chain);
-  };
-
-  /*
-   * With the Chat / Image switch, both lists take one fixed height, so
-   * switching never resizes the popover; alone, the list fits its rows.
-   */
-  const listHeight = switchable ? LIST_HEIGHT : LIST_MAX_HEIGHT;
-  const toolbar = switchable ? (
-    <Segmented
-      size="sm"
-      ariaLabel={labels.modelKinds}
-      value={tab}
-      onChange={setTab}
-      options={[
-        { value: 'chat', label: labels.modelsChatTab, icon: 'i-ph-chat-circle' },
-        { value: 'image', label: labels.modelsImageTab, icon: 'i-ph-image' },
-      ]}
-    />
-  ) : undefined;
-
-  if (kind === 'image' && images) {
-    const current = images.rows ? effectiveImageModel(images.rows, images.value) : null;
-    return (
-      <ModelPickerFrame
-        className={className}
-        style={style}
-        ariaLabel={ariaLabel ?? labels.imageModelsPill}
-        tooltip={labels.imageModelsPill}
-        onOpenChange={(open) => {
-          if (!open) setQuery('');
-          onOpenChange?.(open);
-        }}
-        name={current?.modelName ?? null}
-      >
-        {(close) => (
-          <ImageModelList
-            rows={images.rows}
-            value={images.value}
-            loadError={images.loadError ?? null}
-            onPick={(key) => {
-              images.onPick(key);
-              close();
-            }}
-            showLegacy={showLegacy}
-            onShowLegacyChange={onShowLegacyChange}
-            query={query}
-            onQueryChange={setQuery}
-            className={listHeight}
-          />
-        )}
-      </ModelPickerFrame>
-    );
-  }
-
-  return (
-    <ModelPickerFrame
-      className={className}
-      style={style}
-      {...(ariaLabel ? { ariaLabel } : {})}
-      tooltip={
-        <ModelChainTooltip
-          chain={chain}
-          catalog={catalog}
-          serving={serving}
-          forNextChat={forNextChat}
-          footer={
-            <>
-              {ariaLabel ?? (chain.length > 0 ? labels.switchModel : labels.chooseModel)}
-              {shortcut}
-            </>
-          }
-        />
-      }
-      onOpenChange={(open) => {
-        // Each opening starts on the chat models, with an empty search: the pill names the chat model.
-        if (!open) {
-          setTab('chat');
-          setQuery('');
-        }
-        onOpenChange?.(open);
-      }}
-      onDismiss={() => void commitDraft()}
-      name={name !== undefined ? name : primary ? modelNameOf(catalog, primary.modelId, primary.providerKey) : null}
-      fallbacks={Math.max(0, chain.length - 1)}
-      serving={serving}
-    >
-      {(close) =>
-        images && shown === 'image' ? (
-          <ImageModelList
-            rows={images.rows}
-            value={images.value}
-            loadError={images.loadError ?? null}
-            onPick={(key) => {
-              images.onPick(key);
-              close();
-            }}
-            showLegacy={showLegacy}
-            onShowLegacyChange={onShowLegacyChange}
-            toolbar={toolbar}
-            query={query}
-            onQueryChange={setQuery}
-            className={listHeight}
-          />
-        ) : (
-          <ModelChainMenu
-            chain={chain}
-            catalog={catalog}
-            loadError={loadError}
-            {...(onRetry ? { onRetry } : {})}
-            showLegacy={showLegacy}
-            onShowLegacyChange={onShowLegacyChange}
-            single={single}
-            onDraft={(initial, next) => {
-              draft.current = { initial, chain: next };
-            }}
-            onQuickPick={async (next) => {
-              draft.current = null; // committed here, nothing left for dismiss
-              await onCommit(next);
-              close();
-            }}
-            toolbar={toolbar}
-            query={query}
-            onQueryChange={setQuery}
-            className={listHeight}
-          />
-        )
-      }
-    </ModelPickerFrame>
-  );
-}
-
-function ModelChainMenu({
-  chain,
-  catalog,
-  loadError,
-  onRetry,
-  showLegacy,
-  onShowLegacyChange,
-  single,
-  onDraft,
-  onQuickPick,
-  toolbar,
-  query,
-  onQueryChange,
-  className,
-}: {
-  chain: readonly ModelPickRef[];
-  catalog: readonly ModelCatalogRow[] | null;
-  loadError: string | null;
-  onRetry?: () => void;
-  showLegacy: boolean;
-  onShowLegacyChange: (showLegacy: boolean) => void;
-  single: boolean;
-  onDraft: (initial: ModelPickRef[], chain: ModelPickRef[]) => void;
-  onQuickPick: (chain: ModelPickRef[]) => Promise<void>;
-  toolbar: ReactNode;
-  query: string;
-  onQueryChange: (query: string) => void;
-  className: string;
-}) {
-  // The chain as the popover opened on it: what a dismiss compares the draft against.
-  const [initial] = useState<ModelPickRef[]>(() => [...chain]);
-  return (
-    <ModelChainList
-      dense
-      single={single}
-      initialChain={initial}
-      catalog={catalog}
-      loadError={loadError}
-      {...(onRetry ? { onRetry } : {})}
-      showLegacy={showLegacy}
-      onShowLegacyChange={onShowLegacyChange}
-      onChainChange={(next) => onDraft(initial, next)}
-      onQuickPick={(next) => void onQuickPick(next)}
-      className={className}
-      toolbar={toolbar}
-      query={query}
-      onQueryChange={onQueryChange}
-    />
-  );
-}
-
-/** Props for {@link ModelPicker}. */
-export interface ModelPickerProps {
-  /** The providers and models to offer, usually `host.models`. */
-  providers: readonly ChatModelProvider[];
-  /** The current `provider/model` key (or bare id); null: none picked yet. */
-  value: string | null;
-  /** Called with the choice when the user picks a model. */
-  onChange(choice: ModelChoice): void;
-  /** Extra classes on the root element (the model pill's frame). */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders the model pill and popover over the models a host offers. It picks one model with no fallback chain.
- *
- * @param props - The {@link ModelPickerProps}.
- */
-export function ModelPicker({ providers, value, onChange, className, style }: ModelPickerProps) {
-  const catalog = useMemo(() => catalogFromProviders(providers), [providers]);
-  const [showLegacy, setShowLegacy] = useState(false);
-  const current = findModel(providers, value);
-  return (
-    <ModelChainPopover
-      single
-      className={className}
-      style={style}
-      catalog={catalog}
-      chain={current ? [{ providerKey: current.provider.key, modelId: current.model.id }] : []}
-      showLegacy={showLegacy}
-      onShowLegacyChange={setShowLegacy}
-      onCommit={([pick]) => {
-        const choice = pick && findModel(providers, `${pick.providerKey}/${pick.modelId}`);
-        if (choice) onChange(choice);
-      }}
-    />
-  );
-}

package/src/chat/composer/ModelPickerDialog.tsx

@@ -1,99 +0,0 @@
-/**
- * The Model dialog: the full-size `HostModelChainList` for a session, on the
- * app's modal layer. Semantics live in the list (the composer popover's);
- * this shell only owns commit-on-close (`commitModelPick`): the session's
- * model chain, then the app's default when this computer can run it. An
- * untouched list is a pure cancel. Needs a `ModalProvider` (`zidane-ui/app`).
- */
-import { useRef, useState } from 'react';
-import { chainsEqualKeyed } from 'zidane/chat/pure';
-
-import { ModalShell, useModal } from '../../app/ModalProvider';
-import type { ComposerSessionView } from '../headless/composer/host-chrome';
-import type { ModelPickRef } from '../headless/composer/models';
-import { commitModelPick, type SetDefaultModel } from '../headless/composer/remember-model-pick';
-import { useComposerHost, useComposerLabels } from './ComposerHostProvider';
-import { HostModelChainList } from './HostModelChainList';
-import { refKey } from './model-catalog';
-
-/** Props for {@link ModelPickerDialog}. */
-export interface ModelPickerDialogProps {
-  /** The session whose model is picked. */
-  session: ComposerSessionView;
-  /** Its model now (may differ from its own pick when it has none). */
-  currentModelId: string | null;
-  /** That model's provider. */
-  currentProviderKey: string | null;
-  /** Sets the app's default model (the next new chat's). */
-  onDefaultModel: SetDefaultModel;
-  /** Called once a pick is written (refresh the app's session list). */
-  onCommitted?: () => void | Promise<void>;
-}
-
-/**
- * The Model dialog (see the header).
- *
- * @param props - The {@link ModelPickerDialogProps}.
- */
-export function ModelPickerDialog({
-  session,
-  currentModelId,
-  currentProviderKey,
-  onDefaultModel,
-  onCommitted,
-}: ModelPickerDialogProps) {
-  const modal = useModal();
-  const host = useComposerHost();
-  const labels = useComposerLabels();
-
-  const [initialChain] = useState<ModelPickRef[]>(() =>
-    currentProviderKey && currentModelId
-      ? [
-          {
-            providerKey: currentProviderKey,
-            modelId: currentModelId,
-            ...(session.account ? { account: session.account } : {}),
-          },
-          ...(session.modelFallbacks ?? []),
-        ]
-      : [],
-  );
-  const draft = useRef<ModelPickRef[]>(initialChain);
-
-  const handleClose = () => {
-    const chain = draft.current;
-    const primary = chain[0];
-
-    if (!primary || chainsEqualKeyed(chain, initialChain, refKey)) {
-      modal.close();
-      return;
-    }
-
-    void (async () => {
-      // A server session's pick becomes the app's default only when this computer can run it.
-      await commitModelPick(host, { sessionId: session.id, hostId: session.hostId }, chain, onDefaultModel);
-      await onCommitted?.();
-      modal.close();
-    })();
-  };
-
-  return (
-    <ModalShell
-      title={labels.modelDialogTitle}
-      description={labels.modelDialogDescription(session.title ?? '')}
-      onClose={handleClose}
-      size="large"
-    >
-      <HostModelChainList
-        initialChain={initialChain}
-        {...(session.cwd !== undefined ? { cwd: session.cwd } : {})}
-        hostId={session.hostId ?? null}
-        sessionId={session.id}
-        onChainChange={(chain) => {
-          draft.current = chain;
-        }}
-        className="max-h-[min(70vh,560px)]"
-      />
-    </ModalShell>
-  );
-}