@blumessage/react-chat 1.4.2 → 1.5.1

package/README.md

@@ -107,6 +107,12 @@ function App() {
 | `defaultOpen` | `boolean` | `false` | Start with chat open |
 | `maximizeToggleButton` | `boolean` | `true` | Show maximize/minimize button |
 | `icon` | `string` | `'message-circle'` | Icon for button (flexible naming) |
+| **Help Bubble Options** |
+| `showHelpBubble` | `boolean` | `true` | Show help bubble above floating button |
+| `helpBubbleMessage` | `string` | `"👋 If you need help chat with us"` | Message text in help bubble |
+| `helpBubbleIcon` | `string` | `'hand'` | Icon for help bubble (supports lucide-react icon names) |
+| `helpBubbleShowAfter` | `number` | `1` | Seconds to wait before showing bubble |
+| `helpBubbleHideAfter` | `number` | `5` | Seconds to wait before hiding bubble (0 = never hide) |
 | **Messages & Data** |
 | `initialMessages` | `Message[]` | `[]` | Pre-populate with messages |
 | `conversationId` | `string` | - | Continue specific conversation |
@@ -188,6 +194,68 @@ const initialMessages = [
 />
 ```
 
+### Help Bubble Configuration
+
+```tsx
+<BlumessageChat 
+  apiKey="your-api-key"
+  floating={true}
+  showHelpBubble={true}
+  helpBubbleMessage="👋 Need assistance? We're here to help!"
+  helpBubbleIcon="hand"  // Use hand icon (default)
+  helpBubbleShowAfter={3}  // Show after 3 seconds
+  helpBubbleHideAfter={10} // Hide after 10 seconds
+/>
+```
+
+### Custom Help Bubble Icons
+
+```tsx
+<BlumessageChat 
+  apiKey="your-api-key"
+  floating={true}
+  showHelpBubble={true}
+  helpBubbleIcon="star"  // Use star icon
+  helpBubbleMessage="⭐ Rate our service!"
+  helpBubbleShowAfter={2}
+  helpBubbleHideAfter={8}
+/>
+
+<BlumessageChat 
+  apiKey="your-api-key"
+  floating={true}
+  showHelpBubble={true}
+  helpBubbleIcon="lightbulb"  // Use lightbulb icon
+  helpBubbleMessage="💡 Got an idea? Let's discuss it!"
+  helpBubbleShowAfter={1}
+  helpBubbleHideAfter={0}  // Never hide
+/>
+
+<BlumessageChat 
+  apiKey="your-api-key"
+  floating={true}
+  showHelpBubble={true}
+  helpBubbleIcon="help-circle"  // Use help icon
+  helpBubbleMessage="❓ Questions? We're here to help!"
+  helpBubbleShowAfter={5}
+  helpBubbleHideAfter={15}
+/>
+```
+```
+
+### Persistent Help Bubble (Never Hide)
+
+```tsx
+<BlumessageChat 
+  apiKey="your-api-key"
+  floating={true}
+  showHelpBubble={true}
+  helpBubbleMessage="💬 Questions? Click to chat with us!"
+  helpBubbleShowAfter={2}  // Show after 2 seconds
+  helpBubbleHideAfter={0}  // Never hide (0 = persistent)
+/>
+```
+
 ### Chat with Timestamps
 
 ```tsx

package/dist/BlumessageChat.js

@@ -41,7 +41,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const react_markdown_1 = __importDefault(require("react-markdown"));
 const remark_gfm_1 = __importDefault(require("remark-gfm"));
-const lucide_react_1 = require("lucide-react");
+const LucideIcons = __importStar(require("lucide-react"));
 // Custom CSS animations that don't depend on Tailwind
 const customStyles = `
   @keyframes bounce {
@@ -62,6 +62,50 @@ const customStyles = `
     }
   }
   
+  @keyframes helpBubbleIn {
+    0% {
+      transform: translateY(20px) scale(0.8);
+      opacity: 0;
+    }
+    100% {
+      transform: translateY(0) scale(1);
+      opacity: 1;
+    }
+  }
+  
+  @keyframes helpBubbleOut {
+    0% {
+      transform: translateY(0) scale(1);
+      opacity: 1;
+    }
+    100% {
+      transform: translateY(20px) scale(0.8);
+      opacity: 0;
+    }
+  }
+  
+  @keyframes helpBubbleInTop {
+    0% {
+      transform: translateY(-20px) scale(0.8);
+      opacity: 0;
+    }
+    100% {
+      transform: translateY(0) scale(1);
+      opacity: 1;
+    }
+  }
+  
+  @keyframes helpBubbleOutTop {
+    0% {
+      transform: translateY(0) scale(1);
+      opacity: 1;
+    }
+    100% {
+      transform: translateY(-20px) scale(0.8);
+      opacity: 0;
+    }
+  }
+  
   .blumessage-animate-bounce {
     animation: bounce 1s infinite;
   }
@@ -70,6 +114,22 @@ const customStyles = `
     animation: spin 1s linear infinite;
   }
   
+  .blumessage-help-bubble-in {
+    animation: helpBubbleIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  }
+  
+  .blumessage-help-bubble-out {
+    animation: helpBubbleOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  }
+  
+  .blumessage-help-bubble-in-top {
+    animation: helpBubbleInTop 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  }
+  
+  .blumessage-help-bubble-out-top {
+    animation: helpBubbleOutTop 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  }
+  
   /* Mobile-specific styles */
   @media (max-width: 768px) {
     .blumessage-mobile-fullscreen {
@@ -130,7 +190,7 @@ const saveConversationToken = (token, persistent = false) => {
         storage.setItem(CONVERSATION_TOKEN_KEY, token);
     }
     catch (error) {
-        console.warn(`Failed to save conversation token to ${persistent ? 'local' : 'session'} storage:`, error);
+        // Silent fail - storage might not be available
     }
 };
 const getStoredConversationToken = (persistent = false) => {
@@ -139,7 +199,7 @@ const getStoredConversationToken = (persistent = false) => {
         return storage.getItem(CONVERSATION_TOKEN_KEY);
     }
     catch (error) {
-        console.warn(`Failed to get conversation token from ${persistent ? 'local' : 'session'} storage:`, error);
+        // Silent fail - storage might not be available
         return null;
     }
 };
@@ -149,7 +209,7 @@ const clearStoredConversationToken = (persistent = false) => {
         storage.removeItem(CONVERSATION_TOKEN_KEY);
     }
     catch (error) {
-        console.warn(`Failed to clear conversation token from ${persistent ? 'local' : 'session'} storage:`, error);
+        // Silent fail - storage might not be available
     }
 };
 // Custom hook for mobile detection
@@ -173,7 +233,11 @@ exports.BlumessageChat = (0, react_1.forwardRef)(({ apiKey, placeholder = "Type
 // Floating button props
 floating = true, buttonText = "Chat with us", buttonPosition = 'bottom-right', buttonStyle, defaultOpen = false, maximizeToggleButton = true, fullScreen = false, icon = 'message-circle', 
 // Styling props
-primaryColor = "linear-gradient(to right, #3b82f6,rgb(8, 98, 242))" }, ref) => {
+primaryColor = "linear-gradient(to right, #3b82f6,rgb(8, 98, 242))", 
+// Help bubble props
+showHelpBubble = true, helpBubbleMessage = "Have a question? We're here to help!", helpBubbleIcon = 'message-circle-question-mark', helpBubbleIconName, helpBubbleShowAfter = 1, // 1 second
+helpBubbleHideAfter = 5, // 5 seconds
+helpBubbleBackgroundColor = "#000000", }, ref) => {
     const [isInitialized, setIsInitialized] = (0, react_1.useState)(false);
     const [error, setError] = (0, react_1.useState)(null);
     const [messages, setMessages] = (0, react_1.useState)(initialMessages);
@@ -185,8 +249,36 @@ primaryColor = "linear-gradient(to right, #3b82f6,rgb(8, 98, 242))" }, ref) => {
     const [isMaximized, setIsMaximized] = (0, react_1.useState)(false);
     const messagesEndRef = (0, react_1.useRef)(null);
     const isInitialLoad = (0, react_1.useRef)(true);
+    const [isHelpBubbleVisible, setIsHelpBubbleVisible] = (0, react_1.useState)(false);
+    const [isHelpBubbleAnimating, setIsHelpBubbleAnimating] = (0, react_1.useState)(false);
     // Mobile detection
     const isMobile = useIsMobile();
+    // Help bubble effect
+    (0, react_1.useEffect)(() => {
+        if (!floating || !showHelpBubble)
+            return;
+        const showTimer = setTimeout(() => {
+            setIsHelpBubbleAnimating(true);
+            setIsHelpBubbleVisible(true);
+            // Remove animating state after animation completes
+            setTimeout(() => {
+                setIsHelpBubbleAnimating(false);
+            }, 300);
+            // Hide the bubble after the specified time if hideAfter > 0
+            if (helpBubbleHideAfter > 0) {
+                const hideTimer = setTimeout(() => {
+                    setIsHelpBubbleAnimating(true);
+                    setIsHelpBubbleVisible(false);
+                    // Remove animating state after animation completes
+                    setTimeout(() => {
+                        setIsHelpBubbleAnimating(false);
+                    }, 300);
+                }, helpBubbleHideAfter * 1000);
+                return () => clearTimeout(hideTimer);
+            }
+        }, helpBubbleShowAfter * 1000);
+        return () => clearTimeout(showTimer);
+    }, [floating, showHelpBubble, helpBubbleShowAfter, helpBubbleHideAfter]);
     // Helper function to format timestamp
     const formatTimestamp = (timestamp) => {
         const date = new Date(timestamp);
@@ -274,7 +366,6 @@ primaryColor = "linear-gradient(to right, #3b82f6,rgb(8, 98, 242))" }, ref) => {
     // Function to fetch conversation history
     const fetchConversationHistory = async (convToken) => {
         try {
-            console.log("Fetching conversation history for:", convToken);
             const response = await fetch(`https://api.blumessage.com/api/v1/conversations/session/${convToken}`, {
                 method: 'GET',
                 headers: {
@@ -283,11 +374,9 @@ primaryColor = "linear-gradient(to right, #3b82f6,rgb(8, 98, 242))" }, ref) => {
             });
             if (response.ok) {
                 const sessionData = await response.json();
-                console.log("Conversation history loaded successfully");
                 return sessionData.messages || [];
             }
             else {
-                console.error("Failed to fetch conversation history:", response.status, response.statusText);
                 // Clear invalid conversation ID from storage
                 updateConversationToken(null);
                 if (onError) {
@@ -297,7 +386,6 @@ primaryColor = "linear-gradient(to right, #3b82f6,rgb(8, 98, 242))" }, ref) => {
             }
         }
         catch (error) {
-            console.error("Error fetching conversation history:", error);
             // Clear invalid conversation ID from storage
             updateConversationToken(null);
             if (onError) {
@@ -308,7 +396,6 @@ primaryColor = "linear-gradient(to right, #3b82f6,rgb(8, 98, 242))" }, ref) => {
     };
     (0, react_1.useEffect)(() => {
         if (!apiKey) {
-            console.error("Blumessage Chat: API key is required");
             const errorMessage = "API key is required";
             setError(errorMessage);
             if (onError) {
@@ -321,7 +408,6 @@ primaryColor = "linear-gradient(to right, #3b82f6,rgb(8, 98, 242))" }, ref) => {
             try {
                 setIsInitialized(false);
                 setError(null);
-                console.log("Initializing Blumessage chat...");
                 const response = await fetch('https://api.blumessage.com/api/v1/api-keys/validate', {
                     method: 'POST',
                     headers: {
@@ -330,12 +416,10 @@ primaryColor = "linear-gradient(to right, #3b82f6,rgb(8, 98, 242))" }, ref) => {
                     body: JSON.stringify({ apiKey }),
                 });
                 if (response.ok) {
-                    console.log("Blumessage chat initialized successfully");
                     setIsInitialized(true);
                     setError(null);
                 }
                 else {
-                    console.error("Blumessage chat initialization failed:", response.status, response.statusText);
                     const errorMessage = "Unable to connect - invalid API key";
                     setError(errorMessage);
                     setIsInitialized(false);
@@ -345,7 +429,6 @@ primaryColor = "linear-gradient(to right, #3b82f6,rgb(8, 98, 242))" }, ref) => {
                 }
             }
             catch (err) {
-                console.error("Blumessage chat initialization error:", err);
                 const errorMessage = "Unable to connect - network error";
                 setError(errorMessage);
                 setIsInitialized(false);
@@ -364,7 +447,6 @@ primaryColor = "linear-gradient(to right, #3b82f6,rgb(8, 98, 242))" }, ref) => {
                 // Handle message initialization based on conversation state
                 if (initialMessages.length > 0 && token) {
                     // Warn if both are provided - initialMessages takes precedence
-                    console.warn('Both initialMessages and token provided. Using initialMessages and ignoring stored token.');
                     setMessages(initialMessages);
                 }
                 else if (initialMessages.length > 0) {
@@ -444,7 +526,6 @@ primaryColor = "linear-gradient(to right, #3b82f6,rgb(8, 98, 242))" }, ref) => {
                 }
             }
             else {
-                console.error('Failed to send message to Blumessage API:', response.status, response.statusText);
                 // If token is invalid, clear it
                 if (response.status === 401 || response.status === 403) {
                     updateConversationToken(null);
@@ -463,7 +544,6 @@ primaryColor = "linear-gradient(to right, #3b82f6,rgb(8, 98, 242))" }, ref) => {
             }
         }
         catch (error) {
-            console.error('Error sending message to Blumessage API:', error);
             // Add error message
             const errorMessage = {
                 id: (Date.now() + 1).toString(),
@@ -540,37 +620,68 @@ primaryColor = "linear-gradient(to right, #3b82f6,rgb(8, 98, 242))" }, ref) => {
     const handleToggleMaximize = () => {
         setIsMaximized(!isMaximized);
     };
+    // Helper function to get any Lucide React icon by name
+    const getLucideIcon = (iconName) => {
+        if (!iconName)
+            return LucideIcons.MessageCircle;
+        // Convert icon name to PascalCase (e.g., "message-circle" -> "MessageCircle")
+        const pascalCaseName = iconName
+            .split(/[-_\s]+/)
+            .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+            .join('');
+        // Return the icon component if it exists, otherwise fallback to MessageCircle
+        const IconComponent = LucideIcons[pascalCaseName];
+        if (!IconComponent) {
+        }
+        return (IconComponent || LucideIcons.MessageCircle);
+    };
+    // Get the help bubble icon component based on the helpBubbleIcon or helpBubbleIconName prop
+    const getHelpBubbleIconComponent = () => {
+        // If helpBubbleIconName is provided, use it directly
+        if (helpBubbleIconName) {
+            return getLucideIcon(helpBubbleIconName);
+        }
+        // Otherwise use the helpBubbleIcon prop
+        return getLucideIcon(helpBubbleIcon);
+    };
+    // Helper function to determine if a color is dark (for text contrast)
+    const isColorDark = (color) => {
+        // Handle hex colors
+        if (color.startsWith('#')) {
+            const hex = color.replace('#', '');
+            const r = parseInt(hex.substr(0, 2), 16);
+            const g = parseInt(hex.substr(2, 2), 16);
+            const b = parseInt(hex.substr(4, 2), 16);
+            // Calculate luminance
+            const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+            return luminance < 0.5;
+        }
+        // Handle rgb/rgba colors
+        if (color.startsWith('rgb')) {
+            const match = color.match(/\d+/g);
+            if (match && match.length >= 3) {
+                const r = parseInt(match[0]);
+                const g = parseInt(match[1]);
+                const b = parseInt(match[2]);
+                const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+                return luminance < 0.5;
+            }
+        }
+        // Default to assuming light color for unknown formats
+        return false;
+    };
+    // Helper function to get appropriate text color based on background
+    const getTextColor = (backgroundColor, theme) => {
+        // If custom background color is provided, determine text color based on brightness
+        if (backgroundColor && backgroundColor !== '#ffffff' && backgroundColor !== '#1f2937') {
+            return isColorDark(backgroundColor) ? 'text-white' : 'text-gray-800';
+        }
+        // Fall back to theme-based colors
+        return theme === 'dark' ? 'text-gray-100' : 'text-gray-800';
+    };
     // Get the icon component based on the icon prop
     const getIconComponent = () => {
-        // More permissive icon matching - handle various naming patterns
-        const iconName = icon.toLowerCase().replace(/[-_\s]/g, '');
-        // Try to match common icon patterns
-        if (iconName.includes('message') || iconName.includes('chat')) {
-            if (iconName.includes('square'))
-                return lucide_react_1.MessageSquare;
-            return lucide_react_1.MessageCircle;
-        }
-        if (iconName.includes('bot') || iconName.includes('robot'))
-            return lucide_react_1.Bot;
-        if (iconName.includes('phone') || iconName.includes('call'))
-            return lucide_react_1.Phone;
-        if (iconName.includes('mail') || iconName.includes('email'))
-            return lucide_react_1.Mail;
-        if (iconName.includes('headphone') || iconName.includes('support'))
-            return lucide_react_1.Headphones;
-        if (iconName.includes('user')) {
-            if (iconName.includes('users') || iconName.includes('group'))
-                return lucide_react_1.Users;
-            return lucide_react_1.User;
-        }
-        if (iconName.includes('heart') || iconName.includes('like') || iconName.includes('love'))
-            return lucide_react_1.Heart;
-        if (iconName.includes('star') || iconName.includes('favorite'))
-            return lucide_react_1.Star;
-        if (iconName.includes('zap') || iconName.includes('lightning') || iconName.includes('bolt'))
-            return lucide_react_1.Zap;
-        // Default fallback
-        return lucide_react_1.MessageCircle;
+        return getLucideIcon(icon);
     };
     // Expose methods to parent component via ref
     (0, react_1.useImperativeHandle)(ref, () => ({
@@ -630,7 +741,6 @@ primaryColor = "linear-gradient(to right, #3b82f6,rgb(8, 98, 242))" }, ref) => {
                     }
                 }
                 else {
-                    console.error('Failed to send message to Blumessage API:', response.status, response.statusText);
                     // If token is invalid, clear it
                     if (response.status === 401 || response.status === 403) {
                         updateConversationToken(null);
@@ -649,7 +759,6 @@ primaryColor = "linear-gradient(to right, #3b82f6,rgb(8, 98, 242))" }, ref) => {
                 }
             }
             catch (error) {
-                console.error('Error sending message to Blumessage API:', error);
                 // Add error message
                 const errorMessage = {
                     id: (Date.now() + 1).toString(),
@@ -739,6 +848,36 @@ primaryColor = "linear-gradient(to right, #3b82f6,rgb(8, 98, 242))" }, ref) => {
                 return { ...baseStyles, bottom: '24px', right: '24px' };
         }
     };
+    // Helper function to get position styles for help bubble
+    const getHelpBubblePositionStyles = () => {
+        const baseStyles = {
+            position: 'fixed',
+            zIndex: 999,
+        };
+        // Mobile-specific positioning
+        if (isMobile) {
+            return {
+                ...baseStyles,
+                bottom: '80px',
+                right: '20px',
+                left: 'auto',
+                top: 'auto'
+            };
+        }
+        // Desktop positioning - position above the button
+        switch (buttonPosition) {
+            case 'bottom-right':
+                return { ...baseStyles, bottom: '80px', right: '24px' };
+            case 'bottom-left':
+                return { ...baseStyles, bottom: '80px', left: '24px' };
+            case 'top-right':
+                return { ...baseStyles, top: '80px', right: '24px' };
+            case 'top-left':
+                return { ...baseStyles, top: '80px', left: '24px' };
+            default:
+                return { ...baseStyles, bottom: '80px', right: '24px' };
+        }
+    };
     // Helper function to get position styles for floating chat window
     const getChatPositionStyles = () => {
         const getTransform = () => {
@@ -850,9 +989,9 @@ primaryColor = "linear-gradient(to right, #3b82f6,rgb(8, 98, 242))" }, ref) => {
                                 className: isMobile ? "w-5 h-5 text-white" : "w-6 h-6 text-white"
                             }) }), (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'
                                         ? 'hover:bg-gray-800 text-gray-400 hover:text-gray-200'
-                                        : 'hover:bg-gray-100 text-gray-500 hover:text-gray-700'}`, children: isMaximized ? (0, jsx_runtime_1.jsx)(lucide_react_1.Minimize2, { className: "w-4 h-4" }) : (0, jsx_runtime_1.jsx)(lucide_react_1.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'
+                                        : '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'
                                         ? 'hover:bg-gray-800 text-gray-400 hover:text-gray-200'
-                                        : 'hover:bg-gray-100 text-gray-500 hover:text-gray-700'}`, children: (0, jsx_runtime_1.jsx)(lucide_react_1.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'
+                                        : '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'
                                         ? 'text-white'
                                         : theme === 'dark'
                                             ? 'bg-gray-700 text-gray-100 border border-gray-600 shadow-sm'
@@ -879,7 +1018,7 @@ primaryColor = "linear-gradient(to right, #3b82f6,rgb(8, 98, 242))" }, ref) => {
                                     const target = e.target;
                                     target.style.height = 'auto';
                                     target.style.height = Math.min(target.scrollHeight, isMobile ? 100 : 120) + 'px';
-                                } }), (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)(lucide_react_1.Loader2, { className: "w-4 h-4 blumessage-animate-spin" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Send, { className: "w-4 h-4" })) })] }) })] }));
+                                } }), (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" })) })] }) })] }));
         if (floating) {
             return ((0, jsx_runtime_1.jsx)("div", { style: getChatPositionStyles(), children: chatContent }));
         }
@@ -905,15 +1044,26 @@ primaryColor = "linear-gradient(to right, #3b82f6,rgb(8, 98, 242))" }, ref) => {
                                 width: isMobile ? '40px' : '48px',
                                 height: isMobile ? '40px' : '48px',
                                 marginRight: isMobile ? '16px' : '24px'
-                            }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.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'
+                            }, 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'
                                         ? 'hover:bg-gray-800 text-gray-400 hover:text-gray-200'
