xertica-ui 2.1.2 → 2.1.3

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

@@ -1,4 +1,6 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React from 'react';
+import { type MockResponse } from '../../shared/assistant-utils';
+import { useAssistant } from './use-assistant';
 import { motion, AnimatePresence } from 'framer-motion';
 import {
   MessageSquare,
@@ -241,8 +243,6 @@ export type AssistantTab = 'chat' | 'historico' | 'favoritos';
 // Component Props
 // ============================================================================
 
-import { gerarResposta, type MockResponse } from '../../shared/assistant-utils';
-
 export interface XerticaAssistantProps {
   /**
    * Layout mode for the assistant panel
@@ -310,6 +310,12 @@ export interface XerticaAssistantProps {
    */
   suggestions?: Suggestion[];
 
+  /**
+   * Subtitle shown below the user's name in the empty state.
+   * @default 'Como posso ajudar?'
+   */
+  welcomeMessage?: string;
+
   /**
    * Callback fired when the user sends a message
    */
@@ -480,6 +486,7 @@ export function XerticaAssistant({
   customResponses = [],
   responseGenerator,
   richSuggestions = [],
+  welcomeMessage = 'Como posso ajudar?',
   onRichAction,
   onEvaluation,
   feedbackOptions,
@@ -493,368 +500,70 @@ export function XerticaAssistant({
   enableSearch = true,
 }: XerticaAssistantProps) {
   // ============================================================================
-  // State Management
-  // ============================================================================
-
-  const isFullPage = mode === 'fullPage';
-  const [internalIsExpanded, setInternalIsExpanded] = useState(controlledIsExpanded ?? true);
-  const isExpanded = controlledIsExpanded ?? internalIsExpanded;
-
-  const [isMobile, setIsMobile] = useState(false);
-  useEffect(() => {
-    const handleResize = () => setIsMobile(window.innerWidth < 768);
-    handleResize();
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
-  }, []);
-
-  const [abaSelecionada, setAbaSelecionada] = useState<AssistantTab>(defaultTab);
-  const [mensagens, setMensagens] = useState<Message[]>(initialMessages);
-  const [mensagem, setMensagem] = useState('');
-  const [conversas, setConversas] = useState<Conversation[]>(savedConversations);
-  const [conversaAtual, setConversaAtual] = useState<string | null>(null);
-  const [copiedId, setCopiedId] = useState<string | null>(null);
-  const [generatingPodcastId, setGeneratingPodcastId] = useState<string | null>(null);
-  const [executingCommand, setExecutingCommand] = useState<string | null>(null);
-  const [savedSearches, setSavedSearches] = useState<string[]>([]);
-  const [editingDocument, setEditingDocument] = useState<{
-    content: string;
-    title: string;
-  } | null>(null);
-  const [showMoreSuggestions, setShowMoreSuggestions] = useState(false);
-  const [evaluationState, setEvaluationState] = useState<{
-    isOpen: boolean;
-    messageId: string | null;
-    type: 'dislike' | null;
-    category?: string | null;
-    reason: string;
-  }>({
-    isOpen: false,
-    messageId: null,
-    type: null,
-    category: null,
-    reason: ''
-  });
-
-  // ============================================================================
-  // Refs
-  // ============================================================================
-
-  const messagesEndRef = useRef<HTMLDivElement>(null);
-  const fileInputRef = useRef<HTMLInputElement>(null);
-  const audioInputRef = useRef<HTMLInputElement>(null);
-
-  // ============================================================================
-  // Sugestões padrão
-  // ============================================================================
-
-  const defaultSuggestions: Suggestion[] = [
-    { id: '1', text: 'Me ajude a criar um documento profissional' },
-    { id: '2', text: 'Buscar nos meus arquivos por "relatório"' },
-    { id: '3', text: 'Resuma as conversas importantes desta semana' },
-    { id: '4', text: 'Crie um podcast sobre o último projeto' },
-  ];
-
-  const sugestoes = propSuggestions ?? defaultSuggestions;
-
-  // API Key Validation removed
-
-
-  // ============================================================================
-  // Effects
-  // ============================================================================
-
-  // Auto-scroll ao adicionar mensagens
-  useEffect(() => {
-    if (messagesEndRef.current && abaSelecionada === 'chat') {
-      messagesEndRef.current.scrollIntoView({ behavior: 'smooth' });
-    }
-  }, [mensagens, abaSelecionada]);
-
-  // Sincronizar mensagens iniciais apenas quando elas mudarem e não forem vazias
-  useEffect(() => {
-    if (initialMessages && initialMessages.length > 0) {
-      setMensagens(initialMessages);
-    }
-  }, [initialMessages]);
-
-  // ============================================================================
-  // Handlers
-  // ============================================================================
-
-  const handleToggle = () => {
-    if (onToggle) {
-      onToggle();
-    } else {
-      setInternalIsExpanded(!internalIsExpanded);
-    }
-  };
-
-  const handleExpandWithTab = (tab: AssistantTab) => {
-    setAbaSelecionada(tab);
-    if (onToggle) {
-      onToggle();
-    } else {
-      setInternalIsExpanded(true);
-    }
-  };
-
-  const handleEnviarMensagem = async (arg?: string | ActionType) => {
-    let msgToSend = mensagem;
-
-    // Check if argument is a message text (from simple string) or ActionType
-    if (typeof arg === 'string' && !['document', 'podcast', 'search'].includes(arg)) {
-      msgToSend = arg;
-    }
-
-    if (!msgToSend.trim() || isProcessing) return;
-
-    const novaMensagem: Message = {
-      id: `msg-${Date.now()}`,
-      type: 'user',
-      content: msgToSend,
-      timestamp: new Date(),
-      isFavorite: false,
-    };
-
-    setMensagens(prev => [...prev, novaMensagem]);
-
-
-    if (onSendMessage) {
-      onSendMessage(msgToSend);
-    }
-
-    if (demoMode || responseGenerator) {
-      const mensagemAtual = msgToSend;
-      setTimeout(async () => {
-        let resposta: string | Partial<Message>;
-
-        if (responseGenerator) {
-          resposta = await responseGenerator(mensagemAtual);
-        } else {
-          resposta = gerarResposta(mensagemAtual, customResponses);
-        }
-
-        let novaMensagemIA: Message = {
-          id: `msg-${Date.now()}-ia`,
-          type: 'assistant',
-          content: '',
-          timestamp: new Date(),
-          isFavorite: false
-        };
-
-        if (typeof resposta === 'string') {
-          novaMensagemIA.content = resposta;
-        } else {
-          novaMensagemIA = { ...novaMensagemIA, ...resposta };
-        }
-
-        setMensagens(prev => [...prev, novaMensagemIA]);
-      }, 1000 + Math.random() * 1000);
-    }
-
-    setMensagem('');
-  };
-
-  const handleToggleFavorite = (messageId: string) => {
-    setMensagens(prev =>
-      prev.map(msg =>
-        msg.id === messageId ? { ...msg, isFavorite: !msg.isFavorite } : msg
-      )
-    );
-  };
-
-  const handleCopyMessage = async (content: string, messageId: string) => {
-    try {
-      // Try modern Clipboard API first
-      if (navigator.clipboard && navigator.clipboard.writeText) {
-        try {
-          await navigator.clipboard.writeText(content);
-          setCopiedId(messageId);
-          setTimeout(() => setCopiedId(null), 2000);
-        } catch (clipboardError: any) {
-          // If clipboard API fails due to permissions, fall back to execCommand
-          if (clipboardError.name === 'NotAllowedError' || clipboardError.message.includes('permissions policy')) {
-            throw new Error('Clipboard permission denied, falling back');
-          }
-          throw clipboardError;
-        }
-      } else {
-        throw new Error('Clipboard API not available');
-      }
-    } catch (err) {
-      // Fallback for browsers that don't support Clipboard API or when permissions are denied
-      try {
-        const textArea = document.createElement('textarea');
-        textArea.value = content;
-        textArea.style.position = 'fixed';
-        textArea.style.left = '-999999px';
-        textArea.style.top = '-999999px';
-        document.body.appendChild(textArea);
-        textArea.focus();
-        textArea.select();
-
-        const successful = document.execCommand('copy');
-        document.body.removeChild(textArea);
-
-        if (successful) {
-          setCopiedId(messageId);
-          setTimeout(() => setCopiedId(null), 2000);
-        } else {
-          console.error('Falha ao copiar: execCommand returned false');
-        }
-      } catch (fallbackErr) {
-        console.error('Falha ao copiar:', fallbackErr);
-      }
-    }
-  };
-
-  const handleGeneratePodcast = async (messageId: string, content: string) => {
-    setGeneratingPodcastId(messageId);
-
-    // Simulação de geração de podcast
-    setTimeout(() => {
-      setMensagens(prev =>
-        prev.map(msg =>
-          msg.id === messageId
-            ? {
-              ...msg,
-              attachmentType: 'podcast',
-              attachmentName: 'Podcast - ' + content.substring(0, 30) + '...',
-              audioUrl: 'data:audio/mpeg;base64,//uQx...' // Mock
-            }
-            : msg
-        )
-      );
-      setGeneratingPodcastId(null);
-    }, 2000);
-  };
-
-  const handleDownloadDocument = (content: string, fileName: string) => {
-    const blob = new Blob([content], { type: 'text/markdown' });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = fileName.endsWith('.md') ? fileName : fileName + '.md';
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-    URL.revokeObjectURL(url);
-  };
-
-  const handleDownloadPodcast = (audioUrl: string, fileName: string) => {
-    const a = document.createElement('a');
-    a.href = audioUrl;
-    a.download = fileName.endsWith('.mp3') ? fileName : fileName + '.mp3';
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-  };
-
-  const handleEditDocument = (content: string, title: string) => {
-    setEditingDocument({ content, title });
-  };
-
-  const handleNovaConversa = () => {
-    setMensagens([]);
-    setConversaAtual(null);
-    setAbaSelecionada('chat');
-  };
-
-  const handleSelecionarConversa = (conversaId: string) => {
-    const conversa = conversas.find(c => c.id === conversaId);
-    if (conversa) {
-      setMensagens(conversa.messages);
-      setConversaAtual(conversaId);
-      setAbaSelecionada('chat');
-    }
-  };
-
-  const handleToggleFavoritaConversa = (conversaId: string) => {
-    setConversas(prev =>
-      prev.map(conv =>
-        conv.id === conversaId ? { ...conv, isFavorite: !conv.isFavorite } : conv
-      )
-    );
-  };
-
-  const handleOpenSearchResult = (result: SearchResult) => {
-    console.log('Abrir resultado:', result);
-    // Implementar lógica de navegação ou abertura de resultado
-  };
-
-  const handleExecuteSearchCommand = async (
-    commandId: string,
-    searchTerm: string,
-    results: SearchResult[],
-    messageId: string
-  ) => {
-    setExecutingCommand(commandId);
-
-    // Simular execução de comando
-    setTimeout(() => {
-      if (commandId === '5') {
-        setSavedSearches(prev => [...prev, messageId]);
-      }
-      setExecutingCommand(null);
-    }, 1500);
-  };
-
-  const handleRichSuggestionClick = (suggestion: Suggestion) => {
-    if (onRichAction) {
-      onRichAction(suggestion.id, suggestion.text);
-    } else {
-      // Fallback: send as message
-      handleEnviarMensagem(suggestion.text);
-    }
-    setShowMoreSuggestions(false);
-  };
-
-  const handleEvaluationClick = (messageId: string, type: 'like' | 'dislike') => {
-    if (type === 'like') {
-      if (onEvaluation) onEvaluation(messageId, 'like');
-      // Update local state
-      setMensagens(prev => prev.map(m => m.id === messageId ? { ...m, evaluation: 'like' } : m));
-      toast.success("Obrigado por avaliar positivamente!");
-    }
-  };
-
-  const openFeedbackDialog = (messageId: string, category: string | null) => {
-    setEvaluationState({
-      isOpen: true,
-      messageId,
-      type: 'dislike',
-      category,
-      reason: ''
-    });
-  };
-
-  const handleSubmitDislike = () => {
-    if (evaluationState.messageId) {
-      const finalReason = evaluationState.category
-        ? (evaluationState.reason ? `${evaluationState.category}: ${evaluationState.reason}` : evaluationState.category)
-        : evaluationState.reason;
-
-      if (onEvaluation) {
-        onEvaluation(evaluationState.messageId, 'dislike', finalReason);
-      }
-
-      // Update local state
-      setMensagens(prev => prev.map(m => m.id === evaluationState.messageId ? { ...m, evaluation: 'dislike', evaluationReason: finalReason } : m));
-      toast.success("Obrigado pelo seu feedback. Vamos melhorar.");
-    }
-    setEvaluationState({ isOpen: false, messageId: null, type: null, category: null, reason: '' });
-  };
-
-  // ============================================================================
-  // Computations
+  // State & Logic — delegated to useAssistant hook
   // ============================================================================
 
-  const conversasFiltradas = conversas.filter(conversa => {
-    if (abaSelecionada === 'favoritos') {
-      return conversa.isFavorite;
-    }
-    return true;
+  const {
+    isFullPage,
+    isExpanded,
+    isMobile,
+    abaSelecionada,
+    setAbaSelecionada,
+    mensagens,
+    setMensagens,
+    mensagem,
+    setMensagem,
+    conversas,
+    conversaAtual,
+    conversasFiltradas,
+    copiedId,
+    generatingPodcastId,
+    executingCommand,
+    savedSearches,
+    editingDocument,
+    setEditingDocument,
+    showMoreSuggestions,
+    setShowMoreSuggestions,
+    evaluationState,
+    setEvaluationState,
+    sugestoes,
+    messagesEndRef,
+    fileInputRef,
+    audioInputRef,
+    handleToggle,
+    handleExpandWithTab,
+    handleEnviarMensagem,
+    handleToggleFavorite,
+    handleCopyMessage,
+    handleGeneratePodcast,
+    handleDownloadDocument,
+    handleDownloadPodcast,
+    handleEditDocument,
+    handleNovaConversa,
+    handleSelecionarConversa,
+    handleToggleFavoritaConversa,
+    handleOpenSearchResult,
+    handleExecuteSearchCommand,
+    handleRichSuggestionClick,
+    handleEvaluationClick,
+    openFeedbackDialog,
+    handleSubmitDislike,
+  } = useAssistant({
+    mode,
+    isExpanded: controlledIsExpanded,
+    onToggle,
+    defaultTab,
+    demoMode,
+    customResponses,
+    initialMessages,
+    savedConversations,
+    suggestions: propSuggestions,
+    onSendMessage,
+    isProcessing,
+    responseGenerator,
+    richSuggestions,
+    onRichAction,
+    onEvaluation,
   });
 
   // ============================================================================
@@ -927,53 +636,53 @@ export function XerticaAssistant({
           width: isFullPage ? '100%' : containerWidth,
         } : undefined}
       >
-      {/* Document Editor Overlay */}
-      {editingDocument && !isFullPage && (
-        <div
-          className={cn(
-            "flex flex-col border-border bg-background overflow-hidden transition-all duration-300",
-            isMobile ? "fixed inset-0 z-[110] w-full h-[100dvh]" : "absolute top-0 bottom-0 right-full w-[800px] border-l border-r border-border shadow-[-25px_0_50px_-15px_rgba(0,0,0,0.15)] z-[90]"
-          )}
-          style={{ maxWidth: isMobile ? 'none' : `calc(100vw - ${containerWidth})` }}
-        >
-          <div className="h-full flex flex-col">
-            {/* Header Toolbar */}
-            <div className="px-4 h-[64px] border-b border-border bg-card flex items-center justify-between">
-              <div className="flex items-center gap-3">
-                <div className="p-2 bg-primary/10 rounded-md">
-                  <FileText className="w-4 h-4 text-primary" />
+        {/* 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>
-                <h3 className="font-semibold text-card-foreground text-sm">{editingDocument.title}</h3>
+                <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>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="h-8 w-8 rounded-full"
-                onClick={() => setEditingDocument(null)}
-                aria-label="Fechar editor de documento"
-              >
-                <X className="w-4 h-4" />
-              </Button>
-            </div>
-            
-            {/* Rich Text Editor */}
-            <div className="flex-1 bg-muted/20 p-0 sm:p-6 overflow-hidden">
-              <RichTextEditor 
-                value={editingDocument.content || ''}
-                onChange={(newVal) => setEditingDocument(prev => prev ? { ...prev, content: newVal } : null)}
-                placeholder="Comece a digitar o conteúdo do seu documento aqui..."
-                className="max-w-4xl mx-auto h-full"
-                actionButton={
-                  <Button size="sm" className="gap-2 h-8">
-                    <Check className="w-3.5 h-3.5" />
-                    Salvar
-                  </Button>
-                }
-              />
             </div>
           </div>
-        </div>
-      )}
+        )}
         {/* Header - Toggle Button - Apenas visível quando não está em fullPage */}
         {!isFullPage && (
           <div
@@ -1187,63 +896,63 @@ export function XerticaAssistant({
                             Olá, {userName}
                           </h3>
                           <p className="text-muted-foreground">
-                            Como posso ajudar?
+                            {welcomeMessage}
                           </p>
                         </div>
 
                         {/* Suggestions */}
-                        <div className="px-4 pb-4 space-y-2">
-                          {sugestoes.map((sugestao) => (
-                            <button
-                              key={sugestao.id}
-                              onClick={() => handleEnviarMensagem(sugestao.text)}
-                              className="w-full p-3 text-left rounded-[var(--radius-card)] bg-muted text-foreground transition-colors duration-200 hover:bg-muted/80"
-                            >
-                              {sugestao.text}
-                            </button>
-                          ))}
+                        {(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>
+                            ))}
 
-                          {!showMoreSuggestions ? (
-                            <Button
-                              variant="ghost"
-                              size="sm"
-                              onClick={() => setShowMoreSuggestions(true)}
-                              className="w-full justify-start text-muted-foreground"
-                            >
-                              <MoreHorizontal className="w-4 h-4 mr-2" />
-                              Mais sugestões
-                            </Button>
-                          ) : (
-                            <div className="space-y-2 pt-2 border-t border-border mt-2 animate-in slide-in-from-top-2">
-                              {richSuggestions.length > 0 ? (
-                                richSuggestions.map((sugestao) => (
-                                  <button
-                                    key={sugestao.id}
-                                    onClick={() => handleRichSuggestionClick(sugestao)}
-                                    className="w-full p-3 text-left rounded-[var(--radius-card)] bg-muted/50 border border-border text-foreground transition-all duration-200 hover:bg-primary/5 hover:border-primary/50 group"
-                                  >
-                                    <div className="flex items-center gap-2">
-                                      {sugestao.id.includes('chart') && <BarChart3 className="w-4 h-4 text-primary" />}
-                                      {sugestao.id.includes('table') && <TableIcon className="w-4 h-4 text-primary" />}
-                                      <span className="font-medium">{sugestao.text}</span>
-                                    </div>
-                                  </button>
-                                ))
+                            {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>
                               ) : (
-                                <p className="text-sm text-muted-foreground text-center py-2">Nenhuma sugestão extra.</p>
-                              )}
-                              <Button
-                                variant="ghost"
-                                size="sm"
-                                onClick={() => setShowMoreSuggestions(false)}
-                                className="w-full justify-center text-muted-foreground mt-2"
-                              >
-                                <ChevronLeft className="w-4 h-4 mr-2" />
-                                Voltar
-                              </Button>
-                            </div>
-                          )}
-                        </div>
+                                <div 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>
                     ) : (
                       <ScrollArea className="flex-1 min-h-0 overflow-x-hidden [&_[data-radix-scroll-area-viewport]>div]:!block">
@@ -1264,14 +973,14 @@ export function XerticaAssistant({
 
                               <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" 
+                                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%]"
-                                    )
+                                    "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(
@@ -1590,15 +1299,15 @@ export function XerticaAssistant({
 
 
                                   {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"
-                                      >
+                                    <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" />
                                       ) : (
@@ -1810,7 +1519,7 @@ export function XerticaAssistant({
                   onSubmit={handleEnviarMensagem}
                   onFileUpload={enableFileAttachment ? () => fileInputRef.current?.click() : undefined}
                   onAudioUpload={enableAudioInput ? () => audioInputRef.current?.click() : undefined}
-                  placeholder="Envie uma mensagem para Xertica"
+                  placeholder="Envie uma mensagem"
                   disabled={isProcessing}
                   isFullPage={isFullPage}
                   enableAudioInput={enableAudioInput}