@blumessage/react-chat 1.8.1 → 1.8.3

package/dist/BlumessageChat.js

@@ -1,1150 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BlumessageChat = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importStar(require("react"));
-const react_markdown_1 = __importDefault(require("react-markdown"));
-const remark_gfm_1 = __importDefault(require("remark-gfm"));
-const LucideIcons = __importStar(require("lucide-react"));
-require("./styles.css");
-// Custom CSS animations that don't depend on Tailwind
-const customStyles = `
-  @keyframes bounce {
-    0%, 100% {
-      transform: translateY(0);
-    }
-    50% {
-      transform: translateY(-25%);
-    }
-  }
-  
-  @keyframes spin {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-  
-  @keyframes helpBubbleIn {
-    0% {
-      transform: translateY(20px) scale(0.8);
-      opacity: 0;
-    }
-    100% {
-      transform: translateY(0) scale(1);
-      opacity: 1;
-    }
-  }
-  
-  @keyframes helpBubbleOut {
-    0% {
-      transform: translateY(0) scale(1);
-      opacity: 1;
-    }
-    100% {
-      transform: translateY(20px) scale(0.8);
-      opacity: 0;
-    }
-  }
-  
-  @keyframes helpBubbleInTop {
-    0% {
-      transform: translateY(-20px) scale(0.8);
-      opacity: 0;
-    }
-    100% {
-      transform: translateY(0) scale(1);
-      opacity: 1;
-    }
-  }
-  
-  @keyframes helpBubbleOutTop {
-    0% {
-      transform: translateY(0) scale(1);
-      opacity: 1;
-    }
-    100% {
-      transform: translateY(-20px) scale(0.8);
-      opacity: 0;
-    }
-  }
-  
-  .blumessage-animate-bounce {
-    animation: bounce 1s infinite;
-  }
-  
-  .blumessage-animate-spin {
-    animation: spin 1s linear infinite;
-  }
-  
-  .blumessage-help-bubble-in {
-    animation: helpBubbleIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
-  }
-  
-  .blumessage-help-bubble-out {
-    animation: helpBubbleOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
-  }
-  
-  .blumessage-help-bubble-in-top {
-    animation: helpBubbleInTop 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
-  }
-  
-  .blumessage-help-bubble-out-top {
-    animation: helpBubbleOutTop 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
-  }
-  
-  /* Mobile-specific styles */
-  @media (max-width: 768px) {
-    .blumessage-mobile-fullscreen {
-      position: fixed !important;
-      top: 0 !important;
-      left: 0 !important;
-      right: 0 !important;
-      bottom: 0 !important;
-      width: 100% !important;
-      height: 100% !important;
-      max-width: 100% !important;
-      max-height: 100% !important;
-      border-radius: 0 !important;
-      z-index: 9999 !important;
-    }
-    
-    .blumessage-mobile-chat {
-      border-radius: 16px !important;
-    }
-    
-    .blumessage-mobile-button {
-      position: fixed !important;
-      bottom: 20px !important;
-      right: 20px !important;
-      left: auto !important;
-      top: auto !important;
-    }
-  }
-  
-  @media (max-width: 480px) {
-    .blumessage-mobile-fullscreen {
-      border-radius: 0 !important;
-    }
-    
-    .blumessage-mobile-chat {
-      border-radius: 12px !important;
-    }
-    
-    .blumessage-mobile-button {
-      bottom: 16px !important;
-      right: 16px !important;
-    }
-  }
-`;
-// Inject custom styles
-if (typeof document !== 'undefined' && !document.getElementById('blumessage-styles')) {
-    const style = document.createElement('style');
-    style.id = 'blumessage-styles';
-    style.textContent = customStyles;
-    document.head.appendChild(style);
-}
-// Session storage key for conversation token
-const CONVERSATION_TOKEN_KEY = 'blumessage_conversation_token';
-// Utility functions for storage
-const saveConversationToken = (token, persistent = false) => {
-    try {
-        const storage = persistent ? localStorage : sessionStorage;
-        storage.setItem(CONVERSATION_TOKEN_KEY, token);
-    }
-    catch (error) {
-        // Silent fail - storage might not be available
-    }
-};
-const getStoredConversationToken = (persistent = false) => {
-    try {
-        const storage = persistent ? localStorage : sessionStorage;
-        return storage.getItem(CONVERSATION_TOKEN_KEY);
-    }
-    catch (error) {
-        // Silent fail - storage might not be available
-        return null;
-    }
-};
-const clearStoredConversationToken = (persistent = false) => {
-    try {
-        const storage = persistent ? localStorage : sessionStorage;
-        storage.removeItem(CONVERSATION_TOKEN_KEY);
-    }
-    catch (error) {
-        // Silent fail - storage might not be available
-    }
-};
-// Custom hook for mobile detection
-const useIsMobile = () => {
-    const [isMobile, setIsMobile] = (0, react_1.useState)(false);
-    (0, react_1.useEffect)(() => {
-        const checkIsMobile = () => {
-            const userAgent = navigator.userAgent || navigator.vendor || window.opera;
-            const mobileRegex = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i;
-            const isMobileDevice = mobileRegex.test(userAgent.toLowerCase());
-            const isSmallScreen = window.innerWidth <= 768;
-            setIsMobile(isMobileDevice || isSmallScreen);
-        };
-        checkIsMobile();
-        window.addEventListener('resize', checkIsMobile);
-        return () => window.removeEventListener('resize', checkIsMobile);
-    }, []);
-    return isMobile;
-};
-exports.BlumessageChat = (0, react_1.forwardRef)(({ apiKey, placeholder = "Type your message...", theme = 'light', width, height, size = 'medium', name = "Blumessage AI", subtitle = "Online • Instant responses", initialMessages = [], onUserMessage, onAssistantMessage, token: initialToken, onTokenChange, onChatWidgetOpen, onChatWidgetClosed, onError, persistent = false, showTimestamps = false, typingText = "Agent is typing...", emptyStateText = "Start a conversation!", markdown = true, disableAutoScroll = false, 
-// Floating button props
-floating = true, buttonText = "Chat with us", buttonPosition = 'bottom-right', buttonStyle, defaultOpen = false, maximizeToggleButton = true, fullScreen = false, icon = 'message-circle', 
-// Styling props
-primaryColor = "linear-gradient(to right, #3b82f6,rgb(8, 98, 242))", 
-// Help bubble props
-showHelpBubble = true, helpBubbleMessage = "Have a question? We're here to help!", helpBubbleIcon = 'message-circle-question-mark', helpBubbleIconName, helpBubbleShowAfter = 1, // 1 second
-helpBubbleHideAfter = 5, // 5 seconds
-helpBubbleBackgroundColor = "#000000", context, }, ref) => {
-    const [isInitialized, setIsInitialized] = (0, react_1.useState)(false);
-    const [error, setError] = (0, react_1.useState)(null);
-    const [messages, setMessages] = (0, react_1.useState)(initialMessages);
-    const [inputValue, setInputValue] = (0, react_1.useState)('');
-    const [token, setToken] = (0, react_1.useState)(initialToken || getStoredConversationToken(persistent));
-    const [isOpen, setIsOpen] = (0, react_1.useState)(defaultOpen);
-    const [isAnimating, setIsAnimating] = (0, react_1.useState)(false);
-    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
-    const [isMaximized, setIsMaximized] = (0, react_1.useState)(false);
-    const messagesEndRef = (0, react_1.useRef)(null);
-    const isInitialLoad = (0, react_1.useRef)(true);
-    const [isHelpBubbleVisible, setIsHelpBubbleVisible] = (0, react_1.useState)(false);
-    const [isHelpBubbleAnimating, setIsHelpBubbleAnimating] = (0, react_1.useState)(false);
-    // Mobile detection
-    const isMobile = useIsMobile();
-    // Help bubble effect
-    (0, react_1.useEffect)(() => {
-        if (!floating || !showHelpBubble)
-            return;
-        const showTimer = setTimeout(() => {
-            setIsHelpBubbleAnimating(true);
-            setIsHelpBubbleVisible(true);
-            // Remove animating state after animation completes
-            setTimeout(() => {
-                setIsHelpBubbleAnimating(false);
-            }, 300);
-            // Hide the bubble after the specified time if hideAfter > 0
-            if (helpBubbleHideAfter > 0) {
-                const hideTimer = setTimeout(() => {
-                    setIsHelpBubbleAnimating(true);
-                    setIsHelpBubbleVisible(false);
-                    // Remove animating state after animation completes
-                    setTimeout(() => {
-                        setIsHelpBubbleAnimating(false);
-                    }, 300);
-                }, helpBubbleHideAfter * 1000);
-                return () => clearTimeout(hideTimer);
-            }
-        }, helpBubbleShowAfter * 1000);
-        return () => clearTimeout(showTimer);
-    }, [floating, showHelpBubble, helpBubbleShowAfter, helpBubbleHideAfter]);
-    // Helper function to format timestamp
-    const formatTimestamp = (timestamp) => {
-        const date = new Date(timestamp);
-        const now = new Date();
-        // Check if the message is from today
-        const isToday = date.toDateString() === now.toDateString();
-        if (isToday) {
-            // If today: show time only in user's locale format (14:00 or 2:00 PM)
-            return date.toLocaleTimeString(undefined, {
-                hour: '2-digit',
-                minute: '2-digit',
-                hour12: undefined // Let browser decide based on user's locale
-            });
-        }
-        else {
-            // If more than a day: show "17 July, 13:00" format in user's locale
-            const dateStr = date.toLocaleDateString(undefined, {
-                day: 'numeric',
-                month: 'long'
-            });
-            const timeStr = date.toLocaleTimeString(undefined, {
-                hour: '2-digit',
-                minute: '2-digit',
-                hour12: undefined // Let browser decide based on user's locale
-            });
-            return `${dateStr}, ${timeStr}`;
-        }
-    };
-    // Helper function to get dimensions based on size
-    const getDimensions = () => {
-        // If custom width/height are provided, use them
-        if (width && height) {
-            return { width, height };
-        }
-        // Mobile-first responsive dimensions
-        if (isMobile) {
-            // On mobile, use fullscreen or near-fullscreen dimensions
-            if (floating) {
-                return {
-                    width: 'calc(100vw - 32px)',
-                    height: 'calc(100vh - 100px)'
-                };
-            }
-            else {
-                return {
-                    width: '100%',
-                    height: '500px'
-                };
-            }
-        }
-        // Desktop dimensions based on size
-        let dimensions;
-        switch (size) {
-            case 'small':
-                dimensions = { width: '320px', height: '400px' };
-                break;
-            case 'large':
-                dimensions = { width: '680px', height: '800px' };
-                break;
-            case 'medium':
-            default:
-                dimensions = { width: '600px', height: '600px' };
-        }
-        return dimensions;
-    };
-    const { width: actualWidth, height: actualHeight } = getDimensions();
-    // Function to clear conversation and start fresh
-    const clearConversation = () => {
-        updateConversationToken(null);
-        setMessages([]);
-    };
-    // Function to update conversation token and notify parent
-    const updateConversationToken = (newToken) => {
-        setToken(newToken);
-        if (newToken) {
-            saveConversationToken(newToken, persistent);
-        }
-        else {
-            clearStoredConversationToken(persistent);
-        }
-        if (onTokenChange) {
-            onTokenChange(newToken);
-        }
-    };
-    // Function to fetch conversation history
-    const fetchConversationHistory = async (convToken) => {
-        try {
-            const response = await fetch(`https://api.blumessage.com/api/v1/conversations/session/${convToken}`, {
-                method: 'GET',
-                headers: {
-                    'Authorization': `Bearer ${apiKey}`,
-                },
-            });
-            if (response.ok) {
-                const sessionData = await response.json();
-                return sessionData.messages || [];
-            }
-            else {
-                // Clear invalid conversation ID from storage
-                updateConversationToken(null);
-                if (onError) {
-                    onError(`Failed to fetch conversation history: ${response.status} ${response.statusText}`, "conversation_history");
-                }
-                return [];
-            }
-        }
-        catch (error) {
-            // Clear invalid conversation ID from storage
-            updateConversationToken(null);
-            if (onError) {
-                onError(`Error fetching conversation history: ${error}`, "conversation_history");
-            }
-            return [];
-        }
-    };
-    (0, react_1.useEffect)(() => {
-        if (!apiKey) {
-            const errorMessage = "API key is required";
-            setError(errorMessage);
-            if (onError) {
-                onError(errorMessage, "missing_api_key");
-            }
-            return;
-        }
-        // Validate API key with Blumessage API
-        const validateApiKey = async () => {
-            try {
-                setIsInitialized(false);
-                setError(null);
-                const response = await fetch('https://api.blumessage.com/api/v1/api-keys/validate', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify({ apiKey }),
-                });
-                if (response.ok) {
-                    setIsInitialized(true);
-                    setError(null);
-                }
-                else {
-                    const errorMessage = "Unable to connect - invalid API key";
-                    setError(errorMessage);
-                    setIsInitialized(false);
-                    if (onError) {
-                        onError(errorMessage, "api_key_validation");
-                    }
-                }
-            }
-            catch (err) {
-                const errorMessage = "Unable to connect - network error";
-                setError(errorMessage);
-                setIsInitialized(false);
-                if (onError) {
-                    onError(errorMessage, "network_error");
-                }
-            }
-        };
-        validateApiKey();
-    }, [apiKey]);
-    // Handle initial message loading (only runs once on mount)
-    (0, react_1.useEffect)(() => {
-        const loadInitialMessages = async () => {
-            if (isInitialLoad.current) {
-                isInitialLoad.current = false;
-                // Handle message initialization based on conversation state
-                if (initialMessages.length > 0 && token) {
-                    // Warn if both are provided - initialMessages takes precedence
-                    setMessages(initialMessages);
-                }
-                else if (initialMessages.length > 0) {
-                    // Use provided initial messages
-                    setMessages(initialMessages);
-                }
-                else if (token) {
-                    // Fetch conversation history if we have a stored conversation ID
-                    const historyMessages = await fetchConversationHistory(token);
-                    setMessages(historyMessages); // Will be empty array if fetch failed
-                }
-                else {
-                    // No conversation ID and no initial messages - start with empty array
-                    setMessages([]);
-                }
-            }
-        };
-        // Only load initial messages after API key is validated
-        if (isInitialized) {
-            loadInitialMessages();
-        }
-    }, [isInitialized]);
-    const handleSendMessage = async () => {
-        if (!inputValue.trim() || isLoading)
-            return;
-        const userMessage = {
-            id: Date.now().toString(),
-            content: inputValue.trim(),
-            role: 'user',
-            timestamp: Date.now()
-        };
-        // Add user message to UI immediately
-        setMessages(prev => [...prev, userMessage]);
-        const currentInput = inputValue.trim();
-        setInputValue('');
-        setIsLoading(true);
-        // Call the callback if provided
-        if (onUserMessage) {
-            onUserMessage(userMessage);
-        }
-        try {
-            // Call Blumessage API
-            const requestBody = {
-                message: currentInput,
-            };
-            // Include token if we have one
-            if (token) {
-                requestBody.token = token;
-            }
-            // Include user context if provided
-            if (context && Object.keys(context).length > 0) {
-                requestBody.context = context;
-            }
-            const response = await fetch('https://api.blumessage.com/api/v1/conversations', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                    'Authorization': `Bearer ${apiKey}`,
-                },
-                body: JSON.stringify(requestBody),
-            });
-            if (response.ok) {
-                const apiResponse = await response.json();
-                // Update token from response (for both first message and continuing conversations)
-                updateConversationToken(apiResponse.token);
-                // Find the assistant's response (the last message that's not from user)
-                const assistantMessages = apiResponse.messages.filter(msg => msg.role === 'assistant');
-                const latestAssistantMessage = assistantMessages[assistantMessages.length - 1];
-                if (latestAssistantMessage) {
-                    // Add assistant's response to messages
-                    const assistantResponse = {
-                        id: (Date.now() + 1).toString(),
-                        content: latestAssistantMessage.content,
-                        role: 'assistant',
-                        timestamp: latestAssistantMessage.timestamp,
-                    };
-                    setMessages(prev => [...prev, assistantResponse]);
-                    if (onAssistantMessage) {
-                        onAssistantMessage(assistantResponse);
-                    }
-                }
-            }
-            else {
-                // If token is invalid, clear it
-                if (response.status === 401 || response.status === 403) {
-                    updateConversationToken(null);
-                }
-                // Add error message
-                const errorMessage = {
-                    id: (Date.now() + 1).toString(),
-                    content: "Sorry, I'm having trouble connecting right now. Please try again.",
-                    role: 'assistant',
-                    timestamp: Date.now(),
-                };
-                setMessages(prev => [...prev, errorMessage]);
-                if (onError) {
-                    onError(`Failed to send message: ${response.status} ${response.statusText}`, "message_send");
-                }
-            }
-        }
-        catch (error) {
-            // Add error message
-            const errorMessage = {
-                id: (Date.now() + 1).toString(),
-                content: "Sorry, I'm having trouble connecting right now. Please try again.",
-                role: 'assistant',
-                timestamp: Date.now(),
-            };
-            setMessages(prev => [...prev, errorMessage]);
-            if (onError) {
-                onError(`Error sending message: ${error}`, "message_send");
-            }
-        }
-        finally {
-            setIsLoading(false);
-        }
-    };
-    const handleKeyPress = (e) => {
-        if (e.key === 'Enter' && !e.shiftKey && !isLoading) {
-            e.preventDefault();
-            handleSendMessage();
-        }
-    };
-    // Auto-scroll to bottom when messages change
-    (0, react_1.useEffect)(() => {
-        if (!disableAutoScroll) {
-            messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-        }
-    }, [messages]);
-    // Auto-scroll to bottom when chat widget opens
-    (0, react_1.useEffect)(() => {
-        if (isOpen && floating && !disableAutoScroll) {
-            // Add a small delay to ensure the DOM is updated after the animation starts
-            setTimeout(() => {
-                messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-            }, 50);
-        }
-    }, [isOpen, floating, disableAutoScroll]);
-    // Handle opening the chat with animation
-    const handleOpenChat = () => {
-        if (!isOpen && !isAnimating) {
-            setIsAnimating(true);
-            // Small delay to ensure smooth animation start
-            setTimeout(() => {
-                setIsOpen(true);
-                // Call the callback after the chat is open
-                if (onChatWidgetOpen) {
-                    onChatWidgetOpen();
-                }
-            }, 10);
-            // Animation duration
-            setTimeout(() => {
-                setIsAnimating(false);
-            }, 300);
-        }
-    };
-    // Handle closing the chat with animation
-    const handleCloseChat = () => {
-        if (isOpen && !isAnimating) {
-            setIsAnimating(true);
-            setIsOpen(false);
-            // Reset maximized state when closing
-            setIsMaximized(false);
-            // Call the callback when closing
-            if (onChatWidgetClosed) {
-                onChatWidgetClosed();
-            }
-            // Wait for animation to complete
-            setTimeout(() => {
-                setIsAnimating(false);
-            }, 300);
-        }
-    };
-    // Handle maximize/minimize toggle
-    const handleToggleMaximize = () => {
-        setIsMaximized(!isMaximized);
-    };
-    // Helper function to get any Lucide React icon by name
-    const getLucideIcon = (iconName) => {
-        if (!iconName)
-            return LucideIcons.MessageCircle;
-        // Convert icon name to PascalCase (e.g., "message-circle" -> "MessageCircle")
-        const pascalCaseName = iconName
-            .split(/[-_\s]+/)
-            .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
-            .join('');
-        // Return the icon component if it exists, otherwise fallback to MessageCircle
-        const IconComponent = LucideIcons[pascalCaseName];
-        if (!IconComponent) {
-        }
-        return (IconComponent || LucideIcons.MessageCircle);
-    };
-    // Get the help bubble icon component based on the helpBubbleIcon or helpBubbleIconName prop
-    const getHelpBubbleIconComponent = () => {
-        // If helpBubbleIconName is provided, use it directly
-        if (helpBubbleIconName) {
-            return getLucideIcon(helpBubbleIconName);
-        }
-        // Otherwise use the helpBubbleIcon prop
-        return getLucideIcon(helpBubbleIcon);
-    };
-    // Helper function to determine if a color is dark (for text contrast)
-    const isColorDark = (color) => {
-        // Handle hex colors
-        if (color.startsWith('#')) {
-            const hex = color.replace('#', '');
-            const r = parseInt(hex.substr(0, 2), 16);
-            const g = parseInt(hex.substr(2, 2), 16);
-            const b = parseInt(hex.substr(4, 2), 16);
-            // Calculate luminance
-            const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
-            return luminance < 0.5;
-        }
-        // Handle rgb/rgba colors
-        if (color.startsWith('rgb')) {
-            const match = color.match(/\d+/g);
-            if (match && match.length >= 3) {
-                const r = parseInt(match[0]);
-                const g = parseInt(match[1]);
-                const b = parseInt(match[2]);
-                const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
-                return luminance < 0.5;
-            }
-        }
-        // Default to assuming light color for unknown formats
-        return false;
-    };
-    // Helper function to get appropriate text color based on background
-    const getTextColor = (backgroundColor, theme) => {
-        // If custom background color is provided, determine text color based on brightness
-        if (backgroundColor && backgroundColor !== '#ffffff' && backgroundColor !== '#1f2937') {
-            return isColorDark(backgroundColor) ? 'blumessage-text-white' : 'blumessage-text-gray-800';
-        }
-        // Fall back to theme-based colors
-        return theme === 'dark' ? 'blumessage-text-gray-100' : 'blumessage-text-gray-800';
-    };
-    // Get the icon component based on the icon prop
-    const getIconComponent = () => {
-        return getLucideIcon(icon);
-    };
-    // Expose methods to parent component via ref
-    (0, react_1.useImperativeHandle)(ref, () => ({
-        sendMessage: async (message) => {
-            if (!message.trim() || isLoading)
-                return;
-            const userMessage = {
-                id: Date.now().toString(),
-                content: message.trim(),
-                role: 'user',
-                timestamp: Date.now()
-            };
-            // Add user message to UI immediately
-            setMessages(prev => [...prev, userMessage]);
-            const currentInput = message.trim();
-            setIsLoading(true);
-            // Call the callback if provided
-            if (onUserMessage) {
-                onUserMessage(userMessage);
-            }
-            try {
-                // Call Blumessage API
-                const requestBody = {
-                    message: currentInput,
-                };
-                // Include token if we have one
-                if (token) {
-                    requestBody.token = token;
-                }
-                // Include user context if provided
-                if (context && Object.keys(context).length > 0) {
-                    requestBody.context = context;
-                }
-                const response = await fetch('https://api.blumessage.com/api/v1/conversations', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                        'Authorization': `Bearer ${apiKey}`,
-                    },
-                    body: JSON.stringify(requestBody),
-                });
-                if (response.ok) {
-                    const apiResponse = await response.json();
-                    // Update token from response (for both first message and continuing conversations)
-                    updateConversationToken(apiResponse.token);
-                    // Find the assistant's response (the last message that's not from user)
-                    const assistantMessages = apiResponse.messages.filter(msg => msg.role === 'assistant');
-                    const latestAssistantMessage = assistantMessages[assistantMessages.length - 1];
-                    if (latestAssistantMessage) {
-                        // Add assistant's response to messages
-                        const assistantResponse = {
-                            id: (Date.now() + 1).toString(),
-                            content: latestAssistantMessage.content,
-                            role: 'assistant',
-                            timestamp: latestAssistantMessage.timestamp,
-                        };
-                        setMessages(prev => [...prev, assistantResponse]);
-                        if (onAssistantMessage) {
-                            onAssistantMessage(assistantResponse);
-                        }
-                    }
-                }
-                else {
-                    // If token is invalid, clear it
-                    if (response.status === 401 || response.status === 403) {
-                        updateConversationToken(null);
-                    }
-                    // Add error message
-                    const errorMessage = {
-                        id: (Date.now() + 1).toString(),
-                        content: "Sorry, I'm having trouble connecting right now. Please try again.",
-                        role: 'assistant',
-                        timestamp: Date.now(),
-                    };
-                    setMessages(prev => [...prev, errorMessage]);
-                    if (onError) {
-                        onError(`Failed to send message: ${response.status} ${response.statusText}`, "message_send");
-                    }
-                }
-            }
-            catch (error) {
-                // Add error message
-                const errorMessage = {
-                    id: (Date.now() + 1).toString(),
-                    content: "Sorry, I'm having trouble connecting right now. Please try again.",
-                    role: 'assistant',
-                    timestamp: Date.now(),
-                };
-                setMessages(prev => [...prev, errorMessage]);
-                if (onError) {
-                    onError(`Error sending message: ${error}`, "message_send");
-                }
-            }
-            finally {
-                setIsLoading(false);
-            }
-        },
-        openChat: () => {
-            if (!isOpen && !isAnimating) {
-                setIsAnimating(true);
-                // Small delay to ensure smooth animation start
-                setTimeout(() => {
-                    setIsOpen(true);
-                    // Call the callback after the chat is open
-                    if (onChatWidgetOpen) {
-                        onChatWidgetOpen();
-                    }
-                }, 10);
-                // Animation duration
-                setTimeout(() => {
-                    setIsAnimating(false);
-                }, 300);
-            }
-        },
-        closeChat: () => {
-            if (isOpen && !isAnimating) {
-                setIsAnimating(true);
-                setIsOpen(false);
-                // Reset maximized state when closing
-                setIsMaximized(false);
-                // Call the callback when closing
-                if (onChatWidgetClosed) {
-                    onChatWidgetClosed();
-                }
-                // Wait for animation to complete
-                setTimeout(() => {
-                    setIsAnimating(false);
-                }, 300);
-            }
-        },
-        clearConversation: () => {
-            setMessages([]);
-            updateConversationToken(null);
-        },
-        getMessages: () => messages,
-        getToken: () => token,
-    }));
-    // Helper function to get position styles for floating button
-    const getButtonPositionStyles = () => {
-        const baseStyles = {
-            position: 'fixed',
-            zIndex: 1000,
-            opacity: isOpen ? 0 : 1,
-            pointerEvents: isOpen ? 'none' : 'auto',
-            transition: 'opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-        };
-        // Mobile-specific positioning
-        if (isMobile) {
-            return {
-                ...baseStyles,
-                bottom: '20px',
-                right: '20px',
-                left: 'auto',
-                top: 'auto'
-            };
-        }
-        // Desktop positioning
-        switch (buttonPosition) {
-            case 'bottom-right':
-                return { ...baseStyles, bottom: '24px', right: '24px' };
-            case 'bottom-left':
-                return { ...baseStyles, bottom: '24px', left: '24px' };
-            case 'top-right':
-                return { ...baseStyles, top: '24px', right: '24px' };
-            case 'top-left':
-                return { ...baseStyles, top: '24px', left: '24px' };
-            default:
-                return { ...baseStyles, bottom: '24px', right: '24px' };
-        }
-    };
-    // Helper function to get position styles for help bubble
-    const getHelpBubblePositionStyles = () => {
-        const baseStyles = {
-            position: 'fixed',
-            zIndex: 999,
-        };
-        // Mobile-specific positioning
-        if (isMobile) {
-            return {
-                ...baseStyles,
-                bottom: '80px',
-                right: '20px',
-                left: 'auto',
-                top: 'auto'
-            };
-        }
-        // Desktop positioning - position above the button
-        switch (buttonPosition) {
-            case 'bottom-right':
-                return { ...baseStyles, bottom: '80px', right: '24px' };
-            case 'bottom-left':
-                return { ...baseStyles, bottom: '80px', left: '24px' };
-            case 'top-right':
-                return { ...baseStyles, top: '80px', right: '24px' };
-            case 'top-left':
-                return { ...baseStyles, top: '80px', left: '24px' };
-            default:
-                return { ...baseStyles, bottom: '80px', right: '24px' };
-        }
-    };
-    // Helper function to get position styles for floating chat window
-    const getChatPositionStyles = () => {
-        const getTransform = () => {
-            if (!isOpen) {
-                // Slide down for bottom positions, slide up for top positions
-                return buttonPosition?.includes('bottom') ? 'translateY(100%)' : 'translateY(-100%)';
-            }
-            return 'translateY(0)';
-        };
-        const baseStyles = {
-            position: 'fixed',
-            zIndex: 999,
-            transform: getTransform(),
-            transition: 'transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-            opacity: isOpen ? 1 : 0,
-            pointerEvents: isOpen ? 'auto' : 'none',
-        };
-        // Mobile-specific positioning (always fullscreen on mobile)
-        if (isMobile) {
-            return {
-                ...baseStyles,
-                top: '0',
-                left: '0',
-                right: '0',
-                bottom: '0',
-                transform: isOpen ? 'translateY(0)' : 'translateY(100%)',
-                transformOrigin: 'bottom center',
-            };
-        }
-        // If fullScreen or maximized, override positioning to be centered and full screen
-        if (fullScreen || isMaximized) {
-            // Set transform origin and direction based on button position for proper animation
-            let transformOrigin = 'center';
-            let closedTransform = 'translateY(100%)';
-            switch (buttonPosition) {
-                case 'bottom-right':
-                    transformOrigin = 'bottom right';
-                    closedTransform = 'translateY(100%)';
-                    break;
-                case 'bottom-left':
-                    transformOrigin = 'bottom left';
-                    closedTransform = 'translateY(100%)';
-                    break;
-                case 'top-right':
-                    transformOrigin = 'top right';
-                    closedTransform = 'translateY(-100%)';
-                    break;
-                case 'top-left':
-                    transformOrigin = 'top left';
-                    closedTransform = 'translateY(-100%)';
-                    break;
-                default:
-                    transformOrigin = 'bottom right';
-                    closedTransform = 'translateY(100%)';
-            }
-            return {
-                ...baseStyles,
-                top: '20px',
-                left: '20px',
-                right: '20px',
-                bottom: '20px',
-                transform: isOpen ? 'translateY(0)' : closedTransform,
-                transformOrigin,
-            };
-        }
-        // Desktop positioning
-        switch (buttonPosition) {
-            case 'bottom-right':
-                return { ...baseStyles, bottom: '24px', right: '24px', transformOrigin: 'bottom right' };
-            case 'bottom-left':
-                return { ...baseStyles, bottom: '24px', left: '24px', transformOrigin: 'bottom left' };
-            case 'top-right':
-                return { ...baseStyles, top: '24px', right: '24px', transformOrigin: 'top right' };
-            case 'top-left':
-                return { ...baseStyles, top: '24px', left: '24px', transformOrigin: 'top left' };
-            default:
-                return { ...baseStyles, bottom: '24px', right: '24px', transformOrigin: 'bottom right' };
-        }
-    };
-    const renderMessage = (message) => {
-        return ((0, jsx_runtime_1.jsx)("div", { className: `blumessage-flex blumessage-gap-3 blumessage-mb-4 ${message.role === 'user' ? 'blumessage-flex-row-reverse' : ''}`, children: (0, jsx_runtime_1.jsxs)("div", { className: "blumessage-flex blumessage-flex-col blumessage-gap-1 blumessage-max-w-[80%]", children: [(0, jsx_runtime_1.jsx)("div", { className: `blumessage-rounded-lg blumessage-px-4 blumessage-py-2 ${message.role === 'user'
-                            ? 'blumessage-bg-gradient-to-r blumessage-from-blue-500 blumessage-to-purple-600 blumessage-text-white'
-                            : theme === 'light'
-                                ? 'blumessage-bg-gray-100'
-                                : 'blumessage-bg-gray-700'}`, children: message.role === 'assistant' ? ((0, jsx_runtime_1.jsx)("div", { className: `blumessage-prose ${theme === 'dark' ? 'blumessage-text-white' : 'blumessage-text-gray-900'}`, children: markdown ? ((0, jsx_runtime_1.jsx)(react_markdown_1.default, { remarkPlugins: [remark_gfm_1.default], children: message.content }, `assistant-${message.id}`)) : ((0, jsx_runtime_1.jsx)("p", { className: "blumessage-text-sm blumessage-whitespace-pre-wrap", children: message.content })) })) : ((0, jsx_runtime_1.jsx)("div", { className: "blumessage-text-sm blumessage-whitespace-pre-wrap blumessage-text-white", children: markdown ? ((0, jsx_runtime_1.jsx)(react_markdown_1.default, { remarkPlugins: [remark_gfm_1.default], children: message.content }, `user-${message.id}`)) : ((0, jsx_runtime_1.jsx)("p", { className: "blumessage-text-sm blumessage-whitespace-pre-wrap", children: message.content })) })) }), showTimestamps && ((0, jsx_runtime_1.jsx)("span", { className: "blumessage-text-xs blumessage-text-gray-500", children: formatTimestamp(message.timestamp) }))] }) }, message.id));
-    };
-    // Render chat window component
-    const renderChatWindow = () => {
-        const isFullscreenMode = fullScreen || isMaximized || isMobile;
-        const chatContent = ((0, jsx_runtime_1.jsxs)("div", { className: `blumessage-shadow-2xl blumessage-flex blumessage-flex-col blumessage-overflow-hidden blumessage-border ${isMobile ? 'blumessage-mobile-fullscreen' : ''} ${theme === 'dark'
-                ? 'blumessage-bg-gray-900 blumessage-border-gray-700'
-                : 'blumessage-bg-white blumessage-border-black/10'}`, style: {
-                width: isFullscreenMode ? '100%' : actualWidth,
-                height: isFullscreenMode ? '100%' : actualHeight,
-                fontFamily: 'system-ui, -apple-system, sans-serif',
-                borderRadius: isMobile ? '0' : (isFullscreenMode ? '12px' : '24px')
-            }, children: [(0, jsx_runtime_1.jsxs)("div", { className: `blumessage-border-b ${theme === 'dark'
-                        ? 'blumessage-bg-gray-900 blumessage-border-gray-700'
-                        : 'blumessage-bg-white blumessage-border-gray-100'}`, style: {
-                        display: 'blumessage-flex',
-                        alignItems: 'center',
-                        padding: isMobile ? '12px 16px' : '16px 24px'
-                    }, children: [(0, jsx_runtime_1.jsx)("div", { className: "blumessage-rounded-full blumessage-flex blumessage-items-center blumessage-justify-center", style: {
-                                backgroundImage: primaryColor,
-                                width: isMobile ? '40px' : '48px',
-                                height: isMobile ? '40px' : '48px',
-                                marginRight: isMobile ? '16px' : '24px'
-                            }, children: react_1.default.createElement(getIconComponent(), {
-                                className: isMobile ? "blumessage-w-5 blumessage-h-5 blumessage-text-white" : "blumessage-w-6 blumessage-h-6 blumessage-text-white"
-                            }) }), (0, jsx_runtime_1.jsxs)("div", { style: { flex: 1 }, children: [(0, jsx_runtime_1.jsx)("div", { className: `${isMobile ? 'blumessage-text-base' : 'blumessage-text-lg'} blumessage-font-semibold blumessage-m-0 blumessage-leading-6 ${theme === 'dark' ? 'blumessage-text-gray-100' : 'blumessage-text-gray-900'}`, children: name }), (0, jsx_runtime_1.jsx)("div", { className: `blumessage-text-sm blumessage-m-0 blumessage-leading-5 ${theme === 'dark' ? 'blumessage-text-gray-400' : 'blumessage-text-gray-500'}`, children: subtitle })] }), floating && ((0, jsx_runtime_1.jsxs)("div", { className: "blumessage-flex blumessage-items-center blumessage-gap-1", children: [maximizeToggleButton && !isMobile && ((0, jsx_runtime_1.jsx)("button", { onClick: handleToggleMaximize, className: `blumessage-w-8 blumessage-h-8 blumessage-rounded-full blumessage-flex blumessage-items-center blumessage-justify-center blumessage-cursor-pointer blumessage-transition-colors ${theme === 'dark'
-                                        ? 'hover:blumessage-bg-gray-800 blumessage-text-gray-400 hover:blumessage-text-gray-200'
-                                        : 'hover:blumessage-bg-gray-100 blumessage-text-gray-500 hover:blumessage-text-gray-700'}`, children: isMaximized ? (0, jsx_runtime_1.jsx)(LucideIcons.Minimize2, { className: "blumessage-w-4 blumessage-h-4" }) : (0, jsx_runtime_1.jsx)(LucideIcons.Maximize, { className: "blumessage-w-4 blumessage-h-4" }) })), (0, jsx_runtime_1.jsx)("button", { onClick: handleCloseChat, className: `blumessage-w-8 blumessage-h-8 blumessage-rounded-full blumessage-flex blumessage-items-center blumessage-justify-center blumessage-cursor-pointer blumessage-transition-colors ${theme === 'dark'
-                                        ? 'hover:blumessage-bg-gray-800 blumessage-text-gray-400 hover:blumessage-text-gray-200'
-                                        : 'hover:blumessage-bg-gray-100 blumessage-text-gray-500 hover:blumessage-text-gray-700'}`, children: (0, jsx_runtime_1.jsx)(LucideIcons.X, { className: "blumessage-w-4 blumessage-h-4" }) })] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: `blumessage-flex-1 blumessage-overflow-y-auto ${theme === 'dark' ? 'blumessage-bg-gray-800' : 'blumessage-bg-gray-50'}`, style: { padding: isMobile ? '12px 16px' : '16px 24px' }, children: [messages.map((message) => ((0, jsx_runtime_1.jsx)("div", { className: `blumessage-flex ${message.role === 'user' ? 'blumessage-justify-end' : 'blumessage-justify-start'} blumessage-mb-4`, children: (0, jsx_runtime_1.jsx)("div", { className: `${isMobile ? 'blumessage-max-w-[85%]' : 'blumessage-max-w-[80%]'} blumessage-inline-block ${message.role === 'user' ? '' : 'blumessage-text-left'}`, children: (0, jsx_runtime_1.jsxs)("div", { className: `blumessage-inline-block blumessage-px-4 blumessage-py-3 blumessage-rounded-2xl blumessage-text-sm blumessage-leading-6 blumessage-text-left ${message.role === 'user'
-                                        ? 'blumessage-text-white'
-                                        : theme === 'dark'
-                                            ? 'blumessage-bg-gray-700 blumessage-text-gray-100 blumessage-border blumessage-border-gray-600 blumessage-shadow-sm'
-                                            : 'blumessage-bg-white blumessage-text-gray-800 blumessage-border blumessage-border-gray-200 blumessage-shadow-sm'}`, style: message.role === 'user' ? { backgroundImage: primaryColor } : {}, children: [message.role === 'assistant' ? (markdown ? ((0, jsx_runtime_1.jsx)(react_markdown_1.default, { remarkPlugins: [remark_gfm_1.default], children: message.content }, `assistant-${message.id}`)) : ((0, jsx_runtime_1.jsx)("div", { className: "blumessage-whitespace-pre-wrap", children: message.content }))) : ((0, jsx_runtime_1.jsx)("div", { className: "blumessage-inline-block", children: markdown ? ((0, jsx_runtime_1.jsx)(react_markdown_1.default, { remarkPlugins: [remark_gfm_1.default], children: message.content }, `user-${message.id}`)) : ((0, jsx_runtime_1.jsx)("div", { className: "blumessage-whitespace-pre-wrap", children: message.content })) })), showTimestamps && ((0, jsx_runtime_1.jsx)("div", { className: `blumessage-text-[10px] blumessage-mt-1 blumessage-opacity-75 ${message.role === 'user'
-                                                ? 'blumessage-text-white/75'
-                                                : theme === 'dark'
-                                                    ? 'blumessage-text-gray-400'
-                                                    : 'blumessage-text-gray-500'}`, style: {
-                                                textAlign: message.role === 'user' ? 'right' : 'left'
-                                            }, children: formatTimestamp(message.timestamp) }))] }) }) }, message.id))), isLoading && ((0, jsx_runtime_1.jsx)("div", { className: "blumessage-flex blumessage-justify-start blumessage-mb-4", children: (0, jsx_runtime_1.jsx)("div", { className: `blumessage-px-4 blumessage-py-3 blumessage-rounded-2xl ${isMobile ? 'blumessage-max-w-[85%]' : 'blumessage-max-w-[80%]'} blumessage-text-sm blumessage-leading-6 blumessage-shadow-sm ${theme === 'dark'
-                                    ? 'blumessage-bg-gray-700 blumessage-text-gray-100 blumessage-border blumessage-border-gray-600'
-                                    : 'blumessage-bg-white blumessage-text-gray-800 blumessage-border blumessage-border-gray-200'}`, children: (0, jsx_runtime_1.jsx)("div", { className: `${theme === 'dark' ? 'blumessage-text-gray-300' : 'blumessage-text-gray-600'}`, style: { fontStyle: 'italic' }, children: typingText }) }) })), messages.length === 0 && !isLoading && ((0, jsx_runtime_1.jsx)("div", { className: `blumessage-text-center blumessage-text-sm blumessage-py-8 ${theme === 'dark' ? 'blumessage-text-gray-400' : 'blumessage-text-gray-500'}`, children: emptyStateText })), (0, jsx_runtime_1.jsx)("div", { ref: messagesEndRef })] }), (0, jsx_runtime_1.jsx)("div", { className: `blumessage-border-t ${theme === 'dark'
-                        ? 'blumessage-bg-gray-900 blumessage-border-gray-700'
-                        : 'blumessage-bg-white blumessage-border-gray-100'}`, style: { padding: isMobile ? '12px 16px' : '16px 24px' }, children: (0, jsx_runtime_1.jsxs)("div", { className: `blumessage-flex blumessage-items-center blumessage-rounded-2xl blumessage-px-4 blumessage-py-3 blumessage-border ${theme === 'dark'
-                            ? 'blumessage-bg-gray-800 blumessage-border-gray-600'
-                            : 'blumessage-bg-gray-50 blumessage-border-gray-200'}`, children: [(0, jsx_runtime_1.jsx)("textarea", { className: `blumessage-flex-1 blumessage-border-none blumessage-bg-transparent blumessage-outline-none blumessage-text-sm blumessage-font-inherit blumessage-resize-none ${theme === 'dark' ? 'blumessage-text-gray-100' : 'blumessage-text-gray-700'}`, placeholder: placeholder, value: inputValue, onChange: (e) => {
-                                    const newValue = e.target.value;
-                                    if (newValue.length <= 1000) {
-                                        setInputValue(newValue);
-                                    }
-                                }, onPaste: (e) => {
-                                    e.preventDefault();
-                                    const pastedText = e.clipboardData.getData('text');
-                                    const currentValue = inputValue;
-                                    const newValue = currentValue + pastedText;
-                                    if (newValue.length <= 1000) {
-                                        setInputValue(newValue);
-                                    }
-                                    else {
-                                        // Truncate to exactly 1000 characters
-                                        const truncatedValue = newValue.substring(0, 1000);
-                                        setInputValue(truncatedValue);
-                                    }
-                                }, onKeyDown: handleKeyPress, rows: 1, maxLength: 1000, style: {
-                                    minHeight: '20px',
-                                    maxHeight: isMobile ? '100px' : '120px',
-                                    overflowY: inputValue.split('\n').length > 4 ? 'auto' : 'hidden',
-                                    lineHeight: '1.5',
-                                    paddingTop: '2px',
-                                    paddingBottom: '2px'
-                                }, onInput: (e) => {
-                                    const target = e.target;
-                                    target.style.height = 'auto';
-                                    target.style.height = Math.min(target.scrollHeight, isMobile ? 100 : 120) + 'px';
-                                } }), (0, jsx_runtime_1.jsx)("button", { className: "blumessage-w-8 blumessage-h-8 blumessage-rounded-full blumessage-border-none blumessage-flex blumessage-items-center blumessage-justify-center blumessage-cursor-pointer blumessage-ml-2 blumessage-text-white blumessage-transition-all disabled:blumessage-opacity-50 disabled:blumessage-cursor-not-allowed", style: { backgroundImage: primaryColor }, onClick: handleSendMessage, disabled: !inputValue.trim() || isLoading, children: isLoading ? ((0, jsx_runtime_1.jsx)(LucideIcons.Loader2, { className: "blumessage-w-4 blumessage-h-4 blumessage-animate-spin" })) : ((0, jsx_runtime_1.jsx)(LucideIcons.Send, { className: "blumessage-w-4 blumessage-h-4" })) })] }) })] }));
-        if (floating) {
-            return ((0, jsx_runtime_1.jsx)("div", { style: getChatPositionStyles(), children: chatContent }));
-        }
-        return chatContent;
-    };
-    // Don't render anything if no API key is provided
-    if (!apiKey) {
-        return null;
-    }
-    if (error) {
-        const isFullscreenMode = fullScreen || isMaximized || isMobile;
-        const errorContent = ((0, jsx_runtime_1.jsxs)("div", { className: `blumessage-shadow-2xl blumessage-flex blumessage-flex-col blumessage-overflow-hidden blumessage-border ${isMobile ? 'blumessage-mobile-fullscreen' : ''} ${theme === 'dark'
-                ? 'blumessage-bg-gray-900 blumessage-border-gray-700'
-                : 'blumessage-bg-white blumessage-border-black/10'}`, style: {
-                width: isFullscreenMode ? '100%' : actualWidth,
-                height: isFullscreenMode ? '100%' : actualHeight,
-                fontFamily: 'system-ui, -apple-system, sans-serif',
-                borderRadius: isMobile ? '0' : (isFullscreenMode ? '12px' : '24px')
-            }, children: [(0, jsx_runtime_1.jsxs)("div", { className: `blumessage-flex blumessage-items-center blumessage-border-b ${theme === 'dark'
-                        ? 'blumessage-bg-gray-900 blumessage-border-gray-700'
-                        : 'blumessage-bg-white blumessage-border-gray-100'}`, style: { padding: isMobile ? '12px 16px' : '16px 24px' }, children: [(0, jsx_runtime_1.jsx)("div", { className: "blumessage-rounded-full blumessage-flex blumessage-items-center blumessage-justify-center", style: {
-                                backgroundColor: '#ef4444',
-                                width: isMobile ? '40px' : '48px',
-                                height: isMobile ? '40px' : '48px',
-                                marginRight: isMobile ? '16px' : '24px'
-                            }, children: (0, jsx_runtime_1.jsx)(LucideIcons.AlertTriangle, { className: isMobile ? "blumessage-w-5 blumessage-h-5 blumessage-text-white" : "blumessage-w-6 blumessage-h-6 blumessage-text-white" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "blumessage-flex-1", children: [(0, jsx_runtime_1.jsx)("div", { className: `${isMobile ? 'blumessage-text-base' : 'blumessage-text-lg'} blumessage-font-semibold blumessage-m-0 blumessage-leading-6 ${theme === 'dark' ? 'blumessage-text-gray-100' : 'blumessage-text-gray-900'}`, children: "Connection Error" }), (0, jsx_runtime_1.jsx)("div", { className: `blumessage-text-sm blumessage-m-0 blumessage-leading-5 ${theme === 'dark' ? 'blumessage-text-gray-400' : 'blumessage-text-gray-500'}`, children: "Unable to connect" })] }), floating && ((0, jsx_runtime_1.jsxs)("div", { className: "blumessage-flex blumessage-items-center blumessage-gap-1", children: [maximizeToggleButton && !isMobile && ((0, jsx_runtime_1.jsx)("button", { onClick: handleToggleMaximize, className: `blumessage-w-8 blumessage-h-8 blumessage-rounded-full blumessage-flex blumessage-items-center blumessage-justify-center blumessage-cursor-pointer blumessage-transition-colors ${theme === 'dark'
-                                        ? 'hover:blumessage-bg-gray-800 blumessage-text-gray-400 hover:blumessage-text-gray-200'
-                                        : 'hover:blumessage-bg-gray-100 blumessage-text-gray-500 hover:blumessage-text-gray-700'}`, children: isMaximized ? (0, jsx_runtime_1.jsx)(LucideIcons.Minimize2, { className: "blumessage-w-4 blumessage-h-4" }) : (0, jsx_runtime_1.jsx)(LucideIcons.Maximize, { className: "blumessage-w-4 blumessage-h-4" }) })), (0, jsx_runtime_1.jsx)("button", { onClick: handleCloseChat, className: `blumessage-w-8 blumessage-h-8 blumessage-rounded-full blumessage-flex blumessage-items-center blumessage-justify-center blumessage-cursor-pointer blumessage-transition-colors ${theme === 'dark'
-                                        ? 'hover:blumessage-bg-gray-800 blumessage-text-gray-400 hover:blumessage-text-gray-200'
-                                        : 'hover:blumessage-bg-gray-100 blumessage-text-gray-500 hover:blumessage-text-gray-700'}`, children: (0, jsx_runtime_1.jsx)(LucideIcons.X, { className: "blumessage-w-4 blumessage-h-4" }) })] }))] }), (0, jsx_runtime_1.jsx)("div", { className: `blumessage-flex-1 blumessage-overflow-y-auto ${theme === 'dark' ? 'blumessage-bg-gray-800' : 'blumessage-bg-gray-50'}`, style: { padding: isMobile ? '12px 16px' : '16px 24px' }, children: (0, jsx_runtime_1.jsx)("div", { className: "blumessage-flex blumessage-justify-start", children: (0, jsx_runtime_1.jsx)("div", { className: `blumessage-px-4 blumessage-py-3 blumessage-rounded-2xl ${isMobile ? 'blumessage-max-w-[85%]' : 'blumessage-max-w-[80%]'} blumessage-text-sm blumessage-leading-6 blumessage-shadow-sm ${theme === 'dark'
-                                ? 'blumessage-bg-gray-700 blumessage-text-gray-100 blumessage-border blumessage-border-gray-600'
-                                : 'blumessage-bg-white blumessage-text-gray-800 blumessage-border blumessage-border-gray-200'}`, children: error }) }) })] }));
-        if (floating) {
-            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", { onClick: handleOpenChat, className: `blumessage-text-white blumessage-rounded-full blumessage-shadow-lg blumessage-transition-all blumessage-duration-200 blumessage-flex blumessage-items-center blumessage-justify-center blumessage-gap-2 ${isMobile ? 'blumessage-mobile-button' : ''} ${buttonText ? 'blumessage-px-4 blumessage-py-3 blumessage-h-12' : 'blumessage-w-14 blumessage-h-14'}`, style: { ...getButtonPositionStyles(), ...buttonStyle, backgroundImage: primaryColor }, children: [react_1.default.createElement(getIconComponent(), { className: "blumessage-w-6 blumessage-h-6" }), buttonText && !isMobile && (0, jsx_runtime_1.jsx)("span", { className: "blumessage-text-sm blumessage-font-medium blumessage-whitespace-nowrap", children: buttonText })] }), showHelpBubble && (isHelpBubbleVisible || isHelpBubbleAnimating) && ((0, jsx_runtime_1.jsx)("div", { className: `blumessage-fixed blumessage-z-[999] blumessage-border blumessage-rounded-lg blumessage-shadow-lg blumessage-px-3 blumessage-py-2 blumessage-text-sm blumessage-max-w-[200px] ${isHelpBubbleVisible
-                            ? (buttonPosition?.includes('top') ? 'blumessage-help-bubble-in-top' : 'blumessage-help-bubble-in')
-                            : (buttonPosition?.includes('top') ? 'blumessage-help-bubble-out-top' : 'blumessage-help-bubble-out')} ${theme === 'dark'
-                            ? 'blumessage-bg-gray-800 blumessage-border-gray-600'
-                            : 'blumessage-bg-white blumessage-border-gray-200'}`, style: {
-                            ...getHelpBubblePositionStyles(),
-                            backgroundColor: helpBubbleBackgroundColor || (theme === 'dark' ? '#1f2937' : '#ffffff'),
-                            transformOrigin: buttonPosition?.includes('bottom') ? 'bottom center' : 'top center',
-                        }, children: (0, jsx_runtime_1.jsxs)("div", { className: "blumessage-flex blumessage-items-center blumessage-gap-2", children: [react_1.default.createElement(getHelpBubbleIconComponent(), {
-                                    className: "blumessage-w-4 blumessage-h-4 blumessage-flex-shrink-0",
-                                    style: { color: primaryColor.includes('linear-gradient') ? '#3b82f6' : primaryColor }
-                                }), (0, jsx_runtime_1.jsx)("span", { className: `blumessage-leading-tight ${getTextColor(helpBubbleBackgroundColor || (theme === 'dark' ? '#1f2937' : '#ffffff'), theme)}`, children: helpBubbleMessage })] }) })), (0, jsx_runtime_1.jsx)("div", { style: getChatPositionStyles(), children: errorContent })] }));
-        }
-        return errorContent;
-    }
-    if (!isInitialized) {
-        const isFullscreenMode = fullScreen || isMaximized || isMobile;
-        const loadingContent = ((0, jsx_runtime_1.jsxs)("div", { className: `blumessage-shadow-2xl blumessage-flex blumessage-flex-col blumessage-overflow-hidden blumessage-border ${isMobile ? 'blumessage-mobile-fullscreen' : ''} ${theme === 'dark'
-                ? 'blumessage-bg-gray-900 blumessage-border-gray-700'
-                : 'blumessage-bg-white blumessage-border-black/10'}`, style: {
-                width: isFullscreenMode ? '100%' : actualWidth,
-                height: isFullscreenMode ? '100%' : actualHeight,
-                fontFamily: 'system-ui, -apple-system, sans-serif',
-                borderRadius: isMobile ? '0' : (isFullscreenMode ? '12px' : '24px')
-            }, children: [(0, jsx_runtime_1.jsxs)("div", { className: `blumessage-flex blumessage-items-center blumessage-border-b ${theme === 'dark'
-                        ? 'blumessage-bg-gray-900 blumessage-border-gray-700'
-                        : 'blumessage-bg-white blumessage-border-gray-100'}`, style: { padding: isMobile ? '12px 16px' : '16px 24px' }, children: [(0, jsx_runtime_1.jsx)("div", { className: "blumessage-rounded-full blumessage-flex blumessage-items-center blumessage-justify-center", style: {
-                                backgroundImage: primaryColor,
-                                width: isMobile ? '40px' : '48px',
-                                height: isMobile ? '40px' : '48px',
-                                marginRight: isMobile ? '16px' : '24px'
-                            }, children: (0, jsx_runtime_1.jsx)(LucideIcons.Loader2, { className: isMobile ? "blumessage-w-5 blumessage-h-5 blumessage-text-white blumessage-animate-spin" : "blumessage-w-6 blumessage-h-6 blumessage-text-white blumessage-animate-spin" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "blumessage-flex-1", children: [(0, jsx_runtime_1.jsx)("div", { className: `${isMobile ? 'blumessage-text-base' : 'blumessage-text-lg'} blumessage-font-semibold blumessage-m-0 blumessage-leading-6 ${theme === 'dark' ? 'blumessage-text-gray-100' : 'blumessage-text-gray-900'}`, children: name }), (0, jsx_runtime_1.jsx)("div", { className: `blumessage-text-sm blumessage-m-0 blumessage-leading-5 ${theme === 'dark' ? 'blumessage-text-gray-400' : 'blumessage-text-gray-500'}`, children: subtitle })] }), floating && ((0, jsx_runtime_1.jsxs)("div", { className: "blumessage-flex blumessage-items-center blumessage-gap-1", children: [maximizeToggleButton && !isMobile && ((0, jsx_runtime_1.jsx)("button", { onClick: handleToggleMaximize, className: `blumessage-w-8 blumessage-h-8 blumessage-rounded-full blumessage-flex blumessage-items-center blumessage-justify-center blumessage-cursor-pointer blumessage-transition-colors ${theme === 'dark'
-                                        ? 'hover:blumessage-bg-gray-800 blumessage-text-gray-400 hover:blumessage-text-gray-200'
-                                        : 'hover:blumessage-bg-gray-100 blumessage-text-gray-500 hover:blumessage-text-gray-700'}`, children: isMaximized ? (0, jsx_runtime_1.jsx)(LucideIcons.Minimize2, { className: "blumessage-w-4 blumessage-h-4" }) : (0, jsx_runtime_1.jsx)(LucideIcons.Maximize, { className: "blumessage-w-4 blumessage-h-4" }) })), (0, jsx_runtime_1.jsx)("button", { onClick: handleCloseChat, className: `blumessage-w-8 blumessage-h-8 blumessage-rounded-full blumessage-flex blumessage-items-center blumessage-justify-center blumessage-cursor-pointer blumessage-transition-colors ${theme === 'dark'
-                                        ? 'hover:blumessage-bg-gray-800 blumessage-text-gray-400 hover:blumessage-text-gray-200'
-                                        : 'hover:blumessage-bg-gray-100 blumessage-text-gray-500 hover:blumessage-text-gray-700'}`, children: (0, jsx_runtime_1.jsx)(LucideIcons.X, { className: "blumessage-w-4 blumessage-h-4" }) })] }))] }), (0, jsx_runtime_1.jsx)("div", { className: `blumessage-flex-1 blumessage-overflow-y-auto ${theme === 'dark' ? 'blumessage-bg-gray-800' : 'blumessage-bg-gray-50'}`, style: { padding: isMobile ? '12px 16px' : '16px 24px' }, children: (0, jsx_runtime_1.jsx)("div", { className: `blumessage-text-center blumessage-text-sm blumessage-py-8 ${theme === 'dark' ? 'blumessage-text-gray-400' : 'blumessage-text-gray-500'}`, children: "Ready to chat..." }) })] }));
-        if (floating) {
-            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", { onClick: handleOpenChat, className: `blumessage-text-white blumessage-rounded-full blumessage-shadow-lg blumessage-transition-all blumessage-duration-200 blumessage-flex blumessage-items-center blumessage-justify-center blumessage-gap-2 ${isMobile ? 'blumessage-mobile-button' : ''} ${buttonText ? 'blumessage-px-4 blumessage-py-3 blumessage-h-12' : 'blumessage-w-14 blumessage-h-14'}`, style: { ...getButtonPositionStyles(), ...buttonStyle, backgroundImage: primaryColor }, children: [react_1.default.createElement(getIconComponent(), { className: "blumessage-w-6 blumessage-h-6" }), buttonText && !isMobile && (0, jsx_runtime_1.jsx)("span", { className: "blumessage-text-sm blumessage-font-medium blumessage-whitespace-nowrap", children: buttonText })] }), showHelpBubble && (isHelpBubbleVisible || isHelpBubbleAnimating) && ((0, jsx_runtime_1.jsx)("div", { className: `blumessage-fixed blumessage-z-[999] blumessage-border blumessage-rounded-lg blumessage-shadow-lg blumessage-px-3 blumessage-py-2 blumessage-text-sm blumessage-max-w-[200px] ${isHelpBubbleVisible
-                            ? (buttonPosition?.includes('top') ? 'blumessage-help-bubble-in-top' : 'blumessage-help-bubble-in')
-                            : (buttonPosition?.includes('top') ? 'blumessage-help-bubble-out-top' : 'blumessage-help-bubble-out')} ${theme === 'dark'
-                            ? 'blumessage-bg-gray-800 blumessage-border-gray-600'
-                            : 'blumessage-bg-white blumessage-border-gray-200'}`, style: {
-                            ...getHelpBubblePositionStyles(),
-                            backgroundColor: helpBubbleBackgroundColor || (theme === 'dark' ? '#1f2937' : '#ffffff'),
-                            transformOrigin: buttonPosition?.includes('bottom') ? 'bottom center' : 'top center',
-                        }, children: (0, jsx_runtime_1.jsxs)("div", { className: "blumessage-flex blumessage-items-center blumessage-gap-2", children: [react_1.default.createElement(getHelpBubbleIconComponent(), {
-                                    className: "blumessage-w-4 blumessage-h-4 blumessage-flex-shrink-0",
-                                    style: { color: primaryColor.includes('linear-gradient') ? '#3b82f6' : primaryColor }
-                                }), (0, jsx_runtime_1.jsx)("span", { className: `blumessage-leading-tight ${getTextColor(helpBubbleBackgroundColor || (theme === 'dark' ? '#1f2937' : '#ffffff'), theme)}`, children: helpBubbleMessage })] }) })), (0, jsx_runtime_1.jsx)("div", { style: getChatPositionStyles(), children: loadingContent })] }));
-        }
-        return loadingContent;
-    }
-    // Main render for initialized state
-    if (floating) {
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", { onClick: handleOpenChat, className: `blumessage-text-white blumessage-rounded-full blumessage-shadow-lg blumessage-transition-all blumessage-duration-200 blumessage-flex blumessage-items-center blumessage-justify-center blumessage-gap-2 ${isMobile ? 'blumessage-mobile-button' : ''} ${buttonText ? 'blumessage-px-4 blumessage-py-3 blumessage-h-12' : 'blumessage-w-14 blumessage-h-14'}`, style: { ...getButtonPositionStyles(), ...buttonStyle, backgroundImage: primaryColor }, children: [react_1.default.createElement(getIconComponent(), { className: "blumessage-w-6 blumessage-h-6" }), buttonText && !isMobile && (0, jsx_runtime_1.jsx)("span", { className: "blumessage-text-sm blumessage-font-medium blumessage-whitespace-nowrap", children: buttonText })] }), showHelpBubble && (isHelpBubbleVisible || isHelpBubbleAnimating) && ((0, jsx_runtime_1.jsx)("div", { className: `blumessage-fixed blumessage-z-[999] blumessage-border blumessage-rounded-lg blumessage-shadow-lg blumessage-px-3 blumessage-py-2 blumessage-text-sm blumessage-max-w-[200px] ${isHelpBubbleVisible
-                        ? (buttonPosition?.includes('top') ? 'blumessage-help-bubble-in-top' : 'blumessage-help-bubble-in')
-                        : (buttonPosition?.includes('top') ? 'blumessage-help-bubble-out-top' : 'blumessage-help-bubble-out')} ${theme === 'dark'
-                        ? 'blumessage-bg-gray-800 blumessage-border-gray-600'
-                        : 'blumessage-bg-white blumessage-border-gray-200'}`, style: {
-                        ...getHelpBubblePositionStyles(),
-                        backgroundColor: helpBubbleBackgroundColor || (theme === 'dark' ? '#1f2937' : '#ffffff'),
-                        transformOrigin: buttonPosition?.includes('bottom') ? 'bottom center' : 'top center',
-                    }, children: (0, jsx_runtime_1.jsxs)("div", { className: "blumessage-flex blumessage-items-center blumessage-gap-2", children: [react_1.default.createElement(getHelpBubbleIconComponent(), {
-                                className: "blumessage-w-4 blumessage-h-4 blumessage-flex-shrink-0",
-                                style: { color: primaryColor.includes('linear-gradient') ? '#3b82f6' : primaryColor }
-                            }), (0, jsx_runtime_1.jsx)("span", { className: `blumessage-leading-tight ${getTextColor(helpBubbleBackgroundColor || (theme === 'dark' ? '#1f2937' : '#ffffff'), theme)}`, children: helpBubbleMessage })] }) })), renderChatWindow()] }));
-    }
-    return renderChatWindow();
-});