xertica-ui 2.1.3 → 2.1.4

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

@@ -1,243 +1,59 @@
 import React from 'react';
-import { type MockResponse } from '../../shared/assistant-utils';
 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
@@ -277,8 +93,6 @@ export interface XerticaAssistantProps {
    */
   customResponses?: MockResponse[];
 
-
-
   /**
    * Callback fired when the user navigates to the settings page
    */
@@ -510,10 +324,8 @@ export function XerticaAssistant({
     abaSelecionada,
     setAbaSelecionada,
     mensagens,
-    setMensagens,
     mensagem,
     setMensagem,
-    conversas,
     conversaAtual,
     conversasFiltradas,
     copiedId,
@@ -574,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
@@ -638,193 +451,35 @@ export function XerticaAssistant({
       >
         {/* 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(editingDocument ? { ...editingDocument, 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>
+          <AssistantDocumentEditor
+            document={editingDocument}
+            isMobile={isMobile}
+            containerWidth={containerWidth}
+            onClose={() => setEditingDocument(null)}
+            onChange={(doc) => setEditingDocument(doc)}
+          />
         )}
-        {/* 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>
-              )}
-
-              <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
@@ -834,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">
-                            {welcomeMessage}
-                          </p>
-                        </div>
-
-                        {/* Suggestions */}
-                        {(sugestoes.length > 0 || richSuggestions.length > 0) && (
-                          <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>
-                            ))}
-
-                            {richSuggestions.length > 0 && (
-                              !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.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>
-                                  ))}
-                                  <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>
@@ -1436,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}
@@ -1535,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}
+      />
     </>
   );
 }