Aurora AI Model Selector

1"use client"
2 
3import * as React from "react"
4import { Cpu } from "lucide-react"
5 
6import { cn } from "@/lib/utils"
7import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/registry/aurora/ui/select"
8 
9export interface ModelSelectorProps extends React.HTMLAttributes<HTMLDivElement> {
10  models: string[]
11  value?: string
12  defaultValue?: string
13  onValueChange?: (value: string) => void
14  label?: string
15  description?: string
16  name?: string
17  disabled?: boolean
18  required?: boolean
19  triggerId?: string
20  triggerLabel?: string
21  placeholder?: string
22}
23 
24const ModelSelector = (
25    { ref,
26      models,
27      value,
28      defaultValue,
29      onValueChange,
30      label = "Model",
31      description = "Select a model for this conversation.",
32      name,
33      disabled,
34      required,
35      triggerId,
36      triggerLabel,
37      placeholder,
38      className,
39      style,
40      ...props
41    }: ModelSelectorProps & { ref?: React.Ref<HTMLDivElement> }
42  ) => {
43    const reactId = React.useId()
44    const descriptionId = description ? `${reactId}-description` : undefined
45    const fallbackValue = models[0]
46 
47    return (
48    <div
49      ref={ref}
50      className={cn("grid gap-3 border p-3", className)}
51      style={{
52        background: "var(--aurora-surface-raised)",
53        borderColor: "var(--aurora-border-strong)",
54        borderRadius: "var(--aurora-radius-1)",
55        boxShadow: "var(--aurora-shadow-medium), var(--aurora-highlight-medium)",
56        ...style,
57      }}
58      {...props}
59    >
60      <div className="grid gap-1">
61        <div
62          className="flex items-center gap-2 aurora-text-label"
63          style={{ color: "var(--axon-orange)", fontWeight: "var(--aurora-weight-heading)" }}
64        >
65          <Cpu className="size-3.5" aria-hidden style={{ color: "var(--axon-orange)" }} />
66          {label}
67        </div>
68        <p id={descriptionId} className="aurora-text-meta" style={{ margin: 0 }}>
69          {description}
70        </p>
71      </div>
72      <Select
73        value={value}
74        defaultValue={defaultValue ?? fallbackValue}
75        onValueChange={onValueChange}
76        name={name}
77        disabled={disabled || models.length === 0}
78        required={required}
79      >
80        <SelectTrigger
81          id={triggerId}
82          aria-label={triggerLabel ?? label}
83          aria-describedby={descriptionId}
84          className="h-10 rounded-[10px]"
85        >
86// … truncated