@vezlo/assistant-chat 1.2.0 → 1.4.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
 
@@ -82,7 +90,8 @@ 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
+3. Stream AI responses in real-time using Server-Sent Events (SSE)
+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

@@ -10,7 +10,7 @@ A complete chat widget solution with both a React component library and standalo
 - **Reusable React Widget**: Install via `npm install @vezlo/assistant-chat`
 - **TypeScript Support**: Full type definitions included
 - **Customizable**: Themes, colors, positioning, and behavior
-- **Real-time Streaming**: Live AI responses with streaming support
+- **Real-time Streaming**: Live AI responses with Server-Sent Events (SSE) streaming support
 - **Style Isolation**: Shadow DOM support for conflict-free integration
 - **📖 [Complete Package Documentation](PACKAGE_README.md)**
 
@@ -74,6 +74,10 @@ npm run dev
 - **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
 
@@ -81,7 +85,8 @@ npm run dev
 - ✅ React component library
 - ✅ TypeScript support
 - ✅ Tailwind CSS styling
-- ✅ Real-time streaming
+- ✅ Real-time streaming (SSE-based backend streaming)
+- ✅ **Realtime updates** (agent handoff, live message sync)
 - ✅ Customizable themes
 - ✅ Shadow DOM support
 - ✅ API integration included
@@ -92,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
 
@@ -129,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

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/api/message.d.ts

@@ -20,11 +20,75 @@ export interface GenerateMessageResponse {
     status: 'completed' | 'pending' | 'error';
     created_at: string;
 }
+export interface StreamChunkEvent {
+    type: 'chunk';
+    content: string;
+    done?: boolean;
+}
+export interface StreamCompletionEvent {
+    type: 'completion';
+    uuid: string;
+    parent_message_uuid: string;
+    status: 'completed';
+    created_at: string;
+}
+export interface StreamErrorEvent {
+    type: 'error';
+    error: string;
+    message: string;
+}
+export type StreamEvent = StreamChunkEvent | StreamCompletionEvent | StreamErrorEvent;
+export interface StreamCallbacks {
+    onChunk?: (content: string, isDone?: boolean) => void;
+    onCompletion?: (data: StreamCompletionEvent) => void;
+    onError?: (error: StreamErrorEvent) => void;
+    onDone?: () => void;
+}
 /**
  * Create a user message in a conversation
  */
 export declare function createUserMessage(conversationUuid: string, request: CreateMessageRequest, apiUrl?: string): Promise<MessageResponse>;
 /**
- * Generate AI response for a user message
+ * Generate AI response for a user message (legacy - returns full response)
+ * @deprecated Use streamAIResponse for better performance
  */
 export declare function generateAIResponse(userMessageUuid: string, apiUrl?: string): Promise<GenerateMessageResponse>;
+/**
+ * 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>;
+/**
+ * Feedback API
+ */
+export interface SubmitFeedbackRequest {
+    message_uuid: string;
+    rating: 'positive' | 'negative';
+    category?: string;
+    comment?: string;
+    suggested_improvement?: string;
+}
+export interface SubmitFeedbackResponse {
+    success: boolean;
+    feedback: {
+        uuid: string;
+        message_uuid: string;
+        rating: 'positive' | 'negative';
+        category?: string;
+        comment?: string;
+        suggested_improvement?: string;
+        created_at: string;
+    };
+}
+export interface DeleteFeedbackResponse {
+    success: boolean;
+    message: string;
+}
+/**
+ * Submit feedback for a message (create or update) - Public API
+ */
+export declare function submitFeedback(request: SubmitFeedbackRequest, apiUrl?: string): Promise<SubmitFeedbackResponse>;
+/**
+ * Delete/undo feedback for a message - Public API
+ */
+export declare function deleteFeedback(feedbackUuid: string, apiUrl?: string): Promise<DeleteFeedbackResponse>;

package/lib/api/message.js

