@blumessage/react-chat 1.3.0 → 1.4.1

package/README.md

@@ -15,10 +15,38 @@ A React TypeScript chat widget component with floating button, theming, and Blum
 
 ## Installation
 
+### NPM Package (Recommended)
+
 ```bash
 npm i @blumessage/react-chat
 ```
 
+### Browser Versions
+
+#### Option 1: Standalone (Includes React)
+
+For the simplest setup with everything included:
+
+```html
+<!-- Load the Blumessage Chat component (includes React) -->
+<script src="path/to/index.js"></script>
+```
+
+#### Option 2: External React (Smaller Bundle)
+
+For when you already have React loaded:
+
+```html
+<!-- Load React and ReactDOM from CDN -->
+<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
+<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
+
+<!-- Load the Blumessage Chat component -->
+<script src="path/to/blumessage-chat.browser.js"></script>
+```
+
+See [BROWSER_USAGE.md](./BROWSER_USAGE.md) for complete browser usage documentation.
+
 ## Quick Start
 
 ### Floating Chat Widget (Default)
@@ -86,6 +114,8 @@ function App() {
 | `showTimestamps` | `boolean` | `false` | Display timestamps: today="2:00 PM", older="17 July, 1:00 PM" |
 | `typingText` | `string` | `"Agent is typing..."` | Custom text shown while waiting for assistant response |
 | `emptyStateText` | `string` | `"Start a conversation!"` | Text shown when no messages are present |
+| `markdown` | `boolean` | `true` | Enable markdown rendering for messages |
+| `disableAutoScroll` | `boolean` | `false` | Disable automatic scrolling to bottom when new messages arrive |
 | **Event Callbacks** |
 | `onUserMessage` | `(message: Message) => void` | - | Called when user sends message |
 | `onAssistantMessage` | `(message: Message) => void` | - | Called when assistant responds |
@@ -206,6 +236,17 @@ const initialMessages = [
 />
 ```
 
+### Disable Auto-Scroll
+
+```tsx
+<BlumessageChat 
+  apiKey="your-api-key"
+  disableAutoScroll={true}  // Prevents automatic scrolling to bottom
+  // Useful when you want users to maintain their scroll position
+  // or when implementing custom scroll behavior
+/>
+```
+
 ## Icon Options
 
 The `icon` prop accepts **any lucide-react icon name** with flexible naming patterns. The component intelligently matches your input to the appropriate lucide-react icon:
@@ -431,6 +472,32 @@ interface BlumessageChatRef {
 - React 18+
 - TypeScript 4.5+
 
+## Building
+
+### Standard Build (ES Modules)
+
+```bash
+npm run build
+```
+
+### Browser Versions
+
+#### Standalone (Includes React)
+
+```bash
+npm run build:commonjs
+```
+
+This creates `dist/index.js` which includes React and can be used directly in browsers.
+
+#### External React (Smaller Bundle)
+
+```bash
+npm run build:browser
+```
+
+This creates `dist/blumessage-chat.browser.js` which requires React to be loaded separately.
+
 ## License
 
 UNLICENSED - For use only by customers with an active Blumessage subscription.

package/dist/BlumessageChat.js

@@ -120,24 +120,24 @@ var useIsMobile = function () {
     return isMobile;
 };
 export var BlumessageChat = forwardRef(function (_a, ref) {
-    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, initialToken = _a.token, onTokenChange = _a.onTokenChange, 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, _m = _a.markdown, markdown = _m === void 0 ? true : _m, 
+    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, initialToken = _a.token, onTokenChange = _a.onTokenChange, 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, _m = _a.markdown, markdown = _m === void 0 ? true : _m, _o = _a.disableAutoScroll, disableAutoScroll = _o === void 0 ? false : _o, 
     // Floating button props
-    _o = _a.floating, 
+    _p = _a.floating, 
     // Floating button props
-    floating = _o === void 0 ? true : _o, _p = _a.buttonText, buttonText = _p === void 0 ? "Chat with us" : _p, _q = _a.buttonPosition, buttonPosition = _q === void 0 ? 'bottom-right' : _q, buttonStyle = _a.buttonStyle, _r = _a.defaultOpen, defaultOpen = _r === void 0 ? false : _r, _s = _a.maximizeToggleButton, maximizeToggleButton = _s === void 0 ? true : _s, _t = _a.fullScreen, fullScreen = _t === void 0 ? false : _t, _u = _a.icon, icon = _u === void 0 ? 'message-circle' : _u, 
+    floating = _p === void 0 ? true : _p, _q = _a.buttonText, buttonText = _q === void 0 ? "Chat with us" : _q, _r = _a.buttonPosition, buttonPosition = _r === void 0 ? 'bottom-right' : _r, buttonStyle = _a.buttonStyle, _s = _a.defaultOpen, defaultOpen = _s === void 0 ? false : _s, _t = _a.maximizeToggleButton, maximizeToggleButton = _t === void 0 ? true : _t, _u = _a.fullScreen, fullScreen = _u === void 0 ? false : _u, _v = _a.icon, icon = _v === void 0 ? 'message-circle' : _v, 
     // Styling props
-    _v = _a.primaryColor, 
+    _w = _a.primaryColor, 
     // Styling props
-    primaryColor = _v === void 0 ? "linear-gradient(to right, #3b82f6,rgb(8, 98, 242))" : _v;
-    var _w = useState(false), isInitialized = _w[0], setIsInitialized = _w[1];
-    var _x = useState(null), error = _x[0], setError = _x[1];
-    var _y = useState(initialMessages), messages = _y[0], setMessages = _y[1];
-    var _z = useState(''), inputValue = _z[0], setInputValue = _z[1];
-    var _0 = useState(initialToken || getStoredConversationToken(persistent)), token = _0[0], setToken = _0[1];
-    var _1 = useState(defaultOpen), isOpen = _1[0], setIsOpen = _1[1];
-    var _2 = useState(false), isAnimating = _2[0], setIsAnimating = _2[1];
-    var _3 = useState(false), isLoading = _3[0], setIsLoading = _3[1];
-    var _4 = useState(false), isMaximized = _4[0], setIsMaximized = _4[1];
+    primaryColor = _w === void 0 ? "linear-gradient(to right, #3b82f6,rgb(8, 98, 242))" : _w;
+    var _x = useState(false), isInitialized = _x[0], setIsInitialized = _x[1];
+    var _y = useState(null), error = _y[0], setError = _y[1];
+    var _z = useState(initialMessages), messages = _z[0], setMessages = _z[1];
+    var _0 = useState(''), inputValue = _0[0], setInputValue = _0[1];
+    var _1 = useState(initialToken || getStoredConversationToken(persistent)), token = _1[0], setToken = _1[1];
+    var _2 = useState(defaultOpen), isOpen = _2[0], setIsOpen = _2[1];
+    var _3 = useState(false), isAnimating = _3[0], setIsAnimating = _3[1];
+    var _4 = useState(false), isLoading = _4[0], setIsLoading = _4[1];
+    var _5 = useState(false), isMaximized = _5[0], setIsMaximized = _5[1];
     var messagesEndRef = useRef(null);
     var isInitialLoad = useRef(true);
     // Mobile detection
@@ -207,7 +207,7 @@ export var BlumessageChat = forwardRef(function (_a, ref) {
         }
         return dimensions;
     };
-    var _5 = getDimensions(), actualWidth = _5.width, actualHeight = _5.height;
+    var _6 = getDimensions(), actualWidth = _6.width, actualHeight = _6.height;
     // Function to clear conversation and start fresh
     var clearConversation = function () {
         updateConversationToken(null);
@@ -480,18 +480,20 @@ export var BlumessageChat = forwardRef(function (_a, ref) {
     // Auto-scroll to bottom when messages change
     useEffect(function () {
         var _a;
-        (_a = messagesEndRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth' });
+        if (!disableAutoScroll) {
+            (_a = messagesEndRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth' });
+        }
     }, [messages]);
     // Auto-scroll to bottom when chat widget opens
     useEffect(function () {
-        if (isOpen && floating) {
+        if (isOpen && floating && !disableAutoScroll) {
             // Add a small delay to ensure the DOM is updated after the animation starts
             setTimeout(function () {
                 var _a;
                 (_a = messagesEndRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth' });
             }, 50);
         }
-    }, [isOpen, floating]);
+    }, [isOpen, floating, disableAutoScroll]);
     // Handle opening the chat with animation
     var handleOpenChat = function () {
         if (!isOpen && !isAnimating) {