@blumessage/react-chat 1.1.4 → 1.2.1

package/dist/BlumessageChat.js

@@ -60,7 +60,7 @@ import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 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";
+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  \n  /* Mobile-specific styles */\n  @media (max-width: 768px) {\n    .blumessage-mobile-fullscreen {\n      position: fixed !important;\n      top: 0 !important;\n      left: 0 !important;\n      right: 0 !important;\n      bottom: 0 !important;\n      width: 100% !important;\n      height: 100% !important;\n      max-width: 100% !important;\n      max-height: 100% !important;\n      border-radius: 0 !important;\n      z-index: 9999 !important;\n    }\n    \n    .blumessage-mobile-chat {\n      border-radius: 16px !important;\n    }\n    \n    .blumessage-mobile-button {\n      position: fixed !important;\n      bottom: 20px !important;\n      right: 20px !important;\n      left: auto !important;\n      top: auto !important;\n    }\n  }\n  \n  @media (max-width: 480px) {\n    .blumessage-mobile-fullscreen {\n      border-radius: 0 !important;\n    }\n    \n    .blumessage-mobile-chat {\n      border-radius: 12px !important;\n    }\n    \n    .blumessage-mobile-button {\n      bottom: 16px !important;\n      right: 16px !important;\n    }\n  }\n";
 // Inject custom styles
 if (typeof document !== 'undefined' && !document.getElementById('blumessage-styles')) {
     var style = document.createElement('style');
@@ -68,42 +68,59 @@ if (typeof document !== 'undefined' && !document.getElementById('blumessage-styl
     style.textContent = customStyles;
     document.head.appendChild(style);
 }
-// Session storage key for conversation ID
-var CONVERSATION_ID_KEY = 'blumessage_conversation_id';
+// Session storage key for conversation token
+var CONVERSATION_TOKEN_KEY = 'blumessage_conversation_token';
 // Utility functions for storage
-var saveConversationId = function (conversationId, persistent) {
+var saveConversationToken = function (token, persistent) {
     if (persistent === void 0) { persistent = false; }
     try {
         var storage = persistent ? localStorage : sessionStorage;
-        storage.setItem(CONVERSATION_ID_KEY, conversationId);
+        storage.setItem(CONVERSATION_TOKEN_KEY, token);
     }
     catch (error) {
-        console.warn("Failed to save conversation ID to ".concat(persistent ? 'local' : 'session', " storage:"), error);
+        console.warn("Failed to save conversation token to ".concat(persistent ? 'local' : 'session', " storage:"), error);
     }
 };
-var getStoredConversationId = function (persistent) {
+var getStoredConversationToken = function (persistent) {
     if (persistent === void 0) { persistent = false; }
     try {
         var storage = persistent ? localStorage : sessionStorage;
-        return storage.getItem(CONVERSATION_ID_KEY);
+        return storage.getItem(CONVERSATION_TOKEN_KEY);
     }
     catch (error) {
-        console.warn("Failed to get conversation ID from ".concat(persistent ? 'local' : 'session', " storage:"), error);
+        console.warn("Failed to get conversation token from ".concat(persistent ? 'local' : 'session', " storage:"), error);
         return null;
     }
 };
-var clearStoredConversationId = function (persistent) {
+var clearStoredConversationToken = function (persistent) {
     if (persistent === void 0) { persistent = false; }
     try {
         var storage = persistent ? localStorage : sessionStorage;
-        storage.removeItem(CONVERSATION_ID_KEY);
+        storage.removeItem(CONVERSATION_TOKEN_KEY);
     }
     catch (error) {
-        console.warn("Failed to clear conversation ID from ".concat(persistent ? 'local' : 'session', " storage:"), error);
+        console.warn("Failed to clear conversation token from ".concat(persistent ? 'local' : 'session', " storage:"), error);
     }
 };
+// Custom hook for mobile detection
+var useIsMobile = function () {
+    var _a = useState(false), isMobile = _a[0], setIsMobile = _a[1];
+    useEffect(function () {
+        var checkIsMobile = function () {
+            var userAgent = navigator.userAgent || navigator.vendor || window.opera;
+            var mobileRegex = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i;
+            var isMobileDevice = mobileRegex.test(userAgent.toLowerCase());
+            var isSmallScreen = window.innerWidth <= 768;
+            setIsMobile(isMobileDevice || isSmallScreen);
+        };
+        checkIsMobile();
+        window.addEventListener('resize', checkIsMobile);
+        return function () { return window.removeEventListener('resize', checkIsMobile); };
+    }, []);
+    return isMobile;
+};
 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, _j = _a.showTimestamps, showTimestamps = _j === void 0 ? false : _j, _k = _a.typingText, typingText = _k === void 0 ? "Agent is typing..." : _k, _l = _a.emptyStateText, emptyStateText = _l === void 0 ? "Start a conversation!" : _l, _m = _a.markdown, markdown = _m === void 0 ? true : _m, 
+    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, initialToken = _a.token, onTokenChange = _a.onTokenChange, onChatWidgetOpen = _a.onChatWidgetOpen, onChatWidgetClosed = _a.onChatWidgetClosed, onError = _a.onError, _h = _a.persistent, persistent = _h === void 0 ? false : _h, _j = _a.showTimestamps, showTimestamps = _j === void 0 ? false : _j, _k = _a.typingText, typingText = _k === void 0 ? "Agent is typing..." : _k, _l = _a.emptyStateText, emptyStateText = _l === void 0 ? "Start a conversation!" : _l, _m = _a.markdown, markdown = _m === void 0 ? true : _m, 
     // Floating button props
     _o = _a.floating, 
     // Floating button props
@@ -116,13 +133,15 @@ export var BlumessageChat = function (_a) {
     var _x = useState(null), error = _x[0], setError = _x[1];
     var _y = useState(initialMessages), messages = _y[0], setMessages = _y[1];
     var _z = useState(''), inputValue = _z[0], setInputValue = _z[1];
-    var _0 = useState(initialConversationId || getStoredConversationId(persistent)), conversationId = _0[0], setConversationId = _0[1];
+    var _0 = useState(initialToken || getStoredConversationToken(persistent)), token = _0[0], setToken = _0[1];
     var _1 = useState(defaultOpen), isOpen = _1[0], setIsOpen = _1[1];
     var _2 = useState(false), isAnimating = _2[0], setIsAnimating = _2[1];
     var _3 = useState(false), isLoading = _3[0], setIsLoading = _3[1];
     var _4 = useState(false), isMaximized = _4[0], setIsMaximized = _4[1];
     var messagesEndRef = useRef(null);
     var isInitialLoad = useRef(true);
+    // Mobile detection
+    var isMobile = useIsMobile();
     // Helper function to format timestamp
     var formatTimestamp = function (timestamp) {
         var date = new Date(timestamp);
@@ -157,7 +176,23 @@ export var BlumessageChat = function (_a) {
         if (width && height) {
             return { width: width, height: height };
         }
-        // Otherwise, use size-based dimensions
+        // 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
         var dimensions;
         switch (size) {
             case 'small':
@@ -173,28 +208,33 @@ export var BlumessageChat = function (_a) {
         return dimensions;
     };
     var _5 = getDimensions(), actualWidth = _5.width, actualHeight = _5.height;
-    // Function to update conversation ID and notify parent
-    var updateConversationId = function (newConversationId) {
-        setConversationId(newConversationId);
-        if (newConversationId) {
-            saveConversationId(newConversationId, persistent);
+    // Function to clear conversation and start fresh
+    var clearConversation = function () {
+        updateConversationToken(null);
+        setMessages([]);
+    };
+    // Function to update conversation token and notify parent
+    var updateConversationToken = function (newToken) {
+        setToken(newToken);
+        if (newToken) {
+            saveConversationToken(newToken, persistent);
         }
         else {
-            clearStoredConversationId(persistent);
+            clearStoredConversationToken(persistent);
         }
-        if (onConversationIdChange) {
-            onConversationIdChange(newConversationId);
+        if (onTokenChange) {
+            onTokenChange(newToken);
         }
     };
     // Function to fetch conversation history
-    var fetchConversationHistory = function (convId) { return __awaiter(void 0, void 0, void 0, function () {
+    var fetchConversationHistory = function (convToken) { 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), {
+                    console.log("Fetching conversation history for:", convToken);
+                    return [4 /*yield*/, fetch("https://api.blumessage.com/api/v1/conversations/session/".concat(convToken), {
                             method: 'GET',
                             headers: {
                                 'Authorization': "Bearer ".concat(apiKey),
@@ -211,7 +251,7 @@ export var BlumessageChat = function (_a) {
                 case 3:
                     console.error("Failed to fetch conversation history:", response.status, response.statusText);
                     // Clear invalid conversation ID from storage
-                    updateConversationId(null);
+                    updateConversationToken(null);
                     if (onError) {
                         onError("Failed to fetch conversation history: ".concat(response.status, " ").concat(response.statusText), "conversation_history");
                     }
@@ -221,7 +261,7 @@ export var BlumessageChat = function (_a) {
                     error_1 = _a.sent();
                     console.error("Error fetching conversation history:", error_1);
                     // Clear invalid conversation ID from storage
-                    updateConversationId(null);
+                    updateConversationToken(null);
                     if (onError) {
                         onError("Error fetching conversation history: ".concat(error_1), "conversation_history");
                     }
@@ -299,9 +339,9 @@ export var BlumessageChat = function (_a) {
                     case 0:
                         if (!isInitialLoad.current) return [3 /*break*/, 5];
                         isInitialLoad.current = false;
-                        if (!(initialMessages.length > 0 && conversationId)) return [3 /*break*/, 1];
+                        if (!(initialMessages.length > 0 && token)) 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.');
+                        console.warn('Both initialMessages and token provided. Using initialMessages and ignoring stored token.');
                         setMessages(initialMessages);
                         return [3 /*break*/, 5];
                     case 1:
@@ -310,8 +350,8 @@ export var BlumessageChat = function (_a) {
                         setMessages(initialMessages);
                         return [3 /*break*/, 5];
                     case 2:
-                        if (!conversationId) return [3 /*break*/, 4];
-                        return [4 /*yield*/, fetchConversationHistory(conversationId)];
+                        if (!token) return [3 /*break*/, 4];
+                        return [4 /*yield*/, fetchConversationHistory(token)];
                     case 3:
                         historyMessages = _a.sent();
                         setMessages(historyMessages); // Will be empty array if fetch failed
@@ -357,9 +397,9 @@ export var BlumessageChat = function (_a) {
                     requestBody = {
                         message: currentInput,
                     };
-                    // Include conversationId if we have one
-                    if (conversationId) {
-                        requestBody.conversationId = conversationId;
+                    // Include token if we have one
+                    if (token) {
+                        requestBody.token = token;
                     }
                     return [4 /*yield*/, fetch('https://api.blumessage.com/api/v1/conversations', {
                             method: 'POST',
@@ -375,10 +415,8 @@ export var BlumessageChat = function (_a) {
                     return [4 /*yield*/, response.json()];
                 case 3:
                     apiResponse = _a.sent();
-                    // Update conversation ID if this is the first message
-                    if (!conversationId) {
-                        updateConversationId(apiResponse.conversationId);
-                    }
+                    // Update token from response (for both first message and continuing conversations)
+                    updateConversationToken(apiResponse.token);
                     assistantMessages = apiResponse.messages.filter(function (msg) { return msg.role === 'assistant'; });
                     latestAssistantMessage = assistantMessages[assistantMessages.length - 1];
                     if (latestAssistantMessage) {
@@ -389,7 +427,6 @@ export var BlumessageChat = function (_a) {
                             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);
                         }
@@ -397,6 +434,10 @@ export var BlumessageChat = function (_a) {
                     return [3 /*break*/, 5];
                 case 4:
                     console.error('Failed to send message to Blumessage API:', response.status, response.statusText);
+                    // If token is invalid, clear it
+                    if (response.status === 401 || response.status === 403) {
+                        updateConversationToken(null);
+                    }
                     errorMessage_1 = {
                         id: (Date.now() + 1).toString(),
                         content: "Sorry, I'm having trouble connecting right now. Please try again.",
@@ -431,7 +472,8 @@ export var BlumessageChat = function (_a) {
         });
     }); };
     var handleKeyPress = function (e) {
-        if (e.key === 'Enter' && !isLoading) {
+        if (e.key === 'Enter' && !e.shiftKey && !isLoading) {
+            e.preventDefault();
             handleSendMessage();
         }
     };
@@ -530,6 +572,11 @@ export var BlumessageChat = function (_a) {
             pointerEvents: isOpen ? 'none' : 'auto',
             transition: 'opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
         };
+        // Mobile-specific positioning
+        if (isMobile) {
+            return __assign(__assign({}, baseStyles), { bottom: '20px', right: '20px', left: 'auto', top: 'auto' });
+        }
+        // Desktop positioning
         switch (buttonPosition) {
             case 'bottom-right':
                 return __assign(__assign({}, baseStyles), { bottom: '24px', right: '24px' });
@@ -560,6 +607,10 @@ export var BlumessageChat = function (_a) {
             opacity: isOpen ? 1 : 0,
             pointerEvents: isOpen ? 'auto' : 'none',
         };
+        // Mobile-specific positioning (always fullscreen on mobile)
+        if (isMobile) {
+            return __assign(__assign({}, 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
@@ -588,6 +639,7 @@ export var BlumessageChat = function (_a) {
             }
             return __assign(__assign({}, baseStyles), { top: '20px', left: '20px', right: '20px', bottom: '20px', transform: isOpen ? 'translateY(0)' : closedTransform, transformOrigin: transformOrigin });
         }
+        // Desktop positioning
         switch (buttonPosition) {
             case 'bottom-right':
                 return __assign(__assign({}, baseStyles), { bottom: '24px', right: '24px', transformOrigin: 'bottom right' });
@@ -610,29 +662,32 @@ export var BlumessageChat = function (_a) {
     };
     // Render chat window component
     var renderChatWindow = function () {
-        var chatContent = (_jsxs("div", { className: "shadow-2xl flex flex-col overflow-hidden border ".concat(theme === 'dark'
+        var isFullscreenMode = fullScreen || isMaximized || isMobile;
+        var chatContent = (_jsxs("div", { className: "shadow-2xl flex flex-col overflow-hidden border ".concat(isMobile ? 'blumessage-mobile-fullscreen' : '', " ").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,
+                width: isFullscreenMode ? '100%' : actualWidth,
+                height: isFullscreenMode ? '100%' : actualHeight,
                 fontFamily: 'system-ui, -apple-system, sans-serif',
-                borderRadius: (fullScreen || isMaximized) ? '12px' : '24px'
+                borderRadius: isMobile ? '0' : (isFullscreenMode ? '12px' : '24px')
             }, children: [_jsxs("div", { className: "border-b ".concat(theme === 'dark'
                         ? 'bg-gray-900 border-gray-700'
                         : 'bg-white border-gray-100'), style: {
                         display: 'flex',
                         alignItems: 'center',
-                        padding: '16px 24px'
+                        padding: isMobile ? '12px 16px' : '16px 24px'
                     }, children: [_jsx("div", { className: "rounded-full flex items-center justify-center", style: {
                                 backgroundImage: primaryColor,
-                                width: '48px',
-                                height: '48px',
-                                marginRight: '24px'
-                            }, children: React.createElement(getIconComponent(), { className: "w-6 h-6 text-white" }) }), _jsxs("div", { style: { 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'
+                                width: isMobile ? '40px' : '48px',
+                                height: isMobile ? '40px' : '48px',
+                                marginRight: isMobile ? '16px' : '24px'
+                            }, children: React.createElement(getIconComponent(), {
+                                className: isMobile ? "w-5 h-5 text-white" : "w-6 h-6 text-white"
+                            }) }), _jsxs("div", { style: { flex: 1 }, children: [_jsx("div", { className: "".concat(isMobile ? 'text-base' : '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 && !isMobile && (_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: "max-w-[80%] inline-block ".concat(message.role === 'user' ? '' : 'text-left'), children: _jsxs("div", { className: "inline-block px-4 py-3 rounded-2xl text-sm leading-6 text-left ".concat(message.role === 'user'
+                                        : 'hover:bg-gray-100 text-gray-500 hover:text-gray-700'), children: _jsx(X, { className: "w-4 h-4" }) })] }))] }), _jsxs("div", { className: "flex-1 overflow-y-auto ".concat(theme === 'dark' ? 'bg-gray-800' : 'bg-gray-50'), style: { padding: isMobile ? '12px 16px' : '16px 24px' }, children: [messages.map(function (message) { return (_jsx("div", { className: "flex ".concat(message.role === 'user' ? 'justify-end' : 'justify-start', " mb-4"), children: _jsx("div", { className: "".concat(isMobile ? 'max-w-[85%]' : 'max-w-[80%]', " inline-block ").concat(message.role === 'user' ? '' : 'text-left'), children: _jsxs("div", { className: "inline-block px-4 py-3 rounded-2xl text-sm leading-6 text-left ".concat(message.role === 'user'
                                         ? 'text-white'
                                         : theme === 'dark'
                                             ? 'bg-gray-700 text-gray-100 border border-gray-600 shadow-sm'
@@ -642,13 +697,24 @@ export var BlumessageChat = function (_a) {
                                                     ? 'text-gray-400'
                                                     : 'text-gray-500'), style: {
                                                 textAlign: message.role === 'user' ? 'right' : 'left'
-                                            }, children: formatTimestamp(message.timestamp) }))] }) }) }, 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'
+                                            }, children: formatTimestamp(message.timestamp) }))] }) }) }, message.id)); }), isLoading && (_jsx("div", { className: "flex justify-start mb-4", children: _jsx("div", { className: "px-4 py-3 rounded-2xl ".concat(isMobile ? 'max-w-[85%]' : '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: _jsx("div", { className: "".concat(theme === 'dark' ? 'text-gray-300' : 'text-gray-600'), style: { fontStyle: 'italic' }, children: typingText }) }) })), messages.length === 0 && !isLoading && (_jsx("div", { className: "text-center text-sm py-8 ".concat(theme === 'dark' ? 'text-gray-400' : 'text-gray-500'), children: emptyStateText })), _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: _jsx("div", { className: "".concat(theme === 'dark' ? 'text-gray-300' : 'text-gray-600'), style: { fontStyle: 'italic' }, children: typingText }) }) })), messages.length === 0 && !isLoading && (_jsx("div", { className: "text-center text-sm py-8 ".concat(theme === 'dark' ? 'text-gray-400' : 'text-gray-500'), children: emptyStateText })), _jsx("div", { ref: messagesEndRef })] }), _jsx("div", { className: "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-white border-gray-100'), style: { padding: isMobile ? '12px 16px' : '16px 24px' }, children: _jsxs("div", { className: "flex items-center rounded-2xl 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 blumessage-animate-spin" })) : (_jsx(Send, { className: "w-4 h-4" })) })] }) })] }));
+                            : 'bg-gray-50 border-gray-200'), children: [_jsx("textarea", { className: "flex-1 border-none bg-transparent outline-none text-sm font-inherit resize-none ".concat(theme === 'dark' ? 'text-gray-100' : 'text-gray-700'), placeholder: placeholder, value: inputValue, onChange: function (e) { return setInputValue(e.target.value); }, onKeyDown: handleKeyPress, rows: 1, style: {
+                                    minHeight: '20px',
+                                    maxHeight: isMobile ? '100px' : '120px',
+                                    overflowY: inputValue.split('\n').length > 4 ? 'auto' : 'hidden',
+                                    lineHeight: '1.5',
+                                    paddingTop: '2px',
+                                    paddingBottom: '2px'
+                                }, onInput: function (e) {
+                                    var target = e.target;
+                                    target.style.height = 'auto';
+                                    target.style.height = Math.min(target.scrollHeight, isMobile ? 100 : 120) + 'px';
+                                } }), _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 }));
         }
@@ -659,60 +725,62 @@ export var BlumessageChat = function (_a) {
         return null;
     }
     if (error) {
-        var errorContent = (_jsxs("div", { className: "shadow-2xl flex flex-col overflow-hidden border ".concat(theme === 'dark'
+        var isFullscreenMode = fullScreen || isMaximized || isMobile;
+        var errorContent = (_jsxs("div", { className: "shadow-2xl flex flex-col overflow-hidden border ".concat(isMobile ? 'blumessage-mobile-fullscreen' : '', " ").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,
+                width: isFullscreenMode ? '100%' : actualWidth,
+                height: isFullscreenMode ? '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'
+                borderRadius: isMobile ? '0' : (isFullscreenMode ? '12px' : '24px')
+            }, children: [_jsxs("div", { className: "flex items-center border-b ".concat(theme === 'dark'
                         ? 'bg-gray-900 border-gray-700'
-                        : 'bg-white border-gray-100'), children: [_jsx("div", { className: "rounded-full flex items-center justify-center", style: {
+                        : 'bg-white border-gray-100'), style: { padding: isMobile ? '12px 16px' : '16px 24px' }, children: [_jsx("div", { className: "rounded-full flex items-center justify-center", style: {
                                 backgroundColor: '#ef4444',
-                                width: '48px',
-                                height: '48px',
-                                marginRight: '24px'
-                            }, 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'
+                                width: isMobile ? '40px' : '48px',
+                                height: isMobile ? '40px' : '48px',
+                                marginRight: isMobile ? '16px' : '24px'
+                            }, children: _jsx(AlertTriangle, { className: isMobile ? "w-5 h-5 text-white" : "w-6 h-6 text-white" }) }), _jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "".concat(isMobile ? 'text-base' : '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 && !isMobile && (_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'
+                                        : 'hover:bg-gray-100 text-gray-500 hover:text-gray-700'), children: _jsx(X, { className: "w-4 h-4" }) })] }))] }), _jsx("div", { className: "flex-1 overflow-y-auto ".concat(theme === 'dark' ? 'bg-gray-800' : 'bg-gray-50'), style: { padding: isMobile ? '12px 16px' : '16px 24px' }, children: _jsx("div", { className: "flex justify-start", children: _jsx("div", { className: "px-4 py-3 rounded-2xl ".concat(isMobile ? 'max-w-[85%]' : '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 (_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(isMobile ? 'blumessage-mobile-button' : '', " ").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 && !isMobile && _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'
+        var isFullscreenMode = fullScreen || isMaximized || isMobile;
+        var loadingContent = (_jsxs("div", { className: "shadow-2xl flex flex-col overflow-hidden border ".concat(isMobile ? 'blumessage-mobile-fullscreen' : '', " ").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,
+                width: isFullscreenMode ? '100%' : actualWidth,
+                height: isFullscreenMode ? '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'
+                borderRadius: isMobile ? '0' : (isFullscreenMode ? '12px' : '24px')
+            }, children: [_jsxs("div", { className: "flex items-center border-b ".concat(theme === 'dark'
                         ? 'bg-gray-900 border-gray-700'
-                        : 'bg-white border-gray-100'), children: [_jsx("div", { className: "rounded-full flex items-center justify-center", style: {
+                        : 'bg-white border-gray-100'), style: { padding: isMobile ? '12px 16px' : '16px 24px' }, children: [_jsx("div", { className: "rounded-full flex items-center justify-center", style: {
                                 backgroundImage: primaryColor,
-                                width: '48px',
-                                height: '48px',
-                                marginRight: '24px'
-                            }, 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'
+                                width: isMobile ? '40px' : '48px',
+                                height: isMobile ? '40px' : '48px',
+                                marginRight: isMobile ? '16px' : '24px'
+                            }, children: _jsx(Loader2, { className: isMobile ? "w-5 h-5 text-white animate-spin" : "w-6 h-6 text-white animate-spin" }) }), _jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "".concat(isMobile ? 'text-base' : '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 && !isMobile && (_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..." }) })] }));
+                                        : 'hover:bg-gray-100 text-gray-500 hover:text-gray-700'), children: _jsx(X, { className: "w-4 h-4" }) })] }))] }), _jsx("div", { className: "flex-1 overflow-y-auto ".concat(theme === 'dark' ? 'bg-gray-800' : 'bg-gray-50'), style: { padding: isMobile ? '12px 16px' : '16px 24px' }, 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 (_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(isMobile ? 'blumessage-mobile-button' : '', " ").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 && !isMobile && _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 (_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(isMobile ? 'blumessage-mobile-button' : '', " ").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 && !isMobile && _jsx("span", { className: "text-sm font-medium whitespace-nowrap", children: buttonText })] }), renderChatWindow()] }));
     }
     return renderChatWindow();
 };

package/dist/types/BlumessageChat.d.ts

@@ -6,13 +6,7 @@ export interface Message {
     timestamp: number;
 }
 export interface BlumessageApiResponse {
-    conversationId: string;
-    messages: Message[];
-    created_at: number;
-    updated_at: number;
-}
-export interface ConversationSessionResponse {
-    id: string;
+    token: string;
     messages: Message[];
     created_at: number;
     updated_at: number;
@@ -29,8 +23,8 @@ export interface BlumessageChatProps {
     initialMessages?: Message[];
     onUserMessage?: (message: Message) => void;
     onAssistantMessage?: (message: Message) => void;
-    conversationId?: string;
-    onConversationIdChange?: (conversationId: string | null) => void;
+    token?: string;
+    onTokenChange?: (token: string | null) => void;
     onChatWidgetOpen?: () => void;
     onChatWidgetClosed?: () => void;
     onError?: (error: string, context?: string) => void;

package/dist/types/index.d.ts

@@ -1 +1 @@
-export { BlumessageChat, type BlumessageChatProps, type Message, type BlumessageApiResponse, type ConversationSessionResponse } from './BlumessageChat';
+export { BlumessageChat, type BlumessageChatProps, type Message, type BlumessageApiResponse } from './BlumessageChat';

package/package.json

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