@salla.sa/ui-ai-kit-core 2.2.4 → 2.2.6

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

@@ -38,11 +38,18 @@ export class AiChatHeader {
     conversationDeletingId = '';
     /** Show a shimmer skeleton in place of the conversation title (e.g. while loading conversation) */
     titleLoading = false;
+    /** Hide the new-chat (pencil-edit) button */
+    disableNewChat = false;
+    /** Hide the conversation-list dropdown trigger (title chevron) */
+    disableConversationList = false;
     avatarError = false;
     dropdownOpen = false;
     /** Internally managed — true when the parent ai-chat-container has position="float" */
     isFloating = false;
+    /** Internally managed — true when viewport width < 768px (matches ai-chat-container logic) */
+    isMobile = false;
     parentPositionObserver = null;
+    handleWindowResize = () => this.checkMobile();
     /** Cancel / close button */
     closeClick;
     /** Pencil-edit button (agent mode) */
@@ -77,7 +84,7 @@ export class AiChatHeader {
         }
     }
     connectedCallback() {
-        // Initial sync will happen in componentDidLoad
+        this.checkMobile();
     }
     componentDidLoad() {
         // By this point, the element is fully in the DOM and parent relationships are established
@@ -86,10 +93,21 @@ export class AiChatHeader {
             this.syncFloatingState();
             this.observeParentPosition();
         });
