@courseecho/ai-widget-react 1.0.27 → 1.0.28

package/dist/components.js

@@ -134,6 +134,19 @@ const DEFAULT_SUGGESTIONS = [
     { id: 'd5', text: 'What are the pricing options?', icon: '', category: 'Billing', description: 'Plans and pricing' },
     { id: 'd6', text: 'Contact support team', icon: '', category: 'Support', description: 'Talk to a human' },
 ];
+function humanizeError(raw) {
+    if (/401|unauthorized/i.test(raw))
+        return '⚠️ Authentication failed. Please check your API key or token.';
+    if (/403|forbidden/i.test(raw))
+        return '⚠️ Access denied. You don\'t have permission to use this service.';
+    if (/429|rate.?limit/i.test(raw))
+        return '⚠️ Too many requests. Please wait a moment and try again.';
+    if (/5\d\d|server|internal/i.test(raw))
+        return '⚠️ The AI service is temporarily unavailable. Please try again shortly.';
+    if (/network|fetch|failed to fetch/i.test(raw))
+        return '⚠️ Network error. Please check your connection.';
+    return `⚠️ ${raw}`;
+}
 export const AiChatWidget = ({ config, apiKey, jwtToken, title = 'AI Assistant', subtitle = 'Online  Ready to help', placeholder = 'Type a message', poweredBy, poweredByUrl = 'https://courseecho.com', onError, onMessageReceived, className, defaultMinimized = false, expandedHeight = '580px', }) => {
     const [mergedConfig] = useState(() => {
         const auto = autoDetectPageContext();
@@ -146,6 +159,7 @@ export const AiChatWidget = ({ config, apiKey, jwtToken, title = 'AI Assistant',
     const [filteredSugs, setFilteredSugs] = useState([]);
     const [activeIdx, setActiveIdx] = useState(-1);
     const [chipsVisible, setChipsVisible] = useState(true);
+    const [dismissedError, setDismissedError] = useState(null);
     const messagesEndRef = useRef(null);
     const inputRef = useRef(null);
     const allSugs = (suggestions && suggestions.length > 0) ? suggestions : DEFAULT_SUGGESTIONS;
@@ -162,6 +176,9 @@ export const AiChatWidget = ({ config, apiKey, jwtToken, title = 'AI Assistant',
     }, [messages, onMessageReceived]);
     useEffect(() => { if (error && onError)
         onError(error); }, [error, onError]);
+    // Reset dismissed state when a new different error arrives
+    useEffect(() => { if (error !== dismissedError)
+        setDismissedError(null); }, [error]); // eslint-disable-line react-hooks/exhaustive-deps
     const filterSugs = (q) => {
         const lq = q.toLowerCase();
         const filtered = q.trim()
@@ -221,6 +238,6 @@ export const AiChatWidget = ({ config, apiKey, jwtToken, title = 'AI Assistant',
                             const isUser = msg.role === 'user';
                             const time = new Date(msg.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
                             return (_jsxs("div", { className: `aiwg-msg ${isUser ? 'aiwg-msg--user' : 'aiwg-msg--bot'}`, children: [_jsx("div", { className: "aiwg-msg-avatar", children: isUser ? '👤' : '🤖' }), _jsxs("div", { className: "aiwg-msg-body", children: [_jsx("div", { className: "aiwg-msg-bubble", children: isUser ? msg.content : renderMarkdown(msg.content) }), _jsx("div", { className: "aiwg-msg-time", children: time })] })] }, msg.id));
-                        }), isLoading && (_jsxs("div", { className: "aiwg-msg aiwg-msg--bot", children: [_jsx("div", { className: "aiwg-msg-avatar", children: "\uD83E\uDD16" }), _jsx("div", { className: "aiwg-msg-body", children: _jsx("div", { className: "aiwg-msg-bubble aiwg-typing", children: _jsxs("div", { className: "aiwg-typing-dots", children: [_jsx("span", {}), _jsx("span", {}), _jsx("span", {})] }) }) })] })), error && _jsxs("div", { className: "aiwg-error", style: { display: 'block' }, children: [" ", error] }), _jsx("div", { ref: messagesEndRef })] }), chipsVisible && messages.length === 0 && (_jsx("div", { className: "aiwg-chip-row", children: allSugs.slice(0, 4).map(s => (_jsxs("button", { className: "aiwg-chip", onClick: () => selectSuggestion(s.text), children: [s.icon, " ", s.text] }, s.id))) })), _jsxs("div", { className: "aiwg-input-area", children: [showSuggestions && filteredSugs.length > 0 && (_jsxs("div", { className: "aiwg-suggestions", children: [_jsx("div", { className: "aiwg-suggestions-header", children: "Suggestions" }), _jsx("div", { className: "aiwg-suggestions-list", children: filteredSugs.map((s, i) => (_jsxs("div", { className: `aiwg-suggestion-item${i === activeIdx ? ' aiwg-active' : ''}`, onMouseEnter: () => setActiveIdx(i), onClick: () => selectSuggestion(s.text), children: [s.icon && _jsx("span", { className: "aiwg-suggestion-icon", children: s.icon }), _jsxs("div", { className: "aiwg-suggestion-main", children: [_jsx("div", { className: "aiwg-suggestion-text", children: s.text }), s.description && _jsx("div", { className: "aiwg-suggestion-desc", children: s.description })] }), s.category && _jsx("span", { className: "aiwg-suggestion-badge", children: s.category })] }, s.id))) }), _jsxs("div", { className: "aiwg-kbd-hint", children: [_jsxs("span", { children: [_jsx("kbd", {}), " navigate"] }), _jsxs("span", { children: [_jsx("kbd", {}), " select"] }), _jsxs("span", { children: [_jsx("kbd", { children: "Esc" }), " close"] })] })] })), _jsxs("div", { className: "aiwg-input-row", children: [_jsx("textarea", { ref: inputRef, className: "aiwg-input", placeholder: placeholder, value: userInput, rows: 1, onChange: handleInputChange, onFocus: () => filterSugs(userInput), onKeyDown: handleKeyDown, disabled: isLoading, "aria-label": "Chat message input" }), _jsx("button", { className: "aiwg-send-btn", type: "button", disabled: isLoading || !userInput.trim(), onClick: () => doSend(userInput), "aria-label": "Send", children: _jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("line", { x1: "22", y1: "2", x2: "11", y2: "13" }), _jsx("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })] }) })] })] }), _jsxs("div", { className: "aiwg-powered", children: ["Powered by", ' ', _jsx("a", { href: poweredByUrl, target: "_blank", rel: "noopener noreferrer", children: poweredByLabel })] })] }) }));
+                        }), isLoading && (_jsxs("div", { className: "aiwg-msg aiwg-msg--bot", children: [_jsx("div", { className: "aiwg-msg-avatar", children: "\uD83E\uDD16" }), _jsx("div", { className: "aiwg-msg-body", children: _jsx("div", { className: "aiwg-msg-bubble aiwg-typing", children: _jsxs("div", { className: "aiwg-typing-dots", children: [_jsx("span", {}), _jsx("span", {}), _jsx("span", {})] }) }) })] })), error && error !== dismissedError && (_jsxs("div", { className: "aiwg-error", style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, children: [_jsx("span", { children: humanizeError(error) }), _jsx("button", { onClick: () => setDismissedError(error), style: { background: 'none', border: 'none', color: 'inherit', cursor: 'pointer', fontSize: '16px', lineHeight: 1, padding: '0 0 0 8px' }, "aria-label": "Dismiss", children: "\u2715" })] })), _jsx("div", { ref: messagesEndRef })] }), chipsVisible && messages.length === 0 && (_jsx("div", { className: "aiwg-chip-row", children: allSugs.slice(0, 4).map(s => (_jsxs("button", { className: "aiwg-chip", onClick: () => selectSuggestion(s.text), children: [s.icon, " ", s.text] }, s.id))) })), _jsxs("div", { className: "aiwg-input-area", children: [showSuggestions && filteredSugs.length > 0 && (_jsxs("div", { className: "aiwg-suggestions", children: [_jsx("div", { className: "aiwg-suggestions-header", children: "Suggestions" }), _jsx("div", { className: "aiwg-suggestions-list", children: filteredSugs.map((s, i) => (_jsxs("div", { className: `aiwg-suggestion-item${i === activeIdx ? ' aiwg-active' : ''}`, onMouseEnter: () => setActiveIdx(i), onClick: () => selectSuggestion(s.text), children: [s.icon && _jsx("span", { className: "aiwg-suggestion-icon", children: s.icon }), _jsxs("div", { className: "aiwg-suggestion-main", children: [_jsx("div", { className: "aiwg-suggestion-text", children: s.text }), s.description && _jsx("div", { className: "aiwg-suggestion-desc", children: s.description })] }), s.category && _jsx("span", { className: "aiwg-suggestion-badge", children: s.category })] }, s.id))) }), _jsxs("div", { className: "aiwg-kbd-hint", children: [_jsxs("span", { children: [_jsx("kbd", {}), " navigate"] }), _jsxs("span", { children: [_jsx("kbd", {}), " select"] }), _jsxs("span", { children: [_jsx("kbd", { children: "Esc" }), " close"] })] })] })), _jsxs("div", { className: "aiwg-input-row", children: [_jsx("textarea", { ref: inputRef, className: "aiwg-input", placeholder: placeholder, value: userInput, rows: 1, onChange: handleInputChange, onFocus: () => filterSugs(userInput), onKeyDown: handleKeyDown, disabled: isLoading, "aria-label": "Chat message input" }), _jsx("button", { className: "aiwg-send-btn", type: "button", disabled: isLoading || !userInput.trim(), onClick: () => doSend(userInput), "aria-label": "Send", children: _jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("line", { x1: "22", y1: "2", x2: "11", y2: "13" }), _jsx("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })] }) })] })] }), _jsxs("div", { className: "aiwg-powered", children: ["Powered by", ' ', _jsx("a", { href: poweredByUrl, target: "_blank", rel: "noopener noreferrer", children: poweredByLabel })] })] }) }));
 };
 export default AiChatWidget;

package/dist/hooks.d.ts

@@ -11,7 +11,7 @@ import { AiWidgetSDK, AiContextConfig, AiMessage, AiContext, AiSuggestion } from
  */
 export declare function useAiChat(config: AiContextConfig, jwtToken?: string): {
     sdk: AiWidgetSDK;
-    sendQuery: (query: string) => Promise<AiMessage>;
+    sendQuery: (query: string) => Promise<AiMessage | undefined>;
     setJwt: (token: string) => void;
     checkHealth: () => Promise<boolean>;
     exportChats: (format?: "json" | "csv") => string;
@@ -54,7 +54,7 @@ export declare function useAiWidget(config: AiContextConfig, jwtToken?: string):
     isLoading: boolean;
     error: string | null;
     context: AiContext;
-    sendQuery: (query: string) => Promise<AiMessage>;
+    sendQuery: (query: string) => Promise<AiMessage | undefined>;
     updateContext: (newContext: Partial<AiContext>) => void;
     updateContextProperty: (key: string, value: any) => void;
     initialized: boolean;

package/dist/hooks.js

@@ -40,15 +40,18 @@ export function useAiChat(config, jwtToken) {
     }, [jwtToken]);
     const sdk = sdkRef.current;
     const sendQuery = useCallback(async (query) => {
-        if (!sdk)
-            throw new Error('SDK not initialized');
+        if (!sdk) {
+            setError('SDK not initialized');
+            return;
+        }
         try {
             setError(null);
             return await sdk.sendQuery(query);
         }
         catch (err) {
             setError(String(err));
-            throw err;
+            // Do NOT re-throw — error is captured in state and shown in the UI.
+            // Re-throwing would cause an unhandled promise rejection that crashes the app.
         }
     }, [sdk]);
     const setJwt = useCallback((token) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@courseecho/ai-widget-react",
-  "version": "1.0.27",
+  "version": "1.0.28",
   "description": "React AI chat widget component for CourseEcho.",
   "license": "MIT",
   "author": "CourseEcho",