@salla.sa/ui-ai-kit-core 2.1.0 → 2.2.0

package/dist/cjs/ai-agent-error.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-Bs23yVuF.js');
-var iconRegistry = require('./icon-registry-BKb9-2Nt.js');
+var index = require('./index-BQ8Az7-D.js');
+var iconRegistry = require('./icon-registry-D-m8GW4D.js');
 
 const aiAgentErrorCss = () => `:host{display:block}.icon-wrap{display:inline-flex;align-items:center;justify-content:center;line-height:0}@keyframes fade-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.error-card{background:var(--ai-danger-bg);border:1px solid var(--ai-danger-border);border-radius:16px;box-shadow:var(--ai-shadow-error);overflow:hidden;animation:fade-in 0.3s ease}.error-body{display:flex;align-items:flex-start;gap:12px;padding:16px}.error-icon-wrap{width:36px;height:36px;border-radius:9999px;background:var(--ai-bg-card);border:1px solid var(--ai-danger-border);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--ai-danger-text)}.error-content{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}.error-headline-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.error-headline{font-size:14px;font-weight:600;color:var(--ai-danger-text);line-height:1.4}.error-code-badge{font-size:11px;font-weight:500;color:var(--ai-danger-text);background:var(--ai-bg-card);border:1px solid var(--ai-danger-border);padding:1px 7px;border-radius:9999px;white-space:nowrap;flex-shrink:0;opacity:0.85}.error-message{margin:0;font-size:13px;font-weight:400;color:var(--ai-text-secondary);line-height:1.5}.dismiss-btn{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:4px;cursor:pointer;color:var(--ai-danger-text);opacity:0.6;flex-shrink:0;border-radius:6px;transition:opacity 0.15s ease, background 0.15s ease}.dismiss-btn:hover{opacity:1;background:var(--ai-hover-overlay)}.error-footer{padding:0 16px 14px}.retry-btn{display:inline-flex;align-items:center;gap:6px;background:var(--ai-bg-card);border:1px solid var(--ai-danger-border);border-radius:9999px;padding:6px 14px;font-size:13px;font-weight:500;color:var(--ai-danger-text);cursor:pointer;transition:box-shadow 0.15s ease, opacity 0.15s ease;font-family:inherit}.retry-btn:hover{box-shadow:var(--ai-shadow-active);opacity:0.9}.retry-btn:active{opacity:0.75}`;
 
@@ -33,7 +33,7 @@ const AiAgentError = class {
         return index.h("span", { class: "icon-wrap", innerHTML: svg });
     }
     render() {
-        return (index.h(index.Host, { key: '938a7d7ea8f1af9c4523eaf2a4944c4d1d7fb6a2' }, index.h("div", { key: 'ad4f04819ac44e4541405674c903f5e2a2ec5e6e', class: "error-card" }, index.h("div", { key: 'be863a0a24342ab7c8704e3a9ee0ad2b44633c4d', class: "error-body" }, index.h("div", { key: '0572130fca12b6d341f0e727a5f7f72f281d5cf7', class: "error-icon-wrap" }, this.renderIcon('warning', 20, 20)), index.h("div", { key: '53bbccb1da858d0f85c50609c2d6ab79d8bdd3cf', class: "error-content" }, index.h("div", { key: '76bbe45588ea39a29f72c4267881d39cc1767ad0', class: "error-headline-row" }, index.h("span", { key: '077fe71637fe1621b5ee532e8634657ff1b5f1ac', class: "error-headline" }, this.headline), this.errorCode && (index.h("span", { key: '45307d3a8f43c3d17daa44e0df7dc7643a9af7da', class: "error-code-badge" }, this.errorCode))), this.message && (index.h("p", { key: '6848d16db67c2ced84785e7762b79a1fac9a4d14', class: "error-message" }, this.message))), this.dismissible && (index.h("button", { key: 'c06661ef9c19dbcb9cb6620c9bec69e2a6a35205', class: "dismiss-btn", "aria-label": "\u0625\u063A\u0644\u0627\u0642", onClick: () => this.dismissClick.emit() }, this.renderIcon('cancel', 16, 16)))), this.retryable && (index.h("div", { key: '3b1ed90ee58f872a22f790abd0e5c9acd1480a36', class: "error-footer" }, index.h("button", { key: 'd50096dd81d9098c827f564f5c6e120dafe56dac', class: "retry-btn", onClick: () => this.retryClick.emit() }, this.renderIcon('reload', 16, 16), index.h("span", { key: '0ef79b60c4de040f57dfd6c7c71fd1d1863baa33' }, this.retryLabel)))))));
+        return (index.h(index.Host, { key: '58e3dfec84f2fcea2f53657dc2b7d16344ada0c2' }, index.h("div", { key: 'c85a02edecb0919d664a01468b4318b3258e126c', class: "error-card" }, index.h("div", { key: '9336d8a342877b2cccc08f1e52aa981d5ecb7e4b', class: "error-body" }, index.h("div", { key: '0e472ff1f226635242feb969b6c897b5a8eb57b8', class: "error-icon-wrap" }, this.renderIcon('warning', 20, 20)), index.h("div", { key: 'bec21585c826378a01a30a1e2c347289fa968b6d', class: "error-content" }, index.h("div", { key: '04030863e65ad1551abd0941709cbc61ef36b4f4', class: "error-headline-row" }, index.h("span", { key: '6044558b93d6e9be50cbf3f251bf8cd615014a2b', class: "error-headline" }, this.headline), this.errorCode && (index.h("span", { key: '33c20307ceb7d55d6b0dd1a2b583456fdb50a947', class: "error-code-badge" }, this.errorCode))), this.message && (index.h("p", { key: '911f62b72bc8b61a2d6bd444d6e6304c6e4adaed', class: "error-message" }, this.message))), this.dismissible && (index.h("button", { key: '76fcb3b7e964f7f1fdebb422c9b056d1631df666', class: "dismiss-btn", "aria-label": "\u0625\u063A\u0644\u0627\u0642", onClick: () => this.dismissClick.emit() }, this.renderIcon('cancel', 16, 16)))), this.retryable && (index.h("div", { key: '670e28d12c27dcfc9ce9c017ae06278fb07906cd', class: "error-footer" }, index.h("button", { key: '2cf7655d43e1d68c6befde8a48b72b10c1077f68', class: "retry-btn", onClick: () => this.retryClick.emit() }, this.renderIcon('reload', 16, 16), index.h("span", { key: 'e28ca18eba500c9d50d7d690889777ad312b9e62' }, this.retryLabel)))))));
     }
 };
 AiAgentError.style = aiAgentErrorCss();

package/dist/cjs/ai-card.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Bs23yVuF.js');
+var index = require('./index-BQ8Az7-D.js');
 
 const aiCardCss = () => `:host{--ai-card-border:1px solid var(--ai-border-default);--ai-card-radius:16px;--ai-card-padding:16px;--ai-card-gap:12px;--ai-card-shadow:var(--ai-shadow-sm);display:block}.card{background:var(--ai-bg-card);border:var(--ai-card-border);border-radius:var(--ai-card-radius);padding:var(--ai-card-padding);box-shadow:var(--ai-card-shadow);box-sizing:border-box;overflow:hidden;color:var(--ai-text-primary);width:100%;display:flex;flex-direction:column;gap:var(--ai-card-gap);text-align:start;font-size:14px;line-height:20px}.card--no-padding{padding:0}.card--no-shadow{box-shadow:none}`;
 
@@ -13,11 +13,11 @@ const AiCard = class {
     /** Remove the shadow */
     noShadow = false;
     render() {
-        return (index.h(index.Host, { key: 'de29e6d9cef8b521fdf6ac6a3f02732b80a8ebfe' }, index.h("div", { key: 'b6b097e595977af04497bf64e68f3b89854bc710', class: {
+        return (index.h(index.Host, { key: '1bdd14661b995f51378e67676a44c92730626ffe' }, index.h("div", { key: 'fa15c03048be26793d36bfb8c6a7325b21b04d5c', class: {
                 card: true,
                 'card--no-padding': this.noPadding,
                 'card--no-shadow': this.noShadow,
-            } }, index.h("slot", { key: '4a0af40b21edd47f187c8eaad0d6487575f1a6eb' }))));
+            } }, index.h("slot", { key: 'a1d77664d0754f5d71c75ebc658a74c581111091' }))));
     }
 };
 AiCard.style = aiCardCss();

package/dist/cjs/ai-chat-container.cjs.entry.js

