AI Chat with Model Selection

1'use client';
2 
3import {
4  IconAlertTriangle,
5  IconArrowUp,
6  IconCloud,
7  IconFileSpark,
8  IconGauge,
9  IconPhotoScan,
10} from '@tabler/icons-react';
11import { useRef, useState } from 'react';
12import { Button } from '@/components/ui/button';
13import {
14  Select,
15  SelectContent,
16  SelectItem,
17  SelectTrigger,
18  SelectValue,
19} from '@/components/ui/select';
20import { Textarea } from '@/components/ui/textarea';
21import { cn } from '@/lib/utils';
22 
23const PROMPTS = [
24  {
25    icon: IconFileSpark,
26    text: 'Write documentation',
27    prompt:
28      'Write comprehensive documentation for this codebase, including setup instructions, API references, and usage examples.',
29  },
30  {
31    icon: IconGauge,
32    text: 'Optimize performance',
33    prompt:
34      'Analyze the codebase for performance bottlenecks and suggest optimizations to improve loading times and runtime efficiency.',
35  },
36  {
37    icon: IconAlertTriangle,
38    text: 'Find and fix 3 bugs',
39    prompt:
40      'Scan through the codebase to identify and fix 3 critical bugs, providing detailed explanations for each fix.',
41  },
42];
43 
44const MODELS = [
45  {
46    value: 'gpt-5',
47    name: 'GPT-5',
48    description: 'Most advanced model',
49    max: true,
50  },
51  {
52    value: 'gpt-4o',
53    name: 'GPT-4o',
54    description: 'Fast and capable',
55  },
56  {
57    value: 'gpt-4',
58    name: 'GPT-4',
59    description: 'Reliable and accurate',
60  },
61  {
62    value: 'claude-3.5',
63    name: 'Claude 3.5 Sonnet',
64    description: 'Great for coding tasks',
65  },
66];
67 
68export default function Ai02() {
69  const [inputValue, setInputValue] = useState('');
70  const [selectedModel, setSelectedModel] = useState(MODELS[0]);
71  const inputRef = useRef<HTMLTextAreaElement>(null);
72 
73  const handlePromptClick = (prompt: string) => {
74    if (inputRef.current) {
75      inputRef.current.value = prompt;
76      setInputValue(prompt);
77      inputRef.current.focus();
78    }
79  };
80 
81  const handleModelChange = (value: string) => {
82    const model = MODELS.find((m) => m.value === value);
83    if (model) {
84      setSelectedModel(model);
85    }
86  };
87 
88  const renderMaxBadge = () => (
89    <div className="flex h-[14px] items-center gap-1.5 rounded border border-border px-1 py-0">
90      <span
91        className="font-bold text-[9px] uppercase"
92        style={{
93          background:
94            'linear-gradient(to right, rgb(129, 161, 193), rgb(125, 124, 155))',
95          WebkitBackgroundClip: 'text',
96          WebkitTextFillColor: 'transparent',
97        }}
98      >
99        MAX
100      </span>
101// … truncated