@blumessage/react-chat 1.2.1 → 1.4.0

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)
@@ -273,12 +301,133 @@ The `onError` callback provides detailed error context:
 />
 ```
 
+## External Message Submission
+
+The component supports external message submission through a ref, allowing parent components to programmatically send messages and control the chat widget.
+
+### Using the Ref
+
+```tsx
+import React, { useRef } from 'react';
+import { BlumessageChat, BlumessageChatRef } from '@blumessage/react-chat';
+
+function App() {
+  const chatRef = useRef<BlumessageChatRef>(null);
+
+  const sendExternalMessage = async () => {
+    if (chatRef.current) {
+      await chatRef.current.sendMessage("Hello from external component!");
+    }
+  };
+
+  const openChat = () => {
+    chatRef.current?.openChat();
+  };
+
+  const closeChat = () => {
+    chatRef.current?.closeChat();
+  };
+
+  const clearChat = () => {
+    chatRef.current?.clearConversation();
+  };
+
+  const getMessages = () => {
+    const messages = chatRef.current?.getMessages();
+    console.log('Current messages:', messages);
+  };
+
+  const getToken = () => {
+    const token = chatRef.current?.getToken();
+    console.log('Current conversation token:', token);
+  };
+
+  return (
+    <div>
+      <button onClick={sendExternalMessage}>Send External Message</button>
+      <button onClick={openChat}>Open Chat</button>
+      <button onClick={closeChat}>Close Chat</button>
+      <button onClick={clearChat}>Clear Chat</button>
+      <button onClick={getMessages}>Get Messages</button>
+      <button onClick={getToken}>Get Token</button>
+      
+      <BlumessageChat
+        ref={chatRef}
+        apiKey="your-api-key"
+        floating={true}
+      />
+    </div>
+  );
+}
+```
+
+### Available Ref Methods
+
+| Method | Type | Description |
+|--------|------|-------------|
+| `sendMessage(message: string)` | `Promise<void>` | Send a message programmatically |
+| `openChat()` | `void` | Open the floating chat widget |
+| `closeChat()` | `void` | Close the floating chat widget |
+| `clearConversation()` | `void` | Clear all messages and reset conversation |
+| `getMessages()` | `Message[]` | Get current messages array |
+| `getToken()` | `string \| null` | Get current conversation token |
+
+### Complete Example with External Controls
+
+```tsx
+import React, { useRef, useState } from 'react';
+import { BlumessageChat, BlumessageChatRef } from '@blumessage/react-chat';
+
+function App() {
+  const [externalMessage, setExternalMessage] = useState('');
+  const chatRef = useRef<BlumessageChatRef>(null);
+
+  const handleSendExternalMessage = async () => {
+    if (!externalMessage.trim() || !chatRef.current) return;
+    
+    try {
+      await chatRef.current.sendMessage(externalMessage);
+      setExternalMessage('');
+      console.log('External message sent successfully');
+    } catch (error) {
+      console.error('Failed to send external message:', error);
+    }
+  };
+
+  return (
+    <div>
+      <div style={{ marginBottom: '20px' }}>
+        <input
+          type="text"
+          value={externalMessage}
+          onChange={(e) => setExternalMessage(e.target.value)}
+          placeholder="Type a message to send externally..."
+          onKeyPress={(e) => e.key === 'Enter' && handleSendExternalMessage()}
+        />
+        <button onClick={handleSendExternalMessage}>Send</button>
+        <button onClick={() => chatRef.current?.openChat()}>Open Chat</button>
+        <button onClick={() => chatRef.current?.closeChat()}>Close Chat</button>
+        <button onClick={() => chatRef.current?.clearConversation()}>Clear Chat</button>
+      </div>
+      
+      <BlumessageChat
+        ref={chatRef}
+        apiKey="your-api-key"
+        floating={true}
+        onUserMessage={(message) => console.log('User message:', message)}
+        onAssistantMessage={(message) => console.log('Assistant message:', message)}
+      />
+    </div>
+  );
+}
+```
+
 ## TypeScript Support
 
 Full TypeScript definitions included:
 
 ```typescript