+        if (typeof window !== 'undefined') {
+            window.addEventListener('resize', this.handleWindowResize);
+        }
     }
     disconnectedCallback() {
         this.parentPositionObserver?.disconnect();
         this.parentPositionObserver = null;
+        if (typeof window !== 'undefined') {
+            window.removeEventListener('resize', this.handleWindowResize);
+        }
+    }
+    checkMobile() {
+        if (typeof window !== 'undefined') {
+            this.isMobile = window.innerWidth < 768;
+        }
     }
     observeParentPosition() {
         if (this.parentPositionObserver)
@@ -130,7 +148,7 @@ export class AiChatHeader {
             } }));
     }
     renderDragBtn() {
-        return (this.isFloating && (h("button", { class: "action-btn drag-btn", "aria-label": "\u0633\u062D\u0628 / Drag", onPointerDown: (e) => {
+        return (this.isFloating && !this.isMobile && (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))));
@@ -149,38 +167,39 @@ export class AiChatHeader {
         this.conversationRetry.emit();
     };
     renderConversationDropdown() {
-        if (!this.dropdownOpen || this.mode !== 'agent')
+        if (!this.dropdownOpen || this.mode !== 'agent' || this.disableConversationList)
             return null;
         return (h("div", { class: "conversation-dropdown" }, h("ai-conversation-list", { items: this.conversationItems, activeId: this.conversationActiveId, loading: this.conversationLoading, error: this.conversationError, errorText: this.conversationErrorText, retryLabel: this.conversationRetryLabel, emptyText: this.conversationEmptyText, deletingId: this.conversationDeletingId, onConversationSelect: this.handleConversationSelect, onConversationDelete: this.handleConversationDelete, onRetryClick: this.handleConversationRetry })));
     }
     renderAgentMode() {
+        const titleContent = this.disableConversationList ? (h("div", { class: "content agent" }, this.titleLoading ? (h("span", { class: "title-skeleton", "aria-busy": "true", "aria-label": "\u062C\u0627\u0631\u064A \u0627\u0644\u062A\u062D\u0645\u064A\u0644" })) : (h("span", { class: "title" }, this.conversation)))) : (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 ? (h("span", { class: "title-skeleton", "aria-busy": "true", "aria-label": "\u062C\u0627\u0631\u064A \u0627\u0644\u062A\u062D\u0645\u064A\u0644" })) : (h("span", { class: "title" }, this.conversation)), !this.titleLoading && (h("span", { class: `dropdown-chevron${this.dropdownOpen ? ' open' : ''}` }, this.renderIcon('chevron-down', 24, 24)))));
         return [
             this.renderDragBtn(),
-            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 ? (h("span", { class: "title-skeleton", "aria-busy": "true", "aria-label": "\u062C\u0627\u0631\u064A \u0627\u0644\u062A\u062D\u0645\u064A\u0644" })) : (h("span", { class: "title" }, this.conversation)), !this.titleLoading && (h("span", { class: `dropdown-chevron${this.dropdownOpen ? ' open' : ''}` }, this.renderIcon('chevron-down', 24, 24)))),
-            h("div", { class: "actions" }, h("button", { class: "action-btn", "aria-label": "\u0645\u062D\u0627\u062F\u062B\u0629 \u062C\u062F\u064A\u062F\u0629 / New Chat", onClick: () => this.newChatClick.emit() }, this.renderIcon('pencil-edit', 22, 22)), h("button", { class: "action-btn", "aria-label": "\u0627\u0644\u0639\u0631\u0636 / Position", onClick: () => { this.positionClick.emit(); this.headerPositionClick.emit(); } }, this.renderIcon('hand', 22, 22)), h("button", { class: "action-btn", "aria-label": "\u0625\u063A\u0644\u0627\u0642 / Close", onClick: () => this.closeClick.emit() }, this.renderIcon('cancel', 22, 22))),
+            titleContent,
+            h("div", { class: "actions" }, !this.disableNewChat && (h("button", { class: "action-btn", "aria-label": "\u0645\u062D\u0627\u062F\u062B\u0629 \u062C\u062F\u064A\u062F\u0629 / New Chat", onClick: () => this.newChatClick.emit() }, this.renderIcon('pencil-edit', 22, 22))), !this.isMobile && (h("button", { class: "action-btn", "aria-label": "\u0627\u0644\u0639\u0631\u0636 / Position", onClick: () => { this.positionClick.emit(); this.headerPositionClick.emit(); } }, this.renderIcon('hand', 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.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\u0639\u0631\u0636 / Position", onClick: () => { this.positionClick.emit(); this.headerPositionClick.emit(); } }, this.renderIcon('hand', 22, 22)), h("button", { class: "action-btn", "aria-label": "\u0625\u063A\u0644\u0627\u0642 / Close", onClick: () => this.closeClick.emit() }, this.renderIcon('cancel', 22, 22))),
+            h("div", { class: "actions" }, !this.isMobile && (h("button", { class: "action-btn", "aria-label": "\u0627\u0644\u0639\u0631\u0636 / Position", onClick: () => { this.positionClick.emit(); this.headerPositionClick.emit(); } }, this.renderIcon('hand', 22, 22))), 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(),
             h("div", { class: "content browser" }, h("button", { class: "back-btn", "aria-label": "\u0631\u062C\u0648\u0639 / Back", onClick: () => this.backClick.emit() }, this.renderIcon('arrow-right', 24, 24)), h("span", { class: "browser-title" }, this.pageTitle), 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))),
-            h("div", { class: "actions" }, h("button", { class: "action-btn", "aria-label": "\u0627\u0644\u0639\u0631\u0636 / Position", onClick: () => { this.positionClick.emit(); this.headerPositionClick.emit(); } }, this.renderIcon('hand', 22, 22)), h("button", { class: "action-btn", "aria-label": "\u0625\u063A\u0644\u0627\u0642 / Close", onClick: () => this.closeClick.emit() }, this.renderIcon('cancel', 22, 22))),
+            h("div", { class: "actions" }, !this.isMobile && (h("button", { class: "action-btn", "aria-label": "\u0627\u0644\u0639\u0631\u0636 / Position", onClick: () => { this.positionClick.emit(); this.headerPositionClick.emit(); } }, this.renderIcon('hand', 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: '80236bfcbfac98d3efa3955f03aab4ef68c9cfea' }, h("div", { key: 'dcc4142bba1d5f07782dbc7b0a3ec287e0154223', class: "header-wrapper" }, h("div", { key: 'ca0ff9a2946cead0b86cb82390624894ed414378', class: "header-container" }, this.mode === 'agent' ? this.renderAgentMode() : this.mode === 'human' ? this.renderHumanMode() : this.renderBrowserMode()), this.renderConversationDropdown())));
+        return (h(Host, { key: '4c51abf7f5fb572ec62191c0b097a4fdf9b218c3' }, h("div", { key: 'c05febe2f984bad8e80b9f0d9f2ceeebc812a9b4', class: "header-wrapper" }, h("div", { key: '927c606ae5452a9a5c1e19edd2145f9e1ee42d2c', class: "header-container" }, this.mode === 'agent' ? this.renderAgentMode() : this.mode === 'human' ? this.renderHumanMode() : this.renderBrowserMode()), this.renderConversationDropdown())));
     }
     static get is() { return "ai-chat-header"; }
     static get encapsulation() { return "shadow"; }
@@ -560,6 +579,46 @@ export class AiChatHeader {
                 "reflect": false,
                 "attribute": "title-loading",
                 "defaultValue": "false"
+            },
+            "disableNewChat": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hide the new-chat (pencil-edit) button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disable-new-chat",
+                "defaultValue": "false"
+            },
+            "disableConversationList": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hide the conversation-list dropdown trigger (title chevron)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disable-conversation-list",
+                "defaultValue": "false"
             }
         };
     }
@@ -567,7 +626,8 @@ export class AiChatHeader {
         return {
             "avatarError": {},
             "dropdownOpen": {},
-            "isFloating": {}
+            "isFloating": {},
+            "isMobile": {}
         };
     }
     static get events() {

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

@@ -1 +1 @@
-import{p as e,H as t,c as a,h as r,d as i,t as o}from"./p-BPkf7wZg.js";const s=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.retryClick=a(this,"retryClick"),this.positionChange=a(this,"positionChange")}get el(){return this}isOpen=!1;position="left";width="28rem";autoScroll=!0;showWatermark=!1;floatHeight="600px";theme="light";loading=!1;error=!1;errorText="تعذّر تحميل المحادثة";retryLabel="إعادة المحاولة";direction="rtl";retryClick;positionChange;isMobile=!1;floatLeft="24px";floatTop="24px";containerRef;messagesAreaRef;dragState=null;mutationObserver=null;resizeObserver=null;dragListener=e=>{if("undefined"==typeof window)return;const t=this.containerRef;if(!t)return;const{clientX:a,clientY:r}=e.detail,i=t.getBoundingClientRect();this.dragState={startX:a,startY:r,initLeft:i.left,initTop:i.top},this.floatLeft=i.left+"px",this.floatTop=i.top+"px";const o=e=>{if(!this.dragState)return;let a=this.dragState.initLeft+(e.clientX-this.dragState.startX),r=this.dragState.initTop+(e.clientY-this.dragState.startY);const i=window.innerWidth,o=window.innerHeight,s=t.offsetHeight;a=Math.max(0,Math.min(a,i-t.offsetWidth)),r=Math.max(0,Math.min(r,o-s)),this.floatLeft=a+"px",this.floatTop=r+"px"},s=()=>{this.dragState=null,document.removeEventListener("pointermove",o),document.removeEventListener("pointerup",s)};document.addEventListener("pointermove",o),document.addEventListener("pointerup",s)};handleHeaderPositionClick(){this.cyclePosition()}componentWillLoad(){this.checkMobile()}componentDidLoad(){"undefined"!=typeof window&&("undefined"!=typeof ResizeObserver&&(this.resizeObserver=new ResizeObserver((()=>{this.checkMobile(),this.clampFloatPosition()})),this.resizeObserver.observe(this.el)),window.addEventListener("resize",this.handleWindowResize),"float"===this.position&&this.setupDrag(),this.mutationObserver=new MutationObserver((()=>{this.autoScroll&&this.messagesAreaRef&&requestAnimationFrame((()=>{this.messagesAreaRef.scrollTop=this.messagesAreaRef.scrollHeight}))})),this.mutationObserver.observe(this.el,{childList:!0,subtree:!0}))}isOpenChanged(e){e&&this.autoScroll&&this.messagesAreaRef&&requestAnimationFrame((()=>{this.messagesAreaRef.scrollTop=this.messagesAreaRef.scrollHeight}))}positionChanged(e){"float"===e&&this.setupDrag()}disconnectedCallback(){"undefined"!=typeof window&&window.removeEventListener("resize",this.handleWindowResize),this.el.removeEventListener("headerDragStart",this.dragListener),this.mutationObserver?.disconnect(),this.resizeObserver?.disconnect()}async scrollToBottom(){this.messagesAreaRef&&(this.messagesAreaRef.scrollTop=this.messagesAreaRef.scrollHeight)}async cyclePosition(){this.position="float"===this.position?"rtl"===this.direction?"left":"right":"float",this.positionChange.emit(this.position)}handleWindowResize=()=>{this.checkMobile(),this.clampFloatPosition()};checkMobile(){"undefined"!=typeof window&&(this.isMobile=window.innerWidth<768)}clampFloatPosition(){if("undefined"==typeof window||"float"!==this.position||!this.containerRef)return;const e=window.innerWidth,t=window.innerHeight,a=this.containerRef.offsetWidth,r=this.containerRef.offsetHeight;let i=parseFloat(this.floatLeft)||0,o=parseFloat(this.floatTop)||0;i=Math.max(0,Math.min(i,e-a)),o=Math.max(0,Math.min(o,t-r)),this.floatLeft=i+"px",this.floatTop=o+"px"}setupDrag(){this.el.removeEventListener("headerDragStart",this.dragListener),this.el.addEventListener("headerDragStart",this.dragListener)}getContainerClasses(){const e=["chat-container",this.position];return this.isOpen&&e.push("open"),this.isMobile&&e.push("mobile"),e.join(" ")}getContainerStyle(){const e={};return this.isMobile||("float"===this.position?(e.width=this.width,e.height=this.floatHeight,e.left=this.floatLeft,e.top=this.floatTop):e.width=this.width),e}isDark(){return"dark"===this.theme||"auto"===this.theme&&"undefined"!=typeof window&&window.matchMedia("(prefers-color-scheme: dark)").matches}renderSkeleton(){return r("div",{class:"skeleton-messages","aria-busy":"true","aria-label":"Loading conversation"},r("div",{class:"skeleton-row agent"},r("div",{class:"skeleton-bubble"},r("div",{class:"skeleton-line",style:{width:"80%"}}),r("div",{class:"skeleton-line",style:{width:"60%"}}),r("div",{class:"skeleton-line",style:{width:"40%"}}))),r("div",{class:"skeleton-row user"},r("div",{class:"skeleton-bubble"},r("div",{class:"skeleton-line",style:{width:"70%"}}))),r("div",{class:"skeleton-row agent"},r("div",{class:"skeleton-bubble"},r("div",{class:"skeleton-line",style:{width:"90%"}}),r("div",{class:"skeleton-line",style:{width:"55%"}}))),r("div",{class:"skeleton-row user"},r("div",{class:"skeleton-bubble"},r("div",{class:"skeleton-line",style:{width:"50%"}}),r("div",{class:"skeleton-line",style:{width:"35%"}}))))}renderError(){return r("div",{class:"error-state",role:"alert"},r("svg",{class:"error-icon",width:"48",height:"48",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},r("circle",{cx:"12",cy:"12",r:"10",stroke:"currentColor","stroke-width":"1.5"}),r("path",{d:"M12 7v6",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round"}),r("circle",{cx:"12",cy:"16.5",r:"0.75",fill:"currentColor"})),r("p",{class:"error-text"},this.errorText),r("button",{class:"error-retry-btn",type:"button",onClick:()=>this.retryClick.emit()},this.retryLabel))}render(){return r(i,{key:"6290736307488f10a4ed441e2a8e0b3a2e89af05",class:{dark:this.isDark()}},r("div",{key:"6d6a731d9941457b786c71625243a7dd1e9f11f8",class:this.getContainerClasses(),style:this.getContainerStyle(),ref:e=>this.containerRef=e},this.showWatermark&&!this.loading&&!this.error&&r("div",{key:"0c2ae5b52f8c30bdf356a3c356d52305451cb19e",class:"watermark"},r("svg",{key:"36076d8dd514f5736050228d22b9a03d5d48ce28",class:"watermark-circle-svg",width:"133",height:"133",viewBox:"0 0 133 133",fill:"none",xmlns:"http://www.w3.org/2000/svg"},r("g",{key:"737a3f3d8b7a0f91120258c292d047f9dc90871c",filter:"url(#wm_circle_shadow)"},r("circle",{key:"a59549c879ddaa2a0007c4fd9645c4382b14e73f",cx:"66.415",cy:"66.415",r:"66.415",class:"watermark-circle"})),r("defs",{key:"58d5edc4e05f3dd8a60f7a829b70f154ba85bfc1"},r("filter",{key:"d2cb7cb5a84bdf1496b56ec5a0c0c79001040670",id:"wm_circle_shadow",x:"0",y:"0",width:"132.83",height:"135.83",filterUnits:"userSpaceOnUse","color-interpolation-filters":"sRGB"},r("feFlood",{key:"e90404f557fba552a21bd3748ad728470172040f","flood-opacity":"0",result:"BackgroundImageFix"}),r("feBlend",{key:"ef5aee167a4973c35f8ffaa8ae4a0487de8266ee",mode:"normal",in:"SourceGraphic",in2:"BackgroundImageFix",result:"shape"}),r("feColorMatrix",{key:"e0869202bc43610b91abce92e85e8e5264cda999",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"}),r("feOffset",{key:"7bef38d885b93711fce4c0efbb719a83417eeefb",dy:"3"}),r("feGaussianBlur",{key:"053de38388f049be8db7867b99b53d403de934ca",stdDeviation:"3"}),r("feComposite",{key:"e5f68fbcf0923174a177545bf3364d066a122347",in2:"hardAlpha",operator:"arithmetic",k2:"-1",k3:"1"}),r("feColorMatrix",{key:"62dc924cbdc92ce4adc0ec81be851c1d40e7a5b0",type:"matrix",values:"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"}),r("feBlend",{key:"908299725f9e553c636bd18eab6541c6a7c69fe5",mode:"normal",in2:"shape",result:"effect1_innerShadow"})))),r("svg",{key:"2a6ce2364bfd667c4eba56d859a1326f70a82901",class:"watermark-star-svg",width:"78",height:"78",viewBox:"0 0 78 78",fill:"none",xmlns:"http://www.w3.org/2000/svg"},r("g",{key:"e2c431ac6bee320c817a7283e6e356edc4667146",filter:"url(#wm_star_shadow)"},r("path",{key:"d87d0313e649527f5909ac1b08f7af2979760d79",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"})),r("defs",{key:"51e7ef185399e3a10d0b19eb399500be3e5384f8"},r("filter",{key:"09f52cd1b7084a8af9488bbce05c277fe07012f9",id:"wm_star_shadow",x:"0",y:"0",width:"77.4844",height:"79.4841",filterUnits:"userSpaceOnUse","color-interpolation-filters":"sRGB"},r("feFlood",{key:"1b055616d714f824dd38a895a5c1a635fefc4a66","flood-opacity":"0",result:"BackgroundImageFix"}),r("feBlend",{key:"044cba9d32d0a1d56fc39d318dfc1cdd0fdc0ae7",mode:"normal",in:"SourceGraphic",in2:"BackgroundImageFix",result:"shape"}),r("feColorMatrix",{key:"4bf50b36bd6b1ae90d29a95290762ef52dbfff7a",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"}),r("feOffset",{key:"0988514af2fda03cb2ff43e95c1423137351186f",dy:"2"}),r("feGaussianBlur",{key:"c96fb451b890e9bda84043dcd699c2a3f59c195c",stdDeviation:"2"}),r("feComposite",{key:"77b2bb3e01eefb08cac5f60a494c2cd15e97db4a",in2:"hardAlpha",operator:"arithmetic",k2:"-1",k3:"1"}),r("feColorMatrix",{key:"aef785066c732cc5cbc16689f2e57a7df7d18bc5",type:"matrix",values:"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"}),r("feBlend",{key:"292a1d370d268312514f1c8fcee2167159c2d4e9",mode:"normal",in2:"shape",result:"effect1_innerShadow"}))))),r("slot",{key:"009fd561884a5a70e559d865dc1b1d55937d923c",name:"header"}),r("div",{key:"fde5090720cd70c2b5fe72bcaec95007e7792f4e",class:"messages-area",ref:e=>this.messagesAreaRef=e},this.loading?this.renderSkeleton():this.error?this.renderError():r("slot",null)),r("slot",{key:"838ea2de9f788af2af70568a7882a08645c6b2ac",name:"footer"})))}static get watchers(){return{isOpen:[{isOpenChanged:0}],position:[{positionChanged:0}]}}static get style(){return":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))}"}},[769,"ai-chat-container",{isOpen:[4,"is-open"],position:[1537],width:[1],autoScroll:[4,"auto-scroll"],showWatermark:[4,"show-watermark"],floatHeight:[1,"float-height"],theme:[1],loading:[4],error:[4],errorText:[1,"error-text"],retryLabel:[1,"retry-label"],direction:[513],isMobile:[32],floatLeft:[32],floatTop:[32],scrollToBottom:[64],cyclePosition:[64]},[[0,"headerPositionClick","handleHeaderPositionClick"]],{isOpen:[{isOpenChanged:0}],position:[{positionChanged:0}]}]),n=s,l=function(){"undefined"!=typeof customElements&&["ai-chat-container"].forEach((e=>{"ai-chat-container"===e&&(customElements.get(o(e))||customElements.define(o(e),s))}))};export{n as AiChatContainer,l as defineCustomElement}
+import{p as e,H as t,c as r,h as a,d as i,t as o}from"./p-BPkf7wZg.js";const s=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.retryClick=r(this,"retryClick"),this.positionChange=r(this,"positionChange")}get el(){return this}isOpen=!1;position="left";width="28rem";autoScroll=!0;showWatermark=!1;floatHeight="600px";theme="light";loading=!1;error=!1;errorText="تعذّر تحميل المحادثة";retryLabel="إعادة المحاولة";direction="rtl";retryClick;positionChange;isMobile=!1;floatLeft="24px";floatTop="24px";containerRef;messagesAreaRef;dragState=null;mutationObserver=null;resizeObserver=null;dirObserver=null;dragListener=e=>{if("undefined"==typeof window)return;const t=this.containerRef;if(!t)return;const{clientX:r,clientY:a}=e.detail,i=t.getBoundingClientRect();this.dragState={startX:r,startY:a,initLeft:i.left,initTop:i.top},this.floatLeft=i.left+"px",this.floatTop=i.top+"px";const o=e=>{if(!this.dragState)return;let r=this.dragState.initLeft+(e.clientX-this.dragState.startX),a=this.dragState.initTop+(e.clientY-this.dragState.startY);const i=window.innerWidth,o=window.innerHeight,s=t.offsetHeight;r=Math.max(0,Math.min(r,i-t.offsetWidth)),a=Math.max(0,Math.min(a,o-s)),this.floatLeft=r+"px",this.floatTop=a+"px"},s=()=>{this.dragState=null,document.removeEventListener("pointermove",o),document.removeEventListener("pointerup",s)};document.addEventListener("pointermove",o),document.addEventListener("pointerup",s)};handleHeaderPositionClick(){this.cyclePosition()}componentWillLoad(){this.checkMobile(),this.syncDirectionFromDom(),"left"===this.position&&"ltr"===this.direction&&(this.position="right")}componentDidLoad(){if("undefined"!=typeof window){if("ltr"===this.direction){const e=this.containerRef?.offsetWidth||this.parsePropToPx(this.width);this.floatLeft=window.innerWidth-e-24+"px"}"undefined"!=typeof ResizeObserver&&(this.resizeObserver=new ResizeObserver((()=>{this.checkMobile(),this.clampFloatPosition()})),this.resizeObserver.observe(this.el)),window.addEventListener("resize",this.handleWindowResize),"float"===this.position&&this.setupDrag(),"undefined"!=typeof MutationObserver&&(this.dirObserver=new MutationObserver((()=>{const e=this.direction;this.syncDirectionFromDom(),this.direction!==e&&this.applyDirectionDefaults(e)})),this.dirObserver.observe(document.documentElement,{attributes:!0,attributeFilter:["dir"]})),this.mutationObserver=new MutationObserver((()=>{this.autoScroll&&this.messagesAreaRef&&requestAnimationFrame((()=>{this.messagesAreaRef.scrollTop=this.messagesAreaRef.scrollHeight}))})),this.mutationObserver.observe(this.el,{childList:!0,subtree:!0})}}isOpenChanged(e){e&&this.autoScroll&&this.messagesAreaRef&&requestAnimationFrame((()=>{this.messagesAreaRef.scrollTop=this.messagesAreaRef.scrollHeight}))}positionChanged(e){"float"===e&&this.setupDrag(),this.positionChange.emit(e)}disconnectedCallback(){"undefined"!=typeof window&&window.removeEventListener("resize",this.handleWindowResize),this.el.removeEventListener("headerDragStart",this.dragListener),this.mutationObserver?.disconnect(),this.resizeObserver?.disconnect(),this.dirObserver?.disconnect()}async scrollToBottom(){this.messagesAreaRef&&(this.messagesAreaRef.scrollTop=this.messagesAreaRef.scrollHeight)}async cyclePosition(){this.position="float"===this.position?"rtl"===this.direction?"left":"right":"float"}handleWindowResize=()=>{this.checkMobile(),this.clampFloatPosition()};syncDirectionFromDom(){if("undefined"==typeof document)return;const e=this.el.closest("[dir]"),t=e?.getAttribute("dir")??document.documentElement.getAttribute("dir")??document.documentElement.dir;"ltr"!==t&&"rtl"!==t||(this.direction=t)}applyDirectionDefaults(e){if(this.position===("rtl"===e?"left":"right")&&(this.position="rtl"===this.direction?"left":"right"),"ltr"===this.direction&&"undefined"!=typeof window){const e=this.containerRef?.offsetWidth||this.parsePropToPx(this.width);this.floatLeft=window.innerWidth-e-24+"px"}else this.floatLeft="24px"}parsePropToPx(e){const t=parseFloat(e);return e.endsWith("rem")?16*t:e.endsWith("%")&&"undefined"!=typeof window?t/100*window.innerWidth:t}checkMobile(){"undefined"!=typeof window&&(this.isMobile=window.innerWidth<768)}clampFloatPosition(){if("undefined"==typeof window||"float"!==this.position||!this.containerRef)return;const e=window.innerWidth,t=window.innerHeight,r=this.containerRef.offsetWidth,a=this.containerRef.offsetHeight;let i=parseFloat(this.floatLeft)||0,o=parseFloat(this.floatTop)||0;i=Math.max(0,Math.min(i,e-r)),o=Math.max(0,Math.min(o,t-a)),this.floatLeft=i+"px",this.floatTop=o+"px"}setupDrag(){this.el.removeEventListener("headerDragStart",this.dragListener),this.el.addEventListener("headerDragStart",this.dragListener)}getContainerClasses(){const e=["chat-container",this.position];return this.isOpen&&e.push("open"),this.isMobile&&e.push("mobile"),e.join(" ")}getContainerStyle(){const e={};return this.isMobile||("float"===this.position?(e.width=this.width,e.height=this.floatHeight,e.left=this.floatLeft,e.top=this.floatTop):e.width=this.width),e}isDark(){return"dark"===this.theme||"auto"===this.theme&&"undefined"!=typeof window&&window.matchMedia("(prefers-color-scheme: dark)").matches}renderSkeleton(){return a("div",{class:"skeleton-messages","aria-busy":"true","aria-label":"Loading conversation"},a("div",{class:"skeleton-row agent"},a("div",{class:"skeleton-bubble"},a("div",{class:"skeleton-line",style:{width:"80%"}}),a("div",{class:"skeleton-line",style:{width:"60%"}}),a("div",{class:"skeleton-line",style:{width:"40%"}}))),a("div",{class:"skeleton-row user"},a("div",{class:"skeleton-bubble"},a("div",{class:"skeleton-line",style:{width:"70%"}}))),a("div",{class:"skeleton-row agent"},a("div",{class:"skeleton-bubble"},a("div",{class:"skeleton-line",style:{width:"90%"}}),a("div",{class:"skeleton-line",style:{width:"55%"}}))),a("div",{class:"skeleton-row user"},a("div",{class:"skeleton-bubble"},a("div",{class:"skeleton-line",style:{width:"50%"}}),a("div",{class:"skeleton-line",style:{width:"35%"}}))))}renderError(){return a("div",{class:"error-state",role:"alert"},a("svg",{class:"error-icon",width:"48",height:"48",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},a("circle",{cx:"12",cy:"12",r:"10",stroke:"currentColor","stroke-width":"1.5"}),a("path",{d:"M12 7v6",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round"}),a("circle",{cx:"12",cy:"16.5",r:"0.75",fill:"currentColor"})),a("p",{class:"error-text"},this.errorText),a("button",{class:"error-retry-btn",type:"button",onClick:()=>this.retryClick.emit()},this.retryLabel))}render(){return a(i,{key:"92739e10d04132efe3428b4568b84dbb743f2ced",class:{dark:this.isDark()}},a("div",{key:"3846f4aa16275a9ee42d88600a39f9fdec4b9380",class:this.getContainerClasses(),style:this.getContainerStyle(),ref:e=>this.containerRef=e},this.showWatermark&&!this.loading&&!this.error&&a("div",{key:"674c8c8075b1bd7e02c6e6925fefddaffbf07da7",class:"watermark"},a("svg",{key:"1dd03d917460057d5985c52760b8fcfec2ba185f",class:"watermark-circle-svg",width:"133",height:"133",viewBox:"0 0 133 133",fill:"none",xmlns:"http://www.w3.org/2000/svg"},a("g",{key:"80e4ad2dc46b7196113e10e7604bec0df5434e81",filter:"url(#wm_circle_shadow)"},a("circle",{key:"65ae6aa94aae8057c2d78a77799fbbe2ae7d4642",cx:"66.415",cy:"66.415",r:"66.415",class:"watermark-circle"})),a("defs",{key:"d180bfb115a5bc946b5b65f17fa746bd3a2671b5"},a("filter",{key:"f0c88495d1fafe3ce77f0a41ebf20edeacd9f63f",id:"wm_circle_shadow",x:"0",y:"0",width:"132.83",height:"135.83",filterUnits:"userSpaceOnUse","color-interpolation-filters":"sRGB"},a("feFlood",{key:"673f789a1d59c36fa0a22a73de81b4d42589488e","flood-opacity":"0",result:"BackgroundImageFix"}),a("feBlend",{key:"297e94e150f4ff65b740d10b1fefb8a2d86e6eba",mode:"normal",in:"SourceGraphic",in2:"BackgroundImageFix",result:"shape"}),a("feColorMatrix",{key:"7481822fe991f1b39a8ef4b1d55f152ebe5a74dc",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"}),a("feOffset",{key:"b8587f0e9191d4d0d1a2109640dcc4d8510d1329",dy:"3"}),a("feGaussianBlur",{key:"c103c56cdc19f38d8766f1f822261baa52c3c8f7",stdDeviation:"3"}),a("feComposite",{key:"e648998eac51783c4d24c2605d7af0f75f9694d9",in2:"hardAlpha",operator:"arithmetic",k2:"-1",k3:"1"}),a("feColorMatrix",{key:"e51ea8682d8b47e2d1b3fa18f0e1c98f61cf9442",type:"matrix",values:"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"}),a("feBlend",{key:"c8920059343daac0ab791217f0e35bf696d22c78",mode:"normal",in2:"shape",result:"effect1_innerShadow"})))),a("svg",{key:"3d305842745d57d75b2328f2118120881408d918",class:"watermark-star-svg",width:"78",height:"78",viewBox:"0 0 78 78",fill:"none",xmlns:"http://www.w3.org/2000/svg"},a("g",{key:"e04b6580b99cb9007d44089eb19c56e68d5a3500",filter:"url(#wm_star_shadow)"},a("path",{key:"8ecd34ab83c4ce2c99b6197079d31dc7111aba81",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"})),a("defs",{key:"28c637d943109a521e6c64918a47bf917e6907db"},a("filter",{key:"5cfaebbcffa9cfe42aa4bd194dd9c4117aaeed89",id:"wm_star_shadow",x:"0",y:"0",width:"77.4844",height:"79.4841",filterUnits:"userSpaceOnUse","color-interpolation-filters":"sRGB"},a("feFlood",{key:"b6557267404cff0579970925d571978295044920","flood-opacity":"0",result:"BackgroundImageFix"}),a("feBlend",{key:"fb5825214d17c41ae4b31225ed58d698b35d0f94",mode:"normal",in:"SourceGraphic",in2:"BackgroundImageFix",result:"shape"}),a("feColorMatrix",{key:"afea4f8ea013f7a8fa7a508379c0a94e9b8dbf67",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"}),a("feOffset",{key:"56471c8c7f7247bdc6f8c985a67eb21d1bf94fff",dy:"2"}),a("feGaussianBlur",{key:"2d8674ba7260cbf634046dbe6a3b3931d01d46e2",stdDeviation:"2"}),a("feComposite",{key:"98fe007a1fa727d95ae0c7c61658a0df1659e978",in2:"hardAlpha",operator:"arithmetic",k2:"-1",k3:"1"}),a("feColorMatrix",{key:"c4960302961214dae4091d028df699a7938ca2c6",type:"matrix",values:"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"}),a("feBlend",{key:"087483fdb9064cd948984348ce6b4a921a47e144",mode:"normal",in2:"shape",result:"effect1_innerShadow"}))))),a("slot",{key:"7aa772c82a168b2a7d9119738971c67bebd686c4",name:"header"}),a("div",{key:"d5403fd1a67f1ac7ef86e86290005f539b1d1607",class:"messages-area",ref:e=>this.messagesAreaRef=e},this.loading?this.renderSkeleton():this.error?this.renderError():a("slot",null)),a("slot",{key:"bcc75c332581807e6bf2c5a769cf6daeeaa97352",name:"footer"})))}static get watchers(){return{isOpen:[{isOpenChanged:0}],position:[{positionChanged:0}]}}static get style(){return':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}:host([direction="ltr"]) .chat-container.float{transform-origin:bottom right}.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))}'}},[769,"ai-chat-container",{isOpen:[4,"is-open"],position:[1537],width:[1],autoScroll:[4,"auto-scroll"],showWatermark:[4,"show-watermark"],floatHeight:[1,"float-height"],theme:[1],loading:[4],error:[4],errorText:[1,"error-text"],retryLabel:[1,"retry-label"],direction:[513],isMobile:[32],floatLeft:[32],floatTop:[32],scrollToBottom:[64],cyclePosition:[64]},[[0,"headerPositionClick","handleHeaderPositionClick"]],{isOpen:[{isOpenChanged:0}],position:[{positionChanged:0}]}]),n=s,l=function(){"undefined"!=typeof customElements&&["ai-chat-container"].forEach((e=>{"ai-chat-container"===e&&(customElements.get(o(e))||customElements.define(o(e),s))}))};export{n as AiChatContainer,l as defineCustomElement}

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

@@ -1 +1 @@
-import{p as t,H as i,c as e,h as a,d as n,t as o}from"./p-BPkf7wZg.js";import{i as s}from"./p-DlD8m3rf.js";import{d as r}from"./p-CFSr3KcL.js";const l=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.closeClick=e(this,"closeClick"),this.newChatClick=e(this,"newChatClick"),this.dropdownClick=e(this,"dropdownClick"),this.positionClick=e(this,"positionClick"),this.headerPositionClick=e(this,"headerPositionClick"),this.backClick=e(this,"backClick"),this.headerDragStart=e(this,"headerDragStart"),this.openExternal=e(this,"openExternal"),this.conversationSelect=e(this,"conversationSelect"),this.conversationDelete=e(this,"conversationDelete"),this.conversationRetry=e(this,"conversationRetry")}get el(){return this}mode="agent";conversation="محادثة جديدة";agentName="";agentStatus="";agentAvatar="";showBack=!0;statusIndicator="online";pageTitle="";pageUrl="";conversationItems=[];conversationActiveId="";conversationLoading=!1;conversationError=!1;conversationErrorText="تعذّر تحميل المحادثات";conversationRetryLabel="إعادة المحاولة";conversationEmptyText="لا توجد محادثات";conversationDeletingId="";titleLoading=!1;avatarError=!1;dropdownOpen=!1;isFloating=!1;parentPositionObserver=null;closeClick;newChatClick;dropdownClick;positionClick;headerPositionClick;backClick;headerDragStart;openExternal;conversationSelect;conversationDelete;conversationRetry;handleDocumentClick(t){this.dropdownOpen&&!this.el.contains(t.target)&&(this.dropdownOpen=!1)}connectedCallback(){}componentDidLoad(){requestAnimationFrame((()=>{this.syncFloatingState(),this.observeParentPosition()}))}disconnectedCallback(){this.parentPositionObserver?.disconnect(),this.parentPositionObserver=null}observeParentPosition(){if(this.parentPositionObserver)return;const t=this.el.closest("ai-chat-container");t&&(this.parentPositionObserver=new MutationObserver((()=>this.syncFloatingState())),this.parentPositionObserver.observe(t,{attributes:!0,attributeFilter:["position"]}))}syncFloatingState(){const t=this.el.closest("ai-chat-container");if(t){const i="float"===t.getAttribute("position");this.isFloating!==i&&(this.isFloating=i)}else!1!==this.isFloating&&(this.isFloating=!1)}renderIcon(t,i,e){const n=s[t];return n?a("span",{class:"icon-wrap",innerHTML:`<svg width="${i}" height="${e}" viewBox="${n.viewBox}" fill="none" xmlns="http://www.w3.org/2000/svg">${n.content}</svg>`}):null}renderAvatar(){const t=this.agentName?this.agentName.charAt(0):"?";return!this.agentAvatar||this.avatarError?a("div",{class:"avatar-fallback"},t):a("img",{class:"avatar",src:this.agentAvatar,alt:this.agentName,onError:()=>{this.avatarError=!0}})}renderDragBtn(){return this.isFloating&&a("button",{class:"action-btn drag-btn","aria-label":"سحب / Drag",onPointerDown:t=>{t.preventDefault(),this.headerDragStart.emit({clientX:t.clientX,clientY:t.clientY})}},this.renderIcon("drag",11,15))}handleConversationSelect=t=>{t.stopPropagation(),this.conversationSelect.emit(t.detail),this.dropdownOpen=!1};handleConversationDelete=t=>{t.stopPropagation(),this.conversationDelete.emit(t.detail)};handleConversationRetry=t=>{t.stopPropagation(),this.conversationRetry.emit()};renderConversationDropdown(){return this.dropdownOpen&&"agent"===this.mode?a("div",{class:"conversation-dropdown"},a("ai-conversation-list",{items:this.conversationItems,activeId:this.conversationActiveId,loading:this.conversationLoading,error:this.conversationError,errorText:this.conversationErrorText,retryLabel:this.conversationRetryLabel,emptyText:this.conversationEmptyText,deletingId:this.conversationDeletingId,onConversationSelect:this.handleConversationSelect,onConversationDelete:this.handleConversationDelete,onRetryClick:this.handleConversationRetry})):null}renderAgentMode(){return[this.renderDragBtn(),a("div",{class:"content agent dropdown-trigger",role:"button",onClick:()=>{this.titleLoading||(this.dropdownOpen=!this.dropdownOpen,this.dropdownClick.emit())},"aria-haspopup":"listbox","aria-expanded":this.dropdownOpen,"aria-label":this.conversation+", افتح قائمة المحادثات"},this.titleLoading?a("span",{class:"title-skeleton","aria-busy":"true","aria-label":"جاري التحميل"}):a("span",{class:"title"},this.conversation),!this.titleLoading&&a("span",{class:"dropdown-chevron"+(this.dropdownOpen?" open":"")},this.renderIcon("chevron-down",24,24))),a("div",{class:"actions"},a("button",{class:"action-btn","aria-label":"محادثة جديدة / New Chat",onClick:()=>this.newChatClick.emit()},this.renderIcon("pencil-edit",22,22)),a("button",{class:"action-btn","aria-label":"العرض / Position",onClick:()=>{this.positionClick.emit(),this.headerPositionClick.emit()}},this.renderIcon("hand",22,22)),a("button",{class:"action-btn","aria-label":"إغلاق / Close",onClick:()=>this.closeClick.emit()},this.renderIcon("cancel",22,22)))]}renderHumanMode(){return[this.renderDragBtn(),a("div",{class:"content human"},this.showBack&&a("button",{class:"back-btn","aria-label":"رجوع / Back",onClick:()=>this.backClick.emit()},this.renderIcon("arrow-right",24,24)),a("div",{class:"avatar-wrapper"},this.renderAvatar(),a("span",{class:"online-dot status-"+this.statusIndicator},this.renderIcon("online-dot",10,10))),a("div",{class:"text-block"},a("span",{class:"agent-name"},this.agentName),this.agentStatus&&a("span",{class:"agent-status"},this.agentStatus))),a("div",{class:"actions"},a("button",{class:"action-btn","aria-label":"العرض / Position",onClick:()=>{this.positionClick.emit(),this.headerPositionClick.emit()}},this.renderIcon("hand",22,22)),a("button",{class:"action-btn","aria-label":"إغلاق / Close",onClick:()=>this.closeClick.emit()},this.renderIcon("cancel",22,22)))]}renderBrowserMode(){return[this.renderDragBtn(),a("div",{class:"content browser"},a("button",{class:"back-btn","aria-label":"رجوع / Back",onClick:()=>this.backClick.emit()},this.renderIcon("arrow-right",24,24)),a("span",{class:"browser-title"},this.pageTitle),a("button",{class:"browser-link-btn","aria-label":"فتح في نافذة جديدة / Open externally",onClick:()=>this.openExternal.emit(this.pageUrl)},this.renderIcon("link",14,14))),a("div",{class:"actions"},a("button",{class:"action-btn","aria-label":"العرض / Position",onClick:()=>{this.positionClick.emit(),this.headerPositionClick.emit()}},this.renderIcon("hand",22,22)),a("button",{class:"action-btn","aria-label":"إغلاق / Close",onClick:()=>this.closeClick.emit()},this.renderIcon("cancel",22,22)))]}render(){return a(n,{key:"80236bfcbfac98d3efa3955f03aab4ef68c9cfea"},a("div",{key:"dcc4142bba1d5f07782dbc7b0a3ec287e0154223",class:"header-wrapper"},a("div",{key:"ca0ff9a2946cead0b86cb82390624894ed414378",class:"header-container"},"agent"===this.mode?this.renderAgentMode():"human"===this.mode?this.renderHumanMode():this.renderBrowserMode()),this.renderConversationDropdown()))}static get style(){return":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)}}"}},[513,"ai-chat-header",{mode:[1],conversation:[1],agentName:[1,"agent-name"],agentStatus:[1,"agent-status"],agentAvatar:[1,"agent-avatar"],showBack:[4,"show-back"],statusIndicator:[1,"status-indicator"],pageTitle:[1,"page-title"],pageUrl:[1,"page-url"],conversationItems:[16],conversationActiveId:[1,"conversation-active-id"],conversationLoading:[4,"conversation-loading"],conversationError:[4,"conversation-error"],conversationErrorText:[1,"conversation-error-text"],conversationRetryLabel:[1,"conversation-retry-label"],conversationEmptyText:[1,"conversation-empty-text"],conversationDeletingId:[1,"conversation-deleting-id"],titleLoading:[4,"title-loading"],avatarError:[32],dropdownOpen:[32],isFloating:[32]},[[4,"click","handleDocumentClick"]]]),c=l,h=function(){"undefined"!=typeof customElements&&["ai-chat-header","ai-conversation-list"].forEach((t=>{switch(t){case"ai-chat-header":customElements.get(o(t))||customElements.define(o(t),l);break;case"ai-conversation-list":customElements.get(o(t))||r()}}))};export{c as AiChatHeader,h as defineCustomElement}
+import{p as t,H as i,c as e,h as n,d as a,t as o}from"./p-BPkf7wZg.js";import{i as s}from"./p-DlD8m3rf.js";import{d as r}from"./p-CFSr3KcL.js";const l=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.closeClick=e(this,"closeClick"),this.newChatClick=e(this,"newChatClick"),this.dropdownClick=e(this,"dropdownClick"),this.positionClick=e(this,"positionClick"),this.headerPositionClick=e(this,"headerPositionClick"),this.backClick=e(this,"backClick"),this.headerDragStart=e(this,"headerDragStart"),this.openExternal=e(this,"openExternal"),this.conversationSelect=e(this,"conversationSelect"),this.conversationDelete=e(this,"conversationDelete"),this.conversationRetry=e(this,"conversationRetry")}get el(){return this}mode="agent";conversation="محادثة جديدة";agentName="";agentStatus="";agentAvatar="";showBack=!0;statusIndicator="online";pageTitle="";pageUrl="";conversationItems=[];conversationActiveId="";conversationLoading=!1;conversationError=!1;conversationErrorText="تعذّر تحميل المحادثات";conversationRetryLabel="إعادة المحاولة";conversationEmptyText="لا توجد محادثات";conversationDeletingId="";titleLoading=!1;disableNewChat=!1;disableConversationList=!1;avatarError=!1;dropdownOpen=!1;isFloating=!1;isMobile=!1;parentPositionObserver=null;handleWindowResize=()=>this.checkMobile();closeClick;newChatClick;dropdownClick;positionClick;headerPositionClick;backClick;headerDragStart;openExternal;conversationSelect;conversationDelete;conversationRetry;handleDocumentClick(t){this.dropdownOpen&&!this.el.contains(t.target)&&(this.dropdownOpen=!1)}connectedCallback(){this.checkMobile()}componentDidLoad(){requestAnimationFrame((()=>{this.syncFloatingState(),this.observeParentPosition()})),"undefined"!=typeof window&&window.addEventListener("resize",this.handleWindowResize)}disconnectedCallback(){this.parentPositionObserver?.disconnect(),this.parentPositionObserver=null,"undefined"!=typeof window&&window.removeEventListener("resize",this.handleWindowResize)}checkMobile(){"undefined"!=typeof window&&(this.isMobile=window.innerWidth<768)}observeParentPosition(){if(this.parentPositionObserver)return;const t=this.el.closest("ai-chat-container");t&&(this.parentPositionObserver=new MutationObserver((()=>this.syncFloatingState())),this.parentPositionObserver.observe(t,{attributes:!0,attributeFilter:["position"]}))}syncFloatingState(){const t=this.el.closest("ai-chat-container");if(t){const i="float"===t.getAttribute("position");this.isFloating!==i&&(this.isFloating=i)}else!1!==this.isFloating&&(this.isFloating=!1)}renderIcon(t,i,e){const a=s[t];return a?n("span",{class:"icon-wrap",innerHTML:`<svg width="${i}" height="${e}" viewBox="${a.viewBox}" fill="none" xmlns="http://www.w3.org/2000/svg">${a.content}</svg>`}):null}renderAvatar(){const t=this.agentName?this.agentName.charAt(0):"?";return!this.agentAvatar||this.avatarError?n("div",{class:"avatar-fallback"},t):n("img",{class:"avatar",src:this.agentAvatar,alt:this.agentName,onError:()=>{this.avatarError=!0}})}renderDragBtn(){return this.isFloating&&!this.isMobile&&n("button",{class:"action-btn drag-btn","aria-label":"سحب / Drag",onPointerDown:t=>{t.preventDefault(),this.headerDragStart.emit({clientX:t.clientX,clientY:t.clientY})}},this.renderIcon("drag",11,15))}handleConversationSelect=t=>{t.stopPropagation(),this.conversationSelect.emit(t.detail),this.dropdownOpen=!1};handleConversationDelete=t=>{t.stopPropagation(),this.conversationDelete.emit(t.detail)};handleConversationRetry=t=>{t.stopPropagation(),this.conversationRetry.emit()};renderConversationDropdown(){return!this.dropdownOpen||"agent"!==this.mode||this.disableConversationList?null:n("div",{class:"conversation-dropdown"},n("ai-conversation-list",{items:this.conversationItems,activeId:this.conversationActiveId,loading:this.conversationLoading,error:this.conversationError,errorText:this.conversationErrorText,retryLabel:this.conversationRetryLabel,emptyText:this.conversationEmptyText,deletingId:this.conversationDeletingId,onConversationSelect:this.handleConversationSelect,onConversationDelete:this.handleConversationDelete,onRetryClick:this.handleConversationRetry}))}renderAgentMode(){const t=this.disableConversationList?n("div",{class:"content agent"},this.titleLoading?n("span",{class:"title-skeleton","aria-busy":"true","aria-label":"جاري التحميل"}):n("span",{class:"title"},this.conversation)):n("div",{class:"content agent dropdown-trigger",role:"button",onClick:()=>{this.titleLoading||(this.dropdownOpen=!this.dropdownOpen,this.dropdownClick.emit())},"aria-haspopup":"listbox","aria-expanded":this.dropdownOpen,"aria-label":this.conversation+", افتح قائمة المحادثات"},this.titleLoading?n("span",{class:"title-skeleton","aria-busy":"true","aria-label":"جاري التحميل"}):n("span",{class:"title"},this.conversation),!this.titleLoading&&n("span",{class:"dropdown-chevron"+(this.dropdownOpen?" open":"")},this.renderIcon("chevron-down",24,24)));return[this.renderDragBtn(),t,n("div",{class:"actions"},!this.disableNewChat&&n("button",{class:"action-btn","aria-label":"محادثة جديدة / New Chat",onClick:()=>this.newChatClick.emit()},this.renderIcon("pencil-edit",22,22)),!this.isMobile&&n("button",{class:"action-btn","aria-label":"العرض / Position",onClick:()=>{this.positionClick.emit(),this.headerPositionClick.emit()}},this.renderIcon("hand",22,22)),n("button",{class:"action-btn","aria-label":"إغلاق / Close",onClick:()=>this.closeClick.emit()},this.renderIcon("cancel",22,22)))]}renderHumanMode(){return[this.renderDragBtn(),n("div",{class:"content human"},this.showBack&&n("button",{class:"back-btn","aria-label":"رجوع / Back",onClick:()=>this.backClick.emit()},this.renderIcon("arrow-right",24,24)),n("div",{class:"avatar-wrapper"},this.renderAvatar(),n("span",{class:"online-dot status-"+this.statusIndicator},this.renderIcon("online-dot",10,10))),n("div",{class:"text-block"},n("span",{class:"agent-name"},this.agentName),this.agentStatus&&n("span",{class:"agent-status"},this.agentStatus))),n("div",{class:"actions"},!this.isMobile&&n("button",{class:"action-btn","aria-label":"العرض / Position",onClick:()=>{this.positionClick.emit(),this.headerPositionClick.emit()}},this.renderIcon("hand",22,22)),n("button",{class:"action-btn","aria-label":"إغلاق / Close",onClick:()=>this.closeClick.emit()},this.renderIcon("cancel",22,22)))]}renderBrowserMode(){return[this.renderDragBtn(),n("div",{class:"content browser"},n("button",{class:"back-btn","aria-label":"رجوع / Back",onClick:()=>this.backClick.emit()},this.renderIcon("arrow-right",24,24)),n("span",{class:"browser-title"},this.pageTitle),n("button",{class:"browser-link-btn","aria-label":"فتح في نافذة جديدة / Open externally",onClick:()=>this.openExternal.emit(this.pageUrl)},this.renderIcon("link",14,14))),n("div",{class:"actions"},!this.isMobile&&n("button",{class:"action-btn","aria-label":"العرض / Position",onClick:()=>{this.positionClick.emit(),this.headerPositionClick.emit()}},this.renderIcon("hand",22,22)),n("button",{class:"action-btn","aria-label":"إغلاق / Close",onClick:()=>this.closeClick.emit()},this.renderIcon("cancel",22,22)))]}render(){return n(a,{key:"4c51abf7f5fb572ec62191c0b097a4fdf9b218c3"},n("div",{key:"c05febe2f984bad8e80b9f0d9f2ceeebc812a9b4",class:"header-wrapper"},n("div",{key:"927c606ae5452a9a5c1e19edd2145f9e1ee42d2c",class:"header-container"},"agent"===this.mode?this.renderAgentMode():"human"===this.mode?this.renderHumanMode():this.renderBrowserMode()),this.renderConversationDropdown()))}static get style(){return":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)}}"}},[513,"ai-chat-header",{mode:[1],conversation:[1],agentName:[1,"agent-name"],agentStatus:[1,"agent-status"],agentAvatar:[1,"agent-avatar"],showBack:[4,"show-back"],statusIndicator:[1,"status-indicator"],pageTitle:[1,"page-title"],pageUrl:[1,"page-url"],conversationItems:[16],conversationActiveId:[1,"conversation-active-id"],conversationLoading:[4,"conversation-loading"],conversationError:[4,"conversation-error"],conversationErrorText:[1,"conversation-error-text"],conversationRetryLabel:[1,"conversation-retry-label"],conversationEmptyText:[1,"conversation-empty-text"],conversationDeletingId:[1,"conversation-deleting-id"],titleLoading:[4,"title-loading"],disableNewChat:[4,"disable-new-chat"],disableConversationList:[4,"disable-conversation-list"],avatarError:[32],dropdownOpen:[32],isFloating:[32],isMobile:[32]},[[4,"click","handleDocumentClick"]]]),c=l,h=function(){"undefined"!=typeof customElements&&["ai-chat-header","ai-conversation-list"].forEach((t=>{switch(t){case"ai-chat-header":customElements.get(o(t))||customElements.define(o(t),l);break;case"ai-conversation-list":customElements.get(o(t))||r()}}))};export{c as AiChatHeader,h as defineCustomElement}

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-VMEwYfaX.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;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 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}:host([direction="ltr"]) .chat-container.float{transform-origin:bottom right}.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) {
@@ -49,6 +49,7 @@ const ChatContainer = class {
     dragState = null;
     mutationObserver = null;
     resizeObserver = null;
+    dirObserver = null;
     // Named arrow so we can reliably add/remove it without leaking
     dragListener = (e) => {
         if (typeof window === 'undefined')
@@ -100,10 +101,21 @@ const ChatContainer = class {
     }
     componentWillLoad() {
         this.checkMobile();
+        // Auto-detect direction from the DOM if not explicitly set via prop
+        this.syncDirectionFromDom();
+        // Normalize default position to match direction
+        if (this.position === 'left' && this.direction === 'ltr') {
+            this.position = 'right';
+        }
     }
     componentDidLoad() {
         if (typeof window === 'undefined')
             return;
+        // Set default float position to the correct side based on direction
+        if (this.direction === 'ltr') {
+            const containerWidth = this.containerRef?.offsetWidth || this.parsePropToPx(this.width);
+            this.floatLeft = `${window.innerWidth - containerWidth - 24}px`;
+        }
         // Use ResizeObserver for responsive mobile detection instead of window.resize
         if (typeof ResizeObserver !== 'undefined') {
             this.resizeObserver = new ResizeObserver(() => {
@@ -117,6 +129,17 @@ const ChatContainer = class {
         if (this.position === 'float') {
             this.setupDrag();
         }
+        // Watch document.documentElement for dir attribute changes (e.g. Storybook toolbar)
+        if (typeof MutationObserver !== 'undefined') {
+            this.dirObserver = new MutationObserver(() => {
+                const prev = this.direction;
+                this.syncDirectionFromDom();
+                if (this.direction !== prev) {
+                    this.applyDirectionDefaults(prev);
+                }
+            });
+            this.dirObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['dir'] });
+        }
         this.mutationObserver = new MutationObserver(() => {
             if (this.autoScroll && this.messagesAreaRef) {
                 requestAnimationFrame(() => {
@@ -138,6 +161,7 @@ const ChatContainer = class {
         if (newVal === 'float') {
             this.setupDrag();
         }
+        this.positionChange.emit(newVal);
     }
     disconnectedCallback() {
         if (typeof window !== 'undefined') {
@@ -146,6 +170,7 @@ const ChatContainer = class {
         this.el.removeEventListener('headerDragStart', this.dragListener);
         this.mutationObserver?.disconnect();
         this.resizeObserver?.disconnect();
+        this.dirObserver?.disconnect();
     }
     /** Programmatically scroll the messages area to the bottom */
     async scrollToBottom() {
@@ -161,12 +186,49 @@ const ChatContainer = class {
     async cyclePosition() {
         const docked = this.direction === 'rtl' ? 'left' : 'right';
         this.position = this.position === 'float' ? docked : 'float';
-        this.positionChange.emit(this.position);
     }
     handleWindowResize = () => {
         this.checkMobile();
         this.clampFloatPosition();
     };
+    /** Read direction from the nearest [dir] ancestor or <html dir>. */
+    syncDirectionFromDom() {
+        if (typeof document === 'undefined')
+            return;
+        const closest = this.el.closest('[dir]');
+        const domDir = closest?.getAttribute('dir') ?? document.documentElement.getAttribute('dir') ?? document.documentElement.dir;
+        if (domDir === 'ltr' || domDir === 'rtl') {
+            this.direction = domDir;
+        }
+    }
+    /**
+     * After a direction change, normalize position and float offset.
+     * @param prevDir the direction before the change
+     */
+    applyDirectionDefaults(prevDir) {
+        const oldDocked = prevDir === 'rtl' ? 'left' : 'right';
+        const newDocked = this.direction === 'rtl' ? 'left' : 'right';
+        // If was docked on the old side, flip to new docked side
+        if (this.position === oldDocked) {
+            this.position = newDocked;
+        }
+        // Reset float anchor to the correct default side
+        if (this.direction === 'ltr' && typeof window !== 'undefined') {
+            const w = this.containerRef?.offsetWidth || this.parsePropToPx(this.width);
+            this.floatLeft = `${window.innerWidth - w - 24}px`;
+        }
+        else {
+            this.floatLeft = '24px';
+        }
+    }
+    parsePropToPx(value) {
+        const num = parseFloat(value);
+        if (value.endsWith('rem'))
+            return num * 16;
+        if (value.endsWith('%') && typeof window !== 'undefined')
+            return (num / 100) * window.innerWidth;
+        return num;
+    }
     checkMobile() {
         if (typeof window !== 'undefined') {
             this.isMobile = window.innerWidth < 768;
@@ -233,7 +295,7 @@ const ChatContainer = class {
         return (h("div", { class: "error-state", role: "alert" }, h("svg", { class: "error-icon", width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", "stroke-width": "1.5" }), h("path", { d: "M12 7v6", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round" }), h("circle", { cx: "12", cy: "16.5", r: "0.75", fill: "currentColor" })), h("p", { class: "error-text" }, this.errorText), h("button", { class: "error-retry-btn", type: "button", onClick: () => this.retryClick.emit() }, this.retryLabel)));
     }
     render() {
-        return (h(Host, { key: '6290736307488f10a4ed441e2a8e0b3a2e89af05', class: { dark: this.isDark() } }, h("div", { key: '6d6a731d9941457b786c71625243a7dd1e9f11f8', class: this.getContainerClasses(), style: this.getContainerStyle(), ref: el => (this.containerRef = el) }, this.showWatermark && !this.loading && !this.error && (h("div", { key: '0c2ae5b52f8c30bdf356a3c356d52305451cb19e', class: "watermark" }, h("svg", { key: '36076d8dd514f5736050228d22b9a03d5d48ce28', class: "watermark-circle-svg", width: "133", height: "133", viewBox: "0 0 133 133", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: '737a3f3d8b7a0f91120258c292d047f9dc90871c', filter: "url(#wm_circle_shadow)" }, h("circle", { key: 'a59549c879ddaa2a0007c4fd9645c4382b14e73f', cx: "66.415", cy: "66.415", r: "66.415", class: "watermark-circle" })), h("defs", { key: '58d5edc4e05f3dd8a60f7a829b70f154ba85bfc1' }, h("filter", { key: 'd2cb7cb5a84bdf1496b56ec5a0c0c79001040670', id: "wm_circle_shadow", x: "0", y: "0", width: "132.83", height: "135.83", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { key: 'e90404f557fba552a21bd3748ad728470172040f', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feBlend", { key: 'ef5aee167a4973c35f8ffaa8ae4a0487de8266ee', mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), h("feColorMatrix", { key: 'e0869202bc43610b91abce92e85e8e5264cda999', 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" }), h("feOffset", { key: '7bef38d885b93711fce4c0efbb719a83417eeefb', dy: "3" }), h("feGaussianBlur", { key: '053de38388f049be8db7867b99b53d403de934ca', stdDeviation: "3" }), h("feComposite", { key: 'e5f68fbcf0923174a177545bf3364d066a122347', in2: "hardAlpha", operator: "arithmetic", k2: "-1", k3: "1" }), h("feColorMatrix", { key: '62dc924cbdc92ce4adc0ec81be851c1d40e7a5b0', type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" }), h("feBlend", { key: '908299725f9e553c636bd18eab6541c6a7c69fe5', mode: "normal", in2: "shape", result: "effect1_innerShadow" })))), h("svg", { key: '2a6ce2364bfd667c4eba56d859a1326f70a82901', class: "watermark-star-svg", width: "78", height: "78", viewBox: "0 0 78 78", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: 'e2c431ac6bee320c817a7283e6e356edc4667146', filter: "url(#wm_star_shadow)" }, h("path", { key: 'd87d0313e649527f5909ac1b08f7af2979760d79', 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" })), h("defs", { key: '51e7ef185399e3a10d0b19eb399500be3e5384f8' }, h("filter", { key: '09f52cd1b7084a8af9488bbce05c277fe07012f9', id: "wm_star_shadow", x: "0", y: "0", width: "77.4844", height: "79.4841", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { key: '1b055616d714f824dd38a895a5c1a635fefc4a66', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feBlend", { key: '044cba9d32d0a1d56fc39d318dfc1cdd0fdc0ae7', mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), h("feColorMatrix", { key: '4bf50b36bd6b1ae90d29a95290762ef52dbfff7a', 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" }), h("feOffset", { key: '0988514af2fda03cb2ff43e95c1423137351186f', dy: "2" }), h("feGaussianBlur", { key: 'c96fb451b890e9bda84043dcd699c2a3f59c195c', stdDeviation: "2" }), h("feComposite", { key: '77b2bb3e01eefb08cac5f60a494c2cd15e97db4a', in2: "hardAlpha", operator: "arithmetic", k2: "-1", k3: "1" }), h("feColorMatrix", { key: 'aef785066c732cc5cbc16689f2e57a7df7d18bc5', type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" }), h("feBlend", { key: '292a1d370d268312514f1c8fcee2167159c2d4e9', mode: "normal", in2: "shape", result: "effect1_innerShadow" })))))), h("slot", { key: '009fd561884a5a70e559d865dc1b1d55937d923c', name: "header" }), h("div", { key: 'fde5090720cd70c2b5fe72bcaec95007e7792f4e', class: "messages-area", ref: el => (this.messagesAreaRef = el) }, this.loading ? this.renderSkeleton() : this.error ? this.renderError() : h("slot", null)), h("slot", { key: '838ea2de9f788af2af70568a7882a08645c6b2ac', name: "footer" }))));
+        return (h(Host, { key: '92739e10d04132efe3428b4568b84dbb743f2ced', class: { dark: this.isDark() } }, h("div", { key: '3846f4aa16275a9ee42d88600a39f9fdec4b9380', class: this.getContainerClasses(), style: this.getContainerStyle(), ref: el => (this.containerRef = el) }, this.showWatermark && !this.loading && !this.error && (h("div", { key: '674c8c8075b1bd7e02c6e6925fefddaffbf07da7', class: "watermark" }, h("svg", { key: '1dd03d917460057d5985c52760b8fcfec2ba185f', class: "watermark-circle-svg", width: "133", height: "133", viewBox: "0 0 133 133", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: '80e4ad2dc46b7196113e10e7604bec0df5434e81', filter: "url(#wm_circle_shadow)" }, h("circle", { key: '65ae6aa94aae8057c2d78a77799fbbe2ae7d4642', cx: "66.415", cy: "66.415", r: "66.415", class: "watermark-circle" })), h("defs", { key: 'd180bfb115a5bc946b5b65f17fa746bd3a2671b5' }, h("filter", { key: 'f0c88495d1fafe3ce77f0a41ebf20edeacd9f63f', id: "wm_circle_shadow", x: "0", y: "0", width: "132.83", height: "135.83", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { key: '673f789a1d59c36fa0a22a73de81b4d42589488e', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feBlend", { key: '297e94e150f4ff65b740d10b1fefb8a2d86e6eba', mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), h("feColorMatrix", { key: '7481822fe991f1b39a8ef4b1d55f152ebe5a74dc', 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" }), h("feOffset", { key: 'b8587f0e9191d4d0d1a2109640dcc4d8510d1329', dy: "3" }), h("feGaussianBlur", { key: 'c103c56cdc19f38d8766f1f822261baa52c3c8f7', stdDeviation: "3" }), h("feComposite", { key: 'e648998eac51783c4d24c2605d7af0f75f9694d9', in2: "hardAlpha", operator: "arithmetic", k2: "-1", k3: "1" }), h("feColorMatrix", { key: 'e51ea8682d8b47e2d1b3fa18f0e1c98f61cf9442', type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" }), h("feBlend", { key: 'c8920059343daac0ab791217f0e35bf696d22c78', mode: "normal", in2: "shape", result: "effect1_innerShadow" })))), h("svg", { key: '3d305842745d57d75b2328f2118120881408d918', class: "watermark-star-svg", width: "78", height: "78", viewBox: "0 0 78 78", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: 'e04b6580b99cb9007d44089eb19c56e68d5a3500', filter: "url(#wm_star_shadow)" }, h("path", { key: '8ecd34ab83c4ce2c99b6197079d31dc7111aba81', 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" })), h("defs", { key: '28c637d943109a521e6c64918a47bf917e6907db' }, h("filter", { key: '5cfaebbcffa9cfe42aa4bd194dd9c4117aaeed89', id: "wm_star_shadow", x: "0", y: "0", width: "77.4844", height: "79.4841", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { key: 'b6557267404cff0579970925d571978295044920', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feBlend", { key: 'fb5825214d17c41ae4b31225ed58d698b35d0f94', mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), h("feColorMatrix", { key: 'afea4f8ea013f7a8fa7a508379c0a94e9b8dbf67', 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" }), h("feOffset", { key: '56471c8c7f7247bdc6f8c985a67eb21d1bf94fff', dy: "2" }), h("feGaussianBlur", { key: '2d8674ba7260cbf634046dbe6a3b3931d01d46e2', stdDeviation: "2" }), h("feComposite", { key: '98fe007a1fa727d95ae0c7c61658a0df1659e978', in2: "hardAlpha", operator: "arithmetic", k2: "-1", k3: "1" }), h("feColorMatrix", { key: 'c4960302961214dae4091d028df699a7938ca2c6', type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" }), h("feBlend", { key: '087483fdb9064cd948984348ce6b4a921a47e144', mode: "normal", in2: "shape", result: "effect1_innerShadow" })))))), h("slot", { key: '7aa772c82a168b2a7d9119738971c67bebd686c4', name: "header" }), h("div", { key: 'd5403fd1a67f1ac7ef86e86290005f539b1d1607', class: "messages-area", ref: el => (this.messagesAreaRef = el) }, this.loading ? this.renderSkeleton() : this.error ? this.renderError() : h("slot", null)), h("slot", { key: 'bcc75c332581807e6bf2c5a769cf6daeeaa97352', name: "footer" }))));
     }
     static get watchers() { return {
         "isOpen": [{