-                                        : 'hover:bg-gray-100 text-gray-500 hover:text-gray-700'}`, children: isMaximized ? (0, jsx_runtime_1.jsx)(lucide_react_1.Minimize2, { className: "w-4 h-4" }) : (0, jsx_runtime_1.jsx)(lucide_react_1.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'
+                                        : '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'
                                         ? 'hover:bg-gray-800 text-gray-400 hover:text-gray-200'
-                                        : 'hover:bg-gray-100 text-gray-500 hover:text-gray-700'}`, children: (0, jsx_runtime_1.jsx)(lucide_react_1.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'
+                                        : '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'
                                 ? 'bg-gray-700 text-gray-100 border border-gray-600'
                                 : 'bg-white text-gray-800 border border-gray-200'}`, children: error }) }) })] }));
         if (floating) {
-            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 })] }), (0, jsx_runtime_1.jsx)("div", { style: getChatPositionStyles(), children: errorContent })] }));
+            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
+                            ? (buttonPosition?.includes('top') ? 'blumessage-help-bubble-in-top' : 'blumessage-help-bubble-in')
+                            : (buttonPosition?.includes('top') ? 'blumessage-help-bubble-out-top' : 'blumessage-help-bubble-out')} ${theme === 'dark'
+                            ? 'bg-gray-800 border-gray-600'
+                            : 'bg-white border-gray-200'}`, style: {
+                            ...getHelpBubblePositionStyles(),
+                            backgroundColor: helpBubbleBackgroundColor || (theme === 'dark' ? '#1f2937' : '#ffffff'),
+                            transformOrigin: buttonPosition?.includes('bottom') ? 'bottom center' : 'top center',
+                        }, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [react_1.default.createElement(getHelpBubbleIconComponent(), {
+                                    className: "w-4 h-4 flex-shrink-0",
+                                    style: { color: primaryColor.includes('linear-gradient') ? '#3b82f6' : primaryColor }
+                                }), (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 })] }));
         }
         return errorContent;
     }
