@kodaris/krubble-app-components 1.0.67 → 1.0.69

package/dist/chatbot.js

@@ -8,19 +8,19 @@ 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';
+import { marked } from 'marked';
 /**
- * AI chatbot component with SSE streaming and native browser action execution.
+ * AI chatbot component with SSE streaming.
  *
  * 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.).
+ * Parses the stream for text tokens, status updates, and errors.
+ * Dispatches a `stream-event` custom event for every SSE message so consumers can react.
  *
  * ## 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)
+ * - `TOOL_RESULT` — `{ type: "TOOL_RESULT", message: "tool_name", data: {...} }`
  * - `ERROR` — `{ type: "ERROR", message: "Something went wrong" }`
  * - `HEARTBEAT` — `{ type: "HEARTBEAT" }` (ignored)
  *
@@ -44,7 +44,7 @@ import { unsafeHTML } from 'lit/directives/unsafe-html.js';
  * @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 }`
+ * @fires stream-event - Dispatched for every SSE message received. Detail contains the parsed event data.
  */
 let KRChatbot = class KRChatbot extends LitElement {
     constructor() {
@@ -56,6 +56,7 @@ let KRChatbot = class KRChatbot extends LitElement {
         this._userHasScrolledUp = false;
         this._isDragging = false;
         this._isResizing = false;
+        this._overlay = null;
         this._resizeDir = '';
         this._dragStartX = 0;
         this._dragStartY = 0;
@@ -74,6 +75,11 @@ let KRChatbot = class KRChatbot extends LitElement {
          * Must return a Promise — messages are only cleared if it resolves.
          */
         this.clear = null;
+        /**
+         * Callback function called on init to load existing conversation messages.
+         * Must return a Promise that resolves with an array of KRChatbotMessage.
+         */
+        this.load = null;
         /**
          * Conversation messages. Can be set externally for initial messages.
          * Updated internally as the conversation progresses.
@@ -82,7 +88,7 @@ let KRChatbot = class KRChatbot extends LitElement {
         /**
          * Header title text.
          */
-        this.title = 'AI Assistant';
+        this.title = 'Kat';
         /**
          * Header subtitle text (shown below title with a green status dot).
          */
@@ -105,9 +111,8 @@ let KRChatbot = class KRChatbot extends LitElement {
                 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));
+                newTop = Math.max(0, Math.min(newTop, window.innerHeight - 48));
                 this._panelEl.style.left = newLeft + 'px';
                 this._panelEl.style.top = newTop + 'px';
             }
@@ -126,21 +131,15 @@ let KRChatbot = class KRChatbot extends LitElement {
                     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;
-                    }
+                    newW = Math.max(minW, Math.min(this._resizeStartW - dx, maxW));
+                    newLeft = this._dragStartLeft + (this._resizeStartW - newW);
                 }
                 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;
-                    }
+                    newH = Math.max(minH, Math.min(this._resizeStartH - dy, maxH));
+                    newTop = this._dragStartTop + (this._resizeStartH - newH);
                 }
                 newLeft = Math.max(0, newLeft);
                 newTop = Math.max(0, newTop);
