@blumessage/react-chat 1.0.0 → 1.0.2

package/dist/BlumessageChat.js

@@ -0,0 +1,624 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useState, useEffect, useRef } from "react";
+import { MessageCircle, AlertTriangle, Loader2, Send, X, Maximize, Minimize2, Bot, MessageSquare, Phone, Mail, Headphones, Users, User, Heart, Star, Zap } from "lucide-react";
+// Session storage key for conversation ID
+var CONVERSATION_ID_KEY = 'blumessage_conversation_id';
+// Utility functions for storage
+var saveConversationId = function (conversationId, persistent) {
+    if (persistent === void 0) { persistent = false; }
+    try {
+        var storage = persistent ? localStorage : sessionStorage;
+        storage.setItem(CONVERSATION_ID_KEY, conversationId);
+    }
+    catch (error) {
+        console.warn("Failed to save conversation ID to ".concat(persistent ? 'local' : 'session', " storage:"), error);
+    }
+};
+var getStoredConversationId = function (persistent) {
+    if (persistent === void 0) { persistent = false; }
+    try {
+        var storage = persistent ? localStorage : sessionStorage;
+        return storage.getItem(CONVERSATION_ID_KEY);
+    }
+    catch (error) {
+        console.warn("Failed to get conversation ID from ".concat(persistent ? 'local' : 'session', " storage:"), error);
+        return null;
+    }
+};
+var clearStoredConversationId = function (persistent) {
+    if (persistent === void 0) { persistent = false; }
+    try {
+        var storage = persistent ? localStorage : sessionStorage;
+        storage.removeItem(CONVERSATION_ID_KEY);
+    }
+    catch (error) {
+        console.warn("Failed to clear conversation ID from ".concat(persistent ? 'local' : 'session', " storage:"), error);
+    }
+};
+export var BlumessageChat = function (_a) {
+    var apiKey = _a.apiKey, _b = _a.placeholder, placeholder = _b === void 0 ? "Type your message..." : _b, _c = _a.theme, theme = _c === void 0 ? 'light' : _c, width = _a.width, height = _a.height, _d = _a.size, size = _d === void 0 ? 'medium' : _d, _e = _a.name, name = _e === void 0 ? "Blumessage AI" : _e, _f = _a.subtitle, subtitle = _f === void 0 ? "Online • Instant responses" : _f, _g = _a.initialMessages, initialMessages = _g === void 0 ? [] : _g, onUserMessage = _a.onUserMessage, onAssistantMessage = _a.onAssistantMessage, initialConversationId = _a.conversationId, onConversationIdChange = _a.onConversationIdChange, onChatWidgetOpen = _a.onChatWidgetOpen, onChatWidgetClosed = _a.onChatWidgetClosed, onError = _a.onError, _h = _a.persistent, persistent = _h === void 0 ? false : _h, 
+    // Floating button props
+    _j = _a.floating, 
+    // Floating button props
+    floating = _j === void 0 ? true : _j, _k = _a.buttonText, buttonText = _k === void 0 ? "Chat with us" : _k, _l = _a.buttonPosition, buttonPosition = _l === void 0 ? 'bottom-right' : _l, buttonStyle = _a.buttonStyle, _m = _a.defaultOpen, defaultOpen = _m === void 0 ? false : _m, _o = _a.maximizeToggleButton, maximizeToggleButton = _o === void 0 ? true : _o, _p = _a.fullScreen, fullScreen = _p === void 0 ? false : _p, _q = _a.icon, icon = _q === void 0 ? 'message-circle' : _q, 
+    // Styling props
+    _r = _a.primaryColor, 
+    // Styling props
+    primaryColor = _r === void 0 ? "linear-gradient(to right, #3b82f6,rgb(8, 98, 242))" : _r;
+    var _s = useState(false), isInitialized = _s[0], setIsInitialized = _s[1];
+    var _t = useState(null), error = _t[0], setError = _t[1];
+    var _u = useState(initialMessages), messages = _u[0], setMessages = _u[1];
+    var _v = useState(''), inputValue = _v[0], setInputValue = _v[1];
+    var _w = useState(initialConversationId || getStoredConversationId(persistent)), conversationId = _w[0], setConversationId = _w[1];
+    var _x = useState(defaultOpen), isOpen = _x[0], setIsOpen = _x[1];
+    var _y = useState(false), isAnimating = _y[0], setIsAnimating = _y[1];
+    var _z = useState(false), isLoading = _z[0], setIsLoading = _z[1];
+    var _0 = useState(false), isMaximized = _0[0], setIsMaximized = _0[1];
+    var messagesEndRef = useRef(null);
+    // Helper function to get dimensions based on size
+    var getDimensions = function () {
+        // If custom width/height are provided, use them
+        if (width && height) {
+            return { width: width, height: height };
+        }
+        // Otherwise, use size-based dimensions
+        switch (size) {
+            case 'small':
+                return { width: '320px', height: '400px' };
+            case 'large':
+                return { width: '480px', height: '600px' };
+            case 'medium':
+            default:
+                return { width: '380px', height: '500px' };
+        }
+    };
+    var _1 = getDimensions(), actualWidth = _1.width, actualHeight = _1.height;
+    // Function to update conversation ID and notify parent
+    var updateConversationId = function (newConversationId) {
+        setConversationId(newConversationId);
+        if (newConversationId) {
+            saveConversationId(newConversationId, persistent);
+        }
+        else {
+            clearStoredConversationId(persistent);
+        }
+        if (onConversationIdChange) {
+            onConversationIdChange(newConversationId);
+        }
+    };
+    // Function to fetch conversation history
+    var fetchConversationHistory = function (convId) { return __awaiter(void 0, void 0, void 0, function () {
+        var response, sessionData, error_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 5, , 6]);
+                    console.log("Fetching conversation history for:", convId);
+                    return [4 /*yield*/, fetch("https://api.blumessage.com/api/v1/conversations/session/".concat(convId), {
+                            method: 'GET',
+                            headers: {
+                                'Authorization': apiKey,
+                            },
+                        })];
+                case 1:
+                    response = _a.sent();
+                    if (!response.ok) return [3 /*break*/, 3];
+                    return [4 /*yield*/, response.json()];
+                case 2:
+                    sessionData = _a.sent();
+                    console.log("Conversation history loaded successfully");
+                    return [2 /*return*/, sessionData.messages || []];
+                case 3:
+                    console.error("Failed to fetch conversation history:", response.status, response.statusText);
+                    // Clear invalid conversation ID from storage
+                    updateConversationId(null);
+                    if (onError) {
+                        onError("Failed to fetch conversation history: ".concat(response.status, " ").concat(response.statusText), "conversation_history");
+                    }
+                    return [2 /*return*/, []];
+                case 4: return [3 /*break*/, 6];
+                case 5:
+                    error_1 = _a.sent();
+                    console.error("Error fetching conversation history:", error_1);
+                    // Clear invalid conversation ID from storage
+                    updateConversationId(null);
+                    if (onError) {
+                        onError("Error fetching conversation history: ".concat(error_1), "conversation_history");
+                    }
+                    return [2 /*return*/, []];
+                case 6: return [2 /*return*/];
+            }
+        });
+    }); };
+    useEffect(function () {
+        if (!apiKey) {
+            console.error("Blumessage Chat: API key is required");
+            var errorMessage = "API key is required";
+            setError(errorMessage);
+            if (onError) {
+                onError(errorMessage, "missing_api_key");
+            }
+            return;
+        }
+        // Validate API key with Blumessage API
+        var validateApiKey = function () { return __awaiter(void 0, void 0, void 0, function () {
+            var response, historyMessages, errorMessage, err_1, errorMessage;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        _a.trys.push([0, 9, , 10]);
+                        setIsInitialized(false);
+                        setError(null);
+                        console.log("Initializing Blumessage chat...");
+                        return [4 /*yield*/, fetch('https://api.blumessage.com/api/v1/api-keys/validate', {
+                                method: 'POST',
+                                headers: {
+                                    'Content-Type': 'application/json',
+                                },
+                                body: JSON.stringify({ apiKey: apiKey }),
+                            })];
+                    case 1:
+                        response = _a.sent();
+                        if (!(response.status === 201)) return [3 /*break*/, 7];
+                        console.log("Blumessage chat initialized successfully");
+                        setIsInitialized(true);
+                        setError(null);
+                        if (!(initialMessages.length > 0 && conversationId)) return [3 /*break*/, 2];
+                        // Warn if both are provided - initialMessages takes precedence
+                        console.warn('Both initialMessages and conversationId provided. Using initialMessages and ignoring stored conversation.');
+                        setMessages(initialMessages);
+                        return [3 /*break*/, 6];
+                    case 2:
+                        if (!(initialMessages.length > 0)) return [3 /*break*/, 3];
+                        // Use provided initial messages
+                        setMessages(initialMessages);
+                        return [3 /*break*/, 6];
+                    case 3:
+                        if (!conversationId) return [3 /*break*/, 5];
+                        return [4 /*yield*/, fetchConversationHistory(conversationId)];
+                    case 4:
+                        historyMessages = _a.sent();
+                        setMessages(historyMessages); // Will be empty array if fetch failed
+                        return [3 /*break*/, 6];
+                    case 5:
+                        // No conversation ID and no initial messages - start with empty array
+                        setMessages([]);
+                        _a.label = 6;
+                    case 6: return [3 /*break*/, 8];
+                    case 7:
+                        console.error("Blumessage chat initialization failed:", response.status, response.statusText);
+                        errorMessage = "Unable to connect - invalid API key";
+                        setError(errorMessage);
+                        setIsInitialized(false);
+                        if (onError) {
+                            onError(errorMessage, "api_key_validation");
+                        }
+                        _a.label = 8;
+                    case 8: return [3 /*break*/, 10];
+                    case 9:
+                        err_1 = _a.sent();
+                        console.error("Blumessage chat initialization error:", err_1);
+                        errorMessage = "Unable to connect - network error";
+                        setError(errorMessage);
+                        setIsInitialized(false);
+                        if (onError) {
+                            onError(errorMessage, "network_error");
+                        }
+                        return [3 /*break*/, 10];
+                    case 10: return [2 /*return*/];
+                }
+            });
+        }); };
+        validateApiKey();
+    }, [apiKey, conversationId]);
+    var handleSendMessage = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var userMessage, currentInput, requestBody, response, apiResponse, assistantMessages, latestAssistantMessage, assistantResponse_1, errorMessage_1, error_2, errorMessage_2;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!inputValue.trim() || isLoading)
+                        return [2 /*return*/];
+                    userMessage = {
+                        id: Date.now().toString(),
+                        content: inputValue.trim(),
+                        role: 'user',
+                        timestamp: Date.now()
+                    };
+                    // Add user message to UI immediately
+                    setMessages(function (prev) { return __spreadArray(__spreadArray([], prev, true), [userMessage], false); });
+                    currentInput = inputValue.trim();
+                    setInputValue('');
+                    setIsLoading(true);
+                    // Call the callback if provided
+                    if (onUserMessage) {
+                        onUserMessage(userMessage);
+                    }
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 6, 7, 8]);
+                    requestBody = {
+                        message: currentInput,
+                    };
+                    // Include conversationId if we have one
+                    if (conversationId) {
+                        requestBody.conversationId = conversationId;
+                    }
+                    return [4 /*yield*/, fetch('https://api.blumessage.com/api/v1/conversations', {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                                'Authorization': "Bearer ".concat(apiKey),
+                            },
+                            body: JSON.stringify(requestBody),
+                        })];
+                case 2:
+                    response = _a.sent();
+                    if (!response.ok) return [3 /*break*/, 4];
+                    return [4 /*yield*/, response.json()];
+                case 3:
+                    apiResponse = _a.sent();
+                    // Update conversation ID if this is the first message
+                    if (!conversationId) {
+                        updateConversationId(apiResponse.conversationId);
+                    }
+                    assistantMessages = apiResponse.messages.filter(function (msg) { return msg.role === 'assistant'; });
+                    latestAssistantMessage = assistantMessages[assistantMessages.length - 1];
+                    if (latestAssistantMessage) {
+                        assistantResponse_1 = {
+                            id: (Date.now() + 1).toString(),
+                            content: latestAssistantMessage.content,
+                            role: 'assistant',
+                            timestamp: latestAssistantMessage.timestamp,
+                        };
+                        setMessages(function (prev) { return __spreadArray(__spreadArray([], prev, true), [assistantResponse_1], false); });
+                        // This was already handled in the component, assistant message callback
+                        if (onAssistantMessage) {
+                            onAssistantMessage(assistantResponse_1);
+                        }
+                    }
+                    return [3 /*break*/, 5];
+                case 4:
+                    console.error('Failed to send message to Blumessage API:', response.status, response.statusText);
+                    errorMessage_1 = {
+                        id: (Date.now() + 1).toString(),
+                        content: "Sorry, I'm having trouble connecting right now. Please try again.",
+                        role: 'assistant',
+                        timestamp: Date.now(),
+                    };
+                    setMessages(function (prev) { return __spreadArray(__spreadArray([], prev, true), [errorMessage_1], false); });
+                    if (onError) {
+                        onError("Failed to send message: ".concat(response.status, " ").concat(response.statusText), "message_send");
+                    }
+                    _a.label = 5;
+                case 5: return [3 /*break*/, 8];
+                case 6:
+                    error_2 = _a.sent();
+                    console.error('Error sending message to Blumessage API:', error_2);
+                    errorMessage_2 = {
+                        id: (Date.now() + 1).toString(),
+                        content: "Sorry, I'm having trouble connecting right now. Please try again.",
+                        role: 'assistant',
+                        timestamp: Date.now(),
+                    };
+                    setMessages(function (prev) { return __spreadArray(__spreadArray([], prev, true), [errorMessage_2], false); });
+                    if (onError) {
+                        onError("Error sending message: ".concat(error_2), "message_send");
+                    }
+                    return [3 /*break*/, 8];
+                case 7:
+                    setIsLoading(false);
+                    return [7 /*endfinally*/];
+                case 8: return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleKeyPress = function (e) {
+        if (e.key === 'Enter' && !isLoading) {
+            handleSendMessage();
+        }
+    };
+    // Auto-scroll to bottom when messages change
+    useEffect(function () {
+        var _a;
+        (_a = messagesEndRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth' });
+    }, [messages]);
+    // Auto-scroll to bottom when chat widget opens
+    useEffect(function () {
+        if (isOpen && floating) {
+            // Add a small delay to ensure the DOM is updated after the animation starts
+            setTimeout(function () {
+                var _a;
+                (_a = messagesEndRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth' });
+            }, 50);
+        }
+    }, [isOpen, floating]);
+    // Handle opening the chat with animation
+    var handleOpenChat = function () {
+        if (!isOpen && !isAnimating) {
+            setIsAnimating(true);
+            // Small delay to ensure smooth animation start
+            setTimeout(function () {
+                setIsOpen(true);
+                // Call the callback after the chat is open
+                if (onChatWidgetOpen) {
+                    onChatWidgetOpen();
+                }
+            }, 10);
+            // Animation duration
+            setTimeout(function () {
+                setIsAnimating(false);
+            }, 300);
+        }
+    };
+    // Handle closing the chat with animation
+    var handleCloseChat = function () {
+        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(function () {
+                setIsAnimating(false);
+            }, 300);
+        }
+    };
+    // Handle maximize/minimize toggle
+    var handleToggleMaximize = function () {
+        setIsMaximized(!isMaximized);
+    };
+    // Get the icon component based on the icon prop
+    var getIconComponent = function () {
+        // More permissive icon matching - handle various naming patterns
+        var iconName = icon.toLowerCase().replace(/[-_\s]/g, '');
+        // Try to match common icon patterns
+        if (iconName.includes('message') || iconName.includes('chat')) {
+            if (iconName.includes('square'))
+                return MessageSquare;
+            return MessageCircle;
+        }
+        if (iconName.includes('bot') || iconName.includes('robot'))
+            return Bot;
+        if (iconName.includes('phone') || iconName.includes('call'))
+            return Phone;
+        if (iconName.includes('mail') || iconName.includes('email'))
+            return Mail;
+        if (iconName.includes('headphone') || iconName.includes('support'))
+            return Headphones;
+        if (iconName.includes('user')) {
+            if (iconName.includes('users') || iconName.includes('group'))
+                return Users;
+            return User;
+        }
+        if (iconName.includes('heart') || iconName.includes('like') || iconName.includes('love'))
+            return Heart;
+        if (iconName.includes('star') || iconName.includes('favorite'))
+            return Star;
+        if (iconName.includes('zap') || iconName.includes('lightning') || iconName.includes('bolt'))
+            return Zap;
+        // Default fallback
+        return MessageCircle;
+    };
+    // Helper function to get position styles for floating button
+    var getButtonPositionStyles = function () {
+        var 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)',
+        };
+        switch (buttonPosition) {
+            case 'bottom-right':
+                return __assign(__assign({}, baseStyles), { bottom: '24px', right: '24px' });
+            case 'bottom-left':
+                return __assign(__assign({}, baseStyles), { bottom: '24px', left: '24px' });
+            case 'top-right':
+                return __assign(__assign({}, baseStyles), { top: '24px', right: '24px' });
+            case 'top-left':
+                return __assign(__assign({}, baseStyles), { top: '24px', left: '24px' });
+            default:
+                return __assign(__assign({}, baseStyles), { bottom: '24px', right: '24px' });
+        }
+    };
+    // Helper function to get position styles for floating chat window
+    var getChatPositionStyles = function () {
+        var getTransform = function () {
+            if (!isOpen) {
+                // Slide down for bottom positions, slide up for top positions
+                return (buttonPosition === null || buttonPosition === void 0 ? void 0 : buttonPosition.includes('bottom')) ? 'translateY(100%)' : 'translateY(-100%)';
+            }
+            return 'translateY(0)';
+        };
+        var 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',
+        };
+        // 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
+            var transformOrigin = 'center';
+            var 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 __assign(__assign({}, baseStyles), { top: '20px', left: '20px', right: '20px', bottom: '20px', transform: isOpen ? 'translateY(0)' : closedTransform, transformOrigin: transformOrigin });
+        }
+        switch (buttonPosition) {
+            case 'bottom-right':
+                return __assign(__assign({}, baseStyles), { bottom: '24px', right: '24px', transformOrigin: 'bottom right' });
+            case 'bottom-left':
+                return __assign(__assign({}, baseStyles), { bottom: '24px', left: '24px', transformOrigin: 'bottom left' });
+            case 'top-right':
+                return __assign(__assign({}, baseStyles), { top: '24px', right: '24px', transformOrigin: 'top right' });
+            case 'top-left':
+                return __assign(__assign({}, baseStyles), { top: '24px', left: '24px', transformOrigin: 'top left' });
+            default:
+                return __assign(__assign({}, baseStyles), { bottom: '24px', right: '24px', transformOrigin: 'bottom right' });
+        }
+    };
+    // Render chat window component
+    var renderChatWindow = function () {
+        var chatContent = (_jsxs("div", { className: "shadow-2xl flex flex-col overflow-hidden border ".concat(theme === 'dark'
+                ? 'bg-gray-900 border-gray-700'
+                : 'bg-white border-black/10'), style: {
+                width: (fullScreen || isMaximized) ? '100%' : actualWidth,
+                height: (fullScreen || isMaximized) ? '100%' : actualHeight,
+                fontFamily: 'system-ui, -apple-system, sans-serif',
+                borderRadius: (fullScreen || isMaximized) ? '12px' : '24px'
+            }, children: [_jsxs("div", { className: "flex items-center px-6 py-4 border-b ".concat(theme === 'dark'
+                        ? 'bg-gray-900 border-gray-700'
+                        : 'bg-white border-gray-100'), children: [_jsx("div", { className: "w-12 h-12 rounded-full flex items-center justify-center mr-4", style: { backgroundImage: primaryColor }, children: React.createElement(getIconComponent(), { className: "w-6 h-6 text-white" }) }), _jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "text-lg font-semibold m-0 leading-6 ".concat(theme === 'dark' ? 'text-gray-100' : 'text-gray-900'), children: name }), _jsx("div", { className: "text-sm m-0 leading-5 ".concat(theme === 'dark' ? 'text-gray-400' : 'text-gray-500'), children: subtitle })] }), floating && (_jsxs("div", { className: "flex items-center gap-1", children: [maximizeToggleButton && (_jsx("button", { onClick: handleToggleMaximize, className: "w-8 h-8 rounded-full flex items-center justify-center cursor-pointer transition-colors ".concat(theme === 'dark'
+                                        ? 'hover:bg-gray-800 text-gray-400 hover:text-gray-200'
+                                        : 'hover:bg-gray-100 text-gray-500 hover:text-gray-700'), children: isMaximized ? _jsx(Minimize2, { className: "w-4 h-4" }) : _jsx(Maximize, { className: "w-4 h-4" }) })), _jsx("button", { onClick: handleCloseChat, className: "w-8 h-8 rounded-full flex items-center justify-center cursor-pointer transition-colors ".concat(theme === 'dark'
+                                        ? 'hover:bg-gray-800 text-gray-400 hover:text-gray-200'
+                                        : 'hover:bg-gray-100 text-gray-500 hover:text-gray-700'), children: _jsx(X, { className: "w-4 h-4" }) })] }))] }), _jsxs("div", { className: "flex-1 px-6 py-4 flex flex-col gap-4 overflow-y-auto ".concat(theme === 'dark' ? 'bg-gray-800' : 'bg-gray-50'), children: [messages.map(function (message) { return (_jsx("div", { className: "flex ".concat(message.role === 'user' ? 'justify-end' : 'justify-start'), children: _jsx("div", { className: "px-4 py-3 rounded-2xl max-w-[80%] text-sm leading-6 ".concat(message.role === 'user'
+                                    ? 'text-white'
+                                    : theme === 'dark'
+                                        ? 'bg-gray-700 text-gray-100 border border-gray-600 shadow-sm'
+                                        : 'bg-white text-gray-800 border border-gray-200 shadow-sm'), style: message.role === 'user' ? { backgroundImage: primaryColor } : {}, children: message.content }) }, message.id)); }), isLoading && (_jsx("div", { className: "flex justify-start", children: _jsx("div", { className: "px-4 py-3 rounded-2xl max-w-[80%] text-sm leading-6 shadow-sm ".concat(theme === 'dark'
+                                    ? 'bg-gray-700 text-gray-100 border border-gray-600'
+                                    : 'bg-white text-gray-800 border border-gray-200'), children: _jsxs("div", { className: "flex space-x-1", children: [_jsx("div", { className: "w-2 h-2 rounded-full animate-bounce ".concat(theme === 'dark' ? 'bg-gray-400' : 'bg-gray-400'), style: { animationDelay: '0ms' } }), _jsx("div", { className: "w-2 h-2 rounded-full animate-bounce ".concat(theme === 'dark' ? 'bg-gray-400' : 'bg-gray-400'), style: { animationDelay: '150ms' } }), _jsx("div", { className: "w-2 h-2 rounded-full animate-bounce ".concat(theme === 'dark' ? 'bg-gray-400' : 'bg-gray-400'), style: { animationDelay: '300ms' } })] }) }) })), messages.length === 0 && !isLoading && (_jsx("div", { className: "text-center text-sm py-8 ".concat(theme === 'dark' ? 'text-gray-400' : 'text-gray-500'), children: "No messages yet. Start a conversation!" })), _jsx("div", { ref: messagesEndRef })] }), _jsx("div", { className: "px-6 py-4 border-t ".concat(theme === 'dark'
+                        ? 'bg-gray-900 border-gray-700'
+                        : 'bg-white border-gray-100'), children: _jsxs("div", { className: "flex items-center rounded-full px-4 py-3 border ".concat(theme === 'dark'
+                            ? 'bg-gray-800 border-gray-600'
+                            : 'bg-gray-50 border-gray-200'), children: [_jsx("input", { className: "flex-1 border-none bg-transparent outline-none text-sm font-inherit ".concat(theme === 'dark' ? 'text-gray-100' : 'text-gray-700'), type: "text", placeholder: placeholder, value: inputValue, onChange: function (e) { return setInputValue(e.target.value); }, onKeyPress: handleKeyPress }), _jsx("button", { className: "w-8 h-8 rounded-full border-none flex items-center justify-center cursor-pointer ml-2 text-white transition-all disabled:opacity-50 disabled:cursor-not-allowed", style: { backgroundImage: primaryColor }, onClick: handleSendMessage, disabled: !inputValue.trim() || isLoading, children: isLoading ? (_jsx(Loader2, { className: "w-4 h-4 animate-spin" })) : (_jsx(Send, { className: "w-4 h-4" })) })] }) })] }));
+        if (floating) {
+            return (_jsx("div", { style: getChatPositionStyles(), children: chatContent }));
+        }
+        return chatContent;
+    };
+    // Don't render anything if no API key is provided
+    if (!apiKey) {
+        return null;
+    }
+    if (error) {
+        var errorContent = (_jsxs("div", { className: "shadow-2xl flex flex-col overflow-hidden border ".concat(theme === 'dark'
+                ? 'bg-gray-900 border-gray-700'
+                : 'bg-white border-black/10'), style: {
+                width: (fullScreen || isMaximized) ? '100%' : actualWidth,
+                height: (fullScreen || isMaximized) ? '100%' : actualHeight,
+                fontFamily: 'system-ui, -apple-system, sans-serif',
+                borderRadius: (fullScreen || isMaximized) ? '12px' : '24px'
+            }, children: [_jsxs("div", { className: "flex items-center px-6 py-4 border-b ".concat(theme === 'dark'
+                        ? 'bg-gray-900 border-gray-700'
+                        : 'bg-white border-gray-100'), children: [_jsx("div", { className: "w-12 h-12 rounded-full bg-red-500 flex items-center justify-center mr-4", children: _jsx(AlertTriangle, { className: "w-6 h-6 text-white" }) }), _jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "text-lg font-semibold m-0 leading-6 ".concat(theme === 'dark' ? 'text-gray-100' : 'text-gray-900'), children: "Connection Error" }), _jsx("div", { className: "text-sm m-0 leading-5 ".concat(theme === 'dark' ? 'text-gray-400' : 'text-gray-500'), children: "Unable to connect" })] }), floating && (_jsxs("div", { className: "flex items-center gap-1", children: [maximizeToggleButton && (_jsx("button", { onClick: handleToggleMaximize, className: "w-8 h-8 rounded-full flex items-center justify-center cursor-pointer transition-colors ".concat(theme === 'dark'
+                                        ? 'hover:bg-gray-800 text-gray-400 hover:text-gray-200'
+                                        : 'hover:bg-gray-100 text-gray-500 hover:text-gray-700'), children: isMaximized ? _jsx(Minimize2, { className: "w-4 h-4" }) : _jsx(Maximize, { className: "w-4 h-4" }) })), _jsx("button", { onClick: handleCloseChat, className: "w-8 h-8 rounded-full flex items-center justify-center cursor-pointer transition-colors ".concat(theme === 'dark'
+                                        ? 'hover:bg-gray-800 text-gray-400 hover:text-gray-200'
+                                        : 'hover:bg-gray-100 text-gray-500 hover:text-gray-700'), children: _jsx(X, { className: "w-4 h-4" }) })] }))] }), _jsx("div", { className: "flex-1 px-6 py-4 flex flex-col gap-4 overflow-y-auto ".concat(theme === 'dark' ? 'bg-gray-800' : 'bg-gray-50'), children: _jsx("div", { className: "flex justify-start", children: _jsx("div", { className: "px-4 py-3 rounded-2xl max-w-[80%] text-sm leading-6 shadow-sm ".concat(theme === 'dark'
+                                ? 'bg-gray-700 text-gray-100 border border-gray-600'
+                                : 'bg-white text-gray-800 border border-gray-200'), children: error }) }) })] }));
+        if (floating) {
+            return (_jsxs(_Fragment, { children: [_jsxs("button", { onClick: handleOpenChat, className: "text-white rounded-full shadow-lg transition-all duration-200 flex items-center justify-center gap-2 ".concat(buttonText ? 'px-4 py-3 h-12' : 'w-14 h-14'), style: __assign(__assign(__assign({}, getButtonPositionStyles()), buttonStyle), { backgroundImage: primaryColor }), children: [React.createElement(getIconComponent(), { className: "w-6 h-6" }), buttonText && _jsx("span", { className: "text-sm font-medium whitespace-nowrap", children: buttonText })] }), _jsx("div", { style: getChatPositionStyles(), children: errorContent })] }));
+        }
+        return errorContent;
+    }
+    if (!isInitialized) {
+        var loadingContent = (_jsxs("div", { className: "shadow-2xl flex flex-col overflow-hidden border ".concat(theme === 'dark'
+                ? 'bg-gray-900 border-gray-700'
+                : 'bg-white border-black/10'), style: {
+                width: (fullScreen || isMaximized) ? '100%' : actualWidth,
+                height: (fullScreen || isMaximized) ? '100%' : actualHeight,
+                fontFamily: 'system-ui, -apple-system, sans-serif',
+                borderRadius: (fullScreen || isMaximized) ? '12px' : '24px'
+            }, children: [_jsxs("div", { className: "flex items-center px-6 py-4 border-b ".concat(theme === 'dark'
+                        ? 'bg-gray-900 border-gray-700'
+                        : 'bg-white border-gray-100'), children: [_jsx("div", { className: "w-12 h-12 rounded-full flex items-center justify-center mr-4", style: { backgroundImage: primaryColor }, children: _jsx(Loader2, { className: "w-6 h-6 text-white animate-spin" }) }), _jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "text-lg font-semibold m-0 leading-6 ".concat(theme === 'dark' ? 'text-gray-100' : 'text-gray-900'), children: name }), _jsx("div", { className: "text-sm m-0 leading-5 ".concat(theme === 'dark' ? 'text-gray-400' : 'text-gray-500'), children: subtitle })] }), floating && (_jsxs("div", { className: "flex items-center gap-1", children: [maximizeToggleButton && (_jsx("button", { onClick: handleToggleMaximize, className: "w-8 h-8 rounded-full flex items-center justify-center cursor-pointer transition-colors ".concat(theme === 'dark'
+                                        ? 'hover:bg-gray-800 text-gray-400 hover:text-gray-200'
+                                        : 'hover:bg-gray-100 text-gray-500 hover:text-gray-700'), children: isMaximized ? _jsx(Minimize2, { className: "w-4 h-4" }) : _jsx(Maximize, { className: "w-4 h-4" }) })), _jsx("button", { onClick: handleCloseChat, className: "w-8 h-8 rounded-full flex items-center justify-center cursor-pointer transition-colors ".concat(theme === 'dark'
+                                        ? 'hover:bg-gray-800 text-gray-400 hover:text-gray-200'
+                                        : 'hover:bg-gray-100 text-gray-500 hover:text-gray-700'), children: _jsx(X, { className: "w-4 h-4" }) })] }))] }), _jsx("div", { className: "flex-1 px-6 py-4 flex flex-col gap-4 overflow-y-auto ".concat(theme === 'dark' ? 'bg-gray-800' : 'bg-gray-50'), children: _jsx("div", { className: "text-center text-sm py-8 ".concat(theme === 'dark' ? 'text-gray-400' : 'text-gray-500'), children: "Ready to chat..." }) })] }));
+        if (floating) {
+            return (_jsxs(_Fragment, { children: [_jsxs("button", { onClick: handleOpenChat, className: "text-white rounded-full shadow-lg transition-all duration-200 flex items-center justify-center gap-2 ".concat(buttonText ? 'px-4 py-3 h-12' : 'w-14 h-14'), style: __assign(__assign(__assign({}, getButtonPositionStyles()), buttonStyle), { backgroundImage: primaryColor }), children: [React.createElement(getIconComponent(), { className: "w-6 h-6" }), buttonText && _jsx("span", { className: "text-sm font-medium whitespace-nowrap", children: buttonText })] }), _jsx("div", { style: getChatPositionStyles(), children: loadingContent })] }));
+        }
+        return loadingContent;
+    }
+    // Main render for initialized state
+    if (floating) {
+        return (_jsxs(_Fragment, { children: [_jsxs("button", { onClick: handleOpenChat, className: "text-white rounded-full shadow-lg transition-all duration-200 flex items-center justify-center gap-2 ".concat(buttonText ? 'px-4 py-3 h-12' : 'w-14 h-14'), style: __assign(__assign(__assign({}, getButtonPositionStyles()), buttonStyle), { backgroundImage: primaryColor }), children: [React.createElement(getIconComponent(), { className: "w-6 h-6" }), buttonText && _jsx("span", { className: "text-sm font-medium whitespace-nowrap", children: buttonText })] }), renderChatWindow()] }));
+    }
+    return renderChatWindow();
+};