AI Chat Compact Interface

1'use client';
2 
3import {
4  IconBolt,
5  IconChevronDown,
6  IconCircle,
7  IconCircleDashed,
8  IconCloud,
9  IconCode,
10  IconDeviceLaptop,
11  IconHistory,
12  IconPaperclip,
13  IconPlus,
14  IconProgress,
15  IconRobot,
16  IconSend,
17  IconUser,
18  IconWand,
19  IconWorld,
20} from '@tabler/icons-react';
21import { useRef, useState } from 'react';
22import { Button } from '@/components/ui/button';
23import {
24  DropdownMenu,
25  DropdownMenuContent,
26  DropdownMenuGroup,
27  DropdownMenuItem,
28  DropdownMenuTrigger,
29} from '@/components/ui/dropdown-menu';
30import { Textarea } from '@/components/ui/textarea';
31import { cn } from '@/lib/utils';
32 
33export default function Ai03() {
34  const [input, setInput] = useState('');
35  const [selectedModel, setSelectedModel] = useState('Local');
36  const [selectedAgent, setSelectedAgent] = useState('Agent');
37  const [selectedPerformance, setSelectedPerformance] = useState('High');
38  const [autoMode, setAutoMode] = useState(false);
39  const fileInputRef = useRef<HTMLInputElement>(null);
40 
41  const handleSubmit = (e: React.FormEvent) => {
42    e.preventDefault();
43    if (input.trim()) {
44    }
45  };
46 
47  return (
48    <div className="w-xl">
49      <div className="overflow-hidden rounded-2xl border border-border bg-background">
50        <input
51          className="sr-only"
52          multiple
53          onChange={(e) => {}}
54          ref={fileInputRef}
55          type="file"
56        />
57 
58        <div className="grow px-3 pt-3 pb-2">
59          <form onSubmit={handleSubmit}>
60            <Textarea
61              className="max-h-[25vh] min-h-10 w-full resize-none border-0 border-none bg-transparent! p-0 text-foreground text-sm placeholder-muted-foreground shadow-none outline-none focus-visible:ring-0 focus-visible:ring-offset-0"
62              onChange={(e) => setInput(e.target.value)}
63              onInput={(e) => {
64                const target = e.target as HTMLTextAreaElement;
65                target.style.height = 'auto';
66                target.style.height = target.scrollHeight + 'px';
67              }}
68              placeholder="Ask anything"
69              rows={1}
70              value={input}
71            />
72          </form>
73        </div>
74 
75        <div className="mb-2 flex items-center justify-between px-2">
76          <div className="flex items-center gap-1">
77            <DropdownMenu>
78              <DropdownMenuTrigger
79                render={
80                  <Button
81                    className="h-7 w-7 rounded-full border border-border p-0 hover:bg-accent"
82// … truncated