xertica-ui 1.3.3 → 1.3.4

package/components/HomePage.tsx

@@ -2,15 +2,24 @@ import React from 'react';
 import { useLocation, useNavigate } from 'react-router';
 import { Sidebar } from './Sidebar';
 import { HomeContent } from './HomeContent';
-import { AssistenteXertica } from './AssistenteXertica';
+import { XerticaAssistant } from './ui/xertica-assistant';
+import { generateDemoResponse } from '../utils/demo-responses';
 import { routes } from '../routes';
+import { useLayout } from '../contexts/LayoutContext';
 
-interface HomePageProps {
-  user: { email: string } | null;
-  onLogout: () => void;
-}
+const richSuggestions = [
+  { id: 'chart-1', texto: 'Ver análise de performance' },
+  { id: 'table-1', texto: 'Gerar relatório de projetos' },
+  { id: 'doc-1', texto: 'Criar documento de requisitos' },
+  { id: 'pod-1', texto: 'Gerar podcast do resumo diário' }
+];
+
+const feedbackOptions = [
+  'Não era o que eu procurava',
+  'Informação incorreta',
+  'Resposta incompleta'
+];
 
-import { useLayout } from '../contexts/LayoutContext';
 
 interface HomePageProps {
   user: { email: string } | null;
@@ -34,10 +43,14 @@ export function HomePage({ user, onLogout }: HomePageProps) {
         routes={routes}
       />
       <HomeContent />
-      <AssistenteXertica
+      <XerticaAssistant
         isExpanded={assistenteExpanded}
         onToggle={toggleAssistente}
-        onToggleWithTab={toggleAssistenteWithTab}
+        defaultTab="chat"
+        demoMode={true}
+        responseGenerator={generateDemoResponse}
+        richSuggestions={richSuggestions}
+        feedbackOptions={feedbackOptions}
       />
     </div>
   );

package/components/ui/xertica-assistant.tsx

@@ -31,8 +31,52 @@ import {
   BarChart3,
   Bookmark,
   Maximize2,
-  AlertCircle
+  AlertCircle,
+  ThumbsUp,
+  ThumbsDown,
+  Table as TableIcon,
+  ArrowLeft
 } from 'lucide-react';
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  XAxis,
+  Tooltip as RechartsTooltip,
+  ResponsiveContainer
+} from "recharts";
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent
+} from "./chart";
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "./table";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "./dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "./dropdown-menu";
+import { Textarea } from "./textarea";
 import { Button } from './button';
 import { ScrollArea } from './scroll-area';
 import { Separator } from './separator';
@@ -295,6 +339,28 @@ export interface XerticaAssistantProps {
    */
   className?: string;
   mobileFloating?: boolean;
+  /**
+   * Função para gerar respostas customizadas
+   * @param message A mensagem do usuário
+   * @returns Promessa com a resposta ou a resposta diretamente
+   */
+  responseGenerator?: (message: string) => Promise<string | Partial<Message>> | string | Partial<Message>;
+  /**
+   * Sugestões ricas adicionais (exibidas ao clicar em "Mais sugestões")
+   */
+  richSuggestions?: Suggestion[];
+  /**
+   * Callback para ações de sugestão rica
+   */
+  onRichAction?: (actionId: string, actionText: string) => void;
+  /**
+   * Callback para avaliação de mensagens
+   */
+  onEvaluation?: (messageId: string, type: 'like' | 'dislike', reason?: string) => void;
+  /**
+   * Opções de feedback negativo (exibidas no dropdown de dislike)
+   */
+  feedbackOptions?: string[];
 }
 
 // ============================================================================
