@blumessage/react-chat 1.1.0 → 1.1.2

package/dist/BlumessageChat.js

@@ -57,6 +57,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useState, useEffect, useRef } 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";
 // Custom CSS animations that don't depend on Tailwind
 var customStyles = "\n  @keyframes bounce {\n    0%, 100% {\n      transform: translateY(0);\n    }\n    50% {\n      transform: translateY(-25%);\n    }\n  }\n  \n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n  \n  .blumessage-animate-bounce {\n    animation: bounce 1s infinite;\n  }\n  \n  .blumessage-animate-spin {\n    animation: spin 1s linear infinite;\n  }\n";
@@ -102,24 +103,24 @@ var clearStoredConversationId = function (persistent) {
     }
 };
 export var BlumessageChat = function (_a) {
-    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, initialConversationId = _a.conversationId, onConversationIdChange = _a.onConversationIdChange, 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, 
+    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, initialConversationId = _a.conversationId, onConversationIdChange = _a.onConversationIdChange, 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
-    _m = _a.floating, 
+    _o = _a.floating, 
     // Floating button props
-    floating = _m === void 0 ? true : _m, _o = _a.buttonText, buttonText = _o === void 0 ? "Chat with us" : _o, _p = _a.buttonPosition, buttonPosition = _p === void 0 ? 'bottom-right' : _p, buttonStyle = _a.buttonStyle, _q = _a.defaultOpen, defaultOpen = _q === void 0 ? false : _q, _r = _a.maximizeToggleButton, maximizeToggleButton = _r === void 0 ? true : _r, _s = _a.fullScreen, fullScreen = _s === void 0 ? false : _s, _t = _a.icon, icon = _t === void 0 ? 'message-circle' : _t, 
+    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, 
     // Styling props
-    _u = _a.primaryColor, 
+    _v = _a.primaryColor, 
     // Styling props
-    primaryColor = _u === void 0 ? "linear-gradient(to right, #3b82f6,rgb(8, 98, 242))" : _u;
-    var _v = useState(false), isInitialized = _v[0], setIsInitialized = _v[1];
-    var _w = useState(null), error = _w[0], setError = _w[1];
-    var _x = useState(initialMessages), messages = _x[0], setMessages = _x[1];
-    var _y = useState(''), inputValue = _y[0], setInputValue = _y[1];
-    var _z = useState(initialConversationId || getStoredConversationId(persistent)), conversationId = _z[0], setConversationId = _z[1];
-    var _0 = useState(defaultOpen), isOpen = _0[0], setIsOpen = _0[1];
-    var _1 = useState(false), isAnimating = _1[0], setIsAnimating = _1[1];
-    var _2 = useState(false), isLoading = _2[0], setIsLoading = _2[1];
-    var _3 = useState(false), isMaximized = _3[0], setIsMaximized = _3[1];
+    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(initialConversationId || getStoredConversationId(persistent)), conversationId = _0[0], setConversationId = _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];
     var messagesEndRef = useRef(null);
     var isInitialLoad = useRef(true);
     // Helper function to format timestamp
@@ -171,7 +172,7 @@ export var BlumessageChat = function (_a) {
         }
         return dimensions;
     };
-    var _4 = getDimensions(), actualWidth = _4.width, actualHeight = _4.height;
+    var _5 = getDimensions(), actualWidth = _5.width, actualHeight = _5.height;
     // Function to update conversation ID and notify parent
     var updateConversationId = function (newConversationId) {
         setConversationId(newConversationId);
@@ -605,7 +606,7 @@ export var BlumessageChat = function (_a) {
                             ? 'blumessage-bg-gradient-to-r blumessage-from-blue-500 blumessage-to-purple-600 blumessage-text-white'
                             : theme === 'light'
                                 ? 'blumessage-bg-gray-100'
-                                : 'blumessage-bg-gray-700'), children: message.role === 'assistant' ? (_jsx("div", { className: "blumessage-prose ".concat(theme === 'dark' ? 'blumessage-text-white' : 'blumessage-text-gray-900'), children: _jsx(ReactMarkdown, { children: message.content }) })) : (_jsx("p", { className: "blumessage-text-sm blumessage-whitespace-pre-wrap", children: message.content })) }), showTimestamps && (_jsx("span", { className: "blumessage-text-xs blumessage-text-gray-500", children: formatTimestamp(message.timestamp) }))] }) }, message.id));
+                                : 'blumessage-bg-gray-700'), children: message.role === 'assistant' ? (_jsx("div", { className: "blumessage-prose ".concat(theme === 'dark' ? 'blumessage-text-white' : 'blumessage-text-gray-900'), children: markdown ? (_jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], children: message.content })) : (_jsx("p", { className: "blumessage-text-sm blumessage-whitespace-pre-wrap", children: message.content })) })) : (_jsx("div", { className: "blumessage-text-sm blumessage-whitespace-pre-wrap blumessage-text-white", children: markdown ? (_jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], children: message.content })) : (_jsx("p", { className: "blumessage-text-sm blumessage-whitespace-pre-wrap", children: message.content })) })) }), showTimestamps && (_jsx("span", { className: "blumessage-text-xs blumessage-text-gray-500", children: formatTimestamp(message.timestamp) }))] }) }, message.id));
     };
     // Render chat window component
     var renderChatWindow = function () {
@@ -635,7 +636,7 @@ export var BlumessageChat = function (_a) {
                                         ? 'text-white'
                                         : theme === 'dark'
                                             ? 'bg-gray-700 text-gray-100 border border-gray-600 shadow-sm'
-                                            : 'bg-white text-gray-800 border border-gray-200 shadow-sm'), style: message.role === 'user' ? { backgroundImage: primaryColor } : {}, children: [_jsx("div", { className: "inline-block", children: message.content }), showTimestamps && (_jsx("div", { className: "text-[10px] mt-1 opacity-75 ".concat(message.role === 'user'
+                                            : 'bg-white text-gray-800 border border-gray-200 shadow-sm'), style: message.role === 'user' ? { backgroundImage: primaryColor } : {}, children: [message.role === 'assistant' ? (markdown ? (_jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], children: message.content })) : (_jsx("div", { className: "whitespace-pre-wrap", children: message.content }))) : (_jsx("div", { className: "inline-block", children: markdown ? (_jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], children: message.content })) : (_jsx("div", { className: "whitespace-pre-wrap", children: message.content })) })), showTimestamps && (_jsx("div", { className: "text-[10px] mt-1 opacity-75 ".concat(message.role === 'user'
                                                 ? 'text-white/75'
                                                 : theme === 'dark'
                                                     ? 'text-gray-400'

package/dist/types/BlumessageChat.d.ts

@@ -38,6 +38,7 @@ export interface BlumessageChatProps {
     showTimestamps?: boolean;
     typingText?: string;
     emptyStateText?: string;
+    markdown?: boolean;
     floating?: boolean;
     buttonText?: string;
     buttonPosition?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blumessage/react-chat",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "A React TypeScript chat widget component with floating button, theming, and Blumessage API integration",
   "license": "UNLICENSED",
   "author": "Blumessage <contact@blumessage.com>",
@@ -42,7 +42,8 @@
   },
   "dependencies": {
     "lucide-react": "^0.294.0",
-    "react-markdown": "^9.0.1"
+    "react-markdown": "^9.0.1",
+    "remark-gfm": "^4.0.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.45",