@@ -153,17 +152,30 @@ let KRChatbot = class KRChatbot extends LitElement {
         this._handleMouseUp = () => {
             if (this._isDragging) {
                 this._isDragging = false;
-                this._panelEl.classList.remove('chatbot__panel--dragging');
+                this._panelEl.classList.remove('panel--dragging');
             }
             if (this._isResizing) {
                 this._isResizing = false;
-                this._panelEl.classList.remove('chatbot__panel--resizing');
+                this._panelEl.classList.remove('panel--resizing');
             }
+            this._hideOverlay();
             document.removeEventListener('mousemove', this._handleMouseMove);
             document.removeEventListener('mouseup', this._handleMouseUp);
+            this._saveState();
         };
     }
     // --- Lifecycle ---
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.load) {
+            this.load().then((messages) => {
+                if (messages && messages.length) {
+                    this.messages = messages;
+                }
+            }).catch(() => { });
+        }
+        this._restoreState();
+    }
     disconnectedCallback() {
         super.disconnectedCallback();
         if (this._reader) {
@@ -175,7 +187,7 @@ let KRChatbot = class KRChatbot extends LitElement {
     }
     updated(changed) {
         if (changed.has('messages') || changed.has('_statusText')) {
-            if (!this._userHasScrolledUp && this._messagesEl) {
+            if (!this._userHasScrolledUp && !this._isStreaming && this._messagesEl) {
                 requestAnimationFrame(() => {
                     if (this._messagesEl) {
                         this._messagesEl.scrollTop = this._messagesEl.scrollHeight;
@@ -199,6 +211,38 @@ let KRChatbot = class KRChatbot extends LitElement {
         this._handleStop();
     }
     // --- Private methods ---
+    /**
+     * Shows a full-viewport transparent overlay during drag/resize operations.
+     *
+     * This overlay solves a critical rendering issue when the chatbot is used inside
+     * a page that contains iframes (e.g., the AI editor shell where the page content
+     * is rendered in an iframe and the chatbot floats on top).
+     *
+     * Without the overlay, modifying the iframe's `pointer-events` style during drag
+     * (to prevent it from swallowing mousemove events) causes Chrome to recalculate
+     * compositing layers. This layer recalculation blocks the browser from repainting
+     * the chatbot panel's style changes (width/height/position) even though they are
+     * correctly applied to the DOM. The result is that the panel appears frozen while
+     * the user drags, despite the inline styles updating on every mousemove.
+     *
+     * The overlay approach avoids this entirely: instead of touching the iframe's styles,
+     * we place a transparent div (z-index 9999) above the iframe but below the chatbot
+     * (z-index 10000). This div intercepts all mouse events that would otherwise hit the
+     * iframe, without triggering any compositing layer changes on the iframe itself.
+     */
+    _showOverlay() {
+        if (!this._overlay) {
+            this._overlay = document.createElement('div');
+            this._overlay.style.cssText = 'position:fixed; inset:0; z-index:9999; display:none;';
+            document.body.appendChild(this._overlay);
+        }
+        this._overlay.style.display = 'block';
+    }
+    _hideOverlay() {
+        if (this._overlay) {
+            this._overlay.style.display = 'none';
+        }
+    }
     _handleHeaderMouseDown(e) {
         // Ignore clicks on buttons inside the header
         if (e.target.closest('button')) {
@@ -208,7 +252,8 @@ let KRChatbot = class KRChatbot extends LitElement {
             return;
         }
         this._isDragging = true;
-        this._panelEl.classList.add('chatbot__panel--dragging');
+        this._panelEl.classList.add('panel--dragging');
+        this._showOverlay();
         const rect = this._panelEl.getBoundingClientRect();
         this._panelEl.style.left = rect.left + 'px';
         this._panelEl.style.top = rect.top + 'px';
@@ -229,7 +274,8 @@ let KRChatbot = class KRChatbot extends LitElement {
         }
         this._isResizing = true;
         this._resizeDir = e.currentTarget.dataset.dir || '';
-        this._panelEl.classList.add('chatbot__panel--resizing');
+        this._panelEl.classList.add('panel--resizing');
+        this._showOverlay();
         const rect = this._panelEl.getBoundingClientRect();
         this._panelEl.style.left = rect.left + 'px';
         this._panelEl.style.top = rect.top + 'px';
@@ -249,16 +295,75 @@ let KRChatbot = class KRChatbot extends LitElement {
     }
     _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 = '';
+            this._applyStoredLayout();
+        }
+        this._saveState();
+    }
+    _saveState() {
+        try {
+            const state = { opened: String(this.opened) };
+            if (this._panelEl) {
+                const s = this._panelEl.style;
+                if (s.left) {
+                    state.left = s.left;
+                }
+                if (s.top) {
+                    state.top = s.top;
+                }
+                if (s.width) {
+                    state.width = s.width;
+                }
+                if (s.height) {
+                    state.height = s.height;
+                }
+                if (s.position) {
+                    state.position = s.position;
+                }
+            }
+            localStorage.setItem('kr-chatbot-state', JSON.stringify(state));
+        }
+        catch { /* localStorage not available */ }
+    }
+    _restoreState() {
+        try {
+            const raw = localStorage.getItem('kr-chatbot-state');
+            if (!raw) {
+                return;
+            }
+            const state = JSON.parse(raw);
+            if (state.opened === 'true') {
+                this.opened = true;
+                // Apply layout after first render
+                this.updateComplete.then(() => this._applyStoredLayout());
+            }
+        }
+        catch { /* localStorage not available */ }
+    }
+    _applyStoredLayout() {
+        try {
+            const raw = localStorage.getItem('kr-chatbot-state');
+            if (!raw || !this._panelEl) {
+                return;
+            }
+            const state = JSON.parse(raw);
+            if (state.position) {
+                this._panelEl.style.position = state.position;
+            }
+            if (state.left) {
+                this._panelEl.style.left = state.left;
+            }
+            if (state.top) {
+                this._panelEl.style.top = state.top;
+            }
+            if (state.width) {
+                this._panelEl.style.width = state.width;
+            }
+            if (state.height) {
+                this._panelEl.style.height = state.height;
+            }
         }
+        catch { /* localStorage not available */ }
     }
     _handleInputChange(e) {
         this._inputValue = e.target.value;
@@ -308,6 +413,27 @@ let KRChatbot = class KRChatbot extends LitElement {
             }];
         this._isStreaming = true;
         this._statusText = '';
+        // Scroll user's message to the top (Gemini-style).
+        // Set min-height on the assistant message = container height so there's enough
+        // scroll room below the user message to push it to the top.
+        this.updateComplete.then(() => {
+            if (!this._messagesEl) {
+                return;
+            }
+            // Clear min-height from previous responses
+            this._messagesEl.querySelectorAll('.message--assistant').forEach((el) => {
+                el.style.minHeight = '';
+            });
+            const allMsgEls = this._messagesEl.querySelectorAll('.message');
+            const userMsgEl = allMsgEls[this.messages.length - 2];
+            const assistantMsgEl = allMsgEls[this.messages.length - 1];
+            if (assistantMsgEl) {
+                assistantMsgEl.style.minHeight = this._messagesEl.clientHeight + 'px';
+            }
+            if (userMsgEl) {
+                this._messagesEl.scrollTop = userMsgEl.offsetTop - this._messagesEl.offsetTop - 24;
+            }
+        });
         this.send({
             message: messageText,
             messages: this.messages.slice(0, -1),
@@ -435,49 +561,6 @@ let KRChatbot = class KRChatbot extends LitElement {
                             }
                         }
                     }
-                    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'));
                     }
@@ -511,157 +594,192 @@ let KRChatbot = class KRChatbot extends LitElement {
             }
         }
     }
-    /**
-     * 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,
+            'toggle': true,
+            '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">
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          class="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,
+            'panel': true,
+            '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>
+        <div
+          class="resize resize--n"
+          data-dir="n"
+          @mousedown=${this._handleResizeMouseDown}
+        ></div>
+        <div
+          class="resize resize--s"
+          data-dir="s"
+          @mousedown=${this._handleResizeMouseDown}
+        ></div>
+        <div
+          class="resize resize--w"
+          data-dir="w"
+          @mousedown=${this._handleResizeMouseDown}
+        ></div>
+        <div
+          class="resize resize--e"
+          data-dir="e"
+          @mousedown=${this._handleResizeMouseDown}
+        ></div>
+        <div
+          class="resize resize--nw"
+          data-dir="nw"
+          @mousedown=${this._handleResizeMouseDown}
+        ></div>
+        <div
+          class="resize resize--ne"
+          data-dir="ne"
+          @mousedown=${this._handleResizeMouseDown}
+        ></div>
+        <div
+          class="resize resize--sw"
+          data-dir="sw"
+          @mousedown=${this._handleResizeMouseDown}
+        ></div>
+        <div
+          class="resize resize--se"
+          data-dir="se"
+          @mousedown=${this._handleResizeMouseDown}
+        ></div>
+        <div class="header" @mousedown=${this._handleHeaderMouseDown}>
+          <div class="header-left">
+            <div class="header-info">
+              <span class="header-title">${this.title}</span>
               ${this.subtitle ? html `
-                <span class="chatbot__header-subtitle">${this.subtitle}</span>
+                <span class="header-subtitle">${this.subtitle}</span>
               ` : nothing}
             </div>
           </div>
-          <div class="chatbot__header-actions">
+          <div class="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" />
+              <button
+                class="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="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" />
+            <button
+              class="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="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}>
+        <div class="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 class="empty">
+              <span class="empty-text">What can I help you with?</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',
+            'message': true,
+            'message--user': msg.role === 'user',
+            'message--assistant': msg.role === 'assistant',
         })}>
               ${msg.reasoning ? html `
-                <details class="chatbot__reasoning">
+                <details class="reasoning">
                   <summary>Thinking</summary>
-                  <div class="chatbot__reasoning-content">${msg.reasoning}</div>
+                  <div class="reasoning-content">${msg.reasoning}</div>
                 </details>
               ` : nothing}
-              <div class="chatbot__message-content">
-                ${msg.role === 'user'
+              ${msg.content ? html `
+                <div class="message-content">
+                  ${msg.role === 'user'
             ? msg.content
-            : unsafeHTML(this._formatAssistantContent(msg.content))}
-              </div>
+            : unsafeHTML(marked.parse(msg.content, { breaks: true }))}
+                </div>
+              ` : nothing}
+              ${msg.role === 'assistant' && this._isStreaming && msg === this.messages[this.messages.length - 1] ? html `
+                <div class="typing">
+                  <span></span>
+                  <span></span>
+                  <span></span>
+                </div>
+              ` : nothing}
             </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">
+          <div class="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" />
+            <button class="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="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>
+        <div class="footer">
+          <div class="input-wrapper">
+            <button class="input-plus" title="Attach">+</button>
             <textarea
-              class="chatbot__input"
+              class="input"
               .value=${this._inputValue}
               placeholder=${this.placeholder}
               rows="1"
@@ -669,21 +787,45 @@ let KRChatbot = class KRChatbot extends LitElement {
               @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" />
+              <button
+                class="stop"
+                @click=${this._handleStop}
+                title="Stop generating"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="currentColor"
+                  viewBox="0 0 24 24"
+                  class="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(),
+            'send': true,
+            '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">
+                <svg
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2.5"
+                  stroke-linecap="round"
+                  class="send-icon"
+                >
                   <path d="M12 19V5M5 12l7-7 7 7"/>
                 </svg>
               </button>
@@ -714,7 +856,6 @@ KRChatbot.styles = css `
       --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;
@@ -731,7 +872,7 @@ KRChatbot.styles = css `
     }
 
     /* Toggle button */
-    .chatbot__toggle {
+    .toggle {
       width: var(--kr-chatbot-toggle-size);
       height: var(--kr-chatbot-toggle-size);
       border-radius: 18px;
@@ -746,24 +887,24 @@ KRChatbot.styles = css `
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     }
 
-    .chatbot__toggle:hover {
+    .toggle:hover {
       transform: scale(1.05);
       box-shadow: 0 6px 32px rgba(22, 48, 82, 0.5);
     }
 
-    .chatbot__toggle--hidden {
+    .toggle--hidden {
       transform: scale(0);
       opacity: 0;
       pointer-events: none;
     }
 
-    .chatbot__toggle-icon {
+    .toggle-icon {
       width: 26px;
       height: 26px;
     }
 
     /* Panel */
-    .chatbot__panel {
+    .panel {
       display: none;
       flex-direction: column;
       background: var(--kr-chatbot-bg);
@@ -781,7 +922,7 @@ KRChatbot.styles = css `
       transform-origin: bottom right;
     }
 
-    .chatbot__panel--opened {
+    .panel--opened {
       display: flex;
     }
 
@@ -797,49 +938,35 @@ KRChatbot.styles = css `
     }
 
     /* Header */
-    .chatbot__header {
-      padding: 10px 16px;
-      background: var(--kr-chatbot-primary);
-      color: white;
+    .header {
+      padding: 0 16px 0 24px;
+      height: 64px;
+      background: #ffffff;
+      color: #000000;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
       display: flex;
       align-items: center;
       justify-content: space-between;
       flex-shrink: 0;
     }
 
-    .chatbot__header-left {
+    .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 {
+.header-info {
       display: flex;
       flex-direction: column;
     }
 
-    .chatbot__header-title {
-      font-size: 13px;
+    .header-title {
+      font-size: 16px;
       font-weight: 600;
-      letter-spacing: -0.2px;
     }
 
-    .chatbot__header-subtitle {
+    .header-subtitle {
       color: rgba(255, 255, 255, 0.5);
       font-size: 11px;
       display: flex;
@@ -847,7 +974,7 @@ KRChatbot.styles = css `
       gap: 4px;
     }
 
-    .chatbot__header-subtitle::before {
+    .header-subtitle::before {
       content: '';
       width: 5px;
       height: 5px;
@@ -855,18 +982,18 @@ KRChatbot.styles = css `
       border-radius: 50%;
     }
 
-    .chatbot__header-actions {
+    .header-actions {
       display: flex;
       align-items: center;
       gap: 4px;
     }
 
-    .chatbot__header-action {
-      width: 28px;
-      height: 28px;
+    .header-action {
+      width: 32px;
+      height: 32px;
       background: transparent;
       border: none;
-      color: rgba(255, 255, 255, 0.6);
+      color: rgb(0 0 0 / 70%);
       border-radius: 8px;
       cursor: pointer;
       display: flex;
@@ -875,18 +1002,18 @@ KRChatbot.styles = css `
       transition: all 0.15s;
     }
 
-    .chatbot__header-action:hover {
-      background: rgba(255, 255, 255, 0.1);
-      color: white;
+    .header-action:hover {
+      background: rgba(0, 0, 0, 0.05);
+      color: #000000;
     }
 
-    .chatbot__header-action-icon {
-      width: 16px;
-      height: 16px;
+    .header-action-icon {
+      width: 20px;
+      height: 20px;
     }
 
     /* Messages */
-    .chatbot__messages {
+    .messages {
       flex: 1;
       overflow-y: auto;
       padding: 32px;
@@ -897,20 +1024,20 @@ KRChatbot.styles = css `
       background: white;
     }
 
-    .chatbot__messages::-webkit-scrollbar {
+    .messages::-webkit-scrollbar {
       width: 4px;
     }
 
-    .chatbot__messages::-webkit-scrollbar-track {
+    .messages::-webkit-scrollbar-track {
       background: transparent;
     }
 
-    .chatbot__messages::-webkit-scrollbar-thumb {
+    .messages::-webkit-scrollbar-thumb {
       background: rgba(0, 0, 0, 0.08);
       border-radius: 2px;
     }
 
-    .chatbot__empty {
+    .empty {
       flex: 1;
       display: flex;
       flex-direction: column;
@@ -920,17 +1047,12 @@ KRChatbot.styles = css `
       gap: 8px;
     }
 
-    .chatbot__empty-icon {
-      width: 40px;
-      height: 40px;
-      opacity: 0.4;
-    }
-
-    .chatbot__empty-text {
-      font-size: 13px;
+.empty-text {
+      font-size: 14px;
+      color: rgb(0 0 0 / 80%);
     }
 
-    .chatbot__message {
+    .message {
       display: flex;
       flex-direction: column;
       max-width: 100%;
@@ -948,40 +1070,41 @@ KRChatbot.styles = css `
       }
     }
 
-    .chatbot__message--user {
+    .message--user {
       align-self: flex-end;
       align-items: flex-end;
       max-width: 85%;
     }
 
-    .chatbot__message--assistant {
+    .message--assistant {
       align-self: flex-start;
+      gap: 24px;
     }
 
-    .chatbot__message-content {
+    .message-content {
       line-height: 1.7;
       word-wrap: break-word;
       overflow-wrap: break-word;
     }
 
-    .chatbot__message--user .chatbot__message-content {
+    .message--user .message-content {
       display: inline-block;
       background: var(--kr-chatbot-user-bg);
-      color: var(--kr-chatbot-user-text);
+      color: #000000;
       padding: 10px 16px;
       border-radius: 20px;
       border-bottom-right-radius: 6px;
       font-size: 14px;
     }
 
-    .chatbot__message--assistant .chatbot__message-content {
+    .message--assistant .message-content {
       background: transparent;
-      color: var(--kr-chatbot-text);
+      color: #000000;
       padding: 0;
       font-size: 14px;
     }
 
-    .chatbot__message--assistant .chatbot__message-content pre {
+    .message--assistant .message-content pre {
       background: #1e1e1e;
       color: #d4d4d4;
       padding: 12px;
@@ -992,67 +1115,57 @@ KRChatbot.styles = css `
       line-height: 1.4;
     }
 
-    .chatbot__message--assistant .chatbot__message-content code {
+    .message--assistant .message-content code {
       font-family: 'SF Mono', 'Fira Code', Monaco, monospace;
       font-size: 13px;
     }
 
-    .chatbot__message--assistant .chatbot__message-content :not(pre) > code {
+    .message--assistant .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 {
+    .message--assistant .message-content strong {
       font-weight: 600;
     }
 
-    .chatbot__message--assistant .chatbot__message-content p {
+    .message--assistant .message-content p {
       margin: 0 0 8px 0;
     }
 
-    .chatbot__message--assistant .chatbot__message-content p:last-child {
+    .message--assistant .message-content p:last-child {
       margin-bottom: 0;
     }
 
     /* Reasoning */
-    .chatbot__reasoning {
-      margin-bottom: 8px;
+    .reasoning {
       border-radius: 6px;
-      background: rgba(0, 0, 0, 0.03);
+      background: rgb(244 244 244 / 80%);
       font-size: 12px;
     }
 
-    .chatbot__reasoning summary {
+    .reasoning summary {
       cursor: pointer;
-      padding: 6px 10px;
-      color: var(--kr-chatbot-text-secondary);
-      font-style: italic;
+      padding: 6px 10px 6px 10px;
+      color: black;
       user-select: none;
     }
 
-    .chatbot__reasoning-content {
+    .reasoning-content {
       padding: 6px 10px 10px;
-      color: var(--kr-chatbot-text-secondary);
-      line-height: 1.5;
+      color: black;
       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 {
+.typing {
       display: flex;
       gap: 4px;
       padding: 4px 0;
     }
 
-    .chatbot__typing span {
+    .typing span {
       width: 6px;
       height: 6px;
       background: var(--kr-chatbot-text-secondary);
@@ -1061,11 +1174,11 @@ KRChatbot.styles = css `
       opacity: 0.4;
     }
 
-    .chatbot__typing span:nth-child(2) {
+    .typing span:nth-child(2) {
       animation-delay: 0.2s;
     }
 
-    .chatbot__typing span:nth-child(3) {
+    .typing span:nth-child(3) {
       animation-delay: 0.4s;
     }
 
@@ -1081,7 +1194,7 @@ KRChatbot.styles = css `
     }
 
     /* Error */
-    .chatbot__error {
+    .error {
       padding: 8px 16px;
       background: var(--kr-chatbot-error-bg);
       color: var(--kr-chatbot-error-text);
@@ -1093,7 +1206,7 @@ KRChatbot.styles = css `
       flex-shrink: 0;
     }
 
-    .chatbot__error-dismiss {
+    .error-dismiss {
       background: none;
       border: none;
       color: var(--kr-chatbot-error-text);
@@ -1104,19 +1217,19 @@ KRChatbot.styles = css `
       flex-shrink: 0;
     }
 
-    .chatbot__error-dismiss-icon {
+    .error-dismiss-icon {
       width: 14px;
       height: 14px;
     }
 
     /* Footer / Input */
-    .chatbot__footer {
-      padding: 12px 16px 16px;
+    .footer {
+      padding: 16px 16px 16px;
       flex-shrink: 0;
       background: white;
     }
 
-    .chatbot__input-wrapper {
+    .input-wrapper {
       display: flex;
       align-items: center;
       gap: 4px;
@@ -1127,12 +1240,12 @@ KRChatbot.styles = css `
       transition: border-color 0.2s, box-shadow 0.2s;
     }
 
-    .chatbot__input-wrapper:focus-within {
+    .input-wrapper:focus-within {
       border-color: #b0b0b0;
       box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04);
     }
 
-    .chatbot__input-plus {
+    .input-plus {
       width: 34px;
       height: 34px;
       border: none;
@@ -1149,11 +1262,11 @@ KRChatbot.styles = css `
       transition: background 0.15s;
     }
 
-    .chatbot__input-plus:hover {
+    .input-plus:hover {
       background: #f8f9fc;
     }
 
-    .chatbot__input {
+    .input {
       flex: 1;
       border: none;
       outline: none;
@@ -1165,14 +1278,14 @@ KRChatbot.styles = css `
       min-height: 26px;
       max-height: 120px;
       background: transparent;
-      color: var(--kr-chatbot-text);
+      color: black;
     }
 
-    .chatbot__input::placeholder {
+    .input::placeholder {
       color: #b0b0b0;
     }
 
-    .chatbot__send {
+    .send {
       width: 34px;
       height: 34px;
       border-radius: 50%;
@@ -1187,25 +1300,25 @@ KRChatbot.styles = css `
       transition: all 0.15s;
     }
 
-    .chatbot__send:hover {
+    .send:hover {
       background: var(--kr-chatbot-primary-hover);
     }
 
-    .chatbot__send--disabled {
+    .send--disabled {
       opacity: 0.4;
       cursor: default;
     }
 
-    .chatbot__send--disabled:hover {
+    .send--disabled:hover {
       background: var(--kr-chatbot-primary);
     }
 
-    .chatbot__send-icon {
+    .send-icon {
       width: 16px;
       height: 16px;
     }
 
-    .chatbot__stop {
+    .stop {
       width: 34px;
       height: 34px;
       border-radius: 50%;
@@ -1220,62 +1333,51 @@ KRChatbot.styles = css `
       transition: all 0.15s;
     }
 
-    .chatbot__stop:hover {
+    .stop:hover {
       background: #b91c1c;
     }
 
-    .chatbot__stop-icon {
+    .stop-icon {
       width: 14px;
       height: 14px;
     }
 
     /* Header drag cursor */
-    .chatbot__header {
+    .header {
       cursor: grab;
       user-select: none;
     }
 
-    .chatbot__header:active {
+    .header:active {
       cursor: grabbing;
     }
 
     /* Drag / Resize states */
-    .chatbot__panel--dragging,
-    .chatbot__panel--resizing {
+    .panel--dragging,
+    .panel--resizing {
       transition: none;
       user-select: none;
     }
 
-    .chatbot__panel--dragging {
+    .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 {
+    .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; }
+    .resize--n { top: -4px; left: 12px; right: 12px; height: 8px; cursor: n-resize; }
+    .resize--s { bottom: -4px; left: 12px; right: 12px; height: 8px; cursor: s-resize; }
+    .resize--w { left: -4px; top: 12px; bottom: 12px; width: 8px; cursor: w-resize; }
+    .resize--e { right: -4px; top: 12px; bottom: 12px; width: 8px; cursor: e-resize; }
+    .resize--nw { top: -4px; left: -4px; width: 16px; height: 16px; cursor: nw-resize; }
+    .resize--ne { top: -4px; right: -4px; width: 16px; height: 16px; cursor: ne-resize; }
+    .resize--sw { bottom: -4px; left: -4px; width: 16px; height: 16px; cursor: sw-resize; }
+    .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 })
@@ -1283,6 +1385,9 @@ __decorate([
 __decorate([
     property({ attribute: false })
 ], KRChatbot.prototype, "clear", void 0);
+__decorate([
+    property({ attribute: false })
+], KRChatbot.prototype, "load", void 0);
 __decorate([
     property({ attribute: false })
 ], KRChatbot.prototype, "messages", void 0);
@@ -1296,7 +1401,10 @@ __decorate([
     property({ type: String })
 ], KRChatbot.prototype, "placeholder", void 0);
 __decorate([
-    property({ type: Boolean, reflect: true })
+    property({
+        type: Boolean,
+        reflect: true
+    })
 ], KRChatbot.prototype, "opened", void 0);
 __decorate([
     state()
@@ -1311,13 +1419,13 @@ __decorate([
     state()
 ], KRChatbot.prototype, "_error", void 0);
 __decorate([
-    query('.chatbot__panel')
+    query('.panel')
 ], KRChatbot.prototype, "_panelEl", void 0);
 __decorate([
-    query('.chatbot__messages')
+    query('.messages')
 ], KRChatbot.prototype, "_messagesEl", void 0);
 __decorate([
-    query('.chatbot__input')
+    query('.input')
 ], KRChatbot.prototype, "_inputEl", void 0);
 KRChatbot = __decorate([
     customElement('kr-chatbot')