Model selector

"use client";
import * as React from "react";
import { ModelSelector, type ModelChoice } from "@/components/ui/notchset/model-selector";

const CHOICES: ModelChoice[] = [
  { id: "fast", purpose: "Fast", note: "Quick answers and short drafts", name: "Claude Haiku 5.5" },
  { id: "balanced", purpose: "Balanced", note: "Most questions; thinks longer when it helps", name: "Claude Opus 5.5" },
  { id: "deep", purpose: "Deep thinking", note: "Hard problems, plans and analysis", name: "Claude Opus 5.5", unavailable: "Busy right now: try again in a few minutes" },
];

export default function ModelSelectorDemo() {
  const [value, setValue] = React.useState("balanced");
  const [open, setOpen] = React.useState(false);
  /* the host binds the shortcut: ⌘⇧M (Ctrl+Shift+M) opens the choices */
  React.useEffect(() => {
    const key = (e: KeyboardEvent) => {
      if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key.toLowerCase() === "m" && !e.isComposing) {
        e.preventDefault();
        setOpen(true);
      }
    };
    addEventListener("keydown", key);
    return () => removeEventListener("keydown", key);
  }, []);
  return (
    <div className="flex flex-wrap items-center gap-4">
      <ModelSelector choices={CHOICES} value={value} onValueChange={setValue} open={open} onOpenChange={setOpen} />
      <ModelSelector choices={CHOICES} value="fast" onValueChange={() => {}} lockedBy="Support assistant" />
    </div>
  );
}