@vezlo/assistant-chat 1.7.0 → 1.9.0

package/PACKAGE_README.md

@@ -67,6 +67,7 @@ The `WidgetConfig` interface includes:
 - `defaultOpen`: Whether widget opens by default
 - `supabaseUrl`: Supabase project URL (optional, required for realtime updates)
 - `supabaseAnonKey`: Supabase anon key (optional, required for realtime updates)
+- `userContext`: Object containing user identifiers for database query filtering (optional)
 
 ### Configuration Options Table
 
@@ -85,6 +86,7 @@ The `WidgetConfig` interface includes:
 | `apiKey` | string | Required | API key for authentication |
 | `supabaseUrl` | string | Optional | Supabase project URL (for realtime updates) |
 | `supabaseAnonKey` | string | Optional | Supabase anon key (for realtime updates) |
+| `userContext` | object | Optional | User identifiers for database filtering (e.g., `{ user_uuid, company_uuid }`) |
 
 ## API Integration
 
@@ -156,6 +158,39 @@ function MyApp() {
 }
 ```
 
+### With User Context (Database Tools)
+
+```tsx
+import { Widget } from '@vezlo/assistant-chat';
+
+function MyApp() {
+  // Get current user from your auth system
+  const currentUser = useAuth(); // Your auth hook
+  
+  return (
+    <Widget 
+      config={{
+        uuid: 'my-widget-123',
+        apiUrl: 'http://localhost:3000',
+        apiKey: 'your-api-key',
+        title: 'AI Assistant',
+        themeColor: '#10b981',
+        // Pass user context for database query filtering
+        userContext: {
+          user_uuid: currentUser.uuid,
+          company_uuid: currentUser.companyUuid,
+          // Optional: numeric IDs if your database uses them
+          user_id: currentUser.id,
+          company_id: currentUser.companyId
+        }
+      }}
+    />
+  );
+}
+```
+
+**Note:** `userContext` is optional. The widget works fine without it. If provided, it enables user-specific database queries when Database Tools are configured in the admin dashboard.
+
 ### With Callbacks
 
 ```tsx

package/README.md

@@ -101,6 +101,7 @@ npm run dev
 - ✅ Multiple widget management
 - ✅ **Human agent support** (conversation management, agent handoff)
 - ✅ **Realtime updates** (live message synchronization)
+- ✅ **Database tools** (connect external databases for natural language queries - [docs](./docs/DATABASE_TOOLS.md))
 - ✅ Docker support
 - ✅ Vercel deployment
 

package/lib/api/message.d.ts

@@ -29,6 +29,11 @@ export interface StreamChunkEvent {
         document_title: string;
         chunk_indices: number[];
     }>;
+    validation?: {
+        confidence: number;
+        valid: boolean;
+        status: string;
+    };
 }
 export interface StreamCompletionEvent {
     type: 'completion';
@@ -48,7 +53,11 @@ export interface StreamCallbacks {
         document_uuid: string;
         document_title: string;
         chunk_indices: number[];
-    }>) => void;
+    }>, validation?: {
+        confidence: number;
+        valid: boolean;
+        status: string;
+    }) => void;
     onCompletion?: (data: StreamCompletionEvent) => void;
     onError?: (error: StreamErrorEvent) => void;
     onDone?: () => void;
