fyrebot-widget 1.4.1 → 1.6.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,CA2+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,CAmhDjD,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/ChatbotWidget.js

@@ -1,12 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * Chatbot Popup Widget
  * Production-ready, standalone chatbot component
  */
 import { useState, useRef, useEffect, useCallback } from 'react';
-import { MessageCircle, X, Send, Loader2, Bot, User, Sparkles, RefreshCw } from 'lucide-react';
+import { MessageCircle, X, Send, Loader2, Bot, User, Sparkles, RefreshCw, Mail, ArrowLeft, CheckCircle } 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, enableContactSupport = 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('');
@@ -14,6 +15,17 @@ export const ChatbotWidget = ({ apiUrl, apiKey, title = 'AI Assistant', subtitle
     const [error, setError] = useState(null);
     const [suggestions, setSuggestions] = useState([]);
     const [loadingSuggestions, setLoadingSuggestions] = useState(false);
+    const [showContactPrompt, setShowContactPrompt] = useState(false);
+    // Support form states
+    const [showSupportForm, setShowSupportForm] = useState(false);
+    const [supportFormData, setSupportFormData] = useState({
+        name: '',
+        email: '',
+        message: '',
+    });
+    const [isSubmittingTicket, setIsSubmittingTicket] = useState(false);
+    const [ticketSubmitted, setTicketSubmitted] = useState(false);
+    const [ticketNumber, setTicketNumber] = useState(null);
     const scrollRef = useRef(null);
     const apiClient = useRef(null);
     // Initialize API client
@@ -25,7 +37,7 @@ export const ChatbotWidget = ({ apiUrl, apiKey, title = 'AI Assistant', subtitle
         if (scrollRef.current) {
             scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
         }
-    }, [messages, isLoading]);
+    }, [messages, isLoading, showContactPrompt]);
     // Fetch suggestions when chat opens and no messages exist
     useEffect(() => {
         const fetchSuggestions = async () => {
@@ -53,6 +65,62 @@ export const ChatbotWidget = ({ apiUrl, apiKey, title = 'AI Assistant', subtitle
         };
         fetchSuggestions();
     }, [isOpen, messages.length, showSuggestedQuestions, customSuggestions, maxSuggestions]);
+    // Detect if user wants to contact support
+    const detectContactIntent = useCallback((message) => {
+        if (!enableContactSupport)
+            return false;
+        const lowerMessage = message.toLowerCase().trim();
+        // Direct support keywords
+        const contactKeywords = [
+            'contact support',
+            'talk to support',
+            'speak to someone',
+            'human support',
+            'real person',
+            'customer service',
+            'help desk',
+            'create ticket',
+            'open ticket',
+            'submit ticket',
+            'generate ticket',
+            'make ticket',
+            'new ticket',
+            'email support',
+            'need help',
+            'talk to team',
+            'speak to team',
+            'contact team',
+            'reach out',
+            'get in touch',
+            'escalate',
+            'not satisfied',
+            'doesn\'t work',
+            'still having issues',
+            'not working',
+            'urgent',
+            'contact you',
+            'contact aasim',
+            'talk to aasim',
+            'reach aasim',
+            'speak with',
+            'get support',
+        ];
+        // Question-based patterns (user asking how to contact)
+        const questionPatterns = [
+            /can i (contact|reach|talk to|speak to|speak with|get in touch)/i,
+            /how (do i|can i|to) (contact|reach|talk to|speak to|get support)/i,
+            /i (want|need|would like) to (contact|reach|talk to|speak to|create|generate|open|submit|make).*(support|ticket|team|you|aasim|someone)/i,
+            /where (can|do) i (contact|reach|get support)/i,
+            /is there (a way|someone) (to|i can) (contact|talk to|reach)/i,
+            /(contact|support|help).*(email|phone|number)/i,
+            /can.*(help|support|assist).*(me|us)/i,
+        ];
+        // Check direct keywords
+        const hasKeyword = contactKeywords.some(keyword => lowerMessage.includes(keyword));
+        // Check question patterns
+        const hasPattern = questionPatterns.some(pattern => pattern.test(message));
+        return hasKeyword || hasPattern;
+    }, [enableContactSupport]);
     // Handle open/close
     const handleToggle = useCallback(() => {
         const newState = !isOpen;
@@ -60,6 +128,8 @@ export const ChatbotWidget = ({ apiUrl, apiKey, title = 'AI Assistant', subtitle
         if (newState) {
             onOpen?.();
             setError(null);
+            setShowSupportForm(false);
+            setTicketSubmitted(false);
         }
         else {
             onClose?.();
@@ -90,7 +160,10 @@ export const ChatbotWidget = ({ apiUrl, apiKey, title = 'AI Assistant', subtitle
         setInput('');
         setIsLoading(true);
         setError(null);
+        setShowContactPrompt(false); // Reset prompt
         onMessageSent?.(userMessage.content);
+        // Check if user wants to contact support
+        const wantsContact = detectContactIntent(textToSend);
         try {
             const response = await apiClient.current.sendMessage(userMessage.content);
             const assistantMessage = {
@@ -102,6 +175,10 @@ export const ChatbotWidget = ({ apiUrl, apiKey, title = 'AI Assistant', subtitle
             };
             setMessages((prev) => [...prev, assistantMessage]);
             onMessageReceived?.(assistantMessage);
+            // Show contact prompt if detected and enabled
+            if (wantsContact && enableContactSupport) {
+                setShowContactPrompt(true);
+            }
         }
         catch (err) {
             const error = err;
@@ -111,7 +188,7 @@ export const ChatbotWidget = ({ apiUrl, apiKey, title = 'AI Assistant', subtitle
         finally {
             setIsLoading(false);
         }
-    }, [input, isLoading, onMessageSent, onMessageReceived, onError]);
+    }, [input, isLoading, detectContactIntent, enableContactSupport, onMessageSent, onMessageReceived, onError]);
     // Handle Enter key
     const handleKeyPress = useCallback((e) => {
         if (e.key === 'Enter' && !e.shiftKey) {
@@ -123,8 +200,55 @@ export const ChatbotWidget = ({ apiUrl, apiKey, title = 'AI Assistant', subtitle
     const handleReset = useCallback(() => {
         setMessages([]);
         setError(null);
+        setShowSupportForm(false);
+        setTicketSubmitted(false);
+        setShowContactPrompt(false);
         apiClient.current?.resetSession();
     }, []);
+    // Handle support form submission
+    const handleSupportFormSubmit = useCallback(async (e) => {
+        e.preventDefault();
+        if (!supportFormData.email || !supportFormData.message || !apiClient.current) {
+            return;
+        }
+        setIsSubmittingTicket(true);
+        setError(null);
+        try {
+            const result = await apiClient.current.createTicket({
+                name: supportFormData.name || undefined,
+                email: supportFormData.email,
+                message: supportFormData.message,
+                priority: 'medium',
+            });
+            setTicketNumber(result.ticketNumber);
+            setTicketSubmitted(true);
+            // Reset form
+            setSupportFormData({ name: '', email: '', message: '' });
+        }
+        catch (err) {
+            const error = err;
+            setError(error.message);
+            onError?.(error);
+        }
+        finally {
+            setIsSubmittingTicket(false);
+        }
+    }, [supportFormData, onError]);
+    // Toggle support form
+    const handleShowSupportForm = useCallback(() => {
+        setShowSupportForm(true);
+        setShowContactPrompt(false);
+        setError(null);
+    }, []);
+    const handleBackToChat = useCallback(() => {
+        setShowSupportForm(false);
+        setTicketSubmitted(false);
+        setShowContactPrompt(false);
+        setError(null);
+    }, []);
+    const handleDismissContactPrompt = useCallback(() => {
+        setShowContactPrompt(false);
+    }, []);
     // Position styles
     const positionStyles = {
         'bottom-right': { bottom: '40px', right: '40px' },
@@ -226,8 +350,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 +359,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;
@@ -306,6 +430,244 @@ export const ChatbotWidget = ({ apiUrl, apiKey, title = 'AI Assistant', subtitle
           color: ${primaryColor};
         }
 
+        .chatbot-support-link {
+          margin-top: 20px;
+          padding-top: 20px;
+          border-top: 1px solid #333;
+        }
+
+        .chatbot-support-button {
+          background: #2a2a2a;
+          border: 1px solid #333;
+          color: ${primaryColor};
+          padding: 12px 20px;
+          border-radius: 8px;
+          font-size: ${fontSize};
+          cursor: pointer;
+          transition: all 0.2s;
+          display: inline-flex;
+          align-items: center;
+          gap: 8px;
+          font-weight: 500;
+        }
+
+        .chatbot-support-button:hover {
+          background: #333;
+          border-color: ${primaryColor};
+          transform: translateY(-2px);
+        }
+
+        .chatbot-contact-prompt {
+          background: linear-gradient(135deg, ${primaryColor}15, ${primaryColor}08);
+          border: 1px solid ${primaryColor}40;
+          border-radius: 12px;
+          padding: 16px;
+          margin: 16px 0;
+          animation: slideIn 0.3s ease;
+        }
+
+        @keyframes slideIn {
+          from {
+            opacity: 0;
+            transform: translateY(-10px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+
+        .chatbot-contact-prompt-header {
+          display: flex;
+          align-items: center;
+          gap: 12px;
+          margin-bottom: 12px;
+        }
+
+        .chatbot-contact-prompt-icon {
+          width: 40px;
+          height: 40px;
+          border-radius: 50%;
+          background: ${primaryColor};
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: white;
+          flex-shrink: 0;
+        }
+
+        .chatbot-contact-prompt-title {
+          font-size: ${headerFontSize};
+          font-weight: 600;
+          color: #e0e0e0;
+          margin: 0;
+        }
+
+        .chatbot-contact-prompt-description {
+          font-size: ${fontSize};
+          color: #aaa;
+          margin: 0 0 16px 0;
+          line-height: 1.5;
+        }
+
+        .chatbot-contact-prompt-actions {
+          display: flex;
+          gap: 8px;
+        }
+
+        .chatbot-contact-prompt-button {
+          flex: 1;
+          padding: 12px 16px;
+          border-radius: 8px;
+          font-size: ${fontSize};
+          font-weight: 600;
+          cursor: pointer;
+          transition: all 0.2s;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 8px;
+          border: none;
+        }
+
+        .chatbot-contact-prompt-button.primary {
+          background: ${primaryColor};
+          color: white;
+        }
+
+        .chatbot-contact-prompt-button.primary:hover {
+          opacity: 0.9;
+          transform: translateY(-2px);
+        }
+
+        .chatbot-contact-prompt-button.secondary {
+          background: #2a2a2a;
+          color: #ccc;
+          border: 1px solid #333;
+        }
+
+        .chatbot-contact-prompt-button.secondary:hover {
+          background: #333;
+          color: #fff;
+        }
+
+        .chatbot-support-form {
+          flex: 1;
+          overflow-y: auto;
+          padding: 20px;
+          background: #1a1a1a;
+        }
+
+        .chatbot-form-group {
+          margin-bottom: 16px;
+        }
+
+        .chatbot-form-label {
+          display: block;
+          color: #ccc;
+          font-size: ${fontSize};
+          font-weight: 500;
+          margin-bottom: 8px;
+        }
+
+        .chatbot-form-input {
+          width: 100%;
+          padding: 12px;
+          background: #2a2a2a;
+          border: 1px solid #333;
+          border-radius: 8px;
+          color: #e0e0e0;
+          font-size: ${fontSize};
+          font-family: inherit;
+          transition: border-color 0.2s;
+        }
+
+        .chatbot-form-input:focus {
+          outline: none;
+          border-color: ${primaryColor};
+        }
+
+        .chatbot-form-textarea {
+          min-height: 120px;
+          resize: vertical;
+        }
+
+        .chatbot-form-submit {
+          width: 100%;
+          padding: 14px;
+          background: ${primaryColor};
+          border: none;
+          border-radius: 8px;
+          color: white;
+          font-size: ${fontSize};
+          font-weight: 600;
+          cursor: pointer;
+          transition: all 0.2s;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 8px;
+        }
+
+        .chatbot-form-submit:hover:not(:disabled) {
+          opacity: 0.9;
+          transform: translateY(-2px);
+        }
+
+        .chatbot-form-submit:disabled {
+          opacity: 0.5;
+          cursor: not-allowed;
+        }
+
+        .chatbot-success-message {
+          text-align: center;
+          padding: 40px 20px;
+        }
+
+        .chatbot-success-icon {
+          width: 64px;
+          height: 64px;
+          margin: 0 auto 16px;
+          border-radius: 50%;
+          background: rgba(16, 185, 129, 0.1);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: #10b981;
+        }
+
+        .chatbot-ticket-number {
+          display: inline-block;
+          padding: 8px 16px;
+          background: #2a2a2a;
+          border: 1px solid #333;
+          border-radius: 8px;
+          color: ${primaryColor};
+          font-family: monospace;
+          font-size: ${fontSize};
+          margin: 16px 0;
+        }
+
+        .chatbot-back-button {
+          margin-top: 20px;
+          background: #2a2a2a;
+          border: 1px solid #333;
+          color: #ccc;
+          padding: 12px 20px;
+          border-radius: 8px;
+          font-size: ${fontSize};
+          cursor: pointer;
+          transition: all 0.2s;
+          display: inline-flex;
+          align-items: center;
+          gap: 8px;
+        }
+
+        .chatbot-back-button:hover {
+          background: #333;
+          color: #fff;
+        }
+
         .chatbot-message {
           display: flex;
           gap: 12px;
@@ -376,7 +738,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 +751,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 +808,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 +846,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 +901,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 +915,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 +957,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;
         }
 
@@ -636,19 +998,16 @@ export const ChatbotWidget = ({ apiUrl, apiKey, title = 'AI Assistant', subtitle
 
         /* Mobile responsiveness */
         @media (max-width: 480px) {
-          /* Don't modify the container positioning - let it stay fixed at bottom-right for the button */
           .chatbot-widget-container {
             /* Keep default positioning from parent styles */
           }
 
           .chatbot-button {
-            /* Button stays in corner */
             width: 56px;
             height: 56px;
           }
 
           .chatbot-window {
-            /* Only the chat window covers full screen when open */
             position: fixed;
             bottom: 0 !important;
             right: 0 !important;
@@ -684,17 +1043,21 @@ 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 {
             padding: 12px;
           }
 
+          .chatbot-support-form {
+            padding: 16px;
+          }
+
           .chatbot-welcome {
             padding: 30px 16px;
           }
@@ -715,7 +1078,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 +1103,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,16 +1124,20 @@ export const ChatbotWidget = ({ apiUrl, apiKey, title = 'AI Assistant', subtitle
           }
 
           .chatbot-title h3 {
-            font-size: 14px;
+            font-size: ${fontSize};
           }
 
           .chatbot-messages {
             padding: 10px;
           }
 
+          .chatbot-support-form {
+            padding: 12px;
+          }
+
           .chatbot-bubble {
             padding: 8px 12px;
-            font-size: 13px;
+            font-size: ${fontSize};
           }
 
           .chatbot-input-area {
@@ -794,10 +1161,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([], {
-                                                    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 && (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: `
+      ` }), !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: [showSupportForm && (_jsx("button", { className: "chatbot-close", onClick: handleBackToChat, "aria-label": "Back to chat", title: "Back to chat", style: { marginRight: '8px' }, children: _jsx(ArrowLeft, { size: 18 }) })), _jsx("div", { className: "chatbot-icon", children: showSupportForm ? _jsx(Mail, { size: 20 }) : _jsx(Sparkles, { size: 20 }) }), _jsxs("div", { className: "chatbot-title", children: [_jsx("h3", { children: showSupportForm ? 'Contact Support' : title }), subtitle && !showSupportForm && _jsx("p", { children: subtitle }), showSupportForm && _jsx("p", { children: "We'll get back to you soon" })] })] }), _jsxs("div", { style: { display: 'flex', gap: '8px' }, children: [messages.length > 0 && !showSupportForm && (_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 }) })] })] }), showSupportForm && !ticketSubmitted && (_jsxs("form", { className: "chatbot-support-form", onSubmit: handleSupportFormSubmit, children: [_jsxs("div", { className: "chatbot-form-group", children: [_jsx("label", { className: "chatbot-form-label", children: "Name (Optional)" }), _jsx("input", { type: "text", className: "chatbot-form-input", value: supportFormData.name, onChange: (e) => setSupportFormData({ ...supportFormData, name: e.target.value }), placeholder: "Your name", disabled: isSubmittingTicket })] }), _jsxs("div", { className: "chatbot-form-group", children: [_jsxs("label", { className: "chatbot-form-label", children: ["Email Address ", _jsx("span", { style: { color: '#ef4444' }, children: "*" })] }), _jsx("input", { type: "email", className: "chatbot-form-input", value: supportFormData.email, onChange: (e) => setSupportFormData({ ...supportFormData, email: e.target.value }), placeholder: "your@email.com", required: true, disabled: isSubmittingTicket })] }), _jsxs("div", { className: "chatbot-form-group", children: [_jsxs("label", { className: "chatbot-form-label", children: ["Message ", _jsx("span", { style: { color: '#ef4444' }, children: "*" })] }), _jsx("textarea", { className: "chatbot-form-input chatbot-form-textarea", value: supportFormData.message, onChange: (e) => setSupportFormData({ ...supportFormData, message: e.target.value }), placeholder: "Please describe your issue or question...", required: true, minLength: 10, disabled: isSubmittingTicket })] }), _jsx("button", { type: "submit", className: "chatbot-form-submit", disabled: isSubmittingTicket || !supportFormData.email || !supportFormData.message, children: isSubmittingTicket ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { size: 18, className: "spin" }), "Submitting..."] })) : (_jsxs(_Fragment, { children: [_jsx(Send, { size: 18 }), "Submit Ticket"] })) }), error && (_jsxs("div", { className: "chatbot-error", style: { marginTop: '16px' }, children: [_jsx("span", { children: "\u26A0\uFE0F" }), error] }))] })), ticketSubmitted && (_jsx("div", { className: "chatbot-support-form", children: _jsxs("div", { className: "chatbot-success-message", children: [_jsx("div", { className: "chatbot-success-icon", children: _jsx(CheckCircle, { size: 32 }) }), _jsx("h4", { style: { margin: '0 0 8px 0', color: '#10b981', fontSize: '18px' }, children: "Ticket Submitted!" }), _jsx("p", { style: { margin: '0 0 16px 0', color: '#888', fontSize: '14px' }, children: "Thank you for contacting us. We've received your message and will get back to you soon." }), ticketNumber && (_jsxs("div", { children: [_jsx("p", { style: { margin: '0 0 8px 0', color: '#ccc', fontSize: '13px' }, children: "Your ticket number:" }), _jsx("div", { className: "chatbot-ticket-number", children: ticketNumber })] })), _jsx("p", { style: { margin: '20px 0 0 0', color: '#666', fontSize: '12px' }, children: "Please check your email for confirmation and updates." }), _jsxs("button", { className: "chatbot-back-button", onClick: handleBackToChat, children: [_jsx(ArrowLeft, { size: 16 }), "Back to Chat"] })] }) })), !showSupportForm && (_jsxs(_Fragment, { children: [_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" })] })] })), showContactPrompt && enableContactSupport && (_jsxs("div", { className: "chatbot-contact-prompt", children: [_jsxs("div", { className: "chatbot-contact-prompt-header", children: [_jsx("div", { className: "chatbot-contact-prompt-icon", children: _jsx(Mail, { size: 20 }) }), _jsx("h4", { className: "chatbot-contact-prompt-title", children: "Need to Contact Support?" })] }), _jsx("p", { className: "chatbot-contact-prompt-description", children: "It looks like you may need additional help. Would you like to create a support ticket? Our team will get back to you as soon as possible." }), _jsxs("div", { className: "chatbot-contact-prompt-actions", children: [_jsxs("button", { className: "chatbot-contact-prompt-button primary", onClick: handleShowSupportForm, children: [_jsx(Mail, { size: 16 }), "Create Ticket"] }), _jsx("button", { className: "chatbot-contact-prompt-button secondary", onClick: handleDismissContactPrompt, children: "Continue Chat" })] })] }))] }), 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"}