@blumessage/react-chat 1.0.7 → 1.0.9

package/README.md

@@ -83,7 +83,8 @@ 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" |
+| `showTimestamps` | `boolean` | `false` | Display timestamps: today="2:00 PM", older="17 July, 1:00 PM" |
+| `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 |
@@ -161,25 +162,37 @@ const initialMessages = [
 ```tsx
 <BlumessageChat 
   apiKey="your-api-key"
-  showTimestamps={true}  // Shows "14:00" or "17 July, 13:00"
+  showTimestamps={true}  // Shows "2:00 PM" or "17 July, 1:00 PM"
   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")
+      timestamp: Date.now() - (60 * 60 * 1000)  // Shows: "2:00 PM" (or "14:00")
     },
     {
       id: '2',
       role: 'user' as const,
       content: 'Message from yesterday',
-      timestamp: Date.now() - (24 * 60 * 60 * 1000)  // Shows: "17 July, 13:00"
+      timestamp: Date.now() - (24 * 60 * 60 * 1000)  // Shows: "17 July, 1:00 PM"
     }
   ]}
 />
 ```
 
+### 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:
@@ -262,36 +275,6 @@ interface Message {
 }
 ```
 
-## API Integration
-
-### Message Sending
-```
-POST https://api.blumessage.com/api/v1/conversations
-Content-Type: application/json
-Authorization: Bearer {API_KEY}
-
-{
-  "message": "user input",
-  "conversationId": "optional-existing-id"
-}
-```
-
-### Conversation History
-```
-GET https://api.blumessage.com/api/v1/conversations/session/{conversationId}
-Authorization: {API_KEY}
-```
-
-### API Key Validation
-```
-POST https://api.blumessage.com/api/v1/api-keys/validate
-Content-Type: application/json
-
-{
-  "apiKey": "your-api-key"
-}
-```
-
 ## Storage Behavior
 
 - **SessionStorage (default)**: Conversations persist until browser tab closes
@@ -311,4 +294,6 @@ ISC
 
 ## Support
 
-For issues and feature requests, please visit the [GitHub repository](https://github.com/Blumessage/react-chat). 
+For issues and feature requests, please visit the [GitHub repository](https://github.com/Blumessage/react-chat).
+
+For technical support and assistance, please contact us at: **contact@blumessage.com** 

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.9",
   "description": "A React TypeScript chat widget component with floating button, theming, and Blumessage API integration",
   "license": "MIT",
   "author": "Blumessage <contact@blumessage.com>",