import { type ProviderKind, type ServerProvider } from "@t3tools/contracts";import { memo } from "react";import { Clock3Icon, SparklesIcon, StarIcon } from "lucide-react";import { Gemini, GithubCopilotIcon } from "../Icons";import { AVAILABLE_PROVIDER_OPTIONS, PROVIDER_ICON_BY_PROVIDER } from "./providerIconUtils";import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";import { cn } from "~/lib/utils";import { getProviderSnapshot } from "../../providerModels"; function describeUnavailableProvider(label: string, live: ServerProvider | undefined): string {  if (!live) {    return `${label} — waiting for provider status…`;  }  if (live.status === "ready") {    return label;  }  const kind =    live.status === "error"      ? "Unavailable"      : live.status === "warning"        ? "Limited"        : live.status === "disabled"          ? "Disabled in settings"          : "Not ready";  const msg = live.message?.trim();  return msg ? `${label} — ${kind}. ${msg}` : `${label} — ${kind}.`;} const SELECTED_BUTTON_CLASS = "bg-background text-foreground shadow-sm";const SELECTED_INDICATOR_CLASS =  "pointer-events-none absolute -right-1 top-1/2 z-10 h-5 w-0.5 -translate-y-1/2 rounded-l-full bg-primary";const BADGE_BASE_CLASS =  "pointer-events-none absolute -right-0.5 top-0.5 z-10 flex size-3.5 items-center justify-center rounded-full bg-transparent shadow-sm ";const NEW_BADGE_CLASS = `${BADGE_BASE_CLASS} text-amber-600  dark:text-amber-300 `;const SOON_BADGE_CLASS = `${BADGE_BASE_CLASS} text-muted-foreground `; /** Opens toward the rail so the list stays readable (not over the model names). */const PICKER_TOOLTIP_SIDE = "left" as const;const PICKER_TOOLTIP_CLASS = "max-w-64 text-balance font-normal leading-snug"; export const ModelPickerSidebar = memo(function ModelPickerSidebar(props: {  selectedProvider: ProviderKind | "favorites";  onSelectProvider: (provider: ProviderKind | "favorites") => void;  providers?: ReadonlyArray<ServerProvider>;}) {  const handleProviderClick = (provider: ProviderKind | "favorites") => {    props.onSelectProvider(provider);  };   return (    <div className="flex flex-col w-12 border-r bg-muted/30  p-1 overflow-y-auto gap-1">      {/* Favorites section */}      <div className="pb-1 mb-1 border-b">        <div className="relative w-full">          {props.selectedProvider === "favorites" && <div className={SELECTED_INDICATOR_CLASS} />}          <Tooltip>            <TooltipTrigger              render={                <button                  className={cn(                    "relative isolate flex w-full cursor-pointer aspect-square items-center justify-center rounded transition-colors hover:bg-muted",                    props.selectedProvider === "favorites" && SELECTED_BUTTON_CLASS,                  )}                  onClick={() => handleProviderClick("favorites")}                  type="button"                  data-model-picker-provider="favorites"                  aria-label="Favorites"                >                  <StarIcon className="size-5 fill-current shrink-0" aria-hidden />                </button>              }            />            <TooltipPopup              side={PICKER_TOOLTIP_SIDE}              align="center"              className={PICKER_TOOLTIP_CLASS}            >              Favorites            </TooltipPopup>          </Tooltip>        </div>      </div>       {/* Provider buttons */}      {AVAILABLE_PROVIDER_OPTIONS.map((option) => {        const OptionIcon = PROVIDER_ICON_BY_PROVIDER[option.value];        const liveProvider = props.providers          ? getProviderSnapshot(props.providers, option.value)          : undefined;         const isDisabled = !liveProvider || liveProvider.status !== "ready";        const isSelected = props.selectedProvider === option.value;        const badge = option.pickerSidebarBadge;         const providerTooltip = isDisabled          ? describeUnavailableProvider(option.label, liveProvider)          : badge === "new"            ? `${option.label} — New`            : option.label;         const button = (          <button            data-model-picker-provider={option.value}            className={cn(              "relative isolate flex w-full cursor-pointer aspect-square items-center justify-center rounded transition-colors hover:bg-muted",              isSelected && SELECTED_BUTTON_CLASS,              isDisabled && "opacity-50 cursor-not-allowed hover:bg-transparent",            )}            onClick={() => !isDisabled && handleProviderClick(option.value)}            disabled={isDisabled}            type="button"            aria-label={              isDisabled                ? (providerTooltip ?? option.label)                : badge === "new"                  ? `${option.label}, new`                  : option.label            }          >            <OptionIcon className="size-5 shrink-0" aria-hidden />            {badge === "new" ? (              <span className={NEW_BADGE_CLASS} aria-hidden>                <SparklesIcon className="size-2" />              </span>            ) : badge === "soon" ? (              <span className={SOON_BADGE_CLASS} aria-hidden>                <Clock3Icon className="size-2" />              </span>            ) : null}          </button>        );         const trigger = isDisabled ? (          <span className="relative block w-full">{button}</span>        ) : (          button        );         return (          <div key={option.value} className="relative w-full">            {isSelected && <div className={SELECTED_INDICATOR_CLASS} />}            <Tooltip>              <TooltipTrigger render={trigger} />              <TooltipPopup                side={PICKER_TOOLTIP_SIDE}                align="center"                className={PICKER_TOOLTIP_CLASS}              >                {providerTooltip}              </TooltipPopup>            </Tooltip>          </div>        );      })}       {/* Gemini button (coming soon) */}      <Tooltip>        <TooltipTrigger          render={            <span className="relative block w-full">              <button                className={cn(                  "relative isolate flex w-full aspect-square items-center justify-center rounded opacity-50 cursor-not-allowed transition-colors hover:bg-transparent",                )}                disabled                type="button"                data-model-picker-provider="gemini-coming-soon"                aria-label="Gemini — coming soon"              >                <Gemini className="size-5 text-muted-foreground/85" aria-hidden />                <span className={SOON_BADGE_CLASS} aria-hidden>                  <Clock3Icon className="size-2" />                </span>              </button>            </span>          }        />        <TooltipPopup side={PICKER_TOOLTIP_SIDE} align="center" className={PICKER_TOOLTIP_CLASS}>          Gemini — Coming soon        </TooltipPopup>      </Tooltip>      {/* Github Copilot button (coming soon) */}      <Tooltip>        <TooltipTrigger          render={            <span className="relative block w-full">              <button                className={cn(                  "relative isolate flex w-full aspect-square items-center justify-center rounded opacity-50 cursor-not-allowed transition-colors hover:bg-transparent",                )}                disabled                type="button"                data-model-picker-provider="github-copilot-coming-soon"                aria-label="Github Copilot — coming soon"              >                <GithubCopilotIcon className="size-5 text-muted-foreground/85" aria-hidden />                <span className={SOON_BADGE_CLASS} aria-hidden>                  <Clock3Icon className="size-2" />                </span>              </button>            </span>          }        />        <TooltipPopup side={PICKER_TOOLTIP_SIDE} align="center" className={PICKER_TOOLTIP_CLASS}>          Github Copilot — Coming soon        </TooltipPopup>      </Tooltip>    </div>  );});