@@ -353,7 +419,12 @@ export function XerticaAssistant({
   className = '',
   mobileFloating = false,
   demoMode = false,
-  customResponses = []
+  customResponses = [],
+  responseGenerator,
+  richSuggestions = [],
+  onRichAction,
+  onEvaluation,
+  feedbackOptions
 }: XerticaAssistantProps) {
   // ============================================================================
   // State Management
@@ -376,6 +447,20 @@ export function XerticaAssistant({
     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
@@ -446,13 +531,20 @@ export function XerticaAssistant({
     }
   };
 
-  const handleEnviarMensagem = async () => {
-    if (!mensagem.trim() || isProcessing) return;
+  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: mensagem,
+      content: msgToSend,
       timestamp: new Date(),
       isFavorite: false,
     };
@@ -461,16 +553,19 @@ export function XerticaAssistant({
 
 
     if (onSendMessage) {
-      onSendMessage(mensagem);
+      onSendMessage(msgToSend);
     }
 
-    if (demoMode) {
-      // Simular resposta no modo demo se não houver handler externo ou se o handler for apenas para log/side-effect
-      // Mas cuidado para não duplicar se onSendMessage também gerar resposta.
-      // Assumindo que demoMode é autossuficiente.
-      const mensagemAtual = mensagem;
-      setTimeout(() => {
-        const resposta = gerarResposta(mensagemAtual, customResponses);
+    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`,
@@ -637,6 +732,48 @@ export function XerticaAssistant({
     }, 1500);
   };
 
+  const handleRichSuggestionClick = (suggestion: Suggestion) => {
+    if (onRichAction) {
+      onRichAction(suggestion.id, suggestion.texto);
+    } else {
+      // Fallback: send as message
+      handleEnviarMensagem(suggestion.texto);
+    }
+    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));
+    }
+  };
+
+  const openFeedbackDialog = (messageId: string, category: string | null) => {
+    setEvaluationState({
+      isOpen: true,
+      messageId,
+      type: 'dislike',
+      category,
+      reason: ''
+    });
+  };
+
+  const handleSubmitDislike = () => {
+    if (evaluationState.messageId && onEvaluation) {
+      const finalReason = evaluationState.category
+        ? (evaluationState.reason ? `${evaluationState.category}: ${evaluationState.reason}` : evaluationState.category)
+        : evaluationState.reason;
+
+      onEvaluation(evaluationState.messageId, 'dislike', finalReason);
+
+      // Update local state
+      setMensagens(prev => prev.map(m => m.id === evaluationState.messageId ? { ...m, evaluation: 'dislike', evaluationReason: finalReason } : m));
+    }
+    setEvaluationState({ isOpen: false, messageId: null, type: null, category: null, reason: '' });
+  };
+
   // ============================================================================
   // Computations
   // ============================================================================
@@ -986,21 +1123,53 @@ export function XerticaAssistant({
                           {sugestoes.map((sugestao) => (
                             <button
                               key={sugestao.id}
-                              onClick={() => setMensagem(sugestao.texto)}
+                              onClick={() => handleEnviarMensagem(sugestao.texto)}
                               className="w-full p-3 text-left rounded-[var(--radius-card)] bg-muted text-foreground transition-colors duration-200 hover:bg-muted/80"
                             >
                               {sugestao.texto}
                             </button>
                           ))}
 
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            className="w-full justify-start text-muted-foreground"
-                          >
-                            <MoreHorizontal className="w-4 h-4 mr-2" />
-                            Mais sugestões
-                          </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.texto}</span>
+                                    </div>
+                                  </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>
                     ) : (
@@ -1105,6 +1274,54 @@ export function XerticaAssistant({
                                     </>
                                   )}
 
+                                  {/* 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 border rounded-[var(--radius)] overflow-hidden">
+                                      <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
@@ -1291,14 +1508,6 @@ export function XerticaAssistant({
                                     {msg.timestamp.toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' })}
                                   </span>
 
-                                  <Button
-                                    variant="ghost"
-                                    size="sm"
-                                    onClick={() => handleToggleFavorite(msg.id)}
-                                    className={`h-6 w-6 p-0 ${msg.isFavorite ? 'text-destructive' : 'text-muted-foreground'}`}
-                                  >
-                                    <Heart className={`w-3 h-3 ${msg.isFavorite ? 'fill-current' : ''}`} />
-                                  </Button>
 
                                   {msg.type === 'assistant' && msg.attachmentType !== 'podcast' && (
                                     <Button
@@ -1317,6 +1526,63 @@ export function XerticaAssistant({
                                     </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={() => handleEvaluationClick(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">
+                                          {feedbackOptions && feedbackOptions.length > 0 ? (
+                                            feedbackOptions.map((option, idx) => (
+                                              <DropdownMenuItem key={idx} onClick={() => openFeedbackDialog(msg.id, option)}>
+                                                {option}
+                                              </DropdownMenuItem>
+                                            ))
+                                          ) : (
+                                            <>
+                                              <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>
+                                  )}
+
                                   <Button
                                     variant="ghost"
                                     size="sm"
@@ -1469,6 +1735,39 @@ export function XerticaAssistant({
           )}
         </AnimatePresence>
       </div>
+
+      {/* Feedback Dialog */}
+      <Dialog open={evaluationState.isOpen} onOpenChange={(open) => !open && setEvaluationState(prev => ({ ...prev, isOpen: false }))}>
+        <DialogContent className="sm:max-w-[600px]">
+          <DialogHeader>
+            <DialogTitle className="pr-8">
+              {evaluationState.category ? `Enviar feedback: ${evaluationState.category}` : 'Enviar feedback'}
+            </DialogTitle>
+            <DialogDescription>
+              {evaluationState.category
+                ? "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={evaluationState.category ? "Comentário adicional..." : "Descreva o motivo..."}
+              value={evaluationState.reason}
+              onChange={(e) => setEvaluationState(prev => ({ ...prev, reason: e.target.value }))}
+              rows={4}
+            />
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setEvaluationState(prev => ({ ...prev, isOpen: false }))}>
+              Cancelar
+            </Button>
+            <Button onClick={handleSubmitDislike} disabled={!evaluationState.category && !evaluationState.reason.trim()}>
+              {evaluationState.category ? 'Confirmar e Enviar' : 'Enviar Feedback'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </>
   );
 }

package/dist/components/HomePage.d.ts

@@ -4,11 +4,5 @@ interface HomePageProps {
     } | null;
     onLogout: () => void;
 }
-interface HomePageProps {
-    user: {
-        email: string;
-    } | null;
-    onLogout: () => void;
-}
 export declare function HomePage({ user, onLogout }: HomePageProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ui/xertica-assistant.d.ts

@@ -180,6 +180,28 @@ export interface XerticaAssistantProps {
      */
     className?: string;
     mobileFloating?: boolean;
+    /**
+     * Função para gerar respostas customizadas
+     * @param message A mensagem do usuário
+     * @returns Promessa com a resposta ou a resposta diretamente
+     */
+    responseGenerator?: (message: string) => Promise<string | Partial<Message>> | string | Partial<Message>;
+    /**
+     * Sugestões ricas adicionais (exibidas ao clicar em "Mais sugestões")
+     */
+    richSuggestions?: Suggestion[];
+    /**
+     * Callback para ações de sugestão rica
+     */
+    onRichAction?: (actionId: string, actionText: string) => void;
+    /**
+     * Callback para avaliação de mensagens
+     */
+    onEvaluation?: (messageId: string, type: 'like' | 'dislike', reason?: string) => void;
+    /**
+     * Opções de feedback negativo (exibidas no dropdown de dislike)
+     */
+    feedbackOptions?: string[];
 }
 /**
  * XerticaAssistant - Assistente de IA completo com chat, histórico e favoritos
@@ -212,4 +234,4 @@ export interface XerticaAssistantProps {
  * />
  * ```
  */
-export declare function XerticaAssistant({ mode, isExpanded: controlledIsExpanded, onToggle, defaultTab, showApiWarning, apiKey, onNavigateSettings, onNavigateFullPage, userName, initialMessages, savedConversations, suggestions: propSuggestions, onSendMessage, onFileAttach, isProcessing, width, height, className, mobileFloating, demoMode, customResponses }: XerticaAssistantProps): import("react/jsx-runtime").JSX.Element;
+export declare function XerticaAssistant({ mode, isExpanded: controlledIsExpanded, onToggle, defaultTab, showApiWarning, apiKey, onNavigateSettings, onNavigateFullPage, userName, initialMessages, savedConversations, suggestions: propSuggestions, onSendMessage, onFileAttach, isProcessing, width, height, className, mobileFloating, demoMode, customResponses, responseGenerator, richSuggestions, onRichAction, onEvaluation, feedbackOptions }: XerticaAssistantProps): import("react/jsx-runtime").JSX.Element;