xertica-ui 2.1.3 → 2.1.4

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { XerticaOrbe } from '../../../brand/xertica-orbe';
+
+/**
+ * AssistantTypingIndicator — Animated three-dot indicator shown while the assistant is processing.
+ */
+export function AssistantTypingIndicator() {
+    return (
+        <motion.div
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            className="flex gap-2 justify-start"
+        >
+            {/* Avatar do Assistente */}
+            <div className="flex-shrink-0 pt-1">
+                <XerticaOrbe size={32} />
+            </div>
+
+            <div className="px-4 py-3 bg-muted rounded-2xl">
+                <div className="flex gap-1">
+                    <motion.div
+                        className="w-2 h-2 rounded-full bg-muted-foreground"
+                        animate={{ y: [0, -8, 0] }}
+                        transition={{ repeat: Infinity, duration: 0.6, delay: 0 }}
+                    />
+                    <motion.div
+                        className="w-2 h-2 rounded-full bg-muted-foreground"
+                        animate={{ y: [0, -8, 0] }}
+                        transition={{ repeat: Infinity, duration: 0.6, delay: 0.2 }}
+                    />
+                    <motion.div
+                        className="w-2 h-2 rounded-full bg-muted-foreground"
+                        animate={{ y: [0, -8, 0] }}
+                        transition={{ repeat: Infinity, duration: 0.6, delay: 0.4 }}
+                    />
+                </div>
+            </div>
+        </motion.div>
+    );
+}

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

