xertica-ui 2.1.2 → 2.1.4

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

@@ -0,0 +1,573 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import {
+    FileText,
+    Music,
+    Image as ImageIcon,
+    Radio,
+    Loader2,
+    Download,
+    Edit,
+    Search,
+    Folder,
+    Users,
+    ExternalLink,
+    Clock,
+    FolderOpen,
+    MessageSquare,
+    AlertCircle,
+    ThumbsUp,
+    ThumbsDown,
+    Copy,
+    Check,
+} from 'lucide-react';
+import {
+    Bar,
+    BarChart,
+    CartesianGrid,
+    XAxis,
+} from 'recharts';
+import {
+    ChartContainer,
+    ChartTooltip,
+    ChartTooltipContent,
+    ChartLegend,
+    ChartLegendContent,
+} from '../../../ui/chart';
+import {
+    Table,
+    TableBody,
+    TableCaption,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from '../../../ui/table';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '../../../ui/dropdown-menu';
+import { Button } from '../../../ui/button';
+import { MarkdownMessage } from '../../markdown-message';
+import { FormattedDocument } from '../../formatted-document';
+import { XerticaOrbe } from '../../../brand/xertica-orbe';
+import { cn } from '../../../shared/utils';
+import type { Message, SearchResult } from '../types';
+
+interface AssistantMessageBubbleProps {
+    msg: Message;
+    copiedId: string | null;
+    generatingPodcastId: string | null;
+    executingCommand: string | null;
+    savedSearches: string[];
+    enablePodcastGeneration: boolean;
+    feedbackOptions?: string[];
+    onCopyMessage: (content: string, id: string) => void;
+    onToggleFavorite: (id: string) => void;
+    onGeneratePodcast: (id: string, content: string) => void;
+    onDownloadDocument: (content: string, fileName: string) => void;
+    onDownloadPodcast: (audioUrl: string, fileName: string) => void;
+    onEditDocument: (content: string, title: string) => void;
+    onOpenSearchResult: (result: SearchResult) => void;
+    onExecuteSearchCommand: (
+        commandId: string,
+        query: string,
+        results: SearchResult[],
+        messageId: string,
+    ) => void;
+    onEvaluationClick: (id: string, type: 'like' | 'dislike') => void;
+    onOpenFeedbackDialog: (id: string, category: string | null) => void;
+}
+
+/**
+ * AssistantMessageBubble — Renders a single chat message with all supported content types:
+ * plain text, Markdown, charts, tables, documents, podcasts, and search results.
+ *
+ * Handles both user and assistant message styles, plus per-message action buttons
+ * (copy, like/dislike, podcast generation).
+ */
+export function AssistantMessageBubble({
+    msg,
+    copiedId,
+    generatingPodcastId,
+    executingCommand,
+    savedSearches,
+    enablePodcastGeneration,
+    feedbackOptions,
+    onCopyMessage,
+    onToggleFavorite,
+    onGeneratePodcast,
+    onDownloadDocument,
+    onDownloadPodcast,
+    onEditDocument,
+    onOpenSearchResult,
+    onExecuteSearchCommand,
+    onEvaluationClick,
+    onOpenFeedbackDialog,
+}: AssistantMessageBubbleProps) {
+    return (
+        <motion.div
+            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 &&
+                                        onDownloadDocument(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 &&
+                                        onEditDocument(msg.documentContent, msg.documentTitle)
+                                    }
+                                    className="h-6 px-2"
+                                >
+                                    <Edit className="w-3 h-3 mr-1" />
+                                    Editar
+                                </Button>
+                            </div>
+                        </div>
+                    )}
+
+                    {/* Attachments (file, audio, image) */}
+                    {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 &&
+                                        onDownloadPodcast(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={() => onOpenSearchResult(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={() =>
+                                                    onExecuteSearchCommand(
+                                                        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={() => onGeneratePodcast(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={() => onEvaluationClick(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={() => onOpenFeedbackDialog(msg.id, option)}
+                                            >
+                                                {option}
+                                            </DropdownMenuItem>
+                                        ))
+                                    ) : (
+                                        <>
+                                            <DropdownMenuItem
+                                                onClick={() =>
+                                                    onOpenFeedbackDialog(msg.id, 'Não era o que eu procurava')
+                                                }
+                                            >
+                                                Não era o que eu procurava
+                                            </DropdownMenuItem>
+                                            <DropdownMenuItem
+                                                onClick={() =>
+                                                    onOpenFeedbackDialog(msg.id, 'Informação incorreta')
+                                                }
+                                            >
+                                                Informação incorreta
+                                            </DropdownMenuItem>
+                                            <DropdownMenuItem
+                                                onClick={() =>
+                                                    onOpenFeedbackDialog(msg.id, 'Resposta incompleta')
+                                                }
+                                            >
+                                                Resposta incompleta
+                                            </DropdownMenuItem>
+                                        </>
+                                    )}
+                                    <DropdownMenuItem onClick={() => onOpenFeedbackDialog(msg.id, null)}>
+                                        Outros...
+                                    </DropdownMenuItem>
+                                </DropdownMenuContent>
+                            </DropdownMenu>
+                        </div>
+                    )}
+
+                    <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => onCopyMessage(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>
+    );
+}

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

@@ -0,0 +1,65 @@
+import React from 'react';
+import { MessageSquare, Heart, History } from 'lucide-react';
+import { Button } from '../../../ui/button';
+import type { AssistantTab } from '../types';
+
+interface AssistantTabBarProps {
+    activeTab: AssistantTab;
+    showHistory: boolean;
+    showFavorites: boolean;
+    onTabChange: (tab: AssistantTab) => void;
+}
+
+/**
+ * AssistantTabBar — Navigation tabs for Chat, History, and Favorites.
+ * Only rendered in expanded (non-fullPage) mode when at least one secondary tab is enabled.
+ */
+export function AssistantTabBar({
+    activeTab,
+    showHistory,
+    showFavorites,
+    onTabChange,
+}: AssistantTabBarProps) {
+    return (
+        <div className="px-4 py-2 border-b border-border">
+            <div className="flex gap-1">
+                <Button
+                    variant={activeTab === 'chat' ? 'default' : 'ghost'}
+                    size="sm"
+                    onClick={() => onTabChange('chat')}
+                    className="flex-1 h-8"
+                    aria-label="Ver chat"
+                >
+                    <MessageSquare className="w-3 h-3 mr-1" />
+                    Chat
+                </Button>
+
+                {showHistory && (
+                    <Button
+                        variant={activeTab === 'historico' ? 'default' : 'ghost'}
+                        size="sm"
+                        onClick={() => onTabChange('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={activeTab === 'favoritos' ? 'default' : 'ghost'}
+                        size="sm"
+                        onClick={() => onTabChange('favoritos')}
+                        className="flex-1 h-8"
+                        aria-label="Ver mensagens favoritas"
+                    >
+                        <Heart className="w-3 h-3 mr-1" />
+                        Favoritos
+                    </Button>
+                )}
+            </div>
+        </div>
+    );
+}