@blumessage/react-chat 1.0.9 → 1.0.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +15 -4
- package/dist/BlumessageChat.js +16 -16
- package/dist/types/BlumessageChat.d.ts +1 -0
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -85,6 +85,7 @@ function App() {
|
|
|
85
85
|
| `persistent` | `boolean` | `false` | Use localStorage vs sessionStorage |
|
|
86
86
|
| `showTimestamps` | `boolean` | `false` | Display timestamps: today="2:00 PM", older="17 July, 1:00 PM" |
|
|
87
87
|
| `typingText` | `string` | `"Agent is typing..."` | Custom text shown while waiting for assistant response |
|
|
88
|
+
| `emptyStateText` | `string` | `"Start a conversation!"` | Text shown when no messages are present |
|
|
88
89
|
| **Event Callbacks** |
|
|
89
90
|
| `onUserMessage` | `(message: Message) => void` | - | Called when user sends message |
|
|
90
91
|
| `onAssistantMessage` | `(message: Message) => void` | - | Called when assistant responds |
|
|
@@ -193,6 +194,18 @@ const initialMessages = [
|
|
|
193
194
|
/>
|
|
194
195
|
```
|
|
195
196
|
|
|
197
|
+
### Custom Empty State Text
|
|
198
|
+
|
|
199
|
+
```tsx
|
|
200
|
+
<BlumessageChat
|
|
201
|
+
apiKey="your-api-key"
|
|
202
|
+
emptyStateText="Welcome! How can I help you today?" // Custom empty state message
|
|
203
|
+
// Or use different text for different contexts:
|
|
204
|
+
// emptyStateText="Ask me anything about our products..."
|
|
205
|
+
// emptyStateText="Ready to assist with your questions!"
|
|
206
|
+
/>
|
|
207
|
+
```
|
|
208
|
+
|
|
196
209
|
## Icon Options
|
|
197
210
|
|
|
198
211
|
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:
|
|
@@ -290,10 +303,8 @@ interface Message {
|
|
|
290
303
|
|
|
291
304
|
## License
|
|
292
305
|
|
|
293
|
-
|
|
306
|
+
UNLICENSED - For use only by customers with an active Blumessage subscription.
|
|
294
307
|
|
|
295
308
|
## Support
|
|
296
309
|
|
|
297
|
-
For
|
|
298
|
-
|
|
299
|
-
For technical support and assistance, please contact us at: **contact@blumessage.com**
|
|
310
|
+
For feature requests, technical support and assistance, please contact us at: **contact@blumessage.com**
|
package/dist/BlumessageChat.js
CHANGED
|
@@ -101,24 +101,24 @@ var clearStoredConversationId = function (persistent) {
|
|
|
101
101
|
}
|
|
102
102
|
};
|
|
103
103
|
export var BlumessageChat = function (_a) {
|
|
104
|
-
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,
|
|
104
|
+
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,
|
|
105
105
|
// Floating button props
|
|
106
|
-
|
|
106
|
+
_m = _a.floating,
|
|
107
107
|
// Floating button props
|
|
108
|
-
floating =
|
|
108
|
+
floating = _m === void 0 ? true : _m, _o = _a.buttonText, buttonText = _o === void 0 ? "Chat with us" : _o, _p = _a.buttonPosition, buttonPosition = _p === void 0 ? 'bottom-right' : _p, buttonStyle = _a.buttonStyle, _q = _a.defaultOpen, defaultOpen = _q === void 0 ? false : _q, _r = _a.maximizeToggleButton, maximizeToggleButton = _r === void 0 ? true : _r, _s = _a.fullScreen, fullScreen = _s === void 0 ? false : _s, _t = _a.icon, icon = _t === void 0 ? 'message-circle' : _t,
|
|
109
109
|
// Styling props
|
|
110
|
-
|
|
110
|
+
_u = _a.primaryColor,
|
|
111
111
|
// Styling props
|
|
112
|
-
primaryColor =
|
|
113
|
-
var
|
|
114
|
-
var
|
|
115
|
-
var
|
|
116
|
-
var
|
|
117
|
-
var
|
|
118
|
-
var
|
|
119
|
-
var
|
|
120
|
-
var
|
|
121
|
-
var
|
|
112
|
+
primaryColor = _u === void 0 ? "linear-gradient(to right, #3b82f6,rgb(8, 98, 242))" : _u;
|
|
113
|
+
var _v = useState(false), isInitialized = _v[0], setIsInitialized = _v[1];
|
|
114
|
+
var _w = useState(null), error = _w[0], setError = _w[1];
|
|
115
|
+
var _x = useState(initialMessages), messages = _x[0], setMessages = _x[1];
|
|
116
|
+
var _y = useState(''), inputValue = _y[0], setInputValue = _y[1];
|
|
117
|
+
var _z = useState(initialConversationId || getStoredConversationId(persistent)), conversationId = _z[0], setConversationId = _z[1];
|
|
118
|
+
var _0 = useState(defaultOpen), isOpen = _0[0], setIsOpen = _0[1];
|
|
119
|
+
var _1 = useState(false), isAnimating = _1[0], setIsAnimating = _1[1];
|
|
120
|
+
var _2 = useState(false), isLoading = _2[0], setIsLoading = _2[1];
|
|
121
|
+
var _3 = useState(false), isMaximized = _3[0], setIsMaximized = _3[1];
|
|
122
122
|
var messagesEndRef = useRef(null);
|
|
123
123
|
var isInitialLoad = useRef(true);
|
|
124
124
|
// Helper function to format timestamp
|
|
@@ -170,7 +170,7 @@ export var BlumessageChat = function (_a) {
|
|
|
170
170
|
}
|
|
171
171
|
return dimensions;
|
|
172
172
|
};
|
|
173
|
-
var
|
|
173
|
+
var _4 = getDimensions(), actualWidth = _4.width, actualHeight = _4.height;
|
|
174
174
|
// Function to update conversation ID and notify parent
|
|
175
175
|
var updateConversationId = function (newConversationId) {
|
|
176
176
|
setConversationId(newConversationId);
|
|
@@ -633,7 +633,7 @@ export var BlumessageChat = function (_a) {
|
|
|
633
633
|
paddingRight: message.role === 'user' ? '16px' : '0'
|
|
634
634
|
}, 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'
|
|
635
635
|
? 'bg-gray-700 text-gray-100 border border-gray-600'
|
|
636
|
-
: '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:
|
|
636
|
+
: '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'
|
|
637
637
|
? 'bg-gray-900 border-gray-700'
|
|
638
638
|
: 'bg-white border-gray-100'), children: _jsxs("div", { className: "flex items-center rounded-full px-4 py-3 border ".concat(theme === 'dark'
|
|
639
639
|
? 'bg-gray-800 border-gray-600'
|
|
@@ -37,6 +37,7 @@ export interface BlumessageChatProps {
|
|
|
37
37
|
persistent?: boolean;
|
|
38
38
|
showTimestamps?: boolean;
|
|
39
39
|
typingText?: string;
|
|
40
|
+
emptyStateText?: string;
|
|
40
41
|
floating?: boolean;
|
|
41
42
|
buttonText?: string;
|
|
42
43
|
buttonPosition?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blumessage/react-chat",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.11",
|
|
4
4
|
"description": "A React TypeScript chat widget component with floating button, theming, and Blumessage API integration",
|
|
5
|
-
"license": "
|
|
5
|
+
"license": "UNLICENSED",
|
|
6
6
|
"author": "Blumessage <contact@blumessage.com>",
|
|
7
7
|
"keywords": [
|
|
8
8
|
"react",
|