xertica-ui 1.3.4 → 1.3.5

package/components/AssistenteXertica.tsx

@@ -1,6 +1,6 @@
-import React, { useState, useEffect, useRef } from 'react';
 import { useNavigate } from 'react-router';
 import { motion, AnimatePresence } from 'framer-motion';
+import React, { useState, useEffect, useRef, Suspense } from 'react';
 import {
   MessageSquare,
   Heart,
@@ -33,8 +33,7 @@ import {
   Bookmark,
   Maximize2,
   AlertCircle,
-  ThumbsUp,
-  ThumbsDown,
+
   BookOpen,
   ArrowLeft,
   Table as TableIcon
@@ -46,34 +45,19 @@ import { DocumentEditor } from './DocumentEditor';
 import { MarkdownMessage } from './MarkdownMessage';
 import { FormattedDocument } from './FormattedDocument';
 import { ModernChatInput, ActionType } from './ModernChatInput';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "./ui/dropdown-menu";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "./ui/dialog";
-import { Textarea } from "./ui/textarea";
+
+
 import { Alert, AlertDescription, AlertTitle } from "./ui/alert";
 import { XerticaOrbe } from './XerticaOrbe';
-import { useApiKey } from '../contexts/ApiKeyContext';
 import { useAssistente } from '../contexts/AssistenteContext';
-import { callGeminiAPI, buildSystemPrompt, GeminiMessage } from '../utils/gemini';
 import { toast } from 'sonner';
 import { Tooltip, TooltipTrigger } from './ui/tooltip';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { cn } from './ui/utils';
 import { ASSISTANT_EXPANDED_WIDTH, ASSISTANT_COLLAPSED_WIDTH } from './layout-constants';
-// Import Chart Components
-import { Bar, BarChart, CartesianGrid, XAxis, Tooltip as RechartsTooltip, ResponsiveContainer } from "recharts";
-import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from "./ui/chart";
+// Import Chart Components - Lazy Loaded
+const AssistantChart = React.lazy(() => import('./ui/AssistantChart'));
+import { ChartConfig } from "./ui/chart";
 import {
   Table,
   TableBody,
@@ -155,7 +139,8 @@ export function AssistenteXertica({
   customResponses = []
 }: AssistenteXerticaProps) {
   const navigate = useNavigate();
-  const { geminiApiKey, isApiKeyValid } = useApiKey();
+
+
   const {
     conversaAtual,
     setConversaAtual,
@@ -179,10 +164,7 @@ export function AssistenteXertica({
   const [copiedId, setCopiedId] = useState<string | null>(null);
   const [generatingPodcastId, setGeneratingPodcastId] = useState<string | null>(null);
   const [executingCommand, setExecutingCommand] = useState<string | null>(null);
-  const [feedbackDialogOpen, setFeedbackDialogOpen] = useState(false);
-  const [feedbackMessageId, setFeedbackMessageId] = useState<string | null>(null);
-  const [feedbackCategory, setFeedbackCategory] = useState<string | null>(null);
-  const [feedbackReason, setFeedbackReason] = useState("");
+
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const audioInputRef = useRef<HTMLInputElement>(null);
@@ -286,52 +268,7 @@ export function AssistenteXertica({
     }, 1500);
   };
 
-  const handleEvaluation = (messageId: string, evaluation: 'like' | 'dislike', reason?: string) => {
-    setConversas(prev => prev.map(conv => {
-      if (conv.id === conversaAtual) {
-        return {
-          ...conv,
-          mensagens: conv.mensagens.map(msg =>
-            msg.id === messageId ? { ...msg, evaluation, evaluationReason: reason } : msg
-          )
-        };
-      }
-      return conv;
-    }));
-
-    if (evaluation === 'like') {
-      toast.success("Obrigado por avaliar positivamente!");
-    } else if (evaluation === 'dislike' && reason) {
-      toast.success("Obrigado pelo seu feedback. Vamos melhorar.");
-    }
-  };
-
-  const openFeedbackDialog = (messageId: string, category: string | null = null) => {
-    setFeedbackMessageId(messageId);
-    setFeedbackCategory(category);
-    setFeedbackReason("");
-    setFeedbackDialogOpen(true);
-  };
-
-  const submitFeedbackDialog = () => {
-    if (!feedbackMessageId) return;
 
-    let finalReason = "";
-    if (feedbackCategory) {
-      // Se tem categoria pré-definida, o comentário é opcional
-      finalReason = feedbackReason.trim() ? `${feedbackCategory}: ${feedbackReason}` : feedbackCategory;
-    } else {
-      // Se é "Outros", o motivo é obrigatório
-      if (!feedbackReason.trim()) return;
-      finalReason = feedbackReason;
-    }
-
-    handleEvaluation(feedbackMessageId, 'dislike', finalReason);
-    setFeedbackDialogOpen(false);
-    setFeedbackMessageId(null);
-    setFeedbackReason("");
-    setFeedbackCategory(null);
-  };
 
   const conversaAtiva = conversas.find(c => c.id === conversaAtual);
   const mensagens = conversaAtiva?.mensagens || [];
@@ -345,100 +282,26 @@ export function AssistenteXertica({
     scrollToBottom();
   }, [mensagens, isTyping]);
 
-  // Resposta da IA usando Gemini API
+  // Resposta simulada da IA
   const simularRespostaIA = async (mensagemUsuario: string) => {
     setIsTyping(true);
 
     try {
-      let novaMensagemParcial: Partial<Message> = {};
 
-      // Se a chave da API for válida e não estiver em modo demo, usar Gemini
-      if (isApiKeyValid && geminiApiKey && !demoMode) {
-        // Construir histórico da conversa para o Gemini
-        const conversaAtiva = conversas.find(c => c.id === conversaAtual);
-        const historico: GeminiMessage[] = [];
-
-        // Adicionar prompt do sistema
-        const systemPrompt = buildSystemPrompt();
-
-        // Converter mensagens anteriores para formato Gemini (últimas 10 mensagens)
-        const mensagensRecentes = (conversaAtiva?.mensagens || []).slice(-10);
-        for (const msg of mensagensRecentes) {
-          if (msg.type === 'user') {
-            // Remover prefixos de ação antes de enviar ao Gemini
-            let conteudoLimpo = msg.content
-              .replace(/^📄 \[Criar documento\] /, '')
-              .replace(/^🎙️ \[Gerar podcast\] /, '')
-              .replace(/^🔍 \[Pesquisar\] /, '');
-
-            historico.push({
-              role: 'user',
-              parts: [{ text: conteudoLimpo }]
-            });
-          } else if (msg.type === 'assistant') {
-            historico.push({
-              role: 'model',
-              parts: [{ text: msg.content }]
-            });
-          }
-        }
 
-        // Se não houver histórico, adicionar o prompt do sistema como primeira mensagem
-        if (historico.length === 0) {
-          historico.push({
-            role: 'user',
-            parts: [{ text: systemPrompt }]
-          });
-          historico.push({
-            role: 'model',
-            parts: [{ text: 'Entendido! Estou pronto para ajudar você com a plataforma Xertica.ai. Como posso ajudá-lo hoje?' }]
-          });
-        }
+      let novaMensagemParcial: Partial<Message> = {};
 
-        try {
-          const respostaTexto = await callGeminiAPI(geminiApiKey, mensagemUsuario, historico);
-          novaMensagemParcial = { content: respostaTexto };
-        } catch (error) {
-          console.error('Erro ao chamar API Gemini:', error);
-          // Usar a mensagem de erro do utilitário se disponível
-          const errorMessage = error instanceof Error ? error.message : '❌ Erro desconhecido';
-
-          // Verificar se é erro de chave vazada ou 403
-          const isLeakedKeyError = errorMessage.toLowerCase().includes('leaked') ||
-            errorMessage.toLowerCase().includes('reported') ||
-            errorMessage.toLowerCase().includes('403');
-
-          if (isLeakedKeyError) {
-            toast.error('Chave de API desativada por segurança', {
-              description: 'Sua chave foi reportada como vazada. Gere uma nova em Google AI Studio.',
-              duration: 6000,
-            });
-            novaMensagemParcial = {
-              content: `🔐 **Chave de API Desativada por Segurança**\n\n${errorMessage}\n\n**Como resolver:**\n1. Acesse [Google AI Studio](https://aistudio.google.com/apikey)\n2. Gere uma nova chave de API\n3. Configure a nova chave em **Configurações > API**\n\n⚠️ **Importante:** Não compartilhe sua chave de API publicamente.`
-            };
-          } else {
-            toast.error('Erro ao processar mensagem', {
-              description: 'Verifique sua chave de API nas Configurações.',
-              duration: 4000,
-            });
-            novaMensagemParcial = {
-              content: `**Erro ao processar sua mensagem**\n\n${errorMessage}\n\n💡 **Dica:** Verifique se sua chave de API está configurada corretamente em **Configurações > API**.`
-            };
-          }
-        }
-      } else {
-        // Fallback para respostas simuladas se não houver API key ou em modo demo
-        await new Promise(resolve => setTimeout(resolve, 1000 + Math.random() * 1000));
+      // Fallback para respostas simuladas se não houver API key ou em modo demo
+      await new Promise(resolve => setTimeout(resolve, 1000 + Math.random() * 1000));
 
-        // Passar customResponses para gerarResposta
-        const resultadoMock = gerarResposta(mensagemUsuario, customResponses);
+      // Passar customResponses para gerarResposta
+      const resultadoMock = gerarResposta(mensagemUsuario, customResponses);
 
-        if (typeof resultadoMock === 'string') {
-          novaMensagemParcial = { content: resultadoMock };
-        } else {
-          // Se for objeto (MockResponse), usar diretamente
-          novaMensagemParcial = resultadoMock;
-        }
+      if (typeof resultadoMock === 'string') {
+        novaMensagemParcial = { content: resultadoMock };
+      } else {
+        // Se for objeto (MockResponse), usar diretamente
+        novaMensagemParcial = resultadoMock;
       }
 
       const novaMensagem: Message = {
@@ -1587,43 +1450,7 @@ Este documento fornece uma base sólida para entender e trabalhar com ${temaLimp
                     {abaSelecionada === 'chat' && (
                       <div className="flex-1 flex flex-col min-h-0 w-full">
                         {/* API Key Warning Banner */}
-                        {!isApiKeyValid && (
-                          <div className="mx-4 mt-3 p-4 bg-[var(--toast-warning-bg)]/20 border-2 border-[var(--toast-warning-border)] rounded-lg">
-                            <div className="flex items-start gap-3">
-                              <AlertCircle className="w-5 h-5 text-[var(--toast-warning-icon)] flex-shrink-0 mt-0.5" />
-                              <div className="flex-1 space-y-3">
-                                <p className="text-small text-foreground">
-                                  {!geminiApiKey ? (
-                                    <strong>Nenhuma chave de API configurada</strong>
-                                  ) : (
-                                    <strong>🔐 Chave de API inválida ou vazada</strong>
-                                  )}
-                                </p>
-                                <p className="text-small text-muted-foreground">
-                                  Configure uma nova chave do Google Gemini para ativar respostas inteligentes do assistente.
-                                </p>
-                                <div className="flex flex-wrap items-center gap-2">
-                                  <Button
-                                    onClick={() => navigate('/settings')}
-                                    size="sm"
-                                    className="bg-[var(--toast-warning-icon)] hover:opacity-90 text-white rounded-[12px] shadow-sm"
-                                  >
-                                    Ir para Configurações
-                                  </Button>
-                                  <a
-                                    href="https://aistudio.google.com/apikey"
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                    className="inline-flex items-center gap-1 text-small text-[var(--toast-warning-icon)] underline hover:opacity-80"
-                                  >
-                                    Obter chave gratuitamente
-                                    <ExternalLink className="w-3 h-3" />
-                                  </a>
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                        )}
+
 
                         {mensagens.length === 0 ? (
                           <div className="flex-1 overflow-y-auto min-h-0">
@@ -1805,30 +1632,15 @@ Este documento fornece uma base sólida para entender e trabalhar com ${temaLimp
                                       {/* Chart Rendering */}
                                       {msg.chartData && msg.chartConfig && (
                                         <div className="mt-4 mb-2 p-2 bg-background/50 rounded-lg border border-border">
-                                          <ChartContainer config={msg.chartConfig}>
-                                            <BarChart accessibilityLayer data={msg.chartData}>
-                                              <CartesianGrid vertical={false} />
-                                              <XAxis
-                                                dataKey="month"
-                                                tickLine={false}
-                                                tickMargin={10}
-                                                axisLine={false}
-                                                tickFormatter={(value) => value.slice(0, 3)}
-                                              />
-                                              <ChartTooltip
-                                                cursor={false}
-                                                content={<ChartTooltipContent indicator="dashed" />}
-                                              />
-                                              <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
-                                              <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
-                                            </BarChart>
-                                          </ChartContainer>
+                                          <Suspense fallback={<div className="h-[200px] w-full flex items-center justify-center bg-muted/20 rounded-lg"><Loader2 className="w-8 h-8 animate-spin text-muted-foreground" /></div>}>
+                                            <AssistantChart data={msg.chartData} config={msg.chartConfig} />
+                                          </Suspense>
                                         </div>
                                       )}
 
                                       {/* Table Rendering */}
                                       {msg.tableData && (
-                                        <div className="mt-4 mb-2 rounded-md border">
+                                        <div className="mt-4 mb-2 rounded-md border w-full max-w-full overflow-hidden">
                                           <Table>
                                             {msg.tableData.caption && <TableCaption>{msg.tableData.caption}</TableCaption>}
                                             <TableHeader>
@@ -2065,56 +1877,7 @@ Este documento fornece uma base sólida para entender e trabalhar com ${temaLimp
                                       </Button>
                                     </div>
 
-                                    {/* Feedback UI */}
-                                    {msg.type === 'assistant' && (
-                                      <div className="px-2 pb-2">
-                                        <div className="flex items-center gap-1 mt-2">
-                                          <span className="text-xs text-muted-foreground mr-2">Essa resposta foi útil?</span>
-                                          <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={() => handleEvaluation(msg.id, 'like')}
-                                            title="Gostei"
-                                          >
-                                            <ThumbsUp className="h-3.5 w-3.5" />
-                                          </Button>
-
-                                          <DropdownMenu>
-                                            <DropdownMenuTrigger asChild>
-                                              <Button
-                                                variant="ghost"
-                                                size="icon"
-                                                className={cn(
-                                                  "h-6 w-6 rounded-full hover:bg-red-100 dark:hover:bg-red-900/20 hover:text-red-600",
-                                                  msg.evaluation === 'dislike' && "text-red-600 bg-red-100 dark:bg-red-900/20"
-                                                )}
-                                                title="Não gostei"
-                                              >
-                                                <ThumbsDown className="h-3.5 w-3.5" />
-                                              </Button>
-                                            </DropdownMenuTrigger>
-                                            <DropdownMenuContent align="start">
-                                              <DropdownMenuItem onClick={() => openFeedbackDialog(msg.id, 'Não era o que eu procurava')}>
-                                                Não era o que eu procurava
-                                              </DropdownMenuItem>
-                                              <DropdownMenuItem onClick={() => openFeedbackDialog(msg.id, 'Informação incorreta')}>
-                                                Informação incorreta
-                                              </DropdownMenuItem>
-                                              <DropdownMenuItem onClick={() => openFeedbackDialog(msg.id, 'Resposta incompleta')}>
-                                                Resposta incompleta
-                                              </DropdownMenuItem>
-                                              <DropdownMenuItem onClick={() => openFeedbackDialog(msg.id, null)}>
-                                                Outros...
-                                              </DropdownMenuItem>
-                                            </DropdownMenuContent>
-                                          </DropdownMenu>
-                                        </div>
-                                      </div>
-                                    )}
+
                                   </div>
                                 </motion.div>
                               ))}
@@ -2160,37 +1923,7 @@ Este documento fornece uma base sólida para entender e trabalhar com ${temaLimp
                       </div>
                     )}
 
-                    <Dialog open={feedbackDialogOpen} onOpenChange={setFeedbackDialogOpen}>
-                      <DialogContent className="sm:max-w-[600px]">
-                        <DialogHeader>
-                          <DialogTitle className="pr-8">
-                            {feedbackCategory ? `Enviar feedback: ${feedbackCategory}` : 'Enviar feedback'}
-                          </DialogTitle>
-                          <DialogDescription>
-                            {feedbackCategory
-                              ? "Gostaria de adicionar algum comentário? (Opcional)"
-                              : "Conte-nos por que essa resposta não foi útil para que possamos melhorar."}
-                          </DialogDescription>
-                        </DialogHeader>
-                        <div className="grid gap-4 py-4 px-6">
-                          <Textarea
-                            className="min-h-[100px]"
-                            placeholder={feedbackCategory ? "Comentário adicional..." : "Descreva o motivo..."}
-                            value={feedbackReason}
-                            onChange={(e) => setFeedbackReason(e.target.value)}
-                          />
-                        </div>
-                        <DialogFooter>
-                          <Button variant="outline" onClick={() => setFeedbackDialogOpen(false)}>Cancelar</Button>
-                          <Button
-                            onClick={submitFeedbackDialog}
-                            disabled={!feedbackCategory && !feedbackReason.trim()}
-                          >
-                            {feedbackCategory ? 'Confirmar e Enviar' : 'Enviar feedback'}
-                          </Button>
-                        </DialogFooter>
-                      </DialogContent>
-                    </Dialog>
+
 
                     {(abaSelecionada === 'historico' || abaSelecionada === 'favoritos') && (
                       <ScrollArea className="flex-1 min-h-0">

package/components/HomeContent.tsx

@@ -13,9 +13,7 @@ import { Badge } from './ui/badge';
 import { useLayout } from '../contexts/LayoutContext';
 import {
   SIDEBAR_EXPANDED_WIDTH,
-  SIDEBAR_COLLAPSED_WIDTH,
-  ASSISTANT_EXPANDED_WIDTH,
-  ASSISTANT_COLLAPSED_WIDTH
+  SIDEBAR_COLLAPSED_WIDTH
 } from './layout-constants';
 
 interface HomeContentProps {
@@ -44,8 +42,7 @@ export function HomeContent({ }: HomeContentProps) {
   return (
     <div
       style={{
-        paddingLeft: sidebarExpanded ? SIDEBAR_EXPANDED_WIDTH : SIDEBAR_COLLAPSED_WIDTH,
-        paddingRight: assistenteExpanded ? ASSISTANT_EXPANDED_WIDTH : ASSISTANT_COLLAPSED_WIDTH
+        paddingLeft: sidebarExpanded ? SIDEBAR_EXPANDED_WIDTH : SIDEBAR_COLLAPSED_WIDTH
       }}
       className={`flex-1 flex flex-col overflow-hidden transition-all duration-300`}
     >