@blumessage/react-chat 1.0.5 → 1.0.7

package/README.md

@@ -83,6 +83,7 @@ function App() {
 | `initialMessages` | `Message[]` | `[]` | Pre-populate with messages |
 | `conversationId` | `string` | - | Continue specific conversation |
 | `persistent` | `boolean` | `false` | Use localStorage vs sessionStorage |
+| `showTimestamps` | `boolean` | `false` | Display timestamps: today="14:00", older="17 July, 13:00" |
 | **Event Callbacks** |
 | `onUserMessage` | `(message: Message) => void` | - | Called when user sends message |
 | `onAssistantMessage` | `(message: Message) => void` | - | Called when assistant responds |
@@ -155,6 +156,30 @@ const initialMessages = [
 />
 ```
 
+### Chat with Timestamps
+
+```tsx
+<BlumessageChat 
+  apiKey="your-api-key"
+  showTimestamps={true}  // Shows "14:00" or "17 July, 13:00"
+  floating={false}
+  initialMessages={[
+    {
+      id: '1',
+      role: 'assistant' as const,
+      content: 'Message from today',
+      timestamp: Date.now() - (60 * 60 * 1000)  // Shows: "14:00" (or "2:00 PM")
+    },
+    {
+      id: '2',
+      role: 'user' as const,
+      content: 'Message from yesterday',
+      timestamp: Date.now() - (24 * 60 * 60 * 1000)  // Shows: "17 July, 13:00"
+    }
+  ]}
+/>
+```
+
 ## Icon Options
 
 The `icon` prop accepts **any lucide-react icon name** with flexible naming patterns. The component intelligently matches your input to the appropriate lucide-react icon:

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
@@ -92,25 +101,54 @@ var clearStoredConversationId = function (persistent) {
     }
 };
 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, 
+    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, 
     // Floating button props
-    _j = _a.floating, 
+    _k = _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, 
+    floating = _k === void 0 ? true : _k, _l = _a.buttonText, buttonText = _l === void 0 ? "Chat with us" : _l, _m = _a.buttonPosition, buttonPosition = _m === void 0 ? 'bottom-right' : _m, buttonStyle = _a.buttonStyle, _o = _a.defaultOpen, defaultOpen = _o === void 0 ? false : _o, _p = _a.maximizeToggleButton, maximizeToggleButton = _p === void 0 ? true : _p, _q = _a.fullScreen, fullScreen = _q === void 0 ? false : _q, _r = _a.icon, icon = _r === void 0 ? 'message-circle' : _r, 
     // Styling props
-    _r = _a.primaryColor, 
+    _s = _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];
+    primaryColor = _s === void 0 ? "linear-gradient(to right, #3b82f6,rgb(8, 98, 242))" : _s;
+    var _t = useState(false), isInitialized = _t[0], setIsInitialized = _t[1];
+    var _u = useState(null), error = _u[0], setError = _u[1];
+    var _v = useState(initialMessages), messages = _v[0], setMessages = _v[1];
+    var _w = useState(''), inputValue = _w[0], setInputValue = _w[1];
+    var _x = useState(initialConversationId || getStoredConversationId(persistent)), conversationId = _x[0], setConversationId = _x[1];
+    var _y = useState(defaultOpen), isOpen = _y[0], setIsOpen = _y[1];
+    var _z = useState(false), isAnimating = _z[0], setIsAnimating = _z[1];
+    var _0 = useState(false), isLoading = _0[0], setIsLoading = _0[1];
+    var _1 = useState(false), isMaximized = _1[0], setIsMaximized = _1[1];
     var messagesEndRef = useRef(null);
+    var isInitialLoad = useRef(true);
+    // Helper function to format timestamp
+    var formatTimestamp = function (timestamp) {
+        var date = new Date(timestamp);
+        var now = new Date();
+        // Check if the message is from today
+        var isToday = date.toDateString() === now.toDateString();
+        if (isToday) {
+            // If today: show time only in user's locale format (14:00 or 2:00 PM)
+            return date.toLocaleTimeString(undefined, {
+                hour: '2-digit',
+                minute: '2-digit',
+                hour12: undefined // Let browser decide based on user's locale
+            });
+        }
+        else {
+            // If more than a day: show "17 July, 13:00" format in user's locale
+            var dateStr = date.toLocaleDateString(undefined, {
+                day: 'numeric',
+                month: 'long'
+            });
+            var timeStr = date.toLocaleTimeString(undefined, {
+                hour: '2-digit',
+                minute: '2-digit',
+                hour12: undefined // Let browser decide based on user's locale
+            });
+            return "".concat(dateStr, ", ").concat(timeStr);
+        }
+    };
     // Helper function to get dimensions based on size
     var getDimensions = function () {
         // If custom width/height are provided, use them
@@ -118,17 +156,21 @@ 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;
+    var _2 = getDimensions(), actualWidth = _2.width, actualHeight = _2.height;
     // Function to update conversation ID and notify parent
     var updateConversationId = function (newConversationId) {
         setConversationId(newConversationId);
@@ -198,11 +240,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 +257,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 +281,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) {
@@ -548,23 +608,36 @@ export var BlumessageChat = function (_a) {
                 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'
+            }, children: [_jsxs("div", { className: "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'
+                        : 'bg-white border-gray-100'), style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        padding: '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'
                                         ? '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'
+                                        : '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: _jsxs("div", { className: "max-w-[80%] ".concat(message.role === 'user' ? 'text-right' : 'text-left'), children: [_jsx("div", { className: "px-4 py-3 rounded-2xl 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 }), showTimestamps && (_jsx("div", { className: "text-xs mt-1 ".concat(theme === 'dark' ? 'text-gray-500' : 'text-gray-400'), style: {
+                                            textAlign: message.role === 'user' ? 'right' : 'left',
+                                            paddingLeft: message.role === 'assistant' ? '16px' : '0',
+                                            paddingRight: message.role === 'user' ? '16px' : '0'
+                                        }, 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'
                                     ? '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 }));
         }
@@ -584,7 +657,12 @@ export var BlumessageChat = function (_a) {
                 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'
+                        : 'bg-white border-gray-100'), 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'
                                         ? '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'
@@ -606,7 +684,12 @@ export var BlumessageChat = function (_a) {
                 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'
+                        : 'bg-white border-gray-100'), 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'
                                         ? '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'

package/dist/types/BlumessageChat.d.ts

@@ -35,6 +35,7 @@ export interface BlumessageChatProps {
     onChatWidgetClosed?: () => void;
     onError?: (error: string, context?: string) => void;
     persistent?: boolean;
+    showTimestamps?: boolean;
     floating?: boolean;
     buttonText?: string;
     buttonPosition?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';

package/package.json

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