|
| 1 | +"use client" |
| 2 | + |
| 3 | +import { cn } from "@lib/utils" |
| 4 | +import { Loader2, Lock } from "lucide-react" |
| 5 | +import { useMemo, useState } from "react" |
| 6 | +import { |
| 7 | + Select, |
| 8 | + SelectContent, |
| 9 | + SelectItem, |
| 10 | + SelectTrigger, |
| 11 | + SelectValue, |
| 12 | +} from "@ui/components/select" |
| 13 | +import { |
| 14 | + type BrainModelRole, |
| 15 | + useBrainModels, |
| 16 | + useUpdateBrainModels, |
| 17 | +} from "@/hooks/use-brain-models" |
| 18 | +import { useHasCompanyBrain } from "@/hooks/use-company-brain" |
| 19 | +import { useOrgMemberRole } from "@/hooks/use-org-member-role" |
| 20 | +import { dmSans125ClassName } from "@/lib/fonts" |
| 21 | + |
| 22 | +const MODEL_LABELS: Record<string, string> = { |
| 23 | + "claude-sonnet-5": "Sonnet 5", |
| 24 | + "claude-opus-4.8": "Opus 4.8", |
| 25 | + "claude-sonnet-4.6": "Sonnet 4.6", |
| 26 | + "claude-haiku-4.5": "Haiku 4.5", |
| 27 | + "grok-4.5": "Grok 4.5", |
| 28 | + "grok-4.3": "Grok 4.3", |
| 29 | + "grok-4-fast": "Grok 4 Fast", |
| 30 | + "gpt-5.6": "GPT-5.6", |
| 31 | + "gpt-5.5": "GPT-5.5", |
| 32 | +} |
| 33 | + |
| 34 | +const labelFor = (id: string) => MODEL_LABELS[id] ?? id |
| 35 | + |
| 36 | +const ROWS: { role: BrainModelRole; title: string; help: string }[] = [ |
| 37 | + { |
| 38 | + role: "main", |
| 39 | + title: "Main model", |
| 40 | + help: "Reasoning, tool use, and the final Slack answer.", |
| 41 | + }, |
| 42 | + { |
| 43 | + role: "triage", |
| 44 | + title: "Triage model", |
| 45 | + help: "Decides whether and how the brain replies to a message.", |
| 46 | + }, |
| 47 | + { |
| 48 | + role: "research", |
| 49 | + title: "Research model", |
| 50 | + help: "Grounded web research during company research.", |
| 51 | + }, |
| 52 | +] |
| 53 | + |
| 54 | +const controlClass = cn( |
| 55 | + dmSans125ClassName(), |
| 56 | + "h-9 w-full rounded-[10px] border border-white/[0.08] bg-[#0D0F14] px-3 text-[13px] text-[#FAFAFA] outline-none disabled:opacity-50", |
| 57 | +) |
| 58 | +const selectContentClass = cn( |
| 59 | + dmSans125ClassName(), |
| 60 | + "rounded-[10px] border-white/[0.08] bg-[#1B1F24] text-[#FAFAFA] shadow-[0px_8px_24px_rgba(0,0,0,0.5)]", |
| 61 | +) |
| 62 | +const selectItemClass = |
| 63 | + "cursor-pointer rounded-[8px] text-[13px] text-[#FAFAFA] hover:bg-white/10 hover:text-white data-[highlighted]:bg-white/10 data-[highlighted]:text-white focus:bg-white/10 focus:text-white" |
| 64 | + |
| 65 | +function SectionTitle({ children }: { children: React.ReactNode }) { |
| 66 | + return ( |
| 67 | + <p |
| 68 | + className={cn( |
| 69 | + dmSans125ClassName(), |
| 70 | + "font-semibold text-[14px] tracking-[-0.14px] text-[#FAFAFA]", |
| 71 | + )} |
| 72 | + > |
| 73 | + {children} |
| 74 | + </p> |
| 75 | + ) |
| 76 | +} |
| 77 | + |
| 78 | +export default function CompanyBrainModels() { |
| 79 | + const isCompanyBrain = useHasCompanyBrain() |
| 80 | + const { isAdmin } = useOrgMemberRole(isCompanyBrain) |
| 81 | + |
| 82 | + const modelsQuery = useBrainModels(isCompanyBrain) |
| 83 | + const update = useUpdateBrainModels() |
| 84 | + |
| 85 | + const [draft, setDraft] = useState<Partial<Record<BrainModelRole, string>>>( |
| 86 | + {}, |
| 87 | + ) |
| 88 | + |
| 89 | + const resolved = modelsQuery.data?.resolved |
| 90 | + const defaults = modelsQuery.data?.defaults |
| 91 | + const choices = modelsQuery.data?.choices |
| 92 | + |
| 93 | + const valueFor = (role: BrainModelRole): string => |
| 94 | + draft[role] ?? resolved?.[role] ?? "" |
| 95 | + |
| 96 | + const dirty = useMemo(() => { |
| 97 | + if (!resolved) return false |
| 98 | + return ROWS.some( |
| 99 | + ({ role }) => draft[role] && draft[role] !== resolved[role], |
| 100 | + ) |
| 101 | + }, [draft, resolved]) |
| 102 | + |
| 103 | + if (!isCompanyBrain) return null |
| 104 | + |
| 105 | + const disabled = !isAdmin || modelsQuery.isLoading || update.isPending |
| 106 | + |
| 107 | + return ( |
| 108 | + <section className="flex flex-col gap-4 px-1"> |
| 109 | + <div className="flex flex-col gap-0.5"> |
| 110 | + <SectionTitle>Models</SectionTitle> |
| 111 | + <span |
| 112 | + className={cn(dmSans125ClassName(), "text-[12px] text-[#9A9A9A]")} |
| 113 | + > |
| 114 | + Choose which models Company Brain uses. Applies to this organization |
| 115 | + only. |
| 116 | + </span> |
| 117 | + </div> |
| 118 | + |
| 119 | + {modelsQuery.isLoading ? ( |
| 120 | + <div className="flex items-center gap-2 text-[13px] text-[#9A9A9A]"> |
| 121 | + <Loader2 className="size-4 animate-spin" /> |
| 122 | + Loading models… |
| 123 | + </div> |
| 124 | + ) : modelsQuery.isError ? ( |
| 125 | + <p className={cn(dmSans125ClassName(), "text-[13px] text-red-400")}> |
| 126 | + Couldn't load models. |
| 127 | + </p> |
| 128 | + ) : ( |
| 129 | + <div className="flex flex-col gap-4"> |
| 130 | + {ROWS.map(({ role, title, help }) => { |
| 131 | + const options = choices?.[role] ?? [] |
| 132 | + const current = valueFor(role) |
| 133 | + return ( |
| 134 | + <div key={role} className="flex flex-col gap-1.5"> |
| 135 | + <div className="flex items-center justify-between gap-3"> |
| 136 | + <span |
| 137 | + className={cn( |
| 138 | + dmSans125ClassName(), |
| 139 | + "text-[13px] font-medium text-[#FAFAFA]", |
| 140 | + )} |
| 141 | + > |
| 142 | + {title} |
| 143 | + </span> |
| 144 | + {defaults?.[role] === current ? ( |
| 145 | + <span |
| 146 | + className={cn( |
| 147 | + dmSans125ClassName(), |
| 148 | + "text-[11px] text-[#737373]", |
| 149 | + )} |
| 150 | + > |
| 151 | + Default |
| 152 | + </span> |
| 153 | + ) : null} |
| 154 | + </div> |
| 155 | + <Select |
| 156 | + value={current} |
| 157 | + disabled={disabled} |
| 158 | + onValueChange={(v) => setDraft((d) => ({ ...d, [role]: v }))} |
| 159 | + > |
| 160 | + <SelectTrigger className={controlClass}> |
| 161 | + <SelectValue placeholder="Select a model…" /> |
| 162 | + </SelectTrigger> |
| 163 | + <SelectContent className={selectContentClass}> |
| 164 | + {options.map((id) => ( |
| 165 | + <SelectItem |
| 166 | + key={id} |
| 167 | + value={id} |
| 168 | + className={selectItemClass} |
| 169 | + > |
| 170 | + {labelFor(id)} |
| 171 | + {defaults?.[role] === id ? " (default)" : ""} |
| 172 | + </SelectItem> |
| 173 | + ))} |
| 174 | + </SelectContent> |
| 175 | + </Select> |
| 176 | + <span |
| 177 | + className={cn( |
| 178 | + dmSans125ClassName(), |
| 179 | + "text-[12px] text-[#9A9A9A]", |
| 180 | + )} |
| 181 | + > |
| 182 | + {help} |
| 183 | + </span> |
| 184 | + </div> |
| 185 | + ) |
| 186 | + })} |
| 187 | + |
| 188 | + {!isAdmin ? ( |
| 189 | + <div className="flex items-center gap-1.5 text-[12px] text-[#737373]"> |
| 190 | + <Lock className="size-3.5" /> |
| 191 | + Only organization admins can change these. |
| 192 | + </div> |
| 193 | + ) : ( |
| 194 | + <div className="flex justify-end"> |
| 195 | + <button |
| 196 | + type="button" |
| 197 | + disabled={disabled || !dirty} |
| 198 | + onClick={() => { |
| 199 | + const patch: Partial<Record<BrainModelRole, string>> = {} |
| 200 | + for (const { role } of ROWS) { |
| 201 | + if (draft[role] && draft[role] !== resolved?.[role]) { |
| 202 | + patch[role] = draft[role] |
| 203 | + } |
| 204 | + } |
| 205 | + update.mutate(patch, { onSuccess: () => setDraft({}) }) |
| 206 | + }} |
| 207 | + className={cn( |
| 208 | + dmSans125ClassName(), |
| 209 | + "inline-flex h-8 items-center gap-1.5 rounded-full bg-white px-4 text-[12px] font-medium text-black transition-opacity hover:opacity-90 disabled:opacity-40", |
| 210 | + )} |
| 211 | + > |
| 212 | + {update.isPending ? ( |
| 213 | + <Loader2 className="size-3.5 animate-spin" /> |
| 214 | + ) : null} |
| 215 | + Save |
| 216 | + </button> |
| 217 | + </div> |
| 218 | + )} |
| 219 | + </div> |
| 220 | + )} |
| 221 | + </section> |
| 222 | + ) |
| 223 | +} |
0 commit comments