@courseecho/ai-widget-react 1.0.24 → 1.0.25

package/dist/react/src/components.js

@@ -1,226 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * AI Chat Widget - React Component  (Modern Redesign)
- * Usage: <AiChatWidget config={...} apiKey="..." />
- */
-import { useRef, useEffect, useState, useCallback } from 'react';
-import { useAiWidget } from './hooks';
-import { ShadowWrapper } from './ShadowWrapper';
-// Chat sound — Web Audio API (no external files)
-function playSound(type) {
-    try {
-        const AudioCtx = window.AudioContext || window.webkitAudioContext;
-        if (!AudioCtx)
-            return;
-        const ctx = new AudioCtx();
-        if (type === 'send') {
-            const osc = ctx.createOscillator();
-            const gain = ctx.createGain();
-            osc.connect(gain);
-            gain.connect(ctx.destination);
-            osc.type = 'sine';
-            osc.frequency.setValueAtTime(880, ctx.currentTime);
-            osc.frequency.exponentialRampToValueAtTime(440, ctx.currentTime + 0.08);
-            gain.gain.setValueAtTime(0.18, ctx.currentTime);
-            gain.gain.exponentialRampToValueAtTime(0.0001, ctx.currentTime + 0.12);
-            osc.start(ctx.currentTime);
-            osc.stop(ctx.currentTime + 0.12);
-            osc.onended = () => ctx.close();
-        }
-        else {
-            const playTone = (freq, startTime, duration) => {
-                const osc = ctx.createOscillator();
-                const gain = ctx.createGain();
-                osc.connect(gain);
-                gain.connect(ctx.destination);
-                osc.type = 'sine';
-                osc.frequency.setValueAtTime(freq, startTime);
-                gain.gain.setValueAtTime(0.0001, startTime);
-                gain.gain.linearRampToValueAtTime(0.22, startTime + 0.02);
-                gain.gain.exponentialRampToValueAtTime(0.0001, startTime + duration);
-                osc.start(startTime);
-                osc.stop(startTime + duration);
-            };
-            playTone(880, ctx.currentTime, 0.18);
-            playTone(1100, ctx.currentTime + 0.13, 0.22);
-            setTimeout(() => ctx.close(), 500);
-        }
-    }
-    catch (_) { /* silently ignore audio errors */ }
-}
-// Lightweight markdown renderer (no external deps)
-function renderMarkdown(text) {
-    const lines = text.split('\n');
-    const nodes = [];
-    let olItems = [];
-    let ulItems = [];
-    let key = 0;
-    const inlineFormat = (s) => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
-        .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
-        .replace(/\*(.+?)\*/g, '<em>$1</em>')
-        .replace(/`(.+?)`/g, '<code>$1</code>');
-    const flushLists = () => {
-        if (olItems.length) {
-            nodes.push(_jsx("ol", { children: olItems.map((t, i) => _jsx("li", { dangerouslySetInnerHTML: { __html: inlineFormat(t) } }, i)) }, key++));
-            olItems = [];
-        }
-        if (ulItems.length) {
-            nodes.push(_jsx("ul", { children: ulItems.map((t, i) => _jsx("li", { dangerouslySetInnerHTML: { __html: inlineFormat(t) } }, i)) }, key++));
-            ulItems = [];
-        }
-    };
-    lines.forEach((line) => {
-        const olMatch = line.match(/^\d+\.\s+(.*)/);
-        const ulMatch = line.match(/^[-*]\s+(.*)/);
-        const h3Match = line.match(/^###\s+(.*)/);
-        const h2Match = line.match(/^##\s+(.*)/);
-        if (h3Match || h2Match) {
-            flushLists();
-            const content = (h3Match || h2Match)[1];
-            nodes.push(h3Match
-                ? _jsx("h4", { dangerouslySetInnerHTML: { __html: inlineFormat(content) } }, key++)
-                : _jsx("h3", { dangerouslySetInnerHTML: { __html: inlineFormat(content) } }, key++));
-        }
-        else if (olMatch) {
-            if (ulItems.length)
-                flushLists();
-            olItems.push(olMatch[1]);
-        }
-        else if (ulMatch) {
-            if (olItems.length)
-                flushLists();
-            ulItems.push(ulMatch[1]);
-        }
-        else if (line.trim() === '') {
-            flushLists();
-            nodes.push(_jsx("br", {}, key++));
-        }
-        else {
-            flushLists();
-            nodes.push(_jsx("p", { dangerouslySetInnerHTML: { __html: inlineFormat(line) } }, key++));
-        }
-    });
-    flushLists();
-    return nodes;
-}
-function autoDetectPageContext() {
-    if (typeof document === 'undefined')
-        return {};
-    const get = (attr) => document.querySelector(`[data-${attr}]`)?.getAttribute(`data-${attr}`) ||
-        document.querySelector(`meta[name="${attr}"]`)?.getAttribute('content') || null;
-    let pageType = get('page-type') || get('pagetype');
-    let entityId = get('entity-id') || get('entityid');
-    if (!pageType) {
-        const seg = window.location.pathname.replace(/\/+$/, '').split('/').filter(Boolean);
-        const known = { course: 'course', courses: 'course', lesson: 'lesson', blog: 'blog', product: 'product', checkout: 'checkout', dashboard: 'dashboard', docs: 'documentation', doc: 'documentation' };
-        for (const s of seg) {
-            if (known[s]) {
-                pageType = known[s];
-                break;
-            }
-        }
-    }
-    if (!entityId) {
-        const p = new URLSearchParams(window.location.search);
-        entityId = p.get('id') || p.get('courseId') || p.get('productId') || null;
-    }
-    return { pageType: pageType || undefined, entityId: entityId || undefined };
-}
-const DEFAULT_SUGGESTIONS = [
-    { id: 'd1', text: 'What can you do for me?', icon: '', category: 'Getting started', description: 'Learn about my capabilities' },
-    { id: 'd2', text: 'How do I get started?', icon: '', category: 'Getting started', description: 'Quick onboarding guide' },
-    { id: 'd3', text: 'Show me the documentation', icon: '', category: 'Resources', description: 'Browse guides' },
-    { id: 'd4', text: 'I need help with a problem', icon: '', category: 'Support', description: 'Troubleshoot an issue' },
-    { 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' },
-];
-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();
-        return { ...config, context: { ...auto, ...config.context } };
-    });
-    const { messages, isLoading, error, sendQuery, initialized, suggestions } = useAiWidget(mergedConfig, jwtToken);
-    const [isMinimized, setIsMinimized] = useState(defaultMinimized);
-    const [userInput, setUserInput] = useState('');
-    const [showSuggestions, setShowSuggestions] = useState(false);
-    const [filteredSugs, setFilteredSugs] = useState([]);
-    const [activeIdx, setActiveIdx] = useState(-1);
-    const [chipsVisible, setChipsVisible] = useState(true);
-    const messagesEndRef = useRef(null);
-    const inputRef = useRef(null);
-    const allSugs = (suggestions && suggestions.length > 0) ? suggestions : DEFAULT_SUGGESTIONS;
-    useEffect(() => { messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' }); }, [messages]);
-    useEffect(() => {
-        if (messages.length > 0) {
-            const last = messages[messages.length - 1];
-            if (last.role === 'assistant') {
-                playSound('receive');
-                if (onMessageReceived)
-                    onMessageReceived(last);
-            }
-        }
-    }, [messages, onMessageReceived]);
-    useEffect(() => { if (error && onError)
-        onError(error); }, [error, onError]);
-    const filterSugs = (q) => {
-        const lq = q.toLowerCase();
-        const filtered = q.trim()
-            ? allSugs.filter(s => s.text.toLowerCase().includes(lq) || s.category?.toLowerCase().includes(lq) || s.description?.toLowerCase().includes(lq))
-            : allSugs;
-        setFilteredSugs(filtered.slice(0, 6));
-        setShowSuggestions(true);
-        setActiveIdx(-1);
-    };
-    const doSend = useCallback(async (text) => {
-        if (!text.trim() || isLoading)
-            return;
-        setUserInput('');
-        setShowSuggestions(false);
-        setChipsVisible(false);
-        if (inputRef.current)
-            inputRef.current.style.height = 'auto';
-        playSound('send');
-        await sendQuery(text);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isLoading, sendQuery]);
-    const selectSuggestion = (text) => doSend(text);
-    const handleInputChange = (e) => {
-        const val = e.target.value;
-        setUserInput(val);
-        const el = e.target;
-        el.style.height = 'auto';
-        el.style.height = Math.min(el.scrollHeight, 120) + 'px';
-        filterSugs(val);
-    };
-    const handleKeyDown = (e) => {
-        if (e.key === 'ArrowDown') {
-            e.preventDefault();
-            setActiveIdx(i => Math.min(i + 1, filteredSugs.length - 1));
-        }
-        else if (e.key === 'ArrowUp') {
-            e.preventDefault();
-            setActiveIdx(i => Math.max(i - 1, 0));
-        }
-        else if (e.key === 'Enter' && !e.shiftKey) {
-            e.preventDefault();
-            if (showSuggestions && activeIdx >= 0)
-                selectSuggestion(filteredSugs[activeIdx].text);
-            else
-                doSend(userInput);
-        }
-        else if (e.key === 'Escape') {
-            setShowSuggestions(false);
-        }
-    };
-    if (!initialized)
-        return _jsx(ShadowWrapper, { children: _jsx("div", { className: "aiwg-root", style: { padding: 20, textAlign: 'center' }, children: "Initializing" }) });
-    const themeClass = mergedConfig.theme === 'dark' ? 'aiwg-dark' : '';
-    const minimizedClass = isMinimized ? 'aiwg-minimized' : '';
-    const poweredByLabel = poweredBy || 'CourseEcho.com';
-    return (_jsx(ShadowWrapper, { children: _jsxs("div", { className: `aiwg-root ${themeClass} ${minimizedClass} ${className || ''}`, style: { height: isMinimized ? '72px' : expandedHeight }, children: [_jsxs("div", { className: "aiwg-header", onClick: () => isMinimized && setIsMinimized(false), children: [_jsx("div", { className: "aiwg-avatar" }), _jsxs("div", { className: "aiwg-header-info", children: [_jsx("div", { className: "aiwg-title", children: title }), _jsxs("div", { className: "aiwg-subtitle", children: [_jsx("span", { className: "aiwg-online-dot" }), subtitle] })] }), _jsx("button", { className: "aiwg-minimize-btn", "aria-label": "Minimize", onClick: (e) => { e.stopPropagation(); setIsMinimized(true); }, children: "\u2715" })] }), _jsxs("div", { className: "aiwg-messages", children: [messages.length === 0 && (_jsxs("div", { className: "aiwg-welcome", children: [_jsx("div", { className: "aiwg-welcome-icon" }), _jsx("h4", { children: "Hi there! I'm your AI assistant." }), _jsx("p", { children: "Ask me anything or pick a suggestion below." })] })), messages.map((msg) => {
-                            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" }), _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 })] })] }) }));
-};
-export default AiChatWidget;

package/dist/react/src/hooks.d.ts

@@ -1,64 +0,0 @@
-/**
- * AI Widget React - Custom Hooks
- * useAiChat, useAiContext, useAiMessages
- */
-import { AiWidgetSDK, AiContextConfig, AiMessage, AiContext, AiSuggestion } from '@courseecho/ai-core-sdk';
-/**
- * Hook to initialize and use the AI SDK
- * @param config Configuration for the SDK
- * @param jwtToken Optional JWT token for authentication
- * @returns SDK instance and utility functions
- */
-export declare function useAiChat(config: AiContextConfig, jwtToken?: string): {
-    sdk: AiWidgetSDK;
-    sendQuery: (query: string) => Promise<AiMessage>;
-    setJwt: (token: string) => void;
-    checkHealth: () => Promise<boolean>;
-    exportChats: (format?: "json" | "csv") => string;
-    initialized: boolean;
-    error: string | null;
-};
-/**
- * Hook to subscribe to messages
- */
-export declare function useAiMessages(sdk: AiWidgetSDK): AiMessage[];
-/**
- * Hook to subscribe to loading state
- */
-export declare function useAiLoading(sdk: AiWidgetSDK): boolean;
-/**
- * Hook to subscribe to error state
- */
-export declare function useAiError(sdk: AiWidgetSDK): string | null;
-/**
- * Hook to manage context
- */
-export declare function useAiContext(sdk: AiWidgetSDK): {
-    context: AiContext;
-    updateContext: (newContext: Partial<AiContext>) => void;
-    updateContextProperty: (key: string, value: any) => void;
-};
-/**
- * Hook to subscribe to suggestions
- */
-export declare function useAiSuggestions(sdk: AiWidgetSDK): {
-    suggestions: AiSuggestion[];
-    filterSuggestions: (query: string) => AiSuggestion[];
-};
-/**
- * Combined hook for common use cases
- */
-export declare function useAiWidget(config: AiContextConfig, jwtToken?: string): {
-    sdk: AiWidgetSDK;
-    messages: AiMessage[];
-    isLoading: boolean;
-    error: string | null;
-    context: AiContext;
-    sendQuery: (query: string) => Promise<AiMessage>;
-    updateContext: (newContext: Partial<AiContext>) => void;
-    updateContextProperty: (key: string, value: any) => void;
-    initialized: boolean;
-    initError: string | null;
-    suggestions: AiSuggestion[];
-    filterSuggestions: (query: string) => AiSuggestion[];
-};

package/dist/react/src/hooks.js

@@ -1,181 +0,0 @@
-/**
- * AI Widget React - Custom Hooks
- * useAiChat, useAiContext, useAiMessages
- */
-import { useEffect, useState, useRef, useCallback } from 'react';
-import { AiWidgetSDK, } from '@courseecho/ai-core-sdk';
-/**
- * Hook to initialize and use the AI SDK
- * @param config Configuration for the SDK
- * @param jwtToken Optional JWT token for authentication
- * @returns SDK instance and utility functions
- */
-export function useAiChat(config, jwtToken) {
-    // Initialize synchronously on first render so the SDK is never null.
-    const sdkRef = useRef(null);
-    if (sdkRef.current === null) {
-        sdkRef.current = new AiWidgetSDK(config);
-    }
-    const [initialized, setInitialized] = useState(false);
-    const [error, setError] = useState(null);
-    // Apply JWT and side-effects after mount / when token changes.
-    useEffect(() => {
-        const sdk = sdkRef.current;
-        try {
-            if (jwtToken) {
-                sdk.setJwtToken(jwtToken);
-            }
-            // Initialize auto-suggestions if enabled
-            if (config.suggestionConfig?.autoGenerate !== false) {
-                sdk.initializeAutoSuggestions().catch((err) => {
-                    console.warn('Auto-suggestions initialization failed:', err);
-                });
-            }
-            setInitialized(true);
-        }
-        catch (err) {
-            setError(String(err));
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [jwtToken]);
-    const sdk = sdkRef.current;
-    const sendQuery = useCallback(async (query) => {
-        if (!sdk)
-            throw new Error('SDK not initialized');
-        try {
-            setError(null);
-            return await sdk.sendQuery(query);
-        }
-        catch (err) {
-            setError(String(err));
-            throw err;
-        }
-    }, [sdk]);
-    const setJwt = useCallback((token) => {
-        if (!sdk)
-            throw new Error('SDK not initialized');
-        sdk.setJwtToken(token);
-    }, [sdk]);
-    const checkHealth = useCallback(async () => {
-        if (!sdk)
-            throw new Error('SDK not initialized');
-        return sdk.checkHealth();
-    }, [sdk]);
-    const exportChats = useCallback((format = 'json') => {
-        if (!sdk)
-            throw new Error('SDK not initialized');
-        return sdk.exportChats(format);
-    }, [sdk]);
-    return {
-        sdk,
-        sendQuery,
-        setJwt,
-        checkHealth,
-        exportChats,
-        initialized,
-        error,
-    };
-}
-/**
- * Hook to subscribe to messages
- */
-export function useAiMessages(sdk) {
-    const [messages, setMessages] = useState(() => sdk.getMessages());
-    useEffect(() => {
-        const unsubscribe = sdk.onMessagesChange((msgs) => {
-            setMessages([...msgs]);
-        });
-        return unsubscribe;
-    }, [sdk]);
-    return messages;
-}
-/**
- * Hook to subscribe to loading state
- */
-export function useAiLoading(sdk) {
-    const [isLoading, setIsLoading] = useState(() => sdk.isLoading());
-    useEffect(() => {
-        const unsubscribe = sdk.onLoadingChange((loading) => {
-            setIsLoading(loading);
-        });
-        return unsubscribe;
-    }, [sdk]);
-    return isLoading;
-}
-/**
- * Hook to subscribe to error state
- */
-export function useAiError(sdk) {
-    const [error, setError] = useState(() => sdk.getError());
-    useEffect(() => {
-        const unsubscribe = sdk.onErrorChange((err) => {
-            setError(err);
-        });
-        return unsubscribe;
-    }, [sdk]);
-    return error;
-}
-/**
- * Hook to manage context
- */
-export function useAiContext(sdk) {
-    const [context, setContext] = useState(() => sdk.getContext());
-    useEffect(() => {
-        const unsubscribe = sdk.onContextChange((ctx) => {
-            setContext({ ...ctx });
-        });
-        return unsubscribe;
-    }, [sdk]);
-    const updateContext = useCallback((newContext) => {
-        sdk.setContext(newContext);
-    }, [sdk]);
-    const updateContextProperty = useCallback((key, value) => {
-        sdk.updateContextProperty(key, value);
-    }, [sdk]);
-    return {
-        context,
-        updateContext,
-        updateContextProperty,
-    };
-}
-/**
- * Hook to subscribe to suggestions
- */
-export function useAiSuggestions(sdk) {
-    const [suggestions, setSuggestions] = useState(() => sdk.getSuggestions());
-    useEffect(() => {
-        const unsubscribe = sdk.onSuggestionsChange((sugg) => {
-            setSuggestions([...sugg]);
-        });
-        return unsubscribe;
-    }, [sdk]);
-    const filterSuggestions = useCallback((query) => {
-        return sdk.filterSuggestions(query);
-    }, [sdk]);
-    return { suggestions, filterSuggestions };
-}
-/**
- * Combined hook for common use cases
- */
-export function useAiWidget(config, jwtToken) {
-    const { sdk, sendQuery, initialized, error: initError } = useAiChat(config, jwtToken);
-    const messages = useAiMessages(sdk);
-    const isLoading = useAiLoading(sdk);
-    const error = useAiError(sdk);
-    const { context, updateContext, updateContextProperty } = useAiContext(sdk);
-    const { suggestions, filterSuggestions } = useAiSuggestions(sdk);
-    return {
-        sdk,
-        messages,
-        isLoading,
-        error,
-        context,
-        sendQuery,
-        updateContext,
-        updateContextProperty,
-        initialized,
-        initError,
-        suggestions,
-        filterSuggestions,
-    };
-}

package/dist/react/src/index.d.ts

@@ -1,7 +0,0 @@
-/**
- * AI Widget React - Public API
- */
-export { AiChatWidget } from './components';
-export type { AiChatWidgetProps } from './components';
-export { useAiChat, useAiMessages, useAiLoading, useAiError, useAiContext, useAiWidget, } from './hooks';
-export type { AiContextConfig, AiContext, AiMessage, AiChart, AiQueryResponse, } from '@courseecho/ai-core-sdk';

package/dist/react/src/index.js

@@ -1,5 +0,0 @@
-/**
- * AI Widget React - Public API
- */
-export { AiChatWidget } from './components';
-export { useAiChat, useAiMessages, useAiLoading, useAiError, useAiContext, useAiWidget, } from './hooks';