@@ -0,0 +1,98 @@
+import React from 'react';
+import { MoreHorizontal, ChevronLeft, BarChart3, Table as TableIcon } from 'lucide-react';
+import { Button } from '../../../ui/button';
+import { XerticaOrbe } from '../../../brand/xertica-orbe';
+import type { Suggestion } from '../types';
+
+interface AssistantWelcomeScreenProps {
+    userName: string;
+    welcomeMessage: string;
+    suggestions: Suggestion[];
+    richSuggestions: Suggestion[];
+    showMoreSuggestions: boolean;
+    onSetShowMoreSuggestions: (show: boolean) => void;
+    onSendSuggestion: (text: string) => void;
+    onRichSuggestionClick: (suggestion: Suggestion) => void;
+}
+
+/**
+ * AssistantWelcomeScreen — Empty state shown when there are no messages yet.
+ * Displays the Xertica Orbe, a greeting, and suggestion chips.
+ */
+export function AssistantWelcomeScreen({
+    userName,
+    welcomeMessage,
+    suggestions,
+    richSuggestions,
+    showMoreSuggestions,
+    onSetShowMoreSuggestions,
+    onSendSuggestion,
+    onRichSuggestionClick,
+}: AssistantWelcomeScreenProps) {
+    return (
+        <div className="flex-1 overflow-y-auto min-h-0">
+            {/* Welcome Message */}
+            <div className="p-6 text-center">
+                <div className="mx-auto mb-4 flex items-center justify-center">
+                    <XerticaOrbe size={64} />
+                </div>
+                <h3 className="mb-2 text-foreground">Olá, {userName}</h3>
+                <p className="text-muted-foreground">{welcomeMessage}</p>
+            </div>
+
+            {/* Suggestions */}
+            {(suggestions.length > 0 || richSuggestions.length > 0) && (
+                <div className="px-4 pb-4 space-y-2">
+                    {suggestions.map((sugestao) => (
+                        <button
+                            key={sugestao.id}
+                            onClick={() => onSendSuggestion(sugestao.text)}
+                            className="w-full p-3 text-left rounded-[var(--radius-card)] bg-muted text-foreground transition-colors duration-200 hover:bg-muted/80"
+                        >
+                            {sugestao.text}
+                        </button>
+                    ))}
+
+                    {richSuggestions.length > 0 && (
+                        !showMoreSuggestions ? (
+                            <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={() => onSetShowMoreSuggestions(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.map((sugestao) => (
+                                    <button
+                                        key={sugestao.id}
+                                        onClick={() => onRichSuggestionClick(sugestao)}
+                                        className="w-full p-3 text-left rounded-[var(--radius-card)] bg-muted/50 border border-border text-foreground transition-all duration-200 hover:bg-primary/5 hover:border-primary/50 group"
+                                    >
+                                        <div className="flex items-center gap-2">
+                                            {sugestao.id.includes('chart') && <BarChart3 className="w-4 h-4 text-primary" />}
+                                            {sugestao.id.includes('table') && <TableIcon className="w-4 h-4 text-primary" />}
+                                            <span className="font-medium">{sugestao.text}</span>
+                                        </div>
+                                    </button>
+                                ))}
+                                <Button
+                                    variant="ghost"
+                                    size="sm"
+                                    onClick={() => onSetShowMoreSuggestions(false)}
+                                    className="w-full justify-center text-muted-foreground mt-2"
+                                >
+                                    <ChevronLeft className="w-4 h-4 mr-2" />
+                                    Voltar
+                                </Button>
+                            </div>
+                        )
+                    )}
+                </div>
+            )}
+        </div>
+    );
+}

package/components/assistant/xertica-assistant/parts/index.ts

@@ -0,0 +1,16 @@
+/**
+ * Sub-components for XerticaAssistant.
+ *
+ * These are internal building blocks — not part of the public library API.
+ * Import them only from within the `xertica-assistant` directory.
+ */
+export { AssistantCollapsedView } from './AssistantCollapsedView';
+export { AssistantHeader } from './AssistantHeader';
+export { AssistantTabBar } from './AssistantTabBar';
+export { AssistantWelcomeScreen } from './AssistantWelcomeScreen';
+export { AssistantMessageBubble } from './AssistantMessageBubble';
+export { AssistantTypingIndicator } from './AssistantTypingIndicator';
+export { AssistantConversationList } from './AssistantConversationList';
+export { AssistantFeedbackDialog } from './AssistantFeedbackDialog';
+export { AssistantDocumentEditor } from './AssistantDocumentEditor';
+export type { EvaluationState } from './AssistantFeedbackDialog';

package/components/assistant/xertica-assistant/types.ts

@@ -0,0 +1,139 @@
+import type { ReactNode } from 'react';
+
+/**
+ * @file types.ts
+ * Shared TypeScript types for the XerticaAssistant component and related hooks/contexts.
+ *
+ * These types are the single source of truth — imported by:
+ *  - `xertica-assistant.tsx`
+ *  - `use-assistant.ts`
+ *  - `contexts/AssistenteContext.tsx`
+ */
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Primitive union types
+// ─────────────────────────────────────────────────────────────────────────────
+
+/** Supported message sender types in the assistant */
+export type MessageType = 'user' | 'assistant' | 'system';
+
+/** Supported attachment types that can be included in messages */
+export type AttachmentType =
+    | 'file'
+    | 'audio'
+    | 'image'
+    | 'video'
+    | 'document'
+    | 'podcast'
+    | 'search';
+
+/** Supported search result categories */
+export type SearchResultType =
+    | 'document'
+    | 'project'
+    | 'conversation'
+    | 'file'
+    | 'contact';
+
+/** Layout mode for the assistant panel */
+export type AssistantMode = 'collapsed' | 'expanded' | 'fullPage';
+
+/** Available tabs in the assistant panel */
+export type AssistantTab = 'chat' | 'historico' | 'favoritos';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Domain interfaces
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * Individual search result item returned by an assistant search query.
+ */
+export interface SearchResult {
+    id: string;
+    type: SearchResultType;
+    title: string;
+    description: string;
+    path: string;
+    relevance: number;
+    lastModified?: string;
+}
+
+/**
+ * Metadata about a search source (e.g., a document repository or knowledge base).
+ */
+export interface SearchSource {
+    name: string;
+    count: number;
+}
+
+/**
+ * A quick-action command shown below a search result message.
+ */
+export interface SearchCommand {
+    id: string;
+    icon: string;
+    label: string;
+    description: string;
+}
+
+/**
+ * A single chat message in the assistant conversation.
+ */
+export interface Message {
+    id: string;
+    type: MessageType;
+    content: string;
+    timestamp: Date;
+    isFavorite?: boolean;
+    attachmentType?: AttachmentType;
+    attachmentName?: string;
+    documentContent?: string;
+    documentTitle?: string;
+    audioUrl?: string;
+    searchResults?: SearchResult[];
+    searchSources?: SearchSource[];
+    searchCommands?: SearchCommand[];
+    chartData?: any[];
+    chartConfig?: any;
+    tableData?: {
+        caption?: string;
+        headers: string[];
+        rows: (string | ReactNode)[][];
+    };
+    evaluation?: 'like' | 'dislike';
+    evaluationReason?: string;
+}
+
+/**
+ * A saved conversation entry shown in the history panel.
+ */
+export interface Conversation {
+    id: string;
+    title: string;
+    lastMessage?: string;
+    timestamp: string;
+    isFavorite: boolean;
+    messages: Message[];
+}
+
+/**
+ * A suggested prompt shown to the user in the chat input area.
+ */
+export interface Suggestion {
+    id: string;
+    text: string;
+    icon?: ReactNode;
+}
+
+/**
+ * A mock response entry used in demo mode.
+ * Matches a user message via `trigger` and returns a predefined `response`.
+ */
+export interface MockResponse {
+    /** String or regex to match against the user's message */
+    trigger: string | RegExp;
+    /** Response content — either a plain string or a partial Message object */
+    response: string | Partial<Message>;
+    /** Optional delay in milliseconds before the response appears */
+    delay?: number;
+}

package/components/assistant/xertica-assistant/use-assistant.ts

@@ -1,6 +1,7 @@
 import { useState, useEffect, useRef, useCallback } from 'react';
 import { toast } from 'sonner';
-import { gerarResposta, type MockResponse } from '../../shared/assistant-utils';
+import { gerarResposta } from '../../shared/assistant-utils';
+import { useIsMobile } from '../../shared/use-mobile';
 import type {
     Message,
     Conversation,
@@ -8,7 +9,8 @@ import type {
     AssistantTab,
     AssistantMode,
     SearchResult,
-} from './xertica-assistant';
+    MockResponse,
+} from './types';
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Hook Props
@@ -187,14 +189,7 @@ export function useAssistant({
     const isFullPage = mode === 'fullPage';
     const [internalIsExpanded, setInternalIsExpanded] = useState(controlledIsExpanded ?? true);
     const isExpanded = controlledIsExpanded ?? internalIsExpanded;
-    const [isMobile, setIsMobile] = useState(false);
-
-    useEffect(() => {
-        const handleResize = () => setIsMobile(window.innerWidth < 768);
-        handleResize();
-        window.addEventListener('resize', handleResize);
-        return () => window.removeEventListener('resize', handleResize);
-    }, []);
+    const isMobile = useIsMobile();
 
     // ── Tab state ───────────────────────────────────────────────────────────────
     const [abaSelecionada, setAbaSelecionada] = useState<AssistantTab>(defaultTab);