xertica-ui 1.0.0 → 1.1.0

package/components/ui/xertica-assistant.tsx

@@ -1,9 +1,9 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
-import { 
-  MessageSquare, 
-  Heart, 
-  History, 
+import {
+  MessageSquare,
+  Heart,
+  History,
   MoreHorizontal,
   X,
   ChevronLeft,
@@ -183,91 +183,91 @@ export interface XerticaAssistantProps {
    * @default 'expanded'
    */
   mode?: AssistantMode;
-  
+
   /**
    * Se o assistente está expandido (apenas para mode='expanded')
    * @default true
    */
   isExpanded?: boolean;
-  
+
   /**
    * Callback chamado quando o assistente é expandido/colapsado
    */
   onToggle?: () => void;
-  
+
   /**
    * Aba selecionada inicialmente
    * @default 'chat'
    */
   defaultTab?: AssistantTab;
-  
+
   /**
    * Se deve mostrar banner de aviso de API key
    * @default true
    */
   showApiWarning?: boolean;
-  
+
   /**
    * Chave da API do Gemini (se disponível)
    */
   apiKey?: string;
-  
+
   /**
    * Callback chamado ao navegar para página de configurações
    */
   onNavigateSettings?: () => void;
-  
+
   /**
    * Callback chamado ao navegar para página full do assistente
    */
   onNavigateFullPage?: () => void;
-  
+
   /**
    * Nome do usuário logado
    * @default 'Usuário'
    */
   userName?: string;
-  
+
   /**
    * Mensagens iniciais (para carregar conversa existente)
    */
   initialMessages?: Message[];
-  
+
   /**
    * Conversas salvas
    */
   savedConversations?: Conversation[];
-  
+
   /**
    * Sugestões de mensagens
    */
   suggestions?: Suggestion[];
-  
+
   /**
    * Callback chamado quando uma mensagem é enviada
    */
   onSendMessage?: (message: string) => void;
-  
+
   /**
    * Callback chamado quando um arquivo é anexado
    */
   onFileAttach?: (file: File) => void;
-  
+
   /**
    * Se está processando mensagem (mostra typing indicator)
    */
   isProcessing?: boolean;
-  
+
   /**
    * Largura customizada (apenas para mode='expanded')
    */
   width?: string;
-  
+
   /**
    * Altura customizada (apenas para mode='fullPage')
    */
   height?: string;
-  
+
   /**
    * Classes CSS adicionais
    */
@@ -334,11 +334,11 @@ export function XerticaAssistant({
   // ============================================================================
   // State Management
   // ============================================================================
-  
+
   const isFullPage = mode === 'fullPage';
   const [internalIsExpanded, setInternalIsExpanded] = useState(controlledIsExpanded ?? true);
   const isExpanded = controlledIsExpanded ?? internalIsExpanded;
-  
+
   const [abaSelecionada, setAbaSelecionada] = useState<AssistantTab>(defaultTab);
   const [mensagens, setMensagens] = useState<Message[]>(initialMessages);
   const [mensagem, setMensagem] = useState('');
@@ -352,56 +352,59 @@ export function XerticaAssistant({
     content: string;
     title: string;
   } | null>(null);
-  
+
   // ============================================================================
   // Refs
   // ============================================================================
-  
+
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const audioInputRef = useRef<HTMLInputElement>(null);
-  
+
   // ============================================================================
   // Sugestões padrão
   // ============================================================================
-  
+
   const defaultSuggestions: Suggestion[] = [
     { id: '1', texto: 'Me ajude a criar um documento profissional' },
     { id: '2', texto: 'Buscar nos meus arquivos por "relatório"' },
     { id: '3', texto: 'Resuma as conversas importantes desta semana' },
     { id: '4', texto: 'Crie um podcast sobre o último projeto' },
   ];
-  
+
   const sugestoes = propSuggestions ?? defaultSuggestions;
-  
+
   // ============================================================================
   // API Key Validation
   // ============================================================================
-  
-  const isApiKeyValid = Boolean(apiKey && apiKey.length > 20);
-  
+
+  // API Key Resolution
+  const effectiveApiKey = apiKey || (typeof import.meta !== 'undefined' && import.meta.env?.VITE_GEMINI_API_KEY);
+
+  const isApiKeyValid = Boolean(effectiveApiKey && effectiveApiKey.length > 20);
+
   // ============================================================================
   // Effects
   // ============================================================================
-  
+
   // Auto-scroll ao adicionar mensagens
   useEffect(() => {
     if (messagesEndRef.current && abaSelecionada === 'chat') {
       messagesEndRef.current.scrollIntoView({ behavior: 'smooth' });
     }
   }, [mensagens, abaSelecionada]);
-  
+
   // Sincronizar mensagens iniciais
   useEffect(() => {
     if (initialMessages.length > 0) {
       setMensagens(initialMessages);
     }
   }, [initialMessages]);
-  
+
   // ============================================================================
   // Handlers
   // ============================================================================
-  
+
   const handleToggle = () => {
     if (onToggle) {
       onToggle();
@@ -409,7 +412,7 @@ export function XerticaAssistant({
       setInternalIsExpanded(!internalIsExpanded);
     }
   };
-  
+
   const handleExpandWithTab = (tab: AssistantTab) => {
     setAbaSelecionada(tab);
     if (onToggle) {
@@ -418,10 +421,10 @@ export function XerticaAssistant({
       setInternalIsExpanded(true);
     }
   };
-  
+
   const handleEnviarMensagem = async () => {
     if (!mensagem.trim() || isProcessing) return;
-    
+
     const novaMensagem: Message = {
       id: `msg-${Date.now()}`,
       type: 'user',
@@ -429,16 +432,16 @@ export function XerticaAssistant({
       timestamp: new Date(),
       isFavorite: false,
     };
-    
+
     setMensagens(prev => [...prev, novaMensagem]);
-    
+
     if (onSendMessage) {
       onSendMessage(mensagem);
     }
-    
+
     setMensagem('');
   };
-  
+
   const handleToggleFavorite = (messageId: string) => {
     setMensagens(prev =>
       prev.map(msg =>
@@ -446,7 +449,7 @@ export function XerticaAssistant({
       )
     );
   };
-  
+
   const handleCopyMessage = async (content: string, messageId: string) => {
     try {
       // Try modern Clipboard API first
@@ -476,10 +479,10 @@ export function XerticaAssistant({
         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);
@@ -491,28 +494,28 @@ export function XerticaAssistant({
       }
     }
   };
-  
+
   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,
+              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);
@@ -524,7 +527,7 @@ export function XerticaAssistant({
     document.body.removeChild(a);
     URL.revokeObjectURL(url);
   };
-  
+
   const handleDownloadPodcast = (audioUrl: string, fileName: string) => {
     const a = document.createElement('a');
     a.href = audioUrl;
@@ -533,17 +536,17 @@ export function XerticaAssistant({
     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) {
@@ -552,7 +555,7 @@ export function XerticaAssistant({
       setAbaSelecionada('chat');
     }
   };
-  
+
   const handleToggleFavoritaConversa = (conversaId: string) => {
     setConversas(prev =>
       prev.map(conv =>
@@ -560,12 +563,12 @@ export function XerticaAssistant({
       )
     );
   };
-  
+
   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,
@@ -573,7 +576,7 @@ export function XerticaAssistant({
     messageId: string
   ) => {
     setExecutingCommand(commandId);
-    
+
     // Simular execução de comando
     setTimeout(() => {
       if (commandId === '5') {
@@ -582,31 +585,31 @@ export function XerticaAssistant({
       setExecutingCommand(null);
     }, 1500);
   };
-  
+
   // ============================================================================
   // Computations
   // ============================================================================
-  
+
   const conversasFiltradas = conversas.filter(conversa => {
     if (abaSelecionada === 'favoritos') {
       return conversa.favorita;
     }
     return true;
   });
-  
+
   // ============================================================================
   // Render
   // ============================================================================
-  
+
   const containerWidth = width ?? (
-    isFullPage 
-      ? '100%' 
-      : isExpanded 
+    isFullPage
+      ? '100%'
+      : isExpanded
         ? (editingDocument ? '420px' : '100%')
         : '64px' // Compacto quando fechado - apenas ícones
   );
   const containerHeight = height ?? 'h-full';
-  
+
   if (mobileFloating && !isExpanded) {
     return (
       <Button
@@ -651,14 +654,14 @@ export function XerticaAssistant({
           }
         }}
       />
-      
+
       {/* Document Editor */}
       {editingDocument && !isFullPage && (
-        <div 
+        <div
           className="flex-1 border-r border-border overflow-hidden"
         >
           <div className="h-full flex flex-col">
-            <div 
+            <div
               className="px-4 py-3 border-b border-border bg-card flex items-center justify-between"
             >
               <h3 className="text-card-foreground">{editingDocument.title}</h3>
@@ -671,7 +674,7 @@ export function XerticaAssistant({
               </Button>
             </div>
             <div className="flex-1 overflow-auto p-4">
-              <div 
+              <div
                 className="p-4 rounded-xl bg-muted"
               >
                 <p className="text-muted-foreground">
@@ -685,9 +688,9 @@ export function XerticaAssistant({
           </div>
         </div>
       )}
-      
+
       {/* Main Assistant Container */}
-      <div 
+      <div
         className={`${containerHeight} flex flex-col ${className} bg-background ${!isFullPage ? 'border-l border-border shadow-sm' : ''}`}
         style={{
           width: isFullPage ? '100%' : containerWidth,
@@ -695,7 +698,7 @@ export function XerticaAssistant({
       >
         {/* Header - Toggle Button - Apenas visível quando não está em fullPage */}
         {!isFullPage && (
-          <div 
+          <div
             className="border-b border-border flex items-center justify-between px-[14px] px-[18px] py-[16px]"
           >
             {isExpanded && (
@@ -709,7 +712,7 @@ export function XerticaAssistant({
                 <span className="text-foreground">Assistente Xertica</span>
               </motion.div>
             )}
-            
+
             <div className="flex items-center gap-1">
               {isExpanded && onNavigateFullPage && (
                 <Button
@@ -722,7 +725,7 @@ export function XerticaAssistant({
                   <Maximize2 className="w-4 h-4" />
                 </Button>
               )}
-              
+
               <Button
                 variant="ghost"
                 size="sm"
@@ -759,7 +762,7 @@ export function XerticaAssistant({
                 <p>Assistente Xertica</p>
               </AssistantTooltipContent>
             </Tooltip>
-            
+
             <Tooltip>
               <TooltipTrigger asChild>
                 <Button
@@ -778,7 +781,7 @@ export function XerticaAssistant({
                 <p>Chat</p>
               </AssistantTooltipContent>
             </Tooltip>
-            
+
             <Tooltip>
               <TooltipTrigger asChild>
                 <Button
@@ -797,7 +800,7 @@ export function XerticaAssistant({
                 <p>Favoritos</p>
               </AssistantTooltipContent>
             </Tooltip>
-            
+
             <Tooltip>
               <TooltipTrigger asChild>
                 <Button
@@ -831,7 +834,7 @@ export function XerticaAssistant({
             >
               {/* Navigation Tabs - Oculto em modo fullPage */}
               {!isFullPage && (
-                <div 
+                <div
                   className="px-4 py-2 border-b border-border"
                 >
                   <div className="flex gap-1">
@@ -897,9 +900,9 @@ export function XerticaAssistant({
                                   Ir para Configurações
                                 </Button>
                               )}
-                              <a 
-                                href="https://aistudio.google.com/apikey" 
-                                target="_blank" 
+                              <a
+                                href="https://aistudio.google.com/apikey"
+                                target="_blank"
                                 rel="noopener noreferrer"
                                 className="inline-flex items-center gap-1 underline text-muted-foreground hover:text-foreground"
                               >
@@ -911,7 +914,7 @@ export function XerticaAssistant({
                         </div>
                       </div>
                     )}
-                    
+
                     {mensagens.length === 0 ? (
                       <div className="flex-1 overflow-y-auto min-h-0">
                         {/* Welcome Message */}
@@ -938,7 +941,7 @@ export function XerticaAssistant({
                               {sugestao.texto}
                             </button>
                           ))}
-                          
+
                           <Button
                             variant="ghost"
                             size="sm"
@@ -965,22 +968,22 @@ export function XerticaAssistant({
                                   <XerticaOrbe size={32} />
                                 </div>
                               )}
-                              
+
                               <div className={cn(
                                 "flex flex-col max-w-[85%] md:max-w-[70%] min-w-0 w-fit",
                                 msg.type === 'user' ? "items-end" : "items-start"
                               )}>
-                                <div 
+                                <div
                                   className={cn(
                                     "px-4 py-2 break-words overflow-hidden overflow-x-hidden w-full rounded-2xl",
-                                    msg.type === 'user' 
-                                      ? "bg-primary text-primary-foreground shadow-sm" 
+                                    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 
+                                    <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">
@@ -1012,7 +1015,7 @@ export function XerticaAssistant({
 
                                   {/* Attachments */}
                                   {msg.attachmentType && msg.attachmentType !== 'podcast' && msg.attachmentType !== 'document' && (
-                                    <div 
+                                    <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" />}
@@ -1021,21 +1024,21 @@ export function XerticaAssistant({
                                       <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 
+                                        <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} 
+                                              <MarkdownMessage
+                                                content={msg.content}
                                                 className="text-foreground"
                                               />
                                             </div>
@@ -1043,34 +1046,34 @@ export function XerticaAssistant({
                                         </div>
                                       )}
                                       {!(msg.content.includes('🔐') || msg.content.includes('❌')) && (
-                                        <MarkdownMessage 
-                                          content={msg.content} 
+                                        <MarkdownMessage
+                                          content={msg.content}
                                           className="text-foreground"
                                         />
                                       )}
                                     </>
                                   )}
-                                  
+
                                   {/* Document Preview */}
                                   {msg.attachmentType === 'document' && msg.documentContent && (
-                                    <div 
+                                    <div
                                       className="mt-3 pt-3 border-t border-border overflow-hidden"
                                     >
-                                      <FormattedDocument 
+                                      <FormattedDocument
                                         content={msg.documentContent}
                                         maxPreviewLength={250}
                                       />
                                     </div>
                                   )}
-                                  
+
                                   {/* Podcast Player */}
                                   {msg.attachmentType === 'podcast' && msg.audioUrl && (
-                                    <div 
+                                    <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 
+                                          <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" />
@@ -1089,11 +1092,11 @@ export function XerticaAssistant({
                                           <Download className="w-3 h-3" />
                                         </Button>
                                       </div>
-                                      <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 
+                                        <audio
+                                          controls
                                           className="w-full max-w-full h-10 outline-none"
                                         >
                                           <source src={msg.audioUrl} type="audio/mpeg" />
@@ -1102,10 +1105,10 @@ export function XerticaAssistant({
                                       </div>
                                     </div>
                                   )}
-                                  
+
                                   {/* Search Results */}
                                   {msg.attachmentType === 'search' && msg.searchResults && (
-                                    <div 
+                                    <div
                                       className="mt-3 pt-3 border-t border-border space-y-4 overflow-hidden"
                                     >
                                       <div className="overflow-hidden">
@@ -1136,7 +1139,7 @@ export function XerticaAssistant({
                                                       <h5 className="text-sm font-medium break-words flex-1 min-w-0 text-foreground">
                                                         {result.title}
                                                       </h5>
-                                                      <span 
+                                                      <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}%
@@ -1196,7 +1199,7 @@ export function XerticaAssistant({
                                               <button
                                                 key={command.id}
                                                 onClick={() => handleExecuteSearchCommand(
-                                                  command.id, 
+                                                  command.id,
                                                   msg.content.replace('🔍 Pesquisa realizada com sucesso!', '').split('"')[1] || 'pesquisa',
                                                   msg.searchResults!,
                                                   msg.id
@@ -1230,13 +1233,13 @@ export function XerticaAssistant({
                                     </div>
                                   )}
                                 </div>
-                                
+
                                 {/* Message Actions */}
                                 <div className="flex items-center gap-2 mt-1 px-2">
                                   <span className="text-sm text-muted-foreground">
                                     {msg.timestamp.toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' })}
                                   </span>
-                                  
+
                                   <Button
                                     variant="ghost"
                                     size="sm"
@@ -1245,7 +1248,7 @@ export function XerticaAssistant({
                                   >
                                     <Heart className={`w-3 h-3 ${msg.isFavorite ? 'fill-current' : ''}`} />
                                   </Button>
-                                  
+
                                   {msg.type === 'assistant' && msg.attachmentType !== 'podcast' && (
                                     <Button
                                       variant="ghost"
@@ -1262,7 +1265,7 @@ export function XerticaAssistant({
                                       )}
                                     </Button>
                                   )}
-                                  
+
                                   <Button
                                     variant="ghost"
                                     size="sm"
@@ -1279,7 +1282,7 @@ export function XerticaAssistant({
                               </div>
                             </motion.div>
                           ))}
-                          
+
                           {/* Typing Indicator */}
                           {isProcessing && (
                             <motion.div
@@ -1291,8 +1294,8 @@ export function XerticaAssistant({
                               <div className="flex-shrink-0 pt-1">
                                 <XerticaOrbe size={32} />
                               </div>
-                              
-                              <div 
+
+                              <div
                                 className="px-4 py-3 bg-muted rounded-2xl"
                               >
                                 <div className="flex gap-1">
@@ -1315,7 +1318,7 @@ export function XerticaAssistant({
                               </div>
                             </motion.div>
                           )}
-                          
+
                           <div ref={messagesEndRef} />
                         </div>
                       </ScrollArea>
@@ -1343,7 +1346,7 @@ export function XerticaAssistant({
                           <div className="text-center py-8">
                             <Heart className="w-12 h-12 mx-auto text-muted-foreground/50 mb-2" />
                             <p className="text-muted-foreground">
-                              {abaSelecionada === 'favoritos' 
+                              {abaSelecionada === 'favoritos'
                                 ? 'Nenhuma conversa favorita ainda'
                                 : 'Nenhuma conversa no histórico'}
                             </p>
@@ -1373,11 +1376,11 @@ export function XerticaAssistant({
                                   }}
                                   className="h-6 w-6 p-0 flex-shrink-0 ml-1"
                                 >
-                                  <Heart 
+                                  <Heart
                                     className={cn(
                                       "w-3 h-3",
                                       conversa.favorita ? "text-destructive fill-current" : "text-muted-foreground"
-                                    )} 
+                                    )}
                                   />
                                 </Button>
                               </div>