@vezlo/assistant-chat 1.1.1 → 1.3.0

package/PACKAGE_README.md

@@ -2,7 +2,7 @@
 
 [![npm version](https://img.shields.io/npm/v/@vezlo/assistant-chat.svg)](https://www.npmjs.com/package/@vezlo/assistant-chat) [![license](https://img.shields.io/badge/license-AGPL--3.0-blue.svg)](https://opensource.org/licenses/AGPL-3.0)
 
-A React component library for integrating AI assistant chat functionality into web applications.
+A React component library for integrating AI assistant chat functionality into web applications with realtime updates and human agent support.
 
 > **📦 This is the NPM package documentation**  
 > **🏠 Repository**: [assistant-chat](https://github.com/vezlo/assistant-chat) - Contains both this NPM package and a standalone admin application  
@@ -19,6 +19,7 @@ npm install @vezlo/assistant-chat
 - React 18 or higher
 - Tailwind CSS (for styling)
 - Assistant Server running (see [Assistant Server](https://github.com/vezlo/assistant-server))
+- **Realtime Updates** (Optional): Provide `supabaseUrl` + `supabaseAnonKey` for agent handoff / live message sync. Without these the widget still works, it just won’t receive realtime pushes.
 
 ## Quick Start
 
@@ -37,7 +38,10 @@ function App() {
     themeColor: '#10b981',
     position: 'bottom-right',
     size: { width: 400, height: 600 },
-    defaultOpen: false
+    defaultOpen: false,
+    // Optional realtime config
+    supabaseUrl: 'https://your-project.supabase.co',
+    supabaseAnonKey: 'your-anon-key'
   };
 
   return <Widget config={widgetConfig} />;
@@ -59,6 +63,8 @@ The `WidgetConfig` interface includes:
 - `position`: Widget position ('bottom-right', 'bottom-left', 'top-right', 'top-left')
 - `size`: Widget dimensions
 - `defaultOpen`: Whether widget opens by default
+- `supabaseUrl`: Supabase project URL (optional, required for realtime updates)
+- `supabaseAnonKey`: Supabase anon key (optional, required for realtime updates)
 
 ### Configuration Options Table
 
@@ -75,6 +81,8 @@ The `WidgetConfig` interface includes:
 | `defaultOpen` | boolean | `false` | Whether widget opens by default |
 | `apiUrl` | string | Required | Assistant Server API URL |
 | `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) |
 
 ## API Integration
 
@@ -83,6 +91,7 @@ This widget requires a running Assistant Server instance. The widget will:
 1. Create conversations automatically
 2. Send user messages to the server
 3. Stream AI responses in real-time
+4. **Realtime Updates**: With `supabaseUrl` and `supabaseAnonKey` configured, the widget receives realtime updates for agent handoff and live message synchronization
 
 Configure your Assistant Server URL in your application:
 

package/README.md

@@ -20,6 +20,8 @@ A complete chat widget solution with both a React component library and standalo
 - **Embed Code Generator**: Get ready-to-use embed codes
 - **Docker Support**: Easy deployment with Docker Compose
 - **Vercel Ready**: One-click deployment to Vercel
+- **Shared Layout**: `MainLayout` + `Header` provide a consistent, Vercel-style shell across every page
+- **Auth-Ready Context**: `AppProvider` exposes user/workspace state, token helpers, and `ProtectedRoute` support for future login flows
 
 ## Quick Start
 
@@ -65,12 +67,17 @@ npm run dev
 - Live preview and playground
 - Embed code generation
 - Docker and Vercel deployment support
+- Theme + widget matrices: see [`docs/THEME_WIDGET_CONFIG.md`](docs/THEME_WIDGET_CONFIG.md) for every field, color mapping tips, and widget overrides
 
 ## Prerequisites
 
 - **Assistant Server**: Both components require a running Assistant Server
 - Node.js 18+ and npm
 - React 18+ (for package usage)
+- **Realtime Updates** (Optional): For agent handoff + live message sync, provide Supabase Realtime credentials
+  - `VITE_SUPABASE_URL`: Supabase project URL
+  - `VITE_SUPABASE_ANON_KEY`: Supabase anon/public key
+  - Without these, the widget works normally but won’t receive realtime updates
 
 ## Features
 
@@ -79,6 +86,7 @@ npm run dev
 - ✅ TypeScript support
 - ✅ Tailwind CSS styling
 - ✅ Real-time streaming
+- ✅ **Realtime updates** (agent handoff, live message sync)
 - ✅ Customizable themes
 - ✅ Shadow DOM support
 - ✅ API integration included
@@ -89,6 +97,8 @@ npm run dev
 - ✅ Playground testing
 - ✅ Embed code generation
 - ✅ Multiple widget management
+- ✅ **Human agent support** (conversation management, agent handoff)
+- ✅ **Realtime updates** (live message synchronization)
 - ✅ Docker support
 - ✅ Vercel deployment
 
@@ -126,6 +136,9 @@ vercel
 # Set environment variables (required)
 vercel env add VITE_ASSISTANT_SERVER_URL
 vercel env add VITE_ASSISTANT_SERVER_API_KEY
+# Optional: For realtime updates
+vercel env add VITE_SUPABASE_URL
+vercel env add VITE_SUPABASE_ANON_KEY
 
 # Deploy to production
 vercel --prod
@@ -160,10 +173,18 @@ assistant-chat/
 ### How It Works
 
 - **Same Widget Code**: Both the NPM package and standalone app use the same `Widget.tsx` component
+- **Embed & Playground**: `WidgetPage.tsx` powers the iframe, embed script, and playground preview using that same component
 - **NPM Package**: Publishes the widget component as a reusable library
 - **Standalone App**: Uses the widget component directly for admin interface and playground
 - **No Duplication**: Single source of truth for the widget component
 
+## Layout & Auth Architecture
+
+- `AppProvider` manages `user`, `workspace`, auth token, and exposes `login/logout` helpers plus `ProtectedRoute` for future API integration.
+- `Header` & `MainLayout` deliver the new full-width, two-row dashboard shell (logo, workspace switcher, company badge, primary nav, profile dropdown).
+- `ConfigPage` (dashboard) and every other route render inside `MainLayout`, so all future pages automatically inherit the header and spacing.
+- `LoginPage` lives outside the layout and is already wired to `AppProvider`, making it ready for real authentication APIs.
+
 ## Architecture
 
 ```

package/lib/api/auth.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Auth API Service
+ * Handles login, logout, and current user retrieval
+ */
+export interface LoginRequest {
+    email: string;
+    password: string;
+}
+export interface LoginResponse {
+    access_token: string;
+}
+export interface MeResponse {
+    user: {
+        uuid: string;
+        email: string;
+        name: string;
+    };
+    profile: {
+        uuid: string;
+        company_uuid: string;
+        company_name: string;
+        role: string;
+    };
+}
+export declare function loginUser(payload: LoginRequest, apiUrl?: string): Promise<LoginResponse>;
+export declare function logoutUser(token: string, apiUrl?: string): Promise<void>;
+export declare function getCurrentUser(token: string, apiUrl?: string): Promise<MeResponse>;

package/lib/api/auth.js

@@ -0,0 +1,59 @@
+/**
+ * Auth API Service
+ * Handles login, logout, and current user retrieval
+ */
+const DEFAULT_API_BASE_URL = import.meta.env.VITE_ASSISTANT_SERVER_URL || 'http://localhost:3000';
+const parseErrorMessage = async (response) => {
+    const data = await response.json().catch(() => ({}));
+    return data.error || data.message || 'Unexpected server error';
+};
+export async function loginUser(payload, apiUrl) {
+    const API_BASE_URL = apiUrl || DEFAULT_API_BASE_URL;
+    const response = await fetch(`${API_BASE_URL}/api/auth/login`, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            Accept: 'application/json',
+        },
+        body: JSON.stringify(payload),
+    });
+    if (!response.ok) {
+        const message = await parseErrorMessage(response);
+        throw new Error(message);
+    }
+    const data = (await response.json());
+    if (!data.access_token) {
+        throw new Error('Login succeeded but no access token was returned.');
+    }
+    return data;
+}
+export async function logoutUser(token, apiUrl) {
+    const API_BASE_URL = apiUrl || DEFAULT_API_BASE_URL;
+    const response = await fetch(`${API_BASE_URL}/api/auth/logout`, {
+        method: 'POST',
+        headers: {
+            Accept: 'application/json',
+            Authorization: `Bearer ${token}`,
+        },
+    });
+    if (!response.ok && response.status !== 401) {
+        // 401 just means the token is already invalid – safe to continue
+        const message = await parseErrorMessage(response);
+        throw new Error(message);
+    }
+}
+export async function getCurrentUser(token, apiUrl) {
+    const API_BASE_URL = apiUrl || DEFAULT_API_BASE_URL;
+    const response = await fetch(`${API_BASE_URL}/api/auth/me`, {
+        method: 'GET',
+        headers: {
+            Accept: 'application/json',
+            Authorization: `Bearer ${token}`,
+        },
+    });
+    if (!response.ok) {
+        const message = await parseErrorMessage(response);
+        throw new Error(message);
+    }
+    return (await response.json());
+}

package/lib/api/conversation.d.ts

@@ -1,6 +1,6 @@
 /**
  * Conversation API Service
- * Handles conversation creation and management
+ * Handles conversation creation, listing, and agent messaging
  */
 export interface CreateConversationRequest {
     title?: string;
@@ -14,6 +14,45 @@ export interface ConversationResponse {
     created_at: string;
     updated_at: string;
 }
+export interface ConversationListItem {
+    uuid: string;
+    status: string;
+    message_count: number;
+    last_message_at: string | null;
+    joined_at: string | null;
+    closed_at: string | null;
+    created_at: string;
+    updated_at: string;
+}
+export interface ConversationListResponse {
+    conversations: ConversationListItem[];
+    pagination: {
+        page: number;
+        page_size: number;
+        total: number;
+        has_more: boolean;
+    };
+}
+export interface ConversationMessage {
+    uuid: string;
+    content: string;
+    type: 'user' | 'assistant' | 'agent' | 'system';
+    author_id: number | null;
+    created_at: string;
+    pending?: boolean;
+}
+export interface ConversationMessagesResponse {
+    messages: ConversationMessage[];
+    pagination: {
+        page: number;
+        page_size: number;
+        total: number;
+        has_more: boolean;
+    };
+}
+export interface JoinConversationResponse {
+    message: ConversationMessage;
+}
 /**
  * Create a new conversation
  */
@@ -22,3 +61,23 @@ export declare function createConversation(request: CreateConversationRequest, a
  * Get conversation by UUID
  */
 export declare function getConversation(uuid: string, apiUrl?: string): Promise<ConversationResponse>;
+/**
+ * Get paginated conversations for agent UI
+ */
+export declare function getConversations(token: string, page?: number, pageSize?: number, orderBy?: string, apiUrl?: string): Promise<ConversationListResponse>;
+/**
+ * Get messages within a conversation
+ */
+export declare function getConversationMessages(token: string, conversationUuid: string, page?: number, pageSize?: number, apiUrl?: string): Promise<ConversationMessagesResponse>;
+/**
+ * Join a conversation as an agent
+ */
+export declare function joinConversation(token: string, conversationUuid: string, apiUrl?: string): Promise<JoinConversationResponse>;
+/**
+ * Close a conversation as an agent
+ */
+export declare function closeConversation(token: string, conversationUuid: string, apiUrl?: string): Promise<JoinConversationResponse>;
+/**
+ * Send agent-authored message
+ */
+export declare function sendAgentMessage(token: string, conversationUuid: string, content: string, apiUrl?: string): Promise<ConversationMessage>;

package/lib/api/conversation.js

@@ -1,8 +1,14 @@
 /**
  * Conversation API Service
- * Handles conversation creation and management
+ * Handles conversation creation, listing, and agent messaging
  */
 const DEFAULT_API_BASE_URL = import.meta.env.VITE_ASSISTANT_SERVER_URL || 'http://localhost:3000';
+const parseErrorMessage = async (response) => {
+    const data = await response.json().catch(() => ({}));
+    return (data.error ||
+        data.message ||
+        'Unexpected server error');
+};
 /**
  * Create a new conversation
  */
@@ -52,3 +58,95 @@ export async function getConversation(uuid, apiUrl) {
         throw error;
     }
 }
+/**
+ * Get paginated conversations for agent UI
+ */
+export async function getConversations(token, page = 1, pageSize = 20, orderBy = 'last_message_at', apiUrl) {
+    const API_BASE_URL = apiUrl || DEFAULT_API_BASE_URL;
+    const response = await fetch(`${API_BASE_URL}/api/conversations?page=${page}&page_size=${pageSize}&order_by=${orderBy}`, {
+        method: 'GET',
+        headers: {
+            Accept: 'application/json',
+            Authorization: `Bearer ${token}`,
+        },
+    });
+    if (!response.ok) {
+        const message = await parseErrorMessage(response);
+        throw new Error(message);
+    }
+    return (await response.json());
+}
+/**
+ * Get messages within a conversation
+ */
+export async function getConversationMessages(token, conversationUuid, page = 1, pageSize = 50, apiUrl) {
+    const API_BASE_URL = apiUrl || DEFAULT_API_BASE_URL;
+    const response = await fetch(`${API_BASE_URL}/api/conversations/${conversationUuid}/messages?page=${page}&page_size=${pageSize}`, {
+        method: 'GET',
+        headers: {
+            Accept: 'application/json',
+            Authorization: `Bearer ${token}`,
+        },
+    });
+    if (!response.ok) {
+        const message = await parseErrorMessage(response);
+        throw new Error(message);
+    }
+    return (await response.json());
+}
+/**
+ * Join a conversation as an agent
+ */
+export async function joinConversation(token, conversationUuid, apiUrl) {
+    const API_BASE_URL = apiUrl || DEFAULT_API_BASE_URL;
+    const response = await fetch(`${API_BASE_URL}/api/conversations/${conversationUuid}/join`, {
+        method: 'POST',
+        headers: {
+            Accept: 'application/json',
+            Authorization: `Bearer ${token}`,
+        },
+    });
+    if (!response.ok) {
+        const message = await parseErrorMessage(response);
+        throw new Error(message);
+    }
+    return (await response.json());
+}
+/**
+ * Close a conversation as an agent
+ */
+export async function closeConversation(token, conversationUuid, apiUrl) {
+    const API_BASE_URL = apiUrl || DEFAULT_API_BASE_URL;
+    const response = await fetch(`${API_BASE_URL}/api/conversations/${conversationUuid}/close`, {
+        method: 'POST',
+        headers: {
+            Accept: 'application/json',
+            Authorization: `Bearer ${token}`,
+        },
+    });
+    if (!response.ok) {
+        const message = await parseErrorMessage(response);
+        throw new Error(message);
+    }
+    return (await response.json());
+}
+/**
+ * Send agent-authored message
+ */
+export async function sendAgentMessage(token, conversationUuid, content, apiUrl) {
+    const API_BASE_URL = apiUrl || DEFAULT_API_BASE_URL;
+    const response = await fetch(`${API_BASE_URL}/api/conversations/${conversationUuid}/messages/agent`, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            Accept: 'application/json',
+            Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify({ content }),
+    });
+    if (!response.ok) {
+        const message = await parseErrorMessage(response);
+        throw new Error(message);
+    }
+    return (await response.json());
+}

package/lib/api/index.d.ts

@@ -2,5 +2,6 @@
  * API Entry Point
  * Central export for all API services
  */
+export * from './auth.js';
 export * from './conversation.js';
 export * from './message.js';

package/lib/api/index.js

@@ -2,5 +2,6 @@
  * API Entry Point
  * Central export for all API services
  */
+export * from './auth.js';
 export * from './conversation.js';
 export * from './message.js';

package/lib/components/Widget.js

@@ -1,10 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { generateId, formatTimestamp } from '../utils/index.js';
 import { VezloFooter } from './ui/VezloFooter.js';
 import { createConversation, createUserMessage, generateAIResponse } from '../api/index.js';
+import { subscribeToConversations } from '../services/conversationRealtime.js';
+import { THEME } from '../config/theme.js';
 export function Widget({ config, isPlayground = false, onOpen, onClose, onMessage, onError, useShadowRoot = false, }) {
     // Use defaultOpen from config, fallback to isPlayground for backward compatibility
     const [isOpen, setIsOpen] = useState(config.defaultOpen ?? isPlayground);
@@ -20,6 +22,9 @@ export function Widget({ config, isPlayground = false, onOpen, onClose, onMessag
     const [messageFeedback, setMessageFeedback] = useState({});
     const [streamingMessage, setStreamingMessage] = useState('');
     const [conversationUuid, setConversationUuid] = useState(null);
+    const [companyUuid, setCompanyUuid] = useState(null);
+    const [agentJoined, setAgentJoined] = useState(false);
+    const [conversationClosed, setConversationClosed] = useState(false);
     const [isCreatingConversation, setIsCreatingConversation] = useState(false);
     const messagesEndRef = useRef(null);
     const hostRef = useRef(null);
@@ -66,7 +71,10 @@ export function Widget({ config, isPlayground = false, onOpen, onClose, onMessag
                         title: 'New Chat',
                     }, config.apiUrl);
                     setConversationUuid(conversation.uuid);
-                    console.log('[Widget] Conversation created:', conversation.uuid);
+                    setCompanyUuid(conversation.company_uuid);
+                    setAgentJoined(false);
+                    setConversationClosed(false);
+                    console.log('[Widget] Conversation created:', conversation.uuid, 'Company:', conversation.company_uuid);
                     // Add welcome message after conversation is created
                     const welcomeMsg = {
                         id: generateId(),
@@ -97,12 +105,45 @@ export function Widget({ config, isPlayground = false, onOpen, onClose, onMessag
         };
         initializeConversation();
     }, [isOpen, conversationUuid, isCreatingConversation, config.welcomeMessage, onMessage, onError]);
+    // Subscribe to realtime updates for agent messages
+    useEffect(() => {
+        if (!companyUuid || !conversationUuid) {
+            return;
+        }
+        const handleMessageCreated = (payload) => {
+            if (payload.conversation_uuid !== conversationUuid) {
+                return;
+            }
+            const status = payload.conversation_update?.status;
+            if (status === 'in_progress') {
+                setAgentJoined(true);
+                setConversationClosed(false);
+            }
+            else if (status === 'closed') {
+                setAgentJoined(false);
+                setConversationClosed(true);
+            }
+            if (payload.message.type !== 'system' && payload.message.type !== 'agent') {
+                return;
+            }
+            const newMessage = {
+                id: payload.message.uuid,
+                content: payload.message.content,
+                role: payload.message.type === 'agent' ? 'assistant' : 'system',
+                timestamp: new Date(payload.message.created_at),
+            };
+            setMessages(prev => [...prev, newMessage]);
+        };
+        const cleanup = subscribeToConversations(companyUuid, handleMessageCreated, () => { }, // No need to handle conversation:created in widget
+        config.supabaseUrl, config.supabaseAnonKey);
+        return cleanup;
+    }, [companyUuid, conversationUuid, config.supabaseUrl, config.supabaseAnonKey]);
     useEffect(() => {
         // Scroll to bottom when messages change or when streaming
         messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
     }, [messages, streamingMessage]);
     const handleSendMessage = async () => {
-        if (!input.trim() || isLoading || !conversationUuid)
+        if (!input.trim() || isLoading || !conversationUuid || conversationClosed)
             return;
         const userMessageContent = input;
         const userMessage = {
@@ -123,35 +164,42 @@ export function Widget({ config, isPlayground = false, onOpen, onClose, onMessag
             console.log('[Widget] User message created:', userMessageResponse.uuid);
             // Update the user message with the actual UUID from server
             setMessages((prev) => prev.map((msg) => msg.id === userMessage.id ? { ...msg, id: userMessageResponse.uuid } : msg));
-            // Step 2: Generate AI response
-            // Keep loading indicator visible until AI response is received
-            const aiResponse = await generateAIResponse(userMessageResponse.uuid, config.apiUrl);
-            console.log('[Widget] AI response received:', aiResponse.uuid);
-            // Hide loading indicator now that we have the response
-            setIsLoading(false);
-            // Stream the AI response character by character
-            const responseContent = aiResponse.content;
-            setStreamingMessage('');
-            let currentText = '';
-            const streamInterval = setInterval(() => {
-                if (currentText.length < responseContent.length) {
-                    currentText += responseContent[currentText.length];
-                    setStreamingMessage(currentText);
-                }
-                else {
-                    clearInterval(streamInterval);
-                    // Add the complete message to messages array
-                    const assistantMessage = {
-                        id: aiResponse.uuid,
-                        content: responseContent,
-                        role: 'assistant',
-                        timestamp: new Date(aiResponse.created_at),
-                    };
-                    setMessages((prev) => [...prev, assistantMessage]);
-                    onMessage?.(assistantMessage);
-                    setStreamingMessage('');
-                }
-            }, 15); // 15ms delay between characters for smooth streaming
+            // Step 2: Generate AI response (only if agent hasn't joined)
+            if (!agentJoined) {
+                // Keep loading indicator visible until AI response is received
+                const aiResponse = await generateAIResponse(userMessageResponse.uuid, config.apiUrl);
+                console.log('[Widget] AI response received:', aiResponse.uuid);
+                // Hide loading indicator now that we have the response
+                setIsLoading(false);
+                // Stream the AI response character by character
+                const responseContent = aiResponse.content;
+                setStreamingMessage('');
+                let currentText = '';
+                const streamInterval = setInterval(() => {
+                    if (currentText.length < responseContent.length) {
+                        currentText += responseContent[currentText.length];
+                        setStreamingMessage(currentText);
+                    }
+                    else {
+                        clearInterval(streamInterval);
+                        // Add the complete message to messages array
+                        const assistantMessage = {
+                            id: aiResponse.uuid,
+                            content: responseContent,
+                            role: 'assistant',
+                            timestamp: new Date(aiResponse.created_at),
+                        };
+                        setMessages((prev) => [...prev, assistantMessage]);
+                        onMessage?.(assistantMessage);
+                        setStreamingMessage('');
+                    }
+                }, 15); // 15ms delay between characters for smooth streaming
+            }
+            else {
+                // Agent has joined, don't generate AI response
+                setIsLoading(false);
+                console.log('[Widget] Skipping AI response - agent has joined');
+            }
         }
         catch (error) {
             console.error('[Widget] Error sending message:', error);
@@ -168,7 +216,22 @@ export function Widget({ config, isPlayground = false, onOpen, onClose, onMessag
             onMessage?.(errorMessage);
         }
     };
+    const handleStartNewChat = () => {
+        if (isCreatingConversation)
+            return;
+        setMessages([]);
+        setStreamingMessage('');
+        setIsLoading(false);
+        setMessageFeedback({});
+        setAgentJoined(false);
+        setConversationClosed(false);
+        setConversationUuid(null);
+        setCompanyUuid(null);
+        setInput('');
+    };
     const handleKeyPress = (e) => {
+        if (conversationClosed)
+            return;
         if (e.key === 'Enter' && !e.shiftKey) {
             e.preventDefault();
             handleSendMessage();
@@ -233,7 +296,7 @@ export function Widget({ config, isPlayground = false, onOpen, onClose, onMessag
                 } }), !isOpen && (_jsxs("div", { className: "relative animate-fadeIn", style: { pointerEvents: 'auto', width: 64, height: 64 }, children: [_jsx("div", { style: {
                             position: 'absolute',
                             inset: 0,
-                            backgroundColor: config.themeColor || '#059669',
+                            backgroundColor: config.themeColor || THEME.primary.hex,
                             borderRadius: 9999,
                             opacity: 0.2,
                             filter: 'blur(0px)'
@@ -243,7 +306,7 @@ export function Widget({ config, isPlayground = false, onOpen, onClose, onMessag
                             height: 64,
                             borderRadius: 9999,
                             color: '#fff',
-                            background: `linear-gradient(135deg, ${config.themeColor}, ${config.themeColor}dd)`,
+                            background: `linear-gradient(135deg, ${config.themeColor || THEME.primary.hex}, ${config.themeColor || THEME.primary.hex}dd)`,
                             boxShadow: '0 10px 25px rgba(0,0,0,0.20)',
                             display: 'flex',
                             alignItems: 'center',
@@ -259,18 +322,29 @@ export function Widget({ config, isPlayground = false, onOpen, onClose, onMessag
                     pointerEvents: 'auto',
                     width: (config.size && config.size.width) ? config.size.width : 420,
                     height: (config.size && config.size.height) ? config.size.height : 600
-                }, children: [_jsxs("div", { className: "text-white p-4 flex justify-between items-center relative overflow-hidden", style: { background: `linear-gradient(to right, ${config.themeColor}, ${config.themeColor}dd, ${config.themeColor}bb)`, color: '#fff' }, children: [_jsxs("div", { className: "absolute inset-0 opacity-10", children: [_jsx("div", { className: "absolute top-0 left-0 w-full h-full bg-gradient-to-br from-white/20 to-transparent" }), _jsx("div", { className: "absolute bottom-0 right-0 w-32 h-32 bg-white/10 rounded-full -translate-y-8 translate-x-8" })] }), _jsxs("div", { className: "flex items-center gap-3 relative z-10", children: [_jsx("div", { className: "w-10 h-10 bg-white/20 rounded-full flex items-center justify-center backdrop-blur-sm", children: _jsx(Bot, { className: "w-5 h-5 text-white" }) }), _jsxs("div", { children: [_jsx("h3", { className: "font-semibold text-lg", children: config.title }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("div", { className: "w-2 h-2 bg-green-400 rounded-full animate-pulse" }), _jsxs("p", { className: "text-xs text-emerald-100", children: ["Online \u2022 ", config.subtitle] })] })] })] }), _jsx("button", { onClick: handleCloseWidget, className: "hover:bg-white/20 rounded-lg p-2 transition-all duration-200 hover:scale-110 relative z-10", children: _jsx(X, { className: "w-5 h-5" }) })] }), _jsxs("div", { className: "flex-1 overflow-y-auto p-4 space-y-4 bg-gradient-to-b from-gray-50 to-gray-100", children: [messages.map((message, index) => (_jsxs("div", { className: `flex ${message.role === 'user' ? 'justify-end' : 'justify-start'} animate-fadeIn`, style: { animationDelay: `${index * 0.1}s` }, children: [message.role === 'assistant' && (_jsx("div", { className: "w-8 h-8 bg-emerald-100 rounded-full flex items-center justify-center flex-shrink-0 mt-1 mr-2", children: _jsx(Bot, { className: "w-4 h-4 text-emerald-600" }) })), _jsxs("div", { className: "flex flex-col max-w-[75%]", children: [_jsx("div", { className: `rounded-2xl px-4 py-3 shadow-sm transition-all duration-200 hover:shadow-md ${message.role === 'user'
-                                                    ? 'text-white'
-                                                    : 'bg-white text-gray-900 border border-gray-200'}`, style: {
-                                                    backgroundColor: message.role === 'user' ? config.themeColor : undefined,
-                                                    boxShadow: message.role === 'user'
-                                                        ? `0 4px 12px ${config.themeColor}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' && (_jsxs("div", { className: "flex items-center gap-1 ml-2", children: [_jsx("button", { onClick: () => handleFeedback(message.id, 'like'), className: `p-1 rounded transition-all duration-200 hover:scale-110 cursor-pointer ${messageFeedback[message.id] === 'like'
-                                                                    ? 'text-green-600'
-                                                                    : 'text-gray-400 hover:text-green-600'}`, children: _jsx(ThumbsUp, { className: `w-4 h-4 ${messageFeedback[message.id] === 'like' ? 'fill-current' : ''}` }) }), _jsx("button", { onClick: () => handleFeedback(message.id, 'dislike'), className: `p-1 rounded transition-all duration-200 hover:scale-110 cursor-pointer ${messageFeedback[message.id] === 'dislike'
-                                                                    ? 'text-red-600'
-                                                                    : 'text-gray-400 hover:text-red-600'}`, children: _jsx(ThumbsDown, { className: `w-4 h-4 ${messageFeedback[message.id] === 'dislike' ? 'fill-current' : ''}` }) })] }))] })] })] }, message.id))), streamingMessage && (_jsxs("div", { className: "flex justify-start animate-fadeIn", children: [_jsx("div", { className: "w-8 h-8 bg-emerald-100 rounded-full flex items-center justify-center flex-shrink-0 mt-1 mr-2", children: _jsx(Bot, { className: "w-4 h-4 text-emerald-600" }) }), _jsx("div", { className: "flex flex-col max-w-[75%]", children: _jsx("div", { className: "bg-white text-gray-900 border border-gray-200 rounded-2xl px-4 py-3 shadow-sm", children: _jsxs("p", { className: "text-sm whitespace-pre-wrap break-words leading-relaxed", style: { color: '#111827' }, children: [streamingMessage, _jsx("span", { style: { display: 'inline-block', animation: 'vezloCaretBlink 1s steps(1, end) infinite' }, children: "|" })] }) }) })] })), isLoading && (_jsx("div", { className: "flex justify-start animate-fadeIn", children: _jsx("div", { className: "bg-white border border-gray-200 rounded-2xl px-4 py-3 flex items-center gap-3 shadow-sm", children: _jsxs("div", { className: "flex gap-1", style: { display: 'flex', gap: '4px' }, children: [_jsx("span", { style: { width: 8, height: 8, borderRadius: 9999, backgroundColor: config.themeColor || '#10b981', display: 'inline-block', animation: 'vezloDotPulse 1s infinite ease-in-out', animationDelay: '0s' } }), _jsx("span", { style: { width: 8, height: 8, borderRadius: 9999, backgroundColor: config.themeColor || '#10b981', display: 'inline-block', animation: 'vezloDotPulse 1s infinite ease-in-out', animationDelay: '0.15s' } }), _jsx("span", { style: { width: 8, height: 8, borderRadius: 9999, backgroundColor: config.themeColor || '#10b981', display: 'inline-block', animation: 'vezloDotPulse 1s infinite ease-in-out', animationDelay: '0.3s' } })] }) }) })), _jsx("div", { ref: messagesEndRef })] }), _jsx("div", { className: "border-t border-gray-200 p-4 bg-white", children: _jsxs("div", { className: "flex gap-3", children: [_jsx("input", { type: "text", value: input, onChange: (e) => setInput(e.target.value), onKeyPress: handleKeyPress, placeholder: config.placeholder, disabled: isLoading, className: "flex-1 px-4 py-3 border border-gray-300 rounded-2xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed text-sm transition-all duration-200" }), _jsx("button", { onClick: handleSendMessage, disabled: !input.trim() || isLoading, className: "text-white px-4 py-3 rounded-2xl hover:from-blue-700 hover:to-blue-800 transition-all duration-200 disabled:bg-gray-300 disabled:cursor-not-allowed flex items-center justify-center shadow-lg hover:shadow-xl disabled:shadow-none transform hover:scale-105 disabled:scale-100", style: { background: `linear-gradient(to right, ${config.themeColor}, ${config.themeColor}dd)` }, children: _jsx(Send, { className: "w-4 h-4" }) })] }) }), _jsx("div", { className: "border-t border-gray-200 px-4 py-3 bg-gradient-to-r from-gray-50 to-gray-100", children: _jsx(VezloFooter, { size: "sm" }) })] }))] }));
+                }, children: [_jsxs("div", { className: "text-white p-4 flex justify-between items-center relative overflow-hidden", style: { background: `linear-gradient(to right, ${config.themeColor || THEME.primary.hex}, ${config.themeColor || THEME.primary.hex}dd, ${config.themeColor || THEME.primary.hex}bb)`, color: '#fff' }, children: [_jsxs("div", { className: "absolute inset-0 opacity-10", children: [_jsx("div", { className: "absolute top-0 left-0 w-full h-full bg-gradient-to-br from-white/20 to-transparent" }), _jsx("div", { className: "absolute bottom-0 right-0 w-32 h-32 bg-white/10 rounded-full -translate-y-8 translate-x-8" })] }), _jsxs("div", { className: "flex items-center gap-3 relative z-10", children: [_jsx("div", { className: "w-12 h-12 bg-white/20 rounded-2xl flex items-center justify-center backdrop-blur-sm flex-shrink-0", children: _jsx(Bot, { className: "w-6 h-6 text-white" }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("h3", { className: "font-semibold text-lg leading-tight truncate", children: config.title }), _jsxs("div", { className: "flex items-center gap-1.5 mt-0.5", children: [_jsx("div", { className: "w-2 h-2 bg-green-400 rounded-full animate-pulse flex-shrink-0" }), _jsxs("p", { className: "text-xs text-white/90 truncate", children: ["Online \u2022 ", config.subtitle] })] })] })] }), _jsx("button", { onClick: handleCloseWidget, className: "hover:bg-white/20 rounded-lg p-2 transition-all duration-200 hover:scale-110 relative z-10", children: _jsx(X, { className: "w-5 h-5" }) })] }), _jsxs("div", { className: "flex-1 overflow-y-auto p-4 space-y-4 bg-gradient-to-b from-gray-50 to-white", children: [messages.map((message, index) => (_jsx("div", { className: `flex ${message.role === 'system'
+                                    ? 'justify-center'
+                                    : message.role === 'user'
+                                        ? 'justify-end'
+                                        : 'justify-start'} animate-fadeIn`, style: { animationDelay: `${index * 0.1}s` }, children: message.role === 'system' ? (_jsx("div", { className: `text-xs px-4 py-2 rounded-full border ${message.content.toLowerCase().includes('closed')
+                                        ? 'bg-red-50 text-red-700 border-red-200'
+                                        : 'bg-blue-50 text-blue-700 border-blue-200'}`, children: _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("span", { children: message.content }), _jsx("span", { className: "text-xs opacity-70", children: formatTimestamp(message.timestamp) })] }) })) : (_jsxs(_Fragment, { children: [message.role === 'assistant' && (_jsx("div", { className: "w-8 h-8 bg-emerald-50 rounded-full flex items-center justify-center flex-shrink-0 mt-1 mr-2 border border-emerald-100", children: _jsx(Bot, { className: "w-4 h-4 text-emerald-600" }) })), _jsxs("div", { className: "flex flex-col max-w-[75%]", children: [_jsx("div", { className: `rounded-2xl px-4 py-3 shadow-sm transition-all duration-200 hover:shadow-md ${message.role === 'user'
+                                                        ? 'text-white'
+                                                        : 'bg-white text-gray-900 border border-gray-200'}`, style: {
+                                                        backgroundColor: message.role === 'user' ? (config.themeColor || THEME.primary.hex) : undefined,
+                                                        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' && (_jsxs("div", { className: "flex items-center gap-1 ml-2", children: [_jsx("button", { onClick: () => handleFeedback(message.id, 'like'), className: `p-1 rounded transition-all duration-200 hover:scale-110 cursor-pointer ${messageFeedback[message.id] === 'like'
+                                                                        ? 'text-green-600'
+                                                                        : 'text-gray-400 hover:text-green-600'}`, children: _jsx(ThumbsUp, { className: `w-4 h-4 ${messageFeedback[message.id] === 'like' ? 'fill-current' : ''}` }) }), _jsx("button", { onClick: () => handleFeedback(message.id, 'dislike'), className: `p-1 rounded transition-all duration-200 hover:scale-110 cursor-pointer ${messageFeedback[message.id] === 'dislike'
+                                                                        ? 'text-red-600'
+                                                                        : 'text-gray-400 hover:text-red-600'}`, children: _jsx(ThumbsDown, { className: `w-4 h-4 ${messageFeedback[message.id] === 'dislike' ? 'fill-current' : ''}` }) })] }))] })] })] })) }, message.id))), streamingMessage && (_jsxs("div", { className: "flex justify-start animate-fadeIn", children: [_jsx("div", { className: "w-8 h-8 bg-emerald-50 rounded-full flex items-center justify-center flex-shrink-0 mt-1 mr-2 border border-emerald-100", children: _jsx(Bot, { className: "w-4 h-4 text-emerald-600" }) }), _jsx("div", { className: "flex flex-col max-w-[75%]", children: _jsx("div", { className: "bg-white text-gray-900 border border-gray-200 rounded-2xl px-4 py-3 shadow-sm", children: _jsxs("p", { className: "text-sm whitespace-pre-wrap break-words leading-relaxed", style: { color: '#111827' }, children: [streamingMessage, _jsx("span", { style: { display: 'inline-block', animation: 'vezloCaretBlink 1s steps(1, end) infinite' }, children: "|" })] }) }) })] })), isLoading && (_jsx("div", { className: "flex justify-start animate-fadeIn", children: _jsx("div", { className: "bg-white border border-gray-200 rounded-2xl px-4 py-3 flex items-center gap-3 shadow-sm", children: _jsxs("div", { className: "flex gap-1", style: { display: 'flex', gap: '4px' }, children: [_jsx("span", { style: { width: 8, height: 8, borderRadius: 9999, backgroundColor: config.themeColor || THEME.primary.hex, display: 'inline-block', animation: 'vezloDotPulse 1s infinite ease-in-out', animationDelay: '0s' } }), _jsx("span", { style: { width: 8, height: 8, borderRadius: 9999, backgroundColor: config.themeColor || THEME.primary.hex, display: 'inline-block', animation: 'vezloDotPulse 1s infinite ease-in-out', animationDelay: '0.15s' } }), _jsx("span", { style: { width: 8, height: 8, borderRadius: 9999, backgroundColor: config.themeColor || THEME.primary.hex, display: 'inline-block', animation: 'vezloDotPulse 1s infinite ease-in-out', animationDelay: '0.3s' } })] }) }) })), _jsx("div", { ref: messagesEndRef })] }), conversationClosed && (_jsx("div", { className: "border-t border-gray-200 p-4 bg-white flex justify-center", children: _jsx("button", { onClick: handleStartNewChat, disabled: isCreatingConversation, className: "px-6 py-3 bg-gradient-to-r from-emerald-600 to-emerald-500 text-white text-sm font-medium rounded-lg hover:from-emerald-700 hover:to-emerald-600 transition-all duration-200 shadow-md hover:shadow-lg transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none cursor-pointer", children: isCreatingConversation ? 'Starting new chat...' : 'Start New Chat' }) })), !conversationClosed && (_jsx("div", { className: "border-t border-gray-200 p-4 bg-white", children: _jsxs("div", { className: "flex gap-3", children: [_jsx("input", { type: "text", value: input, onChange: (e) => setInput(e.target.value), onKeyPress: handleKeyPress, placeholder: conversationClosed
+                                        ? 'Conversation closed. Start a new chat to continue.'
+                                        : config.placeholder, disabled: isLoading || conversationClosed, className: "flex-1 px-4 py-3 border border-gray-300 rounded-2xl focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed text-sm transition-all duration-200 placeholder:text-gray-400" }), _jsx("button", { onClick: handleSendMessage, disabled: !input.trim() || isLoading || conversationClosed, className: "text-white px-4 py-3 rounded-2xl transition-all duration-200 disabled:bg-gray-300 disabled:cursor-not-allowed flex items-center justify-center shadow-lg hover:shadow-xl disabled:shadow-none transform hover:scale-105 disabled:scale-100 min-w-[48px]", style: {
+                                        background: `linear-gradient(to right, ${config.themeColor || THEME.primary.hex}, ${config.themeColor || THEME.primary.hex}dd)`,
+                                        opacity: (!input.trim() || isLoading || conversationClosed) ? 0.6 : 1
+                                    }, children: _jsx(Send, { className: "w-4 h-4" }) })] }) })), _jsx("div", { className: "border-t border-gray-200 px-4 bg-gradient-to-r from-gray-50 to-white", style: { minHeight: 52 }, children: _jsx(VezloFooter, { size: "sm" }) })] }))] }));
     if (useShadowRoot) {
         // Ensure host exists in DOM
         return (_jsx("div", { ref: hostRef, style: { all: 'initial' }, children: shadowReady && shadowMountRef.current ? createPortal(content, shadowMountRef.current) : null }));

package/lib/components/ui/VezloFooter.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { THEME } from '../../config/theme.js';
-export function VezloFooter({ size = 'md' }) {
-    const iconSize = size === 'sm' ? 'w-3 h-3' : 'w-4 h-4';
+import { Zap } from 'lucide-react';
+export function VezloFooter({ size = 'sm' }) {
     const textSize = size === 'sm' ? 'text-xs' : 'text-sm';
-    return (_jsxs("div", { className: "flex items-center justify-center gap-2", children: [_jsx("div", { className: `${iconSize} rounded-sm flex items-center justify-center`, style: { backgroundColor: THEME.primary.hex }, children: _jsx("span", { className: "text-white text-xs font-bold", children: "V" }) }), _jsxs("p", { className: `${textSize} text-gray-600`, children: ["Powered by ", _jsx("span", { className: "font-semibold", style: { color: THEME.primary.hex }, children: "Vezlo" })] })] }));
+    const logoHeight = size === 'sm' ? 48 : 68;
+    const iconSize = size === 'sm' ? 'w-4 h-4' : 'w-5 h-5';
+    const gapClass = 'gap-1';
+    return (_jsxs("div", { className: `flex items-center justify-center ${gapClass}`, children: [_jsx("span", { className: `${textSize} text-gray-600 font-medium`, children: "Powered by" }), _jsx(Zap, { className: `${iconSize} flex-shrink-0 -mr-1`, style: { color: '#f5c518' } }), _jsx("img", { src: "/assets/vezlo.png", alt: "Vezlo", style: { height: `${logoHeight}px`, width: 'auto' }, className: "object-contain" })] }));
 }

package/lib/config/theme.d.ts

@@ -6,6 +6,9 @@ export declare const THEME: {
     readonly primary: {
         readonly hex: "#059669";
         readonly tailwind: "emerald";
+        readonly darker: "#047857";
+        readonly lighter: "#10b981";
+        readonly lightest: "#d1fae5";
     };
     readonly colors: {
         readonly bg: "bg-emerald-600";
@@ -18,6 +21,34 @@ export declare const THEME: {
         readonly border: "border-emerald-600";
         readonly borderLight: "border-emerald-200";
     };
+    readonly typography: {
+        readonly fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif";
+        readonly heading: {
+            readonly weight: "600";
+            readonly size: {
+                readonly sm: "0.875rem";
+                readonly md: "1rem";
+                readonly lg: "1.125rem";
+                readonly xl: "1.25rem";
+            };
+        };
+        readonly body: {
+            readonly weight: "400";
+            readonly size: {
+                readonly sm: "0.75rem";
+                readonly md: "0.875rem";
+                readonly lg: "1rem";
+            };
+        };
+    };
+    readonly spacing: {
+        readonly xs: "0.5rem";
+        readonly sm: "0.75rem";
+        readonly md: "1rem";
+        readonly lg: "1.5rem";
+        readonly xl: "2rem";
+    };
 };
 export declare const getButtonGradient: (color?: string) => string;
 export declare const getHeaderGradient: (color?: string) => string;
+export declare const getHoverColor: () => "#047857";

package/lib/config/theme.js

@@ -3,10 +3,14 @@
  * Change these values to update colors across the entire application
  */
 export const THEME = {
-    // Primary brand color (emerald)
+    // Primary brand color (emerald/teal)
     primary: {
         hex: '#059669',
         tailwind: 'emerald',
+        // Color variants for different use cases
+        darker: '#047857', // For hover states
+        lighter: '#10b981', // For accents
+        lightest: '#d1fae5', // For backgrounds
     },
     // Tailwind color variants
     colors: {
@@ -20,6 +24,35 @@ export const THEME = {
         border: 'border-emerald-600',
         borderLight: 'border-emerald-200',
     },
+    // Typography
+    typography: {
+        fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+        heading: {
+            weight: '600',
+            size: {
+                sm: '0.875rem',
+                md: '1rem',
+                lg: '1.125rem',
+                xl: '1.25rem',
+            },
+        },
+        body: {
+            weight: '400',
+            size: {
+                sm: '0.75rem',
+                md: '0.875rem',
+                lg: '1rem',
+            },
+        },
+    },
+    // Spacing (for consistency)
+    spacing: {
+        xs: '0.5rem',
+        sm: '0.75rem',
+        md: '1rem',
+        lg: '1.5rem',
+        xl: '2rem',
+    },
 };
 // Helper function to get gradient for buttons
 export const getButtonGradient = (color = THEME.primary.hex) => {
@@ -29,3 +62,5 @@ export const getButtonGradient = (color = THEME.primary.hex) => {
 export const getHeaderGradient = (color = THEME.primary.hex) => {
     return `linear-gradient(to right, ${color}, ${color}dd, ${color}bb)`;
 };
+// Helper function to get darker shade for hover states
+export const getHoverColor = () => THEME.primary.darker;

package/lib/services/conversationRealtime.d.ts

@@ -0,0 +1,27 @@
+export interface MessageCreatedPayload {
+    conversation_uuid: string;
+    message: {
+        uuid: string;
+        content: string;
+        type: 'user' | 'assistant' | 'agent' | 'system';
+        author_id: number | null;
+        created_at: string;
+    };
+    conversation_update: {
+        message_count: number;
+        last_message_at: string;
+        joined_at?: string;
+        status?: string;
+        closed_at?: string;
+    };
+}
+export interface ConversationCreatedPayload {
+    conversation: {
+        uuid: string;
+        status: string;
+        message_count: number;
+        last_message_at: string | null;
+        created_at: string;
+    };
+}
+export declare function subscribeToConversations(companyUuid: string, onMessageCreated: (payload: MessageCreatedPayload) => void, onConversationCreated: (payload: ConversationCreatedPayload) => void, supabaseUrl?: string, supabaseAnonKey?: string): () => void;

package/lib/services/conversationRealtime.js

@@ -0,0 +1,68 @@
+import { createClient } from '@supabase/supabase-js';
+let client = null;
+let clientUrl = null;
+let clientKey = null;
+function getClient(supabaseUrl, supabaseAnonKey) {
+    if (!supabaseUrl || !supabaseAnonKey) {
+        console.error('[ConversationRealtime] Missing supabaseUrl or supabaseAnonKey');
+        return null;
+    }
+    // Recreate the client if credentials change
+    if (!client || clientUrl !== supabaseUrl || clientKey !== supabaseAnonKey) {
+        try {
+            client = createClient(supabaseUrl, supabaseAnonKey, {
+                realtime: { params: { eventsPerSecond: 2 } },
+            });
+            clientUrl = supabaseUrl;
+            clientKey = supabaseAnonKey;
+        }
+        catch (error) {
+            console.error('[ConversationRealtime] Failed to initialize client:', error instanceof Error ? error.message : 'Unknown error');
+            return null;
+        }
+    }
+    return client;
+}
+export function subscribeToConversations(companyUuid, onMessageCreated, onConversationCreated, supabaseUrl, supabaseAnonKey) {
+    try {
+        const realtimeClient = getClient(supabaseUrl, supabaseAnonKey);
+        if (!realtimeClient) {
+            console.error('[ConversationRealtime] Client not available');
+            return () => { };
+        }
+        const channelName = `company:${companyUuid}:conversations`;
+        const channel = realtimeClient.channel(channelName, {
+            config: {
+                broadcast: { self: true, ack: false }
+            }
+        });
+        channel.on('broadcast', { event: 'message:created' }, ({ payload }) => {
+            console.info('[Realtime] Received update:', payload);
+            onMessageCreated(payload);
+        });
+        channel.on('broadcast', { event: 'conversation:created' }, ({ payload }) => {
+            console.info('[Realtime] Received update:', payload);
+            onConversationCreated(payload);
+        });
+        channel.subscribe((status, err) => {
+            if (err) {
+                console.error('[Realtime] Subscription failed:', err.message || err);
+            }
+            else if (status === 'SUBSCRIBED') {
+                console.info(`[Realtime] Subscribed to channel: ${channelName}`);
+            }
+        });
+        return () => {
+            try {
+                channel.unsubscribe();
+            }
+            catch (error) {
+                console.error('[Realtime] Unsubscribe error:', error instanceof Error ? error.message : 'Unknown error');
+            }
+        };
+    }
+    catch (error) {
+        console.error('[Realtime] Failed to setup listener:', error instanceof Error ? error.message : 'Unknown error');
+        return () => { };
+    }
+}

package/lib/types/index.d.ts

@@ -14,11 +14,13 @@ export interface WidgetConfig {
     apiKey: string;
     themeColor?: string;
     defaultOpen?: boolean;
+    supabaseUrl?: string;
+    supabaseAnonKey?: string;
 }
 export interface ChatMessage {
     id: string;
     content: string;
-    role: 'user' | 'assistant';
+    role: 'user' | 'assistant' | 'system';
     timestamp: Date;
     sources?: ChatSource[];
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vezlo/assistant-chat",
-  "version": "1.1.1",
-  "description": "React component library for AI-powered chat widgets with RAG knowledge base integration and real-time streaming",
+  "version": "1.3.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",
   "module": "lib/index.js",
@@ -31,7 +31,9 @@
     "prepack": "npm run build"
   },
   "dependencies": {
+    "@supabase/supabase-js": "^2.84.0",
     "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
     "lucide-react": "^0.544.0",
     "react-router-dom": "^7.9.3",
     "tailwindcss": "^4.1.14"