@@ -933,19 +1083,41 @@ primaryColor = "linear-gradient(to right, #3b82f6,rgb(8, 98, 242))" }, ref) => {
                                 width: isMobile ? '40px' : '48px',
                                 height: isMobile ? '40px' : '48px',
                                 marginRight: isMobile ? '16px' : '24px'
-                            }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.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'
+                            }, 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'
                                         ? 'hover:bg-gray-800 text-gray-400 hover:text-gray-200'
-                                        : 'hover:bg-gray-100 text-gray-500 hover:text-gray-700'}`, children: isMaximized ? (0, jsx_runtime_1.jsx)(lucide_react_1.Minimize2, { className: "w-4 h-4" }) : (0, jsx_runtime_1.jsx)(lucide_react_1.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'
+                                        : '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'
                                         ? 'hover:bg-gray-800 text-gray-400 hover:text-gray-200'
-                                        : 'hover:bg-gray-100 text-gray-500 hover:text-gray-700'}`, children: (0, jsx_runtime_1.jsx)(lucide_react_1.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..." }) })] }));
+                                        : '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..." }) })] }));
         if (floating) {
-            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 })] }), (0, jsx_runtime_1.jsx)("div", { style: getChatPositionStyles(), children: loadingContent })] }));
+            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
+                            ? (buttonPosition?.includes('top') ? 'blumessage-help-bubble-in-top' : 'blumessage-help-bubble-in')
+                            : (buttonPosition?.includes('top') ? 'blumessage-help-bubble-out-top' : 'blumessage-help-bubble-out')} ${theme === 'dark'
+                            ? 'bg-gray-800 border-gray-600'
+                            : 'bg-white border-gray-200'}`, style: {
+                            ...getHelpBubblePositionStyles(),
+                            backgroundColor: helpBubbleBackgroundColor || (theme === 'dark' ? '#1f2937' : '#ffffff'),
+                            transformOrigin: buttonPosition?.includes('bottom') ? 'bottom center' : 'top center',
+                        }, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [react_1.default.createElement(getHelpBubbleIconComponent(), {
+                                    className: "w-4 h-4 flex-shrink-0",
+                                    style: { color: primaryColor.includes('linear-gradient') ? '#3b82f6' : primaryColor }
+                                }), (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 })] }));
         }
         return loadingContent;
     }
     // Main render for initialized state
     if (floating) {
-        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 })] }), renderChatWindow()] }));
+        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
+                        ? (buttonPosition?.includes('top') ? 'blumessage-help-bubble-in-top' : 'blumessage-help-bubble-in')
+                        : (buttonPosition?.includes('top') ? 'blumessage-help-bubble-out-top' : 'blumessage-help-bubble-out')} ${theme === 'dark'
+                        ? 'bg-gray-800 border-gray-600'
+                        : 'bg-white border-gray-200'}`, style: {
+                        ...getHelpBubblePositionStyles(),
+                        backgroundColor: helpBubbleBackgroundColor || (theme === 'dark' ? '#1f2937' : '#ffffff'),
+                        transformOrigin: buttonPosition?.includes('bottom') ? 'bottom center' : 'top center',
+                    }, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [react_1.default.createElement(getHelpBubbleIconComponent(), {
+                                className: "w-4 h-4 flex-shrink-0",
+                                style: { color: primaryColor.includes('linear-gradient') ? '#3b82f6' : primaryColor }
+                            }), (0, jsx_runtime_1.jsx)("span", { className: `leading-tight ${getTextColor(helpBubbleBackgroundColor || (theme === 'dark' ? '#1f2937' : '#ffffff'), theme)}`, children: helpBubbleMessage })] }) })), renderChatWindow()] }));
     }
     return renderChatWindow();
 });