Model Selector

1"use client";
2 
3import * as React from "react";
4import {
5  Tick02Icon,
6  ArrowDown01Icon,
7  ArrowRight01Icon,
8  SquareLock01Icon,
9  Search01Icon,
10} from "@hugeicons/core-free-icons";
11import { HugeiconsIcon } from "@hugeicons/react";
12import { cva, type VariantProps } from "class-variance-authority";
13import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
14 
15import { cn } from "@/lib/utils";
16 
17const triggerVariants = cva(
18  "inline-flex h-8 cursor-pointer items-center gap-1 rounded-full px-3 font-normal text-primary text-sm outline-none transition-all duration-200 ease-out [&>span:last-child]:transition-transform [&>span:last-child]:duration-200 data-[state=open]:[&>span:last-child]:rotate-180",
19  {
20    variants: {
21      variant: {
22        filled:
23          "bg-muted hover:bg-border",
24        outline:
25          "border border-input bg-transparent hover:bg-muted data-[state=open]:bg-transparent",
26        ghost:
27          "bg-transparent hover:bg-muted data-[state=open]:bg-transparent",
28      },
29    },
30    defaultVariants: {
31      variant: "filled",
32    },
33  },
34);
35 
36export type ModelItemData = {
37  icon?: React.ComponentType<{ className?: string }>;
38  title: string;
39  description?: string;
40};
41 
42function matchesModelItemFilter(
43  filterQuery: string,
44  fields: {
45    value?: string;
46    title?: string | null;
47    description?: string | null;
48  },
49) {
50  const q = filterQuery.trim().toLowerCase();
51  if (!q) return true;
52  if (fields.value != null && fields.value.toLowerCase().includes(q)) {
53    return true;
54  }
55  if (fields.title?.toLowerCase().includes(q)) return true;
56  if (fields.description?.toLowerCase().includes(q)) return true;
57  return false;
58}
59 
60const ModelSelectorContext = React.createContext<{
61  value: string;
62  onValueChange: (value: string) => void;
63  items: Map<string, ModelItemData>;
64  filterQuery: string;
65  setFilterQuery: (query: string) => void;
66} | null>(null);
67 
68function useModelSelectorContext() {
69  const ctx = React.useContext(ModelSelectorContext);
70  if (!ctx) {
71    throw new Error(
72      "ModelSelector components must be used within ModelSelector",
73    );
74  }
75  return ctx;
76}
77 
78function ModelSelector({
79  value,
80  onValueChange,
81  items: itemsProp,
82  children,
83  onOpenChange,
84  ...props
85}: Omit<
86  React.ComponentProps<typeof DropdownMenuPrimitive.Root>,
87  "value" | "onValueChange"
88> & {
89  value: string;
90  onValueChange: (value: string) => void;
91  items?: Array<{ value: string } & ModelItemData>;
92}) {
93  const items = React.useMemo(() => {
94// … truncated