@rag-widget/chat-widget 0.1.2 → 0.1.3

package/dist/__tests__/accessibility.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/ChatWidget.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/home/BookmarksRow.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { Bookmark } from '../../types';
+export interface BookmarksRowProps {
+    bookmarks: Bookmark[];
+}
+export declare const BookmarksRow: React.FC<BookmarksRowProps>;

package/dist/components/home/BookmarksRow.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/home/HeaderSection.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface HeaderSectionProps {
+    greeting: string;
+    logoUrl?: string;
+}
+export declare const HeaderSection: React.FC<HeaderSectionProps>;

package/dist/components/home/HeaderSection.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/home/StartChatCard.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface StartChatCardProps {
+    onStartChat: () => void;
+    subtitle?: string;
+}
+export declare const StartChatCard: React.ForwardRefExoticComponent<StartChatCardProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/home/StartChatCard.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/home/TicketCategoryList.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { TicketCategory } from '../../types';
+export interface TicketCategoryListProps {
+    categories: TicketCategory[];
+    onCategoryClick: (categoryId: string) => void;
+}
+export declare const TicketCategoryList: React.FC<TicketCategoryListProps>;

package/dist/components/home/TicketCategoryList.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/home/index.d.ts

@@ -0,0 +1,8 @@
+export { HeaderSection } from './HeaderSection';
+export type { HeaderSectionProps } from './HeaderSection';
+export { StartChatCard } from './StartChatCard';
+export type { StartChatCardProps } from './StartChatCard';
+export { TicketCategoryList } from './TicketCategoryList';
+export type { TicketCategoryListProps } from './TicketCategoryList';
+export { BookmarksRow } from './BookmarksRow';
+export type { BookmarksRowProps } from './BookmarksRow';

package/dist/components/views/HomeView.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { WidgetConfig } from '../../types';
+export interface HomeViewProps {
+    config: WidgetConfig;
+    onStartChat: () => void;
+    onTicketCategoryClick?: (categoryId: string) => void;
+    autoFocus?: boolean;
+}
+export declare const HomeView: React.FC<HomeViewProps>;

package/dist/components/views/HomeView.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/views/index.d.ts

@@ -0,0 +1,2 @@
+export { HomeView } from './HomeView';
+export type { HomeViewProps } from './HomeView';

package/dist/hooks/useViewNavigation.d.ts

@@ -0,0 +1,10 @@
+import type { WidgetView } from '../types';
+export interface UseViewNavigationReturn {
+    currentView: WidgetView;
+    previousView: WidgetView | null;
+    canGoBack: boolean;
+    navigateToChat: () => void;
+    navigateToHome: () => void;
+    goBack: () => void;
+}
+export declare const useViewNavigation: (initialView?: WidgetView) => UseViewNavigationReturn;

package/dist/hooks/useViewNavigation.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -1,7 +1,13 @@
 export { ChatWidget, default as default } from './components/ChatWidget';
 export { ChatBubble } from './components/ChatBubble';
 export { ChatWindow } from './components/ChatWindow';
+export { HomeView } from './components/views/HomeView';
+export { HeaderSection } from './components/home/HeaderSection';
+export { StartChatCard } from './components/home/StartChatCard';
+export { TicketCategoryList } from './components/home/TicketCategoryList';
+export { BookmarksRow } from './components/home/BookmarksRow';
 export { useChatWidget } from './hooks/useChatWidget';
+export { useViewNavigation } from './hooks/useViewNavigation';
 export { ChatWidgetProvider, useChatWidgetContext } from './providers/ChatWidgetProvider';
-export type { ChatWidgetProps, ChatBubbleProps, ChatWindowProps, WidgetConfig, Message, Source, ChatSession, UsageInfo, ApiResponse } from './types';
+export type { ChatWidgetProps, ChatBubbleProps, ChatWindowProps, WidgetConfig, Message, Source, ChatSession, UsageInfo, ApiResponse, WidgetView, HomeViewConfig, TicketCategory, Bookmark, } from './types';
 import './styles/widget.css';

package/dist/index.esm.js

