xertica-ui 1.2.9 → 1.3.0

package/components/AssistenteXertica.tsx

@@ -1,10 +1,10 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { useNavigate } from 'react-router';
 import { motion, AnimatePresence } from 'framer-motion';
-import { 
-  MessageSquare, 
-  Heart, 
-  History, 
+import {
+  MessageSquare,
+  Heart,
+  History,
   MoreHorizontal,
   X,
   ChevronLeft,
@@ -32,15 +32,36 @@ import {
   BarChart3,
   Bookmark,
   Maximize2,
-  AlertCircle
+  AlertCircle,
+  ThumbsUp,
+  ThumbsDown,
+  BookOpen,
+  ArrowLeft,
+  Table as TableIcon
 } from 'lucide-react';
 import { Button } from './ui/button';
 import { ScrollArea } from './ui/scroll-area';
-import { ModernChatInput, ActionType } from './ModernChatInput';
 import { Separator } from './ui/separator';
 import { DocumentEditor } from './DocumentEditor';
-import { FormattedDocument } from './FormattedDocument';
 import { MarkdownMessage } from './MarkdownMessage';
+import { FormattedDocument } from './FormattedDocument';
+import { ModernChatInput, ActionType } from './ModernChatInput';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "./ui/dropdown-menu";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "./ui/dialog";
+import { Textarea } from "./ui/textarea";
+import { Alert, AlertDescription, AlertTitle } from "./ui/alert";
 import { XerticaOrbe } from './XerticaOrbe';
 import { useApiKey } from '../contexts/ApiKeyContext';
 import { useAssistente } from '../contexts/AssistenteContext';
@@ -49,6 +70,19 @@ import { toast } from 'sonner';
 import { Tooltip, TooltipTrigger } from './ui/tooltip';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { cn } from './ui/utils';
+import { ASSISTANT_EXPANDED_WIDTH, ASSISTANT_COLLAPSED_WIDTH } from './layout-constants';
+// Import Chart Components
+import { Bar, BarChart, CartesianGrid, XAxis, Tooltip as RechartsTooltip, ResponsiveContainer } from "recharts";
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from "./ui/chart";
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "./ui/table";
 
 // Tooltip customizado estilo sidebar (branco)
 function AssistantTooltipContent({
@@ -86,12 +120,7 @@ interface AssistenteXerticaProps {
   isFullPage?: boolean;
 }
 
-import type { Message, Conversa, SearchResult, SearchSource, SearchCommand } from '../contexts/AssistenteContext';
-
-interface Sugestao {
-  id: string;
-  texto: string;
-}
+import type { Message, Conversa, SearchResult, SearchSource, SearchCommand, Sugestao } from '../contexts/AssistenteContext';
 
 const sugestoesPadrao: Sugestao[] = [
   { id: '1', texto: 'O que posso pedir para você fazer?' },
@@ -101,59 +130,66 @@ const sugestoesPadrao: Sugestao[] = [
   { id: '5', texto: 'Qual projetos está tendo o melhor desempenho?' }
 ];
 
+const sugestoesRicas: Sugestao[] = [
+  { id: 'rich-1', texto: 'Ver exemplo de Gráfico', icon: <BarChart3 className="w-4 h-4 mr-2" /> },
+  { id: 'rich-2', texto: 'Ver exemplo de Imagem', icon: <ImageIcon className="w-4 h-4 mr-2" /> },
+  { id: 'rich-3', texto: 'Ver exemplo de Tabela', icon: <TableIcon className="w-4 h-4 mr-2" /> },
+  { id: 'rich-4', texto: 'Ver exemplo de Documento', icon: <FileText className="w-4 h-4 mr-2" /> }
+];
+
 // Respostas simuladas da IA
 const gerarResposta = (mensagemUsuario: string): string => {
   const mensagemLower = mensagemUsuario.toLowerCase();
   const mensagemOriginal = mensagemUsuario;
-  
+
   if (mensagemLower.includes('o que') && (mensagemLower.includes('fazer') || mensagemLower.includes('pedir'))) {
     return 'Posso ajudar você com diversas tarefas! Posso:\n\n• Analisar dados e métricas dos seus projetos\n• Responder perguntas sobre performance e resultados\n• Sugerir otimizações e melhorias\n• Gerar relatórios e documentação\n• Ajudar no planejamento de sprints\n• E muito mais!\n\nQual tarefa você gostaria de realizar primeiro?';
   }
-  
+
   if (mensagemLower.includes('o que você faz') || mensagemLower.includes('quem é você')) {
     return 'Olá! Sou o Assistente Xertica, uma IA desenvolvida para ajudar você a gerenciar projetos, analisar dados e otimizar processos. Estou aqui 24/7 para responder suas perguntas e auxiliar nas suas tarefas diárias.\n\nPosso processar documentos, analisar áudios e imagens, além de fornecer insights baseados nos dados da plataforma.';
   }
-  
+
   if (mensagemLower.includes('projeto') && (mensagemLower.includes('preocupar') || mensagemLower.includes('atenção'))) {
     return 'Com base na análise dos seus projetos ativos, recomendo focar nos seguintes:\n\n1. **Projeto Alpha** - 15% acima do prazo, requer atenção imediata\n2. **Sistema Beta** - Performance crítica, necessita otimização\n3. **Mobile Gamma** - Aguardando aprovações há 5 dias\n\nGostaria de mais detalhes sobre algum deles?';
   }
-  
+
   if (mensagemLower.includes('próximo projeto') || mensagemLower.includes('próxima tarefa')) {
     return 'Seu próximo projeto prioritário é o **Sistema de Analytics V2**.\n\n📅 Início previsto: Próxima segunda-feira\n👥 Time: 5 desenvolvedores\n⏱️ Duração estimada: 3 sprints\n\nJá preparei um roadmap inicial. Gostaria de revisar?';
   }
-  
+
   if (mensagemLower.includes('desempenho') || mensagemLower.includes('performance') || mensagemLower.includes('melhor')) {
     return 'Analisando os dados de performance dos últimos 30 dias:\n\n🏆 **Melhor Performance:**\n• Projeto Dashboard 2.0: +35% eficiência\n• Sistema CRM: -40% tempo de resposta\n• App Mobile: 4.8★ rating (+0.5)\n\n📊 Todos estão acima das metas estabelecidas. Parab��ns!\n\nQuer ver métricas detalhadas?';
   }
-  
+
   if (mensagemLower.includes('olá') || mensagemLower.includes('oi') || mensagemLower.includes('bom dia') || mensagemLower.includes('boa tarde') || mensagemLower.includes('boa noite')) {
     return 'Olá! 👋 Como posso ajudar você hoje? Estou pronto para auxiliar com análises, relatórios ou responder suas dúvidas sobre os projetos.';
   }
-  
+
   if (mensagemLower.includes('obrigado') || mensagemLower.includes('obrigada')) {
     return 'Por nada! Estou aqui sempre que precisar. 😊 Se tiver mais alguma dúvida ou precisar de ajuda, é só chamar!';
   }
-  
+
   // Respostas para ações especiais
   if (mensagemLower.includes('criar documento')) {
     const tema = mensagemOriginal.replace(/📄 \[Criar documento\]/gi, '').trim();
     return `📝 Documento criado com sucesso!\\n\\nGerei um documento completo sobre "${tema}" com as seguintes seções:\\n\\n• Introdução e contexto\\n• Análise detalhada\\n• Dados e métricas relevantes\\n• Conclusões e recomendações\\n• Próximos passos\\n\\nO documento está pronto para revisão e pode ser editado conforme necessário. Gostaria de adicionar ou modificar alguma seção?`;
   }
-  
+
   if (mensagemLower.includes('gerar podcast')) {
     const tema = mensagemOriginal.replace(/🎙️ \[Gerar podcast\]/gi, '').trim();
     return `🎙️ Preparando podcast sobre "${tema}"...\\n\\nEstou processando o conteúdo e gerando um roteiro de podcast profissional com:\\n\\n• Introdução envolvente\\n• Desenvolvimento do tema\\n• Exemplos práticos\\n• Conclusão e insights\\n\\nO áudio será gerado em instantes. Aguarde...`;
   }
-  
+
   if (mensagemLower.includes('pesquisar')) {
     const termo = mensagemOriginal.replace(/🔍 \[Pesquisar\]/gi, '').trim();
     return `🔍 Resultados da pesquisa sobre "${termo}"\\n\\n**Encontrei as seguintes informações relevantes:**\\n\\n1. **Documentação interna** - 12 resultados\\n   Guias e manuais relacionados ao tema\\n\\n2. **Projetos relacionados** - 8 projetos\\n   Incluindo Analytics v2 e Dashboard Pro\\n\\n3. **Discussões em equipe** - 15 menções\\n   Últimas conversas sobre o assunto\\n\\nGostaria de ver mais detalhes sobre algum desses resultados?`;
   }
-  
+
   if (mensagemLower.includes('arquivo') || mensagemLower.includes('documento')) {
     return 'Entendi que você deseja trabalhar com arquivos. Posso analisar diversos tipos de documentos:\n\n📄 Documentos de texto (PDF, DOCX)\n📊 Planilhas (XLSX, CSV)\n📈 Relatórios e apresentações\n\nBasta enviá-los usando o botão de anexo (📎) e terei prazer em analisá-los para você!';
   }
-  
+
   // Resposta genérica inteligente
   const respostasGenericas = [
     'Entendo sua questão. Com base nos dados disponíveis na plataforma Xertica, posso fornecer análises detalhadas sobre esse tema. Poderia me dar mais contexto para que eu possa ajudá-lo melhor?',
@@ -161,7 +197,7 @@ const gerarResposta = (mensagemUsuario: string): string => {
     'Ótima pergunta! Para te dar a melhor resposta possível, preciso entender melhor o contexto. Você pode me fornecer mais informações sobre o que está buscando?',
     'Estou analisando sua solicitação. Baseado nos dados do sistema Xertica, posso te ajudar com isso. Você gostaria de uma análise rápida ou um relatório completo?'
   ];
-  
+
   return respostasGenericas[Math.floor(Math.random() * respostasGenericas.length)];
 };
 
@@ -184,16 +220,167 @@ export function AssistenteXertica({ isExpanded, onToggle, onToggleWithTab, isFul
     savedSearches,
     setSavedSearches,
   } = useAssistente();
-  
+
   const [mensagem, setMensagem] = useState('');
   const [sugestoes] = useState<Sugestao[]>(sugestoesPadrao);
+  const [showMoreSuggestions, setShowMoreSuggestions] = useState(false);
   const [copiedId, setCopiedId] = useState<string | null>(null);
   const [generatingPodcastId, setGeneratingPodcastId] = useState<string | null>(null);
   const [executingCommand, setExecutingCommand] = useState<string | null>(null);
+  const [feedbackDialogOpen, setFeedbackDialogOpen] = useState(false);
+  const [feedbackMessageId, setFeedbackMessageId] = useState<string | null>(null);
+  const [feedbackCategory, setFeedbackCategory] = useState<string | null>(null);
+  const [feedbackReason, setFeedbackReason] = useState("");
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const audioInputRef = useRef<HTMLInputElement>(null);
 
+  const handleRichResponse = (suggestionId: string, suggestionText: string) => {
+    setIsTyping(true);
+    setMensagem(''); // Clear input if any
+
+    // Simulate network delay
+    setTimeout(() => {
+      let novaMensagem: Message = {
+        id: Date.now().toString() + '-ia-rich',
+        type: 'assistant',
+        content: '',
+        timestamp: new Date(),
+        isFavorite: false
+      };
+
+      if (suggestionId === 'rich-1') { // Gráfico
+        const chartData = [
+          { month: "Jan", desktop: 186, mobile: 80 },
+          { month: "Feb", desktop: 305, mobile: 200 },
+          { month: "Mar", desktop: 237, mobile: 120 },
+          { month: "Apr", desktop: 73, mobile: 190 },
+          { month: "May", desktop: 209, mobile: 130 },
+          { month: "Jun", desktop: 214, mobile: 140 },
+        ];
+        const chartConfig = {
+          desktop: {
+            label: "Desktop",
+            color: "hsl(var(--chart-1))",
+          },
+          mobile: {
+            label: "Mobile",
+            color: "hsl(var(--chart-2))",
+          },
+        } satisfies ChartConfig;
+
+        novaMensagem = {
+          ...novaMensagem,
+          content: 'Aqui está o gráfico de desempenho do projeto nos últimos 6 meses, comparando acessos Desktop vs Mobile.',
+          chartData: chartData,
+          chartConfig: chartConfig
+        };
+      } else if (suggestionId === 'rich-2') { // Imagem
+        novaMensagem = {
+          ...novaMensagem,
+          content: 'Aqui está a imagem prévia do novo layout do dashboard que você solicitou.',
+          attachmentType: 'image',
+          attachmentName: 'dashboard-preview-v2.jpg',
+          // Placeholder image URL
+          documentContent: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=2070&auto=format&fit=crop'
+        };
+      } else if (suggestionId === 'rich-3') { // Tabela
+        novaMensagem = {
+          ...novaMensagem,
+          content: 'Aqui está a tabela com os status dos servidores:',
+          tableData: {
+            caption: "Status dos Servidores em Tempo Real",
+            headers: ["Servidor", "Status", "Uptime", "Link"],
+            rows: [
+              ["Alpha-1", "✅ Online", "99.9%", <a href="https://example.com/log1" target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:underline flex items-center gap-1">Log <ExternalLink size={12} /></a>],
+              ["Beta-2", "⚠️ Warning", "98.5%", <a href="https://example.com/log2" target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:underline flex items-center gap-1">Log <ExternalLink size={12} /></a>],
+              ["Gamma-3", "❌ Offline", "0%", <a href="https://example.com/log3" target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:underline flex items-center gap-1">Log <ExternalLink size={12} /></a>]
+            ]
+          }
+        };
+      } else if (suggestionId === 'rich-4') { // Documento para Download
+        novaMensagem = {
+          ...novaMensagem,
+          content: 'Gerei o relatório completo de auditoria de segurança. Você pode baixá-lo ou editá-lo abaixo.',
+          attachmentType: 'document',
+          attachmentName: 'auditoria-seguranca-2024.md',
+          documentTitle: 'Relatório de Auditoria de Segurança',
+          documentContent: '# Auditoria de Segurança 2024\n\n## Resumo Executivo\nForam encontradas 3 vulnerabilidades de nível baixo...'
+        };
+      }
+
+      setConversas(prev => prev.map(conv => {
+        if (conv.id === conversaAtual) {
+          return {
+            ...conv,
+            mensagens: [...conv.mensagens,
+            {  // User message triggers the response
+              id: Date.now().toString() + '-user',
+              type: 'user',
+              content: suggestionText,
+              timestamp: new Date()
+            },
+              novaMensagem
+            ],
+            ultimaMensagem: suggestionText,
+            timestamp: new Date().toLocaleString('pt-BR')
+          };
+        }
+        return conv;
+      }));
+
+      setIsTyping(false);
+      setShowMoreSuggestions(false); // Close suggestions
+    }, 1500);
+  };
+
+  const handleEvaluation = (messageId: string, evaluation: 'like' | 'dislike', reason?: string) => {
+    setConversas(prev => prev.map(conv => {
+      if (conv.id === conversaAtual) {
+        return {
+          ...conv,
+          mensagens: conv.mensagens.map(msg =>
+            msg.id === messageId ? { ...msg, evaluation, evaluationReason: reason } : msg
+          )
+        };
+      }
+      return conv;
+    }));
+
+    if (evaluation === 'like') {
+      toast.success("Obrigado por avaliar positivamente!");
+    } else if (evaluation === 'dislike' && reason) {
+      toast.success("Obrigado pelo seu feedback. Vamos melhorar.");
+    }
+  };
+
+  const openFeedbackDialog = (messageId: string, category: string | null = null) => {
+    setFeedbackMessageId(messageId);
+    setFeedbackCategory(category);
+    setFeedbackReason("");
+    setFeedbackDialogOpen(true);
+  };
+
+  const submitFeedbackDialog = () => {
+    if (!feedbackMessageId) return;
+
+    let finalReason = "";
+    if (feedbackCategory) {
+      // Se tem categoria pré-definida, o comentário é opcional
+      finalReason = feedbackReason.trim() ? `${feedbackCategory}: ${feedbackReason}` : feedbackCategory;
+    } else {
+      // Se é "Outros", o motivo é obrigatório
+      if (!feedbackReason.trim()) return;
+      finalReason = feedbackReason;
+    }
+
+    handleEvaluation(feedbackMessageId, 'dislike', finalReason);
+    setFeedbackDialogOpen(false);
+    setFeedbackMessageId(null);
+    setFeedbackReason("");
+    setFeedbackCategory(null);
+  };
+
   const conversaAtiva = conversas.find(c => c.id === conversaAtual);
   const mensagens = conversaAtiva?.mensagens || [];
 
@@ -209,19 +396,19 @@ export function AssistenteXertica({ isExpanded, onToggle, onToggleWithTab, isFul
   // Resposta da IA usando Gemini API
   const simularRespostaIA = async (mensagemUsuario: string) => {
     setIsTyping(true);
-    
+
     try {
       let resposta: string;
-      
+
       // Se a chave da API for válida, usar Gemini
       if (isApiKeyValid && geminiApiKey) {
         // Construir histórico da conversa para o Gemini
         const conversaAtiva = conversas.find(c => c.id === conversaAtual);
         const historico: GeminiMessage[] = [];
-        
+
         // Adicionar prompt do sistema
         const systemPrompt = buildSystemPrompt();
-        
+
         // Converter mensagens anteriores para formato Gemini (últimas 10 mensagens)
         const mensagensRecentes = (conversaAtiva?.mensagens || []).slice(-10);
         for (const msg of mensagensRecentes) {
@@ -231,7 +418,7 @@ export function AssistenteXertica({ isExpanded, onToggle, onToggleWithTab, isFul
               .replace(/^📄 \[Criar documento\] /, '')
               .replace(/^🎙️ \[Gerar podcast\] /, '')
               .replace(/^🔍 \[Pesquisar\] /, '');
-            
+
             historico.push({
               role: 'user',
               parts: [{ text: conteudoLimpo }]
@@ -243,7 +430,7 @@ export function AssistenteXertica({ isExpanded, onToggle, onToggleWithTab, isFul
             });
           }
         }
-        
+
         // Se não houver histórico, adicionar o prompt do sistema como primeira mensagem
         if (historico.length === 0) {
           historico.push({
@@ -255,19 +442,19 @@ export function AssistenteXertica({ isExpanded, onToggle, onToggleWithTab, isFul
             parts: [{ text: 'Entendido! Estou pronto para ajudar você com a plataforma Xertica.ai. Como posso ajudá-lo hoje?' }]
           });
         }
-        
+
         try {
           resposta = await callGeminiAPI(geminiApiKey, mensagemUsuario, historico);
         } catch (error) {
           console.error('Erro ao chamar API Gemini:', error);
           // Usar a mensagem de erro do utilitário se disponível
           const errorMessage = error instanceof Error ? error.message : '❌ Erro desconhecido';
-          
+
           // Verificar se é erro de chave vazada ou 403
-          const isLeakedKeyError = errorMessage.toLowerCase().includes('leaked') || 
-                                   errorMessage.toLowerCase().includes('reported') ||
-                                   errorMessage.toLowerCase().includes('403');
-          
+          const isLeakedKeyError = errorMessage.toLowerCase().includes('leaked') ||
+            errorMessage.toLowerCase().includes('reported') ||
+            errorMessage.toLowerCase().includes('403');
+
           if (isLeakedKeyError) {
             toast.error('Chave de API desativada por segurança', {
               description: 'Sua chave foi reportada como vazada. Gere uma nova em Google AI Studio.',
@@ -287,7 +474,7 @@ export function AssistenteXertica({ isExpanded, onToggle, onToggleWithTab, isFul
         await new Promise(resolve => setTimeout(resolve, 1000 + Math.random() * 1000));
         resposta = gerarResposta(mensagemUsuario);
       }
-      
+
       const novaMensagem: Message = {
         id: Date.now().toString() + '-ia',
         type: 'assistant',
@@ -295,7 +482,7 @@ export function AssistenteXertica({ isExpanded, onToggle, onToggleWithTab, isFul
         timestamp: new Date(),
         isFavorite: false
       };
-      
+
       setConversas(prev => prev.map(conv => {
         if (conv.id === conversaAtual) {
           const novasMensagens = [...conv.mensagens, novaMensagem];
@@ -317,7 +504,7 @@ export function AssistenteXertica({ isExpanded, onToggle, onToggleWithTab, isFul
         timestamp: new Date(),
         isFavorite: false
       };
-      
+
       setConversas(prev => prev.map(conv => {
         if (conv.id === conversaAtual) {
           return {
@@ -334,7 +521,7 @@ export function AssistenteXertica({ isExpanded, onToggle, onToggleWithTab, isFul
 
   const simularRespostaDocumento = (tema: string) => {
     setIsTyping(true);
-    
+
     setTimeout(() => {
       const temaLimpo = tema.replace(/📄 \[Criar documento\]/gi, '').trim();
       const documentTitle = `Documento: ${temaLimpo}`;
@@ -399,7 +586,7 @@ Este documento fornece uma base sólida para entender e trabalhar com ${temaLimp
         documentContent: documentContent,
         documentTitle: documentTitle
       };
-      
+
       setConversas(prev => prev.map(conv => {
         if (conv.id === conversaAtual) {
           return {
@@ -411,21 +598,21 @@ Este documento fornece uma base sólida para entender e trabalhar com ${temaLimp
         }
         return conv;
       }));
-      
+
       setIsTyping(false);
     }, 2000);
   };
 
   const simularRespostaPodcast = (tema: string) => {
     setIsTyping(true);
-    
+
     setTimeout(() => {
       const temaLimpo = tema.replace(/🎙️ \[Gerar podcast\]/gi, '').trim();
-      
+
       // Gerar URL de áudio simulado (usando um data URL de áudio vazio)
       // Em produção, isso seria substituído por uma chamada real à API de geração de áudio
       const audioUrl = 'data:audio/mp3;base64,SUQzBAAAAAAAI1RTU0UAAAAPAAADTGF2ZjU4Ljc2LjEwMAAAAAAAAAAAAAAA//tQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAWGluZwAAAA8AAAACAAADhAC7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7v///////////////////////////////////////////8AAAAATGF2YzU4LjEzAAAAAAAAAAAAAAAAJAAAAAAAAAAAA4TnTxAOAAAAAAD/+xBkAA';
-      
+
       const novaMensagemIA: Message = {
         id: Date.now().toString(),
         type: 'assistant',
@@ -436,7 +623,7 @@ Este documento fornece uma base sólida para entender e trabalhar com ${temaLimp
         attachmentName: `Podcast - ${temaLimpo}.mp3`,
         audioUrl: audioUrl
       };
-      
+
       setConversas(prev => prev.map(conv => {
         if (conv.id === conversaAtual) {
           return {
@@ -448,17 +635,17 @@ Este documento fornece uma base sólida para entender e trabalhar com ${temaLimp
         }
         return conv;
       }));
-      
+
       setIsTyping(false);
     }, 2000);
   };
 
   const simularRespostaPesquisa = (query: string) => {
     setIsTyping(true);
-    
+
     setTimeout(() => {
       const queryLimpa = query.replace(/🔍 \[Pesquisar\]/gi, '').trim();
-      
+
       // Simular resultados de pesquisa baseados na query
       const mockResults: SearchResult[] = [
         {
@@ -548,7 +735,7 @@ Este documento fornece uma base sólida para entender e trabalhar com ${temaLimp
           description: 'Salvar esta pesquisa nos favoritos'
         }
       ];
-      
+
       const novaMensagemIA: Message = {
         id: Date.now().toString(),
         type: 'assistant',
@@ -560,7 +747,7 @@ Este documento fornece uma base sólida para entender e trabalhar com ${temaLimp
         searchSources: mockSources,
         searchCommands: mockCommands
       };
-      
+
       setConversas(prev => prev.map(conv => {
         if (conv.id === conversaAtual) {
           return {
@@ -572,7 +759,7 @@ Este documento fornece uma base sólida para entender e trabalhar com ${temaLimp
         }
         return conv;
       }));
-      
+
       setIsTyping(false);
     }, 1500);
   };
@@ -580,10 +767,10 @@ Este documento fornece uma base sólida para entender e trabalhar com ${temaLimp
   // Detectar intenção do usuário baseado na mensagem com análise contextual avançada
   const detectarIntencao = (texto: string): ActionType | null => {
     const textoLower = texto.toLowerCase().trim();
-    
+
     // Normalizar texto removendo pontuação extra
     const textoNormalizado = textoLower.replace(/[?.!,]/g, ' ').replace(/\s+/g, ' ');
-    
+
     // ====== VERBOS DE AÇÃO PARA DOCUMENTO ======
     const verbosDocumento = [
       'crie', 'criar', 'criação', 'cria',
@@ -599,7 +786,7 @@ Este documento fornece uma base sólida para entender e trabalhar com ${temaLimp
       'desenvolva', 'desenvolver', 'desenvolve', 'desenvolvendo',
       'formule', 'formular', 'formula', 'formulando'
     ];
-    
+
     const substantivosDocumento = [
       'documento', 'documentos', 'doc',
       'relatório', 'relatorio', 'relatórios', 'relatorios',
@@ -618,7 +805,7 @@ Este documento fornece uma base sólida para entender e trabalhar com ${temaLimp
       'proposta', 'propostas',
       'briefing', 'brief'
     ];
-    
+
     // ====== VERBOS DE AÇÃO PARA PODCAST ======
     const verbosPodcast = [
       'grave', 'gravar', 'grava', 'gravando', 'gravação', 'gravacao',
@@ -627,7 +814,7 @@ Este documento fornece uma base sólida para entender e trabalhar com ${temaLimp
       'converta para áudio', 'converta para audio',
       'sintetize', 'sintetizar'
     ];
-    
+
     const substantivosPodcast = [
       'podcast', 'podcasts',
       'áudio', 'audio', 'áudios', 'audios',
@@ -636,7 +823,7 @@ Este documento fornece uma base sólida para entender e trabalhar com ${temaLimp
       'locução', 'locucao',
       'gravação', 'gravacao', 'gravações', 'gravacoes'
     ];
-    
+
     // ====== VERBOS DE AÇÃO PARA PESQUISA ======
     const verbosPesquisa = [
       'pesquise', 'pesquisar', 'pesquisa', 'pesquisando',
@@ -653,7 +840,7 @@ Este documento fornece uma base sólida para entender e trabalhar com ${temaLimp
       'traga', 'trazer', 'traz', 'trazendo',
       'recupere', 'recuperar', 'recupera', 'recuperando'
     ];
-    
+
     const complementosPesquisa = [
       'me mostre', 'mostre-me', 'me mostra',
       'me traga', 'traga-me', 'me traz',
@@ -666,16 +853,16 @@ Este documento fornece uma base sólida para entender e trabalhar com ${temaLimp
       'onde está', 'onde estão', 'onde fica', 'onde ficam',
       'qual é', 'quais são'
     ];
-    
+
     // ====== DETECÇÃO CONTEXTUAL ======
-    
+
     // 1. Verificar PODCAST primeiro (mais específico)
     for (const verbo of verbosPodcast) {
       if (textoNormalizado.includes(verbo)) {
         return 'podcast';
       }
     }
-    
+
     for (const substantivo of substantivosPodcast) {
       for (const verbo of verbosDocumento) {
         if (textoNormalizado.includes(verbo) && textoNormalizado.includes(substantivo)) {
@@ -683,14 +870,14 @@ Este documento fornece uma base sólida para entender e trabalhar com ${temaLimp
         }
       }
     }
-    
+
     // Detecção específica: "transformar/converter em áudio"
     if ((textoNormalizado.includes('transforme') || textoNormalizado.includes('transformar') ||
-         textoNormalizado.includes('converta') || textoNormalizado.includes('converter')) &&
-        (textoNormalizado.includes('áudio') || textoNormalizado.includes('audio'))) {
+      textoNormalizado.includes('converta') || textoNormalizado.includes('converter')) &&
+      (textoNormalizado.includes('áudio') || textoNormalizado.includes('audio'))) {
       return 'podcast';
     }
-    
+
     // 2. Verificar DOCUMENTO (combinação verbo + substantivo)
     for (const verbo of verbosDocumento) {
       for (const substantivo of substantivosDocumento) {
@@ -699,54 +886,54 @@ Este documento fornece uma base sólida para entender e trabalhar com ${temaLimp
         }
       }
     }
-    
+
     // Detecção simples: apenas o verbo "documentar"
     if (textoNormalizado.includes('documente') || textoNormalizado.includes('documentar')) {
       return 'document';
     }
-    
+
     // Detecção: "escrever/escreva sobre"
     if ((textoNormalizado.includes('escreva sobre') || textoNormalizado.includes('escrever sobre') ||
-         textoNormalizado.includes('escreva um') || textoNormalizado.includes('escreva uma'))) {
+      textoNormalizado.includes('escreva um') || textoNormalizado.includes('escreva uma'))) {
       return 'document';
     }
-    
+
     // Padrões comuns de criação de documento
     const padrõesDocumento = [
       /^(crie|criar|faça|fazer|gere|gerar).*(documento|relatório|relatorio|resumo|nota|artigo|texto|análise|analise)/,
       /^(preciso|quero|gostaria).*(criar|fazer|gerar).*(documento|relatório|relatorio|resumo)/,
       /^me (ajude|ajuda) (a )?(criar|fazer|gerar).*(documento|relatório|relatorio)/
     ];
-    
+
     for (const padrao of padrõesDocumento) {
       if (padrao.test(textoNormalizado)) {
         return 'document';
       }
     }
-    
+
     // 3. Verificar PESQUISA
     for (const verbo of verbosPesquisa) {
       if (textoNormalizado.startsWith(verbo + ' ') || textoNormalizado.includes(' ' + verbo + ' ')) {
         return 'search';
       }
     }
-    
+
     for (const complemento of complementosPesquisa) {
       if (textoNormalizado.includes(complemento)) {
         return 'search';
       }
     }
-    
+
     // Padrões interrogativos que indicam pesquisa
     if ((textoNormalizado.startsWith('onde ') || textoNormalizado.startsWith('qual ') ||
-         textoNormalizado.startsWith('quais ') || textoNormalizado.startsWith('quem ') ||
-         textoNormalizado.startsWith('como encontrar') || textoNormalizado.startsWith('tem algum') ||
-         textoNormalizado.startsWith('tem alguma') || textoNormalizado.includes('você tem')) &&
-        !textoNormalizado.includes('documento') && !textoNormalizado.includes('relatório') &&
-        !textoNormalizado.includes('relatorio') && !textoNormalizado.includes('podcast')) {
+      textoNormalizado.startsWith('quais ') || textoNormalizado.startsWith('quem ') ||
+      textoNormalizado.startsWith('como encontrar') || textoNormalizado.startsWith('tem algum') ||
+      textoNormalizado.startsWith('tem alguma') || textoNormalizado.includes('você tem')) &&
+      !textoNormalizado.includes('documento') && !textoNormalizado.includes('relatório') &&
+      !textoNormalizado.includes('relatorio') && !textoNormalizado.includes('podcast')) {
       return 'search';
     }
-    
+
     return null;
   };
 
@@ -757,9 +944,9 @@ Este documento fornece uma base sólida para entender e trabalhar com ${temaLimp
       if (!acaoDetectada) {
         acaoDetectada = detectarIntencao(mensagem) || undefined;
       }
-      
+
       let mensagemComAcao = mensagem;
-      
+
       // Adicionar prefixo baseado na ação selecionada ou detectada
       if (acaoDetectada === 'document') {
         mensagemComAcao = `📄 [Criar documento] ${mensagem}`;
@@ -768,7 +955,7 @@ Este documento fornece uma base sólida para entender e trabalhar com ${temaLimp
       } else if (acaoDetectada === 'search') {
         mensagemComAcao = `🔍 [Pesquisar] ${mensagem}`;
       }
-      
+
       const novaMensagem: Message = {
         id: Date.now().toString(),
         type: 'user',
@@ -776,15 +963,15 @@ Este documento fornece uma base sólida para entender e trabalhar com ${temaLimp
         timestamp: new Date(),
         isFavorite: false
       };
-      
+
       // Atualizar título da conversa se for a primeira mensagem
       setConversas(prev => prev.map(conv => {
         if (conv.id === conversaAtual) {
           const novasMensagens = [...conv.mensagens, novaMensagem];
-          const novoTitulo = conv.mensagens.length === 0 
+          const novoTitulo = conv.mensagens.length === 0
             ? mensagem.substring(0, 30) + (mensagem.length > 30 ? '...' : '')
             : conv.titulo;
-          
+
           return {
             ...conv,
             titulo: novoTitulo,
@@ -795,9 +982,9 @@ Este documento fornece uma base sólida para entender e trabalhar com ${temaLimp
         }
         return conv;
       }));
-      
+
       setMensagem('');
-      
+
       // Simular resposta da IA baseada na ação detectada ou explícita
       if (acaoDetectada === 'document') {
         simularRespostaDocumento(mensagem);
@@ -854,10 +1041,10 @@ Este documento fornece uma base sólida para entender e trabalhar com ${temaLimp
         document.body.appendChild(textArea);
         textArea.focus();
         textArea.select();
-        
+
         const successful = document.execCommand('copy');
         document.body.removeChild(textArea);
-        
+
         if (successful) {
           setCopiedId(messageId);
           setTimeout(() => setCopiedId(null), 2000);
@@ -885,7 +1072,7 @@ Este documento fornece uma base sólida para entender e trabalhar com ${temaLimp
       timestamp: new Date().toLocaleString('pt-BR'),
       favorita: false
     };
-    
+
     setConversas(prev => [novaConversa, ...prev]);
     setConversaAtual(novaConversa.id);
     setAbaSelecionada('chat');
@@ -908,7 +1095,7 @@ Este documento fornece uma base sólida para entender e trabalhar com ${temaLimp
         attachmentType: 'file',
         attachmentName: file.name
       };
-      
+
       setConversas(prev => prev.map(conv => {
         if (conv.id === conversaAtual) {
           return {
@@ -920,13 +1107,13 @@ Este documento fornece uma base sólida para entender e trabalhar com ${temaLimp
         }
         return conv;
       }));
-      
+
       // Simular resposta sobre o arquivo
       setTimeout(() => {
         simularRespostaIA(`Analisar arquivo ${file.name}`);
       }, 500);
     }
-    
+
     // Reset input
     if (e.target) e.target.value = '';
   };
@@ -943,7 +1130,7 @@ Este documento fornece uma base sólida para entender e trabalhar com ${temaLimp
         attachmentType: 'audio',
         attachmentName: file.name
       };
-      
+
       setConversas(prev => prev.map(conv => {
         if (conv.id === conversaAtual) {
           return {
@@ -955,11 +1142,11 @@ Este documento fornece uma base sólida para entender e trabalhar com ${temaLimp
         }
         return conv;
       }));
-      
+
       // Simular resposta sobre o áudio
       setTimeout(() => {
         const respostaAudio = 'Áudio recebido! Estou processando o conteúdo... 🎵\n\nIdentifiquei que você está falando sobre análise de projetos. Posso transcrever o áudio completo se desejar. Gostaria que eu faça isso?';
-        
+
         const novaMensagemIA: Message = {
           id: Date.now().toString() + '-ia',
           type: 'assistant',
@@ -967,7 +1154,7 @@ Este documento fornece uma base sólida para entender e trabalhar com ${temaLimp
           timestamp: new Date(),
           isFavorite: false
         };
-        
+
         setConversas(prev => prev.map(conv => {
           if (conv.id === conversaAtual) {
             return {
@@ -981,7 +1168,7 @@ Este documento fornece uma base sólida para entender e trabalhar com ${temaLimp
         }));
       }, 1500);
     }
-    
+
     // Reset input
     if (e.target) e.target.value = '';
   };
@@ -989,16 +1176,16 @@ Este documento fornece uma base sólida para entender e trabalhar com ${temaLimp
   const handleGeneratePodcast = async (messageId: string, messageContent: string) => {
     // Marcar que o podcast está sendo gerado
     setGeneratingPodcastId(messageId);
-    
+
     // Simular delay de geração (2-3 segundos)
     await new Promise(resolve => setTimeout(resolve, 2000 + Math.random() * 1000));
-    
+
     // Gerar URL de áudio simulado (usando um data URL de áudio vazio)
     // Em produção, isso seria substituído por uma chamada real à API de geração de áudio
     const audioUrl = 'data:audio/mp3;base64,SUQzBAAAAAAAI1RTU0UAAAAPAAADTGF2ZjU4Ljc2LjEwMAAAAAAAAAAAAAAA//tQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAWGluZwAAAA8AAAACAAADhAC7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7v///////////////////////////////////////////8AAAAATGF2YzU4LjEzAAAAAAAAAAAAAAAAJAAAAAAAAAAAA4TnTxAOAAAAAAD/+xBkAA';
-    
+
     const temaExtraido = messageContent.substring(0, 50).replace(/[📝🎙️🔍]/g, '').trim();
-    
+
     const podcastMessage: Message = {
       id: Date.now().toString() + '-podcast',
       type: 'assistant',
@@ -1009,7 +1196,7 @@ Este documento fornece uma base sólida para entender e trabalhar com ${temaLimp
       attachmentName: `Podcast - ${temaExtraido}.mp3`,
       audioUrl: audioUrl
     };
-    
+
     setConversas(prev => prev.map(conv => {
       if (conv.id === conversaAtual) {
         return {
@@ -1021,11 +1208,11 @@ Este documento fornece uma base sólida para entender e trabalhar com ${temaLimp
       }
       return conv;
     }));
-    
+
     setGeneratingPodcastId(null);
   };
 
-  const conversasFiltradas = abaSelecionada === 'favoritos' 
+  const conversasFiltradas = abaSelecionada === 'favoritos'
     ? conversas.filter(c => c.favorita)
     : conversas;
 
@@ -1077,7 +1264,7 @@ Este documento fornece uma base sólida para entender e trabalhar com ${temaLimp
       timestamp: new Date(),
       isFavorite: false
     };
-    
+
     setConversas(prev => prev.map(conv => {
       if (conv.id === conversaAtual) {
         return {
@@ -1089,12 +1276,12 @@ Este documento fornece uma base sólida para entender e trabalhar com ${temaLimp
       }
       return conv;
     }));
-    
+
     // Resposta do assistente com opções baseadas no tipo
     setTimeout(() => {
       let responseContent = '';
       let actionButtons = '';
-      
+
       if (result.type === 'document') {
         responseContent = `📄 **${result.title}**\n\n${result.description}\n\n**Localização:** ${result.path}\n${result.lastModified ? `**Última modificação:** ${result.lastModified}\n` : ''}\n**Relevância:** ${result.relevance}%\n\n**O que você gostaria de fazer?**\n\n• Visualizar conteúdo completo\n• Editar documento\n• Baixar arquivo\n• Compartilhar com equipe\n• Ver histórico de versões\n• Adicionar comentários`;
       } else if (result.type === 'project') {
@@ -1106,7 +1293,7 @@ Este documento fornece uma base sólida para entender e trabalhar com ${temaLimp
       } else if (result.type === 'contact') {
         responseContent = `👤 **${result.title}**\n\n${result.description}\n\n**Localização:** ${result.path}\n${result.lastModified ? `**Última interação:** ${result.lastModified}\n` : ''}\n**Relevância:** ${result.relevance}%\n\n**Opções de contato:**\n\n• Ver perfil completo\n• Enviar mensagem\n• Agendar reunião\n• Ver projetos em comum\n• Histórico de interações\n• Adicionar nota`;
       }
-      
+
       const assistantMessage: Message = {
         id: Date.now().toString() + '-response',
         type: 'assistant',
@@ -1114,7 +1301,7 @@ Este documento fornece uma base sólida para entender e trabalhar com ${temaLimp
         timestamp: new Date(),
         isFavorite: false
       };
-      
+
       setConversas(prev => prev.map(conv => {
         if (conv.id === conversaAtual) {
           return {
@@ -1131,10 +1318,10 @@ Este documento fornece uma base sólida para entender e trabalhar com ${temaLimp
 
   const handleCreateDocumentFromSearch = (searchQuery: string, results: SearchResult[]) => {
     setExecutingCommand('document');
-    
+
     // Criar conteúdo do documento baseado nos resultados
     const documentContent = `# Relatório: ${searchQuery}\n\n## Resumo Executivo\n\nEsta pesquisa encontrou ${results.length} resultados relevantes sobre "${searchQuery}".\n\n## Resultados Encontrados\n\n${results.map((r, i) => `### ${i + 1}. ${r.title}\n- **Tipo:** ${r.type}\n- **Relevância:** ${r.relevance}%\n- **Descrição:** ${r.description}\n- **Localização:** ${r.path}\n${r.lastModified ? `- **Última modificação:** ${r.lastModified}` : ''}\n`).join('\n')}\n\n## Conclusão\n\nOs resultados acima representam as informações mais relevantes encontradas no sistema Xertica.ai.`;
-    
+
     setTimeout(() => {
       setExecutingCommand(null);
       simularRespostaDocumento(`Compilar resultados da pesquisa: ${searchQuery}`);
@@ -1143,7 +1330,7 @@ Este documento fornece uma base sólida para entender e trabalhar com ${temaLimp
 
   const handleGenerateReport = (searchQuery: string, results: SearchResult[]) => {
     setExecutingCommand('report');
-    
+
     setTimeout(() => {
       const reportMessage: Message = {
         id: Date.now().toString(),
@@ -1152,7 +1339,7 @@ Este documento fornece uma base sólida para entender e trabalhar com ${temaLimp
         timestamp: new Date(),
         isFavorite: false
       };
-      
+
       setConversas(prev => prev.map(conv => {
         if (conv.id === conversaAtual) {
           return {
@@ -1164,14 +1351,14 @@ Este documento fornece uma base sólida para entender e trabalhar com ${temaLimp
         }
         return conv;
       }));
-      
+
       setExecutingCommand(null);
     }, 2000);
   };
 
   const handleGeneratePodcastFromSearch = (searchQuery: string) => {
     setExecutingCommand('podcast');
-    
+
     setTimeout(() => {
       simularRespostaPodcast(`Criar podcast sobre os resultados da pesquisa: ${searchQuery}`);
       setExecutingCommand(null);
@@ -1180,7 +1367,7 @@ Este documento fornece uma base sólida para entender e trabalhar com ${temaLimp
 
   const handleSendSummary = (searchQuery: string, results: SearchResult[]) => {
     setExecutingCommand('email');
-    
+
     setTimeout(() => {
       toast.success('Resumo enviado!', {
         description: `Email enviado para sua equipe com ${results.length} resultados sobre "${searchQuery}"`
@@ -1226,778 +1413,952 @@ Este documento fornece uma base sólida para entender e trabalhar com ${temaLimp
   return (
     <>
       {/* Assistente + Editor Combined Container */}
-      <div className={`${
-        isFullPage 
-          ? 'w-full h-full' 
-          : `fixed top-0 right-0 h-full z-40 transition-all duration-300 ease-in-out ${
-              editingDocument && isExpanded ? '' : isExpanded ? 'w-[420px]' : 'w-20'
-            } hidden md:block`
-      }`}>
+      <div
+        style={{
+          width: editingDocument && isExpanded
+            ? '50%'
+            : isExpanded
+              ? ASSISTANT_EXPANDED_WIDTH
+              : ASSISTANT_COLLAPSED_WIDTH
+        }}
+        className={`fixed top-0 right-0 h-full z-40 transition-all duration-300 ease-in-out hidden md:block`}
+      >
         <div className={`flex h-full overflow-hidden ${isFullPage ? 'max-w-full' : ''}`}>
-        {/* Hidden file inputs */}
-        <input
-          ref={fileInputRef}
-          type="file"
-          accept=".pdf,.doc,.docx,.xls,.xlsx,.txt,.csv"
-          onChange={handleFileUpload}
-          className="hidden"
-        />
-        <input
-          ref={audioInputRef}
-          type="file"
-          accept="audio/*"
-          onChange={handleAudioUpload}
-          className="hidden"
-        />
-        
-        {/* Assistente Sidebar */}
-        <div className={`h-full flex flex-col ${
-          isFullPage 
+          {/* Hidden file inputs */}
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept=".pdf,.doc,.docx,.xls,.xlsx,.txt,.csv"
+            onChange={handleFileUpload}
+            className="hidden"
+          />
+          <input
+            ref={audioInputRef}
+            type="file"
+            accept="audio/*"
+            onChange={handleAudioUpload}
+            className="hidden"
+          />
+
+          {/* Assistente Sidebar */}
+          <div className={`h-full flex flex-col ${isFullPage
             ? editingDocument ? 'w-1/2' : 'w-full'
-            : `bg-card border-l border-border shadow-xl ${
-                editingDocument && isExpanded ? 'w-[420px]' : 'w-full'
-              }`
-        }`}>
-        
-        {/* Header - Toggle Button - Apenas visível quando não está em fullPage */}
-        {!isFullPage && (
-          <div className="border-b border-border flex items-center justify-between px-[14px] px-[18px] py-[16px]">
-            {isExpanded && (
-              <motion.div
-                initial={{ opacity: 0, x: 20 }}
-                animate={{ opacity: 1, x: 0 }}
-                exit={{ opacity: 0, x: 20 }}
-                className="flex items-center gap-2"
-              >
-                <XerticaOrbe size={32} />
-                <span className="text-foreground">Assistente Xertica</span>
-              </motion.div>
-            )}
-            
-            <div className="flex items-center gap-1">
-              {isExpanded && (
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => navigate('/assistente')}
-                  className="p-2 text-muted-foreground hover:bg-accent hover:text-accent-foreground"
-                  title="Expandir assistente"
-                >
-                  <Maximize2 className="w-4 h-4" />
-                </Button>
-              )}
-              
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={onToggle}
-                className="p-2 text-muted-foreground hover:bg-accent hover:text-accent-foreground"
-              >
-                {isExpanded ? (
-                  <ChevronRight className="w-4 h-4" />
-                ) : (
-                  <PanelRight className="w-4 h-4" />
+            : `bg-card border-l border-border shadow-xl w-full`
+            }`}>
+
+            {/* Header - Toggle Button - Apenas visível quando não está em fullPage */}
+            {!isFullPage && (
+              <div className="border-b border-border flex items-center justify-between px-[14px] px-[18px] py-[16px]">
+                {isExpanded && (
+                  <motion.div
+                    initial={{ opacity: 0, x: 20 }}
+                    animate={{ opacity: 1, x: 0 }}
+                    exit={{ opacity: 0, x: 20 }}
+                    className="flex items-center gap-2"
+                  >
+                    <XerticaOrbe size={32} />
+                    <span className="text-foreground">Assistente Xertica</span>
+                  </motion.div>
                 )}
-              </Button>
-            </div>
-          </div>
-        )}
 
-        {/* Collapsed State - Icons Only */}
-        {!isExpanded && !isFullPage && (
-          <div className="flex flex-col items-center p-4 space-y-4">
-            {/* Ícone do Assistente - Xertica Orbe */}
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <button
-                  onClick={onToggle}
-                  className="flex items-center justify-center hover:opacity-90 transition-opacity duration-200 cursor-pointer"
-                >
-                  <XerticaOrbe size={32} />
-                </button>
-              </TooltipTrigger>
-              <AssistantTooltipContent
-                side="left"
-                sideOffset={8}
-              >
-                <p>Assistente Xertica</p>
-              </AssistantTooltipContent>
-            </Tooltip>
-            
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => handleExpandWithTab('chat')}
-                  className="w-8 h-8 p-0 text-muted-foreground hover:bg-accent hover:text-accent-foreground"
-                >
-                  <MessageSquare className="w-4 h-4" />
-                </Button>
-              </TooltipTrigger>
-              <AssistantTooltipContent
-                side="left"
-                sideOffset={8}
-              >
-                <p>Chat</p>
-              </AssistantTooltipContent>
-            </Tooltip>
-            
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => handleExpandWithTab('favoritos')}
-                  className="w-8 h-8 p-0 text-muted-foreground hover:bg-accent hover:text-accent-foreground"
-                >
-                  <Heart className="w-4 h-4" />
-                </Button>
-              </TooltipTrigger>
-              <AssistantTooltipContent
-                side="left"
-                sideOffset={8}
-              >
-                <p>Favoritos</p>
-              </AssistantTooltipContent>
-            </Tooltip>
-            
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => handleExpandWithTab('historico')}
-                  className="w-8 h-8 p-0 text-muted-foreground hover:bg-accent hover:text-accent-foreground"
-                >
-                  <History className="w-4 h-4" />
-                </Button>
-              </TooltipTrigger>
-              <AssistantTooltipContent
-                side="left"
-                sideOffset={8}
-              >
-                <p>Histórico</p>
-              </AssistantTooltipContent>
-            </Tooltip>
-          </div>
-        )}
+                <div className="flex items-center gap-1">
+                  {isExpanded && (
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => navigate('/assistente')}
+                      className="p-2 text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+                      title="Expandir assistente"
+                    >
+                      <Maximize2 className="w-4 h-4" />
+                    </Button>
+                  )}
+
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={onToggle}
+                    className="p-2 text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+                  >
+                    {isExpanded ? (
+                      <ChevronRight className="w-4 h-4" />
+                    ) : (
+                      <PanelRight className="w-4 h-4" />
+                    )}
+                  </Button>
+                </div>
+              </div>
+            )}
 
-        {/* Expanded State - Full Content */}
-        <AnimatePresence>
-          {(isExpanded || isFullPage) && (
-            <motion.div
-              initial={isFullPage ? false : { opacity: 0, x: 50 }}
-              animate={{ opacity: 1, x: 0 }}
-              exit={isFullPage ? undefined : { opacity: 0, x: 50 }}
-              transition={{ duration: 0.2 }}
-              className="flex-1 flex flex-col overflow-hidden"
-            >
-              {/* Navigation Tabs - Oculto em modo fullPage */}
-              {!isFullPage && (
-                <div className="px-4 py-2 border-b border-border">
-                  <div className="flex gap-1">
+            {/* Collapsed State - Icons Only */}
+            {!isExpanded && !isFullPage && (
+              <div className="flex flex-col items-center p-4 space-y-4">
+                {/* Ícone do Assistente - Xertica Orbe */}
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <button
+                      onClick={onToggle}
+                      className="flex items-center justify-center hover:opacity-90 transition-opacity duration-200 cursor-pointer"
+                    >
+                      <XerticaOrbe size={32} />
+                    </button>
+                  </TooltipTrigger>
+                  <AssistantTooltipContent
+                    side="left"
+                    sideOffset={8}
+                  >
+                    <p>Assistente Xertica</p>
+                  </AssistantTooltipContent>
+                </Tooltip>
+
+                <Tooltip>
+                  <TooltipTrigger asChild>
                     <Button
-                      variant={abaSelecionada === 'chat' ? 'default' : 'ghost'}
+                      variant="ghost"
                       size="sm"
-                      onClick={() => setAbaSelecionada('chat')}
-                      className="flex-1 h-8 text-xs"
+                      onClick={() => handleExpandWithTab('chat')}
+                      className="w-8 h-8 p-0 text-muted-foreground hover:bg-accent hover:text-accent-foreground"
                     >
-                      <MessageSquare className="w-3 h-3 mr-1" />
-                      Chat
+                      <MessageSquare className="w-4 h-4" />
                     </Button>
+                  </TooltipTrigger>
+                  <AssistantTooltipContent
+                    side="left"
+                    sideOffset={8}
+                  >
+                    <p>Chat</p>
+                  </AssistantTooltipContent>
+                </Tooltip>
+
+                <Tooltip>
+                  <TooltipTrigger asChild>
                     <Button
-                      variant={abaSelecionada === 'historico' ? 'default' : 'ghost'}
+                      variant="ghost"
                       size="sm"
-                      onClick={() => setAbaSelecionada('historico')}
-                      className="flex-1 h-8 text-xs"
+                      onClick={() => handleExpandWithTab('favoritos')}
+                      className="w-8 h-8 p-0 text-muted-foreground hover:bg-accent hover:text-accent-foreground"
                     >
-                      <History className="w-3 h-3 mr-1" />
-                      Histórico
+                      <Heart className="w-4 h-4" />
                     </Button>
+                  </TooltipTrigger>
+                  <AssistantTooltipContent
+                    side="left"
+                    sideOffset={8}
+                  >
+                    <p>Favoritos</p>
+                  </AssistantTooltipContent>
+                </Tooltip>
+
+                <Tooltip>
+                  <TooltipTrigger asChild>
                     <Button
-                      variant={abaSelecionada === 'favoritos' ? 'default' : 'ghost'}
+                      variant="ghost"
                       size="sm"
-                      onClick={() => setAbaSelecionada('favoritos')}
-                      className="flex-1 h-8 text-xs"
+                      onClick={() => handleExpandWithTab('historico')}
+                      className="w-8 h-8 p-0 text-muted-foreground hover:bg-accent hover:text-accent-foreground"
                     >
-                      <Heart className="w-3 h-3 mr-1" />
-                      Favoritos
+                      <History className="w-4 h-4" />
                     </Button>
-                  </div>
-                </div>
-              )}
+                  </TooltipTrigger>
+                  <AssistantTooltipContent
+                    side="left"
+                    sideOffset={8}
+                  >
+                    <p>Histórico</p>
+                  </AssistantTooltipContent>
+                </Tooltip>
+              </div>
+            )}
 
-              {/* Content Area */}
-              <div className="flex-1 overflow-hidden flex flex-col">
-                {abaSelecionada === 'chat' && (
-                  <div className="flex-1 flex flex-col min-h-0 w-full">
-                    {/* API Key Warning Banner */}
-                    {!isApiKeyValid && (
-                      <div className="mx-4 mt-3 p-4 bg-[var(--toast-warning-bg)]/20 border-2 border-[var(--toast-warning-border)] rounded-lg">
-                        <div className="flex items-start gap-3">
-                          <AlertCircle className="w-5 h-5 text-[var(--toast-warning-icon)] flex-shrink-0 mt-0.5" />
-                          <div className="flex-1 space-y-3">
-                            <p className="text-small text-foreground">
-                              {!geminiApiKey ? (
-                                <strong>Nenhuma chave de API configurada</strong>
-                              ) : (
-                                <strong>🔐 Chave de API inválida ou vazada</strong>
-                              )}
-                            </p>
-                            <p className="text-small text-muted-foreground">
-                              Configure uma nova chave do Google Gemini para ativar respostas inteligentes do assistente.
-                            </p>
-                            <div className="flex flex-wrap items-center gap-2">
-                              <Button
-                                onClick={() => navigate('/settings')}
-                                size="sm"
-                                className="bg-[var(--toast-warning-icon)] hover:opacity-90 text-white rounded-[12px] shadow-sm"
-                              >
-                                Ir para Configurações
-                              </Button>
-                              <a 
-                                href="https://aistudio.google.com/apikey" 
-                                target="_blank" 
-                                rel="noopener noreferrer"
-                                className="inline-flex items-center gap-1 text-small text-[var(--toast-warning-icon)] underline hover:opacity-80"
-                              >
-                                Obter chave gratuitamente
-                                <ExternalLink className="w-3 h-3" />
-                              </a>
-                            </div>
-                          </div>
-                        </div>
+            {/* Expanded State - Full Content */}
+            <AnimatePresence>
+              {(isExpanded || isFullPage) && (
+                <motion.div
+                  initial={isFullPage ? false : { opacity: 0, x: 50 }}
+                  animate={{ opacity: 1, x: 0 }}
+                  exit={isFullPage ? undefined : { opacity: 0, x: 50 }}
+                  transition={{ duration: 0.2 }}
+                  className="flex-1 flex flex-col overflow-hidden"
+                >
+                  {/* Navigation Tabs - Oculto em modo fullPage */}
+                  {!isFullPage && (
+                    <div className="px-4 py-2 border-b border-border">
+                      <div className="flex gap-1">
+                        <Button
+                          variant={abaSelecionada === 'chat' ? 'default' : 'ghost'}
+                          size="sm"
+                          onClick={() => setAbaSelecionada('chat')}
+                          className="flex-1 h-8 text-xs"
+                        >
+                          <MessageSquare className="w-3 h-3 mr-1" />
+                          Chat
+                        </Button>
+                        <Button
+                          variant={abaSelecionada === 'historico' ? 'default' : 'ghost'}
+                          size="sm"
+                          onClick={() => setAbaSelecionada('historico')}
+                          className="flex-1 h-8 text-xs"
+                        >
+                          <History className="w-3 h-3 mr-1" />
+                          Histórico
+                        </Button>
+                        <Button
+                          variant={abaSelecionada === 'favoritos' ? 'default' : 'ghost'}
+                          size="sm"
+                          onClick={() => setAbaSelecionada('favoritos')}
+                          className="flex-1 h-8 text-xs"
+                        >
+                          <Heart className="w-3 h-3 mr-1" />
+                          Favoritos
+                        </Button>
                       </div>
-                    )}
-                    
-                    {mensagens.length === 0 ? (
-                      <div className="flex-1 overflow-y-auto min-h-0">
-                        {/* Welcome Message */}
-                        <div className="p-6 text-center">
-                          <div className="mx-auto mb-4 flex items-center justify-center">
-                            <XerticaOrbe size={64} />
+                    </div>
+                  )}
+
+                  {/* Content Area */}
+                  <div className="flex-1 overflow-hidden flex flex-col">
+                    {abaSelecionada === 'chat' && (
+                      <div className="flex-1 flex flex-col min-h-0 w-full">
+                        {/* API Key Warning Banner */}
+                        {!isApiKeyValid && (
+                          <div className="mx-4 mt-3 p-4 bg-[var(--toast-warning-bg)]/20 border-2 border-[var(--toast-warning-border)] rounded-lg">
+                            <div className="flex items-start gap-3">
+                              <AlertCircle className="w-5 h-5 text-[var(--toast-warning-icon)] flex-shrink-0 mt-0.5" />
+                              <div className="flex-1 space-y-3">
+                                <p className="text-small text-foreground">
+                                  {!geminiApiKey ? (
+                                    <strong>Nenhuma chave de API configurada</strong>
+                                  ) : (
+                                    <strong>🔐 Chave de API inválida ou vazada</strong>
+                                  )}
+                                </p>
+                                <p className="text-small text-muted-foreground">
+                                  Configure uma nova chave do Google Gemini para ativar respostas inteligentes do assistente.
+                                </p>
+                                <div className="flex flex-wrap items-center gap-2">
+                                  <Button
+                                    onClick={() => navigate('/settings')}
+                                    size="sm"
+                                    className="bg-[var(--toast-warning-icon)] hover:opacity-90 text-white rounded-[12px] shadow-sm"
+                                  >
+                                    Ir para Configurações
+                                  </Button>
+                                  <a
+                                    href="https://aistudio.google.com/apikey"
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    className="inline-flex items-center gap-1 text-small text-[var(--toast-warning-icon)] underline hover:opacity-80"
+                                  >
+                                    Obter chave gratuitamente
+                                    <ExternalLink className="w-3 h-3" />
+                                  </a>
+                                </div>
+                              </div>
+                            </div>
                           </div>
-                          <h3 className="text-foreground mb-2">
-                            Olá, Ariel
-                          </h3>
-                          <p className="text-muted-foreground">
-                            Como posso ajudar?
-                          </p>
-                        </div>
+                        )}
 
-                        {/* Suggestions */}
-                        <div className="px-4 pb-4 space-y-2">
-                          {sugestoes.map((sugestao) => (
-                            <button
-                              key={sugestao.id}
-                              onClick={() => setMensagem(sugestao.texto)}
-                              className="w-full p-3 text-left bg-muted hover:bg-accent rounded-lg transition-colors duration-200 text-foreground"
-                            >
-                              {sugestao.texto}
-                            </button>
-                          ))}
-                          
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            className="w-full justify-start text-muted-foreground hover:text-foreground"
-                          >
-                            <MoreHorizontal className="w-4 h-4 mr-2" />
-                            Mais sugestões
-                          </Button>
-                        </div>
-                      </div>
-                    ) : (
-                      <ScrollArea className="flex-1 min-h-0 overflow-x-hidden">
-                        <div className="space-y-4 px-4 py-4 overflow-x-hidden w-full">
-                          {mensagens.map((msg) => (
-                            <motion.div
-                              key={msg.id}
-                              initial={{ opacity: 0, y: 10 }}
-                              animate={{ opacity: 1, y: 0 }}
-                              className={`flex gap-2 ${msg.type === 'user' ? 'justify-end' : 'justify-start'}`}
-                            >
-                              {/* Avatar do Assistente */}
-                              {msg.type === 'assistant' && (
-                                <div className="flex-shrink-0 pt-1">
-                                  <XerticaOrbe size={32} />
-                                </div>
+                        {mensagens.length === 0 ? (
+                          <div className="flex-1 overflow-y-auto min-h-0">
+                            {/* Welcome Message */}
+                            <div className="p-6 text-center">
+                              <div className="mx-auto mb-4 flex items-center justify-center">
+                                <XerticaOrbe size={64} />
+                              </div>
+                              <h3 className="text-foreground mb-2">
+                                Olá, Ariel
+                              </h3>
+                              <p className="text-muted-foreground">
+                                Como posso ajudar?
+                              </p>
+                            </div>
+
+                            {/* Suggestions */}
+                            <div className="px-4 pb-4 space-y-2">
+                              {!showMoreSuggestions ? (
+                                <>
+                                  {sugestoes.map((sugestao) => (
+                                    <button
+                                      key={sugestao.id}
+                                      onClick={() => setMensagem(sugestao.texto)}
+                                      className="w-full p-3 text-left bg-muted hover:bg-accent rounded-lg transition-colors duration-200 text-foreground"
+                                    >
+                                      {sugestao.texto}
+                                    </button>
+                                  ))}
+
+                                  <Button
+                                    variant="ghost"
+                                    size="sm"
+                                    onClick={() => setShowMoreSuggestions(true)}
+                                    className="w-full justify-start text-muted-foreground hover:text-foreground"
+                                  >
+                                    <MoreHorizontal className="w-4 h-4 mr-2" />
+                                    Mais sugestões
+                                  </Button>
+                                </>
+                              ) : (
+                                <>
+                                  <div className="flex items-center gap-2 mb-2 px-2">
+                                    <span className="text-xs font-medium text-muted-foreground">Exemplos de respostas ricas</span>
+                                  </div>
+                                  {sugestoesRicas.map((sugestao) => (
+                                    <button
+                                      key={sugestao.id}
+                                      onClick={() => handleRichResponse(sugestao.id, sugestao.texto)}
+                                      className="w-full p-3 text-left bg-muted hover:bg-accent rounded-lg transition-colors duration-200 text-foreground flex items-center"
+                                    >
+                                      {sugestao.icon}
+                                      {sugestao.texto}
+                                    </button>
+                                  ))}
+
+                                  <Button
+                                    variant="ghost"
+                                    size="sm"
+                                    onClick={() => setShowMoreSuggestions(false)}
+                                    className="w-full justify-start text-muted-foreground hover:text-foreground"
+                                  >
+                                    <ArrowLeft className="w-4 h-4 mr-2" />
+                                    Voltar
+                                  </Button>
+                                </>
                               )}
-                              
-                              <div data-chat-message-container className={`max-w-[85%] min-w-0 w-auto ${msg.type === 'user' ? 'order-2' : 'order-1'}`}>
-                                <div className={cn(
-                                  "rounded-[var(--radius-card)] px-4 py-2 break-words overflow-hidden overflow-x-hidden w-fit",
-                                  msg.type === 'user'
-                                    ? "bg-primary text-primary-foreground shadow-sm"
-                                    : "bg-muted text-foreground"
-                                )}>
-                                  {/* Document Header with Edit and Download Buttons */}
-                                  {msg.attachmentType === 'document' && (
-                                    <div className="flex items-center justify-between mb-2 pb-2 border-b border-border min-w-0 overflow-hidden">
-                                      <div className="flex items-center gap-2 min-w-0 flex-1 overflow-hidden">
-                                        <FileText className="w-4 h-4 flex-shrink-0" />
-                                        <span className="text-small break-words">{msg.attachmentName}</span>
-                                      </div>
-                                      <div className="flex items-center gap-1 flex-shrink-0">
-                                        <Button
-                                          variant="ghost"
-                                          size="sm"
-                                          onClick={() => msg.documentContent && msg.attachmentName && handleDownloadDocument(msg.documentContent, msg.attachmentName)}
-                                          className="h-6 px-2 hover:bg-[var(--toast-success-bg)]/30 hover:text-[var(--toast-success-icon)]"
-                                          title="Download"
-                                        >
-                                          <Download className="w-3 h-3" />
-                                        </Button>
-                                        <Button
-                                          variant="ghost"
-                                          size="sm"
-                                          onClick={() => msg.documentContent && msg.documentTitle && handleEditDocument(msg.documentContent, msg.documentTitle)}
-                                          className="h-6 px-2 hover:bg-[var(--toast-info-bg)]/30 hover:text-[var(--toast-info-icon)]"
-                                        >
-                                          <Edit className="w-3 h-3 mr-1" />
-                                          Editar
-                                        </Button>
-                                      </div>
+                            </div>
+                          </div>
+                        ) : (
+                          <ScrollArea className="flex-1 min-h-0 overflow-x-hidden">
+                            <div className="space-y-4 px-4 py-4 overflow-x-hidden w-full">
+                              {mensagens.map((msg) => (
+                                <motion.div
+                                  key={msg.id}
+                                  initial={{ opacity: 0, y: 10 }}
+                                  animate={{ opacity: 1, y: 0 }}
+                                  className={`flex gap-2 ${msg.type === 'user' ? 'justify-end' : 'justify-start'}`}
+                                >
+                                  {/* Avatar do Assistente */}
+                                  {msg.type === 'assistant' && (
+                                    <div className="flex-shrink-0 pt-1">
+                                      <XerticaOrbe size={32} />
                                     </div>
                                   )}
 
-                                  {msg.attachmentType && msg.attachmentType !== 'podcast' && msg.attachmentType !== 'document' && (
+                                  <div data-chat-message-container className={`max-w-[85%] min-w-0 w-auto ${msg.type === 'user' ? 'order-2' : 'order-1'}`}>
                                     <div className={cn(
-                                      "flex items-center gap-2 mb-2 pb-2 border-b min-w-0 overflow-hidden",
-                                      msg.type === 'user' ? "border-primary-foreground/20" : "border-border"
+                                      "rounded-[var(--radius-card)] px-4 py-2 break-words overflow-hidden overflow-x-hidden w-fit",
+                                      msg.type === 'user'
+                                        ? "bg-primary text-primary-foreground shadow-sm"
+                                        : "bg-muted text-foreground"
                                     )}>
-                                      {msg.attachmentType === 'file' && <FileText className="w-4 h-4 flex-shrink-0" />}
-                                      {msg.attachmentType === 'audio' && <Music className="w-4 h-4 flex-shrink-0" />}
-                                      {msg.attachmentType === 'image' && <ImageIcon className="w-4 h-4 flex-shrink-0" />}
-                                      <span className={cn(
-                                        "text-small break-words",
-                                        msg.type === 'user' ? "text-primary-foreground/90" : "text-muted-foreground"
-                                      )}>{msg.attachmentName}</span>
-                                    </div>
-                                  )}
-                                  
-                                  {/* Conteúdo da mensagem */}
-                                  {msg.type === 'user' ? (
-                                    <p className="whitespace-pre-wrap break-words text-primary-foreground">{msg.content}</p>
-                                  ) : (
-                                    <>
-                                      {/* Alerta visual para mensagens de erro */}
-                                      {(msg.content.includes('🔐') || msg.content.includes('❌')) && (
-                                        <div className="mb-3 p-3 bg-[var(--toast-error-bg)]/20 border border-[var(--toast-error-border)] rounded-lg overflow-hidden">
-                                          <div className="flex items-start gap-2 min-w-0">
-                                            <AlertCircle className="w-5 h-5 text-[var(--toast-error-icon)] flex-shrink-0 mt-0.5" />
-                                            <div className="flex-1 min-w-0 overflow-hidden">
-                                              <MarkdownMessage 
-                                                content={msg.content} 
-                                                className="text-foreground"
-                                              />
-                                            </div>
+                                      {/* Document Header with Edit and Download Buttons */}
+                                      {msg.attachmentType === 'document' && (
+                                        <div className="flex items-center justify-between mb-2 pb-2 border-b border-border min-w-0 overflow-hidden">
+                                          <div className="flex items-center gap-2 min-w-0 flex-1 overflow-hidden">
+                                            <FileText className="w-4 h-4 flex-shrink-0" />
+                                            <span className="text-small break-words">{msg.attachmentName}</span>
                                           </div>
-                                        </div>
-                                      )}
-                                      {/* Mensagem normal */}
-                                      {!(msg.content.includes('🔐') || msg.content.includes('❌')) && (
-                                        <MarkdownMessage 
-                                          content={msg.content} 
-                                          className="text-foreground"
-                                        />
-                                      )}
-                                    </>
-                                  )}
-                                  
-                                  {/* Document Preview - Mostrar documento formatado */}
-                                  {msg.attachmentType === 'document' && msg.documentContent && (
-                                    <div className="mt-3 pt-3 border-t border-border overflow-hidden">
-                                      <FormattedDocument 
-                                        content={msg.documentContent}
-                                        maxPreviewLength={250}
-                                      />
-                                    </div>
-                                  )}
-                                  
-                                  {/* Podcast Player */}
-                                  {msg.attachmentType === 'podcast' && msg.audioUrl && (
-                                    <div className="mt-3 pt-3 border-t border-border overflow-hidden">
-                                      <div className="flex items-center justify-between mb-3 min-w-0 overflow-hidden">
-                                        <div className="flex items-center gap-2 min-w-0 flex-1 overflow-hidden">
-                                          <div className="w-6 h-6 rounded-full bg-gradient-to-br from-[var(--chart-4)] via-[var(--chart-1)] to-[var(--chart-4)] flex items-center justify-center flex-shrink-0">
-                                            <Radio className="w-3 h-3 text-white" />
+                                          <div className="flex items-center gap-1 flex-shrink-0">
+                                            <Button
+                                              variant="ghost"
+                                              size="sm"
+                                              onClick={() => msg.documentContent && msg.attachmentName && handleDownloadDocument(msg.documentContent, msg.attachmentName)}
+                                              className="h-6 px-2 hover:bg-[var(--toast-success-bg)]/30 hover:text-[var(--toast-success-icon)]"
+                                              title="Download"
+                                            >
+                                              <Download className="w-3 h-3" />
+                                            </Button>
+                                            <Button
+                                              variant="ghost"
+                                              size="sm"
+                                              onClick={() => msg.documentContent && msg.documentTitle && handleEditDocument(msg.documentContent, msg.documentTitle)}
+                                              className="h-6 px-2 hover:bg-[var(--toast-info-bg)]/30 hover:text-[var(--toast-info-icon)]"
+                                            >
+                                              <Edit className="w-3 h-3 mr-1" />
+                                              Editar
+                                            </Button>
                                           </div>
-                                          <span className="text-small text-muted-foreground break-words">
-                                            {msg.attachmentName}
-                                          </span>
                                         </div>
-                                        <Button
-                                          variant="ghost"
-                                          size="sm"
-                                          onClick={() => msg.audioUrl && msg.attachmentName && handleDownloadPodcast(msg.audioUrl, msg.attachmentName)}
-                                          className="h-6 px-2 hover:bg-[var(--toast-success-bg)]/30 hover:text-[var(--toast-success-icon)] flex-shrink-0"
-                                          title="Download"
-                                        >
-                                          <Download className="w-3 h-3" />
-                                        </Button>
-                                      </div>
-                                      <div className="bg-gradient-to-r from-[var(--chart-1)]/10 to-[var(--chart-4)]/10 rounded-lg p-2 overflow-hidden">
-                                        <audio 
-                                          controls 
-                                          className="w-full max-w-full h-10 outline-none"
-                                        >
-                                          <source src={msg.audioUrl} type="audio/mpeg" />
-                                          Seu navegador não suporta o elemento de áudio.
-                                        </audio>
-                                      </div>
-                                    </div>
-                                  )}
-                                  
-                                  {/* Search Results */}
-                                  {msg.attachmentType === 'search' && msg.searchResults && (
-                                    <div className="mt-3 pt-3 border-t border-border space-y-4 overflow-hidden">
-                                      {/* Search Results List */}
-                                      <div className="overflow-hidden">
-                                        <div className="flex items-center gap-2 mb-3">
-                                          <Search className="w-4 h-4 text-[var(--chart-4)]" />
-                                          <h4 className="text-foreground">
-                                            Resultados Encontrados ({msg.searchResults.length})
-                                          </h4>
+                                      )}
+
+                                      {msg.attachmentType && msg.attachmentType !== 'podcast' && msg.attachmentType !== 'document' && (
+                                        <div className={cn(
+                                          "flex items-center gap-2 mb-2 pb-2 border-b min-w-0 overflow-hidden",
+                                          msg.type === 'user' ? "border-primary-foreground/20" : "border-border"
+                                        )}>
+                                          {msg.attachmentType === 'file' && <FileText className="w-4 h-4 flex-shrink-0" />}
+                                          {msg.attachmentType === 'audio' && <Music className="w-4 h-4 flex-shrink-0" />}
+                                          {msg.attachmentType === 'image' && <ImageIcon className="w-4 h-4 flex-shrink-0" />}
+                                          <span className={cn(
+                                            "text-small break-words",
+                                            msg.type === 'user' ? "text-primary-foreground/90" : "text-muted-foreground"
+                                          )}>{msg.attachmentName}</span>
                                         </div>
-                                        <div className="space-y-2 overflow-hidden">
-                                          {msg.searchResults.map((result) => (
-                                            <div
-                                              key={result.id}
-                                              onClick={() => handleOpenSearchResult(result)}
-                                              className="p-3 rounded-lg border border-border hover:bg-[var(--primary-light)] hover:border-[var(--primary-light-foreground)] transition-all cursor-pointer group overflow-hidden"
-                                            >
-                                              <div className="flex items-start justify-between gap-2 min-w-0">
-                                                <div className="flex items-start gap-2 flex-1 min-w-0 overflow-hidden">
-                                                  <div className="mt-0.5 flex-shrink-0">
-                                                    {result.type === 'document' && <FileText className="w-4 h-4 text-[var(--chart-4)] group-hover:scale-110 transition-transform" />}
-                                                    {result.type === 'project' && <FolderOpen className="w-4 h-4 text-[var(--chart-1)] group-hover:scale-110 transition-transform" />}
-                                                    {result.type === 'conversation' && <MessageSquare className="w-4 h-4 text-[var(--chart-2)] group-hover:scale-110 transition-transform" />}
-                                                    {result.type === 'file' && <Folder className="w-4 h-4 text-[var(--chart-3)] group-hover:scale-110 transition-transform" />}
-                                                    {result.type === 'contact' && <Users className="w-4 h-4 text-[var(--chart-5)] group-hover:scale-110 transition-transform" />}
-                                                  </div>
-                                                  <div className="flex-1 min-w-0 overflow-hidden">
-                                                    <div className="flex items-start gap-2 min-w-0">
-                                                      <h5 className="text-small text-foreground break-words group-hover:text-primary transition-colors flex-1 min-w-0">
-                                                        {result.title}
-                                                      </h5>
-                                                      <span className="px-1.5 py-0.5 rounded text-small bg-[var(--chart-4)]/10 text-[var(--chart-4)] flex-shrink-0 self-start">
-                                                        {result.relevance}%
-                                                      </span>
-                                                    </div>
-                                                    <p className="text-sm text-muted-foreground mt-1 line-clamp-2 break-words">
-                                                      {result.description}
-                                                    </p>
-                                                    <div className="flex items-center gap-3 mt-2 flex-wrap min-w-0">
-                                                      <span className="text-sm text-muted-foreground flex items-center gap-1 min-w-0 max-w-full">
-                                                        <ExternalLink className="w-3 h-3 flex-shrink-0" />
-                                                        <span className="truncate">{result.path}</span>
-                                                      </span>
-                                                      {result.lastModified && (
-                                                        <span className="text-sm text-muted-foreground flex items-center gap-1 flex-shrink-0">
-                                                          <Clock className="w-3 h-3" />
-                                                          {result.lastModified}
-                                                        </span>
-                                                      )}
-                                                    </div>
-                                                  </div>
+                                      )}
+
+                                      {/* Conteúdo da mensagem */}
+                                      {msg.type === 'user' ? (
+                                        <p className="whitespace-pre-wrap break-words text-primary-foreground">{msg.content}</p>
+                                      ) : (
+                                        <>
+                                          {/* Alerta visual para mensagens de erro */}
+                                          {(msg.content.includes('🔐') || msg.content.includes('❌')) && (
+                                            <div className="mb-3 p-3 bg-[var(--toast-error-bg)]/20 border border-[var(--toast-error-border)] rounded-lg overflow-hidden">
+                                              <div className="flex items-start gap-2 min-w-0">
+                                                <AlertCircle className="w-5 h-5 text-[var(--toast-error-icon)] flex-shrink-0 mt-0.5" />
+                                                <div className="flex-1 min-w-0 overflow-hidden">
+                                                  <MarkdownMessage
+                                                    content={msg.content}
+                                                    className="text-foreground"
+                                                  />
                                                 </div>
                                               </div>
                                             </div>
-                                          ))}
+                                          )}
+                                          {/* Mensagem normal */}
+                                          {!(msg.content.includes('🔐') || msg.content.includes('❌')) && (
+                                            <MarkdownMessage
+                                              content={msg.content}
+                                              className="text-foreground"
+                                            />
+                                          )}
+                                        </>
+                                      )}
+
+                                      {/* Image Attachment */}
+                                      {msg.attachmentType === 'image' && msg.documentContent && (
+                                        <div className="mt-3 rounded-lg overflow-hidden border border-border">
+                                          <img
+                                            src={msg.documentContent}
+                                            alt={msg.attachmentName || 'Image'}
+                                            className="w-full h-auto max-h-[300px] object-cover"
+                                          />
                                         </div>
-                                      </div>
+                                      )}
 
-                                      {/* Search Sources */}
-                                      {msg.searchSources && (
-                                        <div>
-                                          <h4 className="text-foreground mb-2">
-                                            Fontes Consultadas
-                                          </h4>
-                                          <div className="flex flex-wrap gap-2 overflow-hidden">
-                                            {msg.searchSources.map((source, index) => (
-                                              <div
-                                                key={index}
-                                                className="px-3 py-1.5 rounded-full bg-muted border border-border max-w-full"
-                                              >
-                                                <span className="text-sm font-medium text-foreground break-words">{source.name}</span>
-                                                <span className="text-sm text-muted-foreground ml-1 whitespace-nowrap">({source.count})</span>
+                                      {/* Chart Rendering */}
+                                      {msg.chartData && msg.chartConfig && (
+                                        <div className="mt-4 mb-2 p-2 bg-background/50 rounded-lg border border-border">
+                                          <ChartContainer config={msg.chartConfig}>
+                                            <BarChart accessibilityLayer data={msg.chartData}>
+                                              <CartesianGrid vertical={false} />
+                                              <XAxis
+                                                dataKey="month"
+                                                tickLine={false}
+                                                tickMargin={10}
+                                                axisLine={false}
+                                                tickFormatter={(value) => value.slice(0, 3)}
+                                              />
+                                              <ChartTooltip
+                                                cursor={false}
+                                                content={<ChartTooltipContent indicator="dashed" />}
+                                              />
+                                              <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
+                                              <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
+                                            </BarChart>
+                                          </ChartContainer>
+                                        </div>
+                                      )}
+
+                                      {/* Table Rendering */}
+                                      {msg.tableData && (
+                                        <div className="mt-4 mb-2 rounded-md border">
+                                          <Table>
+                                            {msg.tableData.caption && <TableCaption>{msg.tableData.caption}</TableCaption>}
+                                            <TableHeader>
+                                              <TableRow>
+                                                {msg.tableData.headers.map((header, index) => (
+                                                  <TableHead key={index}>{header}</TableHead>
+                                                ))}
+                                              </TableRow>
+                                            </TableHeader>
+                                            <TableBody>
+                                              {msg.tableData.rows.map((row, rowIndex) => (
+                                                <TableRow key={rowIndex}>
+                                                  {row.map((cell, cellIndex) => (
+                                                    <TableCell key={cellIndex} className="font-medium">
+                                                      {cell}
+                                                    </TableCell>
+                                                  ))}
+                                                </TableRow>
+                                              ))}
+                                            </TableBody>
+                                          </Table>
+                                        </div>
+                                      )}
+
+                                      {/* Document Preview */}
+                                      {msg.attachmentType === 'document' && msg.documentContent && !msg.chartData && (
+                                        <div className="mt-3 pt-3 border-t border-border overflow-hidden">
+                                          <FormattedDocument
+                                            content={msg.documentContent}
+                                            maxPreviewLength={250}
+                                          />
+                                        </div>
+                                      )}
+
+                                      {/* Podcast Player */}
+                                      {msg.attachmentType === 'podcast' && msg.audioUrl && (
+                                        <div className="mt-3 pt-3 border-t border-border overflow-hidden">
+                                          <div className="flex items-center justify-between mb-3 min-w-0 overflow-hidden">
+                                            <div className="flex items-center gap-2 min-w-0 flex-1 overflow-hidden">
+                                              <div className="w-6 h-6 rounded-full bg-gradient-to-br from-[var(--chart-4)] via-[var(--chart-1)] to-[var(--chart-4)] flex items-center justify-center flex-shrink-0">
+                                                <Radio className="w-3 h-3 text-white" />
                                               </div>
-                                            ))}
+                                              <span className="text-small text-muted-foreground break-words">
+                                                {msg.attachmentName}
+                                              </span>
+                                            </div>
+                                            <Button
+                                              variant="ghost"
+                                              size="sm"
+                                              onClick={() => msg.audioUrl && msg.attachmentName && handleDownloadPodcast(msg.audioUrl, msg.attachmentName)}
+                                              className="h-6 px-2 hover:bg-[var(--toast-success-bg)]/30 hover:text-[var(--toast-success-icon)] flex-shrink-0"
+                                              title="Download"
+                                            >
+                                              <Download className="w-3 h-3" />
+                                            </Button>
+                                          </div>
+                                          <div className="bg-gradient-to-r from-[var(--chart-1)]/10 to-[var(--chart-4)]/10 rounded-lg p-2 overflow-hidden">
+                                            <audio
+                                              controls
+                                              className="w-full max-w-full h-10 outline-none"
+                                            >
+                                              <source src={msg.audioUrl} type="audio/mpeg" />
+                                              Seu navegador não suporta o elemento de áudio.
+                                            </audio>
                                           </div>
                                         </div>
                                       )}
 
-                                      {/* Search Commands */}
-                                      {msg.searchCommands && msg.searchResults && (
-                                        <div>
-                                          <h4 className="text-foreground mb-2">
-                                            O que você pode fazer com estes resultados
-                                          </h4>
-                                          <div className="grid grid-cols-1 gap-2">
-                                            {msg.searchCommands.map((command) => (
-                                              <button
-                                                key={command.id}
-                                                onClick={() => handleExecuteSearchCommand(
-                                                  command.id, 
-                                                  msg.content.replace('🔍 Pesquisa realizada com sucesso!', '').split('"')[1] || 'pesquisa',
-                                                  msg.searchResults!,
-                                                  msg.id
-                                                )}
-                                                disabled={executingCommand === command.id}
-                                                className={`flex items-start gap-2 p-2 rounded-lg border border-border hover:bg-[var(--primary-light)] hover:border-[var(--primary-light-foreground)] transition-all text-left disabled:opacity-50 disabled:cursor-not-allowed ${
-                                                  savedSearches.includes(msg.id) && command.id === '5' ? 'bg-[var(--toast-warning-bg)]/20 border-[var(--toast-warning-border)]' : ''
-                                                }`}
-                                              >
-                                                {executingCommand === command.id ? (
-                                                  <Loader2 className="w-5 h-5 animate-spin flex-shrink-0 text-primary" />
-                                                ) : (
-                                                  <span className="text-lg flex-shrink-0">{command.icon}</span>
-                                                )}
-                                                <div className="flex-1 min-w-0 overflow-hidden">
-                                                  <div className="text-sm font-medium text-foreground break-words">
-                                                    {command.id === '5' && savedSearches.includes(msg.id) ? '⭐ Pesquisa salva' : command.label}
-                                                  </div>
-                                                  <div className="text-sm text-muted-foreground break-words">
-                                                    {executingCommand === command.id ? 'Processando...' : command.description}
+                                      {/* Search Results */}
+                                      {msg.attachmentType === 'search' && msg.searchResults && (
+                                        <div className="mt-3 pt-3 border-t border-border space-y-4 overflow-hidden">
+                                          {/* Search Results List */}
+                                          <div className="overflow-hidden">
+                                            <div className="flex items-center gap-2 mb-3">
+                                              <Search className="w-4 h-4 text-[var(--chart-4)]" />
+                                              <h4 className="text-foreground">
+                                                Resultados Encontrados ({msg.searchResults.length})
+                                              </h4>
+                                            </div>
+                                            <div className="space-y-2 overflow-hidden">
+                                              {msg.searchResults.map((result) => (
+                                                <div
+                                                  key={result.id}
+                                                  onClick={() => handleOpenSearchResult(result)}
+                                                  className="p-3 rounded-lg border border-border hover:bg-[var(--primary-light)] hover:border-[var(--primary-light-foreground)] transition-all cursor-pointer group overflow-hidden"
+                                                >
+                                                  <div className="flex items-start justify-between gap-2 min-w-0">
+                                                    <div className="flex items-start gap-2 flex-1 min-w-0 overflow-hidden">
+                                                      <div className="mt-0.5 flex-shrink-0">
+                                                        {result.type === 'document' && <FileText className="w-4 h-4 text-[var(--chart-4)] group-hover:scale-110 transition-transform" />}
+                                                        {result.type === 'project' && <FolderOpen className="w-4 h-4 text-[var(--chart-1)] group-hover:scale-110 transition-transform" />}
+                                                        {result.type === 'conversation' && <MessageSquare className="w-4 h-4 text-[var(--chart-2)] group-hover:scale-110 transition-transform" />}
+                                                        {result.type === 'file' && <Folder className="w-4 h-4 text-[var(--chart-3)] group-hover:scale-110 transition-transform" />}
+                                                        {result.type === 'contact' && <Users className="w-4 h-4 text-[var(--chart-5)] group-hover:scale-110 transition-transform" />}
+                                                      </div>
+                                                      <div className="flex-1 min-w-0 overflow-hidden">
+                                                        <div className="flex items-start gap-2 min-w-0">
+                                                          <h5 className="text-small text-foreground break-words group-hover:text-primary transition-colors flex-1 min-w-0">
+                                                            {result.title}
+                                                          </h5>
+                                                          <span className="px-1.5 py-0.5 rounded text-small bg-[var(--chart-4)]/10 text-[var(--chart-4)] flex-shrink-0 self-start">
+                                                            {result.relevance}%
+                                                          </span>
+                                                        </div>
+                                                        <p className="text-sm text-muted-foreground mt-1 line-clamp-2 break-words">
+                                                          {result.description}
+                                                        </p>
+                                                        <div className="flex items-center gap-3 mt-2 flex-wrap min-w-0">
+                                                          <span className="text-sm text-muted-foreground flex items-center gap-1 min-w-0 max-w-full">
+                                                            <ExternalLink className="w-3 h-3 flex-shrink-0" />
+                                                            <span className="truncate">{result.path}</span>
+                                                          </span>
+                                                          {result.lastModified && (
+                                                            <span className="text-sm text-muted-foreground flex items-center gap-1 flex-shrink-0">
+                                                              <Clock className="w-3 h-3" />
+                                                              {result.lastModified}
+                                                            </span>
+                                                          )}
+                                                        </div>
+                                                      </div>
+                                                    </div>
                                                   </div>
                                                 </div>
-                                              </button>
-                                            ))}
+                                              ))}
+                                            </div>
                                           </div>
+
+                                          {/* Search Sources */}
+                                          {msg.searchSources && (
+                                            <div>
+                                              <h4 className="text-foreground mb-2">
+                                                Fontes Consultadas
+                                              </h4>
+                                              <div className="flex flex-wrap gap-2 overflow-hidden">
+                                                {msg.searchSources.map((source, index) => (
+                                                  <div
+                                                    key={index}
+                                                    className="px-3 py-1.5 rounded-full bg-muted border border-border max-w-full"
+                                                  >
+                                                    <span className="text-sm font-medium text-foreground break-words">{source.name}</span>
+                                                    <span className="text-sm text-muted-foreground ml-1 whitespace-nowrap">({source.count})</span>
+                                                  </div>
+                                                ))}
+                                              </div>
+                                            </div>
+                                          )}
+
+                                          {/* Search Commands */}
+                                          {msg.searchCommands && msg.searchResults && (
+                                            <div>
+                                              <h4 className="text-foreground mb-2">
+                                                O que você pode fazer com estes resultados
+                                              </h4>
+                                              <div className="grid grid-cols-1 gap-2">
+                                                {msg.searchCommands.map((command) => (
+                                                  <button
+                                                    key={command.id}
+                                                    onClick={() => handleExecuteSearchCommand(
+                                                      command.id,
+                                                      msg.content.replace('🔍 Pesquisa realizada com sucesso!', '').split('"')[1] || 'pesquisa',
+                                                      msg.searchResults!,
+                                                      msg.id
+                                                    )}
+                                                    disabled={executingCommand === command.id}
+                                                    className={`flex items-start gap-2 p-2 rounded-lg border border-border hover:bg-[var(--primary-light)] hover:border-[var(--primary-light-foreground)] transition-all text-left disabled:opacity-50 disabled:cursor-not-allowed ${savedSearches.includes(msg.id) && command.id === '5' ? 'bg-[var(--toast-warning-bg)]/20 border-[var(--toast-warning-border)]' : ''
+                                                      }`}
+                                                  >
+                                                    {executingCommand === command.id ? (
+                                                      <Loader2 className="w-5 h-5 animate-spin flex-shrink-0 text-primary" />
+                                                    ) : (
+                                                      <span className="text-lg flex-shrink-0">{command.icon}</span>
+                                                    )}
+                                                    <div className="flex-1 min-w-0 overflow-hidden">
+                                                      <div className="text-sm font-medium text-foreground break-words">
+                                                        {command.id === '5' && savedSearches.includes(msg.id) ? '⭐ Pesquisa salva' : command.label}
+                                                      </div>
+                                                      <div className="text-sm text-muted-foreground break-words">
+                                                        {executingCommand === command.id ? 'Processando...' : command.description}
+                                                      </div>
+                                                    </div>
+                                                  </button>
+                                                ))}
+                                              </div>
+                                            </div>
+                                          )}
                                         </div>
                                       )}
                                     </div>
-                                  )}
-                                </div>
-                                
-                                {/* Message Actions */}
-                                <div className="flex items-center gap-2 mt-1 px-2">
-                                  <span className="text-sm text-muted-foreground">
-                                    {msg.timestamp.toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' })}
-                                  </span>
-                                  
-                                  <Button
-                                    variant="ghost"
-                                    size="sm"
-                                    onClick={() => handleToggleFavorite(msg.id)}
-                                    className="h-6 w-6 p-0 text-muted-foreground hover:text-destructive"
-                                  >
-                                    <Heart className={`w-3 h-3 ${msg.isFavorite ? 'fill-current text-destructive' : ''}`} />
-                                  </Button>
-                                  
-                                  {/* Botão Gerar Podcast - apenas para mensagens do assistente */}
-                                  {msg.type === 'assistant' && msg.attachmentType !== 'podcast' && (
+
+                                    {/* Message Actions */}
+                                    <div className="flex items-center gap-2 mt-1 px-2">
+                                      <span className="text-sm text-muted-foreground">
+                                        {msg.timestamp.toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' })}
+                                      </span>
+
+                                      <Button
+                                        variant="ghost"
+                                        size="sm"
+                                        onClick={() => handleToggleFavorite(msg.id)}
+                                        className="h-6 w-6 p-0 text-muted-foreground hover:text-destructive"
+                                      >
+                                        <Heart className={`w-3 h-3 ${msg.isFavorite ? 'fill-current text-destructive' : ''}`} />
+                                      </Button>
+
+                                      {/* Botão Gerar Podcast - apenas para mensagens do assistente */}
+                                      {msg.type === 'assistant' && msg.attachmentType !== 'podcast' && (
+                                        <Button
+                                          variant="ghost"
+                                          size="sm"
+                                          onClick={() => handleGeneratePodcast(msg.id, msg.content)}
+                                          disabled={generatingPodcastId === msg.id}
+                                          className="h-6 w-6 p-0 text-muted-foreground hover:text-primary disabled:opacity-50"
+                                          title="Gerar Podcast"
+                                        >
+                                          {generatingPodcastId === msg.id ? (
+                                            <Loader2 className="w-3 h-3 animate-spin" />
+                                          ) : (
+                                            <Radio className="w-3 h-3" />
+                                          )}
+                                        </Button>
+                                      )}
+
+                                      <Button
+                                        variant="ghost"
+                                        size="sm"
+                                        onClick={() => handleCopyMessage(msg.content, msg.id)}
+                                        className="h-6 w-6 p-0 text-muted-foreground hover:text-foreground"
+                                      >
+                                        {copiedId === msg.id ? (
+                                          <Check className="w-3 h-3 text-[var(--toast-success-icon)]" />
+                                        ) : (
+                                          <Copy className="w-3 h-3" />
+                                        )}
+                                      </Button>
+                                    </div>
+
+                                    {/* Feedback UI */}
+                                    {msg.type === 'assistant' && (
+                                      <div className="px-2 pb-2">
+                                        <div className="flex items-center gap-1 mt-2">
+                                          <span className="text-xs text-muted-foreground mr-2">Essa resposta foi útil?</span>
+                                          <Button
+                                            variant="ghost"
+                                            size="icon"
+                                            className={cn(
+                                              "h-6 w-6 rounded-full hover:bg-green-100 dark:hover:bg-green-900/20 hover:text-green-600",
+                                              msg.evaluation === 'like' && "text-green-600 bg-green-100 dark:bg-green-900/20"
+                                            )}
+                                            onClick={() => handleEvaluation(msg.id, 'like')}
+                                            title="Gostei"
+                                          >
+                                            <ThumbsUp className="h-3.5 w-3.5" />
+                                          </Button>
+
+                                          <DropdownMenu>
+                                            <DropdownMenuTrigger asChild>
+                                              <Button
+                                                variant="ghost"
+                                                size="icon"
+                                                className={cn(
+                                                  "h-6 w-6 rounded-full hover:bg-red-100 dark:hover:bg-red-900/20 hover:text-red-600",
+                                                  msg.evaluation === 'dislike' && "text-red-600 bg-red-100 dark:bg-red-900/20"
+                                                )}
+                                                title="Não gostei"
+                                              >
+                                                <ThumbsDown className="h-3.5 w-3.5" />
+                                              </Button>
+                                            </DropdownMenuTrigger>
+                                            <DropdownMenuContent align="start">
+                                              <DropdownMenuItem onClick={() => openFeedbackDialog(msg.id, 'Não era o que eu procurava')}>
+                                                Não era o que eu procurava
+                                              </DropdownMenuItem>
+                                              <DropdownMenuItem onClick={() => openFeedbackDialog(msg.id, 'Informação incorreta')}>
+                                                Informação incorreta
+                                              </DropdownMenuItem>
+                                              <DropdownMenuItem onClick={() => openFeedbackDialog(msg.id, 'Resposta incompleta')}>
+                                                Resposta incompleta
+                                              </DropdownMenuItem>
+                                              <DropdownMenuItem onClick={() => openFeedbackDialog(msg.id, null)}>
+                                                Outros...
+                                              </DropdownMenuItem>
+                                            </DropdownMenuContent>
+                                          </DropdownMenu>
+                                        </div>
+                                      </div>
+                                    )}
+                                  </div>
+                                </motion.div>
+                              ))}
+
+                              {/* Typing Indicator */}
+                              {isTyping && (
+                                <motion.div
+                                  initial={{ opacity: 0, y: 10 }}
+                                  animate={{ opacity: 1, y: 0 }}
+                                  className="flex gap-2 justify-start"
+                                >
+                                  {/* Avatar do Assistente */}
+                                  <div className="flex-shrink-0 pt-1">
+                                    <XerticaOrbe size={32} />
+                                  </div>
+
+                                  <div className="bg-muted rounded-2xl px-4 py-3">
+                                    <div className="flex gap-1">
+                                      <motion.div
+                                        className="w-2 h-2 bg-muted-foreground rounded-full"
+                                        animate={{ y: [0, -8, 0] }}
+                                        transition={{ repeat: Infinity, duration: 0.6, delay: 0 }}
+                                      />
+                                      <motion.div
+                                        className="w-2 h-2 bg-muted-foreground rounded-full"
+                                        animate={{ y: [0, -8, 0] }}
+                                        transition={{ repeat: Infinity, duration: 0.6, delay: 0.2 }}
+                                      />
+                                      <motion.div
+                                        className="w-2 h-2 bg-muted-foreground rounded-full"
+                                        animate={{ y: [0, -8, 0] }}
+                                        transition={{ repeat: Infinity, duration: 0.6, delay: 0.4 }}
+                                      />
+                                    </div>
+                                  </div>
+                                </motion.div>
+                              )}
+
+                              <div ref={messagesEndRef} />
+                            </div>
+                          </ScrollArea>
+                        )}
+                      </div>
+                    )}
+
+                    <Dialog open={feedbackDialogOpen} onOpenChange={setFeedbackDialogOpen}>
+                      <DialogContent className="sm:max-w-[600px]">
+                        <DialogHeader>
+                          <DialogTitle className="pr-8">
+                            {feedbackCategory ? `Enviar feedback: ${feedbackCategory}` : 'Enviar feedback'}
+                          </DialogTitle>
+                          <DialogDescription>
+                            {feedbackCategory
+                              ? "Gostaria de adicionar algum comentário? (Opcional)"
+                              : "Conte-nos por que essa resposta não foi útil para que possamos melhorar."}
+                          </DialogDescription>
+                        </DialogHeader>
+                        <div className="grid gap-4 py-4 px-6">
+                          <Textarea
+                            className="min-h-[100px]"
+                            placeholder={feedbackCategory ? "Comentário adicional..." : "Descreva o motivo..."}
+                            value={feedbackReason}
+                            onChange={(e) => setFeedbackReason(e.target.value)}
+                          />
+                        </div>
+                        <DialogFooter>
+                          <Button variant="outline" onClick={() => setFeedbackDialogOpen(false)}>Cancelar</Button>
+                          <Button
+                            onClick={submitFeedbackDialog}
+                            disabled={!feedbackCategory && !feedbackReason.trim()}
+                          >
+                            {feedbackCategory ? 'Confirmar e Enviar' : 'Enviar feedback'}
+                          </Button>
+                        </DialogFooter>
+                      </DialogContent>
+                    </Dialog>
+
+                    {(abaSelecionada === 'historico' || abaSelecionada === 'favoritos') && (
+                      <ScrollArea className="flex-1 min-h-0">
+                        <div className={`p-4 ${isFullPage ? 'mx-auto w-full max-w-6xl' : ''}`}>
+                          {/* New Conversation Button */}
+                          <Button
+                            variant="outline"
+                            size="sm"
+                            onClick={handleNovaConversa}
+                            className="w-full mb-4 justify-start"
+                          >
+                            <Plus className="w-4 h-4 mr-2" />
+                            Nova Conversa
+                          </Button>
+
+                          {/* Conversations List */}
+                          <div className="space-y-2">
+                            {conversasFiltradas.length === 0 ? (
+                              <div className="text-center py-8">
+                                <Heart className="w-12 h-12 mx-auto text-gray-300 dark:text-gray-600 mb-2" />
+                                <p className="text-muted-foreground">
+                                  {abaSelecionada === 'favoritos'
+                                    ? 'Nenhuma conversa favorita ainda'
+                                    : 'Nenhuma conversa no histórico'}
+                                </p>
+                              </div>
+                            ) : (
+                              conversasFiltradas.map((conversa) => (
+                                <div
+                                  key={conversa.id}
+                                  onClick={() => handleSelecionarConversa(conversa.id)}
+                                  className={`p-3 rounded-lg hover:bg-muted cursor-pointer transition-colors duration-200 border ${conversa.id === conversaAtual
+                                    ? 'border-primary bg-primary/5'
+                                    : 'border-border'
+                                    }`}
+                                >
+                                  <div className="flex items-start justify-between mb-1">
+                                    <h4 className="text-small text-gray-900 dark:text-gray-100 truncate flex-1">
+                                      {conversa.titulo}
+                                    </h4>
                                     <Button
                                       variant="ghost"
                                       size="sm"
-                                      onClick={() => handleGeneratePodcast(msg.id, msg.content)}
-                                      disabled={generatingPodcastId === msg.id}
-                                      className="h-6 w-6 p-0 text-muted-foreground hover:text-primary disabled:opacity-50"
-                                      title="Gerar Podcast"
+                                      onClick={(e) => {
+                                        e.stopPropagation();
+                                        handleToggleFavoritaConversa(conversa.id);
+                                      }}
+                                      className="h-6 w-6 p-0 flex-shrink-0 ml-1"
                                     >
-                                      {generatingPodcastId === msg.id ? (
-                                        <Loader2 className="w-3 h-3 animate-spin" />
-                                      ) : (
-                                        <Radio className="w-3 h-3" />
-                                      )}
+                                      <Heart className={`w-3 h-3 ${conversa.favorita ? 'text-red-500 fill-current' : 'text-gray-400'}`} />
                                     </Button>
+                                  </div>
+                                  {conversa.ultimaMensagem && (
+                                    <p className="text-sm text-muted-foreground truncate mb-1">
+                                      {conversa.ultimaMensagem}
+                                    </p>
                                   )}
-                                  
-                                  <Button
-                                    variant="ghost"
-                                    size="sm"
-                                    onClick={() => handleCopyMessage(msg.content, msg.id)}
-                                    className="h-6 w-6 p-0 text-muted-foreground hover:text-foreground"
-                                  >
-                                    {copiedId === msg.id ? (
-                                      <Check className="w-3 h-3 text-[var(--toast-success-icon)]" />
-                                    ) : (
-                                      <Copy className="w-3 h-3" />
-                                    )}
-                                  </Button>
+                                  <p className="text-sm text-muted-foreground">
+                                    {conversa.timestamp}
+                                  </p>
                                 </div>
-                              </div>
-                            </motion.div>
-                          ))}
-                          
-                          {/* Typing Indicator */}
-                          {isTyping && (
-                            <motion.div
-                              initial={{ opacity: 0, y: 10 }}
-                              animate={{ opacity: 1, y: 0 }}
-                              className="flex gap-2 justify-start"
-                            >
-                              {/* Avatar do Assistente */}
-                              <div className="flex-shrink-0 pt-1">
-                                <XerticaOrbe size={32} />
-                              </div>
-                              
-                              <div className="bg-muted rounded-2xl px-4 py-3">
-                                <div className="flex gap-1">
-                                  <motion.div
-                                    className="w-2 h-2 bg-muted-foreground rounded-full"
-                                    animate={{ y: [0, -8, 0] }}
-                                    transition={{ repeat: Infinity, duration: 0.6, delay: 0 }}
-                                  />
-                                  <motion.div
-                                    className="w-2 h-2 bg-muted-foreground rounded-full"
-                                    animate={{ y: [0, -8, 0] }}
-                                    transition={{ repeat: Infinity, duration: 0.6, delay: 0.2 }}
-                                  />
-                                  <motion.div
-                                    className="w-2 h-2 bg-muted-foreground rounded-full"
-                                    animate={{ y: [0, -8, 0] }}
-                                    transition={{ repeat: Infinity, duration: 0.6, delay: 0.4 }}
-                                  />
-                                </div>
-                              </div>
-                            </motion.div>
-                          )}
-                          
-                          <div ref={messagesEndRef} />
+                              ))
+                            )}
+                          </div>
                         </div>
                       </ScrollArea>
                     )}
                   </div>
-                )}
 
-                {(abaSelecionada === 'historico' || abaSelecionada === 'favoritos') && (
-                  <ScrollArea className="flex-1 min-h-0">
-                    <div className={`p-4 ${isFullPage ? 'mx-auto w-full max-w-6xl' : ''}`}>
-                      {/* New Conversation Button */}
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        onClick={handleNovaConversa}
-                        className="w-full mb-4 justify-start"
-                      >
-                        <Plus className="w-4 h-4 mr-2" />
-                        Nova Conversa
-                      </Button>
-
-                      {/* Conversations List */}
-                      <div className="space-y-2">
-                        {conversasFiltradas.length === 0 ? (
-                          <div className="text-center py-8">
-                            <Heart className="w-12 h-12 mx-auto text-gray-300 dark:text-gray-600 mb-2" />
-                            <p className="text-muted-foreground">
-                              {abaSelecionada === 'favoritos' 
-                                ? 'Nenhuma conversa favorita ainda'
-                                : 'Nenhuma conversa no histórico'}
-                            </p>
-                          </div>
-                        ) : (
-                          conversasFiltradas.map((conversa) => (
-                            <div
-                              key={conversa.id}
-                              onClick={() => handleSelecionarConversa(conversa.id)}
-                              className={`p-3 rounded-lg hover:bg-muted cursor-pointer transition-colors duration-200 border ${
-                                conversa.id === conversaAtual
-                                  ? 'border-primary bg-primary/5'
-                                  : 'border-border'
-                              }`}
-                            >
-                              <div className="flex items-start justify-between mb-1">
-                                <h4 className="text-small text-gray-900 dark:text-gray-100 truncate flex-1">
-                                  {conversa.titulo}
-                                </h4>
-                                <Button
-                                  variant="ghost"
-                                  size="sm"
-                                  onClick={(e) => {
-                                    e.stopPropagation();
-                                    handleToggleFavoritaConversa(conversa.id);
-                                  }}
-                                  className="h-6 w-6 p-0 flex-shrink-0 ml-1"
-                                >
-                                  <Heart className={`w-3 h-3 ${conversa.favorita ? 'text-red-500 fill-current' : 'text-gray-400'}`} />
-                                </Button>
-                              </div>
-                              {conversa.ultimaMensagem && (
-                                <p className="text-sm text-muted-foreground truncate mb-1">
-                                  {conversa.ultimaMensagem}
-                                </p>
-                              )}
-                              <p className="text-sm text-muted-foreground">
-                                {conversa.timestamp}
-                              </p>
-                            </div>
-                          ))
-                        )}
-                      </div>
-                    </div>
-                  </ScrollArea>
-                )}
-              </div>
+                  {/* Modern Input Area - Only visible in chat mode */}
+                  {abaSelecionada === 'chat' && (
+                    <ModernChatInput
+                      value={mensagem}
+                      onChange={setMensagem}
+                      onSubmit={handleEnviarMensagem}
+                      onFileUpload={() => fileInputRef.current?.click()}
+                      onAudioUpload={() => audioInputRef.current?.click()}
+                      onVoiceRecording={(transcript) => {
+                        // Ao finalizar gravação, definir a mensagem transcrita e enviar
+                        setMensagem(transcript);
+                        toast.success('Áudio transcrito com sucesso!', {
+                          description: 'Sua mensagem foi convertida de voz para texto.',
+                          duration: 3000,
+                        });
+                        // Enviar automaticamente após um pequeno delay para o usuário ver a transcrição
+                        setTimeout(() => {
+                          if (!isTyping) {
+                            handleEnviarMensagem();
+                          }
+                        }, 1500);
+                      }}
+                      placeholder="Envie uma mensagem para Xertica"
+                      disabled={isTyping}
+                      isFullPage={isFullPage}
+                    />
+                  )}
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </div>
 
-              {/* Modern Input Area - Only visible in chat mode */}
-              {abaSelecionada === 'chat' && (
-                <ModernChatInput
-                  value={mensagem}
-                  onChange={setMensagem}
-                  onSubmit={handleEnviarMensagem}
-                  onFileUpload={() => fileInputRef.current?.click()}
-                  onAudioUpload={() => audioInputRef.current?.click()}
-                  onVoiceRecording={(transcript) => {
-                    // Ao finalizar gravação, definir a mensagem transcrita e enviar
-                    setMensagem(transcript);
-                    toast.success('Áudio transcrito com sucesso!', {
-                      description: 'Sua mensagem foi convertida de voz para texto.',
-                      duration: 3000,
-                    });
-                    // Enviar automaticamente após um pequeno delay para o usuário ver a transcrição
-                    setTimeout(() => {
-                      if (!isTyping) {
-                        handleEnviarMensagem();
-                      }
-                    }, 1500);
-                  }}
-                  placeholder="Envie uma mensagem para Xertica"
-                  disabled={isTyping}
-                  isFullPage={isFullPage}
+          {/* Document Editor - Right Side */}
+          {isFullPage ? (
+            // Modo fullPage: editor fixo ocupando 50% da tela quando aberto
+            editingDocument && (
+              <div className="w-1/2 h-full bg-background border-l border-border">
+                <DocumentEditor
+                  initialContent={editingDocument.content}
+                  initialTitle={editingDocument.title}
+                  onClose={handleCloseEditor}
                 />
+              </div>
+            )
+          ) : (
+            // Modo sidebar: editor com animação deslizante
+            <AnimatePresence>
+              {editingDocument && isExpanded && (
+                <motion.div
+                  initial={{ x: 600 }}
+                  animate={{ x: 0 }}
+                  exit={{ x: 600 }}
+                  transition={{ duration: 0.3, ease: 'easeInOut' }}
+                  className="w-[600px] h-full bg-background border-l border-border"
+                >
+                  <DocumentEditor
+                    initialContent={editingDocument.content}
+                    initialTitle={editingDocument.title}
+                    onClose={handleCloseEditor}
+                  />
+                </motion.div>
               )}
-            </motion.div>
+            </AnimatePresence>
           )}
-        </AnimatePresence>
+        </div>
       </div>
-
-      {/* Document Editor - Right Side */}
-      {isFullPage ? (
-        // Modo fullPage: editor fixo ocupando 50% da tela quando aberto
-        editingDocument && (
-          <div className="w-1/2 h-full bg-background border-l border-border">
-            <DocumentEditor
-              initialContent={editingDocument.content}
-              initialTitle={editingDocument.title}
-              onClose={handleCloseEditor}
-            />
-          </div>
-        )
-      ) : (
-        // Modo sidebar: editor com animação deslizante
-        <AnimatePresence>
-          {editingDocument && isExpanded && (
-            <motion.div
-              initial={{ x: 600 }}
-              animate={{ x: 0 }}
-              exit={{ x: 600 }}
-              transition={{ duration: 0.3, ease: 'easeInOut' }}
-              className="w-[600px] h-full bg-background border-l border-border"
-            >
-              <DocumentEditor
-                initialContent={editingDocument.content}
-                initialTitle={editingDocument.title}
-                onClose={handleCloseEditor}
-              />
-            </motion.div>
-          )}
-        </AnimatePresence>
-      )}
-    </div>
-    </div>
     </>
   );
 }