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

package/dist/collection/components/ai-chat-container/ai-chat-container.js

@@ -13,32 +13,89 @@ export class ChatContainer {
     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() {
+        // 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() {
@@ -47,50 +104,9 @@ export class ChatContainer {
         }
     }
     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];
@@ -110,14 +126,24 @@ export class ChatContainer {
         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 (h(Host, { key: '5048010bf45a26985c92bfb9a6caf01d8aa938c0' }, h("div", { key: '08491cff2361071bc0635914cc665281b80321ac', class: this.getContainerClasses(), style: this.getContainerStyle(), ref: el => (this.containerRef = el) }, this.showWatermark && (h("div", { key: '366140a61929689fc522dddfb1485bbd4d2cbef9', class: "watermark" }, h("ai-icon", { key: '5e210929feeb519889344385fa2fb75373ff8fed', name: "watermark", size: 133 }))), h("slot", { key: '57eef4d0c273009feeeb4f03400e05352acdf6cd', name: "header" }), h("div", { key: '15b14f49819f886ce1d56de87c770bb7241dcd77', class: "messages-area" }, h("slot", { key: '050cd0fde5bc3de75df0747031dc84214c125d5d' })), h("slot", { key: '195ab33291da775299e0d7c0c53df92fcf46a4ca', name: "footer" }))));
+        return (h(Host, { key: 'dd656127f6974b6eef12f64c78c072f2c1f92a6a', class: { dark: this.isDark() } }, h("div", { key: '0eb43bc5c8b80e5576146f01998e5279eb860162', class: this.getContainerClasses(), style: this.getContainerStyle(), ref: el => (this.containerRef = el) }, this.showWatermark && (h("div", { key: '363046f0e73ab7aa0209d5f41562031fb34d6c2d', class: "watermark" }, h("ai-icon", { key: '1f3c26ba6a145f8532f6e1a40ea344249e8e5b43', name: "watermark", size: 133 }))), h("slot", { key: '3ec10548660ff721c094be36a15a152fdf6dac78', name: "header" }), h("div", { key: '9babb87041287ac400322b910aa64f7a7b1743a5', class: "messages-area", ref: el => (this.messagesAreaRef = el) }, h("slot", { key: '937c0c0bd675e5a619d46883e7c1f890754aae4b' })), h("slot", { key: '0982b8bc96537c6cecca757926d5849ba386bd69', name: "footer" }))));
     }
     static get is() { return "ai-chat-container"; }
     static get encapsulation() { return "shadow"; }
@@ -252,17 +278,63 @@ export class ChatContainer {
                 "reflect": false,
                 "attribute": "float-height",
                 "defaultValue": "'600px'"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'light' | 'dark' | 'auto'",
+                    "resolved": "\"auto\" | \"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Color theme for the panel"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "theme",
+                "defaultValue": "'light'"
             }
         };
     }
     static get states() {
         return {
-            "isMobile": {}
+            "isMobile": {},
+            "floatLeft": {},
+            "floatTop": {}
+        };
+    }
+    static get methods() {
+        return {
+            "scrollToBottom": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically scroll the messages area to the bottom",
+                    "tags": []
+                }
+            }
         };
     }
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "isOpen",
+                "methodName": "isOpenChanged"
+            }, {
                 "propName": "position",
                 "methodName": "positionChanged"
             }];

package/dist/collection/components/ai-chat-header/ai-chat-header.css

@@ -1,6 +1,5 @@
 :host {
   display: block;
-  font-family: var(--ai-font-family, "PingARLT", sans-serif);
 }
 
 /* ── Container ──────────────────────────────────────────────────── */
@@ -9,16 +8,12 @@
   align-items: center;
   gap: 8px;
   padding: 16px;
-  background: var(--ai-bg-card, white);
-  border-bottom: 1px solid var(--ai-border-light, #f4f4f4);
+  background: var(--ai-bg-card);
+  border-bottom: 1px solid var(--ai-border-light);
   width: 100%;
   box-sizing: border-box;
 }
 
-.header-container {
-  direction: rtl;
-}
-
 /* ── Action & Back Buttons ──────────────────────────────────────── */
 .drag-btn {
   cursor: grab;
@@ -37,7 +32,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--ai-bg-card, white);
+  background: var(--ai-bg-card);
   border: none;
   border-radius: 8px;
   cursor: pointer;
