xertica-ui 1.2.10 → 1.3.0

package/components/AssistenteXertica.tsx

@@ -32,15 +32,36 @@ import {
   BarChart3,
   Bookmark,
   Maximize2,
-  AlertCircle
+  AlertCircle,
+  ThumbsUp,
+  ThumbsDown,
+  BookOpen,
+  ArrowLeft,
+  Table as TableIcon
 } from 'lucide-react';
 import { Button } from './ui/button';
 import { ScrollArea } from './ui/scroll-area';
-import { ModernChatInput, ActionType } from './ModernChatInput';
 import { Separator } from './ui/separator';
 import { DocumentEditor } from './DocumentEditor';
-import { FormattedDocument } from './FormattedDocument';
 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';
@@ -50,6 +71,18 @@ 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 {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "./ui/table";
 
 // Tooltip customizado estilo sidebar (branco)
 function AssistantTooltipContent({
@@ -87,12 +120,7 @@ interface AssistenteXerticaProps {
   isFullPage?: boolean;
 }
 
-import type { Message, Conversa, SearchResult, SearchSource, SearchCommand } from '../contexts/AssistenteContext';
-
-interface Sugestao {
-  id: string;
-  texto: string;
-}
+import type { Message, Conversa, SearchResult, SearchSource, SearchCommand, Sugestao } from '../contexts/AssistenteContext';
 
 const sugestoesPadrao: Sugestao[] = [
   { id: '1', texto: 'O que posso pedir para você fazer?' },
@@ -102,6 +130,13 @@ const sugestoesPadrao: Sugestao[] = [
   { id: '5', texto: 'Qual projetos está tendo o melhor desempenho?' }
 ];
 
+const sugestoesRicas: Sugestao[] = [
+  { id: 'rich-1', texto: 'Ver exemplo de Gráfico', icon: <BarChart3 className="w-4 h-4 mr-2" /> },
+  { id: 'rich-2', texto: 'Ver exemplo de Imagem', icon: <ImageIcon className="w-4 h-4 mr-2" /> },
+  { id: 'rich-3', texto: 'Ver exemplo de Tabela', icon: <TableIcon className="w-4 h-4 mr-2" /> },
+  { id: 'rich-4', texto: 'Ver exemplo de Documento', icon: <FileText className="w-4 h-4 mr-2" /> }
+];
+
 // Respostas simuladas da IA
 const gerarResposta = (mensagemUsuario: string): string => {
   const mensagemLower = mensagemUsuario.toLowerCase();
@@ -188,13 +223,164 @@ export function AssistenteXertica({ isExpanded, onToggle, onToggleWithTab, isFul
 
   const [mensagem, setMensagem] = useState('');
   const [sugestoes] = useState<Sugestao[]>(sugestoesPadrao);
+  const [showMoreSuggestions, setShowMoreSuggestions] = useState(false);
   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);
 
+  const handleRichResponse = (suggestionId: string, suggestionText: string) => {
+    setIsTyping(true);
+    setMensagem(''); // Clear input if any
+
+    // Simulate network delay
+    setTimeout(() => {
+      let novaMensagem: Message = {
+        id: Date.now().toString() + '-ia-rich',
+        type: 'assistant',
+        content: '',
+        timestamp: new Date(),
+        isFavorite: false
+      };
+
+      if (suggestionId === 'rich-1') { // Gráfico
+        const chartData = [
+          { month: "Jan", desktop: 186, mobile: 80 },
+          { month: "Feb", desktop: 305, mobile: 200 },
+          { month: "Mar", desktop: 237, mobile: 120 },
+          { month: "Apr", desktop: 73, mobile: 190 },
+          { month: "May", desktop: 209, mobile: 130 },
+          { month: "Jun", desktop: 214, mobile: 140 },
+        ];
+        const chartConfig = {
+          desktop: {
+            label: "Desktop",
+            color: "hsl(var(--chart-1))",
+          },
+          mobile: {
+            label: "Mobile",
+            color: "hsl(var(--chart-2))",
+          },
+        } satisfies ChartConfig;
+
+        novaMensagem = {
+          ...novaMensagem,
+          content: 'Aqui está o gráfico de desempenho do projeto nos últimos 6 meses, comparando acessos Desktop vs Mobile.',
+          chartData: chartData,
+          chartConfig: chartConfig
+        };
+      } else if (suggestionId === 'rich-2') { // Imagem
+        novaMensagem = {
+          ...novaMensagem,
+          content: 'Aqui está a imagem prévia do novo layout do dashboard que você solicitou.',
+          attachmentType: 'image',
+          attachmentName: 'dashboard-preview-v2.jpg',
+          // Placeholder image URL
+          documentContent: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=2070&auto=format&fit=crop'
+        };
+      } else if (suggestionId === 'rich-3') { // Tabela
+        novaMensagem = {
+          ...novaMensagem,
+          content: 'Aqui está a tabela com os status dos servidores:',
+          tableData: {
+            caption: "Status dos Servidores em Tempo Real",
+            headers: ["Servidor", "Status", "Uptime", "Link"],
+            rows: [
+              ["Alpha-1", "✅ Online", "99.9%", <a href="https://example.com/log1" target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:underline flex items-center gap-1">Log <ExternalLink size={12} /></a>],
+              ["Beta-2", "⚠️ Warning", "98.5%", <a href="https://example.com/log2" target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:underline flex items-center gap-1">Log <ExternalLink size={12} /></a>],
+              ["Gamma-3", "❌ Offline", "0%", <a href="https://example.com/log3" target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:underline flex items-center gap-1">Log <ExternalLink size={12} /></a>]
+            ]
+          }
+        };
+      } else if (suggestionId === 'rich-4') { // Documento para Download
+        novaMensagem = {
+          ...novaMensagem,
+          content: 'Gerei o relatório completo de auditoria de segurança. Você pode baixá-lo ou editá-lo abaixo.',
+          attachmentType: 'document',
+          attachmentName: 'auditoria-seguranca-2024.md',
+          documentTitle: 'Relatório de Auditoria de Segurança',
+          documentContent: '# Auditoria de Segurança 2024\n\n## Resumo Executivo\nForam encontradas 3 vulnerabilidades de nível baixo...'
+        };
+      }
+
+      setConversas(prev => prev.map(conv => {
+        if (conv.id === conversaAtual) {
+          return {
+            ...conv,
+            mensagens: [...conv.mensagens,
+            {  // User message triggers the response
+              id: Date.now().toString() + '-user',
+              type: 'user',
+              content: suggestionText,
+              timestamp: new Date()
+            },
+              novaMensagem
+            ],
+            ultimaMensagem: suggestionText,
+            timestamp: new Date().toLocaleString('pt-BR')
+          };
+        }
+        return conv;
+      }));
+
+      setIsTyping(false);
+      setShowMoreSuggestions(false); // Close suggestions
+    }, 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 || [];
 
@@ -1489,24 +1675,55 @@ Este documento fornece uma base sólida para entender e trabalhar com ${temaLimp
 
                             {/* Suggestions */}
                             <div className="px-4 pb-4 space-y-2">
-                              {sugestoes.map((sugestao) => (
-                                <button
-                                  key={sugestao.id}
-                                  onClick={() => setMensagem(sugestao.texto)}
-                                  className="w-full p-3 text-left bg-muted hover:bg-accent rounded-lg transition-colors duration-200 text-foreground"
-                                >
-                                  {sugestao.texto}
-                                </button>
-                              ))}
+                              {!showMoreSuggestions ? (
+                                <>
+                                  {sugestoes.map((sugestao) => (
+                                    <button
+                                      key={sugestao.id}
+                                      onClick={() => setMensagem(sugestao.texto)}
+                                      className="w-full p-3 text-left bg-muted hover:bg-accent rounded-lg transition-colors duration-200 text-foreground"
+                                    >
+                                      {sugestao.texto}
+                                    </button>
+                                  ))}
+
+                                  <Button
+                                    variant="ghost"
+                                    size="sm"
+                                    onClick={() => setShowMoreSuggestions(true)}
+                                    className="w-full justify-start text-muted-foreground hover:text-foreground"
+                                  >
+                                    <MoreHorizontal className="w-4 h-4 mr-2" />
+                                    Mais sugestões
+                                  </Button>
+                                </>
+                              ) : (
+                                <>
+                                  <div className="flex items-center gap-2 mb-2 px-2">
+                                    <span className="text-xs font-medium text-muted-foreground">Exemplos de respostas ricas</span>
+                                  </div>
+                                  {sugestoesRicas.map((sugestao) => (
+                                    <button
+                                      key={sugestao.id}
+                                      onClick={() => handleRichResponse(sugestao.id, sugestao.texto)}
+                                      className="w-full p-3 text-left bg-muted hover:bg-accent rounded-lg transition-colors duration-200 text-foreground flex items-center"
+                                    >
+                                      {sugestao.icon}
+                                      {sugestao.texto}
+                                    </button>
+                                  ))}
 
-                              <Button
-                                variant="ghost"
-                                size="sm"
-                                className="w-full justify-start text-muted-foreground hover:text-foreground"
-                              >
-                                <MoreHorizontal className="w-4 h-4 mr-2" />
-                                Mais sugestões
-                              </Button>
+                                  <Button
+                                    variant="ghost"
+                                    size="sm"
+                                    onClick={() => setShowMoreSuggestions(false)}
+                                    className="w-full justify-start text-muted-foreground hover:text-foreground"
+                                  >
+                                    <ArrowLeft className="w-4 h-4 mr-2" />
+                                    Voltar
+                                  </Button>
+                                </>
+                              )}
                             </div>
                           </div>
                         ) : (
@@ -1607,8 +1824,70 @@ Este documento fornece uma base sólida para entender e trabalhar com ${temaLimp
                                         </>
                                       )}
 
-                                      {/* Document Preview - Mostrar documento formatado */}
-                                      {msg.attachmentType === 'document' && msg.documentContent && (
+                                      {/* Image Attachment */}
+                                      {msg.attachmentType === 'image' && msg.documentContent && (
+                                        <div className="mt-3 rounded-lg overflow-hidden border border-border">
+                                          <img
+                                            src={msg.documentContent}
+                                            alt={msg.attachmentName || 'Image'}
+                                            className="w-full h-auto max-h-[300px] object-cover"
+                                          />
+                                        </div>
+                                      )}
+
+                                      {/* 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>
+                                        </div>
+                                      )}
+
+                                      {/* Table Rendering */}
+                                      {msg.tableData && (
+                                        <div className="mt-4 mb-2 rounded-md border">
+                                          <Table>
+                                            {msg.tableData.caption && <TableCaption>{msg.tableData.caption}</TableCaption>}
+                                            <TableHeader>
+                                              <TableRow>
+                                                {msg.tableData.headers.map((header, index) => (
+                                                  <TableHead key={index}>{header}</TableHead>
+                                                ))}
+                                              </TableRow>
+                                            </TableHeader>
+                                            <TableBody>
+                                              {msg.tableData.rows.map((row, rowIndex) => (
+                                                <TableRow key={rowIndex}>
+                                                  {row.map((cell, cellIndex) => (
+                                                    <TableCell key={cellIndex} className="font-medium">
+                                                      {cell}
+                                                    </TableCell>
+                                                  ))}
+                                                </TableRow>
+                                              ))}
+                                            </TableBody>
+                                          </Table>
+                                        </div>
+                                      )}
+
+                                      {/* Document Preview */}
+                                      {msg.attachmentType === 'document' && msg.documentContent && !msg.chartData && (
                                         <div className="mt-3 pt-3 border-t border-border overflow-hidden">
                                           <FormattedDocument
                                             content={msg.documentContent}
@@ -1818,6 +2097,57 @@ 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>
                               ))}
@@ -1863,6 +2193,38 @@ 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">
                         <div className={`p-4 ${isFullPage ? 'mx-auto w-full max-w-6xl' : ''}`}>

package/contexts/AssistenteContext.tsx

@@ -1,20 +1,36 @@
 import React, { createContext, useContext, useState, ReactNode } from 'react';
 
+
+
+export interface Sugestao {
+  id: string;
+  texto: string;
+  icon?: ReactNode;
+}
+
 export interface Message {
   id: string;
-  type: 'user' | 'assistant';
+  type: 'user' | 'assistant' | 'system';
   content: string;
   timestamp: Date;
   isFavorite?: boolean;
-  attachmentType?: 'file' | 'audio' | 'image' | 'podcast' | 'document' | 'search';
+  chartData?: any[];
+  chartConfig?: any;
+  attachmentType?: 'image' | 'video' | 'audio' | 'file' | 'document' | 'podcast' | 'search';
   attachmentName?: string;
-  audioUrl?: string;
-  isPodcastGenerating?: boolean;
   documentContent?: string;
   documentTitle?: string;
+  tableData?: {
+    caption?: string;
+    headers: string[];
+    rows: (string | ReactNode)[][];
+  };
+  audioUrl?: string;
   searchResults?: SearchResult[];
   searchSources?: SearchSource[];
   searchCommands?: SearchCommand[];
+  evaluation?: 'like' | 'dislike';
+  evaluationReason?: string;
 }
 
 export interface Conversa {

package/dist/components/ui/alert.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const alertVariants: (props?: ({
-    variant?: "default" | "error" | "success" | "warning" | "info" | null | undefined;
+    variant?: "default" | "error" | "success" | "info" | "warning" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Alert({ className, variant, children, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>): import("react/jsx-runtime").JSX.Element;
 declare function AlertTitle({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/badge.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | "success" | "warning" | "info" | null | undefined;
+    variant?: "default" | "destructive" | "outline" | "secondary" | "success" | "info" | "warning" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare function Badge({ className, variant, asChild, children, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
     asChild?: boolean;

package/dist/contexts/AssistenteContext.d.ts

@@ -1,19 +1,32 @@
 import React, { ReactNode } from 'react';
+export interface Sugestao {
+    id: string;
+    texto: string;
+    icon?: ReactNode;
+}
 export interface Message {
     id: string;
-    type: 'user' | 'assistant';
+    type: 'user' | 'assistant' | 'system';
     content: string;
     timestamp: Date;
     isFavorite?: boolean;
-    attachmentType?: 'file' | 'audio' | 'image' | 'podcast' | 'document' | 'search';
+    chartData?: any[];
+    chartConfig?: any;
+    attachmentType?: 'image' | 'video' | 'audio' | 'file' | 'document' | 'podcast' | 'search';
     attachmentName?: string;
-    audioUrl?: string;
-    isPodcastGenerating?: boolean;
     documentContent?: string;
     documentTitle?: string;
+    tableData?: {
+        caption?: string;
+        headers: string[];
+        rows: (string | ReactNode)[][];
+    };
+    audioUrl?: string;
     searchResults?: SearchResult[];
     searchSources?: SearchSource[];
     searchCommands?: SearchCommand[];
+    evaluation?: 'like' | 'dislike';
+    evaluationReason?: string;
 }
 export interface Conversa {
     id: string;