@vezlo/assistant-chat 1.6.0 → 1.8.0

package/lib/api/citation.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Citation API Service
+ */
+export interface CitationContext {
+    document_title: string;
+    document_type: string;
+    file_type?: string;
+    content: string;
+}
+export declare function getCitationContext(documentUuid: string, chunkIndices: number[], apiUrl?: string): Promise<CitationContext>;

package/lib/api/citation.js

@@ -0,0 +1,18 @@
+/**
+ * Citation API Service
+ */
+const DEFAULT_API_BASE_URL = import.meta.env.VITE_ASSISTANT_SERVER_URL || 'http://localhost:3000';
+export async function getCitationContext(documentUuid, chunkIndices, apiUrl) {
+    const API_BASE_URL = apiUrl || DEFAULT_API_BASE_URL;
+    const indicesParam = chunkIndices.join(',');
+    const response = await fetch(`${API_BASE_URL}/api/knowledge/citations/${documentUuid}/context?chunk_indices=${indicesParam}`, {
+        method: 'GET',
+        headers: {
+            'Accept': 'application/json',
+        },
+    });
+    if (!response.ok) {
+        throw new Error('Failed to fetch citation context');
+    }
+    return await response.json();
+}

package/lib/api/index.d.ts

@@ -6,3 +6,4 @@ export * from './auth.js';
 export * from './conversation.js';
 export * from './message.js';
 export * from './analytics.js';
+export * from './citation.js';

package/lib/api/index.js

@@ -6,3 +6,4 @@ export * from './auth.js';
 export * from './conversation.js';
 export * from './message.js';
 export * from './analytics.js';
+export * from './citation.js';

package/lib/api/message.d.ts

