@blumessage/react-chat 1.2.0 → 1.3.0

package/README.md

@@ -273,12 +273,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 +407,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

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 = {
@@ -701,12 +844,15 @@ export var BlumessageChat = function (_a) {
                                     ? 'bg-gray-700 text-gray-100 border border-gray-600'
                                     : 'bg-white text-gray-800 border border-gray-200'), children: _jsx("div", { className: "".concat(theme === 'dark' ? 'text-gray-300' : 'text-gray-600'), style: { fontStyle: 'italic' }, children: typingText }) }) })), messages.length === 0 && !isLoading && (_jsx("div", { className: "text-center text-sm py-8 ".concat(theme === 'dark' ? 'text-gray-400' : 'text-gray-500'), children: emptyStateText })), _jsx("div", { ref: messagesEndRef })] }), _jsx("div", { className: "border-t ".concat(theme === 'dark'
                         ? 'bg-gray-900 border-gray-700'
-                        : 'bg-white border-gray-100'), style: { padding: isMobile ? '12px 16px' : '16px 24px' }, children: _jsxs("div", { className: "flex items-end rounded-2xl px-4 py-3 border ".concat(theme === 'dark'
+                        : 'bg-white border-gray-100'), style: { padding: isMobile ? '12px 16px' : '16px 24px' }, children: _jsxs("div", { className: "flex items-center rounded-2xl px-4 py-3 border ".concat(theme === 'dark'
                             ? 'bg-gray-800 border-gray-600'
                             : 'bg-gray-50 border-gray-200'), children: [_jsx("textarea", { className: "flex-1 border-none bg-transparent outline-none text-sm font-inherit resize-none ".concat(theme === 'dark' ? 'text-gray-100' : 'text-gray-700'), placeholder: placeholder, value: inputValue, onChange: function (e) { return setInputValue(e.target.value); }, onKeyDown: handleKeyPress, rows: 1, style: {
                                     minHeight: '20px',
                                     maxHeight: isMobile ? '100px' : '120px',
-                                    overflowY: inputValue.split('\n').length > 4 ? 'auto' : 'hidden'
+                                    overflowY: inputValue.split('\n').length > 4 ? 'auto' : 'hidden',
+                                    lineHeight: '1.5',
+                                    paddingTop: '2px',
+                                    paddingBottom: '2px'
                                 }, onInput: function (e) {
                                     var target = e.target;
                                     target.style.height = 'auto';
@@ -780,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();
-};
+});

package/dist/types/BlumessageChat.d.ts

@@ -11,6 +11,14 @@ export interface BlumessageApiResponse {
     created_at: number;
     updated_at: number;
 }
+export interface BlumessageChatRef {
+    sendMessage: (message: string) => Promise<void>;
+    openChat: () => void;
+    closeChat: () => void;
+    clearConversation: () => void;
+    getMessages: () => Message[];
+    getToken: () => string | null;
+}
 export interface BlumessageChatProps {
     apiKey: string;
     placeholder?: string;
@@ -43,4 +51,4 @@ export interface BlumessageChatProps {
     icon?: string;
     primaryColor?: string;
 }
-export declare const BlumessageChat: React.FC<BlumessageChatProps>;
+export declare const BlumessageChat: React.ForwardRefExoticComponent<BlumessageChatProps & React.RefAttributes<BlumessageChatRef>>;

package/dist/types/index.d.ts

@@ -1 +1 @@
-export { BlumessageChat, type BlumessageChatProps, type Message, type BlumessageApiResponse } from './BlumessageChat';
+export { BlumessageChat, type BlumessageChatProps, type BlumessageChatRef, type Message, type BlumessageApiResponse } from './BlumessageChat';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blumessage/react-chat",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "A React TypeScript chat widget component with floating button, theming, and Blumessage API integration",
   "license": "UNLICENSED",
   "author": "Blumessage <contact@blumessage.com>",
@@ -63,4 +63,4 @@
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1"
   }
-}
+}