AI Chat with Voice Input

1'use client';
2 
3import {
4  IconMicrophone,
5  IconPaperclip,
6  IconPlus,
7  IconSearch,
8  IconSend,
9  IconSparkles,
10  IconWaveSine,
11} from '@tabler/icons-react';
12import type React from 'react';
13import { useRef, useState } from 'react';
14import { Button } from '@/components/ui/button';
15import {
16  DropdownMenu,
17  DropdownMenuContent,
18  DropdownMenuGroup,
19  DropdownMenuItem,
20  DropdownMenuTrigger,
21} from '@/components/ui/dropdown-menu';
22import { Textarea } from '@/components/ui/textarea';
23import { cn } from '@/lib/utils';
24 
25export default function Ai01() {
26  const [message, setMessage] = useState('');
27  const [isExpanded, setIsExpanded] = useState(false);
28  const textareaRef = useRef<HTMLTextAreaElement>(null);
29  const fileInputRef = useRef<HTMLInputElement>(null);
30 
31  const handleSubmit = (e: React.FormEvent) => {
32    e.preventDefault();
33 
34    if (message.trim()) {
35      setMessage('');
36      setIsExpanded(false);
37 
38      if (textareaRef.current) {
39        textareaRef.current.style.height = 'auto';
40      }
41    }
42  };
43 
44  const handleTextareaChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
45    setMessage(e.target.value);
46 
47    if (textareaRef.current) {
48      textareaRef.current.style.height = 'auto';
49      textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
50    }
51 
52    setIsExpanded(e.target.value.length > 100 || e.target.value.includes('\n'));
53  };
54 
55  const handleKeyDown = (e: React.KeyboardEvent) => {
56    if (e.key === 'Enter' && !e.shiftKey) {
57      e.preventDefault();
58      handleSubmit(e as any);
59    }
60  };
61 
62  return (
63    <div className="w-full">
64      <h1 className="mx-auto mb-8 max-w-2xl whitespace-pre-wrap text-balance text-pretty px-1 text-center font-semibold text-2xl text-foreground leading-9">
65        How can I help you today?
66      </h1>
67 
68      <form className="group/composer w-full" onSubmit={handleSubmit}>
69        <input
70          className="sr-only"
71          multiple
72          onChange={(e) => {}}
73          ref={fileInputRef}
74          type="file"
75        />
76 
77        <div
78          className={cn(
79            'mx-auto w-full max-w-2xl cursor-text overflow-clip border border-border bg-transparent bg-clip-padding p-2.5 shadow-lg transition-[border-radius] duration-200 ease-out dark:bg-muted/50',
80            isExpanded
81              ? "grid rounded-3xl [grid-template-areas:'header'_'primary'_'footer'] [grid-template-columns:1fr] [grid-template-rows:auto_1fr_auto]"
82// … truncated