@@ -48,7 +43,7 @@
 
 .action-btn:hover,
 .back-btn:hover {
-  background: var(--ai-bg-surface, #f9fafb);
+  background: var(--ai-bg-surface);
 }
 
 .action-btn:focus-visible,
@@ -59,7 +54,7 @@
 
 .action-btn:active,
 .back-btn:active {
-  background: var(--ai-bg-surface, #f3f4f6);
+  background: var(--ai-bg-surface);
 }
 
 /* ── Actions Group ──────────────────────────────────────────────── */
@@ -110,7 +105,7 @@
 .title {
   font-size: 16px;
   font-weight: 700;
-  color: var(--ai-text-primary, #444444);
+  color: var(--ai-text-primary);
   white-space: nowrap;
   line-height: normal;
   min-width: 0;
@@ -130,15 +125,30 @@
   width: 40px;
   height: 40px;
   border-radius: 9999px;
-  border: 1px solid var(--ai-border-default, #eeeeee);
+  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;
-  left: 0;
+  inset-inline-end: 0;
   width: 10px;
   height: 10px;
   display: inline-flex;
@@ -147,20 +157,36 @@
   color: var(--ai-bg-card); /* used as stroke to match card bg in both themes */
 }
 
+/* Status indicator color variants */
+.online-dot.status-online {
+  color: #22c55e; /* green */
+}
+
+.online-dot.status-offline {
+  color: #9ca3af; /* gray */
+}
+
+.online-dot.status-busy {
+  color: #ef4444; /* red */
+}
+
+.online-dot.status-away {
+  color: #f59e0b; /* amber */
+}
+
 /* ── Text Block (human mode) ────────────────────────────────────── */
 .text-block {
   display: flex;
   flex-direction: column;
-  align-items: flex-end;
+  align-items: flex-start;
   gap: 0;
   flex-shrink: 0;
 }
 
-
 .agent-name {
   font-size: 14px;
   font-weight: 500;
-  color: var(--ai-text-primary, #333333);
+  color: var(--ai-text-primary);
   line-height: 20px;
   white-space: nowrap;
 }
@@ -168,7 +194,7 @@
 .agent-status {
   font-size: 14px;
   font-weight: 400;
-  color: var(--ai-text-secondary, #737373);
+  color: var(--ai-text-secondary);
   line-height: 20px;
   white-space: nowrap;
 }
@@ -184,3 +210,10 @@
 .icon-wrap svg {
   display: block;
 }
+
+/* ── Directional icon flip (back-btn arrow points right in RTL = "back";
+   in LTR it must flip to point left) ──────────────────────────────────── */
+:host-context([dir='ltr']) .back-btn .icon-wrap,
+:host([dir='ltr']) .back-btn .icon-wrap {
+  transform: scaleX(-1);
+}

package/dist/collection/components/ai-chat-header/ai-chat-header.js

@@ -14,13 +14,16 @@ export class AiChatHeader {
     /** 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;
@@ -36,28 +39,35 @@ export class AiChatHeader {
         const svg = `<svg width="${width}" height="${height}" viewBox="${icon.viewBox}" fill="none" xmlns="http://www.w3.org/2000/svg">${icon.content}</svg>`;
         return h("span", { class: "icon-wrap", innerHTML: svg });
     }
+    renderAvatar() {
+        const fallbackLetter = this.agentName ? this.agentName.charAt(0) : '?';
+        if (!this.agentAvatar || this.avatarError) {
+            return h("div", { class: "avatar-fallback" }, fallbackLetter);
+        }
+        return (h("img", { class: "avatar", src: this.agentAvatar, alt: this.agentName, onError: () => { this.avatarError = true; } }));
+    }
+    renderDragBtn() {
+        return this.isDraggable && (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 && (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))),
-            h("div", { class: "content agent" }, h("span", { class: "title" }, this.conversation), h("button", { class: "dropdown-trigger", onClick: () => this.dropdownClick.emit() }, this.renderIcon('chevron-down', 24, 24))),
-            h("div", { class: "actions" }, h("button", { class: "action-btn", onClick: () => this.editClick.emit() }, this.renderIcon('pencil-edit', 22, 22)), h("button", { class: "action-btn", onClick: () => this.moreClick.emit() }, this.renderIcon('hand', 22, 22)), h("button", { class: "action-btn", onClick: () => this.closeClick.emit() }, this.renderIcon('cancel', 22, 22))),
+            this.renderDragBtn(),
+            h("div", { class: "content agent dropdown-trigger", role: "button", onClick: () => this.dropdownClick.emit(), "aria-haspopup": "listbox", "aria-expanded": false, "aria-label": `${this.conversation}, افتح قائمة المحادثات` }, h("span", { class: "title" }, this.conversation), h("span", { class: "dropdown-chevron" }, this.renderIcon('chevron-down', 24, 24))),
+            h("div", { class: "actions" }, h("button", { class: "action-btn", "aria-label": "\u062A\u0639\u062F\u064A\u0644 / Edit", onClick: () => this.editClick.emit() }, this.renderIcon('pencil-edit', 22, 22)), h("button", { class: "action-btn", "aria-label": "\u0627\u0644\u0645\u0632\u064A\u062F / More", onClick: () => this.moreClick.emit() }, this.renderIcon('ellipsis', 22, 22)), 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 && (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))),
-            h("div", { class: "content human" }, this.showBack && (h("button", { class: "back-btn", onClick: () => this.backClick.emit() }, this.renderIcon('arrow-right', 24, 24))), h("div", { class: "avatar-wrapper" }, h("img", { class: "avatar", src: this.agentAvatar, alt: this.agentName }), h("span", { class: "online-dot" }, this.renderIcon('online-dot', 10, 10))), h("div", { class: "text-block" }, h("span", { class: "agent-name" }, this.agentName), h("span", { class: "agent-status" }, this.agentStatus))),
-            h("div", { class: "actions" }, h("button", { class: "action-btn", onClick: () => this.moreClick.emit() }, this.renderIcon('hand', 22, 22)), h("button", { class: "action-btn", onClick: () => this.closeClick.emit() }, this.renderIcon('cancel', 22, 22))),
+            this.renderDragBtn(),
+            h("div", { class: "content human" }, this.showBack && (h("button", { class: "back-btn", "aria-label": "\u0631\u062C\u0648\u0639 / Back", onClick: () => this.backClick.emit() }, this.renderIcon('arrow-right', 24, 24))), h("div", { class: "avatar-wrapper" }, this.renderAvatar(), h("span", { class: `online-dot status-${this.statusIndicator}` }, this.renderIcon('online-dot', 10, 10))), h("div", { class: "text-block" }, h("span", { class: "agent-name" }, this.agentName), this.agentStatus && h("span", { class: "agent-status" }, this.agentStatus))),
+            h("div", { class: "actions" }, h("button", { class: "action-btn", "aria-label": "\u0627\u0644\u0645\u0632\u064A\u062F / More", onClick: () => this.moreClick.emit() }, this.renderIcon('ellipsis', 22, 22)), h("button", { class: "action-btn", "aria-label": "\u0625\u063A\u0644\u0627\u0642 / Close", onClick: () => this.closeClick.emit() }, this.renderIcon('cancel', 22, 22))),
         ];
     }
     render() {
-        return (h(Host, { key: '93fe332abe1339f7235aa18717d63aa65d9aac13' }, h("div", { key: 'b496695911f7d1f959c4f98506b0d230e77a86c3', class: "header-container" }, this.mode === 'agent' ? this.renderAgentMode() : this.renderHumanMode())));
+        return (h(Host, { key: 'f0b6caccf925bc1388b2680b49e4aec3a44fa353' }, h("div", { key: 'fd144266fb338cbb5d70a3fb1ae9c1b39710ffc5', class: "header-container" }, this.mode === 'agent' ? this.renderAgentMode() : this.renderHumanMode())));
     }
     static get is() { return "ai-chat-header"; }
     static get encapsulation() { return "shadow"; }
@@ -212,9 +222,34 @@ export class AiChatHeader {
                 "reflect": false,
                 "attribute": "is-draggable",
                 "defaultValue": "false"
+            },
+            "statusIndicator": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'online' | 'offline' | 'busy' | 'away'",
+                    "resolved": "\"away\" | \"busy\" | \"offline\" | \"online\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Human mode: status indicator variant"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status-indicator",
+                "defaultValue": "'online'"
             }
         };
     }
+    static get states() {
+        return {
+            "avatarError": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "closeClick",
@@ -269,7 +304,7 @@ export class AiChatHeader {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Chevron-down button (human mode)"
+                    "text": "More options button"
                 },
                 "complexType": {
                     "original": "void",