@@ -66,7 +75,7 @@ export declare function generateAIResponse(userMessageUuid: string, apiUrl?: str
  * Stream AI response using Server-Sent Events (SSE)
  * This is the recommended approach for real-time streaming
  */
-export declare function streamAIResponse(userMessageUuid: string, callbacks: StreamCallbacks, apiUrl?: string): Promise<void>;
+export declare function streamAIResponse(userMessageUuid: string, callbacks: StreamCallbacks, apiUrl?: string, userContext?: Record<string, any>): Promise<void>;
 /**
  * Feedback API
  */

package/lib/api/message.js

@@ -58,14 +58,16 @@ export async function generateAIResponse(userMessageUuid, apiUrl) {
  * Stream AI response using Server-Sent Events (SSE)
  * This is the recommended approach for real-time streaming
  */
-export async function streamAIResponse(userMessageUuid, callbacks, apiUrl) {
+export async function streamAIResponse(userMessageUuid, callbacks, apiUrl, userContext) {
     const API_BASE_URL = apiUrl || DEFAULT_API_BASE_URL;
     try {
         const response = await fetch(`${API_BASE_URL}/api/messages/${userMessageUuid}/generate`, {
             method: 'POST',
             headers: {
                 'Accept': 'text/event-stream',
+                'Content-Type': 'application/json',
             },
+            body: userContext ? JSON.stringify({ user_context: userContext }) : undefined,
         });
         if (!response.ok) {
             // Try to parse error as JSON first
@@ -121,7 +123,7 @@ export async function streamAIResponse(userMessageUuid, callbacks, apiUrl) {
                             const event = JSON.parse(data);
                             switch (event.type) {
                                 case 'chunk':
-                                    callbacks.onChunk?.(event.content, event.done, event.sources);
+                                    callbacks.onChunk?.(event.content, event.done, event.sources, event.validation);
                                     break;
                                 case 'completion':
                                     callbacks.onCompletion?.(event);

package/lib/components/Widget.js

@@ -189,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, sources) => {
+                    onChunk: (chunk, isDone, sources, validation) => {
                         // Hide loading indicator on first chunk (streaming started)
                         if (!hasReceivedChunks) {
                             hasReceivedChunks = true;
@@ -203,8 +203,8 @@ 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;
-                            console.log('Stream complete, sources:', sources);
-                            // Add message to array with temp ID and sources
+                            console.log('Stream complete, sources:', sources, 'validation:', validation);
+                            // Add message to array with temp ID, sources, and validation
                             const tempMessage = {
                                 id: tempMessageId,
                                 content: accumulatedContent,
@@ -215,7 +215,8 @@ export function Widget({ config, isPlayground = false, onOpen, onClose, onMessag
                                     document_uuid: s.document_uuid,
                                     document_title: s.document_title,
                                     chunk_indices: s.chunk_indices
-                                })) : undefined
+                                })) : undefined,
+                                validation: validation
                             };
                             setStreamingMessage('');
                             setMessages((prev) => [...prev, tempMessage]);
@@ -258,7 +259,8 @@ export function Widget({ config, isPlayground = false, onOpen, onClose, onMessag
                         // Ensure loading is hidden
                         setIsLoading(false);
                     },
-                }, config.apiUrl);
+                }, config.apiUrl, config.userContext // Pass user context for database filtering
+                );
             }
             else {
                 // Agent has joined, don't generate AI response
@@ -498,7 +500,43 @@ export function Widget({ config, isPlayground = false, onOpen, onClose, onMessag
                                                             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: () => 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
+                                                            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/NextSteps.d.ts

@@ -0,0 +1,8 @@
+import type { ChatSource } from '../../types';
+interface NextStepsProps {
+    content: string;
+    sources?: ChatSource[];
+}
+export declare function extractRoutesFromText(text: string): string[];
+export declare function NextSteps({ content, sources }: NextStepsProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/ui/NextSteps.js

@@ -0,0 +1,156 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowRight, Navigation, MapPin, ExternalLink } from 'lucide-react';
+// Extract routes mentioned in text
+export function extractRoutesFromText(text) {
+    const routes = [];
+    // Match routes like "/settings", "/login", "/widget/:uuid"
+    const routePattern = /(\/[\w\/:*-]+)/g;
+    const matches = text.matchAll(routePattern);
+    for (const match of matches) {
+        const route = match[1];
+        if (route && !routes.includes(route)) {
+            routes.push(route);
+        }
+    }
+    return routes;
+}
+export function NextSteps({ content, sources }) {
+    // Extract all routes from sources
+    const allRoutes = sources
+        ?.filter(s => s.navigationMetadata?.routes && s.navigationMetadata.routes.length > 0)
+        .flatMap(s => s.navigationMetadata.routes) || [];
+    // Parse "Next Steps" section from AI response
+    const parseNextSteps = (text) => {
+        const steps = [];
+        // Look for "Next Steps:" or "**Next Steps:**" section
+        const nextStepsMatch = text.match(/(?:\*\*)?Next Steps:?\*\*(?:[\s\S]*?)(?:\n-|\n\*|\n\d+\.)\s*(.+?)(?=\n\n|\n\*\*|$)/gi);
+        if (!nextStepsMatch) {
+            // Try to find bullet points after "Next Steps"
+            const sectionMatch = text.match(/(?:Next Steps|Next steps|NEXT STEPS)[:\s]*\n((?:[-*•]\s*.+?\n?)+)/i);
+            if (sectionMatch) {
+                const bullets = sectionMatch[1].match(/[-*•]\s*(.+?)(?=\n[-*•]|\n\n|$)/g);
+                if (bullets) {
+                    bullets.forEach(bullet => {
+                        const stepText = bullet.replace(/^[-*•]\s*/, '').trim();
+                        const route = extractRoute(stepText);
+                        steps.push({
+                            text: stepText,
+                            route,
+                            action: route ? 'navigate' : 'info'
+                        });
+                    });
+                }
+            }
+        }
+        else {
+            // Parse structured next steps
+            const lines = text.split('\n');
+            let inNextSteps = false;
+            for (const line of lines) {
+                if (line.match(/Next Steps/i)) {
+                    inNextSteps = true;
+                    continue;
+                }
+                if (inNextSteps) {
+                    // Stop at next section (## or **)
+                    if (line.match(/^##|^\*\*/) && !line.match(/Next Steps/i)) {
+                        break;
+                    }
+                    // Match bullet points
+                    const bulletMatch = line.match(/^[-*•]\s*(.+)$/);
+                    if (bulletMatch) {
+                        const stepText = bulletMatch[1].trim();
+                        const route = extractRoute(stepText);
+                        steps.push({
+                            text: stepText,
+                            route,
+                            action: route ? 'navigate' : 'info'
+                        });
+                    }
+                }
+            }
+        }
+        // If no structured steps found, try to extract navigation suggestions from the content
+        if (steps.length === 0) {
+            const navigationPhrases = [
+                /(?:navigate to|go to|visit|access|open)\s+([\/\w:]+)/gi,
+                /(?:route|path)\s+([\/\w:]+)/gi,
+                /(?:at|to)\s+([\/\w:]+)/gi
+            ];
+            navigationPhrases.forEach(pattern => {
+                const matches = text.matchAll(pattern);
+                for (const match of matches) {
+                    const route = match[1];
+                    if (route && allRoutes.some(r => r.path === route)) {
+                        const context = text.substring(Math.max(0, match.index - 50), match.index + match[0].length + 50);
+                        steps.push({
+                            text: context.trim(),
+                            route,
+                            action: 'navigate'
+                        });
+                    }
+                }
+            });
+        }
+        return steps.slice(0, 5); // Limit to 5 steps
+    };
+    // Extract route path from text
+    const extractRoute = (text) => {
+        // Match routes like "/settings", "/login", "/widget/:uuid"
+        const routeMatch = text.match(/(\/[\w\/:*-]+)/);
+        if (routeMatch) {
+            const route = routeMatch[1];
+            // Verify it exists in available routes
+            if (allRoutes.some(r => r.path === route || route.startsWith(r.path))) {
+                return route;
+            }
+        }
+        return undefined;
+    };
+    const steps = parseNextSteps(content);
+    // If no steps found, try to generate from available routes
+    if (steps.length === 0 && allRoutes.length > 0) {
+        // Generate suggestions based on common routes
+        const commonRoutes = allRoutes
+            .filter(r => !r.dynamic)
+            .slice(0, 3)
+            .map(r => ({
+            text: `Navigate to ${r.path}`,
+            route: r.path,
+            action: 'navigate'
+        }));
+        if (commonRoutes.length > 0) {
+            return (_jsxs("div", { className: "mt-3 bg-gradient-to-r from-emerald-50 to-teal-50 border-2 border-emerald-300 rounded-lg p-3 shadow-sm", children: [_jsxs("div", { className: "flex items-center gap-2 mb-2", children: [_jsx(Navigation, { className: "w-4 h-4 text-emerald-600 flex-shrink-0" }), _jsx("div", { className: "text-sm font-bold text-emerald-900", children: "\uD83E\uDDED Suggested Navigation" })] }), _jsx("div", { className: "space-y-2", children: commonRoutes.map((step, idx) => {
+                            const fullUrl = step.route && typeof window !== 'undefined' ? `${window.location.origin}${step.route}` : step.route;
+                            return (_jsxs("button", { onClick: () => {
+                                    if (fullUrl) {
+                                        if (typeof window !== 'undefined' && window.location) {
+                                            window.location.href = fullUrl;
+                                        }
+                                        else {
+                                            navigator.clipboard.writeText(fullUrl);
+                                        }
+                                    }
+                                }, className: "w-full text-left px-3 py-2 bg-white border-2 border-emerald-400 rounded-md text-sm font-medium text-emerald-900 hover:bg-emerald-50 hover:border-emerald-500 hover:shadow-md transition-all flex items-center justify-between group cursor-pointer", title: `Click to navigate to ${fullUrl}`, children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(MapPin, { className: "w-4 h-4 text-emerald-600" }), _jsx("span", { children: step.text })] }), _jsx(ArrowRight, { className: "w-4 h-4 text-emerald-600 opacity-0 group-hover:opacity-100 transition-opacity" })] }, idx));
+                        }) })] }));
+        }
+    }
+    if (steps.length === 0) {
+        return null;
+    }
+    return (_jsxs("div", { className: "mt-3 bg-gradient-to-r from-emerald-50 to-teal-50 border-2 border-emerald-300 rounded-lg p-3 shadow-sm", children: [_jsxs("div", { className: "flex items-center gap-2 mb-2", children: [_jsx(Navigation, { className: "w-4 h-4 text-emerald-600 flex-shrink-0" }), _jsx("div", { className: "text-sm font-bold text-emerald-900", children: "\uD83E\uDDED Next Steps" })] }), _jsx("div", { className: "space-y-2", children: steps.map((step, idx) => {
+                    const fullUrl = step.route && typeof window !== 'undefined' ? `${window.location.origin}${step.route}` : step.route;
+                    return (_jsxs("button", { onClick: () => {
+                            if (fullUrl) {
+                                if (typeof window !== 'undefined' && window.location) {
+                                    window.location.href = fullUrl;
+                                }
+                                else {
+                                    navigator.clipboard.writeText(fullUrl);
+                                }
+                            }
+                        }, className: `w-full text-left px-3 py-2 rounded-md text-sm transition-all flex items-start gap-2 group ${step.route
+                            ? 'bg-white border-2 border-emerald-400 text-emerald-900 hover:bg-emerald-50 hover:border-emerald-500 hover:shadow-md font-medium cursor-pointer'
+                            : 'bg-emerald-100/50 border border-emerald-300 text-emerald-800 cursor-default'}`, title: fullUrl ? `Click to navigate to ${fullUrl}` : undefined, children: [_jsxs("div", { className: "flex items-center gap-2 flex-1", children: [step.route ? (_jsx(MapPin, { className: "w-4 h-4 text-emerald-600 flex-shrink-0 mt-0.5" })) : (_jsx(ArrowRight, { className: "w-4 h-4 text-emerald-600 flex-shrink-0 mt-0.5" })), _jsx("span", { className: "flex-1", children: step.text })] }), step.route && (_jsx(ExternalLink, { className: "w-4 h-4 text-emerald-600 opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0 mt-0.5" }))] }, idx));
+                }) })] }));
+}

package/lib/types/index.d.ts

@@ -16,6 +16,7 @@ export interface WidgetConfig {
     defaultOpen?: boolean;
     supabaseUrl?: string;
     supabaseAnonKey?: string;
+    userContext?: Record<string, any>;
 }
 export interface ChatMessage {
     id: string;
@@ -24,6 +25,26 @@ export interface ChatMessage {
     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 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vezlo/assistant-chat",
-  "version": "1.7.0",
+  "version": "1.9.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",
@@ -37,6 +37,7 @@
     "dompurify": "^3.3.1",
     "lucide-react": "^0.544.0",
     "marked": "^17.0.1",
+    "react-hot-toast": "^2.6.0",
     "react-router-dom": "^7.9.3",
     "tailwindcss": "^4.1.14"
   },

package/public/widget.js

@@ -36,7 +36,8 @@
         placeholder: 'Type your message...',
         welcomeMessage: "Hello! I'm your AI assistant. How can I help you today?",
         apiKey: '',
-        themeColor: '#059669'
+        themeColor: '#059669',
+        userContext: {} // Optional: user context for database filtering
       };
 
       // Merge with user config