@vezlo/assistant-chat 1.3.0 → 1.4.0

package/PACKAGE_README.md

@@ -90,7 +90,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
+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)**
 
@@ -85,7 +85,7 @@ 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

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

@@ -4,7 +4,8 @@ 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, }) {
@@ -20,6 +21,7 @@ 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);
@@ -30,6 +32,7 @@ export function Widget({ config, isPlayground = false, onOpen, onClose, onMessag
     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
@@ -105,6 +108,13 @@ 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) {
@@ -166,34 +176,76 @@ export function Widget({ config, isPlayground = false, onOpen, onClose, onMessag
             setMessages((prev) => prev.map((msg) => msg.id === userMessage.id ? { ...msg, id: userMessageResponse.uuid } : msg));
             // 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;
+                // Initialize streaming state
                 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,
+                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(aiResponse.created_at),
+                            timestamp: new Date(completionData.created_at),
                         };
-                        setMessages((prev) => [...prev, assistantMessage]);
-                        onMessage?.(assistantMessage);
+                        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('');
-                    }
-                }, 15); // 15ms delay between characters for smooth streaming
+                        // 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
@@ -237,11 +289,88 @@ export function Widget({ config, isPlayground = false, onOpen, onClose, onMessag
             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);
@@ -311,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)';
@@ -322,7 +452,7 @@ 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) => (_jsx("div", { className: `flex ${message.role === 'system'
+                }, 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'
@@ -335,11 +465,22 @@ export function Widget({ config, isPlayground = false, onOpen, onClose, onMessag
                                                         boxShadow: message.role === 'user'
                                                             ? `0 4px 12px ${(config.themeColor || THEME.primary.hex)}4D` // 4D is ~30% opacity
                                                             : '0 2px 8px rgba(0, 0, 0, 0.1)'
-                                                    }, children: _jsx("p", { className: "text-sm whitespace-pre-wrap break-words leading-relaxed", children: message.content }) }), _jsxs("div", { className: "flex items-center justify-between mt-1", children: [_jsx("p", { className: `text-xs ${message.role === 'user' ? 'text-emerald-100' : 'text-gray-500'}`, children: formatTimestamp(message.timestamp) }), message.role === 'assistant' && (_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
+                                                    }, 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)`,

package/lib/services/conversationRealtime.js

@@ -11,6 +11,11 @@ function getClient(supabaseUrl, supabaseAnonKey) {
     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;

package/lib/types/index.d.ts

@@ -23,6 +23,7 @@ export interface ChatMessage {
     role: 'user' | 'assistant' | 'system';
     timestamp: Date;
     sources?: ChatSource[];
+    _realUuid?: string;
 }
 export interface ChatSource {
     title: string;

package/package.json

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