xertica-ui 2.1.4 → 2.1.6

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

@@ -0,0 +1,323 @@
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { toast } from 'sonner';
+import { gerarResposta } from '../../../shared/assistant-utils';
+import type { Message, Suggestion, MockResponse } from '../types';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Props & Return types
+// ─────────────────────────────────────────────────────────────────────────────
+
+export interface UseAssistantMessagesProps {
+    initialMessages?: Message[];
+    isProcessing?: boolean;
+    demoMode?: boolean;
+    customResponses?: MockResponse[];
+    responseGenerator?: (message: string) => Promise<string | Partial<Message>> | string | Partial<Message>;
+    onSendMessage?: (message: string) => void;
+    onEvaluation?: (messageId: string, type: 'like' | 'dislike', reason?: string) => void;
+    /** Current tab — used to drive auto-scroll */
+    abaSelecionada: string;
+}
+
+export interface EvaluationState {
+    isOpen: boolean;
+    messageId: string | null;
+    type: 'dislike' | null;
+    category?: string | null;
+    reason: string;
+}
+
+export interface UseAssistantMessagesReturn {
+    mensagens: Message[];
+    setMensagens: React.Dispatch<React.SetStateAction<Message[]>>;
+    mensagem: string;
+    setMensagem: (value: string) => void;
+    copiedId: string | null;
+    generatingPodcastId: string | null;
+    editingDocument: { content: string; title: string } | null;
+    setEditingDocument: (doc: { content: string; title: string } | null) => void;
+    evaluationState: EvaluationState;
+    setEvaluationState: React.Dispatch<React.SetStateAction<EvaluationState>>;
+    messagesEndRef: React.RefObject<HTMLDivElement>;
+    handleEnviarMensagem: (arg?: string) => Promise<void>;
+    handleToggleFavorite: (messageId: string) => void;
+    handleCopyMessage: (content: string, messageId: string) => Promise<void>;
+    handleGeneratePodcast: (messageId: string, content: string) => Promise<void>;
+    handleDownloadDocument: (content: string, fileName: string) => void;
+    handleDownloadPodcast: (audioUrl: string, fileName: string) => void;
+    handleEditDocument: (content: string, title: string) => void;
+    handleEvaluationClick: (messageId: string, type: 'like' | 'dislike') => void;
+    openFeedbackDialog: (messageId: string, category: string | null) => void;
+    handleSubmitDislike: () => void;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Hook
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function useAssistantMessages({
+    initialMessages = [],
+    isProcessing = false,
+    demoMode = true,
+    customResponses = [],
+    responseGenerator,
+    onSendMessage,
+    onEvaluation,
+    abaSelecionada,
+}: UseAssistantMessagesProps): UseAssistantMessagesReturn {
+
+    const [mensagens, setMensagens] = useState<Message[]>(initialMessages);
+    const [mensagem, setMensagem] = useState('');
+    const [copiedId, setCopiedId] = useState<string | null>(null);
+    const [generatingPodcastId, setGeneratingPodcastId] = useState<string | null>(null);
+    const [editingDocument, setEditingDocument] = useState<{ content: string; title: string } | null>(null);
+    const [evaluationState, setEvaluationState] = useState<EvaluationState>({
+        isOpen: false,
+        messageId: null,
+        type: null,
+        category: null,
+        reason: '',
+    });
+
+    const messagesEndRef = useRef<HTMLDivElement>(null);
+
+    // Ref to cancel the AI response timer when the component unmounts (UM-1)
+    const responseTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+    useEffect(() => () => clearTimeout(responseTimerRef.current), []);
+
+    // Auto-scroll only when the user is already near the bottom (UM-5).
+    // Firing unconditionally would forcibly scroll users who have scrolled up to read history.
+    useEffect(() => {
+        if (abaSelecionada !== 'chat' || !messagesEndRef.current) return;
+        const viewport = messagesEndRef.current.closest('[data-radix-scroll-area-viewport]')
+            ?? messagesEndRef.current.parentElement;
+        if (viewport) {
+            const nearBottom =
+                viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight < 120;
+            if (nearBottom) messagesEndRef.current.scrollIntoView({ behavior: 'smooth' });
+        } else {
+            // Fallback when no scroll container is found
+            messagesEndRef.current.scrollIntoView({ behavior: 'smooth' });
+        }
+    }, [mensagens, abaSelecionada]);
+
+    // Sync initial messages exactly once on mount (UM-3).
+    // Using a ref guard prevents the effect from resetting the conversation every
+    // time the parent re-renders and passes a new array reference.
+    const hydratedRef = useRef(false);
+    useEffect(() => {
+        if (!hydratedRef.current && initialMessages.length > 0) {
+            setMensagens(initialMessages);
+            hydratedRef.current = true;
+        }
+    }, [initialMessages]);
+
+    const handleEnviarMensagem = useCallback(async (arg?: string) => {
+        let msgToSend = mensagem;
+
+        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: msgToSend,
+            timestamp: new Date(),
+            isFavorite: false,
+        };
+
+        setMensagens(prev => [...prev, novaMensagem]);
+
+        if (onSendMessage) {
+            onSendMessage(msgToSend);
+        }
+
+        if (demoMode || responseGenerator) {
+            const mensagemAtual = msgToSend;
+            responseTimerRef.current = 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`,
+                    type: 'assistant',
+                    content: '',
+                    timestamp: new Date(),
+                    isFavorite: false,
+                };
+
+                if (typeof resposta === 'string') {
+                    novaMensagemIA.content = resposta;
+                } else {
+                    novaMensagemIA = { ...novaMensagemIA, ...resposta };
+                }
+
+                setMensagens(prev => [...prev, novaMensagemIA]);
+            }, 1000 + Math.random() * 1000);
+        }
+
+        setMensagem('');
+    }, [mensagem, isProcessing, onSendMessage, demoMode, responseGenerator, customResponses]);
+
+    const handleToggleFavorite = useCallback((messageId: string) => {
+        setMensagens(prev =>
+            prev.map(msg =>
+                msg.id === messageId ? { ...msg, isFavorite: !msg.isFavorite } : msg
+            )
+        );
+    }, []);
+
+    const handleCopyMessage = useCallback(async (content: string, messageId: string) => {
+        try {
+            if (navigator.clipboard && navigator.clipboard.writeText) {
+                try {
+                    await navigator.clipboard.writeText(content);
+                    setCopiedId(messageId);
+                    setTimeout(() => setCopiedId(null), 2000);
+                } catch (clipboardError: any) {
+                    if (clipboardError.name === 'NotAllowedError' || clipboardError.message.includes('permissions policy')) {
+                        throw new Error('Clipboard permission denied, falling back');
+                    }
+                    throw clipboardError;
+                }
+            } else {
+                throw new Error('Clipboard API not available');
+            }
+        } catch {
+            try {
+                const textArea = document.createElement('textarea');
+                textArea.value = content;
+                textArea.style.position = 'fixed';
+                textArea.style.left = '-999999px';
+                textArea.style.top = '-999999px';
+                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);
+                }
+            } catch (fallbackErr) {
+                console.error('Falha ao copiar:', fallbackErr);
+            }
+        }
+    }, []);
+
+    const handleGeneratePodcast = useCallback(async (messageId: string, content: string) => {
+        setGeneratingPodcastId(messageId);
+        setTimeout(() => {
+            setMensagens(prev =>
+                prev.map(msg =>
+                    msg.id === messageId
+                        ? {
+                            ...msg,
+                            attachmentType: 'podcast' as const,
+                            attachmentName: 'Podcast - ' + content.substring(0, 30) + '...',
+                            audioUrl: 'data:audio/mpeg;base64,//uQx...',
+                        }
+                        : msg
+                )
+            );
+            setGeneratingPodcastId(null);
+        }, 2000);
+    }, []);
+
+    const handleDownloadDocument = useCallback((content: string, fileName: string) => {
+        const blob = new Blob([content], { type: 'text/markdown' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = fileName.endsWith('.md') ? fileName : fileName + '.md';
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+    }, []);
+
+    const handleDownloadPodcast = useCallback((audioUrl: string, fileName: string) => {
+        const a = document.createElement('a');
+        a.href = audioUrl;
+        a.download = fileName.endsWith('.mp3') ? fileName : fileName + '.mp3';
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+    }, []);
+
+    const handleEditDocument = useCallback((content: string, title: string) => {
+        setEditingDocument({ content, title });
+    }, []);
+
+    const handleEvaluationClick = useCallback((messageId: string, type: 'like' | 'dislike') => {
+        if (type === 'like') {
+            if (onEvaluation) onEvaluation(messageId, 'like');
+            setMensagens(prev => prev.map(m => m.id === messageId ? { ...m, evaluation: 'like' as const } : m));
+            toast.success("Obrigado por avaliar positivamente!");
+        }
+    }, [onEvaluation]);
+
+    const openFeedbackDialog = useCallback((messageId: string, category: string | null) => {
+        setEvaluationState({
+            isOpen: true,
+            messageId,
+            type: 'dislike',
+            category,
+            reason: '',
+        });
+    }, []);
+
+    const handleSubmitDislike = useCallback(() => {
+        if (evaluationState.messageId) {
+            const finalReason = evaluationState.category
+                ? (evaluationState.reason ? `${evaluationState.category}: ${evaluationState.reason}` : evaluationState.category)
+                : evaluationState.reason;
+
+            if (onEvaluation) {
+                onEvaluation(evaluationState.messageId, 'dislike', finalReason);
+            }
+
+            setMensagens(prev =>
+                prev.map(m =>
+                    m.id === evaluationState.messageId
+                        ? { ...m, evaluation: 'dislike' as const, evaluationReason: finalReason }
+                        : m
+                )
+            );
+            toast.success("Obrigado pelo seu feedback. Vamos melhorar.");
+        }
+        setEvaluationState({ isOpen: false, messageId: null, type: null, category: null, reason: '' });
+    }, [evaluationState, onEvaluation]);
+
+    return {
+        mensagens,
+        setMensagens,
+        mensagem,
+        setMensagem,
+        copiedId,
+        generatingPodcastId,
+        editingDocument,
+        setEditingDocument,
+        evaluationState,
+        setEvaluationState,
+        messagesEndRef,
+        handleEnviarMensagem,
+        handleToggleFavorite,
+        handleCopyMessage,
+        handleGeneratePodcast,
+        handleDownloadDocument,
+        handleDownloadPodcast,
+        handleEditDocument,
+        handleEvaluationClick,
+        openFeedbackDialog,
+        handleSubmitDislike,
+    };
+}

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

@@ -0,0 +1,64 @@
+import { useState, useCallback } from 'react';
+import type { Suggestion } from '../types';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Default suggestions
+// ─────────────────────────────────────────────────────────────────────────────
+
+export const DEFAULT_SUGGESTIONS: Suggestion[] = [
+    { id: '1', text: 'Me ajude a criar um documento profissional' },
+    { id: '2', text: 'Buscar nos meus arquivos por "relatório"' },
+    { id: '3', text: 'Resuma as conversas importantes desta semana' },
+    { id: '4', text: 'Crie um podcast sobre o último projeto' },
+];
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Props & Return types
+// ─────────────────────────────────────────────────────────────────────────────
+
+export interface UseAssistantSuggestionsProps {
+    suggestions?: Suggestion[];
+    richSuggestions?: Suggestion[];
+    onRichAction?: (actionId: string, actionText: string) => void;
+    /** handleEnviarMensagem from useAssistantMessages, passed in to avoid circular deps */
+    handleEnviarMensagem: (arg?: string | any) => Promise<void>;
+}
+
+export interface UseAssistantSuggestionsReturn {
+    sugestoes: Suggestion[];
+    showMoreSuggestions: boolean;
+    setShowMoreSuggestions: (show: boolean) => void;
+    handleRichSuggestionClick: (suggestion: Suggestion) => void;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Hook
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function useAssistantSuggestions({
+    suggestions,
+    richSuggestions = [],
+    onRichAction,
+    handleEnviarMensagem,
+}: UseAssistantSuggestionsProps): UseAssistantSuggestionsReturn {
+
+    const [showMoreSuggestions, setShowMoreSuggestions] = useState(false);
+
+    const sugestoes = suggestions ?? DEFAULT_SUGGESTIONS;
+
+    const handleRichSuggestionClick = useCallback((suggestion: Suggestion) => {
+        if (onRichAction) {
+            onRichAction(suggestion.id, suggestion.text);
+        } else {
+            handleEnviarMensagem(suggestion.text);
+        }
+        setShowMoreSuggestions(false);
+    }, [onRichAction, handleEnviarMensagem]);
+
+    return {
+        sugestoes,
+        showMoreSuggestions,
+        setShowMoreSuggestions,
+        handleRichSuggestionClick,
+    };
+}