@chatwidgetai/chat-widget 0.1.0 → 0.1.1

package/dist/ai-chat-widget.umd.js

@@ -44141,6 +44141,65 @@
 	 * API Client for Widget Communication
 	 * Handles all HTTP requests to the widget API
 	 */
+	class ApiError extends Error {
+	    constructor(message, status, options) {
+	        super(message);
+	        this.name = 'ApiError';
+	        this.status = status;
+	        this.details = options?.details;
+	        this.retryAfterMs = options?.retryAfterMs;
+	    }
+	}
+	function parseRetryAfter(headerValue) {
+	    if (!headerValue)
+	        return undefined;
+	    const seconds = Number(headerValue);
+	    if (!Number.isNaN(seconds) && seconds >= 0) {
+	        return seconds * 1000;
+	    }
+	    const date = Date.parse(headerValue);
+	    if (!Number.isNaN(date)) {
+	        return Math.max(0, date - Date.now());
+	    }
+	    return undefined;
+	}
+	async function buildApiError(response, defaultMessage) {
+	    let parsedBody = null;
+	    let message = defaultMessage;
+	    try {
+	        const raw = await response.text();
+	        if (raw) {
+	            try {
+	                parsedBody = JSON.parse(raw);
+	                if (typeof parsedBody === 'object' && parsedBody !== null) {
+	                    const body = parsedBody;
+	                    message = typeof body.error === 'string'
+	                        ? body.error
+	                        : typeof body.message === 'string'
+	                            ? body.message
+	                            : defaultMessage;
+	                }
+	                else {
+	                    message = raw;
+	                }
+	            }
+	            catch {
+	                message = raw;
+	            }
+	        }
+	    }
+	    catch {
+	        // ignore body parsing errors
+	    }
+	    let retryAfterMs = parseRetryAfter(response.headers.get('retry-after'));
+	    if (retryAfterMs === undefined) {
+	        retryAfterMs = parseRetryAfter(response.headers.get('x-ratelimit-reset'));
+	    }
+	    return new ApiError(message || defaultMessage, response.status, {
+	        details: parsedBody,
+	        retryAfterMs,
+	    });
+	}
 	class WidgetApiClient {
 	    constructor(config) {
 	        this.config = config;
@@ -44157,23 +44216,24 @@
 	            },
 	        });
 	        if (!response.ok) {
-	            throw new Error(`Failed to fetch config: ${response.statusText}`);
+	            throw await buildApiError(response, 'Failed to fetch config');
 	        }
 	        const json = await response.json();
 	        return json;
 	    }
 	    async getOrCreateConversation(conversationId) {
-	        const response = await fetch(`${this.config.apiUrl}/api/widget/${this.config.widgetId}/conversation/${conversationId || '0'}`, {
+	        const baseUrl = `${this.config.apiUrl}/api/widget/${this.config.widgetId}/conversation`;
+	        const query = conversationId ? `?conversationId=${encodeURIComponent(conversationId)}` : '';
+	        const response = await fetch(`${baseUrl}${query}`, {
 	            method: 'GET',
 	            headers: {
 	                'Authorization': `Bearer ${this.config.apiKey}`,
-	            }
+	            },
 	        });
 	        if (!response.ok) {
-	            const error = await response.json().catch(() => ({ error: response.statusText }));
-	            throw new Error(error.error || 'Failed to upload file');
+	            throw await buildApiError(response, 'Failed to load conversation');
 	        }
-	        return await response.json();
+	        return response.json();
 	    }
 	    /**
 	     * Upload a file
@@ -44190,8 +44250,7 @@
 	            body: formData,
 	        });
 	        if (!response.ok) {
-	            const error = await response.json().catch(() => ({ error: response.statusText }));
-	            throw new Error(error.error || 'Failed to upload file');
+	            throw await buildApiError(response, 'Failed to upload file');
 	        }
 	        const result = await response.json();
 	        return result.file;
@@ -44214,8 +44273,7 @@
 	            }),
 	        });
 	        if (!response.ok) {
-	            const error = await response.json().catch(() => ({ error: response.statusText }));
-	            throw new Error(error.error || 'Failed to send message');
+	            throw await buildApiError(response, 'Failed to send message');
 	        }
 	        return response.json();
 	    }
@@ -44237,8 +44295,7 @@
 	                }),
 	            });
 	            if (!response.ok) {
-	                const error = await response.json().catch(() => ({ error: response.statusText }));
-	                throw new Error(error.error || `Agent request failed with status ${response.status}`);
+	                throw await buildApiError(response, `Agent request failed with status ${response.status}`);
 	            }
 	            const data = await response.json();
 	            // Check if response indicates an error
@@ -44250,7 +44307,7 @@
 	        catch (error) {
 	            // Enhance error messages
 	            if (error instanceof TypeError && error.message.includes('fetch')) {
-	                throw new Error('Network error: Unable to reach the server');
+	                throw new ApiError('Network error: Unable to reach the server', 0);
 	            }
 	            throw error;
 	        }
@@ -44272,13 +44329,13 @@
 	            }),
 	        });
 	        if (!response.ok) {
-	            const errorData = await response.json().catch(() => ({ error: 'Unknown error' }));
+	            const apiError = await buildApiError(response, 'Failed to submit feedback');
 	            console.error('Feedback submission failed:', {
 	                status: response.status,
-	                error: errorData,
+	                error: apiError.details,
 	                payload: { session_id: sessionId, message_id: messageId, feedback }
 	            });
-	            throw new Error(errorData.error || 'Failed to submit feedback');
+	            throw apiError;
 	        }
 	    }
 	    /**
@@ -44386,111 +44443,70 @@
 	}
 
 	/**
-	 * Client Action Executor
-	 * Handles execution of client-side actions
-	 */
-	/**
-	 * Execute a client-side action
+	 * useChat Hook
+	 * Main state management for chat functionality
 	 */
-	async function executeClientAction(action) {
-	    try {
-	        console.log(`[ActionExecutor] Executing action: ${action.implementation}`, action.parameters);
-	        switch (action.implementation) {
-	            case 'redirect':
-	                return executeRedirect(action.parameters);
-	            case 'show_modal':
-	                return executeShowModal(action.parameters);
-	            case 'copy_to_clipboard':
-	                return executeCopyToClipboard(action.parameters);
-	            case 'open_chat':
-	                return executeOpenChat(action.parameters);
+	function deriveErrorInfo(error) {
+	    if (error instanceof ApiError) {
+	        const retryAfterSeconds = typeof error.retryAfterMs === 'number'
+	            ? Math.max(1, Math.ceil(error.retryAfterMs / 1000))
+	            : undefined;
+	        const lowerMessage = (error.message || '').toLowerCase();
+	        let message;
+	        switch (error.status) {
+	            case 429: {
+	                const isPerUser = lowerMessage.includes('user');
+	                const base = isPerUser
+	                    ? 'You have reached the per-user rate limit.'
+	                    : 'This widget has received too many requests.';
+	                if (retryAfterSeconds) {
+	                    message = `${base} Please wait ${retryAfterSeconds} second${retryAfterSeconds === 1 ? '' : 's'} before trying again.`;
+	                }
+	                else {
+	                    message = `${base} Please wait a moment and try again.`;
+	                }
+	                break;
+	            }
+	            case 401:
+	                message = 'Authentication failed. Please refresh the page or verify your API key.';
+	                break;
+	            case 403:
+	                message = 'Access to this widget is restricted. Please contact the site owner if you believe this is an error.';
+	                break;
+	            case 404:
+	                message = 'We could not find this widget. It may have been removed.';
+	                break;
 	            default:
-	                console.warn(`[ActionExecutor] Unknown action: ${action.implementation}`);
-	                return {
-	                    success: false,
-	                    error: `Unknown action type: ${action.implementation}`
-	                };
+	                if (error.status >= 500) {
+	                    message = 'The server encountered an error. Please try again shortly.';
+	                }
+	                else if (error.status > 0) {
+	                    message = error.message || 'Something went wrong. Please try again.';
+	                }
+	                else {
+	                    message = error.message || 'Unable to connect to the server. Please check your internet connection.';
+	                }
 	        }
+	        return { message, retryAfterSeconds, status: error.status };
 	    }
-	    catch (error) {
-	        console.error(`[ActionExecutor] Error executing action:`, error);
-	        return {
-	            success: false,
-	            error: error instanceof Error ? error.message : 'Unknown error'
-	        };
-	    }
-	}
-	/**
-	 * Redirect to a URL
-	 */
-	function executeRedirect(params) {
-	    const url = params.url;
-	    if (!url) {
-	        return { success: false, error: 'URL parameter is required' };
-	    }
-	    try {
-	        // Validate URL
-	        new URL(url);
-	        // Redirect
-	        window.location.href = url;
-	        return { success: true, result: { redirected_to: url } };
-	    }
-	    catch (error) {
-	        return { success: false, error: 'Invalid URL' };
-	    }
-	}
-	/**
-	 * Show a modal
-	 */
-	function executeShowModal(params) {
-	    const { title, content } = params;
-	    if (!title || !content) {
-	        return { success: false, error: 'Title and content are required' };
-	    }
-	    // Use browser's alert as a simple modal
-	    // In a real implementation, you'd use a proper modal component
-	    alert(`${title}\n\n${content}`);
-	    return { success: true, result: { shown: true } };
-	}
-	/**
-	 * Copy text to clipboard
-	 */
-	async function executeCopyToClipboard(params) {
-	    const text = params.text;
-	    if (!text) {
-	        return { success: false, error: 'Text parameter is required' };
-	    }
-	    try {
-	        await navigator.clipboard.writeText(text);
-	        return { success: true, result: { copied: text } };
-	    }
-	    catch (error) {
-	        return {
-	            success: false,
-	            error: 'Failed to copy to clipboard. Please check browser permissions.'
-	        };
-	    }
-	}
-	/**
-	 * Open chat with a specific message
-	 */
-	function executeOpenChat(params) {
-	    const message = params.message;
-	    if (!message) {
-	        return { success: false, error: 'Message parameter is required' };
+	    if (error instanceof Error) {
+	        const lower = error.message.toLowerCase();
+	        if (lower.includes('network')) {
+	            return { message: 'Unable to connect to the server. Please check your internet connection.' };
+	        }
+	        if (lower.includes('timeout')) {
+	            return { message: 'The request timed out. Please try again.' };
+	        }
+	        if (lower.includes('unauthorized') || lower.includes('401')) {
+	            return { message: 'Authentication failed. Please refresh the page or verify your API key.' };
+	        }
+	        if (lower.includes('internal server error') || lower.includes('500')) {
+	            return { message: 'The server encountered an error. Please try again shortly.' };
+	        }
+	        return { message: error.message || 'Something went wrong. Please try again.' };
 	    }
-	    // Dispatch a custom event that the chat widget can listen to
-	    const event = new CustomEvent('widget:open-chat', {
-	        detail: { message }
-	    });
-	    window.dispatchEvent(event);
-	    return { success: true, result: { message } };
+	    return { message: 'Something went wrong. Please try again.' };
 	}
-
-	/**
-	 * useChat Hook
-	 * Main state management for chat functionality
-	 */
 	function useChat(options) {
 	    const { widgetId, apiKey, apiUrl, onMessage, onError, } = options;
 	    const [state, setState] = reactExports.useState({
@@ -44502,7 +44518,6 @@
 	        conversationId: '', // Will be set after loading conversation
 	        config: null,
 	    });
-	    const [pendingAction, setPendingAction] = reactExports.useState(null);
 	    const apiClient = reactExports.useRef(new WidgetApiClient({ widgetId, apiKey, apiUrl }));
 	    // Load configuration and conversation on mount
 	    reactExports.useEffect(() => {
@@ -44527,8 +44542,9 @@
 	                }));
 	            }
 	            catch (error) {
-	                const err = error instanceof Error ? error : new Error('Failed to initialize');
-	                setState(prev => ({ ...prev, error: err.message }));
+	                const errorInfo = deriveErrorInfo(error);
+	                const err = error instanceof Error ? error : new Error(errorInfo.message);
+	                setState(prev => ({ ...prev, error: errorInfo.message }));
 	                onError?.(err);
 	            }
 	        };
@@ -44583,7 +44599,6 @@
 	            }
 	            // Determine if widget has actions (use agent endpoint)
 	            const useAgent = state.config?.behavior.agentic || (state.config?.actions && state.config.actions.length > 0);
-	            console.log(useAgent);
 	            let response;
 	            if (useAgent) {
 	                // Use agent endpoint - returns ConversationMessage[]
@@ -44652,26 +44667,9 @@
 	            }
 	        }
 	        catch (error) {
-	            const err = error instanceof Error ? error : new Error('Failed to send message');
-	            // Determine user-friendly error message
-	            let userMessage = err.message;
-	            // Handle specific error types
-	            if (err.message.includes('Network') || err.message.includes('fetch')) {
-	                userMessage = 'Unable to connect to the server. Please check your internet connection.';
-	            }
-	            else if (err.message.includes('401') || err.message.includes('Unauthorized')) {
-	                userMessage = 'Authentication failed. Please refresh the page.';
-	            }
-	            else if (err.message.includes('500') || err.message.includes('Internal Server Error')) {
-	                userMessage = 'The server encountered an error. Please try again later.';
-	            }
-	            else if (err.message.includes('timeout')) {
-	                userMessage = 'Request timed out. Please try again.';
-	            }
-	            // Use fallback message if configured, otherwise use error message
+	            const errorInfo = deriveErrorInfo(error);
+	            const err = error instanceof Error ? error : new Error(errorInfo.message);
 	            const fallbackMessage = state.config?.behavior?.fallbackMessage;
-	            const errorMessage = fallbackMessage || userMessage;
-	            // If fallback message is configured, add it as an assistant message
 	            if (fallbackMessage) {
 	                const fallbackAssistantMessage = {
 	                    id: generateMessageId(),
@@ -44687,17 +44685,16 @@
 	                    messages: [...prev.messages, fallbackAssistantMessage],
 	                    isLoading: false,
 	                    isTyping: false,
-	                    error: null,
+	                    error: errorInfo.message,
 	                }));
 	                onMessage?.(fallbackAssistantMessage);
 	            }
 	            else {
-	                // Show error message as assistant message for better UX
 	                const errorAssistantMessage = {
 	                    id: generateMessageId(),
 	                    message: {
 	                        type: 'ai',
-	                        content: `⚠️ ${errorMessage}`,
+	                        content: `⚠️ ${errorInfo.message}`,
 	                    },
 	                    timestamp: new Date().toISOString(),
 	                    sources: [],
@@ -44707,7 +44704,7 @@
 	                    messages: [...prev.messages, errorAssistantMessage],
 	                    isLoading: false,
 	                    isTyping: false,
-	                    error: errorMessage,
+	                    error: errorInfo.message,
 	                }));
 	                onMessage?.(errorAssistantMessage);
 	            }
