open-ask-ai 0.1.0

package/dist/index.cjs.js

@@ -0,0 +1,609 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var DialogPrimitive = require('@radix-ui/react-dialog');
+var lucideReact = require('lucide-react');
+var reactSlot = require('@radix-ui/react-slot');
+var ReactMarkdown = require('react-markdown');
+var remarkGfm = require('remark-gfm');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(DialogPrimitive);
+
+/**
+ * API client for Ask AI widget
+ * Supports dynamic API URL configuration
+ */
+class APIClient {
+    constructor(baseUrl) {
+        Object.defineProperty(this, "baseUrl", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.baseUrl = baseUrl.replace(/\/$/, ''); // Remove trailing slash
+    }
+    /**
+     * Create a new session
+     */
+    async createSession() {
+        const response = await fetch(`${this.baseUrl}/api/session`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+        });
+        if (!response.ok) {
+            throw new Error(`Failed to create session: ${response.statusText}`);
+        }
+        return response.json();
+    }
+    /**
+     * Delete a session
+     */
+    async deleteSession(sessionId) {
+        const response = await fetch(`${this.baseUrl}/api/session/${sessionId}`, {
+            method: 'DELETE',
+        });
+        if (!response.ok) {
+            throw new Error(`Failed to delete session: ${response.statusText}`);
+        }
+    }
+    /**
+     * Ask a question and return the SSE stream response
+     */
+    async askQuestion(sessionId, question, system) {
+        const response = await fetch(`${this.baseUrl}/api/ask`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                sessionId,
+                question,
+                system,
+            }),
+        });
+        if (!response.ok) {
+            throw new Error(`Failed to ask question: ${response.statusText}`);
+        }
+        return response;
+    }
+}
+
+function useSession({ apiClient }) {
+    const [sessionId, setSessionId] = React.useState(null);
+    const [isCreating, setIsCreating] = React.useState(false);
+    const [error, setError] = React.useState(null);
+    const initializeSession = React.useCallback(async () => {
+        setIsCreating(true);
+        setError(null);
+        try {
+            const { sessionId: newSessionId } = await apiClient.createSession();
+            setSessionId(newSessionId);
+            return newSessionId;
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error('Failed to create session');
+            setError(error);
+            console.error('Failed to create session:', error);
+            throw error;
+        }
+        finally {
+            setIsCreating(false);
+        }
+    }, [apiClient]);
+    const recreateSession = React.useCallback(async () => {
+        // Clean up old session if it exists
+        if (sessionId) {
+            try {
+                await apiClient.deleteSession(sessionId);
+            }
+            catch (err) {
+                console.error('Failed to delete old session:', err);
+            }
+        }
+        await initializeSession();
+    }, [sessionId, apiClient, initializeSession]);
+    // Cleanup on unmount
+    React.useEffect(() => {
+        return () => {
+            if (sessionId) {
+                apiClient.deleteSession(sessionId).catch((err) => {
+                    console.error('Failed to cleanup session on unmount:', err);
+                });
+            }
+        };
+    }, [sessionId, apiClient]);
+    return {
+        sessionId,
+        isCreating,
+        error,
+        initializeSession,
+        recreateSession,
+    };
+}
+
+/**
+ * Parse SSE chunk format: "event: type\ndata: json\n\n"
+ */
+function parseSSEChunk(chunk) {
+    const events = [];
+    const lines = chunk.split('\n');
+    let currentEvent = '';
+    let currentData = '';
+    for (const line of lines) {
+        if (line.startsWith('event: ')) {
+            currentEvent = line.slice(7).trim();
+        }
+        else if (line.startsWith('data: ')) {
+            currentData = line.slice(6).trim();
+        }
+        else if (line === '') {
+            // Empty line marks end of event
+            if (currentEvent && currentData) {
+                try {
+                    const parsedData = JSON.parse(currentData);
+                    events.push({
+                        event: currentEvent,
+                        data: parsedData,
+                    });
+                }
+                catch (err) {
+                    console.error('Failed to parse SSE data:', currentData, err);
+                }
+                currentEvent = '';
+                currentData = '';
+            }
+        }
+    }
+    return events;
+}
+function useSSE(options = {}) {
+    const { onConnected, onMessage, onDone, onError } = options;
+    const handleSSEStream = React.useCallback(async (response) => {
+        const reader = response.body?.getReader();
+        const decoder = new TextDecoder();
+        if (!reader) {
+            onError?.(new Error('No response body'));
+            return;
+        }
+        let buffer = '';
+        try {
+            while (true) {
+                const { done, value } = await reader.read();
+                if (done) {
+                    break;
+                }
+                buffer += decoder.decode(value, { stream: true });
+                // Process complete events
+                const events = parseSSEChunk(buffer);
+                for (const { event, data } of events) {
+                    if (event === 'connected') {
+                        onConnected?.();
+                        onMessage?.(data);
+                    }
+                    else if (event === 'answer') {
+                        onMessage?.(data);
+                    }
+                    else if (event === 'done') {
+                        onDone?.();
+                        onMessage?.(data);
+                    }
+                    else if (event === 'error') {
+                        onError?.(new Error(data.error || 'Unknown error'));
+                        onMessage?.(data);
+                    }
+                }
+                // Clear processed events from buffer (keep incomplete data)
+                const lastEventEnd = buffer.lastIndexOf('\n\n');
+                if (lastEventEnd !== -1) {
+                    buffer = buffer.slice(lastEventEnd + 2);
+                }
+            }
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error('SSE stream error');
+            onError?.(error);
+        }
+        finally {
+            reader.releaseLock();
+        }
+    }, [onConnected, onMessage, onDone, onError]);
+    return {
+        handleSSEStream,
+    };
+}
+
+function useChat({ apiClient, systemPrompt }) {
+    const [messages, setMessages] = React.useState([]);
+    const [isStreaming, setIsStreaming] = React.useState(false);
+    const [error, setError] = React.useState(null);
+    const { sessionId, isCreating: isCreatingSession, error: sessionError, initializeSession } = useSession({ apiClient });
+    const { handleSSEStream } = useSSE({
+        onConnected: () => {
+            console.log('SSE connected');
+        },
+        onMessage: (data) => {
+            if (data.type === 'answer' && data.text) {
+                // Accumulate the answer text
+                setMessages((prev) => {
+                    const lastMessage = prev[prev.length - 1];
+                    if (lastMessage && lastMessage.role === 'assistant' && lastMessage.isStreaming) {
+                        // Update the last assistant message
+                        return prev.slice(0, -1).concat({
+                            ...lastMessage,
+                            content: lastMessage.content + data.text,
+                        });
+                    }
+                    return prev;
+                });
+            }
+        },
+        onDone: () => {
+            // Mark streaming complete
+            setMessages((prev) => {
+                const lastMessage = prev[prev.length - 1];
+                if (lastMessage && lastMessage.role === 'assistant') {
+                    return prev.slice(0, -1).concat({
+                        ...lastMessage,
+                        isStreaming: false,
+                    });
+                }
+                return prev;
+            });
+            setIsStreaming(false);
+        },
+        onError: (err) => {
+            setError(err);
+            setIsStreaming(false);
+            // Remove the failed assistant message
+            setMessages((prev) => {
+                const lastMessage = prev[prev.length - 1];
+                if (lastMessage && lastMessage.role === 'assistant' && lastMessage.isStreaming) {
+                    return prev.slice(0, -1);
+                }
+                return prev;
+            });
+        },
+    });
+    const sendMessage = React.useCallback(async (text) => {
+        if (!text.trim()) {
+            return;
+        }
+        setError(null);
+        // Create session if it doesn't exist yet
+        let currentSessionId = sessionId;
+        if (!currentSessionId && !isCreatingSession) {
+            try {
+                setIsStreaming(true);
+                currentSessionId = await initializeSession();
+            }
+            catch (err) {
+                setError(new Error('Failed to create session'));
+                setIsStreaming(false);
+                return;
+            }
+        }
+        // Wait for session to be created if it's currently being created
+        if (isCreatingSession) {
+            setError(new Error('Session is being created, please try again'));
+            return;
+        }
+        if (!currentSessionId) {
+            setError(new Error('No active session'));
+            return;
+        }
+        setIsStreaming(true);
+        // Add user message immediately (optimistic UI)
+        const userMessage = {
+            id: crypto.randomUUID(),
+            role: 'user',
+            content: text,
+            timestamp: Date.now(),
+        };
+        setMessages((prev) => [...prev, userMessage]);
+        // Add placeholder for assistant response
+        const assistantMessage = {
+            id: crypto.randomUUID(),
+            role: 'assistant',
+            content: '',
+            timestamp: Date.now(),
+            isStreaming: true,
+        };
+        setMessages((prev) => [...prev, assistantMessage]);
+        try {
+            const response = await apiClient.askQuestion(currentSessionId, text, systemPrompt);
+            await handleSSEStream(response);
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error('Failed to send message');
+            setError(error);
+            setIsStreaming(false);
+            // Remove the failed messages
+            setMessages((prev) => prev.slice(0, -2));
+        }
+    }, [sessionId, isCreatingSession, initializeSession, apiClient, handleSSEStream, systemPrompt]);
+    const clearMessages = React.useCallback(() => {
+        setMessages([]);
+        setError(null);
+    }, []);
+    return {
+        messages,
+        isStreaming,
+        error,
+        sessionError,
+        isCreatingSession,
+        sendMessage,
+        clearMessages,
+    };
+}
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z$5 = "/* Button 组件样式 */\n\n.button_hpHiE {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--ask-ai-radius-md);\n  font-size: 14px;\n  font-weight: 500;\n  transition: all var(--ask-ai-transition);\n  border: none;\n  cursor: pointer;\n}\n\n.button_hpHiE:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--ask-ai-background), 0 0 0 4px var(--ask-ai-primary);\n}\n\n.button_hpHiE:disabled {\n  pointer-events: none;\n  opacity: 0.5;\n}\n\n/* Variants */\n.variant-default_kUb7W {\n  background-color: var(--ask-ai-primary);\n  color: #ffffff;\n}\n\n.variant-default_kUb7W:hover:not(:disabled) {\n  background-color: var(--ask-ai-primary-hover);\n}\n\n.variant-outline_B-jpO {\n  border: 1px solid var(--ask-ai-border);\n  background-color: var(--ask-ai-background);\n  color: var(--ask-ai-foreground);\n}\n\n.variant-outline_B-jpO:hover:not(:disabled) {\n  background-color: var(--ask-ai-ai-message-bg);\n}\n\n.variant-ghost_Rfses {\n  background-color: transparent;\n  color: var(--ask-ai-foreground);\n}\n\n.variant-ghost_Rfses:hover:not(:disabled) {\n  background-color: var(--ask-ai-ai-message-bg);\n}\n\n.variant-icon_eyYEu {\n  background-color: transparent;\n  color: var(--ask-ai-foreground);\n}\n\n.variant-icon_eyYEu:hover:not(:disabled) {\n  background-color: var(--ask-ai-ai-message-bg);\n}\n\n/* Sizes */\n.size-default_-O-7z {\n  height: 40px;\n  padding: 8px 16px;\n}\n\n.size-sm_3B2YW {\n  height: 36px;\n  padding: 6px 12px;\n}\n\n.size-lg_pg-gK {\n  height: 44px;\n  padding: 10px 32px;\n}\n\n.size-icon_JKSSE {\n  height: 40px;\n  width: 40px;\n  padding: 0;\n}\n";
+var styles$3 = {"button":"button_hpHiE","variant-default":"variant-default_kUb7W","variant-outline":"variant-outline_B-jpO","variant-ghost":"variant-ghost_Rfses","variant-icon":"variant-icon_eyYEu","size-default":"size-default_-O-7z","size-sm":"size-sm_3B2YW","size-lg":"size-lg_pg-gK","size-icon":"size-icon_JKSSE"};
+styleInject(css_248z$5);
+
+const Button = React__namespace.forwardRef(({ className, variant = 'default', size = 'default', asChild = false, ...props }, ref) => {
+    const Comp = asChild ? reactSlot.Slot : 'button';
+    const classNames = [
+        styles$3.button,
+        styles$3[`variant-${variant}`],
+        styles$3[`size-${size}`],
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (jsxRuntime.jsx(Comp, { className: classNames, ref: ref, ...props }));
+});
+Button.displayName = 'Button';
+
+var css_248z$4 = "/* Drawer 组件样式 */\n\n.overlay_M4Ctc {\n  position: fixed;\n  inset: 0;\n  z-index: 50;\n  background-color: rgba(0, 0, 0, 0.5);\n}\n\n.overlay_M4Ctc[data-state=\"open\"] {\n  animation: fadeIn_ofwCi 300ms ease-in-out;\n}\n\n.overlay_M4Ctc[data-state=\"closed\"] {\n  animation: fadeOut_gGY8D 300ms ease-in-out;\n}\n\n.content_CFbqn {\n  position: fixed;\n  z-index: 50;\n  display: flex;\n  flex-direction: column;\n  background-color: var(--ask-ai-background);\n  box-shadow: var(--ask-ai-shadow);\n  top: 16px;\n  bottom: 16px;\n  height: calc(100% - 32px);\n  border-radius: var(--ask-ai-radius-lg);\n  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);\n  width: 100%;\n  max-width: calc(100% - 32px);\n  overflow: hidden;\n}\n\n@media (min-width: 632px) {\n  .content_CFbqn {\n    max-width: 600px;\n  }\n}\n\n.content_CFbqn[data-state=\"open\"].position-right_jfDyQ {\n  animation: slideInFromRight_1XcEG 300ms ease-in-out;\n}\n\n.content_CFbqn[data-state=\"closed\"].position-right_jfDyQ {\n  animation: slideOutToRight_R3Q0I 300ms ease-in-out;\n}\n\n.content_CFbqn[data-state=\"open\"].position-left_GhNmP {\n  animation: slideInFromLeft_g-jJq 300ms ease-in-out;\n}\n\n.content_CFbqn[data-state=\"closed\"].position-left_GhNmP {\n  animation: slideOutToLeft_K488H 300ms ease-in-out;\n}\n\n.position-right_jfDyQ {\n  right: 16px;\n}\n\n.position-left_GhNmP {\n  left: 16px;\n}\n\n.header_m6xZ6 {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-bottom: 1px solid var(--ask-ai-border);\n  padding: 16px;\n}\n\n.title_jiPst {\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--ask-ai-foreground);\n}\n\n.closeButton_HTzsf {\n  border-radius: 4px;\n  opacity: 0.7;\n}\n\n.closeButton_HTzsf:hover {\n  opacity: 1;\n}\n\n.closeIcon_QvQtm {\n  height: 16px;\n  width: 16px;\n}\n\n.body_EPX-M {\n  flex: 1;\n  overflow: hidden;\n}\n\n/* Animations */\n@keyframes fadeIn_ofwCi {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes fadeOut_gGY8D {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n\n@keyframes slideInFromRight_1XcEG {\n  from {\n    transform: translateX(100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n\n@keyframes slideOutToRight_R3Q0I {\n  from {\n    transform: translateX(0);\n  }\n  to {\n    transform: translateX(100%);\n  }\n}\n\n@keyframes slideInFromLeft_g-jJq {\n  from {\n    transform: translateX(-100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n\n@keyframes slideOutToLeft_K488H {\n  from {\n    transform: translateX(0);\n  }\n  to {\n    transform: translateX(-100%);\n  }\n}\n";
+var styles$2 = {"overlay":"overlay_M4Ctc","fadeIn":"fadeIn_ofwCi","fadeOut":"fadeOut_gGY8D","content":"content_CFbqn","position-right":"position-right_jfDyQ","slideInFromRight":"slideInFromRight_1XcEG","slideOutToRight":"slideOutToRight_R3Q0I","position-left":"position-left_GhNmP","slideInFromLeft":"slideInFromLeft_g-jJq","slideOutToLeft":"slideOutToLeft_K488H","header":"header_m6xZ6","title":"title_jiPst","closeButton":"closeButton_HTzsf","closeIcon":"closeIcon_QvQtm","body":"body_EPX-M"};
+styleInject(css_248z$4);
+
+function Drawer({ isOpen, onClose, position = 'right', width = 600, title = 'Ask AI', closeAriaLabel = 'Close', children, theme = 'light', }) {
+    const widthStyle = typeof width === 'number' ? `${width}px` : width;
+    const contentClasses = [
+        styles$2.content,
+        styles$2[`position-${position}`],
+    ].join(' ');
+    // Create a portal container that inherits theme from the nearest .ask-ai ancestor
+    const [portalContainer, setPortalContainer] = React__namespace.useState(null);
+    React__namespace.useEffect(() => {
+        if (typeof document === 'undefined')
+            return;
+        // Create a portal container with ask-ai class
+        const container = document.createElement('div');
+        container.className = `ask-ai${theme === 'dark' ? ' dark' : ''}`;
+        document.body.appendChild(container);
+        setPortalContainer(container);
+        return () => {
+            document.body.removeChild(container);
+        };
+    }, [theme]);
+    return (jsxRuntime.jsx(DialogPrimitive__namespace.Root, { open: isOpen, onOpenChange: (open) => !open && onClose(), children: jsxRuntime.jsxs(DialogPrimitive__namespace.Portal, { container: portalContainer, children: [jsxRuntime.jsx(DialogPrimitive__namespace.Overlay, { className: styles$2.overlay }), jsxRuntime.jsxs(DialogPrimitive__namespace.Content, { className: contentClasses, style: { maxWidth: widthStyle }, children: [jsxRuntime.jsxs("div", { className: styles$2.header, children: [jsxRuntime.jsx(DialogPrimitive__namespace.Title, { className: styles$2.title, children: title }), jsxRuntime.jsx(DialogPrimitive__namespace.Close, { asChild: true, children: jsxRuntime.jsx(Button, { variant: "ghost", size: "icon", "aria-label": closeAriaLabel, className: styles$2.closeButton, children: jsxRuntime.jsx(lucideReact.X, { className: styles$2.closeIcon }) }) })] }), jsxRuntime.jsx("div", { className: styles$2.body, children: children })] })] }) }));
+}
+
+var css_248z$3 = "/* Trigger 组件样式 */\n\n.trigger_whnWp {\n  position: relative;\n  z-index: 51;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n  box-shadow: var(--ask-ai-shadow);\n}\n\n.icon_KBJUj {\n  height: 20px;\n  width: 20px;\n}\n";
+var styles$1 = {"trigger":"trigger_whnWp","icon":"icon_KBJUj"};
+styleInject(css_248z$3);
+
+function Trigger({ onClick, text = 'Ask AI', ariaLabel = 'Open AI assistant', className, }) {
+    const classNames = [styles$1.trigger, className].filter(Boolean).join(' ');
+    return (jsxRuntime.jsxs(Button, { onClick: onClick, variant: "outline", "aria-label": ariaLabel, className: classNames, children: [jsxRuntime.jsx(lucideReact.Sparkles, { className: styles$1.icon }), text && jsxRuntime.jsx("span", { children: text })] }));
+}
+
+var css_248z$2 = "/* ChatContainer 组件样式 */\n\n.container_FRFCj {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n.messagesArea_Hi-49 {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n/* Welcome Screen */\n.welcomeScreen_fJ8-E {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  text-align: center;\n}\n\n.welcomeMessage_unMIK {\n  font-size: 18px;\n  color: var(--ask-ai-foreground);\n  margin-bottom: 16px;\n}\n\n.exampleQuestionsContainer_RBWq6 {\n  margin-top: 24px;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.exampleQuestionsTitle_Vurj8 {\n  font-size: 14px;\n  color: var(--ask-ai-muted);\n  margin-bottom: 8px;\n}\n\n.exampleButton_6sOzR {\n  display: block;\n  width: 100%;\n  text-align: left;\n  padding: 8px 16px;\n  font-size: 14px;\n  color: var(--ask-ai-foreground);\n  background-color: var(--ask-ai-ai-message-bg);\n  border: none;\n  border-radius: var(--ask-ai-radius-md);\n  cursor: pointer;\n  transition: background-color var(--ask-ai-transition);\n}\n\n.exampleButton_6sOzR:hover {\n  background-color: var(--ask-ai-border);\n}\n\n/* Messages */\n.messageWrapper_nsQr8 {\n  display: flex;\n}\n\n.messageWrapper_nsQr8.user_s1Gzu {\n  justify-content: flex-end;\n}\n\n.messageWrapper_nsQr8.assistant_xU0-H {\n  justify-content: flex-start;\n}\n\n.message_jxpo4 {\n  max-width: 85%;\n  border-radius: var(--ask-ai-radius-lg);\n  padding: 8px 16px;\n}\n\n.message_jxpo4.user_s1Gzu {\n  background-color: var(--ask-ai-user-message-bg);\n  color: var(--ask-ai-user-message-text);\n}\n\n.message_jxpo4.assistant_xU0-H {\n  background-color: var(--ask-ai-ai-message-bg);\n  color: var(--ask-ai-ai-message-text);\n}\n\n.messageText_neW3m {\n  font-size: 14px;\n  white-space: pre-wrap;\n}\n\n/* Markdown Styles */\n.markdown_mNC3q {\n  font-size: 14px;\n  line-height: 1.6;\n}\n\n.markdown_mNC3q > *:first-child {\n  margin-top: 0;\n}\n\n.markdown_mNC3q > *:last-child {\n  margin-bottom: 0;\n}\n\n/* 段落 */\n.markdown_mNC3q p {\n  display: block;\n  margin: 0.5em 0;\n}\n\n/* 标题 */\n.markdown_mNC3q h1,\n.markdown_mNC3q h2,\n.markdown_mNC3q h3,\n.markdown_mNC3q h4,\n.markdown_mNC3q h5,\n.markdown_mNC3q h6 {\n  display: block;\n  margin: 1em 0 0.5em;\n  font-weight: 600;\n  line-height: 1.3;\n}\n\n.markdown_mNC3q h1 {\n  font-size: 1.5em;\n}\n\n.markdown_mNC3q h2 {\n  font-size: 1.3em;\n}\n\n.markdown_mNC3q h3 {\n  font-size: 1.1em;\n}\n\n/* 无序列表 */\n.markdown_mNC3q ul {\n  display: block;\n  margin: 0.5em 0;\n  padding-left: 1.5em;\n  list-style-type: disc;\n  list-style-position: outside;\n}\n\n/* 有序列表 */\n.markdown_mNC3q ol {\n  display: block;\n  margin: 0.5em 0;\n  padding-left: 1.5em;\n  list-style-type: decimal;\n  list-style-position: outside;\n}\n\n/* 嵌套列表 */\n.markdown_mNC3q ul ul {\n  list-style-type: circle;\n}\n\n.markdown_mNC3q ul ul ul {\n  list-style-type: square;\n}\n\n.markdown_mNC3q ol ol {\n  list-style-type: lower-alpha;\n}\n\n.markdown_mNC3q ol ol ol {\n  list-style-type: lower-roman;\n}\n\n/* 列表项 */\n.markdown_mNC3q li {\n  display: list-item;\n  margin: 0.25em 0;\n}\n\n/* 文本样式 */\n.markdown_mNC3q strong,\n.markdown_mNC3q b {\n  font-weight: bold;\n}\n\n.markdown_mNC3q em,\n.markdown_mNC3q i {\n  font-style: italic;\n}\n\n.markdown_mNC3q u {\n  text-decoration: underline;\n}\n\n.markdown_mNC3q s,\n.markdown_mNC3q del {\n  text-decoration: line-through;\n}\n\n.markdown_mNC3q code {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n  font-size: 0.9em;\n  padding: 0.15em 0.4em;\n  background-color: var(--ask-ai-border);\n  border-radius: 4px;\n}\n\n.markdown_mNC3q pre {\n  margin: 0.75em 0;\n  padding: 0.75em 1em;\n  background-color: var(--ask-ai-border);\n  border-radius: var(--ask-ai-radius-md);\n  overflow-x: auto;\n}\n\n.markdown_mNC3q pre code {\n  padding: 0;\n  background-color: transparent;\n  border-radius: 0;\n  font-size: 0.85em;\n}\n\n.markdown_mNC3q blockquote {\n  margin: 0.5em 0;\n  padding: 0.5em 1em;\n  border-left: 3px solid var(--ask-ai-primary);\n  background-color: var(--ask-ai-border);\n  border-radius: 0 var(--ask-ai-radius-sm) var(--ask-ai-radius-sm) 0;\n}\n\n.markdown_mNC3q blockquote p {\n  margin: 0;\n}\n\n.markdown_mNC3q a {\n  color: var(--ask-ai-primary);\n  text-decoration: none;\n}\n\n.markdown_mNC3q a:hover {\n  text-decoration: underline;\n}\n\n.markdown_mNC3q table {\n  width: 100%;\n  margin: 0.75em 0;\n  border-collapse: collapse;\n  font-size: 0.9em;\n}\n\n.markdown_mNC3q th,\n.markdown_mNC3q td {\n  padding: 0.5em 0.75em;\n  border: 1px solid var(--ask-ai-border);\n  text-align: left;\n}\n\n.markdown_mNC3q th {\n  background-color: var(--ask-ai-border);\n  font-weight: 600;\n}\n\n.markdown_mNC3q hr {\n  margin: 1em 0;\n  border: none;\n  border-top: 1px solid var(--ask-ai-border);\n}\n\n.markdown_mNC3q img {\n  max-width: 100%;\n  height: auto;\n  border-radius: var(--ask-ai-radius-md);\n}\n\n.cursor_9Dhwg {\n  display: inline-block;\n  width: 2px;\n  height: 16px;\n  margin-left: 4px;\n  background-color: currentColor;\n  animation: pulse_STM-e 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n@keyframes pulse_STM-e {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n}\n\n/* Error */\n.error_uFX9a {\n  padding: 16px;\n  background-color: rgba(220, 38, 38, 0.1);\n  color: var(--ask-ai-error);\n  border-radius: var(--ask-ai-radius-md);\n  font-size: 14px;\n}\n\n/* Input Area */\n.inputForm_nC0l- {\n  border-top: 1px solid var(--ask-ai-border);\n  padding: 16px;\n}\n\n.inputWrapper_zGeKy {\n  display: flex;\n  gap: 8px;\n  align-items: flex-end;\n}\n\n.input_7lMOc {\n  flex: 1;\n  padding: 8px 16px;\n  font-size: 14px;\n  background-color: var(--ask-ai-background);\n  border: 1px solid var(--ask-ai-border);\n  border-radius: var(--ask-ai-radius-md);\n  color: var(--ask-ai-foreground);\n  font-family: inherit;\n  resize: none;\n  min-height: 40px;\n  max-height: 200px;\n  line-height: 1.5;\n  overflow-y: auto;\n}\n\n.input_7lMOc:focus {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--ask-ai-primary);\n}\n\n.input_7lMOc:disabled {\n  opacity: 0.5;\n}\n\n.submitButton_2XrPY {\n  padding: 8px 16px;\n  font-size: 14px;\n  background-color: var(--ask-ai-primary);\n  color: #ffffff;\n  border: none;\n  border-radius: var(--ask-ai-radius-md);\n  cursor: pointer;\n  transition: all var(--ask-ai-transition);\n}\n\n.submitButton_2XrPY:hover:not(:disabled) {\n  background-color: var(--ask-ai-primary-hover);\n}\n\n.submitButton_2XrPY:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n";
+var styles = {"container":"container_FRFCj","messagesArea":"messagesArea_Hi-49","welcomeScreen":"welcomeScreen_fJ8-E","welcomeMessage":"welcomeMessage_unMIK","exampleQuestionsContainer":"exampleQuestionsContainer_RBWq6","exampleQuestionsTitle":"exampleQuestionsTitle_Vurj8","exampleButton":"exampleButton_6sOzR","messageWrapper":"messageWrapper_nsQr8","user":"user_s1Gzu","assistant":"assistant_xU0-H","message":"message_jxpo4","messageText":"messageText_neW3m","markdown":"markdown_mNC3q","cursor":"cursor_9Dhwg","pulse":"pulse_STM-e","error":"error_uFX9a","inputForm":"inputForm_nC0l-","inputWrapper":"inputWrapper_zGeKy","input":"input_7lMOc","submitButton":"submitButton_2XrPY"};
+styleInject(css_248z$2);
+
+function ChatContainer({ texts, exampleQuestions, onMessage, onError, messages, isStreaming, error, sendMessage, input, setInput, }) {
+    const textareaRef = React__namespace.useRef(null);
+    const messagesAreaRef = React__namespace.useRef(null);
+    const shouldAutoScrollRef = React__namespace.useRef(true); // Track if auto-scroll is enabled
+    // Check if user is at the bottom of the messages area
+    const isAtBottom = React__namespace.useCallback(() => {
+        const messagesArea = messagesAreaRef.current;
+        if (!messagesArea)
+            return true;
+        const threshold = 50; // pixels from bottom to consider "at bottom"
+        const scrollBottom = messagesArea.scrollHeight - messagesArea.scrollTop - messagesArea.clientHeight;
+        return scrollBottom < threshold;
+    }, []);
+    // Scroll to bottom of messages area
+    const scrollToBottom = React__namespace.useCallback(() => {
+        const messagesArea = messagesAreaRef.current;
+        if (messagesArea) {
+            messagesArea.scrollTop = messagesArea.scrollHeight;
+        }
+    }, []);
+    // Handle user scroll events
+    const handleScroll = React__namespace.useCallback(() => {
+        const atBottom = isAtBottom();
+        shouldAutoScrollRef.current = atBottom;
+    }, [isAtBottom]);
+    // Auto-scroll when messages change (if enabled)
+    React__namespace.useEffect(() => {
+        if (shouldAutoScrollRef.current) {
+            scrollToBottom();
+        }
+    }, [messages, scrollToBottom]);
+    // Auto-resize textarea based on content
+    const adjustTextareaHeight = React__namespace.useCallback(() => {
+        const textarea = textareaRef.current;
+        if (textarea) {
+            textarea.style.height = 'auto';
+            textarea.style.height = `${textarea.scrollHeight}px`;
+        }
+    }, []);
+    // Call onError callback when error occurs
+    React__namespace.useEffect(() => {
+        if (error && onError) {
+            onError(error);
+        }
+    }, [error, onError]);
+    // Call onMessage callback when new message arrives
+    React__namespace.useEffect(() => {
+        if (messages.length > 0 && onMessage) {
+            onMessage(messages[messages.length - 1]);
+        }
+    }, [messages, onMessage]);
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        if (!input.trim() || isStreaming)
+            return;
+        // Enable auto-scroll for new user message
+        shouldAutoScrollRef.current = true;
+        await sendMessage(input);
+        setInput('');
+        // Reset textarea height after submission
+        setTimeout(() => {
+            if (textareaRef.current) {
+                textareaRef.current.style.height = 'auto';
+            }
+        }, 0);
+    };
+    const handleInputChange = (e) => {
+        setInput(e.target.value);
+        adjustTextareaHeight();
+    };
+    const handleKeyDown = (e) => {
+        // Submit on Enter (without Shift)
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            if (input.trim() && !isStreaming) {
+                handleSubmit(e);
+            }
+        }
+        // Allow Shift+Enter for new line (default textarea behavior)
+    };
+    const handleExampleClick = async (question) => {
+        if (isStreaming)
+            return;
+        // Enable auto-scroll for new user message
+        shouldAutoScrollRef.current = true;
+        await sendMessage(question);
+    };
+    const inputPlaceholder = texts?.inputPlaceholder || 'Type your question...';
+    const welcomeMessage = texts?.welcomeMessage || 'Hi! How can I help you today?';
+    const exampleQuestionsTitle = texts?.exampleQuestionsTitle || 'Example questions:';
+    return (jsxRuntime.jsxs("div", { className: styles.container, children: [jsxRuntime.jsxs("div", { ref: messagesAreaRef, onScroll: handleScroll, className: styles.messagesArea, children: [messages.length === 0 ? (
+                    // Welcome Screen
+                    jsxRuntime.jsxs("div", { className: styles.welcomeScreen, children: [jsxRuntime.jsx("p", { className: styles.welcomeMessage, children: welcomeMessage }), exampleQuestions && exampleQuestions.length > 0 && (jsxRuntime.jsxs("div", { className: styles.exampleQuestionsContainer, children: [jsxRuntime.jsx("p", { className: styles.exampleQuestionsTitle, children: exampleQuestionsTitle }), exampleQuestions.map((question, index) => (jsxRuntime.jsx("button", { onClick: () => handleExampleClick(question), className: styles.exampleButton, children: question }, index)))] }))] })) : (
+                    // Messages
+                    jsxRuntime.jsx(jsxRuntime.Fragment, { children: messages.map((message) => (jsxRuntime.jsx("div", { className: `${styles.messageWrapper} ${styles[message.role]}`, children: jsxRuntime.jsx("div", { className: `${styles.message} ${styles[message.role]}`, children: message.role === 'assistant' ? (jsxRuntime.jsxs("div", { className: styles.markdown, children: [jsxRuntime.jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], children: message.content }), message.isStreaming && (jsxRuntime.jsx("span", { className: styles.cursor }))] })) : (jsxRuntime.jsx("p", { className: styles.messageText, children: message.content })) }) }, message.id))) })), error && (jsxRuntime.jsx("div", { className: styles.error, children: error.message }))] }), jsxRuntime.jsx("form", { onSubmit: handleSubmit, className: styles.inputForm, children: jsxRuntime.jsxs("div", { className: styles.inputWrapper, children: [jsxRuntime.jsx("textarea", { ref: textareaRef, value: input, onChange: handleInputChange, onKeyDown: handleKeyDown, placeholder: inputPlaceholder, disabled: isStreaming, className: styles.input, rows: 1 }), jsxRuntime.jsx("button", { type: "submit", disabled: !input.trim() || isStreaming, className: styles.submitButton, children: isStreaming ? 'Sending...' : 'Send' })] }) })] }));
+}
+
+function Widget(props) {
+    const { apiUrl, drawerPosition = 'right', drawerWidth = 600, theme = 'light', texts = {}, exampleQuestions = [], systemPrompt, hotkey, enableHotkey = true, onOpen, onClose, onMessage, onError, className, style, children, } = props;
+    const [isOpen, setIsOpen] = React__namespace.useState(false);
+    const [apiClient] = React__namespace.useState(() => new APIClient(apiUrl));
+    // Lift chat state to Widget level to persist across drawer open/close
+    const { messages, isStreaming, error, sendMessage } = useChat({ apiClient, systemPrompt });
+    // Input state also needs to persist
+    const [input, setInput] = React__namespace.useState('');
+    // Handle drawer open
+    const handleOpen = React__namespace.useCallback(() => {
+        setIsOpen(true);
+        onOpen?.();
+    }, [onOpen]);
+    // Handle drawer close
+    const handleClose = React__namespace.useCallback(() => {
+        setIsOpen(false);
+        onClose?.();
+    }, [onClose]);
+    // Handle keyboard shortcut
+    React__namespace.useEffect(() => {
+        if (!enableHotkey || !hotkey)
+            return;
+        const handleKeyDown = (e) => {
+            const keys = hotkey.toLowerCase().split('+');
+            const ctrl = keys.includes('ctrl') || keys.includes('control');
+            const cmd = keys.includes('cmd') || keys.includes('command') || keys.includes('meta');
+            const shift = keys.includes('shift');
+            const alt = keys.includes('alt');
+            const key = keys[keys.length - 1];
+            const ctrlPressed = ctrl && (e.ctrlKey || e.metaKey);
+            const cmdPressed = cmd && (e.metaKey || e.ctrlKey);
+            const shiftPressed = !shift || e.shiftKey;
+            const altPressed = !alt || e.altKey;
+            if ((ctrlPressed || cmdPressed) && shiftPressed && altPressed && e.key.toLowerCase() === key) {
+                e.preventDefault();
+                setIsOpen((prev) => !prev);
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [enableHotkey, hotkey]);
+    return (jsxRuntime.jsxs("div", { className: `ask-ai ${className || ''} ${theme === 'dark' ? 'dark' : ''}`, style: style, children: [children && React__namespace.isValidElement(children) ? (React__namespace.cloneElement(children, {
+                ...children.props,
+                onClick: (e) => {
+                    // Call existing onClick if present
+                    const existingOnClick = children.props?.onClick;
+                    if (existingOnClick) {
+                        existingOnClick(e);
+                    }
+                    // Then call our handleOpen
+                    handleOpen();
+                },
+            })) : (jsxRuntime.jsx(Trigger, { onClick: handleOpen, text: texts.triggerButtonText, ariaLabel: texts.triggerButtonAriaLabel })), jsxRuntime.jsx(Drawer, { isOpen: isOpen, onClose: handleClose, position: drawerPosition, width: drawerWidth, title: texts.drawerTitle, closeAriaLabel: texts.drawerCloseAriaLabel, theme: theme, children: jsxRuntime.jsx(ChatContainer, { texts: texts, exampleQuestions: exampleQuestions, onMessage: onMessage, onError: onError, messages: messages, isStreaming: isStreaming, error: error, sendMessage: sendMessage, input: input, setInput: setInput }) })] }));
+}
+
+var css_248z$1 = "/* CSS 变量定义 - 亮色主题（默认） */\n.ask-ai {\n  /* 颜色 */\n  --ask-ai-primary: #2563eb;\n  --ask-ai-primary-hover: #1d4ed8;\n  --ask-ai-background: #ffffff;\n  --ask-ai-foreground: #0f172a;\n  --ask-ai-muted: #64748b;\n  --ask-ai-border: #e2e8f0;\n  --ask-ai-error: #dc2626;\n\n  /* 用户消息 */\n  --ask-ai-user-message-bg: #2563eb;\n  --ask-ai-user-message-text: #ffffff;\n\n  /* AI 消息 */\n  --ask-ai-ai-message-bg: #f1f5f9;\n  --ask-ai-ai-message-text: #0f172a;\n\n  /* 字体 */\n  --ask-ai-font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  --ask-ai-font-size-base: 14px;\n  --ask-ai-line-height: 1.5;\n\n  /* 间距 */\n  --ask-ai-spacing-xs: 4px;\n  --ask-ai-spacing-sm: 8px;\n  --ask-ai-spacing-md: 16px;\n  --ask-ai-spacing-lg: 24px;\n\n  /* 圆角 */\n  --ask-ai-radius-sm: 4px;\n  --ask-ai-radius-md: 8px;\n  --ask-ai-radius-lg: 12px;\n\n  /* 阴影 */\n  --ask-ai-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n\n  /* 动画 */\n  --ask-ai-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* 明确指定暗色主题 */\n.ask-ai.dark {\n  --ask-ai-primary: #3b82f6;\n  --ask-ai-primary-hover: #2563eb;\n  --ask-ai-background: #0f172a;\n  --ask-ai-foreground: #f1f5f9;\n  --ask-ai-muted: #94a3b8;\n  --ask-ai-border: #334155;\n  --ask-ai-ai-message-bg: #1e293b;\n  --ask-ai-ai-message-text: #f1f5f9;\n  --ask-ai-error: #ef4444;\n}\n";
+styleInject(css_248z$1);
+
+var css_248z = "/* 全局样式 - 所有样式都在 .ask-ai 命名空间下 */\n\n/* 基础样式重置 */\n.ask-ai *,\n.ask-ai *::before,\n.ask-ai *::after {\n  box-sizing: border-box;\n}\n\n.ask-ai {\n  font-family: var(--ask-ai-font-family);\n  font-size: var(--ask-ai-font-size-base);\n  line-height: var(--ask-ai-line-height);\n  color: var(--ask-ai-foreground);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n/* 确保组件不受外部样式影响 */\n.ask-ai button {\n  font-family: inherit;\n}\n\n.ask-ai input,\n.ask-ai textarea {\n  font-family: inherit;\n  font-size: inherit;\n}\n\n/* 滚动条样式 */\n.ask-ai ::-webkit-scrollbar {\n  width: 8px;\n  height: 8px;\n}\n\n.ask-ai ::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.ask-ai ::-webkit-scrollbar-thumb {\n  background: var(--ask-ai-border);\n  border-radius: var(--ask-ai-radius-sm);\n}\n\n.ask-ai ::-webkit-scrollbar-thumb:hover {\n  background: var(--ask-ai-muted);\n}\n";
+styleInject(css_248z);
+
+exports.APIClient = APIClient;
+exports.AskAIWidget = Widget;
+exports.useChat = useChat;
+exports.useSSE = useSSE;
+exports.useSession = useSession;
+//# sourceMappingURL=index.cjs.js.map