xertica-ui 1.0.0

package/components/ui/xertica-assistant.tsx

@@ -0,0 +1,1420 @@
+import React, { useState, useEffect, useRef } from 'react';
+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
+} from 'lucide-react';
+import { Button } from './button';
+import { ScrollArea } from './scroll-area';
+import { Separator } from './separator';
+import { MarkdownMessage } from '../MarkdownMessage';
+import { FormattedDocument } from '../FormattedDocument';
+import { ModernChatInput } from '../ModernChatInput';
+import type { ActionType } from '../ModernChatInput';
+import { XerticaOrbe } from '../XerticaOrbe';
+import { Tooltip, TooltipTrigger } from './tooltip';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { cn } from './utils';
+
+// 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>
+  );
+}
+
+// ============================================================================
+// TypeScript Interfaces & Types
+// ============================================================================
+
+/**
+ * Tipos de mensagem suportados pelo assistente
+ */
+export type MessageType = 'user' | 'assistant';
+
+/**
+ * Tipos de anexo que podem ser incluídos em mensagens
+ */
+export type AttachmentType = 'file' | 'audio' | 'image' | 'document' | 'podcast' | 'search';
+
+/**
+ * Tipo de busca que pode ser realizada
+ */
+export type SearchResultType = 'document' | 'project' | 'conversation' | 'file' | 'contact';
+
+/**
+ * Interface para resultados de busca
+ */
+export interface SearchResult {
+  id: string;
+  type: SearchResultType;
+  title: string;
+  description: string;
+  path: string;
+  relevance: number;
+  lastModified?: string;
+}
+
+/**
+ * Interface para fontes de busca
+ */
+export interface SearchSource {
+  name: string;
+  count: number;
+}
+
+/**
+ * Interface para comandos de busca
+ */
+export interface SearchCommand {
+  id: string;
+  icon: string;
+  label: string;
+  description: string;
+}
+
+/**
+ * Interface para uma mensagem individual
+ */
+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[];
+}
+
+/**
+ * Interface para uma conversa salva
+ */
+export interface Conversation {
+  id: string;
+  titulo: string;
+  ultimaMensagem?: string;
+  timestamp: string;
+  favorita: boolean;
+  mensagens: Message[];
+}
+
+/**
+ * Interface para sugestões de chat
+ */
+export interface Suggestion {
+  id: string;
+  texto: string;
+}
+
+/**
+ * Modo de exibição do assistente
+ */
+export type AssistantMode = 'collapsed' | 'expanded' | 'fullPage';
+
+/**
+ * Abas disponíveis no assistente
+ */
+export type AssistantTab = 'chat' | 'historico' | 'favoritos';
+
+// ============================================================================
+// Props do Componente
+// ============================================================================
+
+export interface XerticaAssistantProps {
+  /**
+   * Modo de exibição do assistente
+   * @default 'expanded'
+   */
+  mode?: AssistantMode;
+  
+  /**
+   * Se o assistente está expandido (apenas para mode='expanded')
+   * @default true
+   */
+  isExpanded?: boolean;
+  
+  /**
+   * Callback chamado quando o assistente é expandido/colapsado
+   */
+  onToggle?: () => void;
+  
+  /**
+   * Aba selecionada inicialmente
+   * @default 'chat'
+   */
+  defaultTab?: AssistantTab;
+  
+  /**
+   * Se deve mostrar banner de aviso de API key
+   * @default true
+   */
+  showApiWarning?: boolean;
+  
+  /**
+   * Chave da API do Gemini (se disponível)
+   */
+  apiKey?: string;
+  
+  /**
+   * Callback chamado ao navegar para página de configurações
+   */
+  onNavigateSettings?: () => void;
+  
+  /**
+   * Callback chamado ao navegar para página full do assistente
+   */
+  onNavigateFullPage?: () => void;
+  
+  /**
+   * Nome do usuário logado
+   * @default 'Usuário'
+   */
+  userName?: string;
+  
+  /**
+   * Mensagens iniciais (para carregar conversa existente)
+   */
+  initialMessages?: Message[];
+  
+  /**
+   * Conversas salvas
+   */
+  savedConversations?: Conversation[];
+  
+  /**
+   * Sugestões de mensagens
+   */
+  suggestions?: Suggestion[];
+  
+  /**
+   * Callback chamado quando uma mensagem é enviada
+   */
+  onSendMessage?: (message: string) => void;
+  
+  /**
+   * Callback chamado quando um arquivo é anexado
+   */
+  onFileAttach?: (file: File) => void;
+  
+  /**
+   * Se está processando mensagem (mostra typing indicator)
+   */
+  isProcessing?: boolean;
+  
+  /**
+   * Largura customizada (apenas para mode='expanded')
+   */
+  width?: string;
+  
+  /**
+   * Altura customizada (apenas para mode='fullPage')
+   */
+  height?: string;
+  
+  /**
+   * Classes CSS adicionais
+   */
+  className?: string;
+  mobileFloating?: boolean;
+}
+
+// ============================================================================
+// Componente Principal
+// ============================================================================
+
+/**
+ * XerticaAssistant - Assistente de IA completo com chat, histórico e favoritos
+ * 
+ * Suporta três modos de exibição:
+ * - collapsed: Apenas ícones na lateral
+ * - expanded: Painel lateral expansível
+ * - fullPage: Página dedicada completa
+ * 
+ * @example
+ * ```tsx
+ * // Modo expandido (padrão)
+ * <XerticaAssistant 
+ *   mode="expanded"
+ *   userName="João Silva"
+ *   onSendMessage={(msg) => console.log(msg)}
+ * />
+ * 
+ * // Modo página completa
+ * <XerticaAssistant 
+ *   mode="fullPage"
+ *   height="100vh"
+ * />
+ * 
+ * // Modo colapsado
+ * <XerticaAssistant 
+ *   mode="expanded"
+ *   isExpanded={false}
+ *   onToggle={() => setExpanded(!expanded)}
+ * />
+ * ```
+ */
+export function XerticaAssistant({
+  mode = 'expanded',
+  isExpanded: controlledIsExpanded,
+  onToggle,
+  defaultTab = 'chat',
+  showApiWarning = true,
+  apiKey,
+  onNavigateSettings,
+  onNavigateFullPage,
+  userName = 'Usuário',
+  initialMessages = [],
+  savedConversations = [],
+  suggestions: propSuggestions,
+  onSendMessage,
+  onFileAttach,
+  isProcessing = false,
+  width,
+  height,
+  className = '',
+  mobileFloating = false,
+}: XerticaAssistantProps) {
+  // ============================================================================
+  // State Management
+  // ============================================================================
+  
+  const isFullPage = mode === 'fullPage';
+  const [internalIsExpanded, setInternalIsExpanded] = useState(controlledIsExpanded ?? true);
+  const isExpanded = controlledIsExpanded ?? internalIsExpanded;
+  
+  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);
+  
+  // ============================================================================
+  // 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', texto: 'Me ajude a criar um documento profissional' },
+    { id: '2', texto: 'Buscar nos meus arquivos por "relatório"' },
+    { id: '3', texto: 'Resuma as conversas importantes desta semana' },
+    { id: '4', texto: 'Crie um podcast sobre o último projeto' },
+  ];
+  
+  const sugestoes = propSuggestions ?? defaultSuggestions;
+  
+  // ============================================================================
+  // API Key Validation
+  // ============================================================================
+  
+  const isApiKeyValid = Boolean(apiKey && apiKey.length > 20);
+  
+  // ============================================================================
+  // Effects
+  // ============================================================================
+  
+  // Auto-scroll ao adicionar mensagens
+  useEffect(() => {
+    if (messagesEndRef.current && abaSelecionada === 'chat') {
+      messagesEndRef.current.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [mensagens, abaSelecionada]);
+  
+  // Sincronizar mensagens iniciais
+  useEffect(() => {
+    if (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 () => {
+    if (!mensagem.trim() || isProcessing) return;
+    
+    const novaMensagem: Message = {
+      id: `msg-${Date.now()}`,
+      type: 'user',
+      content: mensagem,
+      timestamp: new Date(),
+      isFavorite: false,
+    };
+    
+    setMensagens(prev => [...prev, novaMensagem]);
+    
+    if (onSendMessage) {
+      onSendMessage(mensagem);
+    }
+    
+    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.mensagens);
+      setConversaAtual(conversaId);
+      setAbaSelecionada('chat');
+    }
+  };
+  
+  const handleToggleFavoritaConversa = (conversaId: string) => {
+    setConversas(prev =>
+      prev.map(conv =>
+        conv.id === conversaId ? { ...conv, favorita: !conv.favorita } : 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);
+  };
+  
+  // ============================================================================
+  // Computations
+  // ============================================================================
+  
+  const conversasFiltradas = conversas.filter(conversa => {
+    if (abaSelecionada === 'favoritos') {
+      return conversa.favorita;
+    }
+    return true;
+  });
+  
+  // ============================================================================
+  // Render
+  // ============================================================================
+  
+  const containerWidth = width ?? (
+    isFullPage 
+      ? '100%' 
+      : isExpanded 
+        ? (editingDocument ? '420px' : '100%')
+        : '64px' // Compacto quando fechado - apenas ícones
+  );
+  const containerHeight = height ?? 'h-full';
+  
+  if (mobileFloating && !isExpanded) {
+    return (
+      <Button
+        onClick={handleToggle}
+        className={cn(
+          "h-12 rounded-full shadow-lg pl-2 pr-4 gap-2 bg-card text-foreground hover:bg-accent border border-border",
+          className
+        )}
+      >
+        <div className="bg-muted rounded-full p-0.5">
+          <XerticaOrbe size={32} />
+        </div>
+        <span className="font-medium">Assistente</span>
+      </Button>
+    );
+  }
+
+  return (
+    <>
+      {/* Hidden File Inputs */}
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept=".pdf,.doc,.docx,.txt,.md"
+        className="hidden"
+        onChange={(e) => {
+          const file = e.target.files?.[0];
+          if (file && onFileAttach) {
+            onFileAttach(file);
+          }
+        }}
+      />
+      <input
+        ref={audioInputRef}
+        type="file"
+        accept="audio/*"
+        className="hidden"
+        onChange={(e) => {
+          const file = e.target.files?.[0];
+          if (file && onFileAttach) {
+            onFileAttach(file);
+          }
+        }}
+      />
+      
+      {/* Document Editor */}
+      {editingDocument && !isFullPage && (
+        <div 
+          className="flex-1 border-r border-border overflow-hidden"
+        >
+          <div className="h-full flex flex-col">
+            <div 
+              className="px-4 py-3 border-b border-border bg-card flex items-center justify-between"
+            >
+              <h3 className="text-card-foreground">{editingDocument.title}</h3>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => setEditingDocument(null)}
+              >
+                <X className="w-4 h-4" />
+              </Button>
+            </div>
+            <div className="flex-1 overflow-auto p-4">
+              <div 
+                className="p-4 rounded-xl bg-muted"
+              >
+                <p className="text-muted-foreground">
+                  Editor de documentos (simulado)
+                </p>
+                <pre className="mt-2 text-foreground whitespace-pre-wrap">
+                  {editingDocument.content}
+                </pre>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+      
+      {/* Main Assistant Container */}
+      <div 
+        className={`${containerHeight} flex flex-col ${className} bg-background ${!isFullPage ? 'border-l border-border shadow-sm' : ''}`}
+        style={{
+          width: isFullPage ? '100%' : containerWidth,
+        }}
+      >
+        {/* 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 && onNavigateFullPage && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={onNavigateFullPage}
+                  className="p-2 text-muted-foreground"
+                  title="Expandir assistente"
+                >
+                  <Maximize2 className="w-4 h-4" />
+                </Button>
+              )}
+              
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={handleToggle}
+                className="p-2 text-muted-foreground"
+              >
+                {isExpanded ? (
+                  <ChevronRight className="w-4 h-4" />
+                ) : (
+                  <PanelRight className="w-4 h-4" />
+                )}
+              </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={handleToggle}
+                  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"
+                >
+                  <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"
+                >
+                  <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"
+                >
+                  <History className="w-4 h-4" />
+                </Button>
+              </TooltipTrigger>
+              <AssistantTooltipContent
+                side="left"
+                sideOffset={8}
+              >
+                <p>Histórico</p>
+              </AssistantTooltipContent>
+            </Tooltip>
+          </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"
+                    >
+                      <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"
+                    >
+                      <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"
+                    >
+                      <Heart className="w-3 h-3 mr-1" />
+                      Favoritos
+                    </Button>
+                  </div>
+                </div>
+              )}
+
+              {/* Content Area */}
+              <div className="flex-1 overflow-hidden flex flex-col">
+                {abaSelecionada === 'chat' && (
+                  <div className={`flex-1 flex flex-col min-h-0 ${isFullPage ? 'mx-auto w-full max-w-6xl' : ''}`}>
+                    {/* API Key Warning Banner */}
+                    {!isApiKeyValid && showApiWarning && (
+                      <div className="mx-4 mt-3 p-4 border-2 border-[var(--toast-warning-border)] rounded-xl bg-[var(--toast-warning-bg)]/20"
+                      >
+                        <div className="flex items-start gap-3">
+                          <AlertCircle className="w-5 h-5 flex-shrink-0 mt-0.5 text-[var(--toast-warning-icon)]" />
+                          <div className="flex-1 space-y-3">
+                            <p className="text-foreground">
+                              {!apiKey ? (
+                                <strong>Nenhuma chave de API configurada</strong>
+                              ) : (
+                                <strong>🔐 Chave de API inválida ou vazada</strong>
+                              )}
+                            </p>
+                            <p className="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">
+                              {onNavigateSettings && (
+                                <Button
+                                  onClick={onNavigateSettings}
+                                  size="sm"
+                                  className="bg-[var(--toast-warning-icon)] text-white hover:opacity-90 rounded-[var(--radius-button)]"
+                                >
+                                  Ir para Configurações
+                                </Button>
+                              )}
+                              <a 
+                                href="https://aistudio.google.com/apikey" 
+                                target="_blank" 
+                                rel="noopener noreferrer"
+                                className="inline-flex items-center gap-1 underline text-muted-foreground hover:text-foreground"
+                              >
+                                Obter chave gratuitamente
+                                <ExternalLink className="w-3 h-3" />
+                              </a>
+                            </div>
+                          </div>
+                        </div>
+                      </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="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={() => setMensagem(sugestao.texto)}
+                              className="w-full p-3 text-left rounded-[var(--radius-card)] bg-muted text-foreground transition-colors duration-200 hover:bg-muted/80"
+                            >
+                              {sugestao.texto}
+                            </button>
+                          ))}
+                          
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="w-full justify-start text-muted-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 max-w-6xl mx-auto 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>
+                              )}
+                              
+                              <div className={cn(
+                                "flex flex-col max-w-[85%] md:max-w-[70%] min-w-0 w-fit",
+                                msg.type === 'user' ? "items-end" : "items-start"
+                              )}>
+                                <div 
+                                  className={cn(
+                                    "px-4 py-2 break-words overflow-hidden overflow-x-hidden w-full 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="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"
+                                        >
+                                          <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"
+                                        />
+                                      )}
+                                    </>
+                                  )}
+                                  
+                                  {/* 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="Download"
+                                        >
+                                          <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>
+                                  
+                                  <Button
+                                    variant="ghost"
+                                    size="sm"
+                                    onClick={() => handleToggleFavorite(msg.id)}
+                                    className={`h-6 w-6 p-0 ${msg.isFavorite ? 'text-destructive' : 'text-muted-foreground'}`}
+                                  >
+                                    <Heart className={`w-3 h-3 ${msg.isFavorite ? 'fill-current' : ''}`} />
+                                  </Button>
+                                  
+                                  {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"
+                                    >
+                                      {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 ${copiedId === msg.id ? 'text-[var(--toast-success-icon)]' : 'text-muted-foreground'}`}
+                                  >
+                                    {copiedId === msg.id ? (
+                                      <Check className="w-3 h-3" />
+                                    ) : (
+                                      <Copy className="w-3 h-3" />
+                                    )}
+                                  </Button>
+                                </div>
+                              </div>
+                            </motion.div>
+                          ))}
+                          
+                          {/* 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>
+                          )}
+                          
+                          <div ref={messagesEndRef} />
+                        </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-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.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={cn(
+                                      "w-3 h-3",
+                                      conversa.favorita ? "text-destructive fill-current" : "text-muted-foreground"
+                                    )} 
+                                  />
+                                </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()}
+                  placeholder="Envie uma mensagem para Xertica"
+                  disabled={isProcessing}
+                  isFullPage={isFullPage}
+                />
+              )}
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    </>
+  );
+}