@@ -24,6 +24,16 @@ export interface StreamChunkEvent {
     type: 'chunk';
     content: string;
     done?: boolean;
+    sources?: Array<{
+        document_uuid: string;
+        document_title: string;
+        chunk_indices: number[];
+    }>;
+    validation?: {
+        confidence: number;
+        valid: boolean;
+        status: string;
+    };
 }
 export interface StreamCompletionEvent {
     type: 'completion';
@@ -39,7 +49,15 @@ export interface StreamErrorEvent {
 }
 export type StreamEvent = StreamChunkEvent | StreamCompletionEvent | StreamErrorEvent;
 export interface StreamCallbacks {
-    onChunk?: (content: string, isDone?: boolean) => void;
+    onChunk?: (content: string, isDone?: boolean, sources?: Array<{
+        document_uuid: string;
+        document_title: string;
+        chunk_indices: number[];
+    }>, validation?: {
+        confidence: number;
+        valid: boolean;
+        status: string;
+    }) => void;
     onCompletion?: (data: StreamCompletionEvent) => void;
     onError?: (error: StreamErrorEvent) => void;
     onDone?: () => void;

package/lib/api/message.js

@@ -121,7 +121,7 @@ export async function streamAIResponse(userMessageUuid, callbacks, apiUrl) {
                             const event = JSON.parse(data);
                             switch (event.type) {
                                 case 'chunk':
-                                    callbacks.onChunk?.(event.content, event.done);
+                                    callbacks.onChunk?.(event.content, event.done, event.sources, event.validation);
                                     break;
                                 case 'completion':
                                     callbacks.onCompletion?.(event);

package/lib/components/Widget.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
-import { Send, X, MessageCircle, Bot, ThumbsUp, ThumbsDown } from 'lucide-react';
+import { Send, X, MessageCircle, Bot, ThumbsUp, ThumbsDown, Copy, Check } from 'lucide-react';
 import { generateId, formatTimestamp } from '../utils/index.js';
+import { markdownToHtml } from '../utils/markdown.js';
 import { VezloFooter } from './ui/VezloFooter.js';
+import { CitationView } from './ui/CitationView.js';
 import { createConversation, createUserMessage, streamAIResponse } from '../api/index.js';
 import { submitFeedback, deleteFeedback } from '../api/message.js';
 import { subscribeToConversations } from '../services/conversationRealtime.js';
@@ -22,6 +24,7 @@ export function Widget({ config, isPlayground = false, onOpen, onClose, onMessag
     const [isLoading, setIsLoading] = useState(false);
     const [messageFeedback, setMessageFeedback] = useState({});
     const [messageFeedbackUuids, setMessageFeedbackUuids] = useState({});
+    const [copiedMessageId, setCopiedMessageId] = useState(null);
     const [streamingMessage, setStreamingMessage] = useState('');
     const [conversationUuid, setConversationUuid] = useState(null);
     const [companyUuid, setCompanyUuid] = useState(null);
@@ -83,6 +86,7 @@ export function Widget({ config, isPlayground = false, onOpen, onClose, onMessag
                         id: generateId(),
                         content: config.welcomeMessage || 'Hello! I\'m your AI assistant. How can I help you today?',
                         role: 'assistant',
+                        type: 'assistant', // Set type for button visibility
                         timestamp: new Date(),
                     };
                     setMessages([welcomeMsg]);
@@ -96,6 +100,7 @@ export function Widget({ config, isPlayground = false, onOpen, onClose, onMessag
                         id: generateId(),
                         content: config.welcomeMessage || 'Hello! I\'m your AI assistant. How can I help you today?',
                         role: 'assistant',
+                        type: 'assistant', // Set type for button visibility
                         timestamp: new Date(),
                     };
                     setMessages([welcomeMsg]);
@@ -184,7 +189,7 @@ export function Widget({ config, isPlayground = false, onOpen, onClose, onMessag
                 const tempMessageId = `streaming-${userMessageResponse.uuid}`;
                 // Stream AI response using SSE
                 await streamAIResponse(userMessageResponse.uuid, {
-                    onChunk: (chunk, isDone) => {
+                    onChunk: (chunk, isDone, sources, validation) => {
                         // Hide loading indicator on first chunk (streaming started)
                         if (!hasReceivedChunks) {
                             hasReceivedChunks = true;
@@ -198,12 +203,20 @@ export function Widget({ config, isPlayground = false, onOpen, onClose, onMessag
                         // If this is the final chunk (done=true), convert to message immediately
                         if (isDone && !streamingComplete) {
                             streamingComplete = true;
-                            // Add message to array with temp ID (shows timestamp/icons)
+                            console.log('Stream complete, sources:', sources, 'validation:', validation);
+                            // Add message to array with temp ID, sources, and validation
                             const tempMessage = {
                                 id: tempMessageId,
                                 content: accumulatedContent,
                                 role: 'assistant',
+                                type: 'assistant', // Set type for button visibility
                                 timestamp: new Date(),
+                                sources: sources && sources.length > 0 ? sources.map(s => ({
+                                    document_uuid: s.document_uuid,
+                                    document_title: s.document_title,
+                                    chunk_indices: s.chunk_indices
+                                })) : undefined,
+                                validation: validation
                             };
                             setStreamingMessage('');
                             setMessages((prev) => [...prev, tempMessage]);
@@ -219,6 +232,7 @@ export function Widget({ config, isPlayground = false, onOpen, onClose, onMessag
                             id: completionData.uuid,
                             content: accumulatedContent,
                             role: 'assistant',
+                            type: 'assistant', // Set type for button visibility
                             timestamp: new Date(completionData.created_at),
                         };
                         onMessage?.(finalMessage);
@@ -262,6 +276,7 @@ export function Widget({ config, isPlayground = false, onOpen, onClose, onMessag
                 id: generateId(),
                 content: 'Sorry, I encountered an error processing your message. Please try again.',
                 role: 'assistant',
+                type: 'assistant', // Set type for button visibility
                 timestamp: new Date(),
             };
             setMessages((prev) => [...prev, errorMessage]);
@@ -289,6 +304,19 @@ export function Widget({ config, isPlayground = false, onOpen, onClose, onMessag
             handleSendMessage();
         }
     };
+    const handleCopyMessage = async (messageId) => {
+        const message = messages.find(m => m.id === messageId);
+        if (!message || message.role !== 'assistant')
+            return;
+        try {
+            await navigator.clipboard.writeText(message.content);
+            setCopiedMessageId(messageId);
+            setTimeout(() => setCopiedMessageId(null), 2000);
+        }
+        catch (err) {
+            console.error('Failed to copy message:', err);
+        }
+    };
     const handleFeedback = async (messageId, type) => {
         // Find the message to get the real UUID (might be stored in _realUuid)
         const message = messages.find(m => m.id === messageId);
@@ -465,13 +493,49 @@ export function Widget({ config, isPlayground = false, onOpen, onClose, onMessag
                                                         boxShadow: message.role === 'user'
                                                             ? `0 4px 12px ${(config.themeColor || THEME.primary.hex)}4D` // 4D is ~30% opacity
                                                             : '0 2px 8px rgba(0, 0, 0, 0.1)'
-                                                    }, children: _jsx("p", { className: "text-sm whitespace-pre-wrap break-words leading-relaxed", children: message.content }) }), _jsxs("div", { className: "flex items-center justify-between mt-1", children: [_jsx("p", { className: `text-xs ${message.role === 'user' ? 'text-emerald-100' : 'text-gray-500'}`, children: formatTimestamp(message.timestamp) }), message.role === 'assistant' && (() => {
+                                                    }, children: message.role === 'user' ? (_jsx("p", { className: "text-sm whitespace-pre-wrap break-words leading-relaxed", children: message.content })) : (_jsxs("div", { children: [_jsx("div", { className: "text-sm prose prose-sm max-w-none prose-p:my-2 prose-headings:my-2 prose-ul:my-2 prose-ol:my-2 prose-li:my-1 prose-pre:my-2 prose-code:text-xs [&_pre]:overflow-x-auto [&_pre]:max-w-full [&_code]:break-words", dangerouslySetInnerHTML: { __html: markdownToHtml(message.content) } }), message.sources && message.sources.length > 0 && (_jsx(CitationView, { sources: message.sources }))] })) }), _jsxs("div", { className: "flex items-center justify-between mt-1", children: [_jsx("p", { className: `text-xs ${message.role === 'user' ? 'text-emerald-100' : 'text-gray-500'}`, children: formatTimestamp(message.timestamp) }), message.role === 'assistant' && message.type === 'assistant' && (() => {
                                                             // Check if message has real UUID (not temp ID)
                                                             // Disable if: message has temp ID (starts with 'streaming-') AND no _realUuid yet
                                                             const isTempId = message.id?.startsWith('streaming-') || false;
                                                             const hasRealUuid = !!message._realUuid;
                                                             const isDisabled = isTempId && !hasRealUuid;
-                                                            return (_jsxs("div", { className: "flex items-center gap-1 ml-2", children: [_jsx("button", { onClick: () => !isDisabled && handleFeedback(message.id, 'like'), disabled: isDisabled, className: `p-1 rounded transition-all duration-200 ${isDisabled
+                                                            return (_jsxs("div", { className: "flex items-center gap-1 ml-2", children: [message.validation && (_jsx("div", { className: "relative w-5 h-5 cursor-pointer", title: `AI Validation\nConfidence: ${(message.validation.confidence * 100).toFixed(1)}%\nStatus: ${message.validation.status}${message.validation.accuracy ? `\n\nAccuracy:\n  Verified: ${message.validation.accuracy.verified ? 'Yes' : 'No'}\n  Rate: ${(message.validation.accuracy.verification_rate * 100).toFixed(1)}%` : ''}${message.validation.hallucination ? `\n\nHallucination:\n  Detected: ${message.validation.hallucination.detected ? 'Yes' : 'No'}\n  Risk: ${(message.validation.hallucination.risk * 100).toFixed(1)}%` : ''}${message.validation.context ? `\n\nContext:\n  Relevance: ${(message.validation.context.source_relevance * 100).toFixed(1)}%\n  Usage: ${(message.validation.context.source_usage_rate * 100).toFixed(1)}%` : ''}`, children: _jsxs("svg", { className: "w-5 h-5", viewBox: "0 0 24 24", fill: "none", children: [_jsx("circle", { cx: "12", cy: "12", r: "9.5", className: message.validation.confidence > 0.7
+                                                                                        ? 'fill-green-500'
+                                                                                        : message.validation.confidence > 0.5
+                                                                                            ? 'fill-amber-500'
+                                                                                            : 'fill-red-500' }), _jsx("path", { d: "M12 0.5 L13.5 3 L10.5 3 Z", className: message.validation.confidence > 0.7
+                                                                                        ? 'fill-green-500'
+                                                                                        : message.validation.confidence > 0.5
+                                                                                            ? 'fill-amber-500'
+                                                                                            : 'fill-red-500' }), _jsx("path", { d: "M20.5 4.5 L19 7 L18 5 Z", className: message.validation.confidence > 0.7
+                                                                                        ? 'fill-green-500'
+                                                                                        : message.validation.confidence > 0.5
+                                                                                            ? 'fill-amber-500'
+                                                                                            : 'fill-red-500' }), _jsx("path", { d: "M23.5 12 L21 13.5 L21 10.5 Z", className: message.validation.confidence > 0.7
+                                                                                        ? 'fill-green-500'
+                                                                                        : message.validation.confidence > 0.5
+                                                                                            ? 'fill-amber-500'
+                                                                                            : 'fill-red-500' }), _jsx("path", { d: "M20.5 19.5 L18 19 L19 17 Z", className: message.validation.confidence > 0.7
+                                                                                        ? 'fill-green-500'
+                                                                                        : message.validation.confidence > 0.5
+                                                                                            ? 'fill-amber-500'
+                                                                                            : 'fill-red-500' }), _jsx("path", { d: "M12 23.5 L10.5 21 L13.5 21 Z", className: message.validation.confidence > 0.7
+                                                                                        ? 'fill-green-500'
+                                                                                        : message.validation.confidence > 0.5
+                                                                                            ? 'fill-amber-500'
+                                                                                            : 'fill-red-500' }), _jsx("path", { d: "M3.5 19.5 L5 17 L6 19 Z", className: message.validation.confidence > 0.7
+                                                                                        ? 'fill-green-500'
+                                                                                        : message.validation.confidence > 0.5
+                                                                                            ? 'fill-amber-500'
+                                                                                            : 'fill-red-500' }), _jsx("path", { d: "M0.5 12 L3 10.5 L3 13.5 Z", className: message.validation.confidence > 0.7
+                                                                                        ? 'fill-green-500'
+                                                                                        : message.validation.confidence > 0.5
+                                                                                            ? 'fill-amber-500'
+                                                                                            : 'fill-red-500' }), _jsx("path", { d: "M3.5 4.5 L6 5 L5 7 Z", className: message.validation.confidence > 0.7
+                                                                                        ? 'fill-green-500'
+                                                                                        : message.validation.confidence > 0.5
+                                                                                            ? 'fill-amber-500'
+                                                                                            : 'fill-red-500' }), _jsx("path", { d: "M8.5 12L10.5 14L15.5 9", stroke: "white", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" })] }) })), _jsx("button", { onClick: () => handleCopyMessage(message.id), className: "p-1 rounded transition-all duration-200 hover:scale-110 cursor-pointer text-gray-400 hover:text-gray-600", title: "Copy response", children: copiedMessageId === message.id ? (_jsx(Check, { className: "w-4 h-4 text-green-600" })) : (_jsx(Copy, { className: "w-4 h-4" })) }), _jsx("button", { onClick: () => !isDisabled && handleFeedback(message.id, 'like'), disabled: isDisabled, className: `p-1 rounded transition-all duration-200 ${isDisabled
                                                                             ? 'opacity-40 cursor-not-allowed'
                                                                             : 'hover:scale-110 cursor-pointer'} ${messageFeedback[message.id] === 'like'
                                                                             ? 'text-green-600'

package/lib/components/ui/CitationView.d.ts

@@ -0,0 +1,10 @@
+interface Source {
+    document_uuid: string;
+    document_title: string;
+    chunk_indices: number[];
+}
+interface CitationViewProps {
+    sources: Source[];
+}
+export declare function CitationView({ sources }: CitationViewProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/ui/CitationView.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Download, Loader2 } from 'lucide-react';
+import { getCitationContext } from '../../api/citation';
+// MIME type to extension mapping
+const mimeToExtension = {
+    'text/javascript': '.js',
+    'application/javascript': '.js',
+    'text/jsx': '.jsx',
+    'text/typescript': '.ts',
+    'application/typescript': '.ts',
+    'text/tsx': '.tsx',
+    'text/x-python': '.py',
+    'text/python': '.py',
+    'text/markdown': '.md',
+    'text/x-markdown': '.md',
+    'application/json': '.json',
+    'text/html': '.html',
+    'text/css': '.css',
+    'text/plain': '.txt',
+    'text/xml': '.xml',
+};
+function getFileExtension(title, fileType) {
+    // First try to extract from filename
+    const match = title.match(/\.([a-zA-Z0-9]+)$/);
+    if (match) {
+        return `.${match[1]}`;
+    }
+    // Fallback to MIME type mapping
+    if (fileType && mimeToExtension[fileType]) {
+        return mimeToExtension[fileType];
+    }
+    // Default to .txt
+    return '.txt';
+}
+export function CitationView({ sources }) {
+    const [loadingUuid, setLoadingUuid] = useState(null);
+    const handleDownloadSource = async (source) => {
+        setLoadingUuid(source.document_uuid);
+        try {
+            if (!source.document_uuid || !source.chunk_indices || source.chunk_indices.length === 0) {
+                setLoadingUuid(null);
+                alert('Invalid source data. UUID or chunk indices are missing.');
+                return;
+            }
+            const context = await getCitationContext(source.document_uuid, source.chunk_indices);
+            if (!context || !context.content) {
+                setLoadingUuid(null);
+                alert('No content available for this source.');
+                return;
+            }
+            // Determine file extension
+            const extension = getFileExtension(context.document_title, context.file_type);
+            const filename = context.document_title.endsWith(extension)
+                ? context.document_title
+                : `${context.document_title}${extension}`;
+            // Create blob and download
+            const blob = new Blob([context.content], { type: 'text/plain' });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = filename;
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            URL.revokeObjectURL(url);
+            setLoadingUuid(null);
+        }
+        catch (err) {
+            console.error('Failed to download source:', err);
+            setLoadingUuid(null);
+            alert('Failed to download source content. Please try again.');
+        }
+    };
+    return (_jsxs("div", { className: "mt-2 border-t border-gray-100 pt-2", children: [_jsx("div", { className: "text-xs text-gray-500 mb-1 font-medium", children: "Sources:" }), _jsx("div", { className: "space-y-1", children: sources.map((source, index) => {
+                    const isLoading = loadingUuid === source.document_uuid;
+                    return (_jsxs("button", { onClick: () => handleDownloadSource(source), disabled: isLoading, className: "w-full text-left px-2 py-1.5 text-xs text-emerald-700 hover:text-emerald-800 hover:bg-emerald-50 rounded flex items-center gap-1 transition-colors group cursor-pointer disabled:opacity-70 disabled:cursor-wait", children: [isLoading ? (_jsx(Loader2, { className: "w-3 h-3 flex-shrink-0 animate-spin" })) : (_jsx(Download, { className: "w-3 h-3 flex-shrink-0" })), _jsx("span", { className: "truncate", children: source.document_title })] }, index));
+                }) })] }));
+}

package/lib/types/index.d.ts

@@ -21,12 +21,36 @@ export interface ChatMessage {
     id: string;
     content: string;
     role: 'user' | 'assistant' | 'system';
+    type?: 'user' | 'assistant' | 'agent' | 'system';
     timestamp: Date;
     sources?: ChatSource[];
+    validation?: {
+        confidence: number;
+        valid: boolean;
+        status: string;
+        accuracy?: {
+            verified: boolean;
+            verification_rate: number;
+            reason?: string;
+        };
+        hallucination?: {
+            detected: boolean;
+            risk: number;
+            reason?: string;
+        };
+        context?: {
+            source_relevance: number;
+            source_usage_rate: number;
+            valid: boolean;
+        };
+    };
     _realUuid?: string;
 }
 export interface ChatSource {
-    title: string;
+    document_uuid: string;
+    document_title: string;
+    chunk_indices: number[];
+    title?: string;
     url?: string;
     content?: string;
 }

package/lib/utils/markdown.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Convert markdown to sanitized HTML
+ */
+export declare function markdownToHtml(content: string): string;

package/lib/utils/markdown.js

@@ -0,0 +1,50 @@
+import { marked } from 'marked';
+import DOMPurify from 'dompurify';
+/**
+ * Check if content contains markdown syntax
+ */
+function hasMarkdownSyntax(content) {
+    // Check for common markdown patterns
+    const mdPatterns = [
+        /#{1,6}\s/, // Headers
+        /\*\*.*?\*\*/, // Bold
+        /__.*?__/, // Bold (alt)
+        /\*.*?\*/, // Italic
+        /_.*?_/, // Italic (alt)
+        /\[.*?\]\(.*?\)/, // Links
+        /`.*?`/, // Inline code
+        /```[\s\S]*?```/, // Code blocks
+        /^\s*[-*+]\s/m, // Unordered lists
+        /^\s*\d+\.\s/m, // Ordered lists
+        /^\s*>\s/m, // Blockquotes
+    ];
+    return mdPatterns.some(pattern => pattern.test(content));
+}
+/**
+ * Convert markdown to sanitized HTML
+ */
+export function markdownToHtml(content) {
+    // If no markdown syntax detected, return as-is wrapped in paragraph
+    if (!hasMarkdownSyntax(content)) {
+        return `<p>${DOMPurify.sanitize(content)}</p>`;
+    }
+    // Configure marked for safe rendering
+    marked.setOptions({
+        breaks: true,
+        gfm: true,
+    });
+    // Convert markdown to HTML
+    const rawHtml = marked(content);
+    // Sanitize HTML to prevent XSS
+    return DOMPurify.sanitize(rawHtml, {
+        ALLOWED_TAGS: [
+            'p', 'br', 'strong', 'em', 'u', 'code', 'pre',
+            'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
+            'ul', 'ol', 'li',
+            'blockquote',
+            'a',
+            'table', 'thead', 'tbody', 'tr', 'th', 'td',
+        ],
+        ALLOWED_ATTR: ['href', 'target', 'rel'],
+    });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vezlo/assistant-chat",
-  "version": "1.6.0",
+  "version": "1.8.0",
   "description": "React component library for AI-powered chat widgets with RAG knowledge base integration, realtime updates, and human agent support",
   "type": "module",
   "main": "lib/index.js",
@@ -34,7 +34,9 @@
     "@supabase/supabase-js": "^2.84.0",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
+    "dompurify": "^3.3.1",
     "lucide-react": "^0.544.0",
+    "marked": "^17.0.1",
     "react-router-dom": "^7.9.3",
     "tailwindcss": "^4.1.14"
   },
@@ -42,6 +44,7 @@
     "@eslint/js": "^9.36.0",
     "@tailwindcss/postcss": "^4.1.14",
     "@tailwindcss/typography": "^0.5.19",
+    "@types/dompurify": "^3.0.5",
     "@types/node": "^24.6.2",
     "@types/react": "^19.1.16",
     "@types/react-dom": "^19.1.9",