@blumessage/react-chat 1.0.4 → 1.0.6

package/dist/BlumessageChat.js

@@ -57,6 +57,15 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 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";
+// Custom CSS animations that don't depend on Tailwind
+var customStyles = "\n  @keyframes bounce {\n    0%, 100% {\n      transform: translateY(0);\n    }\n    50% {\n      transform: translateY(-25%);\n    }\n  }\n  \n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n  \n  .blumessage-animate-bounce {\n    animation: bounce 1s infinite;\n  }\n  \n  .blumessage-animate-spin {\n    animation: spin 1s linear infinite;\n  }\n";
+// Inject custom styles
+if (typeof document !== 'undefined' && !document.getElementById('blumessage-styles')) {
+    var style = document.createElement('style');
+    style.id = 'blumessage-styles';
+    style.textContent = customStyles;
+    document.head.appendChild(style);
+}
 // Session storage key for conversation ID
 var CONVERSATION_ID_KEY = 'blumessage_conversation_id';
 // Utility functions for storage
@@ -111,6 +120,7 @@ export var BlumessageChat = function (_a) {
     var _z = useState(false), isLoading = _z[0], setIsLoading = _z[1];
     var _0 = useState(false), isMaximized = _0[0], setIsMaximized = _0[1];
     var messagesEndRef = useRef(null);
+    var isInitialLoad = useRef(true);
     // Helper function to get dimensions based on size
     var getDimensions = function () {
         // If custom width/height are provided, use them
@@ -118,15 +128,19 @@ export var BlumessageChat = function (_a) {
             return { width: width, height: height };
         }
         // Otherwise, use size-based dimensions
+        var dimensions;
         switch (size) {
             case 'small':
-                return { width: '320px', height: '400px' };
+                dimensions = { width: '320px', height: '400px' };
+                break;
             case 'large':
-                return { width: '480px', height: '600px' };
+                dimensions = { width: '680px', height: '800px' };
+                break;
             case 'medium':
             default:
-                return { width: '380px', height: '500px' };
+                dimensions = { width: '480px', height: '600px' };
         }
+        return dimensions;
     };
     var _1 = getDimensions(), actualWidth = _1.width, actualHeight = _1.height;
     // Function to update conversation ID and notify parent
@@ -153,7 +167,7 @@ export var BlumessageChat = function (_a) {
                     return [4 /*yield*/, fetch("https://api.blumessage.com/api/v1/conversations/session/".concat(convId), {
                             method: 'GET',
                             headers: {
-                                'Authorization': apiKey,
+                                'Authorization': "Bearer ".concat(apiKey),
                             },
                         })];
                 case 1:
@@ -198,11 +212,11 @@ export var BlumessageChat = function (_a) {
         }
         // 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;
+            var response, errorMessage, err_1, errorMessage;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        _a.trys.push([0, 9, , 10]);
+                        _a.trys.push([0, 2, , 3]);
                         setIsInitialized(false);
                         setError(null);
                         console.log("Initializing Blumessage chat...");
@@ -215,43 +229,22 @@ export var BlumessageChat = function (_a) {
                             })];
                     case 1:
                         response = _a.sent();
-                        if (!response.ok) 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");
+                        if (response.ok) {
+                            console.log("Blumessage chat initialized successfully");
+                            setIsInitialized(true);
+                            setError(null);
+                        }
+                        else {
+                            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:
+                        return [3 /*break*/, 3];
+                    case 2:
                         err_1 = _a.sent();
                         console.error("Blumessage chat initialization error:", err_1);
                         errorMessage = "Unable to connect - network error";
@@ -260,13 +253,52 @@ export var BlumessageChat = function (_a) {
                         if (onError) {
                             onError(errorMessage, "network_error");
                         }
-                        return [3 /*break*/, 10];
-                    case 10: return [2 /*return*/];
+                        return [3 /*break*/, 3];
+                    case 3: return [2 /*return*/];
                 }
             });
         }); };
         validateApiKey();
-    }, [apiKey, conversationId]);
+    }, [apiKey]);
+    // Handle initial message loading (only runs once on mount)
+    useEffect(function () {
+        var loadInitialMessages = function () { return __awaiter(void 0, void 0, void 0, function () {
+            var historyMessages;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!isInitialLoad.current) return [3 /*break*/, 5];
+                        isInitialLoad.current = false;
+                        if (!(initialMessages.length > 0 && conversationId)) return [3 /*break*/, 1];
+                        // 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*/, 5];
+                    case 1:
+                        if (!(initialMessages.length > 0)) return [3 /*break*/, 2];
+                        // Use provided initial messages
+                        setMessages(initialMessages);
+                        return [3 /*break*/, 5];
+                    case 2:
+                        if (!conversationId) return [3 /*break*/, 4];
+                        return [4 /*yield*/, fetchConversationHistory(conversationId)];
+                    case 3:
+                        historyMessages = _a.sent();
+                        setMessages(historyMessages); // Will be empty array if fetch failed
+                        return [3 /*break*/, 5];
+                    case 4:
+                        // No conversation ID and no initial messages - start with empty array
+                        setMessages([]);
+                        _a.label = 5;
+                    case 5: return [2 /*return*/];
+                }
+            });
+        }); };
+        // Only load initial messages after API key is validated
+        if (isInitialized) {
+            loadInitialMessages();
+        }
+    }, [isInitialized]);
     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) {
@@ -560,11 +592,11 @@ export var BlumessageChat = function (_a) {
                                         ? '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-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 blumessage-animate-bounce ".concat(theme === 'dark' ? 'bg-gray-400' : 'bg-gray-400'), style: { animationDelay: '0ms' } }), _jsx("div", { className: "w-2 h-2 rounded-full blumessage-animate-bounce ".concat(theme === 'dark' ? 'bg-gray-400' : 'bg-gray-400'), style: { animationDelay: '150ms' } }), _jsx("div", { className: "w-2 h-2 rounded-full blumessage-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" })) })] }) })] }));
+                            : '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 blumessage-animate-spin" })) : (_jsx(Send, { className: "w-4 h-4" })) })] }) })] }));
         if (floating) {
             return (_jsx("div", { style: getChatPositionStyles(), children: chatContent }));
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blumessage/react-chat",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "A React TypeScript chat widget component with floating button, theming, and Blumessage API integration",
   "license": "MIT",
   "author": "Blumessage <contact@blumessage.com>",