Installation
npx shadcn@latest add selectSource Code
ai-input-textarea.tsx
1import React, { useState } from 'react'
2import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
3
4const ClaudeIcon = ({ className = "" }) => (
5 <svg className={className} preserveAspectRatio="xMidYMid" viewBox="0 0 256 257" fill="currentColor">
6 <path d="m50.228 170.321 50.357-28.257.843-2.463-.843-1.361h-2.462l-8.426-.518-28.775-.778-24.952-1.037-24.175-1.296-6.092-1.297L0 125.796l.583-3.759 5.12-3.434 7.324.648 16.202 1.101 24.304 1.685 17.629 1.037 26.118 2.722h4.148l.583-1.685-1.426-1.037-1.101-1.037-25.147-17.045-27.22-18.017-14.258-10.37-7.713-5.25-3.888-4.925-1.685-10.758 7-7.713 9.397.649 2.398.648 9.527 7.323 20.35 15.75L94.817 91.9l3.889 3.24 1.555-1.102.195-.777-1.75-2.917-14.453-26.118-15.425-26.572-6.87-11.018-1.814-6.61c-.648-2.723-1.102-4.991-1.102-7.778l7.972-10.823L71.42 0 82.05 1.426l4.472 3.888 6.61 15.101 10.694 23.786 16.591 32.34 4.861 9.592 2.592 8.879.973 2.722h1.685v-1.556l1.36-18.211 2.528-22.36 2.463-28.776.843-8.1 4.018-9.722 7.971-5.25 6.222 2.981 5.12 7.324-.713 4.73-3.046 19.768-5.962 30.98-3.889 20.739h2.268l2.593-2.593 10.499-13.934 17.628-22.036 7.778-8.749 9.073-9.657 5.833-4.601h11.018l8.1 12.055-3.628 12.443-11.342 14.388-9.398 12.184-13.48 18.147-8.426 14.518.778 1.166 2.01-.194 30.46-6.481 16.462-2.982 19.637-3.37 8.88 4.148.971 4.213-3.5 8.62-20.998 5.184-24.628 4.926-36.682 8.685-.454.324.519.648 16.526 1.555 7.065.389h17.304l32.21 2.398 8.426 5.574 5.055 6.805-.843 5.184-12.962 6.611-17.498-4.148-40.83-9.721-14-3.5h-1.944v1.167l11.666 11.406 21.387 19.314 26.767 24.887 1.36 6.157-3.434 4.86-3.63-.518-23.526-17.693-9.073-7.972-20.545-17.304h-1.36v1.814l4.73 6.935 25.017 37.59 1.296 11.536-1.814 3.76-6.481 2.268-7.13-1.297-14.647-20.544-15.1-23.138-12.185-20.739-1.49.843-7.194 77.448-3.37 3.953-7.778 2.981-6.48-4.925-3.436-7.972 3.435-15.749 4.148-20.544 3.37-16.333 3.046-20.285 1.815-6.74-.13-.454-1.49.194-15.295 20.999-23.267 31.433-18.406 19.702-4.407 1.75-7.648-3.954.713-7.064 4.277-6.286 25.47-32.405 15.36-20.092 9.917-11.6-.065-1.686h-.583L44.07 198.125l-12.055 1.555-5.185-4.86.648-7.972 2.463-2.593 20.35-13.999-.064.065Z" />
7 </svg>
8)
9
10const OpenAIIcon = ({ className = "" }) => (
11 <svg className={className} preserveAspectRatio="xMidYMid" viewBox="0 0 256 260" fill="currentColor">
12 <path d="M239.184 106.203a64.716 64.716 0 0 0-5.576-53.103C219.452 28.459 191 15.784 163.213 21.74A65.586 65.586 0 0 0 52.096 45.22a64.716 64.716 0 0 0-43.23 31.36c-14.31 24.602-11.061 55.634 8.033 76.74a64.665 64.665 0 0 0 5.525 53.102c14.174 24.65 42.644 37.324 70.446 31.36a64.72 64.72 0 0 0 48.754 21.744c28.481.025 53.714-18.361 62.414-45.481a64.767 64.767 0 0 0 43.229-31.36c14.137-24.558 10.875-55.423-8.083-76.483Zm-97.56 136.338a48.397 48.397 0 0 1-31.105-11.255l1.535-.87 51.67-29.825a8.595 8.595 0 0 0 4.247-7.367v-72.85l21.845 12.636c.218.111.37.32.409.563v60.367c-.056 26.818-21.783 48.545-48.601 48.601Zm-104.466-44.61a48.345 48.345 0 0 1-5.781-32.589l1.534.921 51.722 29.826a8.339 8.339 0 0 0 8.441 0l63.181-36.425v25.221a.87.87 0 0 1-.358.665l-52.335 30.184c-23.257 13.398-52.97 5.431-66.404-17.803ZM23.549 85.38a48.499 48.499 0 0 1 25.58-21.333v61.39a8.288 8.288 0 0 0 4.195 7.316l62.874 36.272-21.845 12.636a.819.819 0 0 1-.767 0L41.353 151.53c-23.211-13.454-31.171-43.144-17.804-66.405v.256Zm179.466 41.695-63.08-36.63L161.73 77.86a.819.819 0 0 1 .768 0l52.233 30.184a48.6 48.6 0 0 1-7.316 87.635v-61.391a8.544 8.544 0 0 0-4.4-7.213Zm21.742-32.69-1.535-.922-51.619-30.081a8.39 8.39 0 0 0-8.492 0L99.98 99.808V74.587a.716.716 0 0 1 .307-.665l52.233-30.133a48.652 48.652 0 0 1 72.236 50.391v.205ZM88.061 139.097l-21.845-12.585a.87.87 0 0 1-.41-.614V65.685a48.652 48.652 0 0 1 79.757-37.346l-1.535.87-51.67 29.825a8.595 8.595 0 0 0-4.246 7.367l-.051 72.697Zm11.868-25.58 28.138-16.217 28.188 16.218v32.434l-28.086 16.218-28.188-16.218-.052-32.434Z" />
13 </svg>
14)
15
16const AIInputTextarea = () => {
17 const [selectedModel, setSelectedModel] = useState('sonnet-4-5')
18
19 return (
20 <div className='w-full max-w-screen h-screen flex items-center justify-center p-4 font-inter'>
21 <div className='bg-[#F7F7F7] p-1 w-full max-w-4xl rounded-4xl shadow-xl border border-gray-200/60 mx-auto'>
22 <div className='bg-white p-4 rounded-4xl border border-gray-200/60'>
23 <textarea
24 className='w-full h-28 p-3 outline-none resize-none placeholder:font-medium'
25 placeholder='Type your message here...'
26 />
27 <div className='flex justify-between items-center mt-2'>
28 <div className='flex items-center gap-2'>
29 <button className='p-2 bg-primary shadow-sm rounded-2xl transition-transform duration-150 ease-in-out active:scale-95 cursor-pointer size-9 flex items-center justify-center'>
30 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#fff">
31 <g clipPath="url(#clip0_4418_6669)">
32 <path d="M12.33 21.3404C11.24 21.3404 10.15 20.9304 9.32004 20.1004C7.66004 18.4404 7.66004 15.7504 9.32004 14.0904L11.8 11.6204C12.09 11.3304 12.57 11.3304 12.86 11.6204C13.15 11.9104 13.15 12.3904 12.86 12.6804L10.38 15.1504C9.31004 16.2204 9.31004 17.9704 10.38 19.0404C11.45 20.1104 13.2 20.1104 14.27 19.0404L18.16 15.1504C19.34 13.9704 19.99 12.4004 19.99 10.7304C19.99 9.06035 19.34 7.49035 18.16 6.31035C15.72 3.87035 11.76 3.87035 9.32004 6.31035L5.08004 10.5504C4.09004 11.5404 3.54004 12.8604 3.54004 14.2604C3.54004 15.6604 4.09004 16.9804 5.08004 17.9704C5.37004 18.2604 5.37004 18.7404 5.08004 19.0304C4.79004 19.3204 4.31004 19.3204 4.02004 19.0304C2.75004 17.7504 2.04004 16.0604 2.04004 14.2604C2.04004 12.4604 2.74004 10.7604 4.02004 9.49035L8.26004 5.25035C11.28 2.23035 16.2 2.23035 19.22 5.25035C20.68 6.71035 21.49 8.66035 21.49 10.7304C21.49 12.8004 20.68 14.7504 19.22 16.2104L15.33 20.1004C14.5 20.9304 13.42 21.3404 12.33 21.3404Z" fill="white" />
33 </g>
34 <defs>
35 <clipPath id="clip0_4418_6669)">
36 <rect width="24" height="24" fill="white" />
37 </clipPath>
38 </defs>
39 </svg>
40 </button>
41 <Select value={selectedModel} onValueChange={setSelectedModel}>
42 <SelectTrigger className="w-[180px] h-9 border-gray-200 rounded-2xl">
43 <div className="flex items-center gap-2">
44 <SelectValue />
45 </div>
46 </SelectTrigger>
47 <SelectContent>
48 <SelectItem value="gpt-5" className='rounded-2xl'>
49 <div className="flex items-center gap-2">
50 <OpenAIIcon className="w-4 h-4" />
51 <span>GPT 5</span>
52 </div>
53 </SelectItem>
54 <SelectItem value="codex" className='rounded-2xl'>
55 <div className="flex items-center gap-2">
56 <OpenAIIcon className="w-4 h-4" />
57 <span>Codex</span>
58 </div>
59 </SelectItem>
60 <SelectItem value="sonnet-4-5" className='rounded-2xl'>
61 <div className="flex items-center gap-2">
62 <ClaudeIcon className="w-4 h-4" />
63 <span>Sonnet 4.5</span>
64 </div>
65 </SelectItem>
66 </SelectContent>
67 </Select>
68 </div>
69 <button className='p-2 bg-primary shadow-sm rounded-2xl transition-transform duration-150 ease-in-out active:scale-95 cursor-pointer size-9 flex items-center justify-center'>
70 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#fff">
71 <g clipPath="url(#clip0_4418_8610)">
72 <path d="M16.1401 2.95907L7.11012 5.95907C1.04012 7.98907 1.04012 11.2991 7.11012 13.3191L9.79012 14.2091L10.6801 16.8891C12.7001 22.9591 16.0201 22.9591 18.0401 16.8891L21.0501 7.86907C22.3901 3.81907 20.1901 1.60907 16.1401 2.95907ZM16.4601 8.33907L12.6601 12.1591C12.5101 12.3091 12.3201 12.3791 12.1301 12.3791C11.9401 12.3791 11.7501 12.3091 11.6001 12.1591C11.3101 11.8691 11.3101 11.3891 11.6001 11.0991L15.4001 7.27907C15.6901 6.98907 16.1701 6.98907 16.4601 7.27907C16.7501 7.56907 16.7501 8.04907 16.4601 8.33907Z" fill="white" />
73 </g>
74 <defs>
75 <clipPath id="clip0_4418_8610)">
76 <rect width="24" height="24" fill="white" />
77 </clipPath>
78 </defs>
79 </svg>
80 </button>
81 </div>
82 </div>
83 </div>
84 </div>
85 )
86}
87
88export default AIInputTextarea
