'use client'; import { IconMicrophone, IconPaperclip, IconPlus, IconSearch, IconSend, IconSparkles, IconWaveSine, } from '@tabler/icons-react'; import type React from 'react'; import { useRef, useState } from 'react'; import { Button } from '@/components/ui/button'; import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu'; import { Textarea } from '@/components/ui/textarea'; import { cn } from '@/lib/utils'; export default function Ai01() { const [message, setMessage] = useState(''); const [isExpanded, setIsExpanded] = useState(false); const textareaRef = useRef(null); const fileInputRef = useRef(null); const send = () => { if (!message.trim()) { return; } setMessage(''); setIsExpanded(false); if (textareaRef.current) { textareaRef.current.style.height = 'auto'; } }; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); send(); }; const handleTextareaChange = (e: React.ChangeEvent) => { setMessage(e.target.value); if (textareaRef.current) { textareaRef.current.style.height = 'auto'; textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`; } setIsExpanded(e.target.value.length > 100 || e.target.value.includes('\n')); }; const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send(); } }; return (

How can I help you today?

</div>
          </div>

<DropdownMenuContent
                align="start"
                className="w-64 rounded-[16px] p-1.5"
              >
                <DropdownMenuGroup className="space-y-1">
                  <DropdownMenuItem
                    className="rounded-[10px] px-2.5 py-2"
                    onClick={() => fileInputRef.current?.click()}
                  >
                    <IconPaperclip
                      className="opacity-60"
                      size={20}
                      stroke={1.5}
                    />
                    Add photos & files
                  </DropdownMenuItem>
                  <DropdownMenuItem
                    className="rounded-[10px] px-2.5 py-2"
                    onClick={() => {}}
                  >
                    <IconSparkles
                      className="opacity-60"
                      size={20}
                      stroke={1.5}
                    />
                    Agent mode
                  </DropdownMenuItem>
                  <DropdownMenuItem
                    className="rounded-[10px] px-2.5 py-2"
                    onClick={() => {}}
                  >
                    <IconSearch className="opacity-60" size={20} stroke={1.5} />
                    Deep Research
                  </DropdownMenuItem>
                </DropdownMenuGroup>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>