@@ -1,10 +1,14 @@
 'use strict';
 
-var index = require('./index-Bs23yVuF.js');
+var index = require('./index-BQ8Az7-D.js');
 
-const aiChatContainerCss = () => `:host{display:contents}.chat-container{font-family:var(--ai-font-family);display:flex;flex-direction:column;overflow:hidden;position:relative;background-color:var(--ai-container-bg, var(--ai-bg-card));border:1px solid var(--ai-border-default);z-index:50;box-sizing:border-box}.messages-area{flex:1;overflow-y:auto;min-height:0;scrollbar-width:thin;padding:var(--ai-spacing-2xl, 16px);scrollbar-color:var(--ai-scrollbar-thumb) transparent}.messages-area::-webkit-scrollbar{width:3px}.messages-area::-webkit-scrollbar-track{background:transparent}.messages-area::-webkit-scrollbar-thumb{background:var(--ai-scrollbar-thumb);border-radius:99px}.messages-area::-webkit-scrollbar-thumb:hover{background:var(--ai-scrollbar-thumb-hover)}.chat-container.left,.chat-container.right{position:fixed;top:0;bottom:0;transition:transform 300ms cubic-bezier(0.4, 0, 0.2, 1)}.chat-container.left{left:0;transform:translateX(-100%)}.chat-container.right{right:0;transform:translateX(100%)}.chat-container.left.open,.chat-container.right.open{transform:translateX(0)}.chat-container.float{position:fixed;border-radius:16px;box-shadow:var(--ai-shadow-float);opacity:0;pointer-events:none;transform:scale(0.95);transform-origin:bottom left;transition:opacity 200ms ease, transform 200ms ease}.chat-container.float.open{opacity:1;pointer-events:auto;transform:scale(1)}.watermark{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);pointer-events:none}.watermark ai-icon{opacity:var(--ai-watermark-opacity, 0.8);filter:var(--ai-watermark-filter, var(--ai-shadow-watermark))}.chat-container.mobile{width:100% !important}.chat-container.float.mobile{left:0 !important;right:0 !important;top:0 !important;bottom:0 !important;height:100% !important;border-radius:0 !important}@media (max-width: 767px){.chat-container{width:100% !important}.chat-container.float{left:0 !important;right:0 !important;top:0 !important;bottom:0 !important;height:100% !important;border-radius:0 !important}}`;
+const aiChatContainerCss = () => `:host{display:contents}.chat-container{font-family:var(--ai-font-family);display:flex;flex-direction:column;overflow:hidden;position:relative;background-color:var(--ai-container-bg, var(--ai-bg-card));border:1px solid var(--ai-border-default);z-index:50;box-sizing:border-box}.messages-area{flex:1;overflow-y:auto;min-height:0;scrollbar-width:thin;padding:var(--ai-spacing-2xl, 16px);scrollbar-color:var(--ai-scrollbar-thumb) transparent}.messages-area::-webkit-scrollbar{width:3px}.messages-area::-webkit-scrollbar-track{background:transparent}.messages-area::-webkit-scrollbar-thumb{background:var(--ai-scrollbar-thumb);border-radius:99px}.messages-area::-webkit-scrollbar-thumb:hover{background:var(--ai-scrollbar-thumb-hover)}.chat-container.left,.chat-container.right{position:fixed;top:0;bottom:0;transition:transform 300ms cubic-bezier(0.4, 0, 0.2, 1)}.chat-container.left{left:0;transform:translateX(-100%)}.chat-container.right{right:0;transform:translateX(100%)}.chat-container.left.open,.chat-container.right.open{transform:translateX(0)}.chat-container.float{position:fixed;border-radius:16px;box-shadow:var(--ai-shadow-float);opacity:0;pointer-events:none;transform:scale(0.95);transform-origin:bottom left;transition:opacity 200ms ease, transform 200ms ease}.chat-container.float.open{opacity:1;pointer-events:auto;transform:scale(1)}.watermark{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);pointer-events:none;width:133px;height:133px}.watermark .watermark-circle-svg{position:absolute;top:0;left:0}.watermark .watermark-star-svg{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.watermark .watermark-circle{fill:var(--ai-watermark-circle, #FCFCFC)}.watermark .watermark-star{fill:var(--ai-watermark-star, #FAFAFA)}:host(.dark) .watermark .watermark-circle{fill:var(--ai-watermark-circle, #222222)}:host(.dark) .watermark .watermark-star{fill:var(--ai-watermark-star, #292B2C)}.chat-container.mobile{width:100% !important}.chat-container.float.mobile{left:0 !important;right:0 !important;top:0 !important;bottom:0 !important;height:100% !important;border-radius:0 !important}@media (max-width: 767px){.chat-container{width:100% !important}.chat-container.float{left:0 !important;right:0 !important;top:0 !important;bottom:0 !important;height:100% !important;border-radius:0 !important}}@keyframes skeleton-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}.skeleton-messages{display:flex;flex-direction:column;gap:20px;padding:8px 0}.skeleton-row{display:flex;align-items:flex-start;gap:10px}.skeleton-row.agent{flex-direction:row}.skeleton-row.user{flex-direction:row-reverse}.skeleton-avatar{width:32px;height:32px;min-width:32px;border-radius:50%;background:var(--ai-shimmer-gradient, linear-gradient(90deg, rgba(0,0,0,0.06) 25%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.06) 75%));background-size:200% 100%;animation:skeleton-shimmer 1.6s ease-in-out infinite}.skeleton-bubble{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border-radius:16px;background-color:var(--ai-bg-surface, #f9fafb);max-width:75%;min-width:120px}.skeleton-row.user .skeleton-bubble{background-color:var(--ai-user-bubble-bg, var(--ai-accent, #004956));border-radius:16px}.skeleton-line{height:12px;border-radius:6px;background:var(--ai-shimmer-gradient, linear-gradient(90deg, rgba(0,0,0,0.06) 25%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.06) 75%));background-size:200% 100%;animation:skeleton-shimmer 1.6s ease-in-out infinite}.skeleton-row.user .skeleton-line{background:linear-gradient(90deg, rgba(255,255,255,0.08) 25%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.08) 75%);background-size:200% 100%;animation:skeleton-shimmer 1.6s ease-in-out infinite}:host(.dark) .skeleton-avatar{background:var(--ai-shimmer-gradient, linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.06) 75%));background-size:200% 100%;animation:skeleton-shimmer 1.6s ease-in-out infinite}:host(.dark) .skeleton-bubble{background-color:var(--ai-bg-surface, #1f2937)}:host(.dark) .skeleton-line{background:var(--ai-shimmer-gradient, linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.06) 75%));background-size:200% 100%;animation:skeleton-shimmer 1.6s ease-in-out infinite}.error-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:48px 24px;flex:1}.error-icon{color:var(--ai-text-muted, #9ca3af);opacity:0.7}.error-text{margin:0;font-size:14px;line-height:1.5;color:var(--ai-text-secondary, #6b7280)}.error-retry-btn{display:inline-flex;align-items:center;justify-content:center;padding:8px 20px;border-radius:9999px;border:1px solid var(--ai-border-default);background-color:var(--ai-bg-surface, #f9fafb);color:var(--ai-text-primary);font-size:13px;font-weight:500;font-family:inherit;cursor:pointer;transition:background-color 0.15s ease, border-color 0.15s ease}.error-retry-btn:hover{background-color:var(--ai-hover-overlay, rgba(0, 0, 0, 0.04));border-color:var(--ai-accent, #004956)}.error-retry-btn:focus-visible{outline:2px solid var(--ai-focus-ring-color, var(--ai-focus-ring));outline-offset:2px}:host(.dark) .error-retry-btn{background-color:var(--ai-bg-surface, #1f2937);color:var(--ai-text-primary, #f9fafb)}:host(.dark) .error-retry-btn:hover{background-color:var(--ai-hover-overlay, rgba(255, 255, 255, 0.06))}`;
 
 const ChatContainer = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.retryClick = index.createEvent(this, "retryClick");
+    }
     get el() { return index.getElement(this); }
     /** Controls visibility of the chat panel */
     isOpen = false;
