@rag-widget/chat-widget 0.1.2 → 0.1.3

package/dist/index.js

@@ -3,19 +3,19 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
+var React = require('react');
 
 function useChatWidget(options) {
     const { apiKey, widgetId, apiBaseUrl, onError, onMessageSent, onMessageReceived } = options;
-    const [messages, setMessages] = react.useState([]);
-    const [isLoading, setIsLoading] = react.useState(false);
-    const [isConnected, setIsConnected] = react.useState(false);
-    const [config, setConfig] = react.useState(null);
-    const [error, setError] = react.useState(null);
-    const [session, setSession] = react.useState(null);
-    const abortControllerRef = react.useRef(null);
+    const [messages, setMessages] = React.useState([]);
+    const [isLoading, setIsLoading] = React.useState(false);
+    const [isConnected, setIsConnected] = React.useState(false);
+    const [config, setConfig] = React.useState(null);
+    const [error, setError] = React.useState(null);
+    const [session, setSession] = React.useState(null);
+    const abortControllerRef = React.useRef(null);
     // Fetch widget configuration on mount
-    react.useEffect(() => {
+    React.useEffect(() => {
         fetchConfig();
         return () => {
             if (abortControllerRef.current) {
@@ -23,7 +23,7 @@ function useChatWidget(options) {
             }
         };
     }, [apiKey, widgetId]);
-    const fetchConfig = react.useCallback(async () => {
+    const fetchConfig = React.useCallback(async () => {
         try {
             const response = await fetch(`${apiBaseUrl}/api/v1/widget/${widgetId}/config`, {
                 headers: {
@@ -50,7 +50,7 @@ function useChatWidget(options) {
             onError === null || onError === void 0 ? void 0 : onError(error);
         }
     }, [apiKey, widgetId, apiBaseUrl, onError]);
-    const createSession = react.useCallback(async () => {
+    const createSession = React.useCallback(async () => {
         const response = await fetch(`${apiBaseUrl}/api/v1/widget/${widgetId}/sessions`, {
             method: 'POST',
             headers: {
@@ -67,7 +67,7 @@ function useChatWidget(options) {
         }
         throw new Error(result.message || 'Failed to create session');
     }, [apiKey, widgetId, apiBaseUrl]);
-    const sendMessage = react.useCallback(async (content) => {
+    const sendMessage = React.useCallback(async (content) => {
         var _a;
         if (!content.trim() || isLoading)
             return;
@@ -174,11 +174,11 @@ function useChatWidget(options) {
             setIsLoading(false);
         }
     }, [apiKey, widgetId, apiBaseUrl, session, isLoading, createSession, onError, onMessageSent, onMessageReceived]);
-    const clearMessages = react.useCallback(() => {
+    const clearMessages = React.useCallback(() => {
         setMessages([]);
         setSession(null);
     }, []);
-    const retry = react.useCallback(() => {
+    const retry = React.useCallback(() => {
         setError(null);
         fetchConfig();
     }, [fetchConfig]);
@@ -194,57 +194,115 @@ function useChatWidget(options) {
     };
 }
 
-const ChatIcon = () => (jsxRuntime.jsxs("svg", { className: "rag-chat-bubble-icon", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("path", { d: "M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H5.17L4 17.17V4h16v12z" }), jsxRuntime.jsx("path", { d: "M7 9h10v2H7zm0-3h10v2H7z" })] }));
+const useViewNavigation = (initialView = 'home') => {
+    const [state, setState] = React.useState({
+        currentView: initialView,
+        previousView: null,
+    });
+    const navigateToChat = React.useCallback(() => {
+        setState((prev) => ({
+            currentView: 'chat',
+            previousView: prev.currentView,
+        }));
+    }, []);
+    const navigateToHome = React.useCallback(() => {
+        setState((prev) => ({
+            currentView: 'home',
+            previousView: prev.currentView,
+        }));
+    }, []);
+    const goBack = React.useCallback(() => {
+        if (state.currentView !== 'home') {
+            setState((prev) => ({
+                currentView: 'home',
+                previousView: prev.currentView,
+            }));
+        }
+    }, [state.currentView]);
+    const canGoBack = state.currentView !== 'home';
+    return {
+        currentView: state.currentView,
+        previousView: state.previousView,
+        canGoBack,
+        navigateToChat,
+        navigateToHome,
+        goBack,
+    };
+};
+
+const ChatIcon$1 = () => (jsxRuntime.jsxs("svg", { className: "rag-chat-bubble-icon", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("path", { d: "M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H5.17L4 17.17V4h16v12z" }), jsxRuntime.jsx("path", { d: "M7 9h10v2H7zm0-3h10v2H7z" })] }));
 const CloseIcon$1 = () => (jsxRuntime.jsx("svg", { className: "rag-chat-bubble-icon", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }));
 const ChatBubble = ({ isOpen, onClick, primaryColor = '#007bff', position = 'bottom-right', unreadCount = 0 }) => {
-    return (jsxRuntime.jsxs("button", { className: `rag-chat-bubble ${position}`, onClick: onClick, style: { backgroundColor: primaryColor }, "aria-label": isOpen ? 'Close chat' : 'Open chat', type: "button", children: [isOpen ? jsxRuntime.jsx(CloseIcon$1, {}) : jsxRuntime.jsx(ChatIcon, {}), !isOpen && unreadCount > 0 && (jsxRuntime.jsx("span", { className: "rag-chat-bubble-badge", children: unreadCount > 9 ? '9+' : unreadCount }))] }));
+    return (jsxRuntime.jsxs("button", { className: `rag-chat-bubble ${position}`, onClick: onClick, style: { backgroundColor: primaryColor }, "aria-label": isOpen ? 'Close chat' : 'Open chat', type: "button", children: [isOpen ? jsxRuntime.jsx(CloseIcon$1, {}) : jsxRuntime.jsx(ChatIcon$1, {}), !isOpen && unreadCount > 0 && (jsxRuntime.jsx("span", { className: "rag-chat-bubble-badge", children: unreadCount > 9 ? '9+' : unreadCount }))] }));
 };
 
-const CloseIcon = () => (jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { fill: "currentColor", d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }));
-const SendIcon = () => (jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" }) }));
-const LoadingDots = () => (jsxRuntime.jsxs("div", { className: "rag-chat-loading", children: [jsxRuntime.jsx("div", { className: "rag-chat-loading-dot" }), jsxRuntime.jsx("div", { className: "rag-chat-loading-dot" }), jsxRuntime.jsx("div", { className: "rag-chat-loading-dot" })] }));
-const MessageBubble = ({ message }) => (jsxRuntime.jsxs("div", { className: `rag-chat-message ${message.role}`, children: [message.isStreaming && !message.content ? (jsxRuntime.jsx(LoadingDots, {})) : (jsxRuntime.jsx("p", { className: "rag-chat-message-content", children: message.content })), message.sources && message.sources.length > 0 && (jsxRuntime.jsxs("div", { className: "rag-chat-message-sources", children: [jsxRuntime.jsx("div", { className: "rag-chat-message-sources-title", children: "Sources:" }), message.sources.map((source, index) => (jsxRuntime.jsx("div", { className: "rag-chat-message-source", children: source.title }, index)))] }))] }));
-const ChatWindow = ({ isOpen, onClose, config, messages, isLoading, onSendMessage }) => {
-    const [inputValue, setInputValue] = react.useState('');
-    const messagesEndRef = react.useRef(null);
-    const inputRef = react.useRef(null);
-    // Scroll to bottom when new messages arrive
-    react.useEffect(() => {
-        var _a;
-        (_a = messagesEndRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth' });
-    }, [messages]);
-    // Focus input when window opens
-    react.useEffect(() => {
-        var _a;
-        if (isOpen) {
-            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-        }
-    }, [isOpen]);
-    const handleSubmit = (e) => {
-        e.preventDefault();
-        if (inputValue.trim() && !isLoading) {
-            onSendMessage(inputValue.trim());
-            setInputValue('');
-        }
-    };
+const HeaderSection = ({ greeting, logoUrl, }) => {
+    return (jsxRuntime.jsxs("div", { className: "rag-home-header", children: [logoUrl && (jsxRuntime.jsx("img", { src: logoUrl, alt: "Logo", className: "rag-home-logo" })), jsxRuntime.jsx("h2", { className: "rag-home-greeting", children: greeting })] }));
+};
+
+const ChatIcon = () => (jsxRuntime.jsx("svg", { "data-testid": "chat-icon", className: "rag-start-chat-card__icon", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const ArrowIcon = () => (jsxRuntime.jsx("svg", { "data-testid": "arrow-icon", className: "rag-start-chat-card__arrow", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M9 18l6-6-6-6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const StartChatCard = React.forwardRef(({ onStartChat, subtitle, }, ref) => {
     const handleKeyDown = (e) => {
-        if (e.key === 'Enter' && !e.shiftKey) {
+        if (e.key === 'Enter' || e.key === ' ') {
             e.preventDefault();
-            handleSubmit(e);
+            onStartChat();
         }
     };
-    if (!isOpen)
+    return (jsxRuntime.jsxs("button", { ref: ref, type: "button", className: "rag-start-chat-card", onClick: onStartChat, onKeyDown: handleKeyDown, "aria-label": "Start new chat conversation", children: [jsxRuntime.jsx(ChatIcon, {}), jsxRuntime.jsxs("div", { className: "rag-start-chat-card__content", children: [jsxRuntime.jsx("div", { className: "rag-start-chat-card__title", children: "Start new chat" }), subtitle && (jsxRuntime.jsx("div", { className: "rag-start-chat-card__subtitle", children: subtitle }))] }), jsxRuntime.jsx(ArrowIcon, {})] }));
+});
+// Display name for debugging
+StartChatCard.displayName = 'StartChatCard';
+
+const ChevronIcon = () => (jsxRuntime.jsx("svg", { className: "rag-ticket-category__chevron", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M9 18l6-6-6-6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const TicketCategoryList = ({ categories, onCategoryClick, }) => {
+    const enabledCategories = categories.filter((cat) => cat.enabled);
+    if (enabledCategories.length === 0) {
         return null;
-    const position = (config === null || config === void 0 ? void 0 : config.position) || 'bottom-right';
-    const primaryColor = (config === null || config === void 0 ? void 0 : config.primaryColor) || '#007bff';
-    return (jsxRuntime.jsxs("div", { className: `rag-chat-window ${position}`, style: { '--rag-primary-color': primaryColor }, children: [jsxRuntime.jsxs("div", { className: "rag-chat-header", style: { backgroundColor: primaryColor }, children: [jsxRuntime.jsx("h3", { className: "rag-chat-header-title", children: (config === null || config === void 0 ? void 0 : config.name) || 'Chat' }), jsxRuntime.jsx("button", { className: "rag-chat-header-close", onClick: onClose, "aria-label": "Close chat", type: "button", children: jsxRuntime.jsx(CloseIcon, {}) })] }), jsxRuntime.jsxs("div", { className: "rag-chat-messages", children: [messages.length === 0 && ((config === null || config === void 0 ? void 0 : config.uspText) || (config === null || config === void 0 ? void 0 : config.greeting)) && (jsxRuntime.jsxs("div", { className: "rag-chat-greeting", children: [(config === null || config === void 0 ? void 0 : config.uspText) && (jsxRuntime.jsx("p", { className: "rag-chat-usp-text", children: config.uspText })), (config === null || config === void 0 ? void 0 : config.greeting) && (jsxRuntime.jsx("p", { className: "rag-chat-greeting-text", children: config.greeting }))] })), messages.map(message => (jsxRuntime.jsx(MessageBubble, { message: message }, message.id))), jsxRuntime.jsx("div", { ref: messagesEndRef })] }), jsxRuntime.jsxs("form", { className: "rag-chat-input-container", onSubmit: handleSubmit, children: [jsxRuntime.jsx("textarea", { ref: inputRef, className: "rag-chat-input", value: inputValue, onChange: e => setInputValue(e.target.value), onKeyDown: handleKeyDown, placeholder: (config === null || config === void 0 ? void 0 : config.placeholder) || 'Type a message...', rows: 1, maxLength: (config === null || config === void 0 ? void 0 : config.allowedMessageLength) || 2000, disabled: isLoading }), jsxRuntime.jsx("button", { type: "submit", className: "rag-chat-send-button", disabled: !inputValue.trim() || isLoading, style: { backgroundColor: primaryColor }, "aria-label": "Send message", children: jsxRuntime.jsx(SendIcon, {}) })] }), (config === null || config === void 0 ? void 0 : config.showPoweredBy) && (jsxRuntime.jsxs("div", { className: "rag-chat-powered-by", children: ["Powered by ", jsxRuntime.jsx("a", { href: "https://rag-widget.com", target: "_blank", rel: "noopener noreferrer", children: "RAG Widget" })] }))] }));
+    }
+    return (jsxRuntime.jsxs("div", { className: "rag-ticket-section", children: [jsxRuntime.jsx("div", { className: "rag-ticket-section__title", children: "Submit a ticket" }), jsxRuntime.jsx("div", { className: "rag-ticket-list", children: enabledCategories.map((category) => (jsxRuntime.jsxs("button", { type: "button", className: "rag-ticket-category", onClick: () => onCategoryClick(category.id), "aria-label": `Submit ${category.label} ticket`, children: [jsxRuntime.jsx("span", { className: "rag-ticket-category__icon", children: category.icon }), jsxRuntime.jsx("span", { className: "rag-ticket-category__label", children: category.label }), jsxRuntime.jsx(ChevronIcon, {})] }, category.id))) })] }));
+};
+
+const BookmarksRow = ({ bookmarks }) => {
+    if (bookmarks.length === 0) {
+        return null;
+    }
+    return (jsxRuntime.jsxs("nav", { className: "rag-bookmarks-section", role: "navigation", "aria-label": "Quick links", children: [jsxRuntime.jsx("div", { className: "rag-bookmarks-section__title", id: "bookmarks-title", children: "Bookmarks" }), jsxRuntime.jsx("div", { className: "rag-bookmarks-row", "aria-labelledby": "bookmarks-title", children: bookmarks.map((bookmark) => (jsxRuntime.jsxs("a", { href: bookmark.url, target: "_blank", rel: "noopener noreferrer", className: "rag-bookmark", "aria-label": `${bookmark.label} - opens in new tab`, children: [jsxRuntime.jsx("span", { className: "rag-bookmark__icon", "aria-hidden": "true", children: bookmark.icon }), jsxRuntime.jsx("span", { className: "rag-bookmark__label", children: bookmark.label })] }, bookmark.id))) })] }));
+};
+
+const HomeView = ({ config, onStartChat, onTicketCategoryClick, autoFocus = false, }) => {
+    const homeConfig = config.homeView;
+    const startChatRef = React.useRef(null);
+    // Auto-focus first interactive element when autoFocus is enabled
+    React.useEffect(() => {
+        if (autoFocus && startChatRef.current) {
+            startChatRef.current.focus();
+        }
+    }, [autoFocus]);
+    // Don't render if home view is not enabled or missing
+    if (!(homeConfig === null || homeConfig === void 0 ? void 0 : homeConfig.enabled)) {
+        return null;
+    }
+    // Use homeView greeting, fallback to widget greeting
+    const greeting = homeConfig.greeting || config.greeting;
+    const handleTicketCategoryClick = (categoryId) => {
+        if (onTicketCategoryClick) {
+            onTicketCategoryClick(categoryId);
+        }
+        else {
+            // Default behavior: log "Coming soon" message
+            console.log('Ticket category clicked (Coming soon):', categoryId);
+        }
+    };
+    return (jsxRuntime.jsxs("div", { className: "rag-home-view", role: "region", "aria-label": "Help Center Home", children: [jsxRuntime.jsx(HeaderSection, { greeting: greeting, logoUrl: homeConfig.logoUrl }), homeConfig.showStartChat && (jsxRuntime.jsx(StartChatCard, { ref: startChatRef, onStartChat: onStartChat, subtitle: "How can we help you?" })), homeConfig.ticketCategories && homeConfig.ticketCategories.length > 0 && (jsxRuntime.jsx(TicketCategoryList, { categories: homeConfig.ticketCategories, onCategoryClick: handleTicketCategoryClick })), homeConfig.bookmarks && homeConfig.bookmarks.length > 0 && (jsxRuntime.jsx(BookmarksRow, { bookmarks: homeConfig.bookmarks })), config.showPoweredBy && (jsxRuntime.jsxs("div", { className: "rag-home-footer", children: ["Powered by ", jsxRuntime.jsx("a", { href: "https://rag-widget.com", target: "_blank", rel: "noopener noreferrer", children: "RAG Widget" })] }))] }));
 };
 
 const ChatWidget = ({ apiKey, widgetId, apiBaseUrl = '', position, primaryColor, greeting, placeholder, showPoweredBy, onError, onMessageSent, onMessageReceived }) => {
-    const [isOpen, setIsOpen] = react.useState(false);
+    var _a, _b, _c;
+    const [isOpen, setIsOpen] = React.useState(false);
     // Determine the API base URL
     const baseUrl = apiBaseUrl || (typeof window !== 'undefined' ? window.location.origin : '');
-    const { messages, isLoading, isConnected, config, error, sendMessage, retry } = useChatWidget({
+    const { messages, isLoading, config, error, sendMessage, retry } = useChatWidget({
         apiKey,
         widgetId,
         apiBaseUrl: baseUrl,
@@ -261,21 +319,115 @@ const ChatWidget = ({ apiKey, widgetId, apiBaseUrl = '', position, primaryColor,
         placeholder: placeholder || config.placeholder,
         showPoweredBy: showPoweredBy !== undefined ? showPoweredBy : config.showPoweredBy
     } : null;
+    // Determine initial view based on home view configuration
+    const homeViewEnabled = (_b = (_a = mergedConfig === null || mergedConfig === void 0 ? void 0 : mergedConfig.homeView) === null || _a === void 0 ? void 0 : _a.enabled) !== null && _b !== void 0 ? _b : false;
+    const initialView = homeViewEnabled ? 'home' : 'chat';
+    const { currentView, canGoBack, navigateToChat, navigateToHome, } = useViewNavigation(initialView);
+    // Update view when config loads - fixes race condition where config isn't
+    // available on first render but homeView.enabled is true
+    React.useEffect(() => {
+        var _a;
+        if (((_a = mergedConfig === null || mergedConfig === void 0 ? void 0 : mergedConfig.homeView) === null || _a === void 0 ? void 0 : _a.enabled) && currentView === 'chat') {
+            navigateToHome();
+        }
+    }, [(_c = mergedConfig === null || mergedConfig === void 0 ? void 0 : mergedConfig.homeView) === null || _c === void 0 ? void 0 : _c.enabled]);
     const handleToggle = () => {
         setIsOpen(prev => !prev);
     };
     const handleClose = () => {
         setIsOpen(false);
     };
+    const handleStartChat = () => {
+        navigateToChat();
+    };
+    const handleBack = () => {
+        navigateToHome();
+    };
+    const effectivePrimaryColor = (mergedConfig === null || mergedConfig === void 0 ? void 0 : mergedConfig.primaryColor) || primaryColor || '#007bff';
+    const effectivePosition = (mergedConfig === null || mergedConfig === void 0 ? void 0 : mergedConfig.position) || position || 'bottom-right';
     // Show error state in the window if there's an error
     if (error && isOpen) {
-        return (jsxRuntime.jsxs("div", { className: "rag-chat-widget", children: [jsxRuntime.jsx(ChatBubble, { isOpen: isOpen, onClick: handleToggle, primaryColor: primaryColor || '#007bff', position: position || 'bottom-right' }), jsxRuntime.jsxs("div", { className: `rag-chat-window ${position || 'bottom-right'}`, children: [jsxRuntime.jsxs("div", { className: "rag-chat-header", style: { backgroundColor: primaryColor || '#007bff' }, children: [jsxRuntime.jsx("h3", { className: "rag-chat-header-title", children: "Chat" }), jsxRuntime.jsx("button", { className: "rag-chat-header-close", onClick: handleClose, type: "button", children: jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { fill: "currentColor", d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) })] }), jsxRuntime.jsxs("div", { className: "rag-chat-error", children: [jsxRuntime.jsx("p", { className: "rag-chat-error-message", children: error.message || 'Unable to connect. Please try again.' }), jsxRuntime.jsx("button", { className: "rag-chat-error-retry", onClick: retry, type: "button", children: "Retry" })] })] })] }));
+        return (jsxRuntime.jsxs("div", { className: "rag-chat-widget", children: [jsxRuntime.jsx(ChatBubble, { isOpen: isOpen, onClick: handleToggle, primaryColor: effectivePrimaryColor, position: effectivePosition }), jsxRuntime.jsxs("div", { className: `rag-chat-window ${effectivePosition}`, children: [jsxRuntime.jsxs("div", { className: "rag-chat-header", style: { backgroundColor: effectivePrimaryColor }, children: [jsxRuntime.jsx("h3", { className: "rag-chat-header-title", children: "Chat" }), jsxRuntime.jsx("button", { className: "rag-chat-header-close", onClick: handleClose, type: "button", "aria-label": "Close chat", children: jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { fill: "currentColor", d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) })] }), jsxRuntime.jsxs("div", { className: "rag-chat-error", children: [jsxRuntime.jsx("p", { className: "rag-chat-error-message", children: error.message || 'Unable to connect. Please try again.' }), jsxRuntime.jsx("button", { className: "rag-chat-error-retry", onClick: retry, type: "button", children: "Retry" })] })] })] }));
     }
-    return (jsxRuntime.jsxs("div", { className: "rag-chat-widget", children: [jsxRuntime.jsx(ChatBubble, { isOpen: isOpen, onClick: handleToggle, primaryColor: (mergedConfig === null || mergedConfig === void 0 ? void 0 : mergedConfig.primaryColor) || primaryColor || '#007bff', position: (mergedConfig === null || mergedConfig === void 0 ? void 0 : mergedConfig.position) || position || 'bottom-right' }), mergedConfig && (jsxRuntime.jsx(ChatWindow, { isOpen: isOpen, onClose: handleClose, config: mergedConfig, messages: messages, isLoading: isLoading, onSendMessage: sendMessage }))] }));
+    // Determine which view to render
+    const shouldShowHomeView = currentView === 'home' && homeViewEnabled && mergedConfig;
+    const shouldShowChatView = currentView === 'chat' || !homeViewEnabled;
+    return (jsxRuntime.jsxs("div", { className: "rag-chat-widget", children: [jsxRuntime.jsx(ChatBubble, { isOpen: isOpen, onClick: handleToggle, primaryColor: effectivePrimaryColor, position: effectivePosition }), isOpen && mergedConfig && (jsxRuntime.jsxs("div", { className: `rag-chat-window ${effectivePosition}`, style: { '--rag-primary-color': effectivePrimaryColor }, children: [jsxRuntime.jsxs("div", { className: "rag-chat-header", style: { backgroundColor: effectivePrimaryColor }, children: [jsxRuntime.jsxs("div", { className: "rag-chat-header-left", children: [canGoBack && (jsxRuntime.jsx("button", { className: "rag-chat-header-back", onClick: handleBack, type: "button", "aria-label": "Back to home", children: jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { fill: "currentColor", d: "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" }) }) })), jsxRuntime.jsx("h3", { className: "rag-chat-header-title", children: mergedConfig.name || 'Chat' })] }), jsxRuntime.jsx("button", { className: "rag-chat-header-close", onClick: handleClose, "aria-label": "Close chat", type: "button", children: jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { fill: "currentColor", d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) })] }), jsxRuntime.jsxs("div", { className: "rag-view-container", children: [shouldShowHomeView && (jsxRuntime.jsx(HomeView, { config: mergedConfig, onStartChat: handleStartChat })), shouldShowChatView && (jsxRuntime.jsx(ChatWindowContent, { config: mergedConfig, messages: messages, isLoading: isLoading, onSendMessage: sendMessage }))] })] }))] }));
+};
+const ChatWindowContent = ({ config, messages, isLoading, onSendMessage, }) => {
+    const [inputValue, setInputValue] = React.useState('');
+    const messagesEndRef = React.useRef(null);
+    const inputRef = React.useRef(null);
+    // Scroll to bottom when new messages arrive
+    React.useEffect(() => {
+        if (messagesEndRef.current && typeof messagesEndRef.current.scrollIntoView === 'function') {
+            messagesEndRef.current.scrollIntoView({ behavior: 'smooth' });
+        }
+    }, [messages]);
+    // Focus input when content mounts
+    React.useEffect(() => {
+        var _a;
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, []);
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        if (inputValue.trim() && !isLoading) {
+            onSendMessage(inputValue.trim());
+            setInputValue('');
+        }
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            handleSubmit(e);
+        }
+    };
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "rag-chat-messages", children: [messages.length === 0 && (config.uspText || config.greeting) && (jsxRuntime.jsxs("div", { className: "rag-chat-greeting", children: [config.uspText && (jsxRuntime.jsx("p", { className: "rag-chat-usp-text", children: config.uspText })), config.greeting && (jsxRuntime.jsx("p", { className: "rag-chat-greeting-text", children: config.greeting }))] })), messages.map(message => (jsxRuntime.jsxs("div", { className: `rag-chat-message ${message.role}`, children: [message.isStreaming && !message.content ? (jsxRuntime.jsxs("div", { className: "rag-chat-loading", children: [jsxRuntime.jsx("div", { className: "rag-chat-loading-dot" }), jsxRuntime.jsx("div", { className: "rag-chat-loading-dot" }), jsxRuntime.jsx("div", { className: "rag-chat-loading-dot" })] })) : (jsxRuntime.jsx("p", { className: "rag-chat-message-content", children: message.content })), message.sources && message.sources.length > 0 && (jsxRuntime.jsxs("div", { className: "rag-chat-message-sources", children: [jsxRuntime.jsx("div", { className: "rag-chat-message-sources-title", children: "Sources:" }), message.sources.map((source, index) => (jsxRuntime.jsx("div", { className: "rag-chat-message-source", children: source.title }, index)))] }))] }, message.id))), jsxRuntime.jsx("div", { ref: messagesEndRef })] }), jsxRuntime.jsxs("form", { className: "rag-chat-input-container", onSubmit: handleSubmit, children: [jsxRuntime.jsx("textarea", { ref: inputRef, className: "rag-chat-input", value: inputValue, onChange: e => setInputValue(e.target.value), onKeyDown: handleKeyDown, placeholder: config.placeholder || 'Type a message...', rows: 1, maxLength: config.allowedMessageLength || 2000, disabled: isLoading }), jsxRuntime.jsx("button", { type: "submit", className: "rag-chat-send-button", disabled: !inputValue.trim() || isLoading, style: { backgroundColor: config.primaryColor }, "aria-label": "Send message", children: jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" }) }) })] }), config.showPoweredBy && (jsxRuntime.jsxs("div", { className: "rag-chat-powered-by", children: ["Powered by ", jsxRuntime.jsx("a", { href: "https://rag-widget.com", target: "_blank", rel: "noopener noreferrer", children: "RAG Widget" })] }))] }));
+};
+
+const CloseIcon = () => (jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { fill: "currentColor", d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }));
+const SendIcon = () => (jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" }) }));
+const LoadingDots = () => (jsxRuntime.jsxs("div", { className: "rag-chat-loading", children: [jsxRuntime.jsx("div", { className: "rag-chat-loading-dot" }), jsxRuntime.jsx("div", { className: "rag-chat-loading-dot" }), jsxRuntime.jsx("div", { className: "rag-chat-loading-dot" })] }));
+const MessageBubble = ({ message }) => (jsxRuntime.jsxs("div", { className: `rag-chat-message ${message.role}`, children: [message.isStreaming && !message.content ? (jsxRuntime.jsx(LoadingDots, {})) : (jsxRuntime.jsx("p", { className: "rag-chat-message-content", children: message.content })), message.sources && message.sources.length > 0 && (jsxRuntime.jsxs("div", { className: "rag-chat-message-sources", children: [jsxRuntime.jsx("div", { className: "rag-chat-message-sources-title", children: "Sources:" }), message.sources.map((source, index) => (jsxRuntime.jsx("div", { className: "rag-chat-message-source", children: source.title }, index)))] }))] }));
+const ChatWindow = ({ isOpen, onClose, config, messages, isLoading, onSendMessage }) => {
+    const [inputValue, setInputValue] = React.useState('');
+    const messagesEndRef = React.useRef(null);
+    const inputRef = React.useRef(null);
+    // Scroll to bottom when new messages arrive
+    React.useEffect(() => {
+        var _a;
+        (_a = messagesEndRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth' });
+    }, [messages]);
+    // Focus input when window opens
+    React.useEffect(() => {
+        var _a;
+        if (isOpen) {
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [isOpen]);
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        if (inputValue.trim() && !isLoading) {
+            onSendMessage(inputValue.trim());
+            setInputValue('');
+        }
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            handleSubmit(e);
+        }
+    };
+    if (!isOpen)
+        return null;
+    const position = (config === null || config === void 0 ? void 0 : config.position) || 'bottom-right';
+    const primaryColor = (config === null || config === void 0 ? void 0 : config.primaryColor) || '#007bff';
+    return (jsxRuntime.jsxs("div", { className: `rag-chat-window ${position}`, style: { '--rag-primary-color': primaryColor }, children: [jsxRuntime.jsxs("div", { className: "rag-chat-header", style: { backgroundColor: primaryColor }, children: [jsxRuntime.jsx("h3", { className: "rag-chat-header-title", children: (config === null || config === void 0 ? void 0 : config.name) || 'Chat' }), jsxRuntime.jsx("button", { className: "rag-chat-header-close", onClick: onClose, "aria-label": "Close chat", type: "button", children: jsxRuntime.jsx(CloseIcon, {}) })] }), jsxRuntime.jsxs("div", { className: "rag-chat-messages", children: [messages.length === 0 && ((config === null || config === void 0 ? void 0 : config.uspText) || (config === null || config === void 0 ? void 0 : config.greeting)) && (jsxRuntime.jsxs("div", { className: "rag-chat-greeting", children: [(config === null || config === void 0 ? void 0 : config.uspText) && (jsxRuntime.jsx("p", { className: "rag-chat-usp-text", children: config.uspText })), (config === null || config === void 0 ? void 0 : config.greeting) && (jsxRuntime.jsx("p", { className: "rag-chat-greeting-text", children: config.greeting }))] })), messages.map(message => (jsxRuntime.jsx(MessageBubble, { message: message }, message.id))), jsxRuntime.jsx("div", { ref: messagesEndRef })] }), jsxRuntime.jsxs("form", { className: "rag-chat-input-container", onSubmit: handleSubmit, children: [jsxRuntime.jsx("textarea", { ref: inputRef, className: "rag-chat-input", value: inputValue, onChange: e => setInputValue(e.target.value), onKeyDown: handleKeyDown, placeholder: (config === null || config === void 0 ? void 0 : config.placeholder) || 'Type a message...', rows: 1, maxLength: (config === null || config === void 0 ? void 0 : config.allowedMessageLength) || 2000, disabled: isLoading }), jsxRuntime.jsx("button", { type: "submit", className: "rag-chat-send-button", disabled: !inputValue.trim() || isLoading, style: { backgroundColor: primaryColor }, "aria-label": "Send message", children: jsxRuntime.jsx(SendIcon, {}) })] }), (config === null || config === void 0 ? void 0 : config.showPoweredBy) && (jsxRuntime.jsxs("div", { className: "rag-chat-powered-by", children: ["Powered by ", jsxRuntime.jsx("a", { href: "https://rag-widget.com", target: "_blank", rel: "noopener noreferrer", children: "RAG Widget" })] }))] }));
 };
 
-const ChatWidgetContext = react.createContext(null);
+const ChatWidgetContext = React.createContext(null);
 const ChatWidgetProvider = ({ apiKey, widgetId, apiBaseUrl = '', onError, onMessageSent, onMessageReceived, children }) => {
+    var _a, _b, _c;
     const baseUrl = apiBaseUrl || (typeof window !== 'undefined' ? window.location.origin : '');
     const chatWidget = useChatWidget({
         apiKey,
@@ -285,7 +437,13 @@ const ChatWidgetProvider = ({ apiKey, widgetId, apiBaseUrl = '', onError, onMess
         onMessageSent,
         onMessageReceived
     });
-    const value = react.useMemo(() => ({
+    // Determine initial view based on config
+    // If homeView is enabled, start with home; otherwise start with chat
+    const homeViewEnabled = (_c = (_b = (_a = chatWidget.config) === null || _a === void 0 ? void 0 : _a.homeView) === null || _b === void 0 ? void 0 : _b.enabled) !== null && _c !== void 0 ? _c : false;
+    const initialView = homeViewEnabled ? 'home' : 'chat';
+    const viewNavigation = useViewNavigation(initialView);
+    const value = React.useMemo(() => ({
+        // Chat state
         messages: chatWidget.messages,
         isLoading: chatWidget.isLoading,
         isConnected: chatWidget.isConnected,
@@ -293,23 +451,36 @@ const ChatWidgetProvider = ({ apiKey, widgetId, apiBaseUrl = '', onError, onMess
         error: chatWidget.error,
         sendMessage: chatWidget.sendMessage,
         clearMessages: chatWidget.clearMessages,
-        retry: chatWidget.retry
-    }), [chatWidget]);
+        retry: chatWidget.retry,
+        // View navigation
+        currentView: viewNavigation.currentView,
+        previousView: viewNavigation.previousView,
+        canGoBack: viewNavigation.canGoBack,
+        navigateToChat: viewNavigation.navigateToChat,
+        navigateToHome: viewNavigation.navigateToHome,
+        goBack: viewNavigation.goBack,
+    }), [chatWidget, viewNavigation]);
     return (jsxRuntime.jsx(ChatWidgetContext.Provider, { value: value, children: children }));
 };
 const useChatWidgetContext = () => {
-    const context = react.useContext(ChatWidgetContext);
+    const context = React.useContext(ChatWidgetContext);
     if (!context) {
         throw new Error('useChatWidgetContext must be used within a ChatWidgetProvider');
     }
     return context;
 };
 
+exports.BookmarksRow = BookmarksRow;
 exports.ChatBubble = ChatBubble;
 exports.ChatWidget = ChatWidget;
 exports.ChatWidgetProvider = ChatWidgetProvider;
 exports.ChatWindow = ChatWindow;
+exports.HeaderSection = HeaderSection;
+exports.HomeView = HomeView;
+exports.StartChatCard = StartChatCard;
+exports.TicketCategoryList = TicketCategoryList;
 exports.default = ChatWidget;
 exports.useChatWidget = useChatWidget;
 exports.useChatWidgetContext = useChatWidgetContext;
+exports.useViewNavigation = useViewNavigation;
 //# sourceMappingURL=index.js.map