@@ -30,7 +30,8 @@ export async function createUserMessage(conversationUuid, request, apiUrl) {
     }
 }
 /**
- * Generate AI response for a user message
+ * Generate AI response for a user message (legacy - returns full response)
+ * @deprecated Use streamAIResponse for better performance
  */
 export async function generateAIResponse(userMessageUuid, apiUrl) {
     const API_BASE_URL = apiUrl || DEFAULT_API_BASE_URL;
@@ -53,3 +54,178 @@ export async function generateAIResponse(userMessageUuid, apiUrl) {
         throw error;
     }
 }
+/**
+ * Stream AI response using Server-Sent Events (SSE)
+ * This is the recommended approach for real-time streaming
+ */
+export async function streamAIResponse(userMessageUuid, callbacks, apiUrl) {
+    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',
+            },
+        });
+        if (!response.ok) {
+            // Try to parse error as JSON first
+            try {
+                const errorData = await response.json();
+                callbacks.onError?.({
+                    type: 'error',
+                    error: 'Failed to generate response',
+                    message: errorData.message || `HTTP ${response.status}`,
+                });
+            }
+            catch {
+                // If not JSON, use status text
+                callbacks.onError?.({
+                    type: 'error',
+                    error: 'Failed to generate response',
+                    message: `HTTP ${response.status}: ${response.statusText}`,
+                });
+            }
+            return;
+        }
+        if (!response.body) {
+            callbacks.onError?.({
+                type: 'error',
+                error: 'No response body',
+                message: 'Server did not return a response stream',
+            });
+            return;
+        }
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder();
+        let buffer = '';
+        try {
+            while (true) {
+                const { done, value } = await reader.read();
+                if (done) {
+                    break;
+                }
+                // Decode chunk and add to buffer
+                buffer += decoder.decode(value, { stream: true });
+                // Process complete SSE messages (lines ending with \n\n)
+                const lines = buffer.split('\n\n');
+                buffer = lines.pop() || ''; // Keep incomplete line in buffer
+                for (const line of lines) {
+                    if (line.startsWith('data: ')) {
+                        const data = line.slice(6); // Remove 'data: ' prefix
+                        // Check for [DONE] marker
+                        if (data.trim() === '[DONE]') {
+                            callbacks.onDone?.();
+                            return;
+                        }
+                        try {
+                            const event = JSON.parse(data);
+                            switch (event.type) {
+                                case 'chunk':
+                                    callbacks.onChunk?.(event.content, event.done);
+                                    break;
+                                case 'completion':
+                                    callbacks.onCompletion?.(event);
+                                    callbacks.onDone?.();
+                                    return;
+                                case 'error':
+                                    callbacks.onError?.(event);
+                                    return;
+                            }
+                        }
+                        catch (parseError) {
+                            console.warn('[Message API] Failed to parse SSE event:', data, parseError);
+                            // Continue processing other events
+                        }
+                    }
+                }
+            }
+            // Process any remaining buffer
+            if (buffer.trim()) {
+                const lines = buffer.split('\n\n');
+                for (const line of lines) {
+                    if (line.startsWith('data: ')) {
+                        const data = line.slice(6);
+                        if (data.trim() === '[DONE]') {
+                            callbacks.onDone?.();
+                            return;
+                        }
+                        try {
+                            const event = JSON.parse(data);
+                            if (event.type === 'completion') {
+                                callbacks.onCompletion?.(event);
+                            }
+                            else if (event.type === 'error') {
+                                callbacks.onError?.(event);
+                            }
+                        }
+                        catch (parseError) {
+                            console.warn('[Message API] Failed to parse final SSE event:', parseError);
+                        }
+                    }
+                }
+            }
+            callbacks.onDone?.();
+        }
+        finally {
+            reader.releaseLock();
+        }
+    }
+    catch (error) {
+        console.error('[Message API] Error streaming AI response:', error);
+        callbacks.onError?.({
+            type: 'error',
+            error: 'Stream error',
+            message: error instanceof Error ? error.message : 'Unknown error occurred',
+        });
+    }
+}
+/**
+ * Submit feedback for a message (create or update) - Public API
+ */
+export async function submitFeedback(request, apiUrl) {
+    const API_BASE_URL = apiUrl || DEFAULT_API_BASE_URL;
+    try {
+        const response = await fetch(`${API_BASE_URL}/api/feedback`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Accept': 'application/json',
+            },
+            body: JSON.stringify(request),
+        });
+        if (!response.ok) {
+            const errorData = await response.json().catch(() => ({}));
+            throw new Error(errorData.message || `Failed to submit feedback: ${response.status}`);
+        }
+        const data = await response.json();
+        return data;
+    }
+    catch (error) {
+        console.error('[Message API] Error submitting feedback:', error);
+        throw error;
+    }
+}
+/**
+ * Delete/undo feedback for a message - Public API
+ */
+export async function deleteFeedback(feedbackUuid, apiUrl) {
+    const API_BASE_URL = apiUrl || DEFAULT_API_BASE_URL;
+    try {
+        const response = await fetch(`${API_BASE_URL}/api/feedback/${feedbackUuid}`, {
+            method: 'DELETE',
+            headers: {
+                'Accept': 'application/json',
+            },
+        });
+        if (!response.ok) {
+            const errorData = await response.json().catch(() => ({}));
+            throw new Error(errorData.message || `Failed to delete feedback: ${response.status}`);
+        }
+        const data = await response.json();
+        return data;
+    }
+    catch (error) {
+        console.error('[Message API] Error deleting feedback:', error);
+        throw error;
+    }
+}

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 { createConversation, createUserMessage, streamAIResponse } from '../api/index.js';
+import { submitFeedback, deleteFeedback } from '../api/message.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
@@ -19,13 +21,18 @@ export function Widget({ config, isPlayground = false, onOpen, onClose, onMessag
     const [input, setInput] = useState('');
     const [isLoading, setIsLoading] = useState(false);
     const [messageFeedback, setMessageFeedback] = useState({});
+    const [messageFeedbackUuids, setMessageFeedbackUuids] = 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);
     const shadowRef = useRef(null);
     const shadowMountRef = useRef(null);
+    const inputRef = useRef(null);
     const [shadowReady, setShadowReady] = useState(false);
     useEffect(() => {
         // No global scroll locking for embedded component usage
@@ -67,7 +74,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(),
@@ -98,12 +108,52 @@ export function Widget({ config, isPlayground = false, onOpen, onClose, onMessag
         };
         initializeConversation();
     }, [isOpen, conversationUuid, isCreatingConversation, config.welcomeMessage, onMessage, onError]);
+    // Auto-focus input when it becomes enabled (isLoading becomes false)
+    useEffect(() => {
+        if (isOpen && !isLoading && !conversationClosed && inputRef.current) {
+            // Focus immediately when input becomes enabled
+            inputRef.current.focus();
+        }
+    }, [isLoading, isOpen, conversationClosed]);
+    // 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 = {
@@ -124,35 +174,84 @@ 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) {
+                // Initialize streaming state
+                setStreamingMessage('');
+                let accumulatedContent = '';
+                let hasReceivedChunks = false;
+                let streamingComplete = false;
+                const tempMessageId = `streaming-${userMessageResponse.uuid}`;
+                // Stream AI response using SSE
+                await streamAIResponse(userMessageResponse.uuid, {
+                    onChunk: (chunk, isDone) => {
+                        // Hide loading indicator on first chunk (streaming started)
+                        if (!hasReceivedChunks) {
+                            hasReceivedChunks = true;
+                            setIsLoading(false);
+                        }
+                        // Accumulate content and update streaming message
+                        if (chunk) {
+                            accumulatedContent += chunk;
+                            setStreamingMessage(accumulatedContent);
+                        }
+                        // If this is the final chunk (done=true), convert to message immediately
+                        if (isDone && !streamingComplete) {
+                            streamingComplete = true;
+                            // Add message to array with temp ID (shows timestamp/icons)
+                            const tempMessage = {
+                                id: tempMessageId,
+                                content: accumulatedContent,
+                                role: 'assistant',
+                                timestamp: new Date(),
+                            };
+                            setStreamingMessage('');
+                            setMessages((prev) => [...prev, tempMessage]);
+                        }
+                    },
+                    onCompletion: (completionData) => {
+                        // Store real UUID in _realUuid field (for feedback) without changing id (no jerk)
+                        setMessages((prev) => prev.map((msg) => msg.id === tempMessageId
+                            ? { ...msg, _realUuid: completionData.uuid }
+                            : msg));
+                        setIsLoading(false);
+                        const finalMessage = {
+                            id: completionData.uuid,
+                            content: accumulatedContent,
+                            role: 'assistant',
+                            timestamp: new Date(completionData.created_at),
+                        };
+                        onMessage?.(finalMessage);
+                        // Log completion (no content in event anymore)
+                        console.log('[Widget] AI response completed:', {
+                            uuid: completionData.uuid,
+                            parent_message_uuid: completionData.parent_message_uuid,
+                            status: completionData.status,
+                            created_at: completionData.created_at,
+                            accumulated_content_length: accumulatedContent.length
+                        });
+                    },
+                    onError: (errorData) => {
+                        // Hide loading indicator
+                        setIsLoading(false);
+                        // Clear streaming message
+                        setStreamingMessage('');
+                        // Show error to user
+                        const errorMessage = errorData.message || errorData.error || 'Failed to generate response';
+                        onError?.(errorMessage);
+                        console.error('[Widget] AI response error:', errorData);
+                    },
+                    onDone: () => {
+                        // Ensure loading is hidden
+                        setIsLoading(false);
+                    },
+                }, config.apiUrl);
+            }
+            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);
@@ -169,17 +268,109 @@ 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();
         }
     };
