Refactor audio section in sidebar

src/components/Layout.tsx

@@ -1,16 +1,16 @@
 import { useState } from "react";
-import { MessageSquare, Image, Mic, ArrowLeft, Plus, ChevronLeft, ChevronRight, Bot, FileText } from "lucide-react";
+import { MessageSquare, Image, FileAudio, Mic, ArrowLeft, Plus, ChevronLeft, ChevronRight, Bot, Brain } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
 import { ThemeToggle } from "@/components/ThemeToggle";
 
 interface LayoutProps {
   children: React.ReactNode;
-  activeTab: "chat" | "images" | "audio" | "bots" | "agent";
+  activeTab: "chat" | "images" | "transcription" | "generation" | "bots" | "agent";
-  onTabChange: (tab: "chat" | "images" | "audio" | "bots" | "agent") => void;
+  onTabChange: (tab: "chat" | "images" | "transcription" | "generation" | "bots" | "agent") => void;
 }
 
-type TabType = "chat" | "images" | "audio" | "bots" | "agent";
+type TabType = "chat" | "images" | "transcription" | "generation" | "bots" | "agent";
 
 export const Layout = ({ children, activeTab, onTabChange }: LayoutProps) => {
   const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
@@ -18,9 +18,10 @@ export const Layout = ({ children, activeTab, onTabChange }: LayoutProps) => {
   const tabs = [
     { id: "chat" as TabType, label: "Bate-papo", icon: MessageSquare },
     { id: "images" as TabType, label: "Imagens", icon: Image },
-    { id: "audio" as TabType, label: "Áudio", icon: Mic },
+    { id: "transcription" as TabType, label: "Transcrição de Áudio", icon: FileAudio },
+    { id: "generation" as TabType, label: "Geração de Áudio", icon: Mic },
     { id: "bots" as TabType, label: "Bots", icon: Bot },
-    { id: "agent" as TabType, label: "Agente de Parecer", icon: FileText },
+    { id: "agent" as TabType, label: "Agente de Parecer", icon: Brain },
   ];
 
   return (

src/components/audio/GenerationView.tsx

@@ -0,0 +1,342 @@
+import { useState, useEffect } from "react";
+import { ChatHeader } from "@/components/ChatHeader";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { Input } from "@/components/ui/input";
+import { Mic, Play, Download, Trash2, Search } from "lucide-react";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useToast } from "@/hooks/use-toast";
+
+interface GeneratedAudio {
+  id: string;
+  text: string;
+  voice: string;
+  voiceLabel: string;
+  audioUrl: string;
+  timestamp: Date;
+}
+
+const VOICE_OPTIONS = {
+  alloy: {
+    label: "Alloy",
+    gender: "Masculina",
+    style: "Neutra, equilibrada, tom corporativo",
+    description: "Boa para tutoriais e comunicações institucionais."
+  },
+  echo: {
+    label: "Echo",
+    gender: "Masculina",
+    style: "Forte e profissional, mais grave",
+    description: "Ideal para voz de autoridade ou locução firme."
+  },
+  fable: {
+    label: "Fable",
+    gender: "Feminina",
+    style: "Narrativa, calorosa e envolvente",
+    description: "Ótima para storytelling e áudios empáticos."
+  },
+  onyx: {
+    label: "Onyx",
+    gender: "Masculina",
+    style: "Grave, autoritária, impactante",
+    description: "Excelente para trailers, mensagens sérias ou institucionais."
+  },
+  nova: {
+    label: "Nova",
+    gender: "Feminina",
+    style: "Brilhante, animada, energética",
+    description: "Boa para vídeos curtos, marketing ou conteúdos leves."
+  },
+  shimmer: {
+    label: "Shimmer",
+    gender: "Feminina",
+    style: "Suave, otimista, clara",
+    description: "Boa para mensagens acolhedoras, explicações e IA conversacional."
+  }
+};
+
+export const GenerationView = () => {
+  const [textToSpeech, setTextToSpeech] = useState("");
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [selectedVoice, setSelectedVoice] = useState<keyof typeof VOICE_OPTIONS>("alloy");
+  const [generatedAudio, setGeneratedAudio] = useState<GeneratedAudio | null>(null);
+  const [audioHistory, setAudioHistory] = useState<GeneratedAudio[]>([]);
+  const [audioSearchQuery, setAudioSearchQuery] = useState("");
+  const { toast } = useToast();
+
+  useEffect(() => {
+    const savedAudios = localStorage.getItem('audioHistory');
+    if (savedAudios) {
+      setAudioHistory(JSON.parse(savedAudios));
+    }
+  }, []);
+
+  const handleGenerateAudio = () => {
+    setIsProcessing(true);
+    
+    setTimeout(() => {
+      const audio: GeneratedAudio = {
+        id: Date.now().toString(),
+        text: textToSpeech,
+        voice: selectedVoice,
+        voiceLabel: VOICE_OPTIONS[selectedVoice].label,
+        audioUrl: "data:audio/mp3;base64,//sample",
+        timestamp: new Date(),
+      };
+      
+      setGeneratedAudio(audio);
+      
+      const newHistory = [audio, ...audioHistory].slice(0, 10);
+      setAudioHistory(newHistory);
+      localStorage.setItem('audioHistory', JSON.stringify(newHistory));
+      
+      setIsProcessing(false);
+      
+      toast({
+        title: "Áudio gerado com sucesso",
+        description: `Voz: ${VOICE_OPTIONS[selectedVoice].label}`,
+      });
+    }, 2000);
+  };
+
+  const handleDownloadAudio = (audio: GeneratedAudio) => {
+    const a = document.createElement('a');
+    a.href = audio.audioUrl;
+    a.download = `audio_${audio.voiceLabel}_${new Date(audio.timestamp).getTime()}.mp3`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    
+    toast({
+      title: "Download iniciado",
+      description: "O arquivo de áudio está sendo baixado.",
+    });
+  };
+
+  const handleDeleteAudio = (audioId: string) => {
+    if (generatedAudio?.id === audioId) {
+      setGeneratedAudio(null);
+    }
+    const newHistory = audioHistory.filter(a => a.id !== audioId);
+    setAudioHistory(newHistory);
+    localStorage.setItem('audioHistory', JSON.stringify(newHistory));
+    
+    toast({
+      title: "Áudio removido",
+      description: "O áudio foi removido do histórico.",
+    });
+  };
+
+  const filteredAudios = audioHistory.filter(item =>
+    item.voiceLabel.toLowerCase().includes(audioSearchQuery.toLowerCase()) ||
+    item.text.toLowerCase().includes(audioSearchQuery.toLowerCase())
+  );
+
+  return (
+    <div className="flex flex-col h-full pb-16 md:pb-0">
+      <ChatHeader />
+
+      <ScrollArea className="flex-1">
+        <div className="max-w-4xl mx-auto p-3 md:p-6">
+          <Tabs defaultValue="generation" className="space-y-4 md:space-y-6">
+            <TabsList className="grid w-full grid-cols-2 glass-effect text-xs md:text-sm">
+              <TabsTrigger value="generation" className="text-xs md:text-sm">
+                Geração
+              </TabsTrigger>
+              <TabsTrigger value="history" className="text-xs md:text-sm">
+                Histórico
+              </TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="generation" className="space-y-6">
+              <div className="glass-effect rounded-xl p-6 space-y-4">
+                <h3 className="text-lg font-semibold">
+                  Converter Texto em Voz
+                </h3>
+
+                <div className="space-y-2">
+                  <label className="text-sm font-medium">
+                    Digite o texto para converter
+                  </label>
+                  <Textarea
+                    value={textToSpeech}
+                    onChange={(e) => setTextToSpeech(e.target.value)}
+                    placeholder="Digite o texto que deseja converter em fala..."
+                    className="min-h-[120px] resize-none"
+                  />
+                </div>
+
+                <div className="space-y-4">
+                  <div className="space-y-2">
+                    <label className="text-sm font-medium">Tipo de Voz</label>
+                    <Select value={selectedVoice} onValueChange={(value) => setSelectedVoice(value as keyof typeof VOICE_OPTIONS)}>
+                      <SelectTrigger>
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {Object.entries(VOICE_OPTIONS).map(([key, voice]) => (
+                          <SelectItem key={key} value={key}>
+                            {voice.label} - {voice.gender}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  <div className="bg-muted/30 rounded-lg p-4 space-y-2">
+                    <div className="flex items-center justify-between">
+                      <p className="text-sm font-medium">{VOICE_OPTIONS[selectedVoice].label}</p>
+                      <span className="text-xs text-muted-foreground">Modelo: OpenAI TTS-1</span>
+                    </div>
+                    <p className="text-xs text-muted-foreground">
+                      <strong>Estilo:</strong> {VOICE_OPTIONS[selectedVoice].style}
+                    </p>
+                    <p className="text-xs text-muted-foreground">
+                      {VOICE_OPTIONS[selectedVoice].description}
+                    </p>
+                  </div>
+
+                  <Button
+                    onClick={handleGenerateAudio}
+                    disabled={!textToSpeech.trim() || isProcessing}
+                    className="gap-2 cyber-glow w-full"
+                    size="lg"
+                  >
+                    <Mic className="w-4 h-4" />
+                    {isProcessing ? "Gerando..." : "Gerar Áudio"}
+                  </Button>
+                </div>
+
+                {isProcessing && (
+                  <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">
+                      Gerando áudio...
+                    </p>
+                  </div>
+                )}
+              </div>
+
+              {generatedAudio && (
+                <div className="glass-effect rounded-xl p-6 space-y-4">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <h4 className="font-semibold">Áudio Gerado</h4>
+                      <p className="text-sm text-muted-foreground">
+                        Voz: {generatedAudio.voiceLabel}
+                      </p>
+                    </div>
+                    <div className="flex gap-2">
+                      <Button 
+                        size="sm" 
+                        variant="outline" 
+                        className="gap-1"
+                        onClick={() => handleDownloadAudio(generatedAudio)}
+                      >
+                        <Download className="w-3 h-3" />
+                        Baixar
+                      </Button>
+                      <Button 
+                        size="sm" 
+                        variant="destructive" 
+                        className="gap-1"
+                        onClick={() => handleDeleteAudio(generatedAudio.id)}
+                      >
+                        <Trash2 className="w-3 h-3" />
+                        Excluir
+                      </Button>
+                    </div>
+                  </div>
+
+                  <div className="bg-muted/30 rounded-lg p-4">
+                    <p className="text-sm mb-3">{generatedAudio.text}</p>
+                    <audio controls className="w-full">
+                      <source src={generatedAudio.audioUrl} type="audio/mpeg" />
+                      Seu navegador não suporta o elemento de áudio.
+                    </audio>
+                  </div>
+                </div>
+              )}
+            </TabsContent>
+
+            <TabsContent value="history" className="space-y-6">
+              <div className="glass-effect rounded-xl p-6 space-y-4">
+                <div className="flex items-center justify-between">
+                  <h3 className="text-lg font-semibold">Histórico de Áudios</h3>
+                  <p className="text-sm text-muted-foreground">
+                    {audioHistory.length} {audioHistory.length === 1 ? 'item' : 'itens'}
+                  </p>
+                </div>
+
+                <div className="relative">
+                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+                  <Input
+                    value={audioSearchQuery}
+                    onChange={(e) => setAudioSearchQuery(e.target.value)}
+                    placeholder="Buscar por voz ou conteúdo..."
+                    className="pl-9"
+                  />
+                </div>
+
+                {filteredAudios.length === 0 ? (
+                  <div className="text-center py-12 text-muted-foreground">
+                    <Mic className="w-12 h-12 mx-auto mb-3 opacity-50" />
+                    <p>{audioSearchQuery ? 'Nenhum áudio encontrado' : 'Nenhum áudio no histórico'}</p>
+                  </div>
+                ) : (
+                  <div className="space-y-3">
+                    {filteredAudios.map((audio) => (
+                      <div key={audio.id} className="bg-muted/30 rounded-lg p-4 space-y-3">
+                        <div className="flex items-start justify-between gap-2">
+                          <div className="flex-1 min-w-0">
+                            <div className="flex items-center gap-2">
+                              <h4 className="font-medium">Voz: {audio.voiceLabel}</h4>
+                            </div>
+                            <p className="text-xs text-muted-foreground">
+                              {new Date(audio.timestamp).toLocaleDateString('pt-BR')} às{' '}
+                              {new Date(audio.timestamp).toLocaleTimeString('pt-BR')}
+                            </p>
+                          </div>
+                          <div className="flex gap-2">
+                            <Button
+                              size="sm"
+                              variant="ghost"
+                              onClick={() => handleDownloadAudio(audio)}
+                            >
+                              <Download className="w-4 h-4" />
+                            </Button>
+                            <Button
+                              size="sm"
+                              variant="ghost"
+                              onClick={() => handleDeleteAudio(audio.id)}
+                            >
+                              <Trash2 className="w-4 h-4" />
+                            </Button>
+                          </div>
+                        </div>
+                        <p className="text-sm text-muted-foreground line-clamp-2">
+                          {audio.text}
+                        </p>
+                        <audio controls className="w-full">
+                          <source src={audio.audioUrl} type="audio/mpeg" />
+                        </audio>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </TabsContent>
+          </Tabs>
+        </div>
+      </ScrollArea>
+    </div>
+  );
+};

src/components/audio/TranscriptionView.tsx

@@ -0,0 +1,318 @@
+import { useState, useEffect } from "react";
+import { ChatHeader } from "@/components/ChatHeader";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Upload, Download, Trash2, FileAudio, Copy, Search } from "lucide-react";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+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 TranscriptionView = () => {
+  const [isTranscribing, setIsTranscribing] = useState(false);
+  const [transcriptionResult, setTranscriptionResult] = useState<TranscriptionResult | null>(null);
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [transcriptionHistory, setTranscriptionHistory] = useState<TranscriptionResult[]>([]);
+  const [transcriptionSearchQuery, setTranscriptionSearchQuery] = useState("");
+  const { toast } = useToast();
+
+  useEffect(() => {
+    const savedTranscriptions = localStorage.getItem('transcriptionHistory');
+    if (savedTranscriptions) {
+      setTranscriptionHistory(JSON.parse(savedTranscriptions));
+    }
+  }, []);
+
+  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    if (file.size > MAX_FILE_SIZE) {
+      toast({
+        title: "Arquivo muito grande",
+        description: "O arquivo deve ter no máximo 25 MB",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    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);
+    
+    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);
+      
+      const newHistory = [result, ...transcriptionHistory].slice(0, 10);
+      setTranscriptionHistory(newHistory);
+      localStorage.setItem('transcriptionHistory', JSON.stringify(newHistory));
+      
+      setIsTranscribing(false);
+      
+      toast({
+        title: "Transcrição concluída",
+        description: "Seu áudio foi transcrito com sucesso!",
+      });
+    }, 2000);
+  };
+
+  const handleDeleteTranscription = () => {
+    setTranscriptionResult(null);
+    setSelectedFile(null);
+  };
+
+  const handleDeleteTranscriptionFromHistory = (transcriptionId: string) => {
+    if (transcriptionResult?.id === transcriptionId) {
+      setTranscriptionResult(null);
+    }
+    const newHistory = transcriptionHistory.filter(t => t.id !== transcriptionId);
+    setTranscriptionHistory(newHistory);
+    localStorage.setItem('transcriptionHistory', JSON.stringify(newHistory));
+    
+    toast({
+      title: "Transcrição removida",
+      description: "A transcrição foi removida do histórico.",
+    });
+  };
+
+  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);
+    }
+  };
+
+  const filteredTranscriptions = transcriptionHistory.filter(item => 
+    item.fileName.toLowerCase().includes(transcriptionSearchQuery.toLowerCase()) ||
+    item.text.toLowerCase().includes(transcriptionSearchQuery.toLowerCase())
+  );
+
+  return (
+    <div className="flex flex-col h-full pb-16 md:pb-0">
+      <ChatHeader />
+
+      <ScrollArea className="flex-1">
+        <div className="max-w-4xl mx-auto p-3 md:p-6">
+          <Tabs defaultValue="transcription" className="space-y-4 md:space-y-6">
+            <TabsList className="grid w-full grid-cols-2 glass-effect text-xs md:text-sm">
+              <TabsTrigger value="transcription" className="text-xs md:text-sm">
+                Transcrição
+              </TabsTrigger>
+              <TabsTrigger value="history" className="text-xs md:text-sm">
+                Histórico
+              </TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="transcription" className="space-y-6">
+              <div className="glass-effect rounded-xl p-6 space-y-4">
+                <h3 className="text-lg font-semibold">
+                  Converter Áudio em Texto
+                </h3>
+                <p className="text-sm text-muted-foreground">
+                  Envie um arquivo de áudio para transcrição (máx. 25MB)
+                </p>
+                <p className="text-xs text-muted-foreground">
+                  Formatos: {SUPPORTED_FORMATS.join(', ')}
+                </p>
+
+                <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">
+                      {selectedFile ? selectedFile.name : "Clique para selecionar ou arraste o arquivo"}
+                    </p>
+                    <p className="text-sm text-muted-foreground mt-1">
+                      {selectedFile 
+                        ? `${(selectedFile.size / (1024 * 1024)).toFixed(2)} MB`
+                        : "Máximo 25 MB"
+                      }
+                    </p>
+                  </div>
+                  {!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>
+
+              {transcriptionResult && (
+                <div className="glass-effect rounded-xl p-6 space-y-3">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <h4 className="font-semibold">{transcriptionResult.fileName}</h4>
+                      <p className="text-xs text-muted-foreground">
+                        Transcrito {new Date(transcriptionResult.timestamp).toLocaleTimeString('pt-BR')}
+                      </p>
+                    </div>
+                    <div className="flex gap-2">
+                      <Button 
+                        size="sm" 
+                        variant="outline" 
+                        className="gap-1"
+                        onClick={handleCopyTranscription}
+                      >
+                        <Copy className="w-3 h-3" />
+                        Copiar
+                      </Button>
+                      <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"
+                        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 whitespace-pre-wrap">
+                      {transcriptionResult.text}
+                    </p>
+                  </div>
+                </div>
+              )}
+            </TabsContent>
+
+            <TabsContent value="history" className="space-y-6">
+              <div className="glass-effect rounded-xl p-6 space-y-4">
+                <div className="flex items-center justify-between">
+                  <h3 className="text-lg font-semibold">Histórico de Transcrições</h3>
+                  <p className="text-sm text-muted-foreground">
+                    {transcriptionHistory.length} {transcriptionHistory.length === 1 ? 'item' : 'itens'}
+                  </p>
+                </div>
+
+                <div className="relative">
+                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+                  <Input
+                    value={transcriptionSearchQuery}
+                    onChange={(e) => setTranscriptionSearchQuery(e.target.value)}
+                    placeholder="Buscar por nome ou conteúdo..."
+                    className="pl-9"
+                  />
+                </div>
+
+                {filteredTranscriptions.length === 0 ? (
+                  <div className="text-center py-12 text-muted-foreground">
+                    <FileAudio className="w-12 h-12 mx-auto mb-3 opacity-50" />
+                    <p>{transcriptionSearchQuery ? 'Nenhuma transcrição encontrada' : 'Nenhuma transcrição no histórico'}</p>
+                  </div>
+                ) : (
+                  <div className="space-y-3">
+                    {filteredTranscriptions.map((item) => (
+                      <div key={item.id} className="bg-muted/30 rounded-lg p-4 space-y-2">
+                        <div className="flex items-start justify-between gap-2">
+                          <div className="flex-1 min-w-0">
+                            <h4 className="font-medium truncate">{item.fileName}</h4>
+                            <p className="text-xs text-muted-foreground">
+                              {new Date(item.timestamp).toLocaleDateString('pt-BR')} às{' '}
+                              {new Date(item.timestamp).toLocaleTimeString('pt-BR')}
+                            </p>
+                          </div>
+                          <Button
+                            size="sm"
+                            variant="ghost"
+                            onClick={() => handleDeleteTranscriptionFromHistory(item.id)}
+                          >
+                            <Trash2 className="w-4 h-4" />
+                          </Button>
+                        </div>
+                        <p className="text-sm text-muted-foreground line-clamp-2">
+                          {item.text}
+                        </p>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </TabsContent>
+          </Tabs>
+        </div>
+      </ScrollArea>
+    </div>
+  );
+};

src/pages/Index.tsx

@@ -2,7 +2,8 @@ import { useState } from "react";
 import { Layout } from "@/components/Layout";
 import { ChatView } from "@/components/chat/ChatView";
 import { ImageView } from "@/components/images/ImageView";
-import { AudioView } from "@/components/audio/AudioView";
+import { TranscriptionView } from "@/components/audio/TranscriptionView";
+import { GenerationView } from "@/components/audio/GenerationView";
 import { BotView } from "@/components/bots/BotView";
 import { BotChat } from "@/components/bots/BotChat";
 import { AgentView } from "@/components/agent/AgentView";
@@ -15,7 +16,7 @@ interface Bot {
 }
 
 const Index = () => {
-  const [activeView, setActiveView] = useState<"chat" | "images" | "audio" | "bots" | "agent">("chat");
+  const [activeView, setActiveView] = useState<"chat" | "images" | "transcription" | "generation" | "bots" | "agent">("chat");
   const [activeBotChat, setActiveBotChat] = useState<Bot | null>(null);
 
   const handleStartBotChat = (bot: Bot) => {
@@ -30,7 +31,8 @@ const Index = () => {
     <Layout activeTab={activeView} onTabChange={setActiveView}>
       {activeView === "chat" && <ChatView />}
       {activeView === "images" && <ImageView />}
-      {activeView === "audio" && <AudioView />}
+      {activeView === "transcription" && <TranscriptionView />}
+      {activeView === "generation" && <GenerationView />}
       {activeView === "bots" && (
         activeBotChat ? (
           <BotChat bot={activeBotChat} onBack={handleBackFromBotChat} />