@astermind/chatbot-template 1.0.0

package/dist/astermind-chatbot.umd.js

@@ -0,0 +1,915 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('react')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', 'react'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.AsterMindChatbot = {}, global.React, global.React));
+})(this, (function (exports, jsxRuntime, react) { 'use strict';
+
+    /**
+     * Floating chat trigger button
+     */
+    function ChatBubble({ onClick, position, unreadCount = 0 }) {
+        return (jsxRuntime.jsxs("button", { className: `astermind-bubble astermind-bubble--${position}`, onClick: onClick, "aria-label": "Open chat", type: "button", children: [jsxRuntime.jsx("svg", { className: "astermind-bubble__icon", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M21 11.5C21.0034 12.8199 20.6951 14.1219 20.1 15.3C19.3944 16.7118 18.3098 17.8992 16.9674 18.7293C15.6251 19.5594 14.0782 19.9994 12.5 20C11.1801 20.0035 9.87812 19.6951 8.7 19.1L3 21L4.9 15.3C4.30493 14.1219 3.99656 12.8199 4 11.5C4.00061 9.92179 4.44061 8.37488 5.27072 7.03258C6.10083 5.69028 7.28825 4.6056 8.7 3.90003C9.87812 3.30496 11.1801 2.99659 12.5 3.00003H13C15.0843 3.11502 17.053 3.99479 18.5291 5.47089C20.0052 6.94699 20.885 8.91568 21 11V11.5Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }), unreadCount > 0 && (jsxRuntime.jsx("span", { className: "astermind-bubble__badge", children: unreadCount }))] }));
+    }
+
+    /**
+     * Chat window header with title and close button
+     */
+    function ChatHeader({ title, subtitle, onClose, children }) {
+        return (jsxRuntime.jsxs("div", { className: "astermind-header", children: [jsxRuntime.jsxs("div", { className: "astermind-header__info", children: [jsxRuntime.jsx("h3", { className: "astermind-header__title", children: title }), subtitle && jsxRuntime.jsx("p", { className: "astermind-header__subtitle", children: subtitle })] }), jsxRuntime.jsxs("div", { className: "astermind-header__actions", children: [children, jsxRuntime.jsx("button", { className: "astermind-header__close", onClick: onClose, "aria-label": "Close chat", type: "button", children: jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: jsxRuntime.jsx("path", { d: "M18 6L6 18M6 6l12 12" }) }) })] })] }));
+    }
+
+    /**
+     * Source citation display
+     */
+    function SourceCitation({ sources }) {
+        return (jsxRuntime.jsx("div", { className: "astermind-sources", children: sources.map((source, index) => (jsxRuntime.jsxs("div", { className: "astermind-source", children: [jsxRuntime.jsxs("div", { className: "astermind-source__header", children: [jsxRuntime.jsx("span", { className: "astermind-source__title", children: source.title }), jsxRuntime.jsxs("span", { className: "astermind-source__relevance", children: [Math.round(source.relevance * 100), "%"] })] }), jsxRuntime.jsx("p", { className: "astermind-source__snippet", children: source.snippet })] }, index))) }));
+    }
+
+    // src/utils/markdown.ts
+    // Simple markdown rendering
+    /**
+     * Render basic markdown to HTML
+     *
+     * Supports: bold, italic, code, links, lists
+     */
+    function renderMarkdown(text) {
+        if (!text)
+            return '';
+        const html = text
+            // Escape HTML
+            .replace(/&/g, '&')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            // Bold
+            .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+            // Italic
+            .replace(/\*(.+?)\*/g, '<em>$1</em>')
+            // Inline code
+            .replace(/`(.+?)`/g, '<code>$1</code>')
+            // Links
+            .replace(/\[(.+?)\]\((.+?)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>')
+            // Line breaks
+            .replace(/\n/g, '<br />');
+        return html;
+    }
+
+    // src/utils/time.ts
+    // Time formatting utilities
+    /**
+     * Format timestamp for display
+     */
+    function formatTime(date) {
+        const now = new Date();
+        const diff = now.getTime() - date.getTime();
+        // Less than a minute
+        if (diff < 60000) {
+            return 'Just now';
+        }
+        // Less than an hour
+        if (diff < 3600000) {
+            const minutes = Math.floor(diff / 60000);
+            return `${minutes}m ago`;
+        }
+        // Same day
+        if (date.toDateString() === now.toDateString()) {
+            return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+        }
+        // Different day
+        return date.toLocaleDateString([], { month: 'short', day: 'numeric' });
+    }
+
+    /**
+     * Individual message bubble with markdown support
+     */
+    function MessageBubble({ message }) {
+        const [showSources, setShowSources] = react.useState(false);
+        return (jsxRuntime.jsxs("div", { className: `astermind-message astermind-message--${message.role}`, children: [jsxRuntime.jsx("div", { className: "astermind-message__bubble", children: message.isStreaming && !message.content ? (jsxRuntime.jsxs("span", { className: "astermind-message__typing", children: [jsxRuntime.jsx("span", {}), jsxRuntime.jsx("span", {}), jsxRuntime.jsx("span", {})] })) : (jsxRuntime.jsx("div", { className: "astermind-message__content", dangerouslySetInnerHTML: { __html: renderMarkdown(message.content) } })) }), jsxRuntime.jsxs("div", { className: "astermind-message__meta", children: [jsxRuntime.jsx("span", { className: "astermind-message__time", children: formatTime(message.timestamp) }), message.offline && (jsxRuntime.jsx("span", { className: "astermind-message__offline", title: "Offline response", children: "offline" })), message.confidence && message.confidence !== 'high' && (jsxRuntime.jsx("span", { className: `astermind-message__confidence astermind-message__confidence--${message.confidence}`, title: `Confidence: ${message.confidence}`, children: message.confidence }))] }), message.sources && message.sources.length > 0 && (jsxRuntime.jsxs("div", { className: "astermind-message__sources", children: [jsxRuntime.jsxs("button", { className: "astermind-message__sources-toggle", onClick: () => setShowSources(!showSources), type: "button", children: [showSources ? 'Hide' : 'Show', " sources (", message.sources.length, ")"] }), showSources && (jsxRuntime.jsx(SourceCitation, { sources: message.sources }))] }))] }));
+    }
+
+    // src/components/TypingIndicator.tsx
+    // Bot typing animation
+    /**
+     * Typing indicator animation
+     */
+    function TypingIndicator() {
+        return (jsxRuntime.jsxs("div", { className: "astermind-typing", children: [jsxRuntime.jsx("span", {}), jsxRuntime.jsx("span", {}), jsxRuntime.jsx("span", {})] }));
+    }
+
+    /**
+     * Scrollable message list with auto-scroll
+     */
+    function MessageList({ messages, isProcessing }) {
+        const listRef = react.useRef(null);
+        // Auto-scroll to bottom on new messages
+        react.useEffect(() => {
+            if (listRef.current) {
+                listRef.current.scrollTop = listRef.current.scrollHeight;
+            }
+        }, [messages, isProcessing]);
+        return (jsxRuntime.jsxs("div", { className: "astermind-messages", ref: listRef, children: [messages.map(message => (jsxRuntime.jsx(MessageBubble, { message: message }, message.id))), isProcessing && messages[messages.length - 1]?.content === '' && (jsxRuntime.jsx(TypingIndicator, {}))] }));
+    }
+
+    /**
+     * Chat input with send button
+     */
+    function ChatInput({ placeholder, disabled = false, onSend }) {
+        const [value, setValue] = react.useState('');
+        const inputRef = react.useRef(null);
+        const handleSend = () => {
+            if (value.trim() && !disabled) {
+                onSend(value.trim());
+                setValue('');
+                inputRef.current?.focus();
+            }
+        };
+        const handleKeyDown = (e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                handleSend();
+            }
+        };
+        // Auto-resize textarea
+        const handleInput = (e) => {
+            const textarea = e.target;
+            setValue(textarea.value);
+            // Reset height to auto to get proper scrollHeight
+            textarea.style.height = 'auto';
+            // Set to scrollHeight, max 120px
+            textarea.style.height = Math.min(textarea.scrollHeight, 120) + 'px';
+        };
+        return (jsxRuntime.jsxs("div", { className: "astermind-input", children: [jsxRuntime.jsx("textarea", { ref: inputRef, className: "astermind-input__textarea", value: value, onChange: handleInput, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: disabled, rows: 1, "aria-label": "Message input" }), jsxRuntime.jsx("button", { className: "astermind-input__send", onClick: handleSend, disabled: disabled || !value.trim(), "aria-label": "Send message", type: "button", children: jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: jsxRuntime.jsx("path", { d: "M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" }) }) })] }));
+    }
+
+    /**
+     * Action confirmation card for agentic capabilities
+     */
+    function ActionCard({ action, onConfirm, onCancel }) {
+        const getActionIcon = (type) => {
+            switch (type) {
+                case 'navigate':
+                    return (jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [jsxRuntime.jsx("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }), jsxRuntime.jsx("polyline", { points: "15,3 21,3 21,9" }), jsxRuntime.jsx("line", { x1: "10", y1: "14", x2: "21", y2: "3" })] }));
+                case 'fillForm':
+                    return (jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [jsxRuntime.jsx("path", { d: "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }), jsxRuntime.jsx("path", { d: "M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" })] }));
+                case 'clickElement':
+                    return (jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [jsxRuntime.jsx("path", { d: "M15 15l-2 5L9 9l11 4-5 2z" }), jsxRuntime.jsx("path", { d: "M15 15l5 5" })] }));
+                default:
+                    return (jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }), jsxRuntime.jsx("polyline", { points: "12,6 12,12 16,14" })] }));
+            }
+        };
+        const getActionLabel = (type) => {
+            switch (type) {
+                case 'navigate': return 'Navigate to';
+                case 'fillForm': return 'Fill form field';
+                case 'clickElement': return 'Click';
+                case 'triggerModal': return 'Open modal';
+                case 'scroll': return 'Scroll to';
+                case 'highlight': return 'Highlight';
+                case 'custom': return 'Execute action';
+                default: return 'Perform action';
+            }
+        };
+        return (jsxRuntime.jsxs("div", { className: "astermind-action-card", children: [jsxRuntime.jsxs("div", { className: "astermind-action-card__header", children: [jsxRuntime.jsx("div", { className: "astermind-action-card__icon", children: getActionIcon(action.type) }), jsxRuntime.jsxs("div", { className: "astermind-action-card__title", children: [jsxRuntime.jsx("span", { className: "astermind-action-card__label", children: getActionLabel(action.type) }), jsxRuntime.jsx("span", { className: "astermind-action-card__target", children: action.target })] })] }), action.explanation && (jsxRuntime.jsx("p", { className: "astermind-action-card__explanation", children: action.explanation })), jsxRuntime.jsxs("div", { className: "astermind-action-card__confidence", children: [jsxRuntime.jsx("div", { className: "astermind-action-card__confidence-bar", style: { width: `${action.confidence * 100}%` } }), jsxRuntime.jsxs("span", { children: [Math.round(action.confidence * 100), "% confident"] })] }), jsxRuntime.jsxs("div", { className: "astermind-action-card__actions", children: [jsxRuntime.jsx("button", { className: "astermind-action-card__cancel", onClick: onCancel, type: "button", children: "Cancel" }), jsxRuntime.jsx("button", { className: "astermind-action-card__confirm", onClick: onConfirm, type: "button", children: "Confirm" })] })] }));
+    }
+
+    /**
+     * Connection status indicator
+     */
+    function StatusIndicator({ status }) {
+        const getLabel = () => {
+            switch (status) {
+                case 'online': return 'Online';
+                case 'offline': return 'Offline';
+                case 'connecting': return 'Connecting...';
+                case 'error': return 'Error';
+                default: return 'Unknown';
+            }
+        };
+        return (jsxRuntime.jsxs("div", { className: `astermind-status astermind-status--${status}`, children: [jsxRuntime.jsx("span", { className: "astermind-status__dot" }), jsxRuntime.jsx("span", { className: "astermind-status__label", children: getLabel() })] }));
+    }
+
+    /**
+     * Chat window with header, messages, and input
+     */
+    function ChatWindow({ messages, isProcessing, connectionStatus, pendingAction, headerTitle, headerSubtitle, placeholder, showPoweredBy, onClose, onSendMessage, onActionConfirm, onActionCancel }) {
+        return (jsxRuntime.jsxs("div", { className: "astermind-window", children: [jsxRuntime.jsx(ChatHeader, { title: headerTitle, subtitle: headerSubtitle, onClose: onClose, children: jsxRuntime.jsx(StatusIndicator, { status: connectionStatus }) }), jsxRuntime.jsxs("div", { className: "astermind-window__body", children: [jsxRuntime.jsx(MessageList, { messages: messages, isProcessing: isProcessing }), pendingAction && (jsxRuntime.jsx(ActionCard, { action: pendingAction, onConfirm: () => onActionConfirm(pendingAction), onCancel: onActionCancel }))] }), jsxRuntime.jsxs("div", { className: "astermind-window__footer", children: [jsxRuntime.jsx(ChatInput, { placeholder: placeholder, disabled: isProcessing || connectionStatus === 'error', onSend: onSendMessage }), showPoweredBy && (jsxRuntime.jsxs("div", { className: "astermind-powered-by", children: ["Powered by ", jsxRuntime.jsx("a", { href: "https://astermind.ai", target: "_blank", rel: "noopener noreferrer", children: "AsterMind" })] }))] })] }));
+    }
+
+    // src/hooks/useTheme.ts
+    // Theme management hook
+    const defaultTheme = {
+        primaryColor: '#4F46E5',
+        primaryHover: '#4338CA',
+        backgroundColor: '#ffffff',
+        surfaceColor: '#f3f4f6',
+        textColor: '#1f2937',
+        textMuted: '#6b7280',
+        borderColor: '#e5e7eb',
+        userBubbleBackground: '#4F46E5',
+        userBubbleText: '#ffffff',
+        botBubbleBackground: '#f3f4f6',
+        botBubbleText: '#1f2937',
+        widgetWidth: '380px',
+        widgetHeight: '520px',
+        bubbleSize: '60px',
+        borderRadius: '12px',
+        fontFamily: "'Inter', system-ui, -apple-system, sans-serif",
+        fontSize: '14px',
+        shadow: '0 4px 20px rgba(0, 0, 0, 0.15)'
+    };
+    /**
+     * Hook for theme management
+     */
+    function useTheme(theme) {
+        const mergedTheme = react.useMemo(() => ({
+            ...defaultTheme,
+            ...theme
+        }), [theme]);
+        const cssVariables = react.useMemo(() => ({
+            '--astermind-primary': mergedTheme.primaryColor,
+            '--astermind-primary-hover': mergedTheme.primaryHover,
+            '--astermind-background': mergedTheme.backgroundColor,
+            '--astermind-surface': mergedTheme.surfaceColor,
+            '--astermind-text': mergedTheme.textColor,
+            '--astermind-text-muted': mergedTheme.textMuted,
+            '--astermind-border': mergedTheme.borderColor,
+            '--astermind-user-bg': mergedTheme.userBubbleBackground,
+            '--astermind-user-text': mergedTheme.userBubbleText,
+            '--astermind-bot-bg': mergedTheme.botBubbleBackground,
+            '--astermind-bot-text': mergedTheme.botBubbleText,
+            '--astermind-widget-width': mergedTheme.widgetWidth,
+            '--astermind-widget-height': mergedTheme.widgetHeight,
+            '--astermind-bubble-size': mergedTheme.bubbleSize,
+            '--astermind-border-radius': mergedTheme.borderRadius,
+            '--astermind-font-family': mergedTheme.fontFamily,
+            '--astermind-font-size': mergedTheme.fontSize,
+            '--astermind-shadow': mergedTheme.shadow
+        }), [mergedTheme]);
+        return {
+            theme: mergedTheme,
+            cssVariables
+        };
+    }
+
+    const ThemeContext = react.createContext(null);
+    /**
+     * Theme context provider
+     */
+    function ThemeProvider({ theme, children }) {
+        const themeValue = useTheme(theme);
+        return (jsxRuntime.jsx(ThemeContext.Provider, { value: themeValue, children: jsxRuntime.jsx("div", { style: themeValue.cssVariables, children: children }) }));
+    }
+    /**
+     * Use theme context
+     */
+    function useThemeContext() {
+        const context = react.useContext(ThemeContext);
+        if (!context) {
+            throw new Error('useThemeContext must be used within a ThemeProvider');
+        }
+        return context;
+    }
+
+    /**
+     * Simple HTTP client for API communication
+     * This is a placeholder until @astermind/cybernetic-chatbot-client is available
+     */
+    class SimpleCyberneticClient {
+        constructor(config) {
+            this.status = 'connecting';
+            this.apiUrl = config.apiUrl;
+            this.apiKey = config.apiKey;
+            this.onStatusChange = config.onStatusChange;
+            this.onError = config.onError;
+            // Check connection
+            this.checkConnection();
+        }
+        async checkConnection() {
+            try {
+                const response = await fetch(`${this.apiUrl}/api/external/health`, {
+                    method: 'GET',
+                    headers: {
+                        'X-API-Key': this.apiKey
+                    }
+                });
+                if (response.ok) {
+                    this.status = 'online';
+                }
+                else {
+                    this.status = 'offline';
+                }
+            }
+            catch {
+                this.status = 'offline';
+            }
+            this.onStatusChange?.(this.status);
+        }
+        async ask(message, options) {
+            try {
+                const response = await fetch(`${this.apiUrl}/api/external/chat`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'X-API-Key': this.apiKey
+                    },
+                    body: JSON.stringify({
+                        message,
+                        sessionId: options?.sessionId
+                    })
+                });
+                if (!response.ok) {
+                    throw new Error(`HTTP error: ${response.status}`);
+                }
+                const data = await response.json();
+                return {
+                    reply: data.reply,
+                    sessionId: data.sessionId,
+                    sources: data.sources,
+                    confidence: 'high',
+                    offline: false
+                };
+            }
+            catch (error) {
+                this.onError?.({ message: error.message });
+                throw error;
+            }
+        }
+        async askStream(message, callbacks, options) {
+            try {
+                const response = await fetch(`${this.apiUrl}/api/external/chat/stream`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'X-API-Key': this.apiKey
+                    },
+                    body: JSON.stringify({
+                        message,
+                        sessionId: options?.sessionId
+                    })
+                });
+                if (!response.ok) {
+                    throw new Error(`HTTP error: ${response.status}`);
+                }
+                const reader = response.body?.getReader();
+                if (!reader) {
+                    throw new Error('No reader available');
+                }
+                const decoder = new TextDecoder();
+                let buffer = '';
+                let fullContent = '';
+                let sources = [];
+                while (true) {
+                    const { done, value } = await reader.read();
+                    if (done)
+                        break;
+                    buffer += decoder.decode(value, { stream: true });
+                    const lines = buffer.split('\n');
+                    buffer = lines.pop() || '';
+                    for (const line of lines) {
+                        if (line.startsWith('data: ')) {
+                            try {
+                                const data = JSON.parse(line.slice(6));
+                                if (data.type === 'chunk') {
+                                    fullContent += data.content;
+                                    callbacks.onToken?.(data.content);
+                                }
+                                else if (data.type === 'sources') {
+                                    sources = data.sources;
+                                    callbacks.onSources?.(data.sources);
+                                }
+                                else if (data.type === 'done') {
+                                    callbacks.onComplete?.({
+                                        reply: fullContent,
+                                        sessionId: data.sessionId,
+                                        sources,
+                                        confidence: 'high',
+                                        offline: false
+                                    });
+                                }
+                                else if (data.type === 'error') {
+                                    callbacks.onError?.({ message: data.error });
+                                }
+                            }
+                            catch {
+                                // Ignore parse errors
+                            }
+                        }
+                    }
+                }
+            }
+            catch (error) {
+                callbacks.onError?.({ message: error.message });
+            }
+        }
+        getStatus() {
+            return { connection: this.status };
+        }
+    }
+    /**
+     * Main AsterMind Chatbot Widget
+     *
+     * Drop-in chatbot component with full functionality.
+     */
+    function ChatbotWidget(props) {
+        const { apiKey, apiUrl = 'https://api.astermind.ai', position = 'bottom-right', theme = {}, greeting = 'Hi! How can I help you today?', placeholder = 'Type your message...', fallback = { enabled: true }, showPoweredBy = true, headerTitle = 'AsterMind', headerSubtitle = 'AI Assistant', defaultOpen = false, zIndex = 9999, onReady, onMessage, onAction, onError, onToggle } = props;
+        const [isOpen, setIsOpen] = react.useState(defaultOpen);
+        const [client, setClient] = react.useState(null);
+        const [messages, setMessages] = react.useState([]);
+        const [isProcessing, setIsProcessing] = react.useState(false);
+        const [sessionId, setSessionId] = react.useState();
+        const [pendingAction, setPendingAction] = react.useState();
+        const [connectionStatus, setConnectionStatus] = react.useState('connecting');
+        // Initialize client
+        react.useEffect(() => {
+            const cyberneticClient = new SimpleCyberneticClient({
+                apiUrl,
+                apiKey,
+                fallback: {
+                    enabled: fallback?.enabled ?? true,
+                    cacheOnConnect: true
+                },
+                onStatusChange: (status) => {
+                    setConnectionStatus(status);
+                },
+                onError: (error) => {
+                    onError?.(new Error(error.message));
+                }
+            });
+            setClient(cyberneticClient);
+            // Add greeting message
+            if (greeting) {
+                const greetingMsg = {
+                    id: 'greeting',
+                    role: 'assistant',
+                    content: greeting,
+                    timestamp: new Date()
+                };
+                setMessages([greetingMsg]);
+            }
+            onReady?.();
+            return () => {
+                // Cleanup if needed
+            };
+        }, [apiKey, apiUrl, fallback?.enabled, greeting, onError, onReady]);
+        // Handle toggle
+        const handleToggle = react.useCallback(() => {
+            const newState = !isOpen;
+            setIsOpen(newState);
+            onToggle?.(newState);
+        }, [isOpen, onToggle]);
+        // Handle close
+        const handleClose = react.useCallback(() => {
+            setIsOpen(false);
+            onToggle?.(false);
+        }, [onToggle]);
+        // Handle send message
+        const handleSendMessage = react.useCallback(async (content) => {
+            if (!client || !content.trim() || isProcessing)
+                return;
+            // Add user message
+            const userMessage = {
+                id: `user-${Date.now()}`,
+                role: 'user',
+                content: content.trim(),
+                timestamp: new Date()
+            };
+            setMessages(prev => [...prev, userMessage]);
+            onMessage?.(userMessage);
+            setIsProcessing(true);
+            // Add placeholder for assistant response
+            const assistantId = `assistant-${Date.now()}`;
+            const placeholderMessage = {
+                id: assistantId,
+                role: 'assistant',
+                content: '',
+                timestamp: new Date(),
+                isStreaming: true
+            };
+            setMessages(prev => [...prev, placeholderMessage]);
+            try {
+                // Use streaming if available
+                let fullContent = '';
+                await client.askStream(content, {
+                    onToken: (token) => {
+                        fullContent += token;
+                        setMessages(prev => prev.map(msg => msg.id === assistantId
+                            ? { ...msg, content: fullContent }
+                            : msg));
+                    },
+                    onSources: (sources) => {
+                        setMessages(prev => prev.map(msg => msg.id === assistantId
+                            ? { ...msg, sources }
+                            : msg));
+                    },
+                    onComplete: (response) => {
+                        const finalMessage = {
+                            id: assistantId,
+                            role: 'assistant',
+                            content: response.reply,
+                            timestamp: new Date(),
+                            sources: response.sources,
+                            confidence: response.confidence,
+                            offline: response.offline,
+                            isStreaming: false
+                        };
+                        setMessages(prev => prev.map(msg => msg.id === assistantId ? finalMessage : msg));
+                        setSessionId(response.sessionId);
+                        onMessage?.(finalMessage);
+                    },
+                    onError: () => {
+                        // Fallback to non-streaming on error
+                        handleNonStreamingResponse(client, content, assistantId);
+                    }
+                }, { sessionId });
+            }
+            catch {
+                // Handle error
+                const errorMessage = {
+                    id: assistantId,
+                    role: 'assistant',
+                    content: 'I encountered an error processing your request. Please try again.',
+                    timestamp: new Date(),
+                    isStreaming: false
+                };
+                setMessages(prev => prev.map(msg => msg.id === assistantId ? errorMessage : msg));
+                onError?.(new Error('Failed to process message'));
+            }
+            finally {
+                setIsProcessing(false);
+            }
+        }, [client, isProcessing, sessionId, onMessage, onError]);
+        // Non-streaming fallback
+        const handleNonStreamingResponse = async (cyberneticClient, content, messageId) => {
+            try {
+                const response = await cyberneticClient.ask(content, { sessionId });
+                const finalMessage = {
+                    id: messageId,
+                    role: 'assistant',
+                    content: response.reply,
+                    timestamp: new Date(),
+                    sources: response.sources,
+                    confidence: response.confidence,
+                    offline: response.offline,
+                    isStreaming: false
+                };
+                setMessages(prev => prev.map(msg => msg.id === messageId ? finalMessage : msg));
+                setSessionId(response.sessionId);
+                onMessage?.(finalMessage);
+            }
+            catch {
+                const errorMessage = {
+                    id: messageId,
+                    role: 'assistant',
+                    content: 'I\'m having trouble connecting. Please try again later.',
+                    timestamp: new Date(),
+                    isStreaming: false
+                };
+                setMessages(prev => prev.map(msg => msg.id === messageId ? errorMessage : msg));
+            }
+        };
+        // Handle action confirmation
+        const handleActionConfirm = react.useCallback(async (action) => {
+            if (!pendingAction)
+                return;
+            const updatedAction = {
+                ...pendingAction,
+                status: 'executed',
+                result: {
+                    success: true,
+                    message: `Action ${action.type} completed`
+                }
+            };
+            setPendingAction(undefined);
+            onAction?.(updatedAction);
+        }, [pendingAction, onAction]);
+        // Handle action cancel
+        const handleActionCancel = react.useCallback(() => {
+            if (!pendingAction)
+                return;
+            const cancelledAction = {
+                ...pendingAction,
+                status: 'cancelled'
+            };
+            setPendingAction(undefined);
+            onAction?.(cancelledAction);
+        }, [pendingAction, onAction]);
+        return (jsxRuntime.jsx(ThemeProvider, { theme: theme, children: jsxRuntime.jsxs("div", { className: `astermind-chatbot astermind-chatbot--${position}`, style: { zIndex }, children: [!isOpen && (jsxRuntime.jsx(ChatBubble, { onClick: handleToggle, position: position })), isOpen && (jsxRuntime.jsx(ChatWindow, { messages: messages, isProcessing: isProcessing, connectionStatus: connectionStatus, pendingAction: pendingAction, headerTitle: headerTitle, headerSubtitle: headerSubtitle, placeholder: placeholder, showPoweredBy: showPoweredBy, onClose: handleClose, onSendMessage: handleSendMessage, onActionConfirm: handleActionConfirm, onActionCancel: handleActionCancel }))] }) }));
+    }
+    // Alias for convenience
+    const AsterMindChatbot = ChatbotWidget;
+
+    // src/hooks/useOmega.ts
+    // CyberneticClient wrapper hook
+    /**
+     * Simple HTTP client for API communication
+     */
+    class SimpleClient {
+        constructor(config) {
+            this.status = 'connecting';
+            this.apiUrl = config.apiUrl;
+            this.apiKey = config.apiKey;
+            this.onStatusChange = config.onStatusChange;
+            this.onError = config.onError;
+            this.checkConnection();
+        }
+        async checkConnection() {
+            try {
+                const response = await fetch(`${this.apiUrl}/api/external/health`, {
+                    method: 'GET',
+                    headers: { 'X-API-Key': this.apiKey }
+                });
+                this.status = response.ok ? 'online' : 'offline';
+                if (!response.ok) {
+                    this.onError?.({ message: `Health check failed: ${response.status}` });
+                }
+            }
+            catch (error) {
+                this.status = 'offline';
+                this.onError?.({ message: error.message });
+            }
+            this.onStatusChange?.(this.status);
+        }
+        async ask(message, options) {
+            const response = await fetch(`${this.apiUrl}/api/external/chat`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-API-Key': this.apiKey
+                },
+                body: JSON.stringify({ message, sessionId: options?.sessionId })
+            });
+            if (!response.ok)
+                throw new Error(`HTTP error: ${response.status}`);
+            const data = await response.json();
+            return {
+                reply: data.reply,
+                sessionId: data.sessionId,
+                sources: data.sources,
+                confidence: 'high',
+                offline: false
+            };
+        }
+        async askStream(message, callbacks, options) {
+            try {
+                const response = await fetch(`${this.apiUrl}/api/external/chat/stream`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'X-API-Key': this.apiKey
+                    },
+                    body: JSON.stringify({ message, sessionId: options?.sessionId })
+                });
+                if (!response.ok)
+                    throw new Error(`HTTP error: ${response.status}`);
+                const reader = response.body?.getReader();
+                if (!reader)
+                    throw new Error('No reader available');
+                const decoder = new TextDecoder();
+                let buffer = '';
+                let fullContent = '';
+                let sources = [];
+                while (true) {
+                    const { done, value } = await reader.read();
+                    if (done)
+                        break;
+                    buffer += decoder.decode(value, { stream: true });
+                    const lines = buffer.split('\n');
+                    buffer = lines.pop() || '';
+                    for (const line of lines) {
+                        if (line.startsWith('data: ')) {
+                            try {
+                                const data = JSON.parse(line.slice(6));
+                                if (data.type === 'chunk') {
+                                    fullContent += data.content;
+                                    callbacks.onToken?.(data.content);
+                                }
+                                else if (data.type === 'sources') {
+                                    sources = data.sources;
+                                    callbacks.onSources?.(data.sources);
+                                }
+                                else if (data.type === 'done') {
+                                    callbacks.onComplete?.({
+                                        reply: fullContent,
+                                        sessionId: data.sessionId,
+                                        sources,
+                                        confidence: 'high',
+                                        offline: false
+                                    });
+                                }
+                                else if (data.type === 'error') {
+                                    callbacks.onError?.({ message: data.error });
+                                }
+                            }
+                            catch {
+                                // Ignore parse errors
+                            }
+                        }
+                    }
+                }
+            }
+            catch (error) {
+                callbacks.onError?.({ message: error.message });
+            }
+        }
+        getStatus() {
+            return this.status;
+        }
+    }
+    /**
+     * React hook for CyberneticClient
+     */
+    function useOmega(options) {
+        const [connectionStatus, setConnectionStatus] = react.useState('connecting');
+        const [isProcessing, setIsProcessing] = react.useState(false);
+        const [lastError, setLastError] = react.useState(null);
+        const [sessionId, setSessionId] = react.useState();
+        const clientRef = react.useRef(null);
+        // Initialize client
+        react.useEffect(() => {
+            clientRef.current = new SimpleClient({
+                ...options,
+                onStatusChange: setConnectionStatus,
+                onError: (error) => setLastError(new Error(error.message))
+            });
+            return () => {
+                clientRef.current = null;
+            };
+        }, [options.apiUrl, options.apiKey]);
+        // Send message (non-streaming)
+        const sendMessage = react.useCallback(async (message) => {
+            if (!clientRef.current) {
+                throw new Error('Client not initialized');
+            }
+            setIsProcessing(true);
+            setLastError(null);
+            try {
+                const response = await clientRef.current.ask(message, { sessionId });
+                setSessionId(response.sessionId);
+                return response;
+            }
+            catch (error) {
+                setLastError(error);
+                throw error;
+            }
+            finally {
+                setIsProcessing(false);
+            }
+        }, [sessionId]);
+        // Send message (streaming)
+        const sendMessageStream = react.useCallback(async (message, onToken) => {
+            if (!clientRef.current) {
+                throw new Error('Client not initialized');
+            }
+            setIsProcessing(true);
+            setLastError(null);
+            return new Promise((resolve, reject) => {
+                clientRef.current.askStream(message, {
+                    onToken,
+                    onComplete: (response) => {
+                        setSessionId(response.sessionId);
+                        setIsProcessing(false);
+                        resolve(response);
+                    },
+                    onError: (error) => {
+                        setLastError(new Error(error.message));
+                        setIsProcessing(false);
+                        reject(error);
+                    }
+                }, { sessionId });
+            });
+        }, [sessionId]);
+        // Clear session
+        const clearSession = react.useCallback(() => {
+            setSessionId(undefined);
+        }, []);
+        // Sync cache (placeholder)
+        const syncCache = react.useCallback(async () => {
+            // Cache sync functionality would go here
+        }, []);
+        return {
+            sendMessage,
+            sendMessageStream,
+            connectionStatus,
+            isProcessing,
+            lastError,
+            sessionId,
+            clearSession,
+            syncCache
+        };
+    }
+
+    // src/hooks/useChat.ts
+    // Chat state management hook
+    /**
+     * Hook for managing chat state
+     */
+    function useChat(initialMessages = []) {
+        const [messages, setMessages] = react.useState(initialMessages);
+        const [pendingAction, setPendingAction] = react.useState();
+        const addMessage = react.useCallback((message) => {
+            setMessages(prev => [...prev, message]);
+        }, []);
+        const updateMessage = react.useCallback((id, updates) => {
+            setMessages(prev => prev.map(msg => msg.id === id ? { ...msg, ...updates } : msg));
+        }, []);
+        const clearMessages = react.useCallback(() => {
+            setMessages([]);
+        }, []);
+        return {
+            messages,
+            addMessage,
+            updateMessage,
+            clearMessages,
+            pendingAction,
+            setPendingAction
+        };
+    }
+
+    // src/hooks/useScrollToBottom.ts
+    // Auto-scroll behavior hook
+    /**
+     * Hook for auto-scrolling to bottom of a container
+     */
+    function useScrollToBottom(options = {}) {
+        const { deps = [], enabled = true, behavior = 'smooth' } = options;
+        const ref = react.useRef(null);
+        react.useEffect(() => {
+            if (enabled && ref.current) {
+                ref.current.scrollTo({
+                    top: ref.current.scrollHeight,
+                    behavior
+                });
+            }
+        }, [enabled, behavior, ...deps]);
+        return ref;
+    }
+
+    const ChatContext = react.createContext(null);
+    /**
+     * Chat state context provider
+     */
+    function ChatProvider({ children, initialMessages = [] }) {
+        const [messages, setMessages] = react.useState(initialMessages);
+        const [isOpen, setIsOpen] = react.useState(false);
+        const [isProcessing, setIsProcessing] = react.useState(false);
+        const [connectionStatus] = react.useState('connecting');
+        const [sessionId] = react.useState();
+        const [pendingAction, setPendingAction] = react.useState();
+        const addMessage = (message) => {
+            setMessages(prev => [...prev, message]);
+        };
+        const updateMessage = (id, updates) => {
+            setMessages(prev => prev.map(msg => msg.id === id ? { ...msg, ...updates } : msg));
+        };
+        const clearMessages = () => {
+            setMessages([]);
+        };
+        const value = {
+            messages,
+            isOpen,
+            isProcessing,
+            connectionStatus,
+            sessionId,
+            pendingAction,
+            addMessage,
+            updateMessage,
+            clearMessages,
+            setIsOpen,
+            setIsProcessing,
+            setPendingAction
+        };
+        return (jsxRuntime.jsx(ChatContext.Provider, { value: value, children: children }));
+    }
+    /**
+     * Use chat context
+     */
+    function useChatContext() {
+        const context = react.useContext(ChatContext);
+        if (!context) {
+            throw new Error('useChatContext must be used within a ChatProvider');
+        }
+        return context;
+    }
+
+    exports.ActionCard = ActionCard;
+    exports.AsterMindChatbot = AsterMindChatbot;
+    exports.ChatBubble = ChatBubble;
+    exports.ChatHeader = ChatHeader;
+    exports.ChatInput = ChatInput;
+    exports.ChatProvider = ChatProvider;
+    exports.ChatWindow = ChatWindow;
+    exports.ChatbotWidget = ChatbotWidget;
+    exports.MessageBubble = MessageBubble;
+    exports.MessageList = MessageList;
+    exports.SourceCitation = SourceCitation;
+    exports.StatusIndicator = StatusIndicator;
+    exports.ThemeProvider = ThemeProvider;
+    exports.TypingIndicator = TypingIndicator;
+    exports.useChat = useChat;
+    exports.useChatContext = useChatContext;
+    exports.useOmega = useOmega;
+    exports.useScrollToBottom = useScrollToBottom;
+    exports.useTheme = useTheme;
+    exports.useThemeContext = useThemeContext;
+
+}));
+//# sourceMappingURL=astermind-chatbot.umd.js.map