-    const handleFeedback = (messageId, type) => {
-        setMessageFeedback(prev => ({
-            ...prev,
-            [messageId]: prev[messageId] === type ? null : type
-        }));
+    const handleFeedback = async (messageId, type) => {
+        // Find the message to get the real UUID (might be stored in _realUuid)
+        const message = messages.find(m => m.id === messageId);
+        // Safety check: Don't proceed if message has temp ID and no real UUID yet
+        if (!message?._realUuid && messageId.startsWith('streaming-')) {
+            console.warn('[Widget] Cannot submit feedback: Message UUID not yet available');
+            return;
+        }
+        const realUuid = message?._realUuid || messageId; // Use real UUID if available, fallback to ID
+        const currentFeedback = messageFeedback[messageId];
+        const feedbackUuid = messageFeedbackUuids[messageId];
+        // Map UI types to backend rating values
+        const rating = type === 'like' ? 'positive' : 'negative';
+        // Optimistic UI update - update immediately for better UX
+        const previousFeedback = currentFeedback;
+        const previousUuid = feedbackUuid;
+        // If clicking the same rating again, delete (undo)
+        if (currentFeedback === type && feedbackUuid) {
+            // Optimistically update UI (remove feedback)
+            setMessageFeedback(prev => ({
+                ...prev,
+                [messageId]: null
+            }));
+            setMessageFeedbackUuids(prev => {
+                const updated = { ...prev };
+                delete updated[messageId];
+                return updated;
+            });
+            // Call API in background
+            try {
+                await deleteFeedback(feedbackUuid, config.apiUrl);
+            }
+            catch (error) {
+                console.error('[Widget] Error deleting feedback:', error);
+                // Revert UI state on error
+                setMessageFeedback(prev => ({
+                    ...prev,
+                    [messageId]: previousFeedback
+                }));
+                setMessageFeedbackUuids(prev => ({
+                    ...prev,
+                    [messageId]: previousUuid
+                }));
+            }
+        }
+        else {
+            // Optimistically update UI (add/change feedback)
+            setMessageFeedback(prev => ({
+                ...prev,
+                [messageId]: type
+            }));
+            // Call API in background
+            try {
+                const response = await submitFeedback({
+                    message_uuid: realUuid,
+                    rating,
+                }, config.apiUrl);
+                // Update with real feedback UUID from server
+                setMessageFeedbackUuids(prev => ({
+                    ...prev,
+                    [messageId]: response.feedback.uuid
+                }));
+            }
+            catch (error) {
+                console.error('[Widget] Error submitting feedback:', error);
+                // Revert UI state on error
+                setMessageFeedback(prev => ({
+                    ...prev,
+                    [messageId]: previousFeedback
+                }));
+                setMessageFeedbackUuids(prev => {
+                    if (previousUuid) {
+                        return { ...prev, [messageId]: previousUuid };
+                    }
+                    else {
+                        const updated = { ...prev };
+                        delete updated[messageId];
+                        return updated;
+                    }
+                });
+            }
+        }
     };
     const handleOpenWidget = () => {
         setIsOpen(true);
@@ -249,7 +440,8 @@ export function Widget({ config, isPlayground = false, onOpen, onClose, onMessag
                             display: 'flex',
                             alignItems: 'center',
                             justifyContent: 'center',
-                            transition: 'transform 0.2s ease, box-shadow 0.2s ease'
+                            transition: 'transform 0.2s ease, box-shadow 0.2s ease',
+                            cursor: 'pointer'
                         }, onMouseEnter: (e) => {
                             e.currentTarget.style.transform = 'scale(1.05)';
                             e.currentTarget.style.boxShadow = '0 14px 30px rgba(0,0,0,0.22)';
@@ -260,21 +452,40 @@ 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 || 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) => (_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-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 })] }), _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-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, 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: {
+                }, 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 cursor-pointer", 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' && (() => {
+                                                            // Check if message has real UUID (not temp ID)
+                                                            // Disable if: message has temp ID (starts with 'streaming-') AND no _realUuid yet
+                                                            const isTempId = message.id?.startsWith('streaming-') || false;
+                                                            const hasRealUuid = !!message._realUuid;
+                                                            const isDisabled = isTempId && !hasRealUuid;
+                                                            return (_jsxs("div", { className: "flex items-center gap-1 ml-2", children: [_jsx("button", { onClick: () => !isDisabled && handleFeedback(message.id, 'like'), disabled: isDisabled, className: `p-1 rounded transition-all duration-200 ${isDisabled
+                                                                            ? 'opacity-40 cursor-not-allowed'
+                                                                            : 'hover:scale-110 cursor-pointer'} ${messageFeedback[message.id] === 'like'
+                                                                            ? 'text-green-600'
+                                                                            : 'text-gray-400 hover:text-green-600'}`, title: isDisabled ? 'Waiting for message to be saved...' : 'Like this response', children: _jsx(ThumbsUp, { className: `w-4 h-4 ${messageFeedback[message.id] === 'like' ? 'fill-current' : ''}` }) }), _jsx("button", { onClick: () => !isDisabled && handleFeedback(message.id, 'dislike'), disabled: isDisabled, className: `p-1 rounded transition-all duration-200 ${isDisabled
+                                                                            ? 'opacity-40 cursor-not-allowed'
+                                                                            : 'hover:scale-110 cursor-pointer'} ${messageFeedback[message.id] === 'dislike'
+                                                                            ? 'text-red-600'
+                                                                            : 'text-gray-400 hover:text-red-600'}`, title: isDisabled ? 'Waiting for message to be saved...' : 'Dislike this response', 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", { ref: inputRef, 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) ? 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" }) })] }))] }));
+                                        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/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,73 @@
+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, {
+                auth: {
+                    persistSession: false, // Prevent multiple auth instances warning
+                    autoRefreshToken: false,
+                    detectSessionInUrl: false
+                },
+                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,13 +14,16 @@ 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[];
+    _realUuid?: string;
 }
 export interface ChatSource {
     title: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vezlo/assistant-chat",
-  "version": "1.2.0",
-  "description": "React component library for AI-powered chat widgets with RAG knowledge base integration and real-time streaming",
+  "version": "1.4.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"