feat: Add audio transcription

src/components/audio/AudioView.tsx

@@ -2,7 +2,7 @@ import { useState } from "react";
 import { ChatHeader } from "@/components/ChatHeader";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
-import { Upload, Mic, Play, Download, Copy, Trash2 } from "lucide-react";
+import { Upload, Mic, Play, Download, Trash2, FileAudio } from "lucide-react";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import {
@@ -12,16 +12,111 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { useToast } from "@/hooks/use-toast";
+
+const SUPPORTED_FORMATS = ['flac', 'm4a', 'mp3', 'mp4', 'mpeg', 'mpga', 'oga', 'ogg', 'wav', 'webm'];
+const MAX_FILE_SIZE = 25 * 1024 * 1024; // 25 MB
+
+interface TranscriptionResult {
+  id: string;
+  fileName: string;
+  text: string;
+  timestamp: Date;
+}
 
 export const AudioView = () => {
   const [textToSpeech, setTextToSpeech] = useState("");
   const [isProcessing, setIsProcessing] = useState(false);
+  const [isTranscribing, setIsTranscribing] = useState(false);
+  const [transcriptionResult, setTranscriptionResult] = useState<TranscriptionResult | null>(null);
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const { toast } = useToast();
 
   const handleGenerateAudio = () => {
     setIsProcessing(true);
     setTimeout(() => setIsProcessing(false), 2000);
   };
 
+  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    // Validate file size
+    if (file.size > MAX_FILE_SIZE) {
+      toast({
+        title: "Arquivo muito grande",
+        description: "O arquivo deve ter no máximo 25 MB",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    // Validate file format
+    const fileExtension = file.name.split('.').pop()?.toLowerCase();
+    if (!fileExtension || !SUPPORTED_FORMATS.includes(fileExtension)) {
+      toast({
+        title: "Formato não suportado",
+        description: `Formatos suportados: ${SUPPORTED_FORMATS.join(', ')}`,
+        variant: "destructive",
+      });
+      return;
+    }
+
+    setSelectedFile(file);
+    handleTranscription(file);
+  };
+
+  const handleTranscription = async (file: File) => {
+    setIsTranscribing(true);
+    
+    // Simulate transcription - replace with actual API call
+    setTimeout(() => {
+      const result: TranscriptionResult = {
+        id: Date.now().toString(),
+        fileName: file.name,
+        text: "Esta é uma transcrição de exemplo do áudio enviado. O sistema utilizará modelos de IA avançados para converter sua fala em texto com alta precisão. O áudio foi processado com sucesso e convertido para texto.",
+        timestamp: new Date(),
+      };
+      
+      setTranscriptionResult(result);
+      setIsTranscribing(false);
+      
+      toast({
+        title: "Transcrição concluída",
+        description: "Seu áudio foi transcrito com sucesso!",
+      });
+    }, 2000);
+  };
+
+  const handleDeleteTranscription = () => {
+    setTranscriptionResult(null);
+    setSelectedFile(null);
+  };
+
+  const handleCopyTranscription = () => {
+    if (transcriptionResult) {
+      navigator.clipboard.writeText(transcriptionResult.text);
+      toast({
+        title: "Texto copiado",
+        description: "A transcrição foi copiada para a área de transferência",
+      });
+    }
+  };
+
+  const handleDownloadTranscription = () => {
+    if (transcriptionResult) {
+      const blob = new Blob([transcriptionResult.text], { type: 'text/plain' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `transcricao_${transcriptionResult.fileName}.txt`;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    }
+  };
+
   return (
     <div className="flex flex-col h-full">
       <ChatHeader />
@@ -43,58 +138,98 @@ export const AudioView = () => {
                   Converter Áudio em Texto
                 </h3>
                 <p className="text-sm text-muted-foreground">
-                  Envie um arquivo de áudio (.mp3, .wav) para transcrição
+                  Envie um arquivo de áudio para transcrição (máx. 25MB)
+                </p>
+                <p className="text-xs text-muted-foreground">
+                  Formatos: {SUPPORTED_FORMATS.join(', ')}
                 </p>
 
-                <div className="border-2 border-dashed border-border rounded-xl p-12 text-center space-y-4 hover:border-primary/50 transition-colors cursor-pointer">
+                <input
+                  type="file"
+                  id="audio-upload"
+                  className="hidden"
+                  accept={SUPPORTED_FORMATS.map(f => `.${f}`).join(',')}
+                  onChange={handleFileSelect}
+                />
+
+                <label
+                  htmlFor="audio-upload"
+                  className="border-2 border-dashed border-border rounded-xl p-12 text-center space-y-4 hover:border-primary/50 transition-colors cursor-pointer block"
+                >
                   <div className="w-16 h-16 mx-auto rounded-full bg-primary/10 flex items-center justify-center">
+                    {selectedFile ? (
+                      <FileAudio className="w-8 h-8 text-primary" />
+                    ) : (
                       <Upload className="w-8 h-8 text-primary" />
+                    )}
                   </div>
                   <div>
                     <p className="font-medium">
-                      Clique para selecionar ou arraste o arquivo
+                      {selectedFile ? selectedFile.name : "Clique para selecionar ou arraste o arquivo"}
                     </p>
                     <p className="text-sm text-muted-foreground mt-1">
-                      Suporta MP3, WAV (máx. 25MB)
+                      {selectedFile 
+                        ? `${(selectedFile.size / (1024 * 1024)).toFixed(2)} MB`
+                        : "Máximo 25 MB"
+                      }
                     </p>
                   </div>
-                  <Button variant="outline" className="gap-2">
+                  {!selectedFile && (
+                    <Button variant="outline" className="gap-2" type="button">
                       <Upload className="w-4 h-4" />
                       Selecionar Arquivo
                     </Button>
+                  )}
+                </label>
+
+                {isTranscribing && (
+                  <div className="bg-muted/30 rounded-lg p-6 flex items-center justify-center gap-3">
+                    <div className="w-8 h-8 border-4 border-primary/20 border-t-primary rounded-full animate-spin" />
+                    <p className="text-sm font-medium">
+                      Transcrevendo áudio...
+                    </p>
                   </div>
+                )}
               </div>
 
-              {/* Sample Transcription Result */}
+              {/* Transcription Result */}
+              {transcriptionResult && (
                 <div className="glass-effect rounded-xl p-6 space-y-3">
                   <div className="flex items-center justify-between">
                     <div>
-                    <h4 className="font-semibold">audio_sample.mp3</h4>
+                      <h4 className="font-semibold">{transcriptionResult.fileName}</h4>
                       <p className="text-xs text-muted-foreground">
-                      Transcrito há 5 minutos
+                        Transcrito {new Date(transcriptionResult.timestamp).toLocaleTimeString('pt-BR')}
                       </p>
                     </div>
                     <div className="flex gap-2">
-                    <Button size="sm" variant="outline" className="gap-1">
+                      <Button 
-                      <Copy className="w-3 h-3" />
+                        size="sm" 
-                      Copiar
+                        variant="outline" 
-                    </Button>
+                        className="gap-1"
-                    <Button size="sm" variant="outline" className="gap-1">
+                        onClick={handleDownloadTranscription}
+                      >
                         <Download className="w-3 h-3" />
+                        Baixar
                       </Button>
-                    <Button size="sm" variant="destructive" className="gap-1">
+                      <Button 
+                        size="sm" 
+                        variant="destructive" 
+                        className="gap-1"
+                        onClick={handleDeleteTranscription}
+                      >
                         <Trash2 className="w-3 h-3" />
+                        Excluir
                       </Button>
                     </div>
                   </div>
                   <div className="bg-muted/30 rounded-lg p-4">
-                  <p className="text-sm leading-relaxed">
+                    <p className="text-sm leading-relaxed whitespace-pre-wrap">
-                    Esta é uma transcrição de exemplo do áudio enviado. O
+                      {transcriptionResult.text}
-                    sistema utilizará modelos de IA avançados para converter
-                    sua fala em texto com alta precisão.
                     </p>
                   </div>
                 </div>
+              )}
             </TabsContent>
 
             {/* Generation Tab */}