-import { BlumessageChat, Message, BlumessageChatProps } from '@blumessage/react-chat';
+import { BlumessageChat, Message, BlumessageChatProps, BlumessageChatRef } from '@blumessage/react-chat';
 
 interface Message {
   id: string;
@@ -286,6 +435,15 @@ interface Message {
   content: string;
   timestamp: number;
 }
+
+interface BlumessageChatRef {
+  sendMessage: (message: string) => Promise<void>;
+  openChat: () => void;
+  closeChat: () => void;
+  clearConversation: () => void;
+  getMessages: () => Message[];
+  getToken: () => string | null;
+}
 ```
 
 ## Storage Behavior
@@ -301,6 +459,32 @@ interface Message {
 - 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

@@ -55,7 +55,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect, useRef, forwardRef, useImperativeHandle } from "react";
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import { MessageCircle, AlertTriangle, Loader2, Send, X, Maximize, Minimize2, Bot, MessageSquare, Phone, Mail, Headphones, Users, User, Heart, Star, Zap } from "lucide-react";
@@ -119,7 +119,7 @@ var useIsMobile = function () {
     }, []);
     return isMobile;
 };
-export var BlumessageChat = function (_a) {
+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, 
     // Floating button props
     _o = _a.floating, 
@@ -203,7 +203,7 @@ export var BlumessageChat = function (_a) {
                 break;
             case 'medium':
             default:
-                dimensions = { width: '480px', height: '600px' };
+                dimensions = { width: '600px', height: '600px' };
         }
         return dimensions;
     };
@@ -563,6 +563,149 @@ export var BlumessageChat = function (_a) {
         // Default fallback
         return MessageCircle;
     };
+    // Expose methods to parent component via ref
+    useImperativeHandle(ref, function () { return ({
+        sendMessage: function (message) { return __awaiter(void 0, void 0, void 0, function () {
+            var userMessage, currentInput, requestBody, response, apiResponse, assistantMessages, latestAssistantMessage, assistantResponse_2, errorMessage_3, error_3, errorMessage_4;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!message.trim() || isLoading)
+                            return [2 /*return*/];
+                        userMessage = {
+                            id: Date.now().toString(),
+                            content: message.trim(),
+                            role: 'user',
+                            timestamp: Date.now()
+                        };
+                        // Add user message to UI immediately
+                        setMessages(function (prev) { return __spreadArray(__spreadArray([], prev, true), [userMessage], false); });
+                        currentInput = message.trim();
+                        setIsLoading(true);
+                        // Call the callback if provided
+                        if (onUserMessage) {
+                            onUserMessage(userMessage);
+                        }
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 6, 7, 8]);
+                        requestBody = {
+                            message: currentInput,
+                        };
+                        // Include token if we have one
+                        if (token) {
+                            requestBody.token = token;
+                        }
+                        return [4 /*yield*/, fetch('https://api.blumessage.com/api/v1/conversations', {
+                                method: 'POST',
+                                headers: {
+                                    'Content-Type': 'application/json',
+                                    'Authorization': "Bearer ".concat(apiKey),
+                                },
+                                body: JSON.stringify(requestBody),
+                            })];
+                    case 2:
+                        response = _a.sent();
+                        if (!response.ok) return [3 /*break*/, 4];
+                        return [4 /*yield*/, response.json()];
+                    case 3:
+                        apiResponse = _a.sent();
+                        // Update token from response (for both first message and continuing conversations)
+                        updateConversationToken(apiResponse.token);
+                        assistantMessages = apiResponse.messages.filter(function (msg) { return msg.role === 'assistant'; });
+                        latestAssistantMessage = assistantMessages[assistantMessages.length - 1];
+                        if (latestAssistantMessage) {
+                            assistantResponse_2 = {
+                                id: (Date.now() + 1).toString(),
+                                content: latestAssistantMessage.content,
+                                role: 'assistant',
+                                timestamp: latestAssistantMessage.timestamp,
+                            };
+                            setMessages(function (prev) { return __spreadArray(__spreadArray([], prev, true), [assistantResponse_2], false); });
+                            if (onAssistantMessage) {
+                                onAssistantMessage(assistantResponse_2);
+                            }
+                        }
+                        return [3 /*break*/, 5];
+                    case 4:
+                        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);
+                        }
+                        errorMessage_3 = {
+                            id: (Date.now() + 1).toString(),
+                            content: "Sorry, I'm having trouble connecting right now. Please try again.",
+                            role: 'assistant',
+                            timestamp: Date.now(),
+                        };
+                        setMessages(function (prev) { return __spreadArray(__spreadArray([], prev, true), [errorMessage_3], false); });
+                        if (onError) {
+                            onError("Failed to send message: ".concat(response.status, " ").concat(response.statusText), "message_send");
+                        }
+                        _a.label = 5;
+                    case 5: return [3 /*break*/, 8];
+                    case 6:
+                        error_3 = _a.sent();
+                        console.error('Error sending message to Blumessage API:', error_3);
+                        errorMessage_4 = {
+                            id: (Date.now() + 1).toString(),
+                            content: "Sorry, I'm having trouble connecting right now. Please try again.",
+                            role: 'assistant',
+                            timestamp: Date.now(),
+                        };
+                        setMessages(function (prev) { return __spreadArray(__spreadArray([], prev, true), [errorMessage_4], false); });
+                        if (onError) {
+                            onError("Error sending message: ".concat(error_3), "message_send");
+                        }
+                        return [3 /*break*/, 8];
+                    case 7:
+                        setIsLoading(false);
+                        return [7 /*endfinally*/];
+                    case 8: return [2 /*return*/];
+                }
+            });
+        }); },
+        openChat: function () {
+            if (!isOpen && !isAnimating) {
+                setIsAnimating(true);
+                // Small delay to ensure smooth animation start
+                setTimeout(function () {
+                    setIsOpen(true);
+                    // Call the callback after the chat is open
+                    if (onChatWidgetOpen) {
+                        onChatWidgetOpen();
+                    }
+                }, 10);
+                // Animation duration
+                setTimeout(function () {
+                    setIsAnimating(false);
+                }, 300);
+            }
+        },
+        closeChat: function () {
+            if (isOpen && !isAnimating) {
+                setIsAnimating(true);
+                setIsOpen(false);
+                // Reset maximized state when closing
+                setIsMaximized(false);
+                // Call the callback when closing
+                if (onChatWidgetClosed) {
+                    onChatWidgetClosed();
+                }
+                // Wait for animation to complete
+                setTimeout(function () {
+                    setIsAnimating(false);
+                }, 300);
+            }
+        },
+        clearConversation: function () {
+            setMessages([]);
+            updateConversationToken(null);
+        },
+        getMessages: function () { return messages; },
+        getToken: function () { return token; },
+    }); });
     // Helper function to get position styles for floating button
     var getButtonPositionStyles = function () {
         var baseStyles = {
@@ -783,4 +926,4 @@ export var BlumessageChat = function (_a) {
         return (_jsxs(_Fragment, { children: [_jsxs("button", { onClick: handleOpenChat, className: "text-white rounded-full shadow-lg transition-all duration-200 flex items-center justify-center gap-2 ".concat(isMobile ? 'blumessage-mobile-button' : '', " ").concat(buttonText ? 'px-4 py-3 h-12' : 'w-14 h-14'), style: __assign(__assign(__assign({}, getButtonPositionStyles()), buttonStyle), { backgroundImage: primaryColor }), children: [React.createElement(getIconComponent(), { className: "w-6 h-6" }), buttonText && !isMobile && _jsx("span", { className: "text-sm font-medium whitespace-nowrap", children: buttonText })] }), renderChatWindow()] }));
     }
     return renderChatWindow();
-};
+});