@@ -1,5 +1,5 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useRef, useEffect, useCallback, createContext, useMemo, useContext } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import React, { useState, useRef, useEffect, useCallback, createContext, useMemo, useContext } from 'react';
 
 function useChatWidget(options) {
     const { apiKey, widgetId, apiBaseUrl, onError, onMessageSent, onMessageReceived } = options;
@@ -190,10 +190,195 @@ function useChatWidget(options) {
     };
 }
 
-const ChatIcon = () => (jsxs("svg", { className: "rag-chat-bubble-icon", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: [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" }), jsx("path", { d: "M7 9h10v2H7zm0-3h10v2H7z" })] }));
+const useViewNavigation = (initialView = 'home') => {
+    const [state, setState] = useState({
+        currentView: initialView,
+        previousView: null,
+    });
+    const navigateToChat = useCallback(() => {
+        setState((prev) => ({
+            currentView: 'chat',
+            previousView: prev.currentView,
+        }));
+    }, []);
+    const navigateToHome = useCallback(() => {
+        setState((prev) => ({
+            currentView: 'home',
+            previousView: prev.currentView,
+        }));
+    }, []);
+    const goBack = 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 = () => (jsxs("svg", { className: "rag-chat-bubble-icon", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: [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" }), jsx("path", { d: "M7 9h10v2H7zm0-3h10v2H7z" })] }));
 const CloseIcon$1 = () => (jsx("svg", { className: "rag-chat-bubble-icon", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: 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 (jsxs("button", { className: `rag-chat-bubble ${position}`, onClick: onClick, style: { backgroundColor: primaryColor }, "aria-label": isOpen ? 'Close chat' : 'Open chat', type: "button", children: [isOpen ? jsx(CloseIcon$1, {}) : jsx(ChatIcon, {}), !isOpen && unreadCount > 0 && (jsx("span", { className: "rag-chat-bubble-badge", children: unreadCount > 9 ? '9+' : unreadCount }))] }));
+    return (jsxs("button", { className: `rag-chat-bubble ${position}`, onClick: onClick, style: { backgroundColor: primaryColor }, "aria-label": isOpen ? 'Close chat' : 'Open chat', type: "button", children: [isOpen ? jsx(CloseIcon$1, {}) : jsx(ChatIcon$1, {}), !isOpen && unreadCount > 0 && (jsx("span", { className: "rag-chat-bubble-badge", children: unreadCount > 9 ? '9+' : unreadCount }))] }));
+};
+
+const HeaderSection = ({ greeting, logoUrl, }) => {
+    return (jsxs("div", { className: "rag-home-header", children: [logoUrl && (jsx("img", { src: logoUrl, alt: "Logo", className: "rag-home-logo" })), jsx("h2", { className: "rag-home-greeting", children: greeting })] }));
+};
+
+const ChatIcon = () => (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: 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 = () => (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: 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.key === ' ') {
+            e.preventDefault();
+            onStartChat();
+        }
+    };
+    return (jsxs("button", { ref: ref, type: "button", className: "rag-start-chat-card", onClick: onStartChat, onKeyDown: handleKeyDown, "aria-label": "Start new chat conversation", children: [jsx(ChatIcon, {}), jsxs("div", { className: "rag-start-chat-card__content", children: [jsx("div", { className: "rag-start-chat-card__title", children: "Start new chat" }), subtitle && (jsx("div", { className: "rag-start-chat-card__subtitle", children: subtitle }))] }), jsx(ArrowIcon, {})] }));
+});
+// Display name for debugging
+StartChatCard.displayName = 'StartChatCard';
+
+const ChevronIcon = () => (jsx("svg", { className: "rag-ticket-category__chevron", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: 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;
+    }
+    return (jsxs("div", { className: "rag-ticket-section", children: [jsx("div", { className: "rag-ticket-section__title", children: "Submit a ticket" }), jsx("div", { className: "rag-ticket-list", children: enabledCategories.map((category) => (jsxs("button", { type: "button", className: "rag-ticket-category", onClick: () => onCategoryClick(category.id), "aria-label": `Submit ${category.label} ticket`, children: [jsx("span", { className: "rag-ticket-category__icon", children: category.icon }), jsx("span", { className: "rag-ticket-category__label", children: category.label }), jsx(ChevronIcon, {})] }, category.id))) })] }));
+};
+
+const BookmarksRow = ({ bookmarks }) => {
+    if (bookmarks.length === 0) {
+        return null;
+    }
+    return (jsxs("nav", { className: "rag-bookmarks-section", role: "navigation", "aria-label": "Quick links", children: [jsx("div", { className: "rag-bookmarks-section__title", id: "bookmarks-title", children: "Bookmarks" }), jsx("div", { className: "rag-bookmarks-row", "aria-labelledby": "bookmarks-title", children: bookmarks.map((bookmark) => (jsxs("a", { href: bookmark.url, target: "_blank", rel: "noopener noreferrer", className: "rag-bookmark", "aria-label": `${bookmark.label} - opens in new tab`, children: [jsx("span", { className: "rag-bookmark__icon", "aria-hidden": "true", children: bookmark.icon }), jsx("span", { className: "rag-bookmark__label", children: bookmark.label })] }, bookmark.id))) })] }));
+};
+
+const HomeView = ({ config, onStartChat, onTicketCategoryClick, autoFocus = false, }) => {
+    const homeConfig = config.homeView;
+    const startChatRef = useRef(null);
+    // Auto-focus first interactive element when autoFocus is enabled
+    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 (jsxs("div", { className: "rag-home-view", role: "region", "aria-label": "Help Center Home", children: [jsx(HeaderSection, { greeting: greeting, logoUrl: homeConfig.logoUrl }), homeConfig.showStartChat && (jsx(StartChatCard, { ref: startChatRef, onStartChat: onStartChat, subtitle: "How can we help you?" })), homeConfig.ticketCategories && homeConfig.ticketCategories.length > 0 && (jsx(TicketCategoryList, { categories: homeConfig.ticketCategories, onCategoryClick: handleTicketCategoryClick })), homeConfig.bookmarks && homeConfig.bookmarks.length > 0 && (jsx(BookmarksRow, { bookmarks: homeConfig.bookmarks })), config.showPoweredBy && (jsxs("div", { className: "rag-home-footer", children: ["Powered by ", 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 }) => {
+    var _a, _b, _c;
+    const [isOpen, setIsOpen] = useState(false);
+    // Determine the API base URL
+    const baseUrl = apiBaseUrl || (typeof window !== 'undefined' ? window.location.origin : '');
+    const { messages, isLoading, config, error, sendMessage, retry } = useChatWidget({
+        apiKey,
+        widgetId,
+        apiBaseUrl: baseUrl,
+        onError,
+        onMessageSent,
+        onMessageReceived
+    });
+    // Merge props with fetched config (props take precedence)
+    const mergedConfig = config ? {
+        ...config,
+        position: position || config.position,
+        primaryColor: primaryColor || config.primaryColor,
+        greeting: greeting || config.greeting,
+        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
+    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 (jsxs("div", { className: "rag-chat-widget", children: [jsx(ChatBubble, { isOpen: isOpen, onClick: handleToggle, primaryColor: effectivePrimaryColor, position: effectivePosition }), jsxs("div", { className: `rag-chat-window ${effectivePosition}`, children: [jsxs("div", { className: "rag-chat-header", style: { backgroundColor: effectivePrimaryColor }, children: [jsx("h3", { className: "rag-chat-header-title", children: "Chat" }), jsx("button", { className: "rag-chat-header-close", onClick: handleClose, type: "button", "aria-label": "Close chat", children: jsx("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: 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" }) }) })] }), jsxs("div", { className: "rag-chat-error", children: [jsx("p", { className: "rag-chat-error-message", children: error.message || 'Unable to connect. Please try again.' }), jsx("button", { className: "rag-chat-error-retry", onClick: retry, type: "button", children: "Retry" })] })] })] }));
+    }
+    // Determine which view to render
+    const shouldShowHomeView = currentView === 'home' && homeViewEnabled && mergedConfig;
+    const shouldShowChatView = currentView === 'chat' || !homeViewEnabled;
+    return (jsxs("div", { className: "rag-chat-widget", children: [jsx(ChatBubble, { isOpen: isOpen, onClick: handleToggle, primaryColor: effectivePrimaryColor, position: effectivePosition }), isOpen && mergedConfig && (jsxs("div", { className: `rag-chat-window ${effectivePosition}`, style: { '--rag-primary-color': effectivePrimaryColor }, children: [jsxs("div", { className: "rag-chat-header", style: { backgroundColor: effectivePrimaryColor }, children: [jsxs("div", { className: "rag-chat-header-left", children: [canGoBack && (jsx("button", { className: "rag-chat-header-back", onClick: handleBack, type: "button", "aria-label": "Back to home", children: jsx("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { fill: "currentColor", d: "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" }) }) })), jsx("h3", { className: "rag-chat-header-title", children: mergedConfig.name || 'Chat' })] }), jsx("button", { className: "rag-chat-header-close", onClick: handleClose, "aria-label": "Close chat", type: "button", children: jsx("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: 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" }) }) })] }), jsxs("div", { className: "rag-view-container", children: [shouldShowHomeView && (jsx(HomeView, { config: mergedConfig, onStartChat: handleStartChat })), shouldShowChatView && (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 (jsxs(Fragment, { children: [jsxs("div", { className: "rag-chat-messages", children: [messages.length === 0 && (config.uspText || config.greeting) && (jsxs("div", { className: "rag-chat-greeting", children: [config.uspText && (jsx("p", { className: "rag-chat-usp-text", children: config.uspText })), config.greeting && (jsx("p", { className: "rag-chat-greeting-text", children: config.greeting }))] })), messages.map(message => (jsxs("div", { className: `rag-chat-message ${message.role}`, children: [message.isStreaming && !message.content ? (jsxs("div", { className: "rag-chat-loading", children: [jsx("div", { className: "rag-chat-loading-dot" }), jsx("div", { className: "rag-chat-loading-dot" }), jsx("div", { className: "rag-chat-loading-dot" })] })) : (jsx("p", { className: "rag-chat-message-content", children: message.content })), message.sources && message.sources.length > 0 && (jsxs("div", { className: "rag-chat-message-sources", children: [jsx("div", { className: "rag-chat-message-sources-title", children: "Sources:" }), message.sources.map((source, index) => (jsx("div", { className: "rag-chat-message-source", children: source.title }, index)))] }))] }, message.id))), jsx("div", { ref: messagesEndRef })] }), jsxs("form", { className: "rag-chat-input-container", onSubmit: handleSubmit, children: [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 }), jsx("button", { type: "submit", className: "rag-chat-send-button", disabled: !inputValue.trim() || isLoading, style: { backgroundColor: config.primaryColor }, "aria-label": "Send message", children: jsx("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" }) }) })] }), config.showPoweredBy && (jsxs("div", { className: "rag-chat-powered-by", children: ["Powered by ", jsx("a", { href: "https://rag-widget.com", target: "_blank", rel: "noopener noreferrer", children: "RAG Widget" })] }))] }));
 };
 
 const CloseIcon = () => (jsx("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: 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" }) }));
@@ -236,42 +421,9 @@ const ChatWindow = ({ isOpen, onClose, config, messages, isLoading, onSendMessag
     return (jsxs("div", { className: `rag-chat-window ${position}`, style: { '--rag-primary-color': primaryColor }, children: [jsxs("div", { className: "rag-chat-header", style: { backgroundColor: primaryColor }, children: [jsx("h3", { className: "rag-chat-header-title", children: (config === null || config === void 0 ? void 0 : config.name) || 'Chat' }), jsx("button", { className: "rag-chat-header-close", onClick: onClose, "aria-label": "Close chat", type: "button", children: jsx(CloseIcon, {}) })] }), 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)) && (jsxs("div", { className: "rag-chat-greeting", children: [(config === null || config === void 0 ? void 0 : config.uspText) && (jsx("p", { className: "rag-chat-usp-text", children: config.uspText })), (config === null || config === void 0 ? void 0 : config.greeting) && (jsx("p", { className: "rag-chat-greeting-text", children: config.greeting }))] })), messages.map(message => (jsx(MessageBubble, { message: message }, message.id))), jsx("div", { ref: messagesEndRef })] }), jsxs("form", { className: "rag-chat-input-container", onSubmit: handleSubmit, children: [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 }), jsx("button", { type: "submit", className: "rag-chat-send-button", disabled: !inputValue.trim() || isLoading, style: { backgroundColor: primaryColor }, "aria-label": "Send message", children: jsx(SendIcon, {}) })] }), (config === null || config === void 0 ? void 0 : config.showPoweredBy) && (jsxs("div", { className: "rag-chat-powered-by", children: ["Powered by ", 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] = 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({
-        apiKey,
-        widgetId,
-        apiBaseUrl: baseUrl,
-        onError,
-        onMessageSent,
-        onMessageReceived
-    });
-    // Merge props with fetched config (props take precedence)
-    const mergedConfig = config ? {
-        ...config,
-        position: position || config.position,
-        primaryColor: primaryColor || config.primaryColor,
-        greeting: greeting || config.greeting,
-        placeholder: placeholder || config.placeholder,
-        showPoweredBy: showPoweredBy !== undefined ? showPoweredBy : config.showPoweredBy
-    } : null;
-    const handleToggle = () => {
-        setIsOpen(prev => !prev);
-    };
-    const handleClose = () => {
-        setIsOpen(false);
-    };
-    // Show error state in the window if there's an error
-    if (error && isOpen) {
-        return (jsxs("div", { className: "rag-chat-widget", children: [jsx(ChatBubble, { isOpen: isOpen, onClick: handleToggle, primaryColor: primaryColor || '#007bff', position: position || 'bottom-right' }), jsxs("div", { className: `rag-chat-window ${position || 'bottom-right'}`, children: [jsxs("div", { className: "rag-chat-header", style: { backgroundColor: primaryColor || '#007bff' }, children: [jsx("h3", { className: "rag-chat-header-title", children: "Chat" }), jsx("button", { className: "rag-chat-header-close", onClick: handleClose, type: "button", children: jsx("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: 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" }) }) })] }), jsxs("div", { className: "rag-chat-error", children: [jsx("p", { className: "rag-chat-error-message", children: error.message || 'Unable to connect. Please try again.' }), jsx("button", { className: "rag-chat-error-retry", onClick: retry, type: "button", children: "Retry" })] })] })] }));
-    }
-    return (jsxs("div", { className: "rag-chat-widget", children: [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 && (jsx(ChatWindow, { isOpen: isOpen, onClose: handleClose, config: mergedConfig, messages: messages, isLoading: isLoading, onSendMessage: sendMessage }))] }));
-};
-
 const ChatWidgetContext = 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,
@@ -281,7 +433,13 @@ const ChatWidgetProvider = ({ apiKey, widgetId, apiBaseUrl = '', onError, onMess
         onMessageSent,
         onMessageReceived
     });
+    // 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 = useMemo(() => ({
+        // Chat state
         messages: chatWidget.messages,
         isLoading: chatWidget.isLoading,
         isConnected: chatWidget.isConnected,
@@ -289,8 +447,15 @@ 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 (jsx(ChatWidgetContext.Provider, { value: value, children: children }));
 };
 const useChatWidgetContext = () => {
@@ -301,5 +466,5 @@ const useChatWidgetContext = () => {
     return context;
 };
 
-export { ChatBubble, ChatWidget, ChatWidgetProvider, ChatWindow, ChatWidget as default, useChatWidget, useChatWidgetContext };
+export { BookmarksRow, ChatBubble, ChatWidget, ChatWidgetProvider, ChatWindow, HeaderSection, HomeView, StartChatCard, TicketCategoryList, ChatWidget as default, useChatWidget, useChatWidgetContext, useViewNavigation };
 //# sourceMappingURL=index.esm.js.map