Model picker

ModelPicker.tsxA DropdownMenu of jobs, costs and windows, with an Auto row that says what it picked. The switch marker is the second export.Copy

import { useState } from "react";
import { Check, ChevronDown } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

/**
 * Each row describes the job, not the architecture. A parameter count and a
 * point release tell a chooser nothing they can act on; "analysis and code"
 * and "8×" do. Cost, window and modality sit in the list because they change
 * which tasks are possible, and hiding them makes the menu decor.
 */
export const MODELS = [
  { id: "fast",    name: "Fast",         job: "everyday questions", cost: "1×", meta: "text only" },
  { id: "careful", name: "Careful",      job: "analysis and code",  cost: "8×", meta: "text, images" },
  { id: "long",    name: "Long context", job: "whole documents",    cost: "6×", meta: "1 million tokens" },
] as const;
export type ModelId = (typeof MODELS)[number]["id"];

type Props = {
  /** "auto" lets the system route by the question. Most people never open
   *  this menu, so auto and its routing decide the experience. */
  value: ModelId | "auto";
  /** What auto picked for the current turn, so the choice is visible and can
   *  be overridden rather than silent. */
  routed?: ModelId;
  onChange: (id: ModelId | "auto") => void;
  /** Start open. Used when the picker is the thing on screen, as in a demo. */
  defaultOpen?: boolean;
};

export function ModelPicker({ value, routed, onChange, defaultOpen = false }: Props) {
  const [open, setOpen] = useState(defaultOpen);
  const current = MODELS.find((m) => m.id === value);
  const picked = MODELS.find((m) => m.id === routed);

  return (
    // Non-modal: a picker beside a composer should not lock the page behind it.
    <DropdownMenu open={open} onOpenChange={setOpen} modal={false}>
      <DropdownMenuTrigger asChild>
        <Button variant="ghost" size="sm" aria-label="Choose a model">
          {current ? current.name : "Auto"}
          {!current && picked && <span className="text-muted-foreground">picked {picked.name}</span>}
          <ChevronDown className="size-4" />
        </Button>
      </DropdownMenuTrigger>

      <DropdownMenuContent align="end" className="w-80 p-1.5">
        {MODELS.map((m) => (
          <DropdownMenuItem
            key={m.id}
            role="menuitemradio"
            aria-checked={value === m.id}
            onSelect={() => onChange(m.id)}
            className="flex items-start gap-3 px-3 py-2"
          >
            <div className="min-w-0 flex-1">
              <div className="text-sm">{m.name}</div>
              <div className="text-xs text-muted-foreground">{m.job}</div>
            </div>
            <div className="text-right text-xs text-muted-foreground">
              <div className="tabular-nums">{m.cost}</div>
              <div>{m.meta}</div>
            </div>
            <Check className={`mt-0.5 size-4 shrink-0 ${value === m.id ? "" : "invisible"}`} />
          </DropdownMenuItem>
        ))}

        <DropdownMenuSeparator />

        <DropdownMenuItem
          role="menuitemradio"
          aria-checked={value === "auto"}
          onSelect={() => onChange("auto")}
          className="flex items-start gap-3 px-3 py-2"
        >
          <div className="min-w-0 flex-1">
            <div className="text-sm">Auto</div>
            <div className="text-xs text-muted-foreground">auto-routed by the question{picked ? `, picked ${picked.name}` : ""}</div>
          </div>
          <Check className={`mt-0.5 size-4 shrink-0 ${value === "auto" ? "" : "invisible"}`} />
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

/**
 * Sits on the turn where the model changed. The new model inherits the
 * transcript, and without this the change of voice reads as losing track.
 */
export function ModelSwitchMarker({ to }: { to: ModelId }) {
  const m = MODELS.find((x) => x.id === to)!;
  return (
    <div role="separator" aria-label={`switched to ${m.name}`} className="my-3 text-xs text-muted-foreground">
      <div className="flex items-center gap-3">
        <span className="h-px flex-1 bg-chart-1" />
        <span className="whitespace-nowrap text-chart-1">switched here to {m.name}</span>
        <span className="h-px flex-1 bg-chart-1" />
      </div>
      <p className="mt-1 text-center">earlier turns came from another model</p>
    </div>
  );
}

demo.tsxHow it is called: open on arrival, Auto routed to Careful, and a switch marker once a model is chosen.Copy

import { useState } from "react";
import { ModelPicker, ModelSwitchMarker, type ModelId } from "./ModelPicker";

/**
 * Opens on arrival, because the menu is the thing being shown. Auto is the
 * default and it picked Careful for this turn. Choosing a model records a
 * switch marker below.
 */
export default function Demo() {
  const [value, setValue] = useState<ModelId | "auto">("auto");
  const [switched, setSwitched] = useState<ModelId | null>(null);

  return (
    <div className="min-h-[340px] rounded-lg border bg-card p-4">
      <div className="flex justify-end">
        <ModelPicker
          value={value}
          routed="careful"
          defaultOpen
          onChange={(id) => {
            setValue(id);
            if (id !== "auto") setSwitched(id);
          }}
        />
      </div>
      {switched && <ModelSwitchMarker to={switched} />}
    </div>
  );
}