AI Settings Panel

1"use client";
2 
3import { Loader2, RotateCcw, Save, Settings, Trash2 } from "lucide-react";
4import { useCallback, useEffect, useMemo, useRef, useState } from "react";
5import { cn } from "@/lib/utils";
6import {
7  AlertDialog,
8  AlertDialogAction,
9  AlertDialogCancel,
10  AlertDialogContent,
11  AlertDialogDescription,
12  AlertDialogFooter,
13  AlertDialogHeader,
14  AlertDialogTitle,
15} from "@/registry/new-york/ui/alert-dialog";
16import { Badge } from "@/registry/new-york/ui/badge";
17import { Button } from "@/registry/new-york/ui/button";
18import {
19  Card,
20  CardContent,
21  CardDescription,
22  CardHeader,
23  CardTitle,
24} from "@/registry/new-york/ui/card";
25import {
26  Field,
27  FieldContent,
28  FieldDescription,
29  FieldLabel,
30} from "@/registry/new-york/ui/field";
31import {
32  InputGroup,
33  InputGroupInput,
34} from "@/registry/new-york/ui/input-group";
35import {
36  Select,
37  SelectContent,
38  SelectItem,
39  SelectTrigger,
40  SelectValue,
41} from "@/registry/new-york/ui/select";
42import { Separator } from "@/registry/new-york/ui/separator";
43import { Slider } from "@/registry/new-york/ui/slider";
44import { Textarea } from "@/registry/new-york/ui/textarea";
45 
46export interface AISettings {
47  temperature?: number;
48  maxTokens?: number;
49  topP?: number;
50  topK?: number;
51  frequencyPenalty?: number;
52  presencePenalty?: number;
53  systemPrompt?: string;
54  model?: string;
55}
56 
57export interface AISettingsPreset {
58  id: string;
59  name: string;
60  description?: string;
61  settings: AISettings;
62}
63 
64export interface AISettingsPanelProps {
65  settings?: AISettings;
66  presets?: AISettingsPreset[];
67  onSettingsChange?: (settings: AISettings) => void;
68  onSave?: (settings: AISettings) => Promise<void>;
69  onReset?: () => void;
70  onLoadPreset?: (presetId: string) => void;
71  onSavePreset?: (name: string, settings: AISettings) => Promise<void>;
72  onDeletePreset?: (presetId: string) => Promise<void>;
73  className?: string;
74  showAdvanced?: boolean;
75  availableModels?: string[];
76}
77 
78const defaultSettings: AISettings = {
79  temperature: 0.7,
80  maxTokens: 2000,
81  topP: 1.0,
82  topK: 40,
83  frequencyPenalty: 0.0,
84  presencePenalty: 0.0,
85  systemPrompt: "",
86  model: "gpt-4",
87};
88 
89function getTemperatureLabel(temperature: number): string {
90  if (temperature === 0) return "Deterministic";
91  if (temperature < 0.5) return "Focused";
92  if (temperature < 1.0) return "Balanced";
93  return "Creative";
94}
95 
96interface SettingsHeaderProps {
97  hasChanges: boolean;
98  isSaving: boolean;
99  onReset?: () => void;
100  onSave?: () => void;
101}
102 
103// … truncated