freezmo/components/chat/ModelPicker.tsx

"use client";

import { useEffect, useRef, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "framer-motion";

import { CheckCircleIcon } from "@/components/icons";
import { useI18n } from "@/lib/i18n";
import { providerInfo } from "@/lib/providers";
import { springSheet } from "@/lib/motion";
import { useIsPhone } from "@/lib/use-phone";
import type { ChatModelChoice } from "@/lib/chat";
import { cn } from "@/lib/utils";

/**
 * Model chip picker: a bottom sheet on phones, a small dropdown on desktop.
 * The list is the server's CHAT_MODELS allowlist (from the health check) with
 * text/vision badges and availability; picking one remembers it.
 */
export function ModelPicker({
  open,
  onClose,
  models,
  value,
  valueProvider,
  onChange,
}: {
  open: boolean;
  onClose: () => void;
  models: ChatModelChoice[];
  value: string;
  /** Provider that owns `value` (Ollama when omitted). */
  valueProvider?: string;
  onChange: (model: string, provider?: string) => void;
}) {
  const { t } = useI18n();
  const isPhone = useIsPhone();
  const reduceMotion = useReducedMotion();
  const panel = useRef<HTMLDivElement>(null);
  const [query, setQuery] = useState("");

  /* Every model the server lists is offered, so the list can be long — filter
     it. Cleared each time the picker opens. */
  useEffect(() => {
    if (open) setQuery("");
  }, [open]);
  const needle = query.trim().toLowerCase();
  const visible = needle ? models.filter((model) => model.name.toLowerCase().includes(needle)) : models;

  useEffect(() => {
    if (!open) return;
    const onKey = (event: KeyboardEvent) => {
      if (event.key === "Escape") onClose();
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, onClose]);

  /* Desktop dropdown: a press anywhere outside closes it, except on the
     trigger chips, which toggle their own popover (see Composer). */
  useEffect(() => {
    if (!open || isPhone) return;
    const onDown = (event: PointerEvent) => {
      const target = event.target;
      if (!(target instanceof Element)) return;
      if (panel.current?.contains(target)) return;
      if (target.closest("[data-picker-trigger]")) return;
      onClose();
    };
    document.addEventListener("pointerdown", onDown);
    return () => document.removeEventListener("pointerdown", onDown);
  }, [open, isPhone, onClose]);

  const providerLabel = (id: string) => providerInfo(id)?.label ?? id;

  const badge = (model: ChatModelChoice) =>
    model.badge === "vision" ? t("chat.modelVision") : model.badge === "both" ? t("chat.modelBoth") : t("chat.modelText");

  const rows = (
    <>
      {models.length > 8 ? (
        <input
          value={query}
          onChange={(event) => setQuery(event.target.value)}
          placeholder={t("chat.modelSearch")}
          aria-label={t("chat.modelSearch")}
          autoComplete="off"
          spellCheck={false}
          className="mb-2 w-full rounded-xl border border-[var(--hairline)] bg-[var(--surface-sunken)] px-3 py-2 text-[13px] text-[var(--text)] outline-none placeholder:text-[var(--text-subtle)] focus:border-accent-400"
        />
      ) : null}
    <ul className="max-h-[60dvh] space-y-1 overflow-y-auto overscroll-contain">
      {visible.length === 0 ? (
        <li className="px-3 py-2 text-[12.5px] text-[var(--text-subtle)]">{t("chat.modelSearchEmpty")}</li>
      ) : null}
      {visible.map((model) => {
        const selected = model.name === value && (model.provider ?? "ollama") === (valueProvider ?? "ollama");
        const unavailable = model.available === false;
        return (
          <li key={model.name}>
            <button
              type="button"
              disabled={unavailable}
              aria-pressed={selected}
              onClick={() => {
                onChange(model.name, model.provider);
                onClose();
              }}
              className={cn(
                "flex w-full items-center gap-3 rounded-2xl border px-3 py-3 text-left transition",
                selected
                  ? "border-[var(--nav-active-border)] bg-[var(--nav-active-bg)]"
                  : "border-[var(--hairline-soft)] bg-[var(--surface-strong)] hover:bg-[var(--hover)]",
                unavailable && "opacity-55",
              )}
            >
              <span className="min-w-0 flex-1">
                <span className="block truncate text-[13.5px] font-semibold text-[var(--text)]">{model.name}</span>
                <span className="mt-0.5 flex items-center gap-2 text-[11.5px] text-[var(--text-subtle)]">
                  <span className="rounded-md border border-[var(--hairline-soft)] px-1.5 py-0.5">
                    {model.provider ? `${providerLabel(model.provider)} · ${badge(model)}` : badge(model)}
                  </span>
                  {model.available === true ? (
                    <span className="text-emerald-600 dark:text-emerald-300">{t("chat.modelAvailable")}</span>
                  ) : model.available === false ? (
                    <span className="text-amber-600 dark:text-amber-300">{t("chat.modelUnavailable")}</span>
                  ) : null}
                </span>
              </span>
              {selected ? <CheckCircleIcon className="size-5 shrink-0 text-accent-500" /> : null}
            </button>
          </li>
        );
      })}
    </ul>
    </>
  );

  if (isPhone) {
    return (
      <AnimatePresence>
        {open ? (
          <div className="fixed inset-0 z-50" role="dialog" aria-modal="true" aria-label={t("chat.modelTitle")}>
            <motion.button
              type="button"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              transition={reduceMotion ? { duration: 0 } : undefined}
              className="absolute inset-0 bg-black/45"
              aria-label={t("common.close")}
              onClick={onClose}
            />
            <motion.div
              initial={reduceMotion ? { opacity: 0 } : { y: "100%" }}
              animate={reduceMotion ? { opacity: 1 } : { y: 0 }}
              exit={reduceMotion ? { opacity: 0 } : { y: "100%" }}
              transition={reduceMotion ? { duration: 0 } : springSheet}
              className="glass-panel glass-sheet absolute inset-x-0 bottom-0 max-h-[80dvh] rounded-b-none px-4 pb-safe pt-2"
            >
              <div className="sheet-grabber mx-auto" aria-hidden />
              <h2 className="px-1 pb-3 pt-2 text-[15px] font-semibold text-[var(--text)]">{t("chat.modelTitle")}</h2>
              {rows}
              <p className="px-1 py-3 text-[11.5px] text-[var(--text-subtle)]">{t("chat.modelNote")}</p>
            </motion.div>
          </div>
        ) : null}
      </AnimatePresence>
    );
  }

  return (
    <AnimatePresence>
      {open ? (
        <motion.div
          ref={panel}
          initial={reduceMotion ? { opacity: 0 } : { opacity: 0, y: 6, scale: 0.98 }}
          animate={{ opacity: 1, y: 0, scale: 1 }}
          exit={reduceMotion ? { opacity: 0 } : { opacity: 0, y: 6, scale: 0.98 }}
          transition={reduceMotion ? { duration: 0 } : { duration: 0.16, ease: "easeOut" }}
          className="glass-panel absolute bottom-full right-0 z-40 mb-2 w-80 p-3"
          role="dialog"
          aria-label={t("chat.modelTitle")}
        >
          <h2 className="px-1 pb-2 text-[13px] font-semibold uppercase tracking-wide text-[var(--text-subtle)]">
            {t("chat.modelTitle")}
          </h2>
          {rows}
          <p className="px-1 pt-2 text-[11.5px] text-[var(--text-subtle)]">{t("chat.modelNote")}</p>
        </motion.div>
      ) : null}
    </AnimatePresence>
  );
}