@chatwidgetai/chat-widget 0.1.0 → 0.1.1

package/dist/index.js

@@ -7,6 +7,65 @@ var react = require('react');
  * 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;
@@ -23,23 +82,24 @@ class WidgetApiClient {
             },
         });
         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
@@ -56,8 +116,7 @@ class WidgetApiClient {
             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;
@@ -80,8 +139,7 @@ class WidgetApiClient {
             }),
         });
         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();
     }
@@ -103,8 +161,7 @@ class WidgetApiClient {
                 }),
             });
             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
@@ -116,7 +173,7 @@ class WidgetApiClient {
         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;
         }
@@ -138,13 +195,13 @@ class WidgetApiClient {
             }),
         });
         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;
         }
     }
     /**
@@ -252,111 +309,70 @@ function isStorageAvailable() {
 }
 
 /**
- * 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] = react.useState({
@@ -368,7 +384,6 @@ function useChat(options) {
         conversationId: '', // Will be set after loading conversation
         config: null,
     });
-    const [pendingAction, setPendingAction] = react.useState(null);
     const apiClient = react.useRef(new WidgetApiClient({ widgetId, apiKey, apiUrl }));
     // Load configuration and conversation on mount
     react.useEffect(() => {
@@ -393,8 +408,9 @@ function useChat(options) {
                 }));
             }
             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);
             }
         };
@@ -449,7 +465,6 @@ function useChat(options) {
             }
             // 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[]
@@ -518,26 +533,9 @@ function useChat(options) {
             }
         }
         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(),
@@ -553,17 +551,16 @@ function useChat(options) {
                     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: [],
@@ -573,7 +570,7 @@ function useChat(options) {
                     messages: [...prev.messages, errorAssistantMessage],
                     isLoading: false,
                     isTyping: false,
-                    error: errorMessage,
+                    error: errorInfo.message,
                 }));
                 onMessage?.(errorAssistantMessage);
             }
@@ -611,81 +608,12 @@ function useChat(options) {
             }));
         }
         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 = react.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 = react.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,
@@ -693,10 +621,7 @@ function useChat(options) {
         error: state.error,
         config: state.config,
         conversationId: state.conversationId,
-        pendingAction,
         sendMessage,
-        approveAction,
-        rejectAction,
         clearMessages,
         submitFeedback,
     };
@@ -21611,7 +21536,7 @@ styleInject(css_248z);
 
 const ChatWidget = ({ widgetId, apiKey, apiUrl = window.location.origin, position = 'bottom-right', theme: themeOverride, primaryColor, onOpen, onClose, onMessage, onError, }) => {
     const [isOpen, setIsOpen] = react.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,
@@ -21661,12 +21586,13 @@ const ChatWidget = ({ widgetId, apiKey, apiUrl = window.location.origin, positio
     const handleFeedback = async (messageId, feedback) => {
         await submitFeedback(messageId, feedback);
     };
-    return (jsxRuntime.jsx("div", { className: `ai-chat-widget ${effectiveTheme}`, style: customStyles, children: jsxRuntime.jsx("div", { className: `ai-chat-widget-container ${effectivePosition}`, children: isOpen ? (jsxRuntime.jsx(ChatWindow, { messages: messages, isLoading: isLoading, isTyping: isTyping, error: error, config: config, onSendMessage: sendMessage, onApproveAction: approveAction, onRejectAction: rejectAction, onClose: handleToggle, onFeedback: handleFeedback })) : (jsxRuntime.jsx("button", { className: "ai-chat-button", onClick: handleToggle, "aria-label": "Open chat", style: {
+    return (jsxRuntime.jsx("div", { className: `ai-chat-widget ${effectiveTheme}`, style: customStyles, children: jsxRuntime.jsx("div", { className: `ai-chat-widget-container ${effectivePosition}`, children: isOpen ? (jsxRuntime.jsx(ChatWindow, { messages: messages, isLoading: isLoading, isTyping: isTyping, error: error, config: config, onSendMessage: sendMessage, onClose: handleToggle, onFeedback: handleFeedback })) : (jsxRuntime.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 ? (jsxRuntime.jsx("span", { className: "ai-chat-button-icon", children: config.appearance.buttonIcon })) : (jsxRuntime.jsx("svg", { className: "ai-chat-button-svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsxRuntime.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" }) })) })) }) }));
 };
 
+exports.ApiError = ApiError;
 exports.ChatWidget = ChatWidget;
 exports.useChat = useChat;
 //# sourceMappingURL=index.js.map