@@ -44745,81 +44742,12 @@
 	            }));
 	        }
 	        catch (error) {
-	            const err = error instanceof Error ? error : new Error('Failed to submit feedback');
+	            const errorInfo = deriveErrorInfo(error);
+	            const err = error instanceof Error ? error : new Error(errorInfo.message);
+	            setState(prev => ({ ...prev, error: errorInfo.message }));
 	            onError?.(err);
 	        }
 	    }, [state.conversationId, onError]);
-	    /**
-	     * Approve and execute pending action
-	     */
-	    const approveAction = reactExports.useCallback(async () => {
-	        if (!pendingAction)
-	            return;
-	        setState(prev => ({ ...prev, isLoading: true, isTyping: true }));
-	        try {
-	            // Execute the client action
-	            const actionResult = await executeClientAction(pendingAction.action);
-	            // Update the pending action message to show execution result
-	            const executionMessage = actionResult.success
-	                ? `✓ Action executed successfully`
-	                : `✗ Action failed: ${actionResult.error}`;
-	            setState(prev => ({
-	                ...prev,
-	                messages: prev.messages.map(msg => msg.id === pendingAction.messageId
-	                    ? { ...msg, message: { ...msg.message, content: `${msg.message.content}\n\n${executionMessage}` } }
-	                    : msg),
-	            }));
-	            // Clear pending action
-	            setPendingAction(null);
-	            // TODO: Implement continueAgent in API client if actions are needed
-	            // For now, just show success message
-	            const assistantMessage = {
-	                id: generateMessageId(),
-	                message: {
-	                    type: 'ai',
-	                    content: 'Action completed successfully.',
-	                },
-	                timestamp: new Date().toISOString(),
-	                sources: [],
-	            };
-	            setState(prev => ({
-	                ...prev,
-	                messages: [...prev.messages, assistantMessage],
-	                isLoading: false,
-	                isTyping: false,
-	            }));
-	            onMessage?.(assistantMessage);
-	        }
-	        catch (error) {
-	            const err = error instanceof Error ? error : new Error('Failed to execute action');
-	            setState(prev => ({
-	                ...prev,
-	                isLoading: false,
-	                isTyping: false,
-	                error: err.message,
-	                messages: prev.messages.map(msg => msg.id === pendingAction.messageId
-	                    ? { ...msg, message: { ...msg.message, content: `${msg.message.content}\n\n✗ Failed to execute action` } }
-	                    : msg),
-	            }));
-	            setPendingAction(null);
-	            onError?.(err);
-	        }
-	    }, [pendingAction, state.conversationId, onMessage, onError]);
-	    /**
-	     * Reject pending action
-	     */
-	    const rejectAction = reactExports.useCallback(() => {
-	        if (!pendingAction)
-	            return;
-	        // Update message to show rejection
-	        setState(prev => ({
-	            ...prev,
-	            messages: prev.messages.map(msg => msg.id === pendingAction.messageId
-	                ? { ...msg, message: { ...msg.message, content: `${msg.message.content}\n\n✗ Action cancelled by user` } }
-	                : msg),
-	        }));
-	        setPendingAction(null);
-	    }, [pendingAction]);
 	    return {
 	        messages: state.messages,
 	        isLoading: state.isLoading,
@@ -44827,10 +44755,7 @@
 	        error: state.error,
 	        config: state.config,
 	        conversationId: state.conversationId,
-	        pendingAction,
 	        sendMessage,
-	        approveAction,
-	        rejectAction,
 	        clearMessages,
 	        submitFeedback,
 	    };
