xertica-ui 2.1.2 → 2.1.4

package/components/assistant/xertica-assistant/xertica-assistant.tsx

@@ -1,248 +1,64 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React from 'react';
+import { useAssistant } from './use-assistant';
 import { motion, AnimatePresence } from 'framer-motion';
-import {
-  MessageSquare,
-  Heart,
-  History,
-  MoreHorizontal,
-  X,
-  ChevronLeft,
-  ChevronRight,
-  PanelRight,
-  Plus,
-  Copy,
-  Check,
-  FileText,
-  Music,
-  Image as ImageIcon,
-  Radio,
-  Loader2,
-  Edit,
-  Download,
-  Search,
-  Folder,
-  Users,
-  ExternalLink,
-  Star,
-  Clock,
-  FolderOpen,
-  Filter,
-  Mail,
-  BarChart3,
-  Bookmark,
-  Maximize2,
-  AlertCircle,
-  ThumbsUp,
-  ThumbsDown,
-  Table as TableIcon,
-  ArrowLeft,
-  Bold,
-  Italic,
-  Underline,
-  AlignLeft,
-  AlignCenter,
-  AlignRight,
-  List,
-  Type
-} from 'lucide-react';
-import {
-  Bar,
-  BarChart,
-  CartesianGrid,
-  XAxis,
-  Tooltip as RechartsTooltip,
-  ResponsiveContainer
-} from "recharts";
-import {
-  ChartConfig,
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  ChartLegend,
-  ChartLegendContent
-} from '../../ui/chart';
-import {
-  Table,
-  TableBody,
-  TableCaption,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '../../ui/table';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '../../ui/dialog';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '../../ui/dropdown-menu';
-import { Textarea } from '../../ui/textarea';
-import { Button } from '../../ui/button';
 import { ScrollArea } from '../../ui/scroll-area';
-import { Separator } from '../../ui/separator';
-import { RichTextEditor } from '../../ui/rich-text-editor';
-import { MarkdownMessage } from '../markdown-message';
-import { FormattedDocument } from '../formatted-document';
 import { ModernChatInput } from '../modern-chat-input';
-import type { ActionType } from '../modern-chat-input';
 import { XerticaOrbe } from '../../brand/xertica-orbe';
-import { Tooltip, TooltipTrigger } from '../../ui/tooltip';
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { Button } from '../../ui/button';
 import { cn } from '../../shared/utils';
-import { toast } from 'sonner';
 
-// Tooltip customizado estilo sidebar (branco)
-function AssistantTooltipContent({
-  className,
-  sideOffset = 0,
-  children,
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
-  return (
-    <TooltipPrimitive.Portal>
-      <TooltipPrimitive.Content
-        data-slot="tooltip-content"
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-popover text-popover-foreground shadow-lg animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
-          className,
-        )}
-        {...props}
-      >
-        {children}
-        <TooltipPrimitive.Arrow
-          className="fill-popover z-50 drop-shadow-sm"
-          width={8}
-          height={4}
-        />
-      </TooltipPrimitive.Content>
-    </TooltipPrimitive.Portal>
-  );
-}
+// Sub-components
+import {
+  AssistantCollapsedView,
+  AssistantHeader,
+  AssistantTabBar,
+  AssistantWelcomeScreen,
+  AssistantMessageBubble,
+  AssistantTypingIndicator,
+  AssistantConversationList,
+  AssistantFeedbackDialog,
+  AssistantDocumentEditor,
+} from './parts';
+import type { EvaluationState } from './parts';
 
 // ============================================================================
-// TypeScript Interfaces & Types
+// TypeScript Interfaces & Types — imported from shared types.ts and re-exported
+// for backward compatibility with consumers that import from xertica-assistant.
 // ============================================================================
-
-/**
- * Supported message sender types in the assistant
- */
-export type MessageType = 'user' | 'assistant' | 'system';
-
-/**
- * Supported attachment types that can be included in messages
- */
-export type AttachmentType = 'file' | 'audio' | 'image' | 'video' | 'document' | 'podcast' | 'search';
-
-/**
- * Supported search result categories
- */
-export type SearchResultType = 'document' | 'project' | 'conversation' | 'file' | 'contact';
-
-/**
- * Individual search result item returned by an assistant search query
- */
-export interface SearchResult {
-  id: string;
-  type: SearchResultType;
-  title: string;
-  description: string;
-  path: string;
-  relevance: number;
-  lastModified?: string;
-}
-
-/**
- * Metadata about a search source (e.g., a document repository or knowledge base)
- */
-export interface SearchSource {
-  name: string;
-  count: number;
-}
-
-/**
- * A quick-action command shown below a search result message
- */
-export interface SearchCommand {
-  id: string;
-  icon: string;
-  label: string;
-  description: string;
-}
-
-/**
- * A single chat message in the assistant conversation
- */
-export interface Message {
-  id: string;
-  type: MessageType;
-  content: string;
-  timestamp: Date;
-  isFavorite?: boolean;
-  attachmentType?: AttachmentType;
-  attachmentName?: string;
-  documentContent?: string;
-  documentTitle?: string;
-  audioUrl?: string;
-  searchResults?: SearchResult[];
-  searchSources?: SearchSource[];
-  searchCommands?: SearchCommand[];
-  chartData?: any[];
-  chartConfig?: any;
-  tableData?: {
-    caption?: string;
-    headers: string[];
-    rows: (string | React.ReactNode)[][];
-  };
-  evaluation?: 'like' | 'dislike';
-  evaluationReason?: string;
-}
-
-/**
- * A saved conversation entry shown in the history panel
- */
-export interface Conversation {
-  id: string;
-  title: string;
-  lastMessage?: string;
-  timestamp: string;
-  isFavorite: boolean;
-  messages: Message[];
-}
-
-/**
- * A suggested prompt shown to the user in the chat input area
- */
-export interface Suggestion {
-  id: string;
-  text: string;
-  icon?: React.ReactNode;
-}
-
-/**
- * Layout mode for the assistant panel
- */
-export type AssistantMode = 'collapsed' | 'expanded' | 'fullPage';
-
-/**
- * Available tabs in the assistant panel
- */
-export type AssistantTab = 'chat' | 'historico' | 'favoritos';
+import type {
+  MessageType,
+  AttachmentType,
+  SearchResultType,
+  AssistantMode,
+  AssistantTab,
+  SearchResult,
+  SearchSource,
+  SearchCommand,
+  Message,
+  Conversation,
+  Suggestion,
+  MockResponse,
+} from './types';
+
+export type {
+  MessageType,
+  AttachmentType,
+  SearchResultType,
+  AssistantMode,
+  AssistantTab,
+  SearchResult,
+  SearchSource,
+  SearchCommand,
+  Message,
+  Conversation,
+  Suggestion,
+  MockResponse,
+};
 
 // ============================================================================
 // Component Props
 // ============================================================================
 
