fyrebot-widget 1.3.3 → 1.5.0

package/dist/ChatbotWidget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatbotWidget.d.ts","sourceRoot":"","sources":["../src/ChatbotWidget.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAmD,MAAM,OAAO,CAAC;AAGxE,OAAO,KAAK,EAAE,aAAa,EAAe,MAAM,SAAS,CAAC;AAE1D,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAy+BjD,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ChatbotWidget.d.ts","sourceRoot":"","sources":["../src/ChatbotWidget.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAmD,MAAM,OAAO,CAAC;AAGxE,OAAO,KAAK,EAAE,aAAa,EAAe,MAAM,SAAS,CAAC;AAG1D,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAw/BjD,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/ChatbotWidget.js

@@ -6,7 +6,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useRef, useEffect, useCallback } from 'react';
 import { MessageCircle, X, Send, Loader2, Bot, User, Sparkles, RefreshCw } from 'lucide-react';
 import { ChatbotApiClient } from './api';
-export const ChatbotWidget = ({ apiUrl, apiKey, title = 'AI Assistant', subtitle = 'Ask me anything', brandName, primaryColor = '#6366f1', welcomeMessage = 'Hello! How can I help you today?', placeholder = 'Type your message...', position = 'bottom-right', showTypingIndicator = true, showTimestamps = true, showSources = false, showSuggestedQuestions = true, suggestedQuestions: customSuggestions, maxSuggestions = 4, maxHeight = '600px', maxWidth = '400px', className = '', onOpen, onClose, onMessageSent, onMessageReceived, onError, }) => {
+import { MessageRenderer } from './MessageRenderer';
+export const ChatbotWidget = ({ apiUrl, apiKey, title = 'AI Assistant', subtitle = 'Ask me anything', brandName, primaryColor = '#6366f1', welcomeMessage = 'Hello! How can I help you today?', placeholder = 'Type your message...', position = 'bottom-right', showTypingIndicator = true, showTimestamps = true, showSources = false, showSuggestedQuestions = true, suggestedQuestions: customSuggestions, maxSuggestions = 4, maxHeight = '600px', maxWidth = '400px', fontSize = '13px', headerFontSize = '15px', smallFontSize = '11px', className = '', onOpen, onClose, onMessageSent, onMessageReceived, onError, }) => {
     const [isOpen, setIsOpen] = useState(false);
     const [messages, setMessages] = useState([]);
     const [input, setInput] = useState('');
@@ -226,8 +227,8 @@ export const ChatbotWidget = ({ apiUrl, apiKey, title = 'AI Assistant', subtitle
 
         .chatbot-title h3 {
           margin: 0;
-          font-size: 16px;
-          font-weight: 600;
+          font-size: ${headerFontSize};
+          font-weight: 500;
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
@@ -235,7 +236,7 @@ export const ChatbotWidget = ({ apiUrl, apiKey, title = 'AI Assistant', subtitle
 
         .chatbot-title p {
           margin: 0;
-          font-size: 12px;
+          font-size: ${smallFontSize};
           opacity: 0.9;
           white-space: nowrap;
           overflow: hidden;
@@ -376,7 +377,7 @@ export const ChatbotWidget = ({ apiUrl, apiKey, title = 'AI Assistant', subtitle
         }
 
         .chatbot-timestamp {
-          font-size: 11px;
+          font-size: ${smallFontSize};
           color: #666;
           margin-top: 4px;
         }
@@ -389,7 +390,7 @@ export const ChatbotWidget = ({ apiUrl, apiKey, title = 'AI Assistant', subtitle
         }
 
         .chatbot-source {
-          font-size: 11px;
+          font-size: ${smallFontSize};
           padding: 4px 8px;
           background: rgba(99, 102, 241, 0.1);
           color: ${primaryColor};
@@ -446,7 +447,7 @@ export const ChatbotWidget = ({ apiUrl, apiKey, title = 'AI Assistant', subtitle
           padding: 12px;
           border-radius: 8px;
           margin: 0 16px 16px;
-          font-size: 13px;
+          font-size: ${fontSize};
           display: flex;
           align-items: center;
           gap: 8px;
@@ -484,7 +485,7 @@ export const ChatbotWidget = ({ apiUrl, apiKey, title = 'AI Assistant', subtitle
           outline: none;
           padding: 12px 0;
           color: #e0e0e0;
-          font-size: 14px;
+          font-size: ${fontSize};
           min-width: 0;
         }
 
@@ -539,7 +540,7 @@ export const ChatbotWidget = ({ apiUrl, apiKey, title = 'AI Assistant', subtitle
         }
 
         .chatbot-suggestions-title {
-          font-size: 12px;
+          font-size: ${smallFontSize};
           color: #888;
           font-weight: 500;
           margin-bottom: 4px;
@@ -553,7 +554,7 @@ export const ChatbotWidget = ({ apiUrl, apiKey, title = 'AI Assistant', subtitle
           color: #ccc;
           padding: 10px 14px;
           border-radius: 20px;
-          font-size: 13px;
+          font-size: ${fontSize};
           cursor: pointer;
           transition: all 0.2s ease;
           text-align: left;
@@ -595,7 +596,7 @@ export const ChatbotWidget = ({ apiUrl, apiKey, title = 'AI Assistant', subtitle
         .chatbot-suggestion-icon {
           color: ${primaryColor};
           opacity: 0.7;
-          font-size: 16px;
+          font-size: ${headerFontSize};
           flex-shrink: 0;
         }
 
@@ -684,11 +685,11 @@ export const ChatbotWidget = ({ apiUrl, apiKey, title = 'AI Assistant', subtitle
           }
 
           .chatbot-title h3 {
-            font-size: 15px;
+            font-size: ${fontSize};
           }
 
           .chatbot-title p {
-            font-size: 11px;
+            font-size: ${smallFontSize};
           }
 
           .chatbot-messages {
@@ -715,7 +716,7 @@ export const ChatbotWidget = ({ apiUrl, apiKey, title = 'AI Assistant', subtitle
 
           .chatbot-bubble {
             padding: 10px 14px;
-            font-size: 14px;
+            font-size: ${fontSize};
           }
 
           .chatbot-input-area {
@@ -740,7 +741,7 @@ export const ChatbotWidget = ({ apiUrl, apiKey, title = 'AI Assistant', subtitle
 
           .chatbot-suggestion-chip {
             padding: 12px 16px;
-            font-size: 14px;
+            font-size: ${fontSize};
             min-height: 48px;
           }
 
@@ -761,7 +762,7 @@ export const ChatbotWidget = ({ apiUrl, apiKey, title = 'AI Assistant', subtitle
           }
 
           .chatbot-title h3 {
-            font-size: 14px;
+            font-size: ${fontSize};
           }
 
           .chatbot-messages {
@@ -770,7 +771,7 @@ export const ChatbotWidget = ({ apiUrl, apiKey, title = 'AI Assistant', subtitle
 
           .chatbot-bubble {
             padding: 8px 12px;
-            font-size: 13px;
+            font-size: ${fontSize};
           }
 
           .chatbot-input-area {
@@ -794,10 +795,10 @@ export const ChatbotWidget = ({ apiUrl, apiKey, title = 'AI Assistant', subtitle
             padding: 10px 16px;
           }
         }
-      ` }), !isOpen && (_jsx("button", { className: "chatbot-button", onClick: handleToggle, "aria-label": "Open chat", children: _jsx(MessageCircle, { size: 28 }) })), isOpen && (_jsxs("div", { className: "chatbot-window", children: [_jsxs("div", { className: "chatbot-header", children: [_jsxs("div", { className: "chatbot-header-content", children: [_jsx("div", { className: "chatbot-icon", children: _jsx(Sparkles, { size: 20 }) }), _jsxs("div", { className: "chatbot-title", children: [_jsx("h3", { children: title }), subtitle && _jsx("p", { children: subtitle })] })] }), _jsxs("div", { style: { display: 'flex', gap: '8px' }, children: [messages.length > 0 && (_jsx("button", { className: "chatbot-close", onClick: handleReset, "aria-label": "Reset conversation", title: "Start new conversation", children: _jsx(RefreshCw, { size: 18 }) })), _jsx("button", { className: "chatbot-close", onClick: handleToggle, "aria-label": "Close chat", children: _jsx(X, { size: 20 }) })] })] }), _jsxs("div", { className: "chatbot-messages", ref: scrollRef, children: [messages.length === 0 ? (_jsxs("div", { className: "chatbot-welcome", children: [_jsx("div", { className: "chatbot-welcome-icon", children: _jsx(Bot, { size: 32 }) }), _jsx("h4", { style: { margin: '0 0 8px 0', color: '#ccc' }, children: brandName ? `Welcome to ${brandName}!` : 'Welcome!' }), _jsx("p", { style: { margin: 0, fontSize: '14px' }, children: welcomeMessage })] })) : (messages.map((message) => (_jsxs("div", { className: `chatbot-message ${message.role}`, children: [_jsx("div", { className: `chatbot-avatar ${message.role === 'user' ? 'user' : 'bot'}`, children: message.role === 'user' ? _jsx(User, { size: 18 }) : _jsx(Bot, { size: 18 }) }), _jsxs("div", { className: "chatbot-message-content", children: [_jsx("div", { className: `chatbot-bubble ${message.role === 'user' ? 'user' : 'bot'}`, children: message.content }), showSources && message.sources && message.sources.length > 0 && (_jsx("div", { className: "chatbot-sources", children: message.sources.map((source, idx) => (_jsxs("span", { className: "chatbot-source", children: [source.title, " (", Math.round(source.score * 100), "%)"] }, idx))) })), showTimestamps && (_jsx("div", { className: "chatbot-timestamp", children: new Date(message.timestamp).toLocaleTimeString([], {
+      ` }), !isOpen && (_jsx("button", { className: "chatbot-button", onClick: handleToggle, "aria-label": "Open chat", children: _jsx(MessageCircle, { size: 28 }) })), isOpen && (_jsxs("div", { className: "chatbot-window", children: [_jsxs("div", { className: "chatbot-header", children: [_jsxs("div", { className: "chatbot-header-content", children: [_jsx("div", { className: "chatbot-icon", children: _jsx(Sparkles, { size: 20 }) }), _jsxs("div", { className: "chatbot-title", children: [_jsx("h3", { children: title }), subtitle && _jsx("p", { children: subtitle })] })] }), _jsxs("div", { style: { display: 'flex', gap: '8px' }, children: [messages.length > 0 && (_jsx("button", { className: "chatbot-close", onClick: handleReset, "aria-label": "Reset conversation", title: "Start new conversation", children: _jsx(RefreshCw, { size: 18 }) })), _jsx("button", { className: "chatbot-close", onClick: handleToggle, "aria-label": "Close chat", children: _jsx(X, { size: 20 }) })] })] }), _jsxs("div", { className: "chatbot-messages", ref: scrollRef, children: [messages.length === 0 ? (_jsxs("div", { className: "chatbot-welcome", children: [_jsx("div", { className: "chatbot-welcome-icon", children: _jsx(Bot, { size: 32 }) }), _jsx("h4", { style: { margin: '0 0 8px 0', color: '#ccc' }, children: brandName ? `Welcome to ${brandName}!` : 'Welcome!' }), _jsx("p", { style: { margin: 0, fontSize: '14px' }, children: welcomeMessage })] })) : (messages.map((message) => (_jsxs("div", { className: `chatbot-message ${message.role}`, children: [_jsx("div", { className: `chatbot-avatar ${message.role === 'user' ? 'user' : 'bot'}`, children: message.role === 'user' ? _jsx(User, { size: 18 }) : _jsx(Bot, { size: 18 }) }), _jsxs("div", { className: "chatbot-message-content", children: [_jsx("div", { className: `chatbot-bubble ${message.role === 'user' ? 'user' : 'bot'}`, children: message.role === 'user' ? (message.content) : (_jsx(MessageRenderer, { content: message.content, primaryColor: primaryColor, fontSize: fontSize, headerFontSize: headerFontSize, smallFontSize: smallFontSize })) }), showSources && message.sources && message.sources.length > 0 && (_jsx("div", { className: "chatbot-sources", children: message.sources.map((source, idx) => (_jsxs("span", { className: "chatbot-source", children: [source.title, " (", Math.round(source.score * 100), "%)"] }, idx))) })), showTimestamps && (_jsx("div", { className: "chatbot-timestamp", children: new Date(message.timestamp).toLocaleTimeString([], {
                                                     hour: '2-digit',
                                                     minute: '2-digit',
-                                                }) }))] })] }, message.id)))), isLoading && showTypingIndicator && (_jsxs("div", { className: "chatbot-typing", children: [_jsx("div", { className: "chatbot-avatar bot", children: _jsx(Bot, { size: 18 }) }), _jsxs("div", { className: "chatbot-typing-dots", children: [_jsx("div", { className: "chatbot-typing-dot" }), _jsx("div", { className: "chatbot-typing-dot" }), _jsx("div", { className: "chatbot-typing-dot" })] })] }))] }), showSuggestedQuestions && messages.length === 0 && !isLoading && (_jsxs("div", { className: "chatbot-suggestions", children: [_jsx("div", { className: "chatbot-suggestions-title", children: "Suggested Questions" }), loadingSuggestions ? (_jsxs("div", { className: "chatbot-suggestions-skeleton", children: [_jsx("div", { className: "chatbot-skeleton-chip" }), _jsx("div", { className: "chatbot-skeleton-chip" }), _jsx("div", { className: "chatbot-skeleton-chip" }), _jsx("div", { className: "chatbot-skeleton-chip" })] })) : suggestions.length > 0 ? (suggestions.map((suggestion, idx) => (_jsxs("button", { className: "chatbot-suggestion-chip", onClick: () => handleSuggestionClick(suggestion), disabled: isLoading, children: [_jsx("span", { className: "chatbot-suggestion-icon", children: "\uD83D\uDCAC" }), suggestion] }, idx)))) : null] })), error && (_jsxs("div", { className: "chatbot-error", children: [_jsx("span", { children: "\u26A0\uFE0F" }), error] })), _jsxs("div", { className: "chatbot-input-area", children: [_jsx("div", { className: "chatbot-input-wrapper", children: _jsx("input", { type: "text", className: "chatbot-input", value: input, onChange: (e) => setInput(e.target.value), onKeyPress: handleKeyPress, placeholder: placeholder, disabled: isLoading }) }), _jsx("button", { className: "chatbot-button-icon", onClick: () => handleSendMessage(), disabled: !input.trim() || isLoading, "aria-label": "Send message", children: isLoading ? _jsx(Loader2, { size: 20, className: "spin" }) : _jsx(Send, { size: 20 }) })] })] })), _jsx("style", { children: `
+                                                }) }))] })] }, message.id)))), isLoading && showTypingIndicator && (_jsxs("div", { className: "chatbot-typing", children: [_jsx("div", { className: "chatbot-avatar bot", children: _jsx(Bot, { size: 18 }) }), _jsxs("div", { className: "chatbot-typing-dots", children: [_jsx("div", { className: "chatbot-typing-dot" }), _jsx("div", { className: "chatbot-typing-dot" }), _jsx("div", { className: "chatbot-typing-dot" })] })] }))] }), showSuggestedQuestions && messages.length === 0 && !isLoading && (loadingSuggestions || suggestions.length > 0) && (_jsxs("div", { className: "chatbot-suggestions", children: [(loadingSuggestions || suggestions.length > 0) && (_jsx("div", { className: "chatbot-suggestions-title", children: "Suggested Questions" })), loadingSuggestions ? (_jsxs("div", { className: "chatbot-suggestions-skeleton", children: [_jsx("div", { className: "chatbot-skeleton-chip" }), _jsx("div", { className: "chatbot-skeleton-chip" }), _jsx("div", { className: "chatbot-skeleton-chip" }), _jsx("div", { className: "chatbot-skeleton-chip" })] })) : (suggestions.map((suggestion, idx) => (_jsxs("button", { className: "chatbot-suggestion-chip", onClick: () => handleSuggestionClick(suggestion), disabled: isLoading, children: [_jsx("span", { className: "chatbot-suggestion-icon", children: "\uD83D\uDCAC" }), suggestion] }, idx))))] })), error && (_jsxs("div", { className: "chatbot-error", children: [_jsx("span", { children: "\u26A0\uFE0F" }), error] })), _jsxs("div", { className: "chatbot-input-area", children: [_jsx("div", { className: "chatbot-input-wrapper", children: _jsx("input", { type: "text", className: "chatbot-input", value: input, onChange: (e) => setInput(e.target.value), onKeyPress: handleKeyPress, placeholder: placeholder, disabled: isLoading }) }), _jsx("button", { className: "chatbot-button-icon", onClick: () => handleSendMessage(), disabled: !input.trim() || isLoading, "aria-label": "Send message", children: isLoading ? _jsx(Loader2, { size: 20, className: "spin" }) : _jsx(Send, { size: 20 }) })] })] })), _jsx("style", { children: `
         .spin {
           animation: spin 1s linear infinite;
         }

package/dist/MessageRenderer.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+interface MessageRendererProps {
+    content: string;
+    primaryColor?: string;
+    fontSize?: string;
+    headerFontSize?: string;
+    smallFontSize?: string;
+}
+/**
+ * Production-ready message renderer
+ * Handles: Lists, Tables, Code, Links, JSON, Markdown
+ */
+export declare const MessageRenderer: React.FC<MessageRendererProps>;
+export {};
+//# sourceMappingURL=MessageRenderer.d.ts.map

package/dist/MessageRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageRenderer.d.ts","sourceRoot":"","sources":["../src/MessageRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,oBAAoB;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA4vB1D,CAAC"}

package/dist/MessageRenderer.js

@@ -0,0 +1,619 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Production-ready message renderer
+ * Handles: Lists, Tables, Code, Links, JSON, Markdown
+ */
+export const MessageRenderer = ({ content, primaryColor = '#6366f1', fontSize = '13px', headerFontSize = '15px', smallFontSize = '11px' }) => {
+    /**
+     * Parse and render different content types
+     */
+    const renderContent = () => {
+        // Try to detect structured data
+        const trimmedContent = content.trim();
+        // 1. Try to parse as JSON
+        if (trimmedContent.startsWith('{') || trimmedContent.startsWith('[')) {
+            try {
+                const parsed = JSON.parse(trimmedContent);
+                return renderJSON(parsed);
+            }
+            catch (e) {
+                // Not JSON, continue
+            }
+        }
+        // 2. Check for markdown tables
+        if (trimmedContent.includes('|') && trimmedContent.includes('---')) {
+            return renderMarkdownTable(trimmedContent);
+        }
+        // 3. Check for lists (numbered or bulleted)
+        if (hasListPattern(trimmedContent)) {
+            return renderList(trimmedContent);
+        }
+        // 4. Check for steps/instructions
+        if (hasStepsPattern(trimmedContent)) {
+            return renderSteps(trimmedContent);
+        }
+        // 5. Default: render as formatted text with markdown-like features
+        return renderFormattedText(trimmedContent);
+    };
+    /**
+     * Render JSON objects beautifully
+     */
+    const renderJSON = (data) => {
+        if (Array.isArray(data)) {
+            return (_jsxs("div", { className: "json-array", children: [_jsxs("div", { className: "json-label", children: ["Array (", data.length, " items):"] }), data.map((item, index) => (_jsx("div", { className: "json-item", children: typeof item === 'object' ? renderJSONObject(item, index) : (_jsx("div", { className: "json-primitive", children: String(item) })) }, index)))] }));
+        }
+        else if (typeof data === 'object' && data !== null) {
+            return renderJSONObject(data);
+        }
+        return _jsx("div", { children: String(data) });
+    };
+    const renderJSONObject = (obj, index) => {
+        return (_jsxs("div", { className: "json-object", children: [index !== undefined && _jsxs("div", { className: "json-index", children: ["#", index + 1] }), Object.entries(obj).map(([key, value]) => (_jsxs("div", { className: "json-row", children: [_jsxs("span", { className: "json-key", children: [key, ":"] }), _jsx("span", { className: "json-value", children: typeof value === 'object' && value !== null
+                                ? JSON.stringify(value, null, 2)
+                                : String(value) })] }, key)))] }));
+    };
+    /**
+     * Render markdown tables
+     */
+    const renderMarkdownTable = (text) => {
+        const lines = text.split('\n').filter(line => line.trim());
+        const headerLine = lines.find(line => line.startsWith('|'));
+        const separatorIndex = lines.findIndex(line => line.includes('---'));
+        if (!headerLine || separatorIndex === -1) {
+            return renderFormattedText(text);
+        }
+        const headers = headerLine.split('|').map(h => h.trim()).filter(h => h);
+        const dataLines = lines.slice(separatorIndex + 1).filter(line => line.startsWith('|'));
+        return (_jsx("div", { className: "table-container", children: _jsxs("table", { className: "response-table", children: [_jsx("thead", { children: _jsx("tr", { children: headers.map((header, i) => (_jsx("th", { children: header }, i))) }) }), _jsx("tbody", { children: dataLines.map((line, rowIndex) => {
+                            const cells = line.split('|').map(c => c.trim()).filter(c => c);
+                            return (_jsx("tr", { children: cells.map((cell, cellIndex) => (_jsx("td", { children: cell }, cellIndex))) }, rowIndex));
+                        }) })] }) }));
+    };
+    /**
+     * Check if content has list pattern
+     */
+    const hasListPattern = (text) => {
+        const lines = text.split('\n').map(l => l.trim()).filter(l => l);
+        // Check for explicit list markers
+        const listPatterns = [
+            /^[\-\*\+]\s+/, // Bullet points: -, *, +
+            /^\d+\.\s+/, // Numbered: 1., 2., etc
+            /^•\s+/, // Bullet: •
+        ];
+        let listItemCount = 0;
+        let colonHeaderCount = 0;
+        lines.forEach(line => {
+            if (listPatterns.some(pattern => pattern.test(line))) {
+                listItemCount++;
+            }
+            // Detect colon headers (e.g., "Streaming Enthusiasts:")
+            if (/^[A-Z][\w\s\-]+:$/i.test(line)) {
+                colonHeaderCount++;
+            }
+        });
+        // Consider it a list if we have list items OR multiple colon headers with content
+        return listItemCount >= 2 || (colonHeaderCount >= 2 && lines.length > colonHeaderCount);
+    };
+    /**
+     * Render lists (bulleted or numbered) with smart heading detection
+     */
+    const renderList = (text) => {
+        const lines = text.split('\n');
+        const elements = [];
+        let currentList = null;
+        let key = 0;
+        let i = 0;
+        const flushList = () => {
+            if (currentList && currentList.items.length > 0) {
+                const ListTag = currentList.isNumbered ? 'ol' : 'ul';
+                elements.push(_jsx(ListTag, { className: "response-list", children: currentList.items.map((item, index) => (_jsx("li", { children: renderInlineFormatting(item) }, index))) }, key++));
+                currentList = null;
+            }
+        };
+        while (i < lines.length) {
+            const trimmed = lines[i].trim();
+            // Skip empty lines
+            if (!trimmed) {
+                i++;
+                continue;
+            }
+            // Check if it's a markdown heading (###, ##, #)
+            if (/^#{1,3}\s+/.test(trimmed)) {
+                flushList();
+                const level = trimmed.match(/^(#{1,3})/)?.[0].length || 3;
+                const headingText = trimmed.replace(/^#{1,3}\s+/, '');
+                if (level === 1) {
+                    elements.push(_jsx("h3", { className: "section-heading", children: headingText }, key++));
+                }
+                else if (level === 2) {
+                    elements.push(_jsx("h4", { className: "section-subheading", children: headingText }, key++));
+                }
+                else {
+                    elements.push(_jsx("h5", { className: "section-subheading", children: headingText }, key++));
+                }
+                i++;
+            }
+            // Check if it's a colon-terminated header (e.g., "Streaming Enthusiasts:")
+            // Look ahead to see if the next line is descriptive text (not a list item or another header)
+            else if (/^[A-Z][\w\s\-]+:$/i.test(trimmed)) {
+                flushList();
+                // Check if next line exists and is descriptive content (not a list marker)
+                const nextLine = i + 1 < lines.length ? lines[i + 1].trim() : '';
+                const isFollowedByContent = nextLine &&
+                    !(/^#{1,3}\s+/.test(nextLine)) &&
+                    !(/^[A-Z][\w\s\-]+:$/i.test(nextLine)) &&
+                    !(/^[\-\*\+•]\s+/.test(nextLine)) &&
+                    !(/^\d+\.\s+/.test(nextLine));
+                if (isFollowedByContent) {
+                    // Render as header with description
+                    const headerText = trimmed.replace(/:$/, '');
+                    elements.push(_jsxs("div", { className: "definition-item", children: [_jsx("div", { className: "definition-term", children: headerText }), _jsx("div", { className: "definition-description", children: renderInlineFormatting(nextLine) })] }, key++));
+                    i += 2; // Skip both header and description line
+                }
+                else {
+                    // Just a header without immediate description
+                    elements.push(_jsx("h5", { className: "colon-heading", children: renderInlineFormatting(trimmed.replace(/:$/, '')) }, key++));
+                    i++;
+                }
+            }
+            // Check if it's a list item (bullet or numbered)
+            else if (/^[\-\*\+•]\s+/.test(trimmed) || /^\d+\.\s+/.test(trimmed)) {
+                const isNumbered = /^\d+\.\s+/.test(trimmed);
+                const itemText = trimmed.replace(/^[\-\*\+•]\s+/, '').replace(/^\d+\.\s+/, '');
+                // Start a new list or continue existing one
+                if (!currentList) {
+                    currentList = { items: [itemText], isNumbered };
+                }
+                else if (currentList.isNumbered === isNumbered) {
+                    currentList.items.push(itemText);
+                }
+                else {
+                    // List type changed, flush and start new
+                    flushList();
+                    currentList = { items: [itemText], isNumbered };
+                }
+                i++;
+            }
+            // Regular text (not a heading or list item)
+            else {
+                flushList();
+                elements.push(_jsx("p", { className: "section-text", children: renderInlineFormatting(trimmed) }, key++));
+                i++;
+            }
+        }
+        // Flush any remaining list
+        flushList();
+        return (_jsx("div", { className: "smart-content", children: elements }));
+    };
+    /**
+     * Check if content has step-by-step pattern
+     */
+    const hasStepsPattern = (text) => {
+        const stepPatterns = [
+            /step\s+\d+/i,
+            /^\d+\.\s+\*\*/i,
+            /###\s+\d+\./,
+        ];
+        return stepPatterns.some(pattern => pattern.test(text));
+    };
+    /**
+     * Render step-by-step instructions
+     */
+    const renderSteps = (text) => {
+        const lines = text.split('\n');
+        const steps = [];
+        let currentStep = null;
+        lines.forEach(line => {
+            const trimmed = line.trim();
+            // Check if it's a step header
+            if (/^(step\s+\d+|###\s+\d+\.|\d+\.\s+\*\*)/i.test(trimmed)) {
+                if (currentStep)
+                    steps.push(currentStep);
+                currentStep = {
+                    title: trimmed.replace(/^###\s+/, '').replace(/\*\*/g, ''),
+                    content: []
+                };
+            }
+            else if (currentStep && trimmed) {
+                currentStep.content.push(trimmed);
+            }
+        });
+        if (currentStep)
+            steps.push(currentStep);
+        return (_jsx("div", { className: "steps-container", children: steps.map((step, index) => (_jsxs("div", { className: "step-item", children: [_jsx("div", { className: "step-number", children: index + 1 }), _jsxs("div", { className: "step-content", children: [_jsx("div", { className: "step-title", children: step.title }), step.content.map((line, i) => (_jsx("div", { className: "step-description", children: renderInlineFormatting(line) }, i)))] })] }, index))) }));
+    };
+    /**
+     * Render formatted text with inline markdown
+     */
+    const renderFormattedText = (text) => {
+        const paragraphs = text.split('\n\n').filter(p => p.trim());
+        return (_jsx("div", { className: "formatted-text", children: paragraphs.map((paragraph, index) => {
+                const trimmed = paragraph.trim();
+                // Headers
+                if (trimmed.startsWith('###')) {
+                    return _jsx("h3", { children: trimmed.replace(/^###\s+/, '') }, index);
+                }
+                if (trimmed.startsWith('##')) {
+                    return _jsx("h2", { children: trimmed.replace(/^##\s+/, '') }, index);
+                }
+                if (trimmed.startsWith('#')) {
+                    return _jsx("h1", { children: trimmed.replace(/^#\s+/, '') }, index);
+                }
+                // Code blocks
+                if (trimmed.startsWith('```')) {
+                    const code = trimmed.replace(/```\w*\n?/, '').replace(/```$/, '');
+                    return (_jsx("pre", { className: "code-block", children: _jsx("code", { children: code }) }, index));
+                }
+                // Regular paragraph
+                return (_jsx("p", { children: renderInlineFormatting(trimmed) }, index));
+            }) }));
+    };
+    /**
+     * Handle inline formatting (bold, italic, links, code)
+     */
+    const renderInlineFormatting = (text) => {
+        const parts = [];
+        let remaining = text;
+        let key = 0;
+        // Match patterns: **bold**, *italic*, `code`, [link](url)
+        const pattern = /(\*\*[^*]+\*\*|\*[^*]+\*|`[^`]+`|\[([^\]]+)\]\(([^)]+)\))/g;
+        let match;
+        let lastIndex = 0;
+        while ((match = pattern.exec(text)) !== null) {
+            // Add text before match
+            if (match.index > lastIndex) {
+                parts.push(text.substring(lastIndex, match.index));
+            }
+            const matched = match[0];
+            if (matched.startsWith('**')) {
+                // Bold
+                parts.push(_jsx("strong", { children: matched.slice(2, -2) }, key++));
+            }
+            else if (matched.startsWith('*')) {
+                // Italic
+                parts.push(_jsx("em", { children: matched.slice(1, -1) }, key++));
+            }
+            else if (matched.startsWith('`')) {
+                // Inline code
+                parts.push(_jsx("code", { className: "inline-code", children: matched.slice(1, -1) }, key++));
+            }
+            else if (matched.startsWith('[')) {
+                // Link
+                const linkText = match[2];
+                const linkUrl = match[3];
+                parts.push(_jsx("a", { href: linkUrl, target: "_blank", rel: "noopener noreferrer", className: "inline-link", children: linkText }, key++));
+            }
+            lastIndex = match.index + matched.length;
+        }
+        // Add remaining text
+        if (lastIndex < text.length) {
+            parts.push(text.substring(lastIndex));
+        }
+        return parts.length > 0 ? _jsx(_Fragment, { children: parts }) : text;
+    };
+    return (_jsxs("div", { className: "message-renderer", children: [renderContent(), _jsx("style", { children: `
+        .message-renderer {
+          line-height: 1.6;
+        }
+
+        /* JSON Rendering */
+        .json-array, .json-object {
+          background: rgba(99, 102, 241, 0.05);
+          border-left: 3px solid ${primaryColor};
+          padding: 12px;
+          border-radius: 6px;
+          margin: 8px 0;
+        }
+        
+        .json-label {
+          font-weight: 500;
+          color: ${primaryColor};
+          margin-bottom: 8px;
+          font-size: ${smallFontSize};
+        }
+        
+        .json-item {
+          margin: 8px 0;
+        }
+        
+        .json-index {
+          display: inline-block;
+          background: ${primaryColor};
+          color: white;
+          padding: 2px 8px;
+          border-radius: 4px;
+          font-size: ${smallFontSize};
+          margin-bottom: 6px;
+        }
+        
+        .json-row {
+          padding: 6px 0;
+          border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+        }
+        
+        .json-row:last-child {
+          border-bottom: none;
+        }
+        
+        .json-key {
+          font-weight: 500;
+          color: ${primaryColor};
+          margin-right: 8px;
+        }
+        
+        .json-value {
+          color: #e0e0e0;
+        }
+
+        /* Table Rendering */
+        .table-container {
+          overflow-x: auto;
+          margin: 12px 0;
+        }
+        
+        .response-table {
+          width: 100%;
+          border-collapse: collapse;
+          font-size: ${fontSize};
+        }
+        
+        .response-table th {
+          background: ${primaryColor};
+          color: white;
+          padding: 10px;
+          text-align: left;
+          font-weight: 500;
+        }
+        
+        .response-table td {
+          padding: 10px;
+          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        
+        .response-table tr:hover {
+          background: rgba(99, 102, 241, 0.05);
+        }
+
+        /* List Rendering */
+        .list-container {
+          margin: 12px 0;
+        }
+        
+        .list-header {
+          font-weight: 600;
+          margin-bottom: 10px;
+          color: #e0e0e0;
+          font-size: ${fontSize};
+        }
+        
+        .response-list {
+          margin: 10px 0;
+          padding-left: 24px;
+          list-style-position: outside;
+        }
+        
+        .response-list li {
+          margin: 8px 0;
+          color: #d0d0d0;
+          font-size: ${fontSize};
+          display: list-item;
+        }
+        
+        .response-list ul {
+          list-style-type: disc;
+        }
+        
+        .response-list ol {
+          list-style-type: decimal;
+        }
+        
+        .response-list li::marker {
+          color: ${primaryColor};
+          font-weight: bold;
+        }
+        
+        ul.response-list {
+          list-style-type: disc;
+        }
+        
+        ol.response-list {
+          list-style-type: decimal;
+        }
+        
+        .list-footer {
+          margin-top: 10px;
+          color: #b0b0b0;
+          display: none;
+          font-size: ${smallFontSize};
+        }
+
+        /* Steps Rendering */
+        .steps-container {
+          margin: 12px 0;
+        }
+        
+        .step-item {
+          display: flex;
+          gap: 12px;
+          margin: 16px 0;
+          padding: 12px;
+          background: rgba(99, 102, 241, 0.05);
+          border-radius: 8px;
+        }
+        
+        .step-number {
+          flex-shrink: 0;
+          width: 32px;
+          height: 32px;
+          background: ${primaryColor};
+          color: white;
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-weight: 500;
+          font-size: ${fontSize};
+        }
+        
+        .step-content {
+          flex: 1;
+        }
+        
+        .step-title {
+          font-weight: 500;
+          color: #e0e0e0;
+          margin-bottom: 6px;
+        }
+        
+        .step-description {
+          color: #c0c0c0;
+          font-size: ${fontSize};
+          margin: 4px 0;
+        }
+
+        /* Formatted Text */
+        .formatted-text h1 {
+          font-size: ${headerFontSize};
+          font-weight: 500;
+          margin: 16px 0 10px 0;
+          color: #f0f0f0;
+        }
+        
+        .formatted-text h2 {
+          font-size: ${headerFontSize}
+          font-weight: 500;
+          margin: 14px 0 8px 0;
+          color: #e0e0e0;
+        }
+        
+        .formatted-text h3 {
+          font-size: ${headerFontSize};
+          font-weight: 500;
+          margin: 12px 0 6px 0;
+          color: #d0d0d0;
+        }
+        
+        .formatted-text p {
+          margin: 10px 0;
+          color: #d0d0d0;
+        }
+        
+        .code-block {
+          background: #1e1e1e;
+          border: 1px solid #333;
+          border-radius: 6px;
+          padding: 12px;
+          overflow-x: auto;
+          margin: 12px 0;
+        }
+        
+        .code-block code {
+          color: #e0e0e0;
+          font-family: 'Courier New', monospace;
+          font-size: ${fontSize};
+        }
+
+        /* Inline Formatting */
+        .inline-code {
+          background: rgba(255, 255, 255, 0.1);
+          padding: 2px 6px;
+          border-radius: 3px;
+          font-family: 'Courier New', monospace;
+          font-size: ${fontSize};
+          color: ${primaryColor};
+        }
+        
+        .inline-link {
+          color: ${primaryColor};
+          text-decoration: underline;
+          cursor: pointer;
+        }
+        
+        .inline-link:hover {
+          text-decoration: none;
+          opacity: 0.8;
+        }
+        
+        strong {
+          font-weight: 600;
+          color: #f0f0f0;
+        }
+        
+        em {
+          font-style: italic;
+          color: #e0e0e0;
+        }
+
+        /* Smart Content Rendering */
+        .smart-content {
+          margin: 0;
+        }
+
+        .section-heading {
+          font-size: calc(${headerFontSize} + 2px);
+          font-weight: 600;
+          margin: 16px 0 12px 0;
+          color: #f0f0f0;
+          border-bottom: 2px solid ${primaryColor};
+          padding-bottom: 6px;
+        }
+
+        .section-subheading {
+          font-size: ${headerFontSize};
+          font-weight: 500;
+          margin: 14px 0 10px 0;
+          color: #e0e0e0;
+        }
+
+        .section-text {
+          margin: 8px 0;
+          color: #d0d0d0;
+          font-size: ${fontSize};
+          line-height: 1.6;
+        }
+
+        .colon-heading {
+          font-size: ${headerFontSize};
+          font-weight: 600;
+          margin: 12px 0 6px 0;
+          color: ${primaryColor};
+          position: relative;
+          padding-left: 12px;
+        }
+
+        .colon-heading::before {
+          content: '';
+          position: absolute;
+          left: 0;
+          top: 50%;
+          transform: translateY(-50%);
+          width: 4px;
+          height: 60%;
+          background: ${primaryColor};
+          border-radius: 2px;
+        }
+
+        /* Definition List Style (Header + Description) */
+        .definition-item {
+          margin: 12px 0;
+          padding: 10px 12px;
+          background: rgba(99, 102, 241, 0.03);
+          border-left: 3px solid ${primaryColor};
+          border-radius: 4px;
+        }
+
+        .definition-term {
+          font-size: ${headerFontSize};
+          font-weight: 600;
+          color: ${primaryColor};
+          margin-bottom: 6px;
+        }
+
+        .definition-description {
+          font-size: ${fontSize};
+          color: #d0d0d0;
+          line-height: 1.6;
+          padding-left: 8px;
+        }
+      ` })] }));
+};

package/dist/types.d.ts

@@ -53,6 +53,12 @@ export interface ChatbotConfig {
     maxHeight?: string;
     /** Maximum width of the chat window */
     maxWidth?: string;
+    /** Font size for message text (default: '13px') */
+    fontSize?: string;
+    /** Font size for headers (default: '15px') */
+    headerFontSize?: string;
+    /** Font size for small text like timestamps (default: '11px') */
+    smallFontSize?: string;
     /** Custom CSS class for styling */
     className?: string;
     /** Callback when chat is opened */

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,GAAG,WAAW,CAAC;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,IAAI,CAAC;IAChB,OAAO,CAAC,EAAE,KAAK,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC,CAAC;CACJ;AAED,MAAM,WAAW,aAAa;IAC5B,yDAAyD;IACzD,MAAM,EAAE,MAAM,CAAC;IAEf,mCAAmC;IACnC,MAAM,EAAE,MAAM,CAAC;IAEf,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,sCAAsC;IACtC,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,+CAA+C;IAC/C,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,cAAc,GAAG,aAAa,GAAG,WAAW,GAAG,UAAU,CAAC;IAErE,uCAAuC;IACvC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B,gCAAgC;IAChC,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,sCAAsC;IACtC,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,yCAAyC;IACzC,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAEjC,qEAAqE;IACrE,kBAAkB,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAEzC,oDAAoD;IACpD,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,8CAA8C;IAC9C,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,iEAAiE;IACjE,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,mCAAmC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,mCAAmC;IACnC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,oCAAoC;IACpC,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAE1C,yCAAyC;IACzC,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IAEnD,iCAAiC;IACjC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC;AAED,MAAM,WAAW,WAAW;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,SAAS,EAAE,IAAI,CAAC;IAChB,SAAS,EAAE,IAAI,CAAC;CACjB;AAED,MAAM,WAAW,WAAW,CAAC,CAAC,GAAG,GAAG;IAClC,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,CAAC,CAAC;IACT,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC,CAAC;CACJ"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fyrebot-widget",
-  "version": "1.3.3",
+  "version": "1.5.0",
   "description": "Production-ready AI chatbot popup widget by Fyrebot - Multi-tenant support with seamless React integration",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -49,7 +49,12 @@
   },
   "dependencies": {
     "axios": "^1.7.0",
-    "lucide-react": "^0.460.0"
+    "lucide-react": "^0.460.0",
+    "marked": "^17.0.1",
+    "prismjs": "^1.30.0",
+    "react-markdown": "^10.1.0",
+    "rehype-raw": "^7.0.0",
+    "remark-gfm": "^4.0.1"
   },
   "devDependencies": {
     "@types/react": "^18.3.0",