@@ -65741,7 +65666,7 @@
 
 	const ChatWidget = ({ widgetId, apiKey, apiUrl = window.location.origin, position = 'bottom-right', theme: themeOverride, primaryColor, onOpen, onClose, onMessage, onError, }) => {
 	    const [isOpen, setIsOpen] = reactExports.useState(false);
-	    const { messages, isLoading, isTyping, error, config, sendMessage, approveAction, rejectAction, submitFeedback, } = useChat({
+	    const { messages, isLoading, isTyping, error, config, sendMessage, submitFeedback, } = useChat({
 	        widgetId,
 	        apiKey,
 	        apiUrl,
@@ -65791,7 +65716,7 @@
 	    const handleFeedback = async (messageId, feedback) => {
 	        await submitFeedback(messageId, feedback);
 	    };
-	    return (jsxRuntimeExports.jsx("div", { className: `ai-chat-widget ${effectiveTheme}`, style: customStyles, children: jsxRuntimeExports.jsx("div", { className: `ai-chat-widget-container ${effectivePosition}`, children: isOpen ? (jsxRuntimeExports.jsx(ChatWindow, { messages: messages, isLoading: isLoading, isTyping: isTyping, error: error, config: config, onSendMessage: sendMessage, onApproveAction: approveAction, onRejectAction: rejectAction, onClose: handleToggle, onFeedback: handleFeedback })) : (jsxRuntimeExports.jsx("button", { className: "ai-chat-button", onClick: handleToggle, "aria-label": "Open chat", style: {
+	    return (jsxRuntimeExports.jsx("div", { className: `ai-chat-widget ${effectiveTheme}`, style: customStyles, children: jsxRuntimeExports.jsx("div", { className: `ai-chat-widget-container ${effectivePosition}`, children: isOpen ? (jsxRuntimeExports.jsx(ChatWindow, { messages: messages, isLoading: isLoading, isTyping: isTyping, error: error, config: config, onSendMessage: sendMessage, onClose: handleToggle, onFeedback: handleFeedback })) : (jsxRuntimeExports.jsx("button", { className: "ai-chat-button", onClick: handleToggle, "aria-label": "Open chat", style: {
 	                    width: config?.appearance.buttonSize || 60,
 	                    height: config?.appearance.buttonSize || 60,
 	                }, children: config?.appearance.buttonIcon ? (jsxRuntimeExports.jsx("span", { className: "ai-chat-button-icon", children: config.appearance.buttonIcon })) : (jsxRuntimeExports.jsx("svg", { className: "ai-chat-button-svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsxRuntimeExports.jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) })) })) }) }));