-import { gerarResposta, type MockResponse } from '../../shared/assistant-utils';
-
 export interface XerticaAssistantProps {
   /**
    * Layout mode for the assistant panel
@@ -277,8 +93,6 @@ export interface XerticaAssistantProps {
    */
   customResponses?: MockResponse[];
 
-
-
   /**
    * Callback fired when the user navigates to the settings page
    */
@@ -310,6 +124,12 @@ export interface XerticaAssistantProps {
    */
   suggestions?: Suggestion[];
 
+  /**
+   * Subtitle shown below the user's name in the empty state.
+   * @default 'Como posso ajudar?'
+   */
+  welcomeMessage?: string;
+
   /**
    * Callback fired when the user sends a message
    */
@@ -480,6 +300,7 @@ export function XerticaAssistant({
   customResponses = [],
   responseGenerator,
   richSuggestions = [],
+  welcomeMessage = 'Como posso ajudar?',
   onRichAction,
   onEvaluation,
   feedbackOptions,
@@ -493,368 +314,68 @@ export function XerticaAssistant({
   enableSearch = true,
 }: XerticaAssistantProps) {
   // ============================================================================
-  // State Management
-  // ============================================================================
-
-  const isFullPage = mode === 'fullPage';
-  const [internalIsExpanded, setInternalIsExpanded] = useState(controlledIsExpanded ?? true);
-  const isExpanded = controlledIsExpanded ?? internalIsExpanded;
-
-  const [isMobile, setIsMobile] = useState(false);
-  useEffect(() => {
-    const handleResize = () => setIsMobile(window.innerWidth < 768);
-    handleResize();
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
-  }, []);
-
-  const [abaSelecionada, setAbaSelecionada] = useState<AssistantTab>(defaultTab);
-  const [mensagens, setMensagens] = useState<Message[]>(initialMessages);
-  const [mensagem, setMensagem] = useState('');
-  const [conversas, setConversas] = useState<Conversation[]>(savedConversations);
-  const [conversaAtual, setConversaAtual] = useState<string | null>(null);
-  const [copiedId, setCopiedId] = useState<string | null>(null);
-  const [generatingPodcastId, setGeneratingPodcastId] = useState<string | null>(null);
-  const [executingCommand, setExecutingCommand] = useState<string | null>(null);
-  const [savedSearches, setSavedSearches] = useState<string[]>([]);
-  const [editingDocument, setEditingDocument] = useState<{
-    content: string;
-    title: string;
-  } | null>(null);
-  const [showMoreSuggestions, setShowMoreSuggestions] = useState(false);
-  const [evaluationState, setEvaluationState] = useState<{
-    isOpen: boolean;
-    messageId: string | null;
-    type: 'dislike' | null;
-    category?: string | null;
-    reason: string;
-  }>({
-    isOpen: false,
-    messageId: null,
-    type: null,
-    category: null,
-    reason: ''
-  });
-
-  // ============================================================================
-  // Refs
-  // ============================================================================
-
-  const messagesEndRef = useRef<HTMLDivElement>(null);
-  const fileInputRef = useRef<HTMLInputElement>(null);
-  const audioInputRef = useRef<HTMLInputElement>(null);
-
-  // ============================================================================
-  // Sugestões padrão
-  // ============================================================================
-
-  const defaultSuggestions: Suggestion[] = [
-    { id: '1', text: 'Me ajude a criar um documento profissional' },
-    { id: '2', text: 'Buscar nos meus arquivos por "relatório"' },
-    { id: '3', text: 'Resuma as conversas importantes desta semana' },
-    { id: '4', text: 'Crie um podcast sobre o último projeto' },
-  ];
-
-  const sugestoes = propSuggestions ?? defaultSuggestions;
-
-  // API Key Validation removed
-
-
-  // ============================================================================
-  // Effects
-  // ============================================================================
-
-  // Auto-scroll ao adicionar mensagens
-  useEffect(() => {
-    if (messagesEndRef.current && abaSelecionada === 'chat') {
-      messagesEndRef.current.scrollIntoView({ behavior: 'smooth' });
-    }
-  }, [mensagens, abaSelecionada]);
-
-  // Sincronizar mensagens iniciais apenas quando elas mudarem e não forem vazias
-  useEffect(() => {
-    if (initialMessages && initialMessages.length > 0) {
-      setMensagens(initialMessages);
-    }
-  }, [initialMessages]);
-
-  // ============================================================================
-  // Handlers
-  // ============================================================================
-
-  const handleToggle = () => {
-    if (onToggle) {
-      onToggle();
-    } else {
-      setInternalIsExpanded(!internalIsExpanded);
-    }
-  };
-
-  const handleExpandWithTab = (tab: AssistantTab) => {
-    setAbaSelecionada(tab);
-    if (onToggle) {
-      onToggle();
-    } else {
-      setInternalIsExpanded(true);
-    }
-  };
-
-  const handleEnviarMensagem = async (arg?: string | ActionType) => {
-    let msgToSend = mensagem;
-
-    // Check if argument is a message text (from simple string) or ActionType
-    if (typeof arg === 'string' && !['document', 'podcast', 'search'].includes(arg)) {
-      msgToSend = arg;
-    }
-
-    if (!msgToSend.trim() || isProcessing) return;
-
-    const novaMensagem: Message = {
-      id: `msg-${Date.now()}`,
-      type: 'user',
-      content: msgToSend,
-      timestamp: new Date(),
-      isFavorite: false,
-    };
-
-    setMensagens(prev => [...prev, novaMensagem]);
-
-
-    if (onSendMessage) {
-      onSendMessage(msgToSend);
-    }
-
-    if (demoMode || responseGenerator) {
-      const mensagemAtual = msgToSend;
-      setTimeout(async () => {
-        let resposta: string | Partial<Message>;
-
-        if (responseGenerator) {
-          resposta = await responseGenerator(mensagemAtual);
-        } else {
-          resposta = gerarResposta(mensagemAtual, customResponses);
-        }
-
-        let novaMensagemIA: Message = {
-          id: `msg-${Date.now()}-ia`,
-          type: 'assistant',
-          content: '',
-          timestamp: new Date(),
-          isFavorite: false
-        };
-
-        if (typeof resposta === 'string') {
-          novaMensagemIA.content = resposta;
-        } else {
-          novaMensagemIA = { ...novaMensagemIA, ...resposta };
-        }
-
-        setMensagens(prev => [...prev, novaMensagemIA]);
-      }, 1000 + Math.random() * 1000);
-    }
-
-    setMensagem('');
-  };
-
-  const handleToggleFavorite = (messageId: string) => {
-    setMensagens(prev =>
-      prev.map(msg =>
-        msg.id === messageId ? { ...msg, isFavorite: !msg.isFavorite } : msg
-      )
-    );
-  };
-
-  const handleCopyMessage = async (content: string, messageId: string) => {
-    try {
-      // Try modern Clipboard API first
-      if (navigator.clipboard && navigator.clipboard.writeText) {
-        try {
-          await navigator.clipboard.writeText(content);
-          setCopiedId(messageId);
-          setTimeout(() => setCopiedId(null), 2000);
-        } catch (clipboardError: any) {
-          // If clipboard API fails due to permissions, fall back to execCommand
-          if (clipboardError.name === 'NotAllowedError' || clipboardError.message.includes('permissions policy')) {
-            throw new Error('Clipboard permission denied, falling back');
-          }
-          throw clipboardError;
-        }
-      } else {
-        throw new Error('Clipboard API not available');
-      }
-    } catch (err) {
-      // Fallback for browsers that don't support Clipboard API or when permissions are denied
-      try {
-        const textArea = document.createElement('textarea');
-        textArea.value = content;
-        textArea.style.position = 'fixed';
-        textArea.style.left = '-999999px';
-        textArea.style.top = '-999999px';
-        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);
-        } else {
-          console.error('Falha ao copiar: execCommand returned false');
-        }
-      } catch (fallbackErr) {
-        console.error('Falha ao copiar:', fallbackErr);
-      }
-    }
-  };
-
-  const handleGeneratePodcast = async (messageId: string, content: string) => {
-    setGeneratingPodcastId(messageId);
-
-    // Simulação de geração de podcast
-    setTimeout(() => {
-      setMensagens(prev =>
-        prev.map(msg =>
-          msg.id === messageId
-            ? {
-              ...msg,
-              attachmentType: 'podcast',
-              attachmentName: 'Podcast - ' + content.substring(0, 30) + '...',
-              audioUrl: 'data:audio/mpeg;base64,//uQx...' // Mock
-            }
-            : msg
-        )
-      );
-      setGeneratingPodcastId(null);
-    }, 2000);
-  };
-
-  const handleDownloadDocument = (content: string, fileName: string) => {
-    const blob = new Blob([content], { type: 'text/markdown' });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = fileName.endsWith('.md') ? fileName : fileName + '.md';
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-    URL.revokeObjectURL(url);
-  };
-
-  const handleDownloadPodcast = (audioUrl: string, fileName: string) => {
-    const a = document.createElement('a');
-    a.href = audioUrl;
-    a.download = fileName.endsWith('.mp3') ? fileName : fileName + '.mp3';
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-  };
-
-  const handleEditDocument = (content: string, title: string) => {
-    setEditingDocument({ content, title });
-  };
-
-  const handleNovaConversa = () => {
-    setMensagens([]);
-    setConversaAtual(null);
-    setAbaSelecionada('chat');
-  };
-
-  const handleSelecionarConversa = (conversaId: string) => {
-    const conversa = conversas.find(c => c.id === conversaId);
-    if (conversa) {
-      setMensagens(conversa.messages);
-      setConversaAtual(conversaId);
-      setAbaSelecionada('chat');
-    }
-  };
-
-  const handleToggleFavoritaConversa = (conversaId: string) => {
-    setConversas(prev =>
-      prev.map(conv =>
-        conv.id === conversaId ? { ...conv, isFavorite: !conv.isFavorite } : conv
-      )
-    );
-  };
-
-  const handleOpenSearchResult = (result: SearchResult) => {
-    console.log('Abrir resultado:', result);
-    // Implementar lógica de navegação ou abertura de resultado
-  };
-
-  const handleExecuteSearchCommand = async (
-    commandId: string,
-    searchTerm: string,
-    results: SearchResult[],
-    messageId: string
-  ) => {
-    setExecutingCommand(commandId);
-
-    // Simular execução de comando
-    setTimeout(() => {
-      if (commandId === '5') {
-        setSavedSearches(prev => [...prev, messageId]);
-      }
-      setExecutingCommand(null);
-    }, 1500);
-  };
-
-  const handleRichSuggestionClick = (suggestion: Suggestion) => {
-    if (onRichAction) {
-      onRichAction(suggestion.id, suggestion.text);
-    } else {
-      // Fallback: send as message
-      handleEnviarMensagem(suggestion.text);
-    }
-    setShowMoreSuggestions(false);
-  };
-
-  const handleEvaluationClick = (messageId: string, type: 'like' | 'dislike') => {
-    if (type === 'like') {
-      if (onEvaluation) onEvaluation(messageId, 'like');
-      // Update local state
-      setMensagens(prev => prev.map(m => m.id === messageId ? { ...m, evaluation: 'like' } : m));
-      toast.success("Obrigado por avaliar positivamente!");
-    }
-  };
-
-  const openFeedbackDialog = (messageId: string, category: string | null) => {
-    setEvaluationState({
-      isOpen: true,
-      messageId,
-      type: 'dislike',
-      category,
-      reason: ''
-    });
-  };
-
-  const handleSubmitDislike = () => {
-    if (evaluationState.messageId) {
-      const finalReason = evaluationState.category
-        ? (evaluationState.reason ? `${evaluationState.category}: ${evaluationState.reason}` : evaluationState.category)
-        : evaluationState.reason;
-
-      if (onEvaluation) {
-        onEvaluation(evaluationState.messageId, 'dislike', finalReason);
-      }
-
-      // Update local state
-      setMensagens(prev => prev.map(m => m.id === evaluationState.messageId ? { ...m, evaluation: 'dislike', evaluationReason: finalReason } : m));
-      toast.success("Obrigado pelo seu feedback. Vamos melhorar.");
-    }
-    setEvaluationState({ isOpen: false, messageId: null, type: null, category: null, reason: '' });
-  };
-
-  // ============================================================================
-  // Computations
+  // State & Logic — delegated to useAssistant hook
   // ============================================================================
 
-  const conversasFiltradas = conversas.filter(conversa => {
-    if (abaSelecionada === 'favoritos') {
-      return conversa.isFavorite;
-    }
-    return true;
+  const {
+    isFullPage,
+    isExpanded,
+    isMobile,
+    abaSelecionada,
+    setAbaSelecionada,
+    mensagens,
+    mensagem,
+    setMensagem,
+    conversaAtual,
+    conversasFiltradas,
+    copiedId,
+    generatingPodcastId,
+    executingCommand,
+    savedSearches,
+    editingDocument,
+    setEditingDocument,
+    showMoreSuggestions,
+    setShowMoreSuggestions,
+    evaluationState,
+    setEvaluationState,
+    sugestoes,
+    messagesEndRef,
+    fileInputRef,
+    audioInputRef,
+    handleToggle,
+    handleExpandWithTab,
+    handleEnviarMensagem,
+    handleToggleFavorite,
+    handleCopyMessage,
+    handleGeneratePodcast,
+    handleDownloadDocument,
+    handleDownloadPodcast,
+    handleEditDocument,
+    handleNovaConversa,
+    handleSelecionarConversa,
+    handleToggleFavoritaConversa,
+    handleOpenSearchResult,
+    handleExecuteSearchCommand,
+    handleRichSuggestionClick,
+    handleEvaluationClick,
+    openFeedbackDialog,
+    handleSubmitDislike,
+  } = useAssistant({
+    mode,
+    isExpanded: controlledIsExpanded,
+    onToggle,
+    defaultTab,
+    demoMode,
+    customResponses,
+    initialMessages,
+    savedConversations,
+    suggestions: propSuggestions,
+    onSendMessage,
+    isProcessing,
+    responseGenerator,
+    richSuggestions,
+    onRichAction,
+    onEvaluation,
   });
 
   // ============================================================================
@@ -865,11 +386,12 @@ export function XerticaAssistant({
     isFullPage
       ? '100%'
       : isExpanded
-        ? (editingDocument ? '420px' : '420px')
+        ? '420px'
         : '80px' // Compacto quando fechado - apenas ícones
   );
   const containerHeight = height ?? 'h-full';
 
+  // Mobile floating button — shown when collapsed on mobile
   if (isMobile && !isExpanded) {
     return (
       <Button
@@ -927,195 +449,37 @@ export function XerticaAssistant({
           width: isFullPage ? '100%' : containerWidth,
         } : undefined}
       >
-      {/* Document Editor Overlay */}
-      {editingDocument && !isFullPage && (
-        <div
-          className={cn(
-            "flex flex-col border-border bg-background overflow-hidden transition-all duration-300",
-            isMobile ? "fixed inset-0 z-[110] w-full h-[100dvh]" : "absolute top-0 bottom-0 right-full w-[800px] border-l border-r border-border shadow-[-25px_0_50px_-15px_rgba(0,0,0,0.15)] z-[90]"
-          )}
-          style={{ maxWidth: isMobile ? 'none' : `calc(100vw - ${containerWidth})` }}
-        >
-          <div className="h-full flex flex-col">
-            {/* Header Toolbar */}
-            <div className="px-4 h-[64px] border-b border-border bg-card flex items-center justify-between">
-              <div className="flex items-center gap-3">
-                <div className="p-2 bg-primary/10 rounded-md">
-                  <FileText className="w-4 h-4 text-primary" />
-                </div>
-                <h3 className="font-semibold text-card-foreground text-sm">{editingDocument.title}</h3>
-              </div>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="h-8 w-8 rounded-full"
-                onClick={() => setEditingDocument(null)}
-                aria-label="Fechar editor de documento"
-              >
-                <X className="w-4 h-4" />
-              </Button>
-            </div>
-            
-            {/* Rich Text Editor */}
-            <div className="flex-1 bg-muted/20 p-0 sm:p-6 overflow-hidden">
-              <RichTextEditor 
-                value={editingDocument.content || ''}
-                onChange={(newVal) => setEditingDocument(prev => prev ? { ...prev, content: newVal } : null)}
-                placeholder="Comece a digitar o conteúdo do seu documento aqui..."
-                className="max-w-4xl mx-auto h-full"
-                actionButton={
-                  <Button size="sm" className="gap-2 h-8">
-                    <Check className="w-3.5 h-3.5" />
-                    Salvar
-                  </Button>
-                }
-              />
-            </div>
-          </div>
-        </div>
-      )}
-        {/* Header - Toggle Button - Apenas visível quando não está em fullPage */}
-        {!isFullPage && (
-          <div
-            className={cn(
-              "border-b border-border flex items-center h-[64px]",
-              isExpanded ? "justify-between px-4" : "justify-center px-0"
-            )}
-          >
-            {isExpanded && (
-              <motion.div
-                initial={{ opacity: 0, x: -10 }}
-                animate={{ opacity: 1, x: 0 }}
-                exit={{ opacity: 0, x: -10 }}
-                className="flex items-center gap-2 overflow-hidden"
-              >
-                <div className="flex-shrink-0">
-                  <XerticaOrbe size={32} />
-                </div>
-                <span className="text-foreground font-medium truncate">Assistente Xertica</span>
-              </motion.div>
-            )}
-
-            <div className="flex items-center gap-1">
-              {isExpanded && onNavigateFullPage && (
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={onNavigateFullPage}
-                  className="h-8 w-8 p-0 text-muted-foreground hover:bg-accent hover:text-accent-foreground rounded-full"
-                  title="Expandir assistente"
-                  aria-label="Expandir assistente"
-                >
-                  <Maximize2 className="w-4 h-4" />
-                </Button>
-              )}
+        {/* Document Editor Overlay */}
+        {editingDocument && !isFullPage && (
+          <AssistantDocumentEditor
+            document={editingDocument}
+            isMobile={isMobile}
+            containerWidth={containerWidth}
+            onClose={() => setEditingDocument(null)}
+            onChange={(doc) => setEditingDocument(doc)}
+          />
+        )}
 
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={handleToggle}
-                className={cn(
-                  "h-8 w-8 p-0 text-muted-foreground hover:bg-accent hover:text-accent-foreground rounded-full",
-                  !isExpanded && "w-10 h-10" // Slightly larger touch target when collapsed if desired, or keep consistent
-                )}
-                aria-label={isExpanded ? "Recolher assistente" : "Expandir assistente"}
-              >
-                {isExpanded ? (
-                  <ChevronRight className="w-4 h-4" />
-                ) : (
-                  <PanelRight className="w-4 h-4" />
-                )}
-              </Button>
-            </div>
-          </div>
+        {/* Header — only visible when not in fullPage mode */}
+        {!isFullPage && (
+          <AssistantHeader
+            isExpanded={isExpanded}
+            onToggle={handleToggle}
+            onNavigateFullPage={onNavigateFullPage}
+          />
         )}
 
-        {/* Collapsed State - Icons Only */}
+        {/* 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={handleToggle}
-                  className="w-10 h-10 rounded-full flex items-center justify-center hover:bg-accent/50 transition-colors duration-200 cursor-pointer mx-auto"
-                  aria-label="Abrir assistente"
-                >
-                  <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"
-                >
-                  <MessageSquare className="w-4 h-4" />
-                </Button>
-              </TooltipTrigger>
-              <AssistantTooltipContent
-                side="left"
-                sideOffset={8}
-              >
-                <p>Chat</p>
-              </AssistantTooltipContent>
-            </Tooltip>
-
-            {showFavorites && (
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    onClick={() => handleExpandWithTab('favoritos')}
-                    className="w-8 h-8 p-0 text-muted-foreground"
-                  >
-                    <Heart className="w-4 h-4" />
-                  </Button>
-                </TooltipTrigger>
-                <AssistantTooltipContent
-                  side="left"
-                  sideOffset={8}
-                >
-                  <p>Favoritos</p>
-                </AssistantTooltipContent>
-              </Tooltip>
-            )}
-
-            {showHistory && (
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    onClick={() => handleExpandWithTab('historico')}
-                    className="w-8 h-8 p-0 text-muted-foreground"
-                  >
-                    <History className="w-4 h-4" />
-                  </Button>
-                </TooltipTrigger>
-                <AssistantTooltipContent
-                  side="left"
-                  sideOffset={8}
-                >
-                  <p>Histórico</p>
-                </AssistantTooltipContent>
-              </Tooltip>
-            )}
-          </div>
+          <AssistantCollapsedView
+            showHistory={showHistory}
+            showFavorites={showFavorites}
+            onToggle={handleToggle}
+            onExpandWithTab={handleExpandWithTab}
+          />
         )}
 
-        {/* Expanded State - Full Content */}
+        {/* Expanded State — Full Content */}
         <AnimatePresence>
           {(isExpanded || isFullPage) && (
             <motion.div
@@ -1125,600 +489,61 @@ export function XerticaAssistant({
               transition={{ duration: 0.2 }}
               className="flex-1 flex flex-col overflow-hidden"
             >
-              {/* Navigation Tabs - Oculto em modo fullPage e quando não há abas alternativas */}
+              {/* Navigation Tabs — hidden in fullPage mode and when no secondary tabs are enabled */}
               {!isFullPage && (showHistory || showFavorites) && (
-                <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"
-                      aria-label="Ver chat"
-                    >
-                      <MessageSquare className="w-3 h-3 mr-1" />
-                      Chat
-                    </Button>
-                    {showHistory && (
-                      <Button
-                        variant={abaSelecionada === 'historico' ? 'default' : 'ghost'}
-                        size="sm"
-                        onClick={() => setAbaSelecionada('historico')}
-                        className="flex-1 h-8"
-                        aria-label="Ver histórico de conversas"
-                      >
-                        <History className="w-3 h-3 mr-1" />
-                        Histórico
-                      </Button>
-                    )}
-                    {showFavorites && (
-                      <Button
-                        variant={abaSelecionada === 'favoritos' ? 'default' : 'ghost'}
-                        size="sm"
-                        onClick={() => setAbaSelecionada('favoritos')}
-                        className="flex-1 h-8"
-                        aria-label="Ver mensagens favoritas"
-                      >
-                        <Heart className="w-3 h-3 mr-1" />
-                        Favoritos
-                      </Button>
-                    )}
-                  </div>
-                </div>
+                <AssistantTabBar
+                  activeTab={abaSelecionada}
+                  showHistory={showHistory}
+                  showFavorites={showFavorites}
+                  onTabChange={setAbaSelecionada}
+                />
               )}
 
               {/* Content Area */}
               <div className="flex-1 overflow-hidden flex flex-col">
+
+                {/* Chat Tab */}
                 {abaSelecionada === 'chat' && (
                   <div className={`flex-1 flex flex-col min-h-0 ${isFullPage ? 'mx-auto w-full max-w-6xl' : ''}`}>
-                    {/* API Key Warning Banner */}
-
-
                     {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="mb-2 text-foreground">
-                            Olá, {userName}
-                          </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={() => handleEnviarMensagem(sugestao.text)}
-                              className="w-full p-3 text-left rounded-[var(--radius-card)] bg-muted text-foreground transition-colors duration-200 hover:bg-muted/80"
-                            >
-                              {sugestao.text}
-                            </button>
-                          ))}
-
-                          {!showMoreSuggestions ? (
-                            <Button
-                              variant="ghost"
-                              size="sm"
-                              onClick={() => setShowMoreSuggestions(true)}
-                              className="w-full justify-start text-muted-foreground"
-                            >
-                              <MoreHorizontal className="w-4 h-4 mr-2" />
-                              Mais sugestões
-                            </Button>
-                          ) : (
-                            <div className="space-y-2 pt-2 border-t border-border mt-2 animate-in slide-in-from-top-2">
-                              {richSuggestions.length > 0 ? (
-                                richSuggestions.map((sugestao) => (
-                                  <button
-                                    key={sugestao.id}
-                                    onClick={() => handleRichSuggestionClick(sugestao)}
-                                    className="w-full p-3 text-left rounded-[var(--radius-card)] bg-muted/50 border border-border text-foreground transition-all duration-200 hover:bg-primary/5 hover:border-primary/50 group"
-                                  >
-                                    <div className="flex items-center gap-2">
-                                      {sugestao.id.includes('chart') && <BarChart3 className="w-4 h-4 text-primary" />}
-                                      {sugestao.id.includes('table') && <TableIcon className="w-4 h-4 text-primary" />}
-                                      <span className="font-medium">{sugestao.text}</span>
-                                    </div>
-                                  </button>
-                                ))
-                              ) : (
-                                <p className="text-sm text-muted-foreground text-center py-2">Nenhuma sugestão extra.</p>
-                              )}
-                              <Button
-                                variant="ghost"
-                                size="sm"
-                                onClick={() => setShowMoreSuggestions(false)}
-                                className="w-full justify-center text-muted-foreground mt-2"
-                              >
-                                <ChevronLeft className="w-4 h-4 mr-2" />
-                                Voltar
-                              </Button>
-                            </div>
-                          )}
-                        </div>
-                      </div>
+                      <AssistantWelcomeScreen
+                        userName={userName}
+                        welcomeMessage={welcomeMessage}
+                        suggestions={sugestoes}
+                        richSuggestions={richSuggestions}
+                        showMoreSuggestions={showMoreSuggestions}
+                        onSetShowMoreSuggestions={setShowMoreSuggestions}
+                        onSendSuggestion={handleEnviarMensagem}
+                        onRichSuggestionClick={handleRichSuggestionClick}
+                      />
                     ) : (
                       <ScrollArea className="flex-1 min-h-0 overflow-x-hidden [&_[data-radix-scroll-area-viewport]>div]:!block">
                         <div className="space-y-4 px-4 py-4 max-w-6xl mx-auto !block !w-full">
                           {mensagens.map((msg) => (
-                            <motion.div
+                            <AssistantMessageBubble
                               key={msg.id}
-                              initial={{ opacity: 0, y: 10 }}
-                              animate={{ opacity: 1, y: 0 }}
-                              className={`flex gap-2 w-full min-w-0 ${msg.type === 'user' ? 'justify-end' : 'justify-start'}`}
-                            >
-                              {/* Avatar do Assistente */}
-                              {msg.type === 'assistant' && (
-                                <div className="flex-shrink-0 pt-1">
-                                  <XerticaOrbe size={32} />
-                                </div>
-                              )}
-
-                              <div className={cn(
-                                "flex flex-col min-w-0 transition-all duration-300",
-                                msg.type === 'user' 
-                                  ? "max-w-[85%] md:max-w-[70%] items-end w-fit" 
-                                  : cn(
-                                      "items-start",
-                                      (msg.tableData || msg.chartData || msg.searchResults || msg.attachmentType === 'document') 
-                                        ? "w-full max-w-full" 
-                                        : "w-fit max-w-[95%] md:max-w-[90%]"
-                                    )
-                              )}>
-                                <div
-                                  className={cn(
-                                    "px-4 py-2 break-words overflow-hidden overflow-x-hidden w-full min-w-0 rounded-2xl",
-                                    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-sm font-medium 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"
-                                          title="Baixar"
-                                        >
-                                          <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"
-                                        >
-                                          <Edit className="w-3 h-3 mr-1" />
-                                          Editar
-                                        </Button>
-                                      </div>
-                                    </div>
-                                  )}
-
-                                  {/* Attachments */}
-                                  {msg.attachmentType && msg.attachmentType !== 'podcast' && msg.attachmentType !== 'document' && (
-                                    <div
-                                      className="flex items-center gap-2 mb-2 pb-2 border-b border-border min-w-0 overflow-hidden"
-                                    >
-                                      {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="text-small break-words">{msg.attachmentName}</span>
-                                    </div>
-                                  )}
-
-                                  {/* Message Content */}
-                                  {msg.type === 'user' ? (
-                                    <p className="whitespace-pre-wrap break-words">{msg.content}</p>
-                                  ) : (
-                                    <>
-                                      {(msg.content.includes('🔐') || msg.content.includes('❌')) && (
-                                        <div
-                                          className="mb-3 p-3 border rounded-[var(--radius)] overflow-hidden bg-[var(--toast-error-bg)]/20 border-[var(--toast-error-border)]/30"
-                                        >
-                                          <div className="flex items-start gap-2 min-w-0">
-                                            <AlertCircle className="w-5 h-5 flex-shrink-0 mt-0.5 text-[var(--toast-error-icon)]" />
-                                            <div className="flex-1 min-w-0 overflow-hidden">
-                                              <MarkdownMessage
-                                                content={msg.content}
-                                                className="text-foreground"
-                                              />
-                                            </div>
-                                          </div>
-                                        </div>
-                                      )}
-                                      {!(msg.content.includes('🔐') || msg.content.includes('❌')) && (
-                                        <MarkdownMessage
-                                          content={msg.content}
-                                          className="text-foreground"
-                                        />
-                                      )}
-                                    </>
-                                  )}
-
-                                  {/* Chart Rendering */}
-                                  {msg.chartData && msg.chartConfig && (
-                                    <div className="mt-4 w-full h-[300px] min-w-[300px]">
-                                      <ChartContainer config={msg.chartConfig} className="h-full w-full">
-                                        <BarChart accessibilityLayer data={msg.chartData}>
-                                          <CartesianGrid vertical={false} />
-                                          <XAxis
-                                            dataKey="month"
-                                            tickLine={false}
-                                            tickMargin={10}
-                                            axisLine={false}
-                                            tickFormatter={(value) => value.slice(0, 3)}
-                                          />
-                                          <ChartTooltip content={<ChartTooltipContent />} />
-                                          <ChartLegend content={<ChartLegendContent />} />
-                                          {Object.keys(msg.chartConfig).map((key) => (
-                                            <Bar key={key} dataKey={key} fill={`var(--color-${key})`} radius={4} />
-                                          ))}
-                                        </BarChart>
-                                      </ChartContainer>
-                                    </div>
-                                  )}
-
-                                  {/* Table Rendering */}
-                                  {msg.tableData && (
-                                    <div className="mt-4 w-full max-w-full border rounded-[var(--radius)] overflow-x-auto custom-scrollbar relative">
-                                      <Table>
-                                        {msg.tableData.caption && <TableCaption>{msg.tableData.caption}</TableCaption>}
-                                        <TableHeader>
-                                          <TableRow>
-                                            {msg.tableData.headers.map((header, i) => (
-                                              <TableHead key={i}>{header}</TableHead>
-                                            ))}
-                                          </TableRow>
-                                        </TableHeader>
-                                        <TableBody>
-                                          {msg.tableData.rows.map((row, i) => (
-                                            <TableRow key={i}>
-                                              {row.map((cell, j) => (
-                                                <TableCell key={j}>{cell}</TableCell>
-                                              ))}
-                                            </TableRow>
-                                          ))}
-                                        </TableBody>
-                                      </Table>
-                                    </div>
-                                  )}
-
-                                  {/* Document Preview */}
-                                  {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 flex items-center justify-center flex-shrink-0 rounded-[var(--radius-button)] bg-gradient-to-br from-[var(--chart-1)] via-[var(--chart-4)] to-[var(--chart-1)]"
-                                          >
-                                            <Radio className="w-3 h-3 text-white" />
-                                          </div>
-                                          <span className="text-sm font-medium 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 flex-shrink-0"
-                                          title="Baixar"
-                                        >
-                                          <Download className="w-3 h-3" />
-                                        </Button>
-                                      </div>
-                                      <div
-                                        className="rounded-[var(--radius)] p-2 overflow-hidden bg-gradient-to-r from-[var(--chart-1)]/10 to-[var(--chart-4)]/10"
-                                      >
-                                        <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"
-                                    >
-                                      <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-[var(--radius)] border border-border transition-all cursor-pointer group overflow-hidden hover:bg-muted/50"
-                                            >
-                                              <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)]" />}
-                                                    {result.type === 'project' && <FolderOpen className="w-4 h-4 text-[var(--chart-1)]" />}
-                                                    {result.type === 'conversation' && <MessageSquare className="w-4 h-4 text-[var(--chart-2)]" />}
-                                                    {result.type === 'file' && <Folder className="w-4 h-4 text-[var(--chart-3)]" />}
-                                                    {result.type === 'contact' && <Users className="w-4 h-4 text-[var(--chart-5)]" />}
-                                                  </div>
-                                                  <div className="flex-1 min-w-0 overflow-hidden">
-                                                    <div className="flex items-start gap-2 min-w-0">
-                                                      <h5 className="text-sm font-medium break-words flex-1 min-w-0 text-foreground">
-                                                        {result.title}
-                                                      </h5>
-                                                      <span
-                                                        className="px-1.5 py-0.5 rounded-sm flex-shrink-0 self-start bg-[var(--chart-4)]/10 text-[var(--chart-4)]"
-                                                      >
-                                                        {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>
-                                          ))}
-                                        </div>
-                                      </div>
-
-                                      {/* Search Sources */}
-                                      {msg.searchSources && (
-                                        <div>
-                                          <h4 className="mb-2 text-foreground">
-                                            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 border max-w-full rounded-[var(--radius-button)] bg-muted border-border"
-                                              >
-                                                <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="mb-2 text-foreground">
-                                            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={cn(
-                                                  "flex items-start gap-2 p-2 rounded-[var(--radius)] border transition-all text-left disabled:opacity-50 disabled:cursor-not-allowed",
-                                                  savedSearches.includes(msg.id) && command.id === '5'
-                                                    ? "border-[var(--toast-warning-border)] bg-[var(--toast-warning-bg)]/20"
-                                                    : "border-border bg-transparent hover:bg-muted/50"
-                                                )}
-                                              >
-                                                {executingCommand === command.id ? (
-                                                  <Loader2 className="w-5 h-5 animate-spin flex-shrink-0 text-primary" />
-                                                ) : (
-                                                  <span className="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>
-
-                                {/* 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>
-
-
-                                  {enablePodcastGeneration && 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 disabled:opacity-50 text-muted-foreground"
-                                        title="Gerar Podcast"
-                                        aria-label="Gerar Podcast"
-                                      >
-                                      {generatingPodcastId === msg.id ? (
-                                        <Loader2 className="w-3 h-3 animate-spin" />
-                                      ) : (
-                                        <Radio className="w-3 h-3" />
-                                      )}
-                                    </Button>
-                                  )}
-
-                                  {msg.type === 'assistant' && (
-                                    <div className="flex items-center gap-1 border-l border-border pl-2 ml-1">
-                                      <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={() => handleEvaluationClick(msg.id, 'like')}
-                                        title="Gostei"
-                                        aria-label="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"
-                                            aria-label="Não gostei"
-                                          >
-                                            <ThumbsDown className="h-3.5 w-3.5" />
-                                          </Button>
-                                        </DropdownMenuTrigger>
-                                        <DropdownMenuContent align="start">
-                                          {feedbackOptions && feedbackOptions.length > 0 ? (
-                                            feedbackOptions.map((option, idx) => (
-                                              <DropdownMenuItem key={idx} onClick={() => openFeedbackDialog(msg.id, option)}>
-                                                {option}
-                                              </DropdownMenuItem>
-                                            ))
-                                          ) : (
-                                            <>
-                                              <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>
-                                  )}
-
-                                  <Button
-                                    variant="ghost"
-                                    size="sm"
-                                    onClick={() => handleCopyMessage(msg.content, msg.id)}
-                                    className={`h-6 w-6 p-0 ${copiedId === msg.id ? 'text-[var(--toast-success-icon)]' : 'text-muted-foreground'}`}
-                                    aria-label={copiedId === msg.id ? "Copiado" : "Copiar mensagem"}
-                                  >
-                                    {copiedId === msg.id ? (
-                                      <Check className="w-3 h-3" />
-                                    ) : (
-                                      <Copy className="w-3 h-3" />
-                                    )}
-                                  </Button>
-                                </div>
-                              </div>
-                            </motion.div>
+                              msg={msg}
+                              copiedId={copiedId}
+                              generatingPodcastId={generatingPodcastId}
+                              executingCommand={executingCommand}
+                              savedSearches={savedSearches}
+                              enablePodcastGeneration={enablePodcastGeneration}
+                              feedbackOptions={feedbackOptions}
+                              onCopyMessage={handleCopyMessage}
+                              onToggleFavorite={handleToggleFavorite}
+                              onGeneratePodcast={handleGeneratePodcast}
+                              onDownloadDocument={handleDownloadDocument}
+                              onDownloadPodcast={handleDownloadPodcast}
+                              onEditDocument={handleEditDocument}
+                              onOpenSearchResult={handleOpenSearchResult}
+                              onExecuteSearchCommand={handleExecuteSearchCommand}
+                              onEvaluationClick={handleEvaluationClick}
+                              onOpenFeedbackDialog={openFeedbackDialog}
+                            />
                           ))}
 
                           {/* Typing Indicator */}
-                          {isProcessing && (
-                            <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="px-4 py-3 bg-muted rounded-2xl"
-                              >
-                                <div className="flex gap-1">
-                                  <motion.div
-                                    className="w-2 h-2 rounded-full bg-muted-foreground"
-                                    animate={{ y: [0, -8, 0] }}
-                                    transition={{ repeat: Infinity, duration: 0.6, delay: 0 }}
-                                  />
-                                  <motion.div
-                                    className="w-2 h-2 rounded-full bg-muted-foreground"
-                                    animate={{ y: [0, -8, 0] }}
-                                    transition={{ repeat: Infinity, duration: 0.6, delay: 0.2 }}
-                                  />
-                                  <motion.div
-                                    className="w-2 h-2 rounded-full bg-muted-foreground"
-                                    animate={{ y: [0, -8, 0] }}
-                                    transition={{ repeat: Infinity, duration: 0.6, delay: 0.4 }}
-                                  />
-                                </div>
-                              </div>
-                            </motion.div>
-                          )}
+                          {isProcessing && <AssistantTypingIndicator />}
 
                           <div ref={messagesEndRef} />
                         </div>
@@ -1727,82 +552,21 @@ export function XerticaAssistant({
                   </div>
                 )}
 
+                {/* History / Favorites Tab */}
                 {((abaSelecionada === 'historico' && showHistory) || (abaSelecionada === 'favoritos' && showFavorites)) && (
-                  <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-muted-foreground/50 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={cn(
-                                "p-3 rounded-[var(--radius)] cursor-pointer transition-colors duration-200 border",
-                                conversa.id === conversaAtual
-                                  ? "border-primary bg-primary/10"
-                                  : "border-border hover:bg-muted"
-                              )}
-                            >
-                              <div className="flex items-start justify-between mb-1">
-                                <h4 className="text-sm font-medium text-foreground truncate flex-1">
-                                  {conversa.title}
-                                </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={cn(
-                                      "w-3 h-3",
-                                      conversa.isFavorite ? "text-destructive fill-current" : "text-muted-foreground"
-                                    )}
-                                  />
-                                </Button>
-                              </div>
-                              {conversa.lastMessage && (
-                                <p className="text-sm text-muted-foreground truncate mb-1">
-                                  {conversa.lastMessage}
-                                </p>
-                              )}
-                              <p className="text-sm text-muted-foreground">
-                                {conversa.timestamp}
-                              </p>
-                            </div>
-                          ))
-                        )}
-                      </div>
-                    </div>
-                  </ScrollArea>
+                  <AssistantConversationList
+                    conversations={conversasFiltradas}
+                    currentConversationId={conversaAtual}
+                    activeTab={abaSelecionada}
+                    isFullPage={isFullPage}
+                    onNewConversation={handleNovaConversa}
+                    onSelectConversation={handleSelecionarConversa}
+                    onToggleFavorite={handleToggleFavoritaConversa}
+                  />
                 )}
               </div>
 
-              {/* Modern Input Area - Only visible in chat mode */}
+              {/* Modern Input Area — only visible in chat mode */}
               {abaSelecionada === 'chat' && (
                 <ModernChatInput
                   value={mensagem}
@@ -1810,7 +574,7 @@ export function XerticaAssistant({
                   onSubmit={handleEnviarMensagem}
                   onFileUpload={enableFileAttachment ? () => fileInputRef.current?.click() : undefined}
                   onAudioUpload={enableAudioInput ? () => audioInputRef.current?.click() : undefined}
-                  placeholder="Envie uma mensagem para Xertica"
+                  placeholder="Envie uma mensagem"
                   disabled={isProcessing}
                   isFullPage={isFullPage}
                   enableAudioInput={enableAudioInput}
@@ -1826,38 +590,12 @@ export function XerticaAssistant({
       </div>
 
       {/* Feedback Dialog */}
-      <Dialog open={evaluationState.isOpen} onOpenChange={(open) => !open && setEvaluationState(prev => ({ ...prev, isOpen: false }))}>
-        <DialogContent className="sm:max-w-[600px]">
-          <DialogHeader>
-            <DialogTitle className="pr-8">
-              {evaluationState.category ? `Enviar feedback: ${evaluationState.category}` : 'Enviar feedback'}
-            </DialogTitle>
-            <DialogDescription>
-              {evaluationState.category
-                ? "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={evaluationState.category ? "Comentário adicional..." : "Descreva o motivo..."}
-              aria-label={evaluationState.category ? "Comentário adicional" : "Descreva o motivo"}
-              value={evaluationState.reason}
-              onChange={(e) => setEvaluationState(prev => ({ ...prev, reason: e.target.value }))}
-              rows={4}
-            />
-          </div>
-          <DialogFooter>
-            <Button variant="outline" onClick={() => setEvaluationState(prev => ({ ...prev, isOpen: false }))}>
-              Cancelar
-            </Button>
-            <Button onClick={handleSubmitDislike} disabled={!evaluationState.category && !evaluationState.reason.trim()}>
-              {evaluationState.category ? 'Confirmar e Enviar' : 'Enviar Feedback'}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+      <AssistantFeedbackDialog
+        state={evaluationState}
+        onReasonChange={(reason) => setEvaluationState(prev => ({ ...prev, reason }))}
+        onClose={() => setEvaluationState(prev => ({ ...prev, isOpen: false }))}
+        onSubmit={handleSubmitDislike}
+      />
     </>
   );
 }