@salla.sa/ui-ai-kit-core 1.1.0 → 1.1.1

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-DLJcLHFH.js');
+var index = require('./index-BkNg07SW.js');
 
-const aiCardCss = () => `:host{--ai-card-bg:var(--ai-bg-card, #ffffff);--ai-card-border:1px solid var(--ai-border-default, #eeeeee);--ai-card-radius:16px;--ai-card-padding:16px;--ai-card-gap:12px;--ai-card-shadow:0px 1px 2px 0px rgba(18, 18, 23, 0.05);--ai-text-color:var(--ai-text-primary, #333333);display:block;direction:rtl}.card{background:var(--ai-card-bg);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-color);width:100%;display:flex;flex-direction:column;gap:var(--ai-card-gap);text-align:right;font-size:14px;line-height:20px}.card--no-padding{padding:0}.card--no-shadow{box-shadow:none}`;
+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}`;
 
 const AiCard = class {
     constructor(hostRef) {

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

@@ -1,13 +1,10 @@
 'use strict';
 
-var index = require('./index-DLJcLHFH.js');
+var index = require('./index-BkNg07SW.js');
 
-const aiChatContainerCss = () => `:host{display:contents}.chat-container{font-family:var(--ai-font-family, 'PingARLT', sans-serif);display:flex;flex-direction:column;overflow:hidden;position:relative;background-color:var(--ai-container-bg, var(--ai-bg-card, white));border:1px solid var(--border-default, var(--ai-border-default, #eee));z-index:50;box-sizing:border-box}.messages-area{flex:1;overflow-y:auto;min-height:0;scrollbar-width:thin;scrollbar-color:var(--ai-scrollbar-thumb, rgba(0, 0, 0, 0.15)) transparent}.messages-area::-webkit-scrollbar{width:3px}.messages-area::-webkit-scrollbar-track{background:transparent}.messages-area::-webkit-scrollbar-thumb{background:var(--ai-scrollbar-thumb, rgba(0, 0, 0, 0.15));border-radius:99px}.messages-area::-webkit-scrollbar-thumb:hover{background:var(--ai-scrollbar-thumb, rgba(0, 0, 0, 0.28))}.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;top:24px;left:24px;border-radius:16px;box-shadow:0 8px 32px rgba(0, 0, 0, 0.12),     0 2px 8px rgba(0, 0, 0, 0.08);display:none}.chat-container.float.open{display:flex}.watermark{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);pointer-events:none}.watermark ai-icon{opacity:0.8;filter:drop-shadow(0 4px 6px rgba(0, 0, 0, 0.05))}.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}}:host(.dark) .watermark ai-icon{opacity:0.6}`;
+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:0.8;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}}:host(.dark) .watermark ai-icon{opacity:0.6}`;
 
 const ChatContainer = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
     get el() { return index.getElement(this); }
     /** Controls visibility of the chat panel */
     isOpen = false;
@@ -21,32 +18,90 @@ const ChatContainer = class {
     showWatermark = false;
     /** Height of the panel when position='float' */
     floatHeight = '600px';
+    /** Color theme for the panel */
+    theme = 'light';
     isMobile = false;
+    floatLeft = '24px';
+    floatTop = '24px';
     containerRef;
+    messagesAreaRef;
     dragState = null;
-    resizeObserver;
+    // Named arrow so we can reliably add/remove it without leaking
+    dragListener = (e) => {
+        const container = this.containerRef;
+        if (!container)
+            return;
+        const { clientX, clientY } = e.detail;
+        const rect = container.getBoundingClientRect();
+        this.dragState = {
+            startX: clientX,
+            startY: clientY,
+            initLeft: rect.left,
+            initTop: rect.top,
+        };
+        // Capture current rendered position into state so subsequent re-renders don't jump
+        this.floatLeft = `${rect.left}px`;
+        this.floatTop = `${rect.top}px`;
+        const onMove = (me) => {
+            if (!this.dragState)
+                return;
+            const dx = me.clientX - this.dragState.startX;
+            const dy = me.clientY - this.dragState.startY;
+            let newLeft = this.dragState.initLeft + dx;
+            let newTop = this.dragState.initTop + dy;
+            const vw = window.innerWidth;
+            const vh = window.innerHeight;
+            const w = container.offsetWidth;
+            const h = container.offsetHeight;
+            newLeft = Math.max(0, Math.min(newLeft, vw - w));
+            newTop = Math.max(0, Math.min(newTop, vh - h));
+            this.floatLeft = `${newLeft}px`;
+            this.floatTop = `${newTop}px`;
+        };
+        const onUp = () => {
+            this.dragState = null;
+            document.removeEventListener('pointermove', onMove);
+            document.removeEventListener('pointerup', onUp);
+        };
+        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') {
-            this.resizeObserver = new ResizeObserver(() => {
-                this.checkMobile();
-            });
-            this.resizeObserver.observe(document.body);
+            window.addEventListener('resize', this.checkMobile);
             if (this.position === 'float') {
                 this.setupDrag();
             }
         }
     }
+    isOpenChanged(newVal) {
+        if (newVal && this.autoScroll && this.messagesAreaRef) {
+            requestAnimationFrame(() => {
+                this.messagesAreaRef.scrollTop = this.messagesAreaRef.scrollHeight;
+            });
+        }
+    }
     positionChanged(newVal) {
         if (newVal === 'float') {
             this.setupDrag();
         }
     }
     disconnectedCallback() {
-        if (this.resizeObserver) {
-            this.resizeObserver.disconnect();
+        window.removeEventListener('resize', this.checkMobile);
+        this.el.removeEventListener('headerDragStart', this.dragListener);
+    }
+    /** Programmatically scroll the messages area to the bottom */
+    async scrollToBottom() {
+        if (this.messagesAreaRef) {
+            this.messagesAreaRef.scrollTop = this.messagesAreaRef.scrollHeight;
         }
     }
     checkMobile() {
@@ -55,50 +110,9 @@ const ChatContainer = class {
         }
     }
     setupDrag() {
-        const container = this.containerRef;
-        if (!container)
-            return;
-        // Listen on the host element so composed events from ai-chat-header's shadow DOM
-        // are received. (composedPath() hides cross-shadow-root elements from shadow listeners.)
-        this.el.addEventListener('headerDragStart', (e) => {
-            const { clientX, clientY } = e.detail;
-            const rect = container.getBoundingClientRect();
-            this.dragState = {
-                startX: clientX,
-                startY: clientY,
-                initLeft: rect.left,
-                initTop: rect.top,
-            };
-            // Switch from bottom/right anchoring to top/left so we can move freely
-            container.style.right = 'auto';
-            container.style.bottom = 'auto';
-            container.style.left = `${rect.left}px`;
-            container.style.top = `${rect.top}px`;
-            const onMove = (me) => {
-                if (!this.dragState)
-                    return;
-                const dx = me.clientX - this.dragState.startX;
-                const dy = me.clientY - this.dragState.startY;
-                let newLeft = this.dragState.initLeft + dx;
-                let newTop = this.dragState.initTop + dy;
-                // Clamp to viewport edges
-                const vw = window.innerWidth;
-                const vh = window.innerHeight;
-                const w = container.offsetWidth;
-                const h = container.offsetHeight;
-                newLeft = Math.max(0, Math.min(newLeft, vw - w));
-                newTop = Math.max(0, Math.min(newTop, vh - h));
-                container.style.left = `${newLeft}px`;
-                container.style.top = `${newTop}px`;
-            };
-            const onUp = () => {
-                this.dragState = null;
-                document.removeEventListener('pointermove', onMove);
-                document.removeEventListener('pointerup', onUp);
-            };
-            document.addEventListener('pointermove', onMove);
-            document.addEventListener('pointerup', onUp);
-        });
+        // Remove any existing listener before adding to prevent accumulation
+        this.el.removeEventListener('headerDragStart', this.dragListener);
+        this.el.addEventListener('headerDragStart', this.dragListener);
     }
     getContainerClasses() {
         const classes = ['chat-container', this.position];
@@ -118,16 +132,29 @@ const ChatContainer = class {
         if (this.position === 'float') {
             style.width = this.width;
             style.height = this.floatHeight;
+            style.left = this.floatLeft;
+            style.top = this.floatTop;
         }
         else {
             style.width = this.width;
         }
         return style;
     }
+    isDark() {
+        if (this.theme === 'dark')
+            return true;
+        if (this.theme === 'auto' && typeof window !== 'undefined') {
+            return window.matchMedia('(prefers-color-scheme: dark)').matches;
+        }
+        return false;
+    }
     render() {
-        return (index.h(index.Host, { key: '5048010bf45a26985c92bfb9a6caf01d8aa938c0' }, index.h("div", { key: '08491cff2361071bc0635914cc665281b80321ac', class: this.getContainerClasses(), style: this.getContainerStyle(), ref: el => (this.containerRef = el) }, this.showWatermark && (index.h("div", { key: '366140a61929689fc522dddfb1485bbd4d2cbef9', class: "watermark" }, index.h("ai-icon", { key: '5e210929feeb519889344385fa2fb75373ff8fed', name: "watermark", size: 133 }))), index.h("slot", { key: '57eef4d0c273009feeeb4f03400e05352acdf6cd', name: "header" }), index.h("div", { key: '15b14f49819f886ce1d56de87c770bb7241dcd77', class: "messages-area" }, index.h("slot", { key: '050cd0fde5bc3de75df0747031dc84214c125d5d' })), index.h("slot", { key: '195ab33291da775299e0d7c0c53df92fcf46a4ca', name: "footer" }))));
+        return (index.h(index.Host, { key: 'dd656127f6974b6eef12f64c78c072f2c1f92a6a', class: { dark: this.isDark() } }, index.h("div", { key: '0eb43bc5c8b80e5576146f01998e5279eb860162', class: this.getContainerClasses(), style: this.getContainerStyle(), ref: el => (this.containerRef = el) }, this.showWatermark && (index.h("div", { key: '363046f0e73ab7aa0209d5f41562031fb34d6c2d', class: "watermark" }, index.h("ai-icon", { key: '1f3c26ba6a145f8532f6e1a40ea344249e8e5b43', name: "watermark", size: 133 }))), index.h("slot", { key: '3ec10548660ff721c094be36a15a152fdf6dac78', name: "header" }), index.h("div", { key: '9babb87041287ac400322b910aa64f7a7b1743a5', class: "messages-area", ref: el => (this.messagesAreaRef = el) }, index.h("slot", { key: '937c0c0bd675e5a619d46883e7c1f890754aae4b' })), index.h("slot", { key: '0982b8bc96537c6cecca757926d5849ba386bd69', name: "footer" }))));
     }
     static get watchers() { return {
+        "isOpen": [{
+                "isOpenChanged": 0
+            }],
         "position": [{
                 "positionChanged": 0
             }]

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

@@ -1,9 +1,9 @@
 'use strict';
 
-var index = require('./index-DLJcLHFH.js');
-var iconRegistry = require('./icon-registry-dmfLA-Dj.js');
+var index = require('./index-BkNg07SW.js');
+var iconRegistry = require('./icon-registry-BKb9-2Nt.js');
 
-const aiChatHeaderCss = () => `:host{display:block;font-family:var(--ai-font-family, "PingARLT", sans-serif)}.header-container{display:flex;align-items:center;gap:8px;padding:16px;background:var(--ai-bg-card, white);border-bottom:1px solid var(--ai-border-light, #f4f4f4);width:100%;box-sizing:border-box}.header-container{direction:rtl}.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, white);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, #f9fafb)}.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, #f3f4f6)}.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, #444444);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, #eeeeee);object-fit:cover;display:block}.online-dot{position:absolute;bottom:0;left:0;width:10px;height:10px;display:inline-flex;align-items:center;justify-content:center;color:var(--ai-bg-card);}.text-block{display:flex;flex-direction:column;align-items:flex-end;gap:0;flex-shrink:0}.agent-name{font-size:14px;font-weight:500;color:var(--ai-text-primary, #333333);line-height:20px;white-space:nowrap}.agent-status{font-size:14px;font-weight:400;color:var(--ai-text-secondary, #737373);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}`;
+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 AiChatHeader = class {
     constructor(hostRef) {
@@ -28,13 +28,16 @@ const AiChatHeader = class {
     /** Human mode: show the back button */
     showBack = true;
     isDraggable = false;
+    /** Human mode: status indicator variant */
+    statusIndicator = 'online';
+    avatarError = false;
     /** Cancel / close button */
     closeClick;
     /** Pencil-edit button (agent mode) */
     editClick;
     /** Title / chevron click → open conversation list (agent mode) */
     dropdownClick;
-    /** Chevron-down button (human mode) */
+    /** More options button */
     moreClick;
     /** Back-arrow button (human mode) */
     backClick;
@@ -50,28 +53,35 @@ const AiChatHeader = 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 });
     }
+    renderAvatar() {
+        const fallbackLetter = this.agentName ? this.agentName.charAt(0) : '?';
+        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; } }));
+    }
+    renderDragBtn() {
+        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)));
+    }
     renderAgentMode() {
         return [
-            this.isDraggable && (index.h("button", { class: "action-btn drag-btn", onPointerDown: (e) => {
-                    e.preventDefault();
-                    this.headerDragStart.emit({ clientX: e.clientX, clientY: e.clientY });
-                } }, this.renderIcon('drag', 11, 15))),
-            index.h("div", { class: "content agent" }, index.h("span", { class: "title" }, this.conversation), index.h("button", { class: "dropdown-trigger", onClick: () => this.dropdownClick.emit() }, this.renderIcon('chevron-down', 24, 24))),
-            index.h("div", { class: "actions" }, index.h("button", { class: "action-btn", onClick: () => this.editClick.emit() }, this.renderIcon('pencil-edit', 22, 22)), index.h("button", { class: "action-btn", onClick: () => this.moreClick.emit() }, this.renderIcon('hand', 22, 22)), index.h("button", { class: "action-btn", onClick: () => this.closeClick.emit() }, this.renderIcon('cancel', 22, 22))),
+            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: "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\u0645\u0632\u064A\u062F / More", onClick: () => this.moreClick.emit() }, this.renderIcon('ellipsis', 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))),
         ];
     }
     renderHumanMode() {
         return [
-            this.isDraggable && (index.h("button", { class: "action-btn drag-btn", onPointerDown: (e) => {
-                    e.preventDefault();
-                    this.headerDragStart.emit({ clientX: e.clientX, clientY: e.clientY });
-                } }, this.renderIcon('drag', 11, 15))),
-            index.h("div", { class: "content human" }, this.showBack && (index.h("button", { class: "back-btn", onClick: () => this.backClick.emit() }, this.renderIcon('arrow-right', 24, 24))), index.h("div", { class: "avatar-wrapper" }, index.h("img", { class: "avatar", src: this.agentAvatar, alt: this.agentName }), index.h("span", { class: "online-dot" }, this.renderIcon('online-dot', 10, 10))), index.h("div", { class: "text-block" }, index.h("span", { class: "agent-name" }, this.agentName), index.h("span", { class: "agent-status" }, this.agentStatus))),
-            index.h("div", { class: "actions" }, index.h("button", { class: "action-btn", onClick: () => this.moreClick.emit() }, this.renderIcon('hand', 22, 22)), index.h("button", { class: "action-btn", onClick: () => this.closeClick.emit() }, this.renderIcon('cancel', 22, 22))),
+            this.renderDragBtn(),
+            index.h("div", { class: "content human" }, this.showBack && (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("div", { class: "avatar-wrapper" }, this.renderAvatar(), index.h("span", { class: `online-dot status-${this.statusIndicator}` }, this.renderIcon('online-dot', 10, 10))), index.h("div", { class: "text-block" }, index.h("span", { class: "agent-name" }, this.agentName), this.agentStatus && index.h("span", { class: "agent-status" }, this.agentStatus))),
+            index.h("div", { class: "actions" }, index.h("button", { class: "action-btn", "aria-label": "\u0627\u0644\u0645\u0632\u064A\u062F / More", onClick: () => this.moreClick.emit() }, this.renderIcon('ellipsis', 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: '93fe332abe1339f7235aa18717d63aa65d9aac13' }, index.h("div", { key: 'b496695911f7d1f959c4f98506b0d230e77a86c3', class: "header-container" }, this.mode === 'agent' ? this.renderAgentMode() : this.renderHumanMode())));
+        return (index.h(index.Host, { key: 'f0b6caccf925bc1388b2680b49e4aec3a44fa353' }, index.h("div", { key: 'fd144266fb338cbb5d70a3fb1ae9c1b39710ffc5', class: "header-container" }, this.mode === 'agent' ? this.renderAgentMode() : this.renderHumanMode())));
     }
 };
 AiChatHeader.style = aiChatHeaderCss();