xertica-ui 2.3.0 → 2.4.0

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

@@ -1,560 +1,564 @@
-import React from 'react';
-import { motion } from 'framer-motion';
-import { useTranslation } from 'react-i18next';
-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) {
-  const { t, i18n } = useTranslation();
-  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={t('assistant.download')}
-                >
-                  <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" />
-                  {t('common.edit')}
-                </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={t('assistant.download')}
-                >
-                  <Download className="w-3 h-3" />
-                </Button>
-              </div>
-              <div className="rounded-[var(--radius)] p-2 overflow-hidden bg-gradient-to-r from-[var(--chart-1)]/10 to-[var(--chart-4)]/10">
-                <audio controls className="w-full max-w-full h-10 outline-none">
-                  <source src={msg.audioUrl} type="audio/mpeg" />
-                  {t('assistant.audioNotSupported')}
-                </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">
-                    {t('assistant.searchResultsFound')} ({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">{t('assistant.searchSources')}</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">
-                    {t('assistant.searchActions')}
-                  </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)
-                              ? `⭐ ${t('assistant.searchSaved')}`
-                              : command.label}
-                          </div>
-                          <div className="text-sm text-muted-foreground break-words">
-                            {executingCommand === command.id
-                              ? t('assistant.processing')
-                              : 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(i18n.language, {
-              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={t('assistant.generatePodcast')}
-                aria-label={t('assistant.generatePodcast')}
-              >
-                {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={t('assistant.like')}
-                aria-label={t('assistant.like')}
-              >
-                <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={t('assistant.dislike')}
-                    aria-label={t('assistant.dislike')}
-                  >
-                    <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, t('assistant.feedback.notWhatIWanted'))}
-                      >
-                        {t('assistant.feedback.notWhatIWanted')}
-                      </DropdownMenuItem>
-                      <DropdownMenuItem
-                        onClick={() => onOpenFeedbackDialog(msg.id, t('assistant.feedback.incorrectInfo'))}
-                      >
-                        {t('assistant.feedback.incorrectInfo')}
-                      </DropdownMenuItem>
-                      <DropdownMenuItem
-                        onClick={() => onOpenFeedbackDialog(msg.id, t('assistant.feedback.incompleteAnswer'))}
-                      >
-                        {t('assistant.feedback.incompleteAnswer')}
-                      </DropdownMenuItem>
-                    </>
-                  )}
-                  <DropdownMenuItem onClick={() => onOpenFeedbackDialog(msg.id, null)}>
-                    {t('assistant.feedback.other')}
-                  </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 ? t('assistant.copied') : t('assistant.copyMessage')}
-          >
-            {copiedId === msg.id ? <Check className="w-3 h-3" /> : <Copy className="w-3 h-3" />}
-          </Button>
-        </div>
-      </div>
-    </motion.div>
-  );
-}
+import React from 'react';
+import { motion } from 'framer-motion';
+import { useTranslation } from 'react-i18next';
+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) {
+  const { t, i18n } = useTranslation();
+  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={t('assistant.download')}
+                >
+                  <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" />
+                  {t('common.edit')}
+                </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={t('assistant.download')}
+                >
+                  <Download className="w-3 h-3" />
+                </Button>
+              </div>
+              <div className="rounded-[var(--radius)] p-2 overflow-hidden bg-gradient-to-r from-[var(--chart-1)]/10 to-[var(--chart-4)]/10">
+                <audio controls className="w-full max-w-full h-10 outline-none">
+                  <source src={msg.audioUrl} type="audio/mpeg" />
+                  {t('assistant.audioNotSupported')}
+                </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">
+                    {t('assistant.searchResultsFound')} ({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">{t('assistant.searchSources')}</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">{t('assistant.searchActions')}</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)
+                              ? `⭐ ${t('assistant.searchSaved')}`
+                              : command.label}
+                          </div>
+                          <div className="text-sm text-muted-foreground break-words">
+                            {executingCommand === command.id
+                              ? t('assistant.processing')
+                              : 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(i18n.language, {
+              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={t('assistant.generatePodcast')}
+                aria-label={t('assistant.generatePodcast')}
+              >
+                {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={t('assistant.like')}
+                aria-label={t('assistant.like')}
+              >
+                <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={t('assistant.dislike')}
+                    aria-label={t('assistant.dislike')}
+                  >
+                    <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, t('assistant.feedback.notWhatIWanted'))
+                        }
+                      >
+                        {t('assistant.feedback.notWhatIWanted')}
+                      </DropdownMenuItem>
+                      <DropdownMenuItem
+                        onClick={() =>
+                          onOpenFeedbackDialog(msg.id, t('assistant.feedback.incorrectInfo'))
+                        }
+                      >
+                        {t('assistant.feedback.incorrectInfo')}
+                      </DropdownMenuItem>
+                      <DropdownMenuItem
+                        onClick={() =>
+                          onOpenFeedbackDialog(msg.id, t('assistant.feedback.incompleteAnswer'))
+                        }
+                      >
+                        {t('assistant.feedback.incompleteAnswer')}
+                      </DropdownMenuItem>
+                    </>
+                  )}
+                  <DropdownMenuItem onClick={() => onOpenFeedbackDialog(msg.id, null)}>
+                    {t('assistant.feedback.other')}
+                  </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 ? t('assistant.copied') : t('assistant.copyMessage')}
+          >
+            {copiedId === msg.id ? <Check className="w-3 h-3" /> : <Copy className="w-3 h-3" />}
+          </Button>
+        </div>
+      </div>
+    </motion.div>
+  );
+}