@vezlo/assistant-chat 1.8.0 → 1.9.1

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

@@ -75,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

package/lib/components/Widget.js

@@ -259,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

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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vezlo/assistant-chat",
-  "version": "1.8.0",
+  "version": "1.9.1",
   "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