@blumessage/react-chat 1.0.7 → 1.0.8

package/README.md

@@ -84,6 +84,7 @@ function App() {
 | `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" |
+| `typingText` | `string` | `"Agent is typing..."` | Custom text shown while waiting for assistant response |
 | **Event Callbacks** |
 | `onUserMessage` | `(message: Message) => void` | - | Called when user sends message |
 | `onAssistantMessage` | `(message: Message) => void` | - | Called when assistant responds |
@@ -180,6 +181,18 @@ const initialMessages = [
 />
 ```
 
+### Custom Typing Indicator
+
+```tsx
+<BlumessageChat 
+  apiKey="your-api-key"
+  typingText="Support agent is typing..."  // Custom loading message
+  // Or use different text for different languages:
+  // typingText="L'agent écrit..." // French
+  // typingText="El agente está escribiendo..." // Spanish
+/>
+```
+
 ## 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

@@ -101,24 +101,24 @@ 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, _j = _a.showTimestamps, showTimestamps = _j === void 0 ? false : _j, 
+    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, 
     // Floating button props
-    _k = _a.floating, 
+    _l = _a.floating, 
     // Floating button props
-    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, 
+    floating = _l === void 0 ? true : _l, _m = _a.buttonText, buttonText = _m === void 0 ? "Chat with us" : _m, _o = _a.buttonPosition, buttonPosition = _o === void 0 ? 'bottom-right' : _o, buttonStyle = _a.buttonStyle, _p = _a.defaultOpen, defaultOpen = _p === void 0 ? false : _p, _q = _a.maximizeToggleButton, maximizeToggleButton = _q === void 0 ? true : _q, _r = _a.fullScreen, fullScreen = _r === void 0 ? false : _r, _s = _a.icon, icon = _s === void 0 ? 'message-circle' : _s, 
     // Styling props
-    _s = _a.primaryColor, 
+    _t = _a.primaryColor, 
     // Styling props
-    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];
+    primaryColor = _t === void 0 ? "linear-gradient(to right, #3b82f6,rgb(8, 98, 242))" : _t;
+    var _u = useState(false), isInitialized = _u[0], setIsInitialized = _u[1];
+    var _v = useState(null), error = _v[0], setError = _v[1];
+    var _w = useState(initialMessages), messages = _w[0], setMessages = _w[1];
+    var _x = useState(''), inputValue = _x[0], setInputValue = _x[1];
+    var _y = useState(initialConversationId || getStoredConversationId(persistent)), conversationId = _y[0], setConversationId = _y[1];
+    var _z = useState(defaultOpen), isOpen = _z[0], setIsOpen = _z[1];
+    var _0 = useState(false), isAnimating = _0[0], setIsAnimating = _0[1];
+    var _1 = useState(false), isLoading = _1[0], setIsLoading = _1[1];
+    var _2 = useState(false), isMaximized = _2[0], setIsMaximized = _2[1];
     var messagesEndRef = useRef(null);
     var isInitialLoad = useRef(true);
     // Helper function to format timestamp
@@ -170,7 +170,7 @@ export var BlumessageChat = function (_a) {
         }
         return dimensions;
     };
-    var _2 = getDimensions(), actualWidth = _2.width, actualHeight = _2.height;
+    var _3 = getDimensions(), actualWidth = _3.width, actualHeight = _3.height;
     // Function to update conversation ID and notify parent
     var updateConversationId = function (newConversationId) {
         setConversationId(newConversationId);
@@ -633,7 +633,7 @@ export var BlumessageChat = function (_a) {
                                             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 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-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: "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'

package/dist/types/BlumessageChat.d.ts

@@ -36,6 +36,7 @@ export interface BlumessageChatProps {
     onError?: (error: string, context?: string) => void;
     persistent?: boolean;
     showTimestamps?: boolean;
+    typingText?: string;
     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.7",
+  "version": "1.0.8",
   "description": "A React TypeScript chat widget component with floating button, theming, and Blumessage API integration",
   "license": "MIT",
   "author": "Blumessage <contact@blumessage.com>",