@kodaris/krubble-app-components 1.0.61 → 1.0.63

package/dist/chatbot.js

@@ -0,0 +1,1320 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css, nothing } from 'lit';
+import { customElement, property, state, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+/**
+ * AI chatbot component with SSE streaming and native browser action execution.
+ *
+ * Accepts a `send` callback that returns a streaming Response (SSE format).
+ * Parses the stream for text tokens, status updates, errors, and frontend actions.
+ * When an ACTION event arrives, dispatches a cancelable `action` custom event.
+ * If not prevented, executes the native browser action (reload, navigate, etc.).
+ *
+ * ## SSE Stream Format
+ * The component expects `data:` lines with JSON payloads containing a `type` field:
+ * - `STATUS` — `{ type: "STATUS", message: "Thinking..." }`
+ * - `RESPONSE_PART` — `{ type: "RESPONSE_PART", message: "token text" }`
+ * - `ACTION` — `{ type: "ACTION", action: "RELOAD" }` (see KRChatbotAction)
+ * - `ERROR` — `{ type: "ERROR", message: "Something went wrong" }`
+ * - `HEARTBEAT` — `{ type: "HEARTBEAT" }` (ignored)
+ *
+ * The final event should include `finished: true` to signal stream completion.
+ *
+ * ## Usage
+ * ```html
+ * <kr-chatbot
+ *   title="AI Assistant"
+ *   .send=${(params) => {
+ *     return fetch('/api/ai/chat/stream', {
+ *       method: 'POST',
+ *       headers: { 'Content-Type': 'application/json', 'Accept': 'text/event-stream' },
+ *       credentials: 'include',
+ *       body: JSON.stringify({ userText: params.message })
+ *     });
+ *   }}
+ * ></kr-chatbot>
+ * ```
+ *
+ * @slot - Optional slot content displayed above the messages area
+ *
+ * @fires message-submit - When the user sends a message. Cancelable. Detail: `{ message: string }`
+ * @fires action - When the AI requests a frontend action. Cancelable. Detail: `{ action: KRChatbotAction }`
+ */
+let KRChatbot = class KRChatbot extends LitElement {
+    constructor() {
+        super(...arguments);
+        // --- Private properties ---
+        this._reader = null;
+        this._decoder = new TextDecoder();
+        this._buffer = '';
+        this._userHasScrolledUp = false;
+        this._isDragging = false;
+        this._isResizing = false;
+        this._resizeDir = '';
+        this._dragStartX = 0;
+        this._dragStartY = 0;
+        this._dragStartLeft = 0;
+        this._dragStartTop = 0;
+        this._resizeStartW = 0;
+        this._resizeStartH = 0;
+        // --- @property (public API) ---
+        /**
+         * Callback function for sending messages. Receives the user's message and
+         * current conversation history. Must return a Response with a streaming SSE body.
+         */
+        this.send = null;
+        /**
+         * Callback function called when the user clears the conversation.
+         * Must return a Promise — messages are only cleared if it resolves.
+         */
+        this.clear = null;
+        /**
+         * Conversation messages. Can be set externally for initial messages.
+         * Updated internally as the conversation progresses.
+         */
+        this.messages = [];
+        /**
+         * Header title text.
+         */
+        this.title = 'AI Assistant';
+        /**
+         * Header subtitle text (shown below title with a green status dot).
+         */
+        this.subtitle = '';
+        /**
+         * Input placeholder text.
+         */
+        this.placeholder = 'Type a message...';
+        /**
+         * Whether the chat panel is open. Only relevant in floating mode.
+         */
+        this.opened = false;
+        // --- @state (internal) ---
+        this._inputValue = '';
+        this._isStreaming = false;
+        this._statusText = '';
+        this._error = '';
+        this._handleMouseMove = (e) => {
+            if (this._isDragging) {
+                let newLeft = this._dragStartLeft + (e.clientX - this._dragStartX);
+                let newTop = this._dragStartTop + (e.clientY - this._dragStartY);
+                const w = this._panelEl.offsetWidth;
+                const h = this._panelEl.offsetHeight;
+                newLeft = Math.max(-w + 48, Math.min(newLeft, window.innerWidth - 48));
+                newTop = Math.max(-h + 48, Math.min(newTop, window.innerHeight - 48));
+                this._panelEl.style.left = newLeft + 'px';
+                this._panelEl.style.top = newTop + 'px';
+            }
+            else if (this._isResizing) {
+                const dx = e.clientX - this._dragStartX;
+                const dy = e.clientY - this._dragStartY;
+                const minW = 340;
+                const minH = 380;
+                const maxW = window.innerWidth * 0.9;
+                const maxH = window.innerHeight - 72;
+                let newW = this._resizeStartW;
+                let newH = this._resizeStartH;
+                let newLeft = this._dragStartLeft;
+                let newTop = this._dragStartTop;
+                if (this._resizeDir.includes('e')) {
+                    newW = Math.max(minW, Math.min(this._resizeStartW + dx, maxW));
+                }
+                if (this._resizeDir.includes('w')) {
+                    const proposedW = this._resizeStartW - dx;
+                    if (proposedW >= minW && proposedW <= maxW) {
+                        newW = proposedW;
+                        newLeft = this._dragStartLeft + dx;
+                    }
+                }
+                if (this._resizeDir.includes('s')) {
+                    newH = Math.max(minH, Math.min(this._resizeStartH + dy, maxH));
+                }
+                if (this._resizeDir.includes('n')) {
+                    const proposedH = this._resizeStartH - dy;
+                    if (proposedH >= minH && proposedH <= maxH) {
+                        newH = proposedH;
+                        newTop = this._dragStartTop + dy;
+                    }
+                }
+                newLeft = Math.max(0, newLeft);
+                newTop = Math.max(0, newTop);
+                this._panelEl.style.width = newW + 'px';
+                this._panelEl.style.height = newH + 'px';
+                this._panelEl.style.left = newLeft + 'px';
+                this._panelEl.style.top = newTop + 'px';
+            }
+        };
+        this._handleMouseUp = () => {
+            if (this._isDragging) {
+                this._isDragging = false;
+                this._panelEl.classList.remove('chatbot__panel--dragging');
+            }
+            if (this._isResizing) {
+                this._isResizing = false;
+                this._panelEl.classList.remove('chatbot__panel--resizing');
+            }
+            document.removeEventListener('mousemove', this._handleMouseMove);
+            document.removeEventListener('mouseup', this._handleMouseUp);
+        };
+    }
+    // --- Lifecycle ---
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this._reader) {
+            this._reader.cancel();
+            this._reader = null;
+        }
+        document.removeEventListener('mousemove', this._handleMouseMove);
+        document.removeEventListener('mouseup', this._handleMouseUp);
+    }
+    updated(changed) {
+        if (changed.has('messages') || changed.has('_statusText')) {
+            if (!this._userHasScrolledUp && this._messagesEl) {
+                requestAnimationFrame(() => {
+                    if (this._messagesEl) {
+                        this._messagesEl.scrollTop = this._messagesEl.scrollHeight;
+                    }
+                });
+            }
+        }
+        if (changed.has('opened') && this.opened && this._inputEl) {
+            setTimeout(() => {
+                if (this._inputEl) {
+                    this._inputEl.focus();
+                }
+            }, 200);
+        }
+    }
+    // --- Public methods ---
+    /**
+     * Stops the current stream without clearing the conversation.
+     */
+    stop() {
+        this._handleStop();
+    }
+    // --- Private methods ---
+    _handleHeaderMouseDown(e) {
+        // Ignore clicks on buttons inside the header
+        if (e.target.closest('button')) {
+            return;
+        }
+        if (!this._panelEl) {
+            return;
+        }
+        this._isDragging = true;
+        this._panelEl.classList.add('chatbot__panel--dragging');
+        const rect = this._panelEl.getBoundingClientRect();
+        this._panelEl.style.left = rect.left + 'px';
+        this._panelEl.style.top = rect.top + 'px';
+        this._panelEl.style.right = 'auto';
+        this._panelEl.style.bottom = 'auto';
+        this._panelEl.style.position = 'fixed';
+        this._dragStartX = e.clientX;
+        this._dragStartY = e.clientY;
+        this._dragStartLeft = rect.left;
+        this._dragStartTop = rect.top;
+        e.preventDefault();
+        document.addEventListener('mousemove', this._handleMouseMove);
+        document.addEventListener('mouseup', this._handleMouseUp);
+    }
+    _handleResizeMouseDown(e) {
+        if (!this._panelEl) {
+            return;
+        }
+        this._isResizing = true;
+        this._resizeDir = e.currentTarget.dataset.dir || '';
+        this._panelEl.classList.add('chatbot__panel--resizing');
+        const rect = this._panelEl.getBoundingClientRect();
+        this._panelEl.style.left = rect.left + 'px';
+        this._panelEl.style.top = rect.top + 'px';
+        this._panelEl.style.right = 'auto';
+        this._panelEl.style.bottom = 'auto';
+        this._panelEl.style.position = 'fixed';
+        this._dragStartX = e.clientX;
+        this._dragStartY = e.clientY;
+        this._dragStartLeft = rect.left;
+        this._dragStartTop = rect.top;
+        this._resizeStartW = rect.width;
+        this._resizeStartH = rect.height;
+        e.preventDefault();
+        e.stopPropagation();
+        document.addEventListener('mousemove', this._handleMouseMove);
+        document.addEventListener('mouseup', this._handleMouseUp);
+    }
+    _handleToggle() {
+        this.opened = !this.opened;
+        // Reset position when opening so it returns to default bottom-right
+        if (this.opened && this._panelEl) {
+            this._panelEl.style.left = '';
+            this._panelEl.style.top = '';
+            this._panelEl.style.right = '';
+            this._panelEl.style.bottom = '';
+            this._panelEl.style.width = '';
+            this._panelEl.style.height = '';
+            this._panelEl.style.position = '';
+        }
+    }
+    _handleInputChange(e) {
+        this._inputValue = e.target.value;
+        // Auto-resize textarea
+        const textarea = e.target;
+        textarea.style.height = 'auto';
+        textarea.style.height = Math.min(textarea.scrollHeight, 120) + 'px';
+    }
+    _handleKeyDown(e) {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            this._handleSubmit();
+        }
+    }
+    _handleSubmit() {
+        if (!this._inputValue.trim() || !this.send || this._isStreaming) {
+            return;
+        }
+        const messageText = this._inputValue.trim();
+        const submitEvent = new CustomEvent('message-submit', {
+            detail: {
+                message: messageText,
+            },
+            bubbles: true,
+            composed: true,
+            cancelable: true,
+        });
+        this.dispatchEvent(submitEvent);
+        if (submitEvent.defaultPrevented) {
+            return;
+        }
+        this.messages = [...this.messages, {
+                role: 'user',
+                content: messageText,
+            }];
+        this._inputValue = '';
+        this._error = '';
+        this._userHasScrolledUp = false;
+        // Reset textarea height
+        if (this._inputEl) {
+            this._inputEl.style.height = 'auto';
+        }
+        // Add empty assistant message to stream into
+        this.messages = [...this.messages, {
+                role: 'assistant',
+                content: '',
+            }];
+        this._isStreaming = true;
+        this._statusText = '';
+        this.send({
+            message: messageText,
+            messages: this.messages.slice(0, -1),
+        }).then((response) => {
+            if (!response.ok) {
+                this._handleStreamError('Request failed: ' + response.status);
+                return;
+            }
+            if (!response.body) {
+                this._handleStreamError('No response body');
+                return;
+            }
+            this._reader = response.body.getReader();
+            this._decoder = new TextDecoder();
+            this._buffer = '';
+            this._readStreamChunk();
+        }).catch((err) => {
+            if (err.name !== 'AbortError') {
+                this._handleStreamError(err.message);
+            }
+        });
+    }
+    _handleStop() {
+        if (this._reader) {
+            this._reader.cancel();
+            this._reader = null;
+        }
+        this._isStreaming = false;
+        this._statusText = '';
+    }
+    _handleClear() {
+        if (!this.clear) {
+            return;
+        }
+        this.clear().then(() => {
+            if (this._reader) {
+                this._reader.cancel();
+                this._reader = null;
+            }
+            this.messages = [];
+            this._isStreaming = false;
+            this._statusText = '';
+            this._error = '';
+            this._inputValue = '';
+            this._userHasScrolledUp = false;
+        });
+    }
+    _handleMessagesScroll(e) {
+        const container = e.target;
+        const distanceFromBottom = container.scrollHeight - container.scrollTop - container.clientHeight;
+        if (distanceFromBottom > 50) {
+            this._userHasScrolledUp = true;
+        }
+        else {
+            this._userHasScrolledUp = false;
+        }
+    }
+    _handleErrorDismiss() {
+        this._error = '';
+    }
+    _readStreamChunk() {
+        if (!this._reader) {
+            return;
+        }
+        this._reader.read().then((result) => {
+            if (result.done) {
+                this._isStreaming = false;
+                this._statusText = '';
+                this._reader = null;
+                return;
+            }
+            this._buffer = this._buffer + this._decoder.decode(result.value, { stream: true });
+            const events = this._buffer.split('\n\n');
+            this._buffer = events.pop() || '';
+            for (let i = 0; i < events.length; i++) {
+                if (!events[i].trim()) {
+                    continue;
+                }
+                const lines = events[i].split('\n');
+                for (let j = 0; j < lines.length; j++) {
+                    if (!lines[j].startsWith('data:')) {
+                        continue;
+                    }
+                    const raw = lines[j].slice(5).trim();
+                    if (!raw) {
+                        continue;
+                    }
+                    let data;
+                    try {
+                        data = JSON.parse(raw);
+                    }
+                    catch {
+                        continue;
+                    }
+                    if (data.type === 'STATUS') {
+                        if (data.message) {
+                            this._statusText = String(data.message);
+                        }
+                    }
+                    else if (data.type === 'REASONING_PART') {
+                        if (data.message) {
+                            const lastIndex = this.messages.length - 1;
+                            if (lastIndex >= 0 && this.messages[lastIndex].role === 'assistant') {
+                                if (!this.messages[lastIndex].reasoning) {
+                                    this.messages[lastIndex].reasoning = '';
+                                }
+                                this.messages[lastIndex].reasoning += String(data.message);
+                                this.requestUpdate();
+                            }
+                        }
+                    }
+                    else if (data.type === 'RESPONSE_PART') {
+                        if (data.message) {
+                            this._statusText = '';
+                            const lastIndex = this.messages.length - 1;
+                            if (lastIndex >= 0 && this.messages[lastIndex].role === 'assistant') {
+                                this.messages[lastIndex].content += String(data.message);
+                                this.requestUpdate();
+                            }
+                        }
+                    }
+                    else if (data.type === 'ACTION') {
+                        const action = data;
+                        const actionEvent = new CustomEvent('action', {
+                            detail: {
+                                action: action,
+                            },
+                            bubbles: true,
+                            composed: true,
+                            cancelable: true,
+                        });
+                        this.dispatchEvent(actionEvent);
+                        if (!actionEvent.defaultPrevented) {
+                            if (action.action === 'RELOAD') {
+                                location.reload();
+                            }
+                            else if (action.action === 'NAVIGATE') {
+                                if (action.data && action.data.url) {
+                                    window.location.href = action.data.url;
+                                }
+                            }
+                            else if (action.action === 'OPEN_TAB') {
+                                if (action.data && action.data.url) {
+                                    window.open(action.data.url, '_blank');
+                                }
+                            }
+                            else if (action.action === 'UPDATE_HTML') {
+                                if (action.data && action.data.selector && action.data.html) {
+                                    const el = document.querySelector(action.data.selector);
+                                    if (el) {
+                                        el.innerHTML = action.data.html;
+                                    }
+                                }
+                            }
+                            else if (action.action === 'SCROLL_TO') {
+                                if (action.data && action.data.selector) {
+                                    const el = document.querySelector(action.data.selector);
+                                    if (el) {
+                                        el.scrollIntoView({ behavior: 'smooth' });
+                                    }
+                                }
+                            }
+                        }
+                    }
+                    else if (data.type === 'ERROR') {
+                        this._handleStreamError(String(data.message || 'Unknown error'));
+                    }
+                    if (data.finished) {
+                        this._isStreaming = false;
+                        this._statusText = '';
+                        this._reader = null;
+                    }
+                }
+            }
+            this._readStreamChunk();
+        }).catch((err) => {
+            if (err.name !== 'AbortError') {
+                this._handleStreamError(err.message);
+            }
+        });
+    }
+    _handleStreamError(message) {
+        this._isStreaming = false;
+        this._statusText = '';
+        this._error = message;
+        if (this._reader) {
+            this._reader.cancel();
+            this._reader = null;
+        }
+        // Remove the empty assistant message if it has no content
+        if (this.messages.length > 0) {
+            const lastMessage = this.messages[this.messages.length - 1];
+            if (lastMessage.role === 'assistant' && !lastMessage.content) {
+                this.messages = this.messages.slice(0, -1);
+            }
+        }
+    }
+    /**
+     * Lightweight text formatting for assistant messages.
+     * Handles code blocks, inline code, bold, and line breaks.
+     * Escapes HTML entities first to prevent XSS.
+     */
+    _formatAssistantContent(text) {
+        // Escape HTML entities
+        let escaped = text
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;')
+            .replace(/'/g, '&#039;');
+        // Code blocks: ```...```
+        escaped = escaped.replace(/```(\w*)\n?([\s\S]*?)```/g, '<pre><code>$2</code></pre>');
+        // Inline code: `...`
+        escaped = escaped.replace(/`([^`]+)`/g, '<code>$1</code>');
+        // Bold: **...**
+        escaped = escaped.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+        // Split on code blocks to only convert newlines outside of pre tags
+        const parts = escaped.split(/(<pre><code>[\s\S]*?<\/code><\/pre>)/g);
+        for (let i = 0; i < parts.length; i++) {
+            // Skip code blocks (odd indices from the split)
+            if (i % 2 === 0) {
+                // Convert double newlines to paragraph breaks
+                parts[i] = parts[i].replace(/\n\n/g, '</p><p>');
+                // Convert single newlines to line breaks
+                parts[i] = parts[i].replace(/\n/g, '<br>');
+            }
+        }
+        escaped = parts.join('');
+        // Wrap in paragraph if we inserted paragraph breaks
+        if (escaped.includes('</p><p>')) {
+            escaped = '<p>' + escaped + '</p>';
+        }
+        return escaped;
+    }
+    // --- Render ---
+    render() {
+        return html `
+      <button
+        class=${classMap({
+            'chatbot__toggle': true,
+            'chatbot__toggle--hidden': this.opened,
+        })}
+        @click=${this._handleToggle}
+        title="Open chat"
+      >
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" class="chatbot__toggle-icon">
+          <path d="M12 2C6.48 2 2 6.03 2 11c0 2.61 1.19 4.94 3.05 6.55L4 22l4.8-2.4C9.82 19.85 10.88 20 12 20c5.52 0 10-4.03 10-9S17.52 2 12 2z"/>
+          <path d="M8 11h.01M12 11h.01M16 11h.01" stroke-width="2.5"/>
+        </svg>
+      </button>
+
+      <div class=${classMap({
+            'chatbot__panel': true,
+            'chatbot__panel--opened': this.opened,
+        })}>
+        <div class="chatbot__resize chatbot__resize--n" data-dir="n" @mousedown=${this._handleResizeMouseDown}></div>
+        <div class="chatbot__resize chatbot__resize--s" data-dir="s" @mousedown=${this._handleResizeMouseDown}></div>
+        <div class="chatbot__resize chatbot__resize--w" data-dir="w" @mousedown=${this._handleResizeMouseDown}></div>
+        <div class="chatbot__resize chatbot__resize--e" data-dir="e" @mousedown=${this._handleResizeMouseDown}></div>
+        <div class="chatbot__resize chatbot__resize--nw" data-dir="nw" @mousedown=${this._handleResizeMouseDown}></div>
+        <div class="chatbot__resize chatbot__resize--ne" data-dir="ne" @mousedown=${this._handleResizeMouseDown}></div>
+        <div class="chatbot__resize chatbot__resize--sw" data-dir="sw" @mousedown=${this._handleResizeMouseDown}></div>
+        <div class="chatbot__resize chatbot__resize--se" data-dir="se" @mousedown=${this._handleResizeMouseDown}></div>
+        <div class="chatbot__header" @mousedown=${this._handleHeaderMouseDown}>
+          <div class="chatbot__header-left">
+            <div class="chatbot__header-drag-hint">
+              <span></span>
+              <span></span>
+              <span></span>
+            </div>
+            <div class="chatbot__header-info">
+              <span class="chatbot__header-title">${this.title}</span>
+              ${this.subtitle ? html `
+                <span class="chatbot__header-subtitle">${this.subtitle}</span>
+              ` : nothing}
+            </div>
+          </div>
+          <div class="chatbot__header-actions">
+            ${this.messages.length > 0 ? html `
+              <button class="chatbot__header-action" @click=${this._handleClear} title="Clear conversation">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="chatbot__header-action-icon">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
+                </svg>
+              </button>
+            ` : nothing}
+            <button class="chatbot__header-action" @click=${this._handleToggle} title="Close">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="chatbot__header-action-icon">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+        </div>
+
+        <div class="chatbot__messages" @scroll=${this._handleMessagesScroll}>
+          ${this.messages.length === 0 ? html `
+            <div class="chatbot__empty">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" class="chatbot__empty-icon">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.076-4.076a1.526 1.526 0 0 1 1.037-.443 48.282 48.282 0 0 0 5.68-.494c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z" />
+              </svg>
+              <span class="chatbot__empty-text">How can I help?</span>
+            </div>
+          ` : nothing}
+          ${this.messages.map((msg) => html `
+            <div class=${classMap({
+            'chatbot__message': true,
+            'chatbot__message--user': msg.role === 'user',
+            'chatbot__message--assistant': msg.role === 'assistant',
+        })}>
+              ${msg.reasoning ? html `
+                <details class="chatbot__reasoning">
+                  <summary>Thinking</summary>
+                  <div class="chatbot__reasoning-content">${msg.reasoning}</div>
+                </details>
+              ` : nothing}
+              <div class="chatbot__message-content">
+                ${msg.role === 'user'
+            ? msg.content
+            : unsafeHTML(this._formatAssistantContent(msg.content))}
+              </div>
+            </div>
+          `)}
+          ${this._statusText ? html `
+            <div class="chatbot__message chatbot__message--assistant">
+              <div class="chatbot__typing">
+                <span></span>
+                <span></span>
+                <span></span>
+              </div>
+            </div>
+          ` : nothing}
+        </div>
+
+        ${this._error ? html `
+          <div class="chatbot__error">
+            <span>${this._error}</span>
+            <button class="chatbot__error-dismiss" @click=${this._handleErrorDismiss}>
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="chatbot__error-dismiss-icon">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+        ` : nothing}
+
+        <div class="chatbot__footer">
+          <div class="chatbot__input-wrapper">
+            <button class="chatbot__input-plus" title="Attach">+</button>
+            <textarea
+              class="chatbot__input"
+              .value=${this._inputValue}
+              placeholder=${this.placeholder}
+              rows="1"
+              @input=${this._handleInputChange}
+              @keydown=${this._handleKeyDown}
+            ></textarea>
+            ${this._isStreaming ? html `
+              <button class="chatbot__stop" @click=${this._handleStop} title="Stop generating">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="chatbot__stop-icon">
+                  <rect x="6" y="6" width="12" height="12" rx="2" />
+                </svg>
+              </button>
+            ` : html `
+              <button
+                class=${classMap({
+            'chatbot__send': true,
+            'chatbot__send--disabled': !this._inputValue.trim(),
+        })}
+                @click=${this._handleSubmit}
+                title="Send message"
+              >
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" class="chatbot__send-icon">
+                  <path d="M12 19V5M5 12l7-7 7 7"/>
+                </svg>
+              </button>
+            `}
+          </div>
+        </div>
+      </div>
+    `;
+    }
+};
+KRChatbot.styles = css `
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
+    :host {
+      display: block;
+      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      font-size: 14px;
+      line-height: 1.6;
+
+      --kr-chatbot-primary: #163052;
+      --kr-chatbot-primary-hover: #1e4068;
+      --kr-chatbot-bg: #ffffff;
+      --kr-chatbot-border: #d9d9d9;
+      --kr-chatbot-text: #1a1a2e;
+      --kr-chatbot-text-secondary: #64668b;
+      --kr-chatbot-user-bg: #e9e9e980;
+      --kr-chatbot-user-text: #1a1a2e;
+      --kr-chatbot-error-bg: #fef2f2;
+      --kr-chatbot-error-text: #dc2626;
+      --kr-chatbot-success: #00b894;
+      --kr-chatbot-toggle-size: 56px;
+      --kr-chatbot-panel-width: 440px;
+      --kr-chatbot-panel-height: 620px;
+    }
+
+    :host {
+      position: fixed;
+      bottom: 24px;
+      right: 24px;
+      z-index: 10000;
+    }
+
+    /* Toggle button */
+    .chatbot__toggle {
+      width: var(--kr-chatbot-toggle-size);
+      height: var(--kr-chatbot-toggle-size);
+      border-radius: 18px;
+      background: var(--kr-chatbot-primary);
+      color: white;
+      border: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: 0 4px 24px rgba(22, 48, 82, 0.4);
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    .chatbot__toggle:hover {
+      transform: scale(1.05);
+      box-shadow: 0 6px 32px rgba(22, 48, 82, 0.5);
+    }
+
+    .chatbot__toggle--hidden {
+      transform: scale(0);
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    .chatbot__toggle-icon {
+      width: 26px;
+      height: 26px;
+    }
+
+    /* Panel */
+    .chatbot__panel {
+      display: none;
+      flex-direction: column;
+      background: var(--kr-chatbot-bg);
+      overflow: hidden;
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      width: var(--kr-chatbot-panel-width);
+      height: var(--kr-chatbot-panel-height);
+      max-height: calc(100vh - 72px);
+      border-radius: 16px;
+      box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08), 0 2px 12px rgba(0, 0, 0, 0.04);
+      border: 1px solid rgba(0, 0, 0, 0.08);
+      animation: chatbot-panel-in 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+      transform-origin: bottom right;
+    }
+
+    .chatbot__panel--opened {
+      display: flex;
+    }
+
+    @keyframes chatbot-panel-in {
+      from {
+        opacity: 0;
+        transform: scale(0.92) translateY(20px);
+      }
+      to {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+      }
+    }
+
+    /* Header */
+    .chatbot__header {
+      padding: 10px 16px;
+      background: var(--kr-chatbot-primary);
+      color: white;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      flex-shrink: 0;
+    }
+
+    .chatbot__header-left {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+
+    .chatbot__header-drag-hint {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      opacity: 0.35;
+    }
+
+    .chatbot__header-drag-hint span {
+      display: block;
+      width: 14px;
+      height: 2px;
+      background: white;
+      border-radius: 1px;
+    }
+
+    .chatbot__header-info {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .chatbot__header-title {
+      font-size: 13px;
+      font-weight: 600;
+      letter-spacing: -0.2px;
+    }
+
+    .chatbot__header-subtitle {
+      color: rgba(255, 255, 255, 0.5);
+      font-size: 11px;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .chatbot__header-subtitle::before {
+      content: '';
+      width: 5px;
+      height: 5px;
+      background: var(--kr-chatbot-success);
+      border-radius: 50%;
+    }
+
+    .chatbot__header-actions {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .chatbot__header-action {
+      width: 28px;
+      height: 28px;
+      background: transparent;
+      border: none;
+      color: rgba(255, 255, 255, 0.6);
+      border-radius: 8px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.15s;
+    }
+
+    .chatbot__header-action:hover {
+      background: rgba(255, 255, 255, 0.1);
+      color: white;
+    }
+
+    .chatbot__header-action-icon {
+      width: 16px;
+      height: 16px;
+    }
+
+    /* Messages */
+    .chatbot__messages {
+      flex: 1;
+      overflow-y: auto;
+      padding: 32px;
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+      scroll-behavior: smooth;
+      background: white;
+    }
+
+    .chatbot__messages::-webkit-scrollbar {
+      width: 4px;
+    }
+
+    .chatbot__messages::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    .chatbot__messages::-webkit-scrollbar-thumb {
+      background: rgba(0, 0, 0, 0.08);
+      border-radius: 2px;
+    }
+
+    .chatbot__empty {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      color: var(--kr-chatbot-text-secondary);
+      gap: 8px;
+    }
+
+    .chatbot__empty-icon {
+      width: 40px;
+      height: 40px;
+      opacity: 0.4;
+    }
+
+    .chatbot__empty-text {
+      font-size: 13px;
+    }
+
+    .chatbot__message {
+      display: flex;
+      flex-direction: column;
+      max-width: 100%;
+      animation: chatbot-msg-in 0.3s ease-out;
+    }
+
+    @keyframes chatbot-msg-in {
+      from {
+        opacity: 0;
+        transform: translateY(6px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    .chatbot__message--user {
+      align-self: flex-end;
+      align-items: flex-end;
+      max-width: 85%;
+    }
+
+    .chatbot__message--assistant {
+      align-self: flex-start;
+    }
+
+    .chatbot__message-content {
+      line-height: 1.7;
+      word-wrap: break-word;
+      overflow-wrap: break-word;
+    }
+
+    .chatbot__message--user .chatbot__message-content {
+      display: inline-block;
+      background: var(--kr-chatbot-user-bg);
+      color: var(--kr-chatbot-user-text);
+      padding: 10px 16px;
+      border-radius: 20px;
+      border-bottom-right-radius: 6px;
+      font-size: 14px;
+    }
+
+    .chatbot__message--assistant .chatbot__message-content {
+      background: transparent;
+      color: var(--kr-chatbot-text);
+      padding: 0;
+      font-size: 14px;
+    }
+
+    .chatbot__message--assistant .chatbot__message-content pre {
+      background: #1e1e1e;
+      color: #d4d4d4;
+      padding: 12px;
+      border-radius: 6px;
+      overflow-x: auto;
+      margin: 8px 0;
+      font-size: 13px;
+      line-height: 1.4;
+    }
+
+    .chatbot__message--assistant .chatbot__message-content code {
+      font-family: 'SF Mono', 'Fira Code', Monaco, monospace;
+      font-size: 13px;
+    }
+
+    .chatbot__message--assistant .chatbot__message-content :not(pre) > code {
+      background: rgba(0, 0, 0, 0.06);
+      padding: 2px 5px;
+      border-radius: 3px;
+    }
+
+    .chatbot__message--assistant .chatbot__message-content strong {
+      font-weight: 600;
+    }
+
+    .chatbot__message--assistant .chatbot__message-content p {
+      margin: 0 0 8px 0;
+    }
+
+    .chatbot__message--assistant .chatbot__message-content p:last-child {
+      margin-bottom: 0;
+    }
+
+    /* Reasoning */
+    .chatbot__reasoning {
+      margin-bottom: 8px;
+      border-radius: 6px;
+      background: rgba(0, 0, 0, 0.03);
+      font-size: 12px;
+    }
+
+    .chatbot__reasoning summary {
+      cursor: pointer;
+      padding: 6px 10px;
+      color: var(--kr-chatbot-text-secondary);
+      font-style: italic;
+      user-select: none;
+    }
+
+    .chatbot__reasoning-content {
+      padding: 6px 10px 10px;
+      color: var(--kr-chatbot-text-secondary);
+      line-height: 1.5;
+      white-space: pre-wrap;
+      word-wrap: break-word;
+    }
+
+    /* Status */
+    .chatbot__status {
+      font-size: 13px;
+      color: var(--kr-chatbot-text-secondary);
+      font-style: italic;
+    }
+
+    .chatbot__typing {
+      display: flex;
+      gap: 4px;
+      padding: 4px 0;
+    }
+
+    .chatbot__typing span {
+      width: 6px;
+      height: 6px;
+      background: var(--kr-chatbot-text-secondary);
+      border-radius: 50%;
+      animation: chatbot-typing 1.4s infinite;
+      opacity: 0.4;
+    }
+
+    .chatbot__typing span:nth-child(2) {
+      animation-delay: 0.2s;
+    }
+
+    .chatbot__typing span:nth-child(3) {
+      animation-delay: 0.4s;
+    }
+
+    @keyframes chatbot-typing {
+      0%, 60%, 100% {
+        opacity: 0.4;
+        transform: translateY(0);
+      }
+      30% {
+        opacity: 1;
+        transform: translateY(-4px);
+      }
+    }
+
+    /* Error */
+    .chatbot__error {
+      padding: 8px 16px;
+      background: var(--kr-chatbot-error-bg);
+      color: var(--kr-chatbot-error-text);
+      font-size: 13px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 8px;
+      flex-shrink: 0;
+    }
+
+    .chatbot__error-dismiss {
+      background: none;
+      border: none;
+      color: var(--kr-chatbot-error-text);
+      cursor: pointer;
+      padding: 2px;
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+    }
+
+    .chatbot__error-dismiss-icon {
+      width: 14px;
+      height: 14px;
+    }
+
+    /* Footer / Input */
+    .chatbot__footer {
+      padding: 12px 16px 16px;
+      flex-shrink: 0;
+      background: white;
+    }
+
+    .chatbot__input-wrapper {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      background: white;
+      border: 1px solid var(--kr-chatbot-border);
+      border-radius: 26px;
+      padding: 6px;
+      transition: border-color 0.2s, box-shadow 0.2s;
+    }
+
+    .chatbot__input-wrapper:focus-within {
+      border-color: #b0b0b0;
+      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04);
+    }
+
+    .chatbot__input-plus {
+      width: 34px;
+      height: 34px;
+      border: none;
+      background: transparent;
+      color: var(--kr-chatbot-text);
+      border-radius: 50%;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      font-size: 20px;
+      font-weight: 300;
+      transition: background 0.15s;
+    }
+
+    .chatbot__input-plus:hover {
+      background: #f8f9fc;
+    }
+
+    .chatbot__input {
+      flex: 1;
+      border: none;
+      outline: none;
+      resize: none;
+      font-family: inherit;
+      font-size: 15px;
+      line-height: 1.5;
+      padding: 4px 0;
+      min-height: 26px;
+      max-height: 120px;
+      background: transparent;
+      color: var(--kr-chatbot-text);
+    }
+
+    .chatbot__input::placeholder {
+      color: #b0b0b0;
+    }
+
+    .chatbot__send {
+      width: 34px;
+      height: 34px;
+      border-radius: 50%;
+      background: var(--kr-chatbot-primary);
+      color: white;
+      border: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      transition: all 0.15s;
+    }
+
+    .chatbot__send:hover {
+      background: var(--kr-chatbot-primary-hover);
+    }
+
+    .chatbot__send--disabled {
+      opacity: 0.4;
+      cursor: default;
+    }
+
+    .chatbot__send--disabled:hover {
+      background: var(--kr-chatbot-primary);
+    }
+
+    .chatbot__send-icon {
+      width: 16px;
+      height: 16px;
+    }
+
+    .chatbot__stop {
+      width: 34px;
+      height: 34px;
+      border-radius: 50%;
+      background: var(--kr-chatbot-error-text);
+      color: white;
+      border: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      transition: all 0.15s;
+    }
+
+    .chatbot__stop:hover {
+      background: #b91c1c;
+    }
+
+    .chatbot__stop-icon {
+      width: 14px;
+      height: 14px;
+    }
+
+    /* Header drag cursor */
+    .chatbot__header {
+      cursor: grab;
+      user-select: none;
+    }
+
+    .chatbot__header:active {
+      cursor: grabbing;
+    }
+
+    /* Drag / Resize states */
+    .chatbot__panel--dragging,
+    .chatbot__panel--resizing {
+      transition: none;
+      user-select: none;
+    }
+
+    .chatbot__panel--dragging {
+      box-shadow: 0 32px 96px rgba(0, 0, 0, 0.18), 0 12px 40px rgba(0, 0, 0, 0.1);
+    }
+
+    /* Resize handles */
+    .chatbot__resize {
+      position: absolute;
+      z-index: 10;
+    }
+
+    .chatbot__resize--n { top: -4px; left: 12px; right: 12px; height: 8px; cursor: n-resize; }
+    .chatbot__resize--s { bottom: -4px; left: 12px; right: 12px; height: 8px; cursor: s-resize; }
+    .chatbot__resize--w { left: -4px; top: 12px; bottom: 12px; width: 8px; cursor: w-resize; }
+    .chatbot__resize--e { right: -4px; top: 12px; bottom: 12px; width: 8px; cursor: e-resize; }
+    .chatbot__resize--nw { top: -4px; left: -4px; width: 16px; height: 16px; cursor: nw-resize; }
+    .chatbot__resize--ne { top: -4px; right: -4px; width: 16px; height: 16px; cursor: ne-resize; }
+    .chatbot__resize--sw { bottom: -4px; left: -4px; width: 16px; height: 16px; cursor: sw-resize; }
+    .chatbot__resize--se { bottom: -4px; right: -4px; width: 16px; height: 16px; cursor: se-resize; }
+
+    .chatbot__resize--se::after {
+      content: '';
+      position: absolute;
+      bottom: 7px;
+      right: 7px;
+      width: 10px;
+      height: 10px;
+      border-right: 2px solid rgba(0, 0, 0, 0.12);
+      border-bottom: 2px solid rgba(0, 0, 0, 0.12);
+      border-radius: 0 0 3px 0;
+    }
+  `;
+__decorate([
+    property({ attribute: false })
+], KRChatbot.prototype, "send", void 0);
+__decorate([
+    property({ attribute: false })
+], KRChatbot.prototype, "clear", void 0);
+__decorate([
+    property({ attribute: false })
+], KRChatbot.prototype, "messages", void 0);
+__decorate([
+    property({ type: String })
+], KRChatbot.prototype, "title", void 0);
+__decorate([
+    property({ type: String })
+], KRChatbot.prototype, "subtitle", void 0);
+__decorate([
+    property({ type: String })
+], KRChatbot.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], KRChatbot.prototype, "opened", void 0);
+__decorate([
+    state()
+], KRChatbot.prototype, "_inputValue", void 0);
+__decorate([
+    state()
+], KRChatbot.prototype, "_isStreaming", void 0);
+__decorate([
+    state()
+], KRChatbot.prototype, "_statusText", void 0);
+__decorate([
+    state()
+], KRChatbot.prototype, "_error", void 0);
+__decorate([
+    query('.chatbot__panel')
+], KRChatbot.prototype, "_panelEl", void 0);
+__decorate([
+    query('.chatbot__messages')
+], KRChatbot.prototype, "_messagesEl", void 0);
+__decorate([
+    query('.chatbot__input')
+], KRChatbot.prototype, "_inputEl", void 0);
+KRChatbot = __decorate([
+    customElement('kr-chatbot')
+], KRChatbot);
+export { KRChatbot };
+//# sourceMappingURL=chatbot.js.map