@blumessage/react-chat 1.7.0 → 1.8.1
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 +20 -0
- package/dist/BlumessageChat.js +73 -72
- package/dist/blumessage-chat.browser.js +1 -1
- package/dist/index.js +1 -1
- package/dist/types/BlumessageChat.d.ts +1 -0
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -122,6 +122,7 @@ function App() {
|
|
|
122
122
|
| `emptyStateText` | `string` | `"Start a conversation!"` | Text shown when no messages are present |
|
|
123
123
|
| `markdown` | `boolean` | `true` | Enable markdown rendering for messages |
|
|
124
124
|
| `disableAutoScroll` | `boolean` | `false` | Disable automatic scrolling to bottom when new messages arrive |
|
|
125
|
+
| `context` | `Record<string, any>` | - | Arbitrary user context data (name, email, etc.) passed to the AI agent for personalized responses |
|
|
125
126
|
| **Event Callbacks** |
|
|
126
127
|
| `onUserMessage` | `(message: Message) => void` | - | Called when user sends message |
|
|
127
128
|
| `onAssistantMessage` | `(message: Message) => void` | - | Called when assistant responds |
|
|
@@ -132,6 +133,25 @@ function App() {
|
|
|
132
133
|
|
|
133
134
|
## Advanced Usage Examples
|
|
134
135
|
|
|
136
|
+
### Providing User Context
|
|
137
|
+
|
|
138
|
+
Pass user data to help the AI agent personalize responses:
|
|
139
|
+
|
|
140
|
+
```tsx
|
|
141
|
+
<BlumessageChat
|
|
142
|
+
apiKey="your-api-key"
|
|
143
|
+
context={{
|
|
144
|
+
name: "John Doe",
|
|
145
|
+
email: "john@example.com",
|
|
146
|
+
plan: "premium",
|
|
147
|
+
userId: 12345,
|
|
148
|
+
tags: ["vip", "early-adopter"],
|
|
149
|
+
}}
|
|
150
|
+
/>
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
The `context` prop accepts any key-value pairs (`Record<string, any>`). Values can be strings, numbers, booleans, arrays, or objects. The context is sent with every message and merged on the server, so you can update it dynamically across the conversation.
|
|
154
|
+
|
|
135
155
|
### Dark Theme with Callbacks
|
|
136
156
|
|
|
137
157
|
```tsx
|
package/dist/BlumessageChat.js
CHANGED
|
@@ -42,6 +42,7 @@ const react_1 = __importStar(require("react"));
|
|
|
42
42
|
const react_markdown_1 = __importDefault(require("react-markdown"));
|
|
43
43
|
const remark_gfm_1 = __importDefault(require("remark-gfm"));
|
|
44
44
|
const LucideIcons = __importStar(require("lucide-react"));
|
|
45
|
+
require("./styles.css");
|
|
45
46
|
// Custom CSS animations that don't depend on Tailwind
|
|
46
47
|
const customStyles = `
|
|
47
48
|
@keyframes bounce {
|
|
@@ -678,10 +679,10 @@ helpBubbleBackgroundColor = "#000000", context, }, ref) => {
|
|
|
678
679
|
const getTextColor = (backgroundColor, theme) => {
|
|
679
680
|
// If custom background color is provided, determine text color based on brightness
|
|
680
681
|
if (backgroundColor && backgroundColor !== '#ffffff' && backgroundColor !== '#1f2937') {
|
|
681
|
-
return isColorDark(backgroundColor) ? 'text-white' : 'text-gray-800';
|
|
682
|
+
return isColorDark(backgroundColor) ? 'blumessage-text-white' : 'blumessage-text-gray-800';
|
|
682
683
|
}
|
|
683
684
|
// Fall back to theme-based colors
|
|
684
|
-
return theme === 'dark' ? 'text-gray-100' : 'text-gray-800';
|
|
685
|
+
return theme === 'dark' ? 'blumessage-text-gray-100' : 'blumessage-text-gray-800';
|
|
685
686
|
};
|
|
686
687
|
// Get the icon component based on the icon prop
|
|
687
688
|
const getIconComponent = () => {
|
|
@@ -975,47 +976,47 @@ helpBubbleBackgroundColor = "#000000", context, }, ref) => {
|
|
|
975
976
|
// Render chat window component
|
|
976
977
|
const renderChatWindow = () => {
|
|
977
978
|
const isFullscreenMode = fullScreen || isMaximized || isMobile;
|
|
978
|
-
const chatContent = ((0, jsx_runtime_1.jsxs)("div", { className: `shadow-2xl flex flex-col overflow-hidden border ${isMobile ? 'blumessage-mobile-fullscreen' : ''} ${theme === 'dark'
|
|
979
|
-
? 'bg-gray-900 border-gray-700'
|
|
980
|
-
: 'bg-white border-black/10'}`, style: {
|
|
979
|
+
const chatContent = ((0, jsx_runtime_1.jsxs)("div", { className: `blumessage-shadow-2xl blumessage-flex blumessage-flex-col blumessage-overflow-hidden blumessage-border ${isMobile ? 'blumessage-mobile-fullscreen' : ''} ${theme === 'dark'
|
|
980
|
+
? 'blumessage-bg-gray-900 blumessage-border-gray-700'
|
|
981
|
+
: 'blumessage-bg-white blumessage-border-black/10'}`, style: {
|
|
981
982
|
width: isFullscreenMode ? '100%' : actualWidth,
|
|
982
983
|
height: isFullscreenMode ? '100%' : actualHeight,
|
|
983
984
|
fontFamily: 'system-ui, -apple-system, sans-serif',
|
|
984
985
|
borderRadius: isMobile ? '0' : (isFullscreenMode ? '12px' : '24px')
|
|
985
|
-
}, children: [(0, jsx_runtime_1.jsxs)("div", { className: `border-b ${theme === 'dark'
|
|
986
|
-
? 'bg-gray-900 border-gray-700'
|
|
987
|
-
: 'bg-white border-gray-100'}`, style: {
|
|
988
|
-
display: 'flex',
|
|
986
|
+
}, children: [(0, jsx_runtime_1.jsxs)("div", { className: `blumessage-border-b ${theme === 'dark'
|
|
987
|
+
? 'blumessage-bg-gray-900 blumessage-border-gray-700'
|
|
988
|
+
: 'blumessage-bg-white blumessage-border-gray-100'}`, style: {
|
|
989
|
+
display: 'blumessage-flex',
|
|
989
990
|
alignItems: 'center',
|
|
990
991
|
padding: isMobile ? '12px 16px' : '16px 24px'
|
|
991
|
-
}, children: [(0, jsx_runtime_1.jsx)("div", { className: "rounded-full flex items-center justify-center", style: {
|
|
992
|
+
}, children: [(0, jsx_runtime_1.jsx)("div", { className: "blumessage-rounded-full blumessage-flex blumessage-items-center blumessage-justify-center", style: {
|
|
992
993
|
backgroundImage: primaryColor,
|
|
993
994
|
width: isMobile ? '40px' : '48px',
|
|
994
995
|
height: isMobile ? '40px' : '48px',
|
|
995
996
|
marginRight: isMobile ? '16px' : '24px'
|
|
996
997
|
}, children: react_1.default.createElement(getIconComponent(), {
|
|
997
|
-
className: isMobile ? "w-5 h-5 text-white" : "w-6 h-6 text-white"
|
|
998
|
-
}) }), (0, jsx_runtime_1.jsxs)("div", { style: { flex: 1 }, children: [(0, jsx_runtime_1.jsx)("div", { className: `${isMobile ? 'text-base' : 'text-lg'} font-semibold m-0 leading-6 ${theme === 'dark' ? 'text-gray-100' : 'text-gray-900'}`, children: name }), (0, jsx_runtime_1.jsx)("div", { className: `text-sm m-0 leading-5 ${theme === 'dark' ? 'text-gray-400' : 'text-gray-500'}`, children: subtitle })] }), floating && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1", children: [maximizeToggleButton && !isMobile && ((0, jsx_runtime_1.jsx)("button", { onClick: handleToggleMaximize, className: `w-8 h-8 rounded-full flex items-center justify-center cursor-pointer transition-colors ${theme === 'dark'
|
|
999
|
-
? 'hover:bg-gray-800 text-gray-400 hover:text-gray-200'
|
|
1000
|
-
: 'hover:bg-gray-100 text-gray-500 hover:text-gray-700'}`, children: isMaximized ? (0, jsx_runtime_1.jsx)(LucideIcons.Minimize2, { className: "w-4 h-4" }) : (0, jsx_runtime_1.jsx)(LucideIcons.Maximize, { className: "w-4 h-4" }) })), (0, jsx_runtime_1.jsx)("button", { onClick: handleCloseChat, className: `w-8 h-8 rounded-full flex items-center justify-center cursor-pointer transition-colors ${theme === 'dark'
|
|
1001
|
-
? 'hover:bg-gray-800 text-gray-400 hover:text-gray-200'
|
|
1002
|
-
: 'hover:bg-gray-100 text-gray-500 hover:text-gray-700'}`, children: (0, jsx_runtime_1.jsx)(LucideIcons.X, { className: "w-4 h-4" }) })] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: `flex-1 overflow-y-auto ${theme === 'dark' ? 'bg-gray-800' : 'bg-gray-50'}`, style: { padding: isMobile ? '12px 16px' : '16px 24px' }, children: [messages.map((message) => ((0, jsx_runtime_1.jsx)("div", { className: `flex ${message.role === 'user' ? 'justify-end' : 'justify-start'} mb-4`, children: (0, jsx_runtime_1.jsx)("div", { className: `${isMobile ? 'max-w-[85%]' : 'max-w-[80%]'} inline-block ${message.role === 'user' ? '' : 'text-left'}`, children: (0, jsx_runtime_1.jsxs)("div", { className: `inline-block px-4 py-3 rounded-2xl text-sm leading-6 text-left ${message.role === 'user'
|
|
1003
|
-
? 'text-white'
|
|
998
|
+
className: isMobile ? "blumessage-w-5 blumessage-h-5 blumessage-text-white" : "blumessage-w-6 blumessage-h-6 blumessage-text-white"
|
|
999
|
+
}) }), (0, jsx_runtime_1.jsxs)("div", { style: { flex: 1 }, children: [(0, jsx_runtime_1.jsx)("div", { className: `${isMobile ? 'blumessage-text-base' : 'blumessage-text-lg'} blumessage-font-semibold blumessage-m-0 blumessage-leading-6 ${theme === 'dark' ? 'blumessage-text-gray-100' : 'blumessage-text-gray-900'}`, children: name }), (0, jsx_runtime_1.jsx)("div", { className: `blumessage-text-sm blumessage-m-0 blumessage-leading-5 ${theme === 'dark' ? 'blumessage-text-gray-400' : 'blumessage-text-gray-500'}`, children: subtitle })] }), floating && ((0, jsx_runtime_1.jsxs)("div", { className: "blumessage-flex blumessage-items-center blumessage-gap-1", children: [maximizeToggleButton && !isMobile && ((0, jsx_runtime_1.jsx)("button", { onClick: handleToggleMaximize, className: `blumessage-w-8 blumessage-h-8 blumessage-rounded-full blumessage-flex blumessage-items-center blumessage-justify-center blumessage-cursor-pointer blumessage-transition-colors ${theme === 'dark'
|
|
1000
|
+
? 'hover:blumessage-bg-gray-800 blumessage-text-gray-400 hover:blumessage-text-gray-200'
|
|
1001
|
+
: 'hover:blumessage-bg-gray-100 blumessage-text-gray-500 hover:blumessage-text-gray-700'}`, children: isMaximized ? (0, jsx_runtime_1.jsx)(LucideIcons.Minimize2, { className: "blumessage-w-4 blumessage-h-4" }) : (0, jsx_runtime_1.jsx)(LucideIcons.Maximize, { className: "blumessage-w-4 blumessage-h-4" }) })), (0, jsx_runtime_1.jsx)("button", { onClick: handleCloseChat, className: `blumessage-w-8 blumessage-h-8 blumessage-rounded-full blumessage-flex blumessage-items-center blumessage-justify-center blumessage-cursor-pointer blumessage-transition-colors ${theme === 'dark'
|
|
1002
|
+
? 'hover:blumessage-bg-gray-800 blumessage-text-gray-400 hover:blumessage-text-gray-200'
|
|
1003
|
+
: 'hover:blumessage-bg-gray-100 blumessage-text-gray-500 hover:blumessage-text-gray-700'}`, children: (0, jsx_runtime_1.jsx)(LucideIcons.X, { className: "blumessage-w-4 blumessage-h-4" }) })] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: `blumessage-flex-1 blumessage-overflow-y-auto ${theme === 'dark' ? 'blumessage-bg-gray-800' : 'blumessage-bg-gray-50'}`, style: { padding: isMobile ? '12px 16px' : '16px 24px' }, children: [messages.map((message) => ((0, jsx_runtime_1.jsx)("div", { className: `blumessage-flex ${message.role === 'user' ? 'blumessage-justify-end' : 'blumessage-justify-start'} blumessage-mb-4`, children: (0, jsx_runtime_1.jsx)("div", { className: `${isMobile ? 'blumessage-max-w-[85%]' : 'blumessage-max-w-[80%]'} blumessage-inline-block ${message.role === 'user' ? '' : 'blumessage-text-left'}`, children: (0, jsx_runtime_1.jsxs)("div", { className: `blumessage-inline-block blumessage-px-4 blumessage-py-3 blumessage-rounded-2xl blumessage-text-sm blumessage-leading-6 blumessage-text-left ${message.role === 'user'
|
|
1004
|
+
? 'blumessage-text-white'
|
|
1004
1005
|
: theme === 'dark'
|
|
1005
|
-
? 'bg-gray-700 text-gray-100 border border-gray-600 shadow-sm'
|
|
1006
|
-
: 'bg-white text-gray-800 border border-gray-200 shadow-sm'}`, style: message.role === 'user' ? { backgroundImage: primaryColor } : {}, children: [message.role === 'assistant' ? (markdown ? ((0, jsx_runtime_1.jsx)(react_markdown_1.default, { remarkPlugins: [remark_gfm_1.default], children: message.content }, `assistant-${message.id}`)) : ((0, jsx_runtime_1.jsx)("div", { className: "whitespace-pre-wrap", children: message.content }))) : ((0, jsx_runtime_1.jsx)("div", { className: "inline-block", children: markdown ? ((0, jsx_runtime_1.jsx)(react_markdown_1.default, { remarkPlugins: [remark_gfm_1.default], children: message.content }, `user-${message.id}`)) : ((0, jsx_runtime_1.jsx)("div", { className: "whitespace-pre-wrap", children: message.content })) })), showTimestamps && ((0, jsx_runtime_1.jsx)("div", { className: `text-[10px] mt-1 opacity-75 ${message.role === 'user'
|
|
1007
|
-
? 'text-white/75'
|
|
1006
|
+
? 'blumessage-bg-gray-700 blumessage-text-gray-100 blumessage-border blumessage-border-gray-600 blumessage-shadow-sm'
|
|
1007
|
+
: 'blumessage-bg-white blumessage-text-gray-800 blumessage-border blumessage-border-gray-200 blumessage-shadow-sm'}`, style: message.role === 'user' ? { backgroundImage: primaryColor } : {}, children: [message.role === 'assistant' ? (markdown ? ((0, jsx_runtime_1.jsx)(react_markdown_1.default, { remarkPlugins: [remark_gfm_1.default], children: message.content }, `assistant-${message.id}`)) : ((0, jsx_runtime_1.jsx)("div", { className: "blumessage-whitespace-pre-wrap", children: message.content }))) : ((0, jsx_runtime_1.jsx)("div", { className: "blumessage-inline-block", children: markdown ? ((0, jsx_runtime_1.jsx)(react_markdown_1.default, { remarkPlugins: [remark_gfm_1.default], children: message.content }, `user-${message.id}`)) : ((0, jsx_runtime_1.jsx)("div", { className: "blumessage-whitespace-pre-wrap", children: message.content })) })), showTimestamps && ((0, jsx_runtime_1.jsx)("div", { className: `blumessage-text-[10px] blumessage-mt-1 blumessage-opacity-75 ${message.role === 'user'
|
|
1008
|
+
? 'blumessage-text-white/75'
|
|
1008
1009
|
: theme === 'dark'
|
|
1009
|
-
? 'text-gray-400'
|
|
1010
|
-
: 'text-gray-500'}`, style: {
|
|
1010
|
+
? 'blumessage-text-gray-400'
|
|
1011
|
+
: 'blumessage-text-gray-500'}`, style: {
|
|
1011
1012
|
textAlign: message.role === 'user' ? 'right' : 'left'
|
|
1012
|
-
}, children: formatTimestamp(message.timestamp) }))] }) }) }, message.id))), isLoading && ((0, jsx_runtime_1.jsx)("div", { className: "flex justify-start mb-4", children: (0, jsx_runtime_1.jsx)("div", { className: `px-4 py-3 rounded-2xl ${isMobile ? 'max-w-[85%]' : 'max-w-[80%]'} text-sm leading-6 shadow-sm ${theme === 'dark'
|
|
1013
|
-
? 'bg-gray-700 text-gray-100 border border-gray-600'
|
|
1014
|
-
: 'bg-white text-gray-800 border border-gray-200'}`, children: (0, jsx_runtime_1.jsx)("div", { className: `${theme === 'dark' ? 'text-gray-300' : 'text-gray-600'}`, style: { fontStyle: 'italic' }, children: typingText }) }) })), messages.length === 0 && !isLoading && ((0, jsx_runtime_1.jsx)("div", { className: `text-center text-sm py-8 ${theme === 'dark' ? 'text-gray-400' : 'text-gray-500'}`, children: emptyStateText })), (0, jsx_runtime_1.jsx)("div", { ref: messagesEndRef })] }), (0, jsx_runtime_1.jsx)("div", { className: `border-t ${theme === 'dark'
|
|
1015
|
-
? 'bg-gray-900 border-gray-700'
|
|
1016
|
-
: 'bg-white border-gray-100'}`, style: { padding: isMobile ? '12px 16px' : '16px 24px' }, children: (0, jsx_runtime_1.jsxs)("div", { className: `flex items-center rounded-2xl px-4 py-3 border ${theme === 'dark'
|
|
1017
|
-
? 'bg-gray-800 border-gray-600'
|
|
1018
|
-
: 'bg-gray-50 border-gray-200'}`, children: [(0, jsx_runtime_1.jsx)("textarea", { className: `flex-1 border-none bg-transparent outline-none text-sm font-inherit resize-none ${theme === 'dark' ? 'text-gray-100' : 'text-gray-700'}`, placeholder: placeholder, value: inputValue, onChange: (e) => {
|
|
1013
|
+
}, children: formatTimestamp(message.timestamp) }))] }) }) }, message.id))), isLoading && ((0, jsx_runtime_1.jsx)("div", { className: "blumessage-flex blumessage-justify-start blumessage-mb-4", children: (0, jsx_runtime_1.jsx)("div", { className: `blumessage-px-4 blumessage-py-3 blumessage-rounded-2xl ${isMobile ? 'blumessage-max-w-[85%]' : 'blumessage-max-w-[80%]'} blumessage-text-sm blumessage-leading-6 blumessage-shadow-sm ${theme === 'dark'
|
|
1014
|
+
? 'blumessage-bg-gray-700 blumessage-text-gray-100 blumessage-border blumessage-border-gray-600'
|
|
1015
|
+
: 'blumessage-bg-white blumessage-text-gray-800 blumessage-border blumessage-border-gray-200'}`, children: (0, jsx_runtime_1.jsx)("div", { className: `${theme === 'dark' ? 'blumessage-text-gray-300' : 'blumessage-text-gray-600'}`, style: { fontStyle: 'italic' }, children: typingText }) }) })), messages.length === 0 && !isLoading && ((0, jsx_runtime_1.jsx)("div", { className: `blumessage-text-center blumessage-text-sm blumessage-py-8 ${theme === 'dark' ? 'blumessage-text-gray-400' : 'blumessage-text-gray-500'}`, children: emptyStateText })), (0, jsx_runtime_1.jsx)("div", { ref: messagesEndRef })] }), (0, jsx_runtime_1.jsx)("div", { className: `blumessage-border-t ${theme === 'dark'
|
|
1016
|
+
? 'blumessage-bg-gray-900 blumessage-border-gray-700'
|
|
1017
|
+
: 'blumessage-bg-white blumessage-border-gray-100'}`, style: { padding: isMobile ? '12px 16px' : '16px 24px' }, children: (0, jsx_runtime_1.jsxs)("div", { className: `blumessage-flex blumessage-items-center blumessage-rounded-2xl blumessage-px-4 blumessage-py-3 blumessage-border ${theme === 'dark'
|
|
1018
|
+
? 'blumessage-bg-gray-800 blumessage-border-gray-600'
|
|
1019
|
+
: 'blumessage-bg-gray-50 blumessage-border-gray-200'}`, children: [(0, jsx_runtime_1.jsx)("textarea", { className: `blumessage-flex-1 blumessage-border-none blumessage-bg-transparent blumessage-outline-none blumessage-text-sm blumessage-font-inherit blumessage-resize-none ${theme === 'dark' ? 'blumessage-text-gray-100' : 'blumessage-text-gray-700'}`, placeholder: placeholder, value: inputValue, onChange: (e) => {
|
|
1019
1020
|
const newValue = e.target.value;
|
|
1020
1021
|
if (newValue.length <= 1000) {
|
|
1021
1022
|
setInputValue(newValue);
|
|
@@ -1044,7 +1045,7 @@ helpBubbleBackgroundColor = "#000000", context, }, ref) => {
|
|
|
1044
1045
|
const target = e.target;
|
|
1045
1046
|
target.style.height = 'auto';
|
|
1046
1047
|
target.style.height = Math.min(target.scrollHeight, isMobile ? 100 : 120) + 'px';
|
|
1047
|
-
} }), (0, jsx_runtime_1.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 ? ((0, jsx_runtime_1.jsx)(LucideIcons.Loader2, { className: "w-4 h-4 blumessage-animate-spin" })) : ((0, jsx_runtime_1.jsx)(LucideIcons.Send, { className: "w-4 h-4" })) })] }) })] }));
|
|
1048
|
+
} }), (0, jsx_runtime_1.jsx)("button", { className: "blumessage-w-8 blumessage-h-8 blumessage-rounded-full blumessage-border-none blumessage-flex blumessage-items-center blumessage-justify-center blumessage-cursor-pointer blumessage-ml-2 blumessage-text-white blumessage-transition-all disabled:blumessage-opacity-50 disabled:blumessage-cursor-not-allowed", style: { backgroundImage: primaryColor }, onClick: handleSendMessage, disabled: !inputValue.trim() || isLoading, children: isLoading ? ((0, jsx_runtime_1.jsx)(LucideIcons.Loader2, { className: "blumessage-w-4 blumessage-h-4 blumessage-animate-spin" })) : ((0, jsx_runtime_1.jsx)(LucideIcons.Send, { className: "blumessage-w-4 blumessage-h-4" })) })] }) })] }));
|
|
1048
1049
|
if (floating) {
|
|
1049
1050
|
return ((0, jsx_runtime_1.jsx)("div", { style: getChatPositionStyles(), children: chatContent }));
|
|
1050
1051
|
}
|
|
@@ -1056,94 +1057,94 @@ helpBubbleBackgroundColor = "#000000", context, }, ref) => {
|
|
|
1056
1057
|
}
|
|
1057
1058
|
if (error) {
|
|
1058
1059
|
const isFullscreenMode = fullScreen || isMaximized || isMobile;
|
|
1059
|
-
const errorContent = ((0, jsx_runtime_1.jsxs)("div", { className: `shadow-2xl flex flex-col overflow-hidden border ${isMobile ? 'blumessage-mobile-fullscreen' : ''} ${theme === 'dark'
|
|
1060
|
-
? 'bg-gray-900 border-gray-700'
|
|
1061
|
-
: 'bg-white border-black/10'}`, style: {
|
|
1060
|
+
const errorContent = ((0, jsx_runtime_1.jsxs)("div", { className: `blumessage-shadow-2xl blumessage-flex blumessage-flex-col blumessage-overflow-hidden blumessage-border ${isMobile ? 'blumessage-mobile-fullscreen' : ''} ${theme === 'dark'
|
|
1061
|
+
? 'blumessage-bg-gray-900 blumessage-border-gray-700'
|
|
1062
|
+
: 'blumessage-bg-white blumessage-border-black/10'}`, style: {
|
|
1062
1063
|
width: isFullscreenMode ? '100%' : actualWidth,
|
|
1063
1064
|
height: isFullscreenMode ? '100%' : actualHeight,
|
|
1064
1065
|
fontFamily: 'system-ui, -apple-system, sans-serif',
|
|
1065
1066
|
borderRadius: isMobile ? '0' : (isFullscreenMode ? '12px' : '24px')
|
|
1066
|
-
}, children: [(0, jsx_runtime_1.jsxs)("div", { className: `flex items-center border-b ${theme === 'dark'
|
|
1067
|
-
? 'bg-gray-900 border-gray-700'
|
|
1068
|
-
: 'bg-white border-gray-100'}`, style: { padding: isMobile ? '12px 16px' : '16px 24px' }, children: [(0, jsx_runtime_1.jsx)("div", { className: "rounded-full flex items-center justify-center", style: {
|
|
1067
|
+
}, children: [(0, jsx_runtime_1.jsxs)("div", { className: `blumessage-flex blumessage-items-center blumessage-border-b ${theme === 'dark'
|
|
1068
|
+
? 'blumessage-bg-gray-900 blumessage-border-gray-700'
|
|
1069
|
+
: 'blumessage-bg-white blumessage-border-gray-100'}`, style: { padding: isMobile ? '12px 16px' : '16px 24px' }, children: [(0, jsx_runtime_1.jsx)("div", { className: "blumessage-rounded-full blumessage-flex blumessage-items-center blumessage-justify-center", style: {
|
|
1069
1070
|
backgroundColor: '#ef4444',
|
|
1070
1071
|
width: isMobile ? '40px' : '48px',
|
|
1071
1072
|
height: isMobile ? '40px' : '48px',
|
|
1072
1073
|
marginRight: isMobile ? '16px' : '24px'
|
|
1073
|
-
}, children: (0, jsx_runtime_1.jsx)(LucideIcons.AlertTriangle, { className: isMobile ? "w-5 h-5 text-white" : "w-6 h-6 text-white" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1", children: [(0, jsx_runtime_1.jsx)("div", { className: `${isMobile ? 'text-base' : 'text-lg'} font-semibold m-0 leading-6 ${theme === 'dark' ? 'text-gray-100' : 'text-gray-900'}`, children: "Connection Error" }), (0, jsx_runtime_1.jsx)("div", { className: `text-sm m-0 leading-5 ${theme === 'dark' ? 'text-gray-400' : 'text-gray-500'}`, children: "Unable to connect" })] }), floating && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1", children: [maximizeToggleButton && !isMobile && ((0, jsx_runtime_1.jsx)("button", { onClick: handleToggleMaximize, className: `w-8 h-8 rounded-full flex items-center justify-center cursor-pointer transition-colors ${theme === 'dark'
|
|
1074
|
-
? 'hover:bg-gray-800 text-gray-400 hover:text-gray-200'
|
|
1075
|
-
: 'hover:bg-gray-100 text-gray-500 hover:text-gray-700'}`, children: isMaximized ? (0, jsx_runtime_1.jsx)(LucideIcons.Minimize2, { className: "w-4 h-4" }) : (0, jsx_runtime_1.jsx)(LucideIcons.Maximize, { className: "w-4 h-4" }) })), (0, jsx_runtime_1.jsx)("button", { onClick: handleCloseChat, className: `w-8 h-8 rounded-full flex items-center justify-center cursor-pointer transition-colors ${theme === 'dark'
|
|
1076
|
-
? 'hover:bg-gray-800 text-gray-400 hover:text-gray-200'
|
|
1077
|
-
: 'hover:bg-gray-100 text-gray-500 hover:text-gray-700'}`, children: (0, jsx_runtime_1.jsx)(LucideIcons.X, { className: "w-4 h-4" }) })] }))] }), (0, jsx_runtime_1.jsx)("div", { className: `flex-1 overflow-y-auto ${theme === 'dark' ? 'bg-gray-800' : 'bg-gray-50'}`, style: { padding: isMobile ? '12px 16px' : '16px 24px' }, children: (0, jsx_runtime_1.jsx)("div", { className: "flex justify-start", children: (0, jsx_runtime_1.jsx)("div", { className: `px-4 py-3 rounded-2xl ${isMobile ? 'max-w-[85%]' : 'max-w-[80%]'} text-sm leading-6 shadow-sm ${theme === 'dark'
|
|
1078
|
-
? 'bg-gray-700 text-gray-100 border border-gray-600'
|
|
1079
|
-
: 'bg-white text-gray-800 border border-gray-200'}`, children: error }) }) })] }));
|
|
1074
|
+
}, children: (0, jsx_runtime_1.jsx)(LucideIcons.AlertTriangle, { className: isMobile ? "blumessage-w-5 blumessage-h-5 blumessage-text-white" : "blumessage-w-6 blumessage-h-6 blumessage-text-white" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "blumessage-flex-1", children: [(0, jsx_runtime_1.jsx)("div", { className: `${isMobile ? 'blumessage-text-base' : 'blumessage-text-lg'} blumessage-font-semibold blumessage-m-0 blumessage-leading-6 ${theme === 'dark' ? 'blumessage-text-gray-100' : 'blumessage-text-gray-900'}`, children: "Connection Error" }), (0, jsx_runtime_1.jsx)("div", { className: `blumessage-text-sm blumessage-m-0 blumessage-leading-5 ${theme === 'dark' ? 'blumessage-text-gray-400' : 'blumessage-text-gray-500'}`, children: "Unable to connect" })] }), floating && ((0, jsx_runtime_1.jsxs)("div", { className: "blumessage-flex blumessage-items-center blumessage-gap-1", children: [maximizeToggleButton && !isMobile && ((0, jsx_runtime_1.jsx)("button", { onClick: handleToggleMaximize, className: `blumessage-w-8 blumessage-h-8 blumessage-rounded-full blumessage-flex blumessage-items-center blumessage-justify-center blumessage-cursor-pointer blumessage-transition-colors ${theme === 'dark'
|
|
1075
|
+
? 'hover:blumessage-bg-gray-800 blumessage-text-gray-400 hover:blumessage-text-gray-200'
|
|
1076
|
+
: 'hover:blumessage-bg-gray-100 blumessage-text-gray-500 hover:blumessage-text-gray-700'}`, children: isMaximized ? (0, jsx_runtime_1.jsx)(LucideIcons.Minimize2, { className: "blumessage-w-4 blumessage-h-4" }) : (0, jsx_runtime_1.jsx)(LucideIcons.Maximize, { className: "blumessage-w-4 blumessage-h-4" }) })), (0, jsx_runtime_1.jsx)("button", { onClick: handleCloseChat, className: `blumessage-w-8 blumessage-h-8 blumessage-rounded-full blumessage-flex blumessage-items-center blumessage-justify-center blumessage-cursor-pointer blumessage-transition-colors ${theme === 'dark'
|
|
1077
|
+
? 'hover:blumessage-bg-gray-800 blumessage-text-gray-400 hover:blumessage-text-gray-200'
|
|
1078
|
+
: 'hover:blumessage-bg-gray-100 blumessage-text-gray-500 hover:blumessage-text-gray-700'}`, children: (0, jsx_runtime_1.jsx)(LucideIcons.X, { className: "blumessage-w-4 blumessage-h-4" }) })] }))] }), (0, jsx_runtime_1.jsx)("div", { className: `blumessage-flex-1 blumessage-overflow-y-auto ${theme === 'dark' ? 'blumessage-bg-gray-800' : 'blumessage-bg-gray-50'}`, style: { padding: isMobile ? '12px 16px' : '16px 24px' }, children: (0, jsx_runtime_1.jsx)("div", { className: "blumessage-flex blumessage-justify-start", children: (0, jsx_runtime_1.jsx)("div", { className: `blumessage-px-4 blumessage-py-3 blumessage-rounded-2xl ${isMobile ? 'blumessage-max-w-[85%]' : 'blumessage-max-w-[80%]'} blumessage-text-sm blumessage-leading-6 blumessage-shadow-sm ${theme === 'dark'
|
|
1079
|
+
? 'blumessage-bg-gray-700 blumessage-text-gray-100 blumessage-border blumessage-border-gray-600'
|
|
1080
|
+
: 'blumessage-bg-white blumessage-text-gray-800 blumessage-border blumessage-border-gray-200'}`, children: error }) }) })] }));
|
|
1080
1081
|
if (floating) {
|
|
1081
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", { onClick: handleOpenChat, className: `text-white rounded-full shadow-lg transition-all duration-200 flex items-center justify-center gap-2 ${isMobile ? 'blumessage-mobile-button' : ''} ${buttonText ? 'px-4 py-3 h-12' : 'w-14 h-14'}`, style: { ...getButtonPositionStyles(), ...buttonStyle, backgroundImage: primaryColor }, children: [react_1.default.createElement(getIconComponent(), { className: "w-6 h-6" }), buttonText && !isMobile && (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium whitespace-nowrap", children: buttonText })] }), showHelpBubble && (isHelpBubbleVisible || isHelpBubbleAnimating) && ((0, jsx_runtime_1.jsx)("div", { className: `fixed z-[999] border rounded-lg shadow-lg px-3 py-2 text-sm max-w-[200px] ${isHelpBubbleVisible
|
|
1082
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", { onClick: handleOpenChat, className: `blumessage-text-white blumessage-rounded-full blumessage-shadow-lg blumessage-transition-all blumessage-duration-200 blumessage-flex blumessage-items-center blumessage-justify-center blumessage-gap-2 ${isMobile ? 'blumessage-mobile-button' : ''} ${buttonText ? 'blumessage-px-4 blumessage-py-3 blumessage-h-12' : 'blumessage-w-14 blumessage-h-14'}`, style: { ...getButtonPositionStyles(), ...buttonStyle, backgroundImage: primaryColor }, children: [react_1.default.createElement(getIconComponent(), { className: "blumessage-w-6 blumessage-h-6" }), buttonText && !isMobile && (0, jsx_runtime_1.jsx)("span", { className: "blumessage-text-sm blumessage-font-medium blumessage-whitespace-nowrap", children: buttonText })] }), showHelpBubble && (isHelpBubbleVisible || isHelpBubbleAnimating) && ((0, jsx_runtime_1.jsx)("div", { className: `blumessage-fixed blumessage-z-[999] blumessage-border blumessage-rounded-lg blumessage-shadow-lg blumessage-px-3 blumessage-py-2 blumessage-text-sm blumessage-max-w-[200px] ${isHelpBubbleVisible
|
|
1082
1083
|
? (buttonPosition?.includes('top') ? 'blumessage-help-bubble-in-top' : 'blumessage-help-bubble-in')
|
|
1083
1084
|
: (buttonPosition?.includes('top') ? 'blumessage-help-bubble-out-top' : 'blumessage-help-bubble-out')} ${theme === 'dark'
|
|
1084
|
-
? 'bg-gray-800 border-gray-600'
|
|
1085
|
-
: 'bg-white border-gray-200'}`, style: {
|
|
1085
|
+
? 'blumessage-bg-gray-800 blumessage-border-gray-600'
|
|
1086
|
+
: 'blumessage-bg-white blumessage-border-gray-200'}`, style: {
|
|
1086
1087
|
...getHelpBubblePositionStyles(),
|
|
1087
1088
|
backgroundColor: helpBubbleBackgroundColor || (theme === 'dark' ? '#1f2937' : '#ffffff'),
|
|
1088
1089
|
transformOrigin: buttonPosition?.includes('bottom') ? 'bottom center' : 'top center',
|
|
1089
|
-
}, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [react_1.default.createElement(getHelpBubbleIconComponent(), {
|
|
1090
|
-
className: "w-4 h-4 flex-shrink-0",
|
|
1090
|
+
}, children: (0, jsx_runtime_1.jsxs)("div", { className: "blumessage-flex blumessage-items-center blumessage-gap-2", children: [react_1.default.createElement(getHelpBubbleIconComponent(), {
|
|
1091
|
+
className: "blumessage-w-4 blumessage-h-4 blumessage-flex-shrink-0",
|
|
1091
1092
|
style: { color: primaryColor.includes('linear-gradient') ? '#3b82f6' : primaryColor }
|
|
1092
|
-
}), (0, jsx_runtime_1.jsx)("span", { className: `leading-tight ${getTextColor(helpBubbleBackgroundColor || (theme === 'dark' ? '#1f2937' : '#ffffff'), theme)}`, children: helpBubbleMessage })] }) })), (0, jsx_runtime_1.jsx)("div", { style: getChatPositionStyles(), children: errorContent })] }));
|
|
1093
|
+
}), (0, jsx_runtime_1.jsx)("span", { className: `blumessage-leading-tight ${getTextColor(helpBubbleBackgroundColor || (theme === 'dark' ? '#1f2937' : '#ffffff'), theme)}`, children: helpBubbleMessage })] }) })), (0, jsx_runtime_1.jsx)("div", { style: getChatPositionStyles(), children: errorContent })] }));
|
|
1093
1094
|
}
|
|
1094
1095
|
return errorContent;
|
|
1095
1096
|
}
|
|
1096
1097
|
if (!isInitialized) {
|
|
1097
1098
|
const isFullscreenMode = fullScreen || isMaximized || isMobile;
|
|
1098
|
-
const loadingContent = ((0, jsx_runtime_1.jsxs)("div", { className: `shadow-2xl flex flex-col overflow-hidden border ${isMobile ? 'blumessage-mobile-fullscreen' : ''} ${theme === 'dark'
|
|
1099
|
-
? 'bg-gray-900 border-gray-700'
|
|
1100
|
-
: 'bg-white border-black/10'}`, style: {
|
|
1099
|
+
const loadingContent = ((0, jsx_runtime_1.jsxs)("div", { className: `blumessage-shadow-2xl blumessage-flex blumessage-flex-col blumessage-overflow-hidden blumessage-border ${isMobile ? 'blumessage-mobile-fullscreen' : ''} ${theme === 'dark'
|
|
1100
|
+
? 'blumessage-bg-gray-900 blumessage-border-gray-700'
|
|
1101
|
+
: 'blumessage-bg-white blumessage-border-black/10'}`, style: {
|
|
1101
1102
|
width: isFullscreenMode ? '100%' : actualWidth,
|
|
1102
1103
|
height: isFullscreenMode ? '100%' : actualHeight,
|
|
1103
1104
|
fontFamily: 'system-ui, -apple-system, sans-serif',
|
|
1104
1105
|
borderRadius: isMobile ? '0' : (isFullscreenMode ? '12px' : '24px')
|
|
1105
|
-
}, children: [(0, jsx_runtime_1.jsxs)("div", { className: `flex items-center border-b ${theme === 'dark'
|
|
1106
|
-
? 'bg-gray-900 border-gray-700'
|
|
1107
|
-
: 'bg-white border-gray-100'}`, style: { padding: isMobile ? '12px 16px' : '16px 24px' }, children: [(0, jsx_runtime_1.jsx)("div", { className: "rounded-full flex items-center justify-center", style: {
|
|
1106
|
+
}, children: [(0, jsx_runtime_1.jsxs)("div", { className: `blumessage-flex blumessage-items-center blumessage-border-b ${theme === 'dark'
|
|
1107
|
+
? 'blumessage-bg-gray-900 blumessage-border-gray-700'
|
|
1108
|
+
: 'blumessage-bg-white blumessage-border-gray-100'}`, style: { padding: isMobile ? '12px 16px' : '16px 24px' }, children: [(0, jsx_runtime_1.jsx)("div", { className: "blumessage-rounded-full blumessage-flex blumessage-items-center blumessage-justify-center", style: {
|
|
1108
1109
|
backgroundImage: primaryColor,
|
|
1109
1110
|
width: isMobile ? '40px' : '48px',
|
|
1110
1111
|
height: isMobile ? '40px' : '48px',
|
|
1111
1112
|
marginRight: isMobile ? '16px' : '24px'
|
|
1112
|
-
}, children: (0, jsx_runtime_1.jsx)(LucideIcons.Loader2, { className: isMobile ? "w-5 h-5 text-white animate-spin" : "w-6 h-6 text-white animate-spin" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1", children: [(0, jsx_runtime_1.jsx)("div", { className: `${isMobile ? 'text-base' : 'text-lg'} font-semibold m-0 leading-6 ${theme === 'dark' ? 'text-gray-100' : 'text-gray-900'}`, children: name }), (0, jsx_runtime_1.jsx)("div", { className: `text-sm m-0 leading-5 ${theme === 'dark' ? 'text-gray-400' : 'text-gray-500'}`, children: subtitle })] }), floating && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1", children: [maximizeToggleButton && !isMobile && ((0, jsx_runtime_1.jsx)("button", { onClick: handleToggleMaximize, className: `w-8 h-8 rounded-full flex items-center justify-center cursor-pointer transition-colors ${theme === 'dark'
|
|
1113
|
-
? 'hover:bg-gray-800 text-gray-400 hover:text-gray-200'
|
|
1114
|
-
: 'hover:bg-gray-100 text-gray-500 hover:text-gray-700'}`, children: isMaximized ? (0, jsx_runtime_1.jsx)(LucideIcons.Minimize2, { className: "w-4 h-4" }) : (0, jsx_runtime_1.jsx)(LucideIcons.Maximize, { className: "w-4 h-4" }) })), (0, jsx_runtime_1.jsx)("button", { onClick: handleCloseChat, className: `w-8 h-8 rounded-full flex items-center justify-center cursor-pointer transition-colors ${theme === 'dark'
|
|
1115
|
-
? 'hover:bg-gray-800 text-gray-400 hover:text-gray-200'
|
|
1116
|
-
: 'hover:bg-gray-100 text-gray-500 hover:text-gray-700'}`, children: (0, jsx_runtime_1.jsx)(LucideIcons.X, { className: "w-4 h-4" }) })] }))] }), (0, jsx_runtime_1.jsx)("div", { className: `flex-1 overflow-y-auto ${theme === 'dark' ? 'bg-gray-800' : 'bg-gray-50'}`, style: { padding: isMobile ? '12px 16px' : '16px 24px' }, children: (0, jsx_runtime_1.jsx)("div", { className: `text-center text-sm py-8 ${theme === 'dark' ? 'text-gray-400' : 'text-gray-500'}`, children: "Ready to chat..." }) })] }));
|
|
1113
|
+
}, children: (0, jsx_runtime_1.jsx)(LucideIcons.Loader2, { className: isMobile ? "blumessage-w-5 blumessage-h-5 blumessage-text-white blumessage-animate-spin" : "blumessage-w-6 blumessage-h-6 blumessage-text-white blumessage-animate-spin" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "blumessage-flex-1", children: [(0, jsx_runtime_1.jsx)("div", { className: `${isMobile ? 'blumessage-text-base' : 'blumessage-text-lg'} blumessage-font-semibold blumessage-m-0 blumessage-leading-6 ${theme === 'dark' ? 'blumessage-text-gray-100' : 'blumessage-text-gray-900'}`, children: name }), (0, jsx_runtime_1.jsx)("div", { className: `blumessage-text-sm blumessage-m-0 blumessage-leading-5 ${theme === 'dark' ? 'blumessage-text-gray-400' : 'blumessage-text-gray-500'}`, children: subtitle })] }), floating && ((0, jsx_runtime_1.jsxs)("div", { className: "blumessage-flex blumessage-items-center blumessage-gap-1", children: [maximizeToggleButton && !isMobile && ((0, jsx_runtime_1.jsx)("button", { onClick: handleToggleMaximize, className: `blumessage-w-8 blumessage-h-8 blumessage-rounded-full blumessage-flex blumessage-items-center blumessage-justify-center blumessage-cursor-pointer blumessage-transition-colors ${theme === 'dark'
|
|
1114
|
+
? 'hover:blumessage-bg-gray-800 blumessage-text-gray-400 hover:blumessage-text-gray-200'
|
|
1115
|
+
: 'hover:blumessage-bg-gray-100 blumessage-text-gray-500 hover:blumessage-text-gray-700'}`, children: isMaximized ? (0, jsx_runtime_1.jsx)(LucideIcons.Minimize2, { className: "blumessage-w-4 blumessage-h-4" }) : (0, jsx_runtime_1.jsx)(LucideIcons.Maximize, { className: "blumessage-w-4 blumessage-h-4" }) })), (0, jsx_runtime_1.jsx)("button", { onClick: handleCloseChat, className: `blumessage-w-8 blumessage-h-8 blumessage-rounded-full blumessage-flex blumessage-items-center blumessage-justify-center blumessage-cursor-pointer blumessage-transition-colors ${theme === 'dark'
|
|
1116
|
+
? 'hover:blumessage-bg-gray-800 blumessage-text-gray-400 hover:blumessage-text-gray-200'
|
|
1117
|
+
: 'hover:blumessage-bg-gray-100 blumessage-text-gray-500 hover:blumessage-text-gray-700'}`, children: (0, jsx_runtime_1.jsx)(LucideIcons.X, { className: "blumessage-w-4 blumessage-h-4" }) })] }))] }), (0, jsx_runtime_1.jsx)("div", { className: `blumessage-flex-1 blumessage-overflow-y-auto ${theme === 'dark' ? 'blumessage-bg-gray-800' : 'blumessage-bg-gray-50'}`, style: { padding: isMobile ? '12px 16px' : '16px 24px' }, children: (0, jsx_runtime_1.jsx)("div", { className: `blumessage-text-center blumessage-text-sm blumessage-py-8 ${theme === 'dark' ? 'blumessage-text-gray-400' : 'blumessage-text-gray-500'}`, children: "Ready to chat..." }) })] }));
|
|
1117
1118
|
if (floating) {
|
|
1118
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", { onClick: handleOpenChat, className: `text-white rounded-full shadow-lg transition-all duration-200 flex items-center justify-center gap-2 ${isMobile ? 'blumessage-mobile-button' : ''} ${buttonText ? 'px-4 py-3 h-12' : 'w-14 h-14'}`, style: { ...getButtonPositionStyles(), ...buttonStyle, backgroundImage: primaryColor }, children: [react_1.default.createElement(getIconComponent(), { className: "w-6 h-6" }), buttonText && !isMobile && (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium whitespace-nowrap", children: buttonText })] }), showHelpBubble && (isHelpBubbleVisible || isHelpBubbleAnimating) && ((0, jsx_runtime_1.jsx)("div", { className: `fixed z-[999] border rounded-lg shadow-lg px-3 py-2 text-sm max-w-[200px] ${isHelpBubbleVisible
|
|
1119
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", { onClick: handleOpenChat, className: `blumessage-text-white blumessage-rounded-full blumessage-shadow-lg blumessage-transition-all blumessage-duration-200 blumessage-flex blumessage-items-center blumessage-justify-center blumessage-gap-2 ${isMobile ? 'blumessage-mobile-button' : ''} ${buttonText ? 'blumessage-px-4 blumessage-py-3 blumessage-h-12' : 'blumessage-w-14 blumessage-h-14'}`, style: { ...getButtonPositionStyles(), ...buttonStyle, backgroundImage: primaryColor }, children: [react_1.default.createElement(getIconComponent(), { className: "blumessage-w-6 blumessage-h-6" }), buttonText && !isMobile && (0, jsx_runtime_1.jsx)("span", { className: "blumessage-text-sm blumessage-font-medium blumessage-whitespace-nowrap", children: buttonText })] }), showHelpBubble && (isHelpBubbleVisible || isHelpBubbleAnimating) && ((0, jsx_runtime_1.jsx)("div", { className: `blumessage-fixed blumessage-z-[999] blumessage-border blumessage-rounded-lg blumessage-shadow-lg blumessage-px-3 blumessage-py-2 blumessage-text-sm blumessage-max-w-[200px] ${isHelpBubbleVisible
|
|
1119
1120
|
? (buttonPosition?.includes('top') ? 'blumessage-help-bubble-in-top' : 'blumessage-help-bubble-in')
|
|
1120
1121
|
: (buttonPosition?.includes('top') ? 'blumessage-help-bubble-out-top' : 'blumessage-help-bubble-out')} ${theme === 'dark'
|
|
1121
|
-
? 'bg-gray-800 border-gray-600'
|
|
1122
|
-
: 'bg-white border-gray-200'}`, style: {
|
|
1122
|
+
? 'blumessage-bg-gray-800 blumessage-border-gray-600'
|
|
1123
|
+
: 'blumessage-bg-white blumessage-border-gray-200'}`, style: {
|
|
1123
1124
|
...getHelpBubblePositionStyles(),
|
|
1124
1125
|
backgroundColor: helpBubbleBackgroundColor || (theme === 'dark' ? '#1f2937' : '#ffffff'),
|
|
1125
1126
|
transformOrigin: buttonPosition?.includes('bottom') ? 'bottom center' : 'top center',
|
|
1126
|
-
}, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [react_1.default.createElement(getHelpBubbleIconComponent(), {
|
|
1127
|
-
className: "w-4 h-4 flex-shrink-0",
|
|
1127
|
+
}, children: (0, jsx_runtime_1.jsxs)("div", { className: "blumessage-flex blumessage-items-center blumessage-gap-2", children: [react_1.default.createElement(getHelpBubbleIconComponent(), {
|
|
1128
|
+
className: "blumessage-w-4 blumessage-h-4 blumessage-flex-shrink-0",
|
|
1128
1129
|
style: { color: primaryColor.includes('linear-gradient') ? '#3b82f6' : primaryColor }
|
|
1129
|
-
}), (0, jsx_runtime_1.jsx)("span", { className: `leading-tight ${getTextColor(helpBubbleBackgroundColor || (theme === 'dark' ? '#1f2937' : '#ffffff'), theme)}`, children: helpBubbleMessage })] }) })), (0, jsx_runtime_1.jsx)("div", { style: getChatPositionStyles(), children: loadingContent })] }));
|
|
1130
|
+
}), (0, jsx_runtime_1.jsx)("span", { className: `blumessage-leading-tight ${getTextColor(helpBubbleBackgroundColor || (theme === 'dark' ? '#1f2937' : '#ffffff'), theme)}`, children: helpBubbleMessage })] }) })), (0, jsx_runtime_1.jsx)("div", { style: getChatPositionStyles(), children: loadingContent })] }));
|
|
1130
1131
|
}
|
|
1131
1132
|
return loadingContent;
|
|
1132
1133
|
}
|
|
1133
1134
|
// Main render for initialized state
|
|
1134
1135
|
if (floating) {
|
|
1135
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", { onClick: handleOpenChat, className: `text-white rounded-full shadow-lg transition-all duration-200 flex items-center justify-center gap-2 ${isMobile ? 'blumessage-mobile-button' : ''} ${buttonText ? 'px-4 py-3 h-12' : 'w-14 h-14'}`, style: { ...getButtonPositionStyles(), ...buttonStyle, backgroundImage: primaryColor }, children: [react_1.default.createElement(getIconComponent(), { className: "w-6 h-6" }), buttonText && !isMobile && (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium whitespace-nowrap", children: buttonText })] }), showHelpBubble && (isHelpBubbleVisible || isHelpBubbleAnimating) && ((0, jsx_runtime_1.jsx)("div", { className: `fixed z-[999] border rounded-lg shadow-lg px-3 py-2 text-sm max-w-[200px] ${isHelpBubbleVisible
|
|
1136
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", { onClick: handleOpenChat, className: `blumessage-text-white blumessage-rounded-full blumessage-shadow-lg blumessage-transition-all blumessage-duration-200 blumessage-flex blumessage-items-center blumessage-justify-center blumessage-gap-2 ${isMobile ? 'blumessage-mobile-button' : ''} ${buttonText ? 'blumessage-px-4 blumessage-py-3 blumessage-h-12' : 'blumessage-w-14 blumessage-h-14'}`, style: { ...getButtonPositionStyles(), ...buttonStyle, backgroundImage: primaryColor }, children: [react_1.default.createElement(getIconComponent(), { className: "blumessage-w-6 blumessage-h-6" }), buttonText && !isMobile && (0, jsx_runtime_1.jsx)("span", { className: "blumessage-text-sm blumessage-font-medium blumessage-whitespace-nowrap", children: buttonText })] }), showHelpBubble && (isHelpBubbleVisible || isHelpBubbleAnimating) && ((0, jsx_runtime_1.jsx)("div", { className: `blumessage-fixed blumessage-z-[999] blumessage-border blumessage-rounded-lg blumessage-shadow-lg blumessage-px-3 blumessage-py-2 blumessage-text-sm blumessage-max-w-[200px] ${isHelpBubbleVisible
|
|
1136
1137
|
? (buttonPosition?.includes('top') ? 'blumessage-help-bubble-in-top' : 'blumessage-help-bubble-in')
|
|
1137
1138
|
: (buttonPosition?.includes('top') ? 'blumessage-help-bubble-out-top' : 'blumessage-help-bubble-out')} ${theme === 'dark'
|
|
1138
|
-
? 'bg-gray-800 border-gray-600'
|
|
1139
|
-
: 'bg-white border-gray-200'}`, style: {
|
|
1139
|
+
? 'blumessage-bg-gray-800 blumessage-border-gray-600'
|
|
1140
|
+
: 'blumessage-bg-white blumessage-border-gray-200'}`, style: {
|
|
1140
1141
|
...getHelpBubblePositionStyles(),
|
|
1141
1142
|
backgroundColor: helpBubbleBackgroundColor || (theme === 'dark' ? '#1f2937' : '#ffffff'),
|
|
1142
1143
|
transformOrigin: buttonPosition?.includes('bottom') ? 'bottom center' : 'top center',
|
|
1143
|
-
}, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [react_1.default.createElement(getHelpBubbleIconComponent(), {
|
|
1144
|
-
className: "w-4 h-4 flex-shrink-0",
|
|
1144
|
+
}, children: (0, jsx_runtime_1.jsxs)("div", { className: "blumessage-flex blumessage-items-center blumessage-gap-2", children: [react_1.default.createElement(getHelpBubbleIconComponent(), {
|
|
1145
|
+
className: "blumessage-w-4 blumessage-h-4 blumessage-flex-shrink-0",
|
|
1145
1146
|
style: { color: primaryColor.includes('linear-gradient') ? '#3b82f6' : primaryColor }
|
|
1146
|
-
}), (0, jsx_runtime_1.jsx)("span", { className: `leading-tight ${getTextColor(helpBubbleBackgroundColor || (theme === 'dark' ? '#1f2937' : '#ffffff'), theme)}`, children: helpBubbleMessage })] }) })), renderChatWindow()] }));
|
|
1147
|
+
}), (0, jsx_runtime_1.jsx)("span", { className: `blumessage-leading-tight ${getTextColor(helpBubbleBackgroundColor || (theme === 'dark' ? '#1f2937' : '#ffffff'), theme)}`, children: helpBubbleMessage })] }) })), renderChatWindow()] }));
|
|
1147
1148
|
}
|
|
1148
1149
|
return renderChatWindow();
|
|
1149
1150
|
});
|