@@ -20,14 +24,28 @@ const ChatContainer = class {
     floatHeight = '600px';
     /** Color theme for the panel */
     theme = 'light';
+    /** Show skeleton loading state (e.g. while loading conversation history) */
+    loading = false;
+    /** Show error state (e.g. failed to load conversation) */
+    error = false;
+    /** Error message text */
+    errorText = 'تعذّر تحميل المحادثة';
+    /** Retry button label */
+    retryLabel = 'إعادة المحاولة';
+    /** Event emitted when the retry button is clicked */
+    retryClick;
     isMobile = false;
     floatLeft = '24px';
     floatTop = '24px';
     containerRef;
     messagesAreaRef;
     dragState = null;
+    mutationObserver = null;
+    resizeObserver = null;
     // Named arrow so we can reliably add/remove it without leaking
     dragListener = (e) => {
+        if (typeof window === 'undefined')
+            return;
         const container = this.containerRef;
         if (!container)
             return;
@@ -66,21 +84,34 @@ const ChatContainer = class {
         document.addEventListener('pointermove', onMove);
         document.addEventListener('pointerup', onUp);
     };
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        // Bind so window.removeEventListener can match the reference
-        this.checkMobile = this.checkMobile.bind(this);
-    }
     componentWillLoad() {
         this.checkMobile();
     }
     componentDidLoad() {
-        if (typeof window !== 'undefined') {
-            window.addEventListener('resize', this.checkMobile);
-            if (this.position === 'float') {
-                this.setupDrag();
-            }
+        if (typeof window === 'undefined')
+            return;
+        // Use ResizeObserver for responsive mobile detection instead of window.resize
+        if (typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver = new ResizeObserver(() => {
+                this.checkMobile();
+                this.clampFloatPosition();
+            });
+            this.resizeObserver.observe(this.el);
         }
+        // Also listen to window resize for viewport changes (e.g. browser resize)
+        window.addEventListener('resize', this.handleWindowResize);
+        if (this.position === 'float') {
+            this.setupDrag();
+        }
+        this.mutationObserver = new MutationObserver(() => {
+            if (this.autoScroll && this.messagesAreaRef) {
+                requestAnimationFrame(() => {
+                    this.messagesAreaRef.scrollTop = this.messagesAreaRef.scrollHeight;
+                });
+            }
+        });
+        // Observe light DOM (this.el) — slotted content lives here, not inside shadow messagesAreaRef
+        this.mutationObserver.observe(this.el, { childList: true, subtree: true });
     }
     isOpenChanged(newVal) {
         if (newVal && this.autoScroll && this.messagesAreaRef) {
@@ -95,8 +126,12 @@ const ChatContainer = class {
         }
     }
     disconnectedCallback() {
-        window.removeEventListener('resize', this.checkMobile);
+        if (typeof window !== 'undefined') {
+            window.removeEventListener('resize', this.handleWindowResize);
+        }
         this.el.removeEventListener('headerDragStart', this.dragListener);
+        this.mutationObserver?.disconnect();
+        this.resizeObserver?.disconnect();
     }
     /** Programmatically scroll the messages area to the bottom */
     async scrollToBottom() {
@@ -104,11 +139,30 @@ const ChatContainer = class {
             this.messagesAreaRef.scrollTop = this.messagesAreaRef.scrollHeight;
         }
     }
+    handleWindowResize = () => {
+        this.checkMobile();
+        this.clampFloatPosition();
+    };
     checkMobile() {
         if (typeof window !== 'undefined') {
             this.isMobile = window.innerWidth < 768;
         }
     }
+    /** Re-clamp float position so the panel never ends up off-screen after resize */
+    clampFloatPosition() {
+        if (typeof window === 'undefined' || this.position !== 'float' || !this.containerRef)
+            return;
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+        const w = this.containerRef.offsetWidth;
+        const h = this.containerRef.offsetHeight;
+        let left = parseFloat(this.floatLeft) || 0;
+        let top = parseFloat(this.floatTop) || 0;
+        left = Math.max(0, Math.min(left, vw - w));
+        top = Math.max(0, Math.min(top, vh - h));
+        this.floatLeft = `${left}px`;
+        this.floatTop = `${top}px`;
+    }
     setupDrag() {
         // Remove any existing listener before adding to prevent accumulation
         this.el.removeEventListener('headerDragStart', this.dragListener);
@@ -148,8 +202,14 @@ const ChatContainer = class {
         }
         return false;
     }
+    renderSkeleton() {
+        return (index.h("div", { class: "skeleton-messages", "aria-busy": "true", "aria-label": "Loading conversation" }, index.h("div", { class: "skeleton-row agent" }, index.h("div", { class: "skeleton-bubble" }, index.h("div", { class: "skeleton-line", style: { width: '80%' } }), index.h("div", { class: "skeleton-line", style: { width: '60%' } }), index.h("div", { class: "skeleton-line", style: { width: '40%' } }))), index.h("div", { class: "skeleton-row user" }, index.h("div", { class: "skeleton-bubble" }, index.h("div", { class: "skeleton-line", style: { width: '70%' } }))), index.h("div", { class: "skeleton-row agent" }, index.h("div", { class: "skeleton-bubble" }, index.h("div", { class: "skeleton-line", style: { width: '90%' } }), index.h("div", { class: "skeleton-line", style: { width: '55%' } }))), index.h("div", { class: "skeleton-row user" }, index.h("div", { class: "skeleton-bubble" }, index.h("div", { class: "skeleton-line", style: { width: '50%' } }), index.h("div", { class: "skeleton-line", style: { width: '35%' } })))));
+    }
+    renderError() {
+        return (index.h("div", { class: "error-state", role: "alert" }, index.h("svg", { class: "error-icon", width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", "stroke-width": "1.5" }), index.h("path", { d: "M12 7v6", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round" }), index.h("circle", { cx: "12", cy: "16.5", r: "0.75", fill: "currentColor" })), index.h("p", { class: "error-text" }, this.errorText), index.h("button", { class: "error-retry-btn", type: "button", onClick: () => this.retryClick.emit() }, this.retryLabel)));
+    }
     render() {
-        return (index.h(index.Host, { key: 'cd4fad0fb3c4e06b8efd4481aef825f4bfc521a2', class: { dark: this.isDark() } }, index.h("div", { key: '4ebc198e353d9e78a4f733bdd728d13a3f7ceade', class: this.getContainerClasses(), style: this.getContainerStyle(), ref: el => (this.containerRef = el) }, this.showWatermark && (index.h("div", { key: '3c67cd62b37489274e0f246194a35d1e26d7ae05', class: "watermark" }, index.h("ai-icon", { key: 'fd3482b93e53b43f59bd96b995f3ff0472444f05', name: "watermark", size: 133 }))), index.h("slot", { key: '783c04dafaeecd563c05196620e3b888669614a9', name: "header" }), index.h("div", { key: 'cd44c7e5ca42e659d29cf74720eaf5c1a4264f4e', class: "messages-area", ref: el => (this.messagesAreaRef = el) }, index.h("slot", { key: 'f1f61eed5585ad3e4d23c16368ad37cfe1b216be' })), index.h("slot", { key: 'fecfd1d232a324ab468b69eed15865a699af956a', name: "footer" }))));
+        return (index.h(index.Host, { key: '146842c18b30c96eff709262d14f0026b3c0b5f2', class: { dark: this.isDark() } }, index.h("div", { key: '6d138b05c08cf3c01645d2832b9df847ae8fb34e', class: this.getContainerClasses(), style: this.getContainerStyle(), ref: el => (this.containerRef = el) }, this.showWatermark && !this.loading && !this.error && (index.h("div", { key: 'ef54afa1cec6e7589aa559938792429eb0fe76b6', class: "watermark" }, index.h("svg", { key: 'eb5dc8d17a48b73ed28c23d50a77939995efe818', class: "watermark-circle-svg", width: "133", height: "133", viewBox: "0 0 133 133", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("g", { key: 'c2f60242842b2788cfc577a96da595a6588d5dac', filter: "url(#wm_circle_shadow)" }, index.h("circle", { key: '9681bf0e38334eea7978e16854f7572bfc702a7d', cx: "66.415", cy: "66.415", r: "66.415", class: "watermark-circle" })), index.h("defs", { key: 'dfb531e4137c54ae2cb3cd67fc4f48cff578bbd6' }, index.h("filter", { key: '61c6a2e8a4ad2726280fdecea7f416f160e1388c', id: "wm_circle_shadow", x: "0", y: "0", width: "132.83", height: "135.83", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, index.h("feFlood", { key: 'e001abcfa7ea700a4c9df12f7edb2d77f41a681a', "flood-opacity": "0", result: "BackgroundImageFix" }), index.h("feBlend", { key: 'ab42b31ddffdafbcd0d8b3a1ac3638cad08422de', mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), index.h("feColorMatrix", { key: 'dbe6cee1b694612115237fe7ba631962b299c17e', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), index.h("feOffset", { key: '6e4df9fac567a782676e6ee11124405856e2d216', dy: "3" }), index.h("feGaussianBlur", { key: 'cf3eccf07988f8d35fc22db8dc8acd7efafb9f28', stdDeviation: "3" }), index.h("feComposite", { key: '8ede441bedbc49e505402977ab4787b7f80b8c17', in2: "hardAlpha", operator: "arithmetic", k2: "-1", k3: "1" }), index.h("feColorMatrix", { key: '4d6286fd6303c018d7c9e37258bc3fe746d716c0', type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" }), index.h("feBlend", { key: '137f322f9922e682873b3f7c3f44b714793d80bc', mode: "normal", in2: "shape", result: "effect1_innerShadow" })))), index.h("svg", { key: '5ed41b236f120a820e138829fdd86d6d7517953b', class: "watermark-star-svg", width: "78", height: "78", viewBox: "0 0 78 78", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("g", { key: 'bd4a4b26cf740bccb6dfa44c185e1c6ce9281407', filter: "url(#wm_star_shadow)" }, index.h("path", { key: '7b0769a6ef62e35206e0057da58ae0b2187a5aad', d: "M38.7421 0C39.5691 0 40.2689 0.286272 40.8414 0.858815C41.414 1.43136 41.7002 2.13113 41.7002 2.95814C41.7002 8.87442 43.1952 14.3772 46.1851 19.4665C49.1115 24.4285 53.0557 28.3727 58.0177 31.299C63.107 34.289 68.6097 35.7839 74.526 35.7839C75.353 35.7839 76.0528 36.0702 76.6254 36.6428C77.1979 37.2153 77.4842 37.9151 77.4842 38.7421C77.4842 39.5691 77.1979 40.2689 76.6254 40.8414C76.0528 41.414 75.353 41.7002 74.526 41.7002C68.6097 41.7002 63.107 43.1952 58.0177 46.1851C53.0557 49.1115 49.1115 53.0557 46.1851 58.0177C43.1952 63.107 41.7002 68.6097 41.7002 74.526C41.7002 75.353 41.414 76.0528 40.8414 76.6254C40.2689 77.1979 39.5691 77.4842 38.7421 77.4842C37.9151 77.4842 37.2153 77.1979 36.6428 76.6254C36.0702 76.0528 35.7839 75.353 35.7839 74.526C35.7839 68.6097 34.289 63.107 31.299 58.0177C28.3727 53.0557 24.4285 49.1115 19.4665 46.1851C14.3772 43.1952 8.87442 41.7002 2.95814 41.7002C2.13113 41.7002 1.43136 41.414 0.858815 40.8414C0.286272 40.2689 0 39.5691 0 38.7421C0 37.9151 0.286272 37.2153 0.858815 36.6428C1.43136 36.0702 2.13113 35.7839 2.95814 35.7839C8.87442 35.7839 14.3772 34.289 19.4665 31.299C24.4285 28.3727 28.3727 24.4285 31.299 19.4665C34.289 14.3772 35.7839 8.87442 35.7839 2.95814C35.7839 2.13113 36.0702 1.43136 36.6428 0.858815C37.2153 0.286272 37.9151 0 38.7421 0Z", class: "watermark-star" })), index.h("defs", { key: 'a004811963ac78b6c13df187333f3ba525c18f55' }, index.h("filter", { key: '734877af85b6554e27f24720e06bcd59b707362b', id: "wm_star_shadow", x: "0", y: "0", width: "77.4844", height: "79.4841", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, index.h("feFlood", { key: 'bfa384407eb019aa79be662411bea47097744323', "flood-opacity": "0", result: "BackgroundImageFix" }), index.h("feBlend", { key: '7cd90c875f8bce1780a4eaa899bc222b8cd5991e', mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), index.h("feColorMatrix", { key: '3edcb0bb26efba7f93e6ea125cc1b21f885cc75e', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), index.h("feOffset", { key: '2e18721ab747cedc0a6ae4d422a6b2991e37ed80', dy: "2" }), index.h("feGaussianBlur", { key: '0772cc52ba154b42d7f780d5e9bf16bd2293dee9', stdDeviation: "2" }), index.h("feComposite", { key: '739a5b26667c1745e8d42c33aadedf56b3530a52', in2: "hardAlpha", operator: "arithmetic", k2: "-1", k3: "1" }), index.h("feColorMatrix", { key: '23ca07f2d016d14aa95a64b581f8804cc43469fb', type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" }), index.h("feBlend", { key: '66e8b6a28ba77465df00123176f40e9b53a171c0', mode: "normal", in2: "shape", result: "effect1_innerShadow" })))))), index.h("slot", { key: 'd24884b15dfa86c3ccc353587f8bf5b1b0e00bc6', name: "header" }), index.h("div", { key: '4bafceed191d908bebf24a838e5277707831042a', class: "messages-area", ref: el => (this.messagesAreaRef = el) }, this.loading ? this.renderSkeleton() : this.error ? this.renderError() : index.h("slot", null)), index.h("slot", { key: 'ea962c2d9a6cb59c50b785c42e5b9d2103ac8848', name: "footer" }))));
     }
     static get watchers() { return {
         "isOpen": [{

package/dist/cjs/ai-chat-header.cjs.entry.js

@@ -1,9 +1,9 @@
 'use strict';
 
-var index = require('./index-Bs23yVuF.js');
-var iconRegistry = require('./icon-registry-BKb9-2Nt.js');
+var index = require('./index-BQ8Az7-D.js');
+var iconRegistry = require('./icon-registry-D-m8GW4D.js');
 
-const aiChatHeaderCss = () => `:host{display:block}.header-container{display:flex;align-items:center;gap:8px;padding:16px;background:var(--ai-bg-card);border-bottom:1px solid var(--ai-border-light);width:100%;box-sizing:border-box}.drag-btn{cursor:grab;color:var(--ai-text-muted)}.drag-btn:active{cursor:grabbing}.action-btn,.back-btn{width:40px;height:40px;padding:4px;display:flex;align-items:center;justify-content:center;background:var(--ai-bg-card);border:none;border-radius:8px;cursor:pointer;flex-shrink:0;color:var(--ai-text-primary);transition:background 0.15s ease}.action-btn:hover,.back-btn:hover{background:var(--ai-bg-surface)}.action-btn:focus-visible,.back-btn:focus-visible{outline:2px solid var(--ai-focus-ring);outline-offset:2px}.action-btn:active,.back-btn:active{background:var(--ai-bg-surface)}.actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.content{flex:1 0 0;display:flex;align-items:center;justify-content:flex-start;min-width:0}.content.agent{gap:4px;height:40px}.content.human{gap:8px}.dropdown-trigger{display:flex;align-items:center;gap:4px;background:none;border:none;cursor:pointer;padding:0;flex-shrink:0;color:var(--ai-text-primary)}.dropdown-trigger:focus-visible{outline:2px solid var(--ai-focus-ring);outline-offset:2px}.title{font-size:16px;font-weight:700;color:var(--ai-text-primary);white-space:nowrap;line-height:normal;min-width:0;overflow:hidden;text-overflow:ellipsis}.avatar-wrapper{position:relative;width:40px;height:40px;flex-shrink:0}.avatar{width:40px;height:40px;border-radius:9999px;border:1px solid var(--ai-border-default);object-fit:cover;display:block}.avatar-fallback{width:40px;height:40px;border-radius:9999px;border:1px solid var(--ai-border-default);background:var(--ai-bg-surface);color:var(--ai-text-primary);font-size:16px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0}.online-dot{position:absolute;bottom:0;inset-inline-end:0;width:10px;height:10px;display:inline-flex;align-items:center;justify-content:center;color:var(--ai-bg-card);}.online-dot.status-online{color:#22c55e;}.online-dot.status-offline{color:#9ca3af;}.online-dot.status-busy{color:#ef4444;}.online-dot.status-away{color:#f59e0b;}.text-block{display:flex;flex-direction:column;align-items:flex-start;gap:0;flex-shrink:0}.agent-name{font-size:14px;font-weight:500;color:var(--ai-text-primary);line-height:20px;white-space:nowrap}.agent-status{font-size:14px;font-weight:400;color:var(--ai-text-secondary);line-height:20px;white-space:nowrap}.icon-wrap{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.icon-wrap svg{display:block}:host-context([dir='ltr']) .back-btn .icon-wrap,:host([dir='ltr']) .back-btn .icon-wrap{transform:scaleX(-1)}`;
+const aiChatHeaderCss = () => `:host{display:block;position:relative;z-index:10}.header-wrapper{position:relative;display:flex;flex-direction:column}.header-container{display:flex;align-items:center;gap:8px;padding:16px;background:var(--ai-bg-card);border-bottom:1px solid var(--ai-border-light);width:100%;box-sizing:border-box}.drag-btn{cursor:grab;color:var(--ai-text-muted)}.drag-btn:active{cursor:grabbing}.action-btn,.back-btn{width:40px;height:40px;padding:4px;display:flex;align-items:center;justify-content:center;background:var(--ai-bg-card);border:none;border-radius:8px;cursor:pointer;flex-shrink:0;color:var(--ai-text-primary);transition:background 0.15s ease}.action-btn:hover,.back-btn:hover{background:var(--ai-bg-surface)}.action-btn:focus-visible,.back-btn:focus-visible{outline:2px solid var(--ai-focus-ring);outline-offset:2px}.action-btn:active,.back-btn:active{background:var(--ai-bg-surface)}.actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.content{flex:1 0 0;display:flex;align-items:center;justify-content:flex-start;min-width:0}.content.agent{gap:4px;height:40px}.content.human{gap:8px}.content.browser{gap:8px}.dropdown-trigger{display:flex;align-items:center;gap:4px;background:none;border:none;cursor:pointer;padding:0;flex-shrink:0;color:var(--ai-text-primary)}.dropdown-chevron{display:inline-flex;transition:transform 0.2s ease}.dropdown-chevron.open{transform:rotate(180deg)}.dropdown-trigger:focus-visible{outline:2px solid var(--ai-focus-ring);outline-offset:2px}.title{font-size:16px;font-weight:700;color:var(--ai-text-primary);white-space:nowrap;line-height:normal;min-width:0;overflow:hidden;text-overflow:ellipsis}@keyframes title-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}.title-skeleton{display:inline-block;width:120px;height:16px;border-radius:8px;background:var(--ai-shimmer-gradient, linear-gradient(90deg, rgba(0,0,0,0.06) 25%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.06) 75%));background-size:200% 100%;animation:title-shimmer 1.6s ease-in-out infinite}.browser-title{font-size:14px;font-weight:600;color:var(--ai-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;line-height:20px}.browser-link-btn{width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;background:none;border:none;border-radius:8px;cursor:pointer;flex-shrink:0;color:var(--ai-text-secondary)}.browser-link-btn:focus-visible{outline:2px solid var(--ai-focus-ring);outline-offset:2px}.avatar-wrapper{position:relative;width:40px;height:40px;flex-shrink:0}.avatar{width:40px;height:40px;border-radius:9999px;border:1px solid var(--ai-border-default);object-fit:cover;display:block}.avatar-fallback{width:40px;height:40px;border-radius:9999px;border:1px solid var(--ai-border-default);background:var(--ai-bg-surface);color:var(--ai-text-primary);font-size:16px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0}.online-dot{position:absolute;bottom:0;inset-inline-end:0;width:10px;height:10px;display:inline-flex;align-items:center;justify-content:center;color:var(--ai-bg-card);}.online-dot.status-online{color:#22c55e;}.online-dot.status-offline{color:#9ca3af;}.online-dot.status-busy{color:#ef4444;}.online-dot.status-away{color:#f59e0b;}.text-block{display:flex;flex-direction:column;align-items:flex-start;gap:0;flex-shrink:0}.agent-name{font-size:14px;font-weight:500;color:var(--ai-text-primary);line-height:20px;white-space:nowrap}.agent-status{font-size:14px;font-weight:400;color:var(--ai-text-secondary);line-height:20px;white-space:nowrap}.icon-wrap{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.icon-wrap svg{display:block}:host-context([dir='ltr']) .back-btn .icon-wrap,:host([dir='ltr']) .back-btn .icon-wrap{transform:scaleX(-1)}.conversation-dropdown{position:absolute;top:100%;left:0;right:0;z-index:20;height:360px;display:flex;flex-direction:column;background:var(--ai-bg-surface);border-bottom:1px solid var(--ai-border-light);box-shadow:var(--ai-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08));animation:slideDown 0.2s ease;overflow:hidden}.conversation-dropdown ai-conversation-list{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}`;
 
 const AiChatHeader = class {
     constructor(hostRef) {
@@ -14,7 +14,11 @@ const AiChatHeader = class {
         this.positionClick = index.createEvent(this, "positionClick");
         this.backClick = index.createEvent(this, "backClick");
         this.headerDragStart = index.createEvent(this, "headerDragStart");
+        this.openExternal = index.createEvent(this, "openExternal");
+        this.conversationSelect = index.createEvent(this, "conversationSelect");
+        this.conversationDelete = index.createEvent(this, "conversationDelete");
     }
+    get el() { return index.getElement(this); }
     /** Layout variant */
     mode = 'agent';
     /** Agent mode: conversation title */
@@ -30,7 +34,20 @@ const AiChatHeader = class {
     isDraggable = false;
     /** Human mode: status indicator variant */
     statusIndicator = 'online';
+    /** Browser mode: page title shown in the header */
+    pageTitle = '';
+    /** Browser mode: the external URL to link to */
+    pageUrl = '';
+    /** Conversation list: items to display in the dropdown panel */
+    conversationItems = [];
+    /** Conversation list: ID of the currently active conversation */
+    conversationActiveId = '';
+    /** Conversation list: show skeleton loading state */
+    conversationLoading = false;
+    /** Show a shimmer skeleton in place of the conversation title (e.g. while loading conversation) */
+    titleLoading = false;
     avatarError = false;
+    dropdownOpen = false;
     /** Cancel / close button */
     closeClick;
     /** Pencil-edit button (agent mode) */
@@ -46,6 +63,17 @@ const AiChatHeader = class {
      * Composed + bubbling so ai-chat-container can receive it across shadow roots.
      */
     headerDragStart;
+    /** Open-external button (browser mode) */
+    openExternal;
+    /** Fired when a conversation is selected from the dropdown list */
+    conversationSelect;
+    /** Fired when a conversation delete button is clicked */
+    conversationDelete;
+    handleDocumentClick(event) {
+        if (this.dropdownOpen && !this.el.contains(event.target)) {
+            this.dropdownOpen = false;
+        }
+    }
     renderIcon(name, width, height) {
         const icon = iconRegistry.iconRegistry[name];
         if (!icon)
@@ -58,18 +86,39 @@ const AiChatHeader = class {
         if (!this.agentAvatar || this.avatarError) {
             return index.h("div", { class: "avatar-fallback" }, fallbackLetter);
         }
-        return (index.h("img", { class: "avatar", src: this.agentAvatar, alt: this.agentName, onError: () => { this.avatarError = true; } }));
+        return (index.h("img", { class: "avatar", src: this.agentAvatar, alt: this.agentName, onError: () => {
+                this.avatarError = true;
+            } }));
     }
     renderDragBtn() {
-        return this.isDraggable && (index.h("button", { class: "action-btn drag-btn", "aria-label": "\u0633\u062D\u0628 / Drag", onPointerDown: (e) => {
+        return (this.isDraggable && (index.h("button", { class: "action-btn drag-btn", "aria-label": "\u0633\u062D\u0628 / Drag", onPointerDown: (e) => {
                 e.preventDefault();
                 this.headerDragStart.emit({ clientX: e.clientX, clientY: e.clientY });
-            } }, this.renderIcon('drag', 11, 15)));
+            } }, this.renderIcon('drag', 11, 15))));
+    }
+    handleConversationSelect = (e) => {
+        e.stopPropagation();
+        this.conversationSelect.emit(e.detail);
+        this.dropdownOpen = false;
+    };
+    handleConversationDelete = (e) => {
+        e.stopPropagation();
+        this.conversationDelete.emit(e.detail);
+    };
+    renderConversationDropdown() {
+        if (!this.dropdownOpen || this.mode !== 'agent')
+            return null;
+        return (index.h("div", { class: "conversation-dropdown" }, index.h("ai-conversation-list", { items: this.conversationItems, activeId: this.conversationActiveId, loading: this.conversationLoading, onConversationSelect: this.handleConversationSelect, onConversationDelete: this.handleConversationDelete })));
     }
     renderAgentMode() {
         return [
             this.renderDragBtn(),
-            index.h("div", { class: "content agent dropdown-trigger", role: "button", onClick: () => this.dropdownClick.emit(), "aria-haspopup": "listbox", "aria-expanded": false, "aria-label": `${this.conversation}, افتح قائمة المحادثات` }, index.h("span", { class: "title" }, this.conversation), index.h("span", { class: "dropdown-chevron" }, this.renderIcon('chevron-down', 24, 24))),
+            index.h("div", { class: "content agent dropdown-trigger", role: "button", onClick: () => {
+                    if (this.titleLoading)
+                        return;
+                    this.dropdownOpen = !this.dropdownOpen;
+                    this.dropdownClick.emit();
+                }, "aria-haspopup": "listbox", "aria-expanded": this.dropdownOpen, "aria-label": `${this.conversation}, افتح قائمة المحادثات` }, this.titleLoading ? (index.h("span", { class: "title-skeleton", "aria-busy": "true", "aria-label": "\u062C\u0627\u0631\u064A \u0627\u0644\u062A\u062D\u0645\u064A\u0644" })) : (index.h("span", { class: "title" }, this.conversation)), !this.titleLoading && (index.h("span", { class: `dropdown-chevron${this.dropdownOpen ? ' open' : ''}` }, this.renderIcon('chevron-down', 24, 24)))),
             index.h("div", { class: "actions" }, index.h("button", { class: "action-btn", "aria-label": "\u062A\u0639\u062F\u064A\u0644 / Edit", onClick: () => this.editClick.emit() }, this.renderIcon('pencil-edit', 22, 22)), index.h("button", { class: "action-btn", "aria-label": "\u0627\u0644\u0639\u0631\u0636 / Position", onClick: () => this.positionClick.emit() }, this.renderIcon('hand', 22, 22)), index.h("button", { class: "action-btn", "aria-label": "\u0625\u063A\u0644\u0627\u0642 / Close", onClick: () => this.closeClick.emit() }, this.renderIcon('cancel', 22, 22))),
         ];
     }
@@ -80,8 +129,15 @@ const AiChatHeader = class {
             index.h("div", { class: "actions" }, index.h("button", { class: "action-btn", "aria-label": "\u0627\u0644\u0639\u0631\u0636 / Position", onClick: () => this.positionClick.emit() }, this.renderIcon('hand', 22, 22)), index.h("button", { class: "action-btn", "aria-label": "\u0625\u063A\u0644\u0627\u0642 / Close", onClick: () => this.closeClick.emit() }, this.renderIcon('cancel', 22, 22))),
         ];
     }
+    renderBrowserMode() {
+        return [
+            this.renderDragBtn(),
+            index.h("div", { class: "content browser" }, index.h("button", { class: "back-btn", "aria-label": "\u0631\u062C\u0648\u0639 / Back", onClick: () => this.backClick.emit() }, this.renderIcon('arrow-right', 24, 24)), index.h("span", { class: "browser-title" }, this.pageTitle), index.h("button", { class: "browser-link-btn", "aria-label": "\u0641\u062A\u062D \u0641\u064A \u0646\u0627\u0641\u0630\u0629 \u062C\u062F\u064A\u062F\u0629 / Open externally", onClick: () => this.openExternal.emit(this.pageUrl) }, this.renderIcon('link', 14, 14))),
+            index.h("div", { class: "actions" }, index.h("button", { class: "action-btn", "aria-label": "\u0627\u0644\u0639\u0631\u0636 / Position", onClick: () => this.positionClick.emit() }, this.renderIcon('hand', 22, 22)), index.h("button", { class: "action-btn", "aria-label": "\u0625\u063A\u0644\u0627\u0642 / Close", onClick: () => this.closeClick.emit() }, this.renderIcon('cancel', 22, 22))),
+        ];
+    }
     render() {
-        return (index.h(index.Host, { key: '66ad39b3b123aebf528b675e9b26a3004693a137' }, index.h("div", { key: '355be9c94e460c995a9fc58484c891c071ed9604', class: "header-container" }, this.mode === 'agent' ? this.renderAgentMode() : this.renderHumanMode())));
+        return (index.h(index.Host, { key: '8e1fe67030a0cb1eb94327f093327fb23d4faf01' }, index.h("div", { key: '14766bd663e5fe027f1a3320bd3f16d79e9feb45', class: "header-wrapper" }, index.h("div", { key: 'bef30f621ba3b148f4af055347eb707bc8f64b15', class: "header-container" }, this.mode === 'agent' ? this.renderAgentMode() : this.mode === 'human' ? this.renderHumanMode() : this.renderBrowserMode()), this.renderConversationDropdown())));
     }
 };
 AiChatHeader.style = aiChatHeaderCss();

package/dist/cjs/ai-chat-message.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-Bs23yVuF.js');
-var iconRegistry = require('./icon-registry-BKb9-2Nt.js');
+var index = require('./index-BQ8Az7-D.js');
+var iconRegistry = require('./icon-registry-D-m8GW4D.js');
 
 /*! @license DOMPurify 3.3.3 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.3.3/LICENSE */
 
@@ -1522,7 +1522,13 @@ const AiChatMessage = class {
     getRenderedContent() {
         if (!this.content)
             return '';
-        return purify.sanitize(this.parseMarkdown(this.content), SANITIZE_CONFIG);
+        try {
+            return purify.sanitize(this.parseMarkdown(this.content), SANITIZE_CONFIG);
+        }
+        catch {
+            // Fallback: render raw text safely if markdown parsing fails
+            return purify.sanitize(`<p>${this.content.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br>')}</p>`, SANITIZE_CONFIG);
+        }
     }
     getRelativeTime() {
         if (!this.timestamp)
@@ -1591,7 +1597,7 @@ const AiChatMessage = class {
             } })), index.h("slot", null), showActions && this.renderActionsBar()), (this.agentName || this.timestamp) && (index.h("div", { class: "agent-info" }, this.agentName && index.h("span", { class: "agent-info-name" }, this.agentName), this.agentName && this.timestamp && this.renderIcon('eclipse', 10), this.timestamp && index.h("span", { class: "agent-info-time" }, this.getRelativeTime()))))));
     }
     render() {
-        return index.h(index.Host, { key: 'ceb0df75b3fc5ba2bd7494e150e679960707b891' }, this.role === 'user' ? this.renderUserMessage() : this.renderAgentMessage());
+        return index.h(index.Host, { key: 'b6fe466c9830e69c3ae6f405daa9e77ef3f75aca' }, this.role === 'user' ? this.renderUserMessage() : this.renderAgentMessage());
     }
 };
 AiChatMessage.style = aiChatMessageCss();

package/dist/cjs/ai-conversation-list.cjs.entry.js

@@ -1,24 +1,34 @@
 'use strict';
 
-var index = require('./index-Bs23yVuF.js');
-var iconRegistry = require('./icon-registry-BKb9-2Nt.js');
+var index = require('./index-BQ8Az7-D.js');
+var iconRegistry = require('./icon-registry-D-m8GW4D.js');
 
-const aiConversationListCss = () => `:host{display:block;height:100%}.conversation-list{display:flex;flex-direction:column;gap:8px;height:100%;background:var(--ai-bg-surface)}.list-scroll{flex:1;overflow-y:auto;padding:0 8px 12px;scrollbar-width:thin;scrollbar-color:var(--ai-scrollbar-thumb) var(--ai-scrollbar-track)}.list-scroll::-webkit-scrollbar{width:4px}.list-scroll::-webkit-scrollbar-track{background:var(--ai-scrollbar-track)}.list-scroll::-webkit-scrollbar-thumb{background:var(--ai-scrollbar-thumb);border-radius:4px}.conv-item{display:flex;align-items:flex-start;gap:6px;margin-top:6px;padding:10px 10px 10px 6px;border-radius:10px;cursor:pointer;transition:background 0.15s;position:relative}.conv-item:hover{background:var(--ai-bg-card)}.conv-item--active{background:var(--ai-bg-card);box-shadow:var(--ai-shadow-sm)}.conv-item__body{flex:1;min-width:0}.conv-item__title{margin:0 0 3px;font-size:13px;font-weight:600;color:var(--ai-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.conv-item__preview{margin:0 0 5px;font-size:12px;color:var(--ai-text-muted);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.conv-item__meta{display:flex;align-items:center;gap:8px}.conv-item__time{font-size:11px;color:var(--ai-text-muted);flex-shrink:0}.rating-dots{display:flex;align-items:center;gap:3px}.rating-dot{width:6px;height:6px;border-radius:50%;background:var(--ai-border-default);transition:background 0.15s}.rating-dot--filled{background:var(--ai-accent-warning, #ffaf44)}.delete-btn{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;background:transparent;border:none;border-radius:6px;cursor:pointer;color:var(--ai-text-muted);opacity:0;transition:opacity 0.15s, background 0.15s, color 0.15s;margin-block-start:2px}.conv-item:hover .delete-btn,.conv-item--active .delete-btn{opacity:1}.delete-btn:hover{background:var(--ai-status-danger-bg, rgba(239, 68, 68, 0.1));color:var(--ai-status-danger, #ef4444)}.delete-btn .icon-wrap{display:inline-flex;align-items:center;line-height:0}.skeleton-list{display:flex;flex-direction:column;gap:4px}.skeleton-item{padding:10px;border-radius:10px;display:flex;flex-direction:column;gap:6px}.skeleton-line{border-radius:6px;background:var(--ai-shimmer-gradient);background-size:200% 100%;animation:shimmer 2s linear infinite;height:12px}.skeleton-line--title{width:65%;height:13px}.skeleton-line--preview{width:100%}.skeleton-line--meta{width:35%;height:10px}@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}`;
+const aiConversationListCss = () => `:host{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}.conversation-list{display:flex;flex-direction:column;gap:8px;flex:1;min-height:0;background:var(--ai-bg-surface)}.list-scroll{flex:1;min-height:0;overflow-y:auto;padding:0 8px 12px;scrollbar-width:thin;scrollbar-color:var(--ai-scrollbar-thumb) transparent}.list-scroll::-webkit-scrollbar{width:3px}.list-scroll::-webkit-scrollbar-track{background:transparent}.list-scroll::-webkit-scrollbar-thumb{background:var(--ai-scrollbar-thumb);border-radius:99px}.list-scroll::-webkit-scrollbar-thumb:hover{background:var(--ai-scrollbar-thumb-hover)}.conv-item{display:flex;align-items:flex-start;gap:6px;margin-top:6px;padding:10px 10px 10px 6px;border-radius:10px;cursor:pointer;transition:background 0.15s;position:relative}.conv-item:hover{background:var(--ai-bg-card)}.conv-item--active{background:var(--ai-bg-card);box-shadow:var(--ai-shadow-sm)}.conv-item__body{flex:1;min-width:0}.conv-item__title{margin:0 0 3px;font-size:13px;font-weight:600;color:var(--ai-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.conv-item__preview{margin:0 0 5px;font-size:12px;color:var(--ai-text-muted);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.conv-item__meta{display:flex;align-items:center;gap:8px}.conv-item__time{font-size:11px;color:var(--ai-text-muted);flex-shrink:0}.rating-dots{display:flex;align-items:center;gap:3px}.rating-dot{width:6px;height:6px;border-radius:50%;background:var(--ai-border-default);transition:background 0.15s}.rating-dot--filled{background:var(--ai-accent-warning, #ffaf44)}.delete-btn{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;background:transparent;border:none;border-radius:6px;cursor:pointer;color:var(--ai-text-muted);opacity:0;transition:opacity 0.15s, background 0.15s, color 0.15s;margin-block-start:2px}.conv-item:hover .delete-btn,.conv-item--active .delete-btn{opacity:1}.delete-btn:hover{background:var(--ai-status-danger-bg, rgba(239, 68, 68, 0.1));color:var(--ai-status-danger, #ef4444)}.delete-btn .icon-wrap{display:inline-flex;align-items:center;line-height:0}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:40px 16px;text-align:center}.empty-state__icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background:var(--ai-bg-card);color:var(--ai-text-muted);line-height:0}.empty-state__icon .icon-wrap{display:inline-flex;align-items:center;line-height:0}.empty-state__text{margin:0;font-size:13px;color:var(--ai-text-muted);line-height:1.4}.error-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:40px 16px;text-align:center}.error-state__icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background:var(--ai-status-danger-bg, rgba(239, 68, 68, 0.1));color:var(--ai-status-danger, #ef4444);line-height:0}.error-state__icon .icon-wrap{display:inline-flex;align-items:center;line-height:0}.error-state__text{margin:0;font-size:13px;color:var(--ai-text-muted);line-height:1.4}.error-state__retry{display:inline-flex;align-items:center;gap:4px;margin-top:4px;padding:6px 14px;font-size:12px;font-weight:600;color:var(--ai-text-primary);background:var(--ai-bg-card);border:1px solid var(--ai-border-default);border-radius:8px;cursor:pointer;transition:background 0.15s, box-shadow 0.15s}.error-state__retry:hover{box-shadow:var(--ai-shadow-sm)}.error-state__retry .icon-wrap{display:inline-flex;align-items:center;line-height:0}.skeleton-list{display:flex;flex-direction:column;gap:4px}.skeleton-item{padding:10px;border-radius:10px;display:flex;flex-direction:column;gap:6px}.skeleton-line{border-radius:6px;background:var(--ai-shimmer-gradient, linear-gradient(90deg, rgba(0, 0, 0, 0.06) 25%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.06) 75%));background-size:200% 100%;animation:shimmer 2s linear infinite;height:12px}.skeleton-line--title{width:65%;height:13px}.skeleton-line--preview{width:100%}.skeleton-line--meta{width:35%;height:10px}@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}`;
 
 const AiConversationList = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.conversationSelect = index.createEvent(this, "conversationSelect");
         this.conversationDelete = index.createEvent(this, "conversationDelete");
+        this.retryClick = index.createEvent(this, "retryClick");
     }
     /** JSON array of ConversationItem */
-    items = '[]';
+    items = [];
     /** ID of the currently active conversation */
     activeId = '';
     /** Show skeleton loading state */
     loading = false;
+    /** Text shown when the list is empty */
+    emptyText = 'لا توجد محادثات';
+    /** Show error state when fetching conversations fails */
+    error = false;
+    /** Error message text */
+    errorText = 'تعذّر تحميل المحادثات';
+    /** Retry button label for error state */
+    retryLabel = 'إعادة المحاولة';
     conversationSelect;
     conversationDelete;
+    retryClick;
     renderIcon(name, width, height) {
         const icon = iconRegistry.iconRegistry[name];
         if (!icon)
@@ -26,17 +36,13 @@ const AiConversationList = class {
         const svg = `<svg width="${width}" height="${height}" viewBox="${icon.viewBox}" fill="none" xmlns="http://www.w3.org/2000/svg">${icon.content}</svg>`;
         return index.h("span", { class: "icon-wrap", innerHTML: svg });
     }
-    getItems() {
-        try {
-            return JSON.parse(this.items) || [];
-        }
-        catch {
-            return [];
-        }
-    }
     formatRelativeTime(timestamp) {
+        if (!timestamp)
+            return '';
         try {
             const date = new Date(timestamp);
+            if (isNaN(date.getTime()))
+                return timestamp;
             const diffMs = Date.now() - date.getTime();
             const diffMin = Math.floor(diffMs / 60000);
             const diffHour = Math.floor(diffMin / 60);
@@ -52,7 +58,7 @@ const AiConversationList = class {
             return rtf.format(-diffDay, 'day');
         }
         catch {
-            return '';
+            return timestamp;
         }
     }
     renderRatingDots(rating) {
@@ -62,17 +68,27 @@ const AiConversationList = class {
     renderSkeleton() {
         return (index.h("div", { class: "skeleton-list" }, [1, 2, 3, 4].map(i => (index.h("div", { key: i, class: "skeleton-item" }, index.h("div", { class: "skeleton-line skeleton-line--title" }), index.h("div", { class: "skeleton-line skeleton-line--preview" }), index.h("div", { class: "skeleton-line skeleton-line--meta" }))))));
     }
+    renderEmpty() {
+        return (index.h("div", { class: "empty-state" }, index.h("div", { class: "empty-state__icon" }, this.renderIcon('list', 24, 24)), index.h("p", { class: "empty-state__text" }, this.emptyText)));
+    }
+    renderError() {
+        return (index.h("div", { class: "error-state" }, index.h("div", { class: "error-state__icon" }, this.renderIcon('wifi-off', 24, 24)), index.h("p", { class: "error-state__text" }, this.errorText), index.h("button", { class: "error-state__retry", onClick: () => this.retryClick.emit() }, this.renderIcon('reload', 14, 14), index.h("span", null, this.retryLabel))));
+    }
     render() {
-        const list = this.getItems();
-        return (index.h(index.Host, { key: '8c3d6b60fbd6fbc9e073d5dcada95a04bf6b22eb' }, index.h("div", { key: 'e11e29b8fb0247617b00fca7ab5d76bd547efc69', class: "conversation-list" }, index.h("div", { key: 'a24920fd77797e113fe91c96fe033c8301f01d58', class: "list-scroll", role: "list" }, this.loading
+        const showEmpty = !this.loading && !this.error && this.items.length === 0;
+        return (index.h(index.Host, { key: 'f869a0422848385a43512486a021e3932e51589d' }, index.h("div", { key: 'b0f78202691e6329b9a73987f499c20d89b86c4b', class: "conversation-list" }, index.h("div", { key: '5a007fffa3fe9ef16445395966b1e14d2f516cf9', class: "list-scroll", role: "list" }, this.loading
             ? this.renderSkeleton()
-            : list.map(item => {
-                const isActive = item.id === this.activeId;
-                return (index.h("div", { key: item.id, class: { 'conv-item': true, 'conv-item--active': isActive }, role: "listitem", "aria-current": isActive ? 'true' : undefined, onClick: () => this.conversationSelect.emit(item.id) }, index.h("div", { class: "conv-item__body" }, index.h("p", { class: "conv-item__title" }, item.title), index.h("p", { class: "conv-item__preview" }, item.preview), index.h("div", { class: "conv-item__meta" }, index.h("span", { class: "conv-item__time" }, this.formatRelativeTime(item.timestamp)), item.rating != null && this.renderRatingDots(item.rating))), index.h("button", { class: "delete-btn", "aria-label": "\u062D\u0630\u0641 \u0627\u0644\u0645\u062D\u0627\u062F\u062B\u0629", onClick: e => {
-                        e.stopPropagation();
-                        this.conversationDelete.emit(item.id);
-                    } }, this.renderIcon('cancel', 14, 14))));
-            })))));
+            : this.error
+                ? this.renderError()
+                : showEmpty
+                    ? this.renderEmpty()
+                    : this.items.map(item => {
+                        const isActive = item.id === this.activeId;
+                        return (index.h("div", { key: item.id, class: { 'conv-item': true, 'conv-item--active': isActive }, role: "listitem", "aria-current": isActive ? 'true' : undefined, onClick: () => this.conversationSelect.emit(item.id) }, index.h("div", { class: "conv-item__body" }, index.h("p", { class: "conv-item__title" }, item.title), index.h("p", { class: "conv-item__preview" }, item.preview), index.h("div", { class: "conv-item__meta" }, index.h("span", { class: "conv-item__time" }, this.formatRelativeTime(item.timestamp)), item.rating != null && this.renderRatingDots(item.rating))), index.h("button", { class: "delete-btn", "aria-label": "\u062D\u0630\u0641 \u0627\u0644\u0645\u062D\u0627\u062F\u062B\u0629", onClick: e => {
+                                e.stopPropagation();
+                                this.conversationDelete.emit(item.id);
+                            } }, this.renderIcon('cancel', 14, 14))));
+                    })))));
     }
 };
 AiConversationList.style = aiConversationListCss();

package/dist/cjs/ai-conversation-summary.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-Bs23yVuF.js');
-var iconRegistry = require('./icon-registry-BKb9-2Nt.js');
+var index = require('./index-BQ8Az7-D.js');
+var iconRegistry = require('./icon-registry-D-m8GW4D.js');
 
 const aiConversationSummaryCss = () => `:host{display:block}.icon-wrap{display:inline-flex;align-items:center;justify-content:center;line-height:0}.summary-card{background:var(--ai-bg-card);border:1px solid var(--ai-border-default);border-radius:16px;box-shadow:var(--ai-shadow-sm);overflow:hidden;animation:fade-in 0.3s ease}@keyframes fade-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.summary-header{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid var(--ai-border-default)}.sparkle-avatar{width:24px;height:24px;border-radius:9999px;background:var(--ai-bg-surface);box-shadow:var(--ai-shadow-inner);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--ai-amber)}.summary-title{font-size:15px;font-weight:500;color:var(--ai-text-primary);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.summary-badges{display:inline-flex;align-items:center;gap:6px;flex-shrink:0}.badge{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:500;color:var(--ai-accent-dark);background:var(--ai-accent-bg);padding:2px 8px;border-radius:9999px;white-space:nowrap}.lang-badge{color:var(--ai-text-secondary);background:var(--ai-bg-surface)}.summary-body{margin:0;padding:12px 16px;font-size:14px;color:var(--ai-text-secondary);line-height:1.6;border-bottom:1px solid var(--ai-border-default)}.summary-slot{padding:12px 16px}.summary-slot:empty{display:none}`;
 
@@ -25,7 +25,7 @@ const AiConversationSummary = class {
         return index.h("span", { class: "icon-wrap", innerHTML: svg });
     }
     render() {
-        return (index.h(index.Host, { key: '7d24574485e990986d6325bbf6f04b52b65e6a2d' }, index.h("div", { key: 'd55f22088754c266516c242228028c486ec94796', class: "summary-card" }, index.h("div", { key: 'b60b8f661a7edbb8a3b133f4a4998eb0ae57371c', class: "summary-header" }, index.h("div", { key: '1a1ce3df47afcf2b92caf2a8fc4dd2c7baca3370', class: "sparkle-avatar" }, this.renderIcon('sparkle', 14, 14)), index.h("span", { key: 'fbebe5e290dfa41a607e32f7159778b5ddb6250c', class: "summary-title" }, this.conversation), index.h("div", { key: '662436df14966ae975116c54dec54bb70ee887f5', class: "summary-badges" }, this.messageCount > 0 && (index.h("span", { key: 'ad3cc08fc5ba060deccafbebe39c53201d520192', class: "badge" }, this.renderIcon('list', 12, 12), this.messageCount)), this.language && (index.h("span", { key: 'c1fb40de5cce02913770604508aceae616bf50c4', class: "badge lang-badge" }, this.language)))), this.summary && (index.h("p", { key: 'd555295af336a739ede2f3453cba567630eaafe1', class: "summary-body", ref: el => el && (el.textContent = this.summary) })), index.h("div", { key: '4cb6f52194b37a037029da491153624749cd9bef', class: "summary-slot" }, index.h("slot", { key: '53cbd9e4d53ae8a51e43960369d7a5b45d7d491d' })))));
+        return (index.h(index.Host, { key: 'd8dd368f17be91aaef528ae8092cce78bb19e35a' }, index.h("div", { key: '0460dcf3531e947c8ad6ea9d38fc76a1f0ec687d', class: "summary-card" }, index.h("div", { key: '01d46505f838f90ccc4c2d6e57f7b92982f45bd9', class: "summary-header" }, index.h("div", { key: '33afcdbe1f575a31a04ac7a1de948ab32dc76a83', class: "sparkle-avatar" }, this.renderIcon('sparkle', 14, 14)), index.h("span", { key: 'a645e52868e63ddcc8be501ae4d2a680ec6b3b27', class: "summary-title" }, this.conversation), index.h("div", { key: '14ade251a1136afae789c4d097013686f50a18f7', class: "summary-badges" }, this.messageCount > 0 && (index.h("span", { key: '70bf7e43f5d8f2ee38b2627d7f011d686bbb1b49', class: "badge" }, this.renderIcon('list', 12, 12), this.messageCount)), this.language && (index.h("span", { key: '9ad21900a26a59dabb2a25809995500363768692', class: "badge lang-badge" }, this.language)))), this.summary && (index.h("p", { key: '342007bc9de432fb64f71c84b301fbc802f9d119', class: "summary-body", ref: el => el && (el.textContent = this.summary) })), index.h("div", { key: 'c0ca1841f37918e0e1a805b34f53e2f0b204bbda', class: "summary-slot" }, index.h("slot", { key: '24cf0b383924109ed50aded7929320c1d66f3ea1' })))));
     }
 };
 AiConversationSummary.style = aiConversationSummaryCss();

package/dist/cjs/ai-icon.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-Bs23yVuF.js');
-var iconRegistry = require('./icon-registry-BKb9-2Nt.js');
+var index = require('./index-BQ8Az7-D.js');
+var iconRegistry = require('./icon-registry-D-m8GW4D.js');
 
 const aiIconCss = () => `:host{display:inline-flex;align-items:center;justify-content:center}svg{display:block}`;