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

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

@@ -2,7 +2,7 @@
 
 var index = require('./index-Cc05u4ND.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) {
@@ -51,6 +51,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')
@@ -102,10 +103,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(() => {
@@ -119,6 +131,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(() => {
@@ -149,6 +172,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() {
@@ -169,6 +193,44 @@ const ChatContainer = class {
         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;
@@ -235,7 +297,7 @@ const ChatContainer = class {
         return (index.h("div", { class: "error-state", role: "alert" }, index.h("svg", { class: "error-icon", width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", "stroke-width": "1.5" }), index.h("path", { d: "M12 7v6", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round" }), index.h("circle", { cx: "12", cy: "16.5", r: "0.75", fill: "currentColor" })), index.h("p", { class: "error-text" }, this.errorText), index.h("button", { class: "error-retry-btn", type: "button", onClick: () => this.retryClick.emit() }, this.retryLabel)));
     }
     render() {
-        return (index.h(index.Host, { key: '1213110dce6a44b37c4a7b1f6a584368951964d2', class: { dark: this.isDark() } }, index.h("div", { key: 'df0df824b4ef271aae37dee7aa2fc85037ef647a', class: this.getContainerClasses(), style: this.getContainerStyle(), ref: el => (this.containerRef = el) }, this.showWatermark && !this.loading && !this.error && (index.h("div", { key: '168fd1510d8910f234331c03d4d549d0a9586472', class: "watermark" }, index.h("svg", { key: 'fde35527192a8501b190462bfdf66ae7d739742c', class: "watermark-circle-svg", width: "133", height: "133", viewBox: "0 0 133 133", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("g", { key: '63c94c35e3adafac862c39cda04d05d75199bae0', filter: "url(#wm_circle_shadow)" }, index.h("circle", { key: '8e8e304ae2132ad36855457a7755b2ba20770038', cx: "66.415", cy: "66.415", r: "66.415", class: "watermark-circle" })), index.h("defs", { key: 'c571edd0fb6a68bf9e62530398ba01e482f5755e' }, index.h("filter", { key: 'c63ab4c6c16db9eac63d944c481564af4667f493', id: "wm_circle_shadow", x: "0", y: "0", width: "132.83", height: "135.83", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, index.h("feFlood", { key: '37105253941532ffc3136713df67e87b9ef123e5', "flood-opacity": "0", result: "BackgroundImageFix" }), index.h("feBlend", { key: 'ecde8a14cbc2a11125e548ebe412f00381aa561e', mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), index.h("feColorMatrix", { key: '1001d9bf46d7df0f8788e46cfb311a90b5984f8d', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), index.h("feOffset", { key: '4ffa296814b3eeb49e56688f1d6a981ac7055a92', dy: "3" }), index.h("feGaussianBlur", { key: '91a6bf8600f4b30c24af6717d61a7549584240f7', stdDeviation: "3" }), index.h("feComposite", { key: '325b8156a7a3cc8dfa1855d687436d170dc83bbb', in2: "hardAlpha", operator: "arithmetic", k2: "-1", k3: "1" }), index.h("feColorMatrix", { key: '48da64c927a7c97e21b499576cc8a421445ffd61', type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" }), index.h("feBlend", { key: '2c3fcf67f6769a6e6cee16ee4f7a6115a2aa3fbc', mode: "normal", in2: "shape", result: "effect1_innerShadow" })))), index.h("svg", { key: '25669b41c62a83760adb26129d4547ece7d5f6d9', class: "watermark-star-svg", width: "78", height: "78", viewBox: "0 0 78 78", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("g", { key: 'e1347f63fe1b5b57c1be6d4958817c2682745972', filter: "url(#wm_star_shadow)" }, index.h("path", { key: '12ca3bbc4dcca07dbd4cc9e5b0227c2a4b5eeb98', d: "M38.7421 0C39.5691 0 40.2689 0.286272 40.8414 0.858815C41.414 1.43136 41.7002 2.13113 41.7002 2.95814C41.7002 8.87442 43.1952 14.3772 46.1851 19.4665C49.1115 24.4285 53.0557 28.3727 58.0177 31.299C63.107 34.289 68.6097 35.7839 74.526 35.7839C75.353 35.7839 76.0528 36.0702 76.6254 36.6428C77.1979 37.2153 77.4842 37.9151 77.4842 38.7421C77.4842 39.5691 77.1979 40.2689 76.6254 40.8414C76.0528 41.414 75.353 41.7002 74.526 41.7002C68.6097 41.7002 63.107 43.1952 58.0177 46.1851C53.0557 49.1115 49.1115 53.0557 46.1851 58.0177C43.1952 63.107 41.7002 68.6097 41.7002 74.526C41.7002 75.353 41.414 76.0528 40.8414 76.6254C40.2689 77.1979 39.5691 77.4842 38.7421 77.4842C37.9151 77.4842 37.2153 77.1979 36.6428 76.6254C36.0702 76.0528 35.7839 75.353 35.7839 74.526C35.7839 68.6097 34.289 63.107 31.299 58.0177C28.3727 53.0557 24.4285 49.1115 19.4665 46.1851C14.3772 43.1952 8.87442 41.7002 2.95814 41.7002C2.13113 41.7002 1.43136 41.414 0.858815 40.8414C0.286272 40.2689 0 39.5691 0 38.7421C0 37.9151 0.286272 37.2153 0.858815 36.6428C1.43136 36.0702 2.13113 35.7839 2.95814 35.7839C8.87442 35.7839 14.3772 34.289 19.4665 31.299C24.4285 28.3727 28.3727 24.4285 31.299 19.4665C34.289 14.3772 35.7839 8.87442 35.7839 2.95814C35.7839 2.13113 36.0702 1.43136 36.6428 0.858815C37.2153 0.286272 37.9151 0 38.7421 0Z", class: "watermark-star" })), index.h("defs", { key: '6118bbae343ffc6cdc52df3d2062b63dd655f96d' }, index.h("filter", { key: 'ac762ad5983155b7122e4e1466dcaa9230d2ad4f', id: "wm_star_shadow", x: "0", y: "0", width: "77.4844", height: "79.4841", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, index.h("feFlood", { key: '452561901594c49f607f2a5a0dd149edab297703', "flood-opacity": "0", result: "BackgroundImageFix" }), index.h("feBlend", { key: 'bd77b4ec605953eff1b83d63b152f6bc0cf757f9', mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), index.h("feColorMatrix", { key: '55215acb177fe0a8d7bf454244d1eec0a52657d9', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), index.h("feOffset", { key: '2079610df4ddb703dffdb0ba26a83262b28ddb8e', dy: "2" }), index.h("feGaussianBlur", { key: 'b42acf138ed8ed2c51ce3a51eb774f8ccb3932a5', stdDeviation: "2" }), index.h("feComposite", { key: '6b2439a1f50c1355851333431d1745d864fd4a68', in2: "hardAlpha", operator: "arithmetic", k2: "-1", k3: "1" }), index.h("feColorMatrix", { key: 'da9900a125e3e0df5f3bb383382b949d0c967d9c', type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" }), index.h("feBlend", { key: '579851be42d902cbd9939df09ba996b11210181f', mode: "normal", in2: "shape", result: "effect1_innerShadow" })))))), index.h("slot", { key: 'e2ef3a4097ff512ac2e9638fef4725b55cd4ea24', name: "header" }), index.h("div", { key: '46dac73e46b2eac797c88ed826497e4d6063f2d3', class: "messages-area", ref: el => (this.messagesAreaRef = el) }, this.loading ? this.renderSkeleton() : this.error ? this.renderError() : index.h("slot", null)), index.h("slot", { key: 'ff2cf3628bbab90bd0cdce07df6c08ae597867ba', name: "footer" }))));
+        return (index.h(index.Host, { key: '92739e10d04132efe3428b4568b84dbb743f2ced', class: { dark: this.isDark() } }, index.h("div", { key: '3846f4aa16275a9ee42d88600a39f9fdec4b9380', class: this.getContainerClasses(), style: this.getContainerStyle(), ref: el => (this.containerRef = el) }, this.showWatermark && !this.loading && !this.error && (index.h("div", { key: '674c8c8075b1bd7e02c6e6925fefddaffbf07da7', class: "watermark" }, index.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" }, index.h("g", { key: '80e4ad2dc46b7196113e10e7604bec0df5434e81', filter: "url(#wm_circle_shadow)" }, index.h("circle", { key: '65ae6aa94aae8057c2d78a77799fbbe2ae7d4642', cx: "66.415", cy: "66.415", r: "66.415", class: "watermark-circle" })), index.h("defs", { key: 'd180bfb115a5bc946b5b65f17fa746bd3a2671b5' }, index.h("filter", { key: 'f0c88495d1fafe3ce77f0a41ebf20edeacd9f63f', id: "wm_circle_shadow", x: "0", y: "0", width: "132.83", height: "135.83", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, index.h("feFlood", { key: '673f789a1d59c36fa0a22a73de81b4d42589488e', "flood-opacity": "0", result: "BackgroundImageFix" }), index.h("feBlend", { key: '297e94e150f4ff65b740d10b1fefb8a2d86e6eba', mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), index.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" }), index.h("feOffset", { key: 'b8587f0e9191d4d0d1a2109640dcc4d8510d1329', dy: "3" }), index.h("feGaussianBlur", { key: 'c103c56cdc19f38d8766f1f822261baa52c3c8f7', stdDeviation: "3" }), index.h("feComposite", { key: 'e648998eac51783c4d24c2605d7af0f75f9694d9', in2: "hardAlpha", operator: "arithmetic", k2: "-1", k3: "1" }), index.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" }), index.h("feBlend", { key: 'c8920059343daac0ab791217f0e35bf696d22c78', mode: "normal", in2: "shape", result: "effect1_innerShadow" })))), index.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" }, index.h("g", { key: 'e04b6580b99cb9007d44089eb19c56e68d5a3500', filter: "url(#wm_star_shadow)" }, index.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" })), index.h("defs", { key: '28c637d943109a521e6c64918a47bf917e6907db' }, index.h("filter", { key: '5cfaebbcffa9cfe42aa4bd194dd9c4117aaeed89', id: "wm_star_shadow", x: "0", y: "0", width: "77.4844", height: "79.4841", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, index.h("feFlood", { key: 'b6557267404cff0579970925d571978295044920', "flood-opacity": "0", result: "BackgroundImageFix" }), index.h("feBlend", { key: 'fb5825214d17c41ae4b31225ed58d698b35d0f94', mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), index.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" }), index.h("feOffset", { key: '56471c8c7f7247bdc6f8c985a67eb21d1bf94fff', dy: "2" }), index.h("feGaussianBlur", { key: '2d8674ba7260cbf634046dbe6a3b3931d01d46e2', stdDeviation: "2" }), index.h("feComposite", { key: '98fe007a1fa727d95ae0c7c61658a0df1659e978', in2: "hardAlpha", operator: "arithmetic", k2: "-1", k3: "1" }), index.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" }), index.h("feBlend", { key: '087483fdb9064cd948984348ce6b4a921a47e144', mode: "normal", in2: "shape", result: "effect1_innerShadow" })))))), index.h("slot", { key: '7aa772c82a168b2a7d9119738971c67bebd686c4', name: "header" }), index.h("div", { key: 'd5403fd1a67f1ac7ef86e86290005f539b1d1607', class: "messages-area", ref: el => (this.messagesAreaRef = el) }, this.loading ? this.renderSkeleton() : this.error ? this.renderError() : index.h("slot", null)), index.h("slot", { key: 'bcc75c332581807e6bf2c5a769cf6daeeaa97352', name: "footer" }))));
     }
     static get watchers() { return {
         "isOpen": [{

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

@@ -82,6 +82,10 @@
   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;

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

@@ -41,6 +41,7 @@ export class ChatContainer {
     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')
@@ -92,10 +93,21 @@ export class ChatContainer {
     }
     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(() => {
@@ -109,6 +121,17 @@ export class ChatContainer {
         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(() => {
@@ -139,6 +162,7 @@ export class ChatContainer {
         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() {
@@ -159,6 +183,44 @@ export class ChatContainer {
         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;
@@ -225,7 +287,7 @@ export class ChatContainer {
         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: '1213110dce6a44b37c4a7b1f6a584368951964d2', class: { dark: this.isDark() } }, h("div", { key: 'df0df824b4ef271aae37dee7aa2fc85037ef647a', class: this.getContainerClasses(), style: this.getContainerStyle(), ref: el => (this.containerRef = el) }, this.showWatermark && !this.loading && !this.error && (h("div", { key: '168fd1510d8910f234331c03d4d549d0a9586472', class: "watermark" }, h("svg", { key: 'fde35527192a8501b190462bfdf66ae7d739742c', 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: '63c94c35e3adafac862c39cda04d05d75199bae0', filter: "url(#wm_circle_shadow)" }, h("circle", { key: '8e8e304ae2132ad36855457a7755b2ba20770038', cx: "66.415", cy: "66.415", r: "66.415", class: "watermark-circle" })), h("defs", { key: 'c571edd0fb6a68bf9e62530398ba01e482f5755e' }, h("filter", { key: 'c63ab4c6c16db9eac63d944c481564af4667f493', id: "wm_circle_shadow", x: "0", y: "0", width: "132.83", height: "135.83", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { key: '37105253941532ffc3136713df67e87b9ef123e5', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feBlend", { key: 'ecde8a14cbc2a11125e548ebe412f00381aa561e', mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), h("feColorMatrix", { key: '1001d9bf46d7df0f8788e46cfb311a90b5984f8d', 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: '4ffa296814b3eeb49e56688f1d6a981ac7055a92', dy: "3" }), h("feGaussianBlur", { key: '91a6bf8600f4b30c24af6717d61a7549584240f7', stdDeviation: "3" }), h("feComposite", { key: '325b8156a7a3cc8dfa1855d687436d170dc83bbb', in2: "hardAlpha", operator: "arithmetic", k2: "-1", k3: "1" }), h("feColorMatrix", { key: '48da64c927a7c97e21b499576cc8a421445ffd61', 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: '2c3fcf67f6769a6e6cee16ee4f7a6115a2aa3fbc', mode: "normal", in2: "shape", result: "effect1_innerShadow" })))), h("svg", { key: '25669b41c62a83760adb26129d4547ece7d5f6d9', 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: 'e1347f63fe1b5b57c1be6d4958817c2682745972', filter: "url(#wm_star_shadow)" }, h("path", { key: '12ca3bbc4dcca07dbd4cc9e5b0227c2a4b5eeb98', 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: '6118bbae343ffc6cdc52df3d2062b63dd655f96d' }, h("filter", { key: 'ac762ad5983155b7122e4e1466dcaa9230d2ad4f', id: "wm_star_shadow", x: "0", y: "0", width: "77.4844", height: "79.4841", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { key: '452561901594c49f607f2a5a0dd149edab297703', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feBlend", { key: 'bd77b4ec605953eff1b83d63b152f6bc0cf757f9', mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), h("feColorMatrix", { key: '55215acb177fe0a8d7bf454244d1eec0a52657d9', 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: '2079610df4ddb703dffdb0ba26a83262b28ddb8e', dy: "2" }), h("feGaussianBlur", { key: 'b42acf138ed8ed2c51ce3a51eb774f8ccb3932a5', stdDeviation: "2" }), h("feComposite", { key: '6b2439a1f50c1355851333431d1745d864fd4a68', in2: "hardAlpha", operator: "arithmetic", k2: "-1", k3: "1" }), h("feColorMatrix", { key: 'da9900a125e3e0df5f3bb383382b949d0c967d9c', 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: '579851be42d902cbd9939df09ba996b11210181f', mode: "normal", in2: "shape", result: "effect1_innerShadow" })))))), h("slot", { key: 'e2ef3a4097ff512ac2e9638fef4725b55cd4ea24', name: "header" }), h("div", { key: '46dac73e46b2eac797c88ed826497e4d6063f2d3', class: "messages-area", ref: el => (this.messagesAreaRef = el) }, this.loading ? this.renderSkeleton() : this.error ? this.renderError() : h("slot", null)), h("slot", { key: 'ff2cf3628bbab90bd0cdce07df6c08ae597867ba', 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 is() { return "ai-chat-container"; }
     static get encapsulation() { return "shadow"; }

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(),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()}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()};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:"1213110dce6a44b37c4a7b1f6a584368951964d2",class:{dark:this.isDark()}},r("div",{key:"df0df824b4ef271aae37dee7aa2fc85037ef647a",class:this.getContainerClasses(),style:this.getContainerStyle(),ref:e=>this.containerRef=e},this.showWatermark&&!this.loading&&!this.error&&r("div",{key:"168fd1510d8910f234331c03d4d549d0a9586472",class:"watermark"},r("svg",{key:"fde35527192a8501b190462bfdf66ae7d739742c",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:"63c94c35e3adafac862c39cda04d05d75199bae0",filter:"url(#wm_circle_shadow)"},r("circle",{key:"8e8e304ae2132ad36855457a7755b2ba20770038",cx:"66.415",cy:"66.415",r:"66.415",class:"watermark-circle"})),r("defs",{key:"c571edd0fb6a68bf9e62530398ba01e482f5755e"},r("filter",{key:"c63ab4c6c16db9eac63d944c481564af4667f493",id:"wm_circle_shadow",x:"0",y:"0",width:"132.83",height:"135.83",filterUnits:"userSpaceOnUse","color-interpolation-filters":"sRGB"},r("feFlood",{key:"37105253941532ffc3136713df67e87b9ef123e5","flood-opacity":"0",result:"BackgroundImageFix"}),r("feBlend",{key:"ecde8a14cbc2a11125e548ebe412f00381aa561e",mode:"normal",in:"SourceGraphic",in2:"BackgroundImageFix",result:"shape"}),r("feColorMatrix",{key:"1001d9bf46d7df0f8788e46cfb311a90b5984f8d",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:"4ffa296814b3eeb49e56688f1d6a981ac7055a92",dy:"3"}),r("feGaussianBlur",{key:"91a6bf8600f4b30c24af6717d61a7549584240f7",stdDeviation:"3"}),r("feComposite",{key:"325b8156a7a3cc8dfa1855d687436d170dc83bbb",in2:"hardAlpha",operator:"arithmetic",k2:"-1",k3:"1"}),r("feColorMatrix",{key:"48da64c927a7c97e21b499576cc8a421445ffd61",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:"2c3fcf67f6769a6e6cee16ee4f7a6115a2aa3fbc",mode:"normal",in2:"shape",result:"effect1_innerShadow"})))),r("svg",{key:"25669b41c62a83760adb26129d4547ece7d5f6d9",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:"e1347f63fe1b5b57c1be6d4958817c2682745972",filter:"url(#wm_star_shadow)"},r("path",{key:"12ca3bbc4dcca07dbd4cc9e5b0227c2a4b5eeb98",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:"6118bbae343ffc6cdc52df3d2062b63dd655f96d"},r("filter",{key:"ac762ad5983155b7122e4e1466dcaa9230d2ad4f",id:"wm_star_shadow",x:"0",y:"0",width:"77.4844",height:"79.4841",filterUnits:"userSpaceOnUse","color-interpolation-filters":"sRGB"},r("feFlood",{key:"452561901594c49f607f2a5a0dd149edab297703","flood-opacity":"0",result:"BackgroundImageFix"}),r("feBlend",{key:"bd77b4ec605953eff1b83d63b152f6bc0cf757f9",mode:"normal",in:"SourceGraphic",in2:"BackgroundImageFix",result:"shape"}),r("feColorMatrix",{key:"55215acb177fe0a8d7bf454244d1eec0a52657d9",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:"2079610df4ddb703dffdb0ba26a83262b28ddb8e",dy:"2"}),r("feGaussianBlur",{key:"b42acf138ed8ed2c51ce3a51eb774f8ccb3932a5",stdDeviation:"2"}),r("feComposite",{key:"6b2439a1f50c1355851333431d1745d864fd4a68",in2:"hardAlpha",operator:"arithmetic",k2:"-1",k3:"1"}),r("feColorMatrix",{key:"da9900a125e3e0df5f3bb383382b949d0c967d9c",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:"579851be42d902cbd9939df09ba996b11210181f",mode:"normal",in2:"shape",result:"effect1_innerShadow"}))))),r("slot",{key:"e2ef3a4097ff512ac2e9638fef4725b55cd4ea24",name:"header"}),r("div",{key:"46dac73e46b2eac797c88ed826497e4d6063f2d3",class:"messages-area",ref:e=>this.messagesAreaRef=e},this.loading?this.renderSkeleton():this.error?this.renderError():r("slot",null)),r("slot",{key:"ff2cf3628bbab90bd0cdce07df6c08ae597867ba",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/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(() => {
@@ -147,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() {
@@ -167,6 +191,44 @@ const ChatContainer = class {
         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: '1213110dce6a44b37c4a7b1f6a584368951964d2', class: { dark: this.isDark() } }, h("div", { key: 'df0df824b4ef271aae37dee7aa2fc85037ef647a', class: this.getContainerClasses(), style: this.getContainerStyle(), ref: el => (this.containerRef = el) }, this.showWatermark && !this.loading && !this.error && (h("div", { key: '168fd1510d8910f234331c03d4d549d0a9586472', class: "watermark" }, h("svg", { key: 'fde35527192a8501b190462bfdf66ae7d739742c', 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: '63c94c35e3adafac862c39cda04d05d75199bae0', filter: "url(#wm_circle_shadow)" }, h("circle", { key: '8e8e304ae2132ad36855457a7755b2ba20770038', cx: "66.415", cy: "66.415", r: "66.415", class: "watermark-circle" })), h("defs", { key: 'c571edd0fb6a68bf9e62530398ba01e482f5755e' }, h("filter", { key: 'c63ab4c6c16db9eac63d944c481564af4667f493', id: "wm_circle_shadow", x: "0", y: "0", width: "132.83", height: "135.83", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { key: '37105253941532ffc3136713df67e87b9ef123e5', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feBlend", { key: 'ecde8a14cbc2a11125e548ebe412f00381aa561e', mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), h("feColorMatrix", { key: '1001d9bf46d7df0f8788e46cfb311a90b5984f8d', 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: '4ffa296814b3eeb49e56688f1d6a981ac7055a92', dy: "3" }), h("feGaussianBlur", { key: '91a6bf8600f4b30c24af6717d61a7549584240f7', stdDeviation: "3" }), h("feComposite", { key: '325b8156a7a3cc8dfa1855d687436d170dc83bbb', in2: "hardAlpha", operator: "arithmetic", k2: "-1", k3: "1" }), h("feColorMatrix", { key: '48da64c927a7c97e21b499576cc8a421445ffd61', 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: '2c3fcf67f6769a6e6cee16ee4f7a6115a2aa3fbc', mode: "normal", in2: "shape", result: "effect1_innerShadow" })))), h("svg", { key: '25669b41c62a83760adb26129d4547ece7d5f6d9', 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: 'e1347f63fe1b5b57c1be6d4958817c2682745972', filter: "url(#wm_star_shadow)" }, h("path", { key: '12ca3bbc4dcca07dbd4cc9e5b0227c2a4b5eeb98', 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: '6118bbae343ffc6cdc52df3d2062b63dd655f96d' }, h("filter", { key: 'ac762ad5983155b7122e4e1466dcaa9230d2ad4f', id: "wm_star_shadow", x: "0", y: "0", width: "77.4844", height: "79.4841", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { key: '452561901594c49f607f2a5a0dd149edab297703', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feBlend", { key: 'bd77b4ec605953eff1b83d63b152f6bc0cf757f9', mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), h("feColorMatrix", { key: '55215acb177fe0a8d7bf454244d1eec0a52657d9', 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: '2079610df4ddb703dffdb0ba26a83262b28ddb8e', dy: "2" }), h("feGaussianBlur", { key: 'b42acf138ed8ed2c51ce3a51eb774f8ccb3932a5', stdDeviation: "2" }), h("feComposite", { key: '6b2439a1f50c1355851333431d1745d864fd4a68', in2: "hardAlpha", operator: "arithmetic", k2: "-1", k3: "1" }), h("feColorMatrix", { key: 'da9900a125e3e0df5f3bb383382b949d0c967d9c', 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: '579851be42d902cbd9939df09ba996b11210181f', mode: "normal", in2: "shape", result: "effect1_innerShadow" })))))), h("slot", { key: 'e2ef3a4097ff512ac2e9638fef4725b55cd4ea24', name: "header" }), h("div", { key: '46dac73e46b2eac797c88ed826497e4d6063f2d3', class: "messages-area", ref: el => (this.messagesAreaRef = el) }, this.loading ? this.renderSkeleton() : this.error ? this.renderError() : h("slot", null)), h("slot", { key: 'ff2cf3628bbab90bd0cdce07df6c08ae597867ba', 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": [{

package/dist/types/components/ai-chat-container/ai-chat-container.d.ts

@@ -42,6 +42,7 @@ export declare class ChatContainer {
     private dragState;
     private mutationObserver;
     private resizeObserver;
+    private dirObserver;
     private dragListener;
     /**
      * Listen for the composed headerPositionClick event fired by ai-chat-header.
@@ -62,6 +63,14 @@ export declare class ChatContainer {
      */
     cyclePosition(): Promise<void>;
     private handleWindowResize;
+    /** Read direction from the nearest [dir] ancestor or <html dir>. */
+    private syncDirectionFromDom;
+    /**
+     * After a direction change, normalize position and float offset.
+     * @param prevDir the direction before the change
+     */
+    private applyDirectionDefaults;
+    private parsePropToPx;
     private checkMobile;
     /** Re-clamp float position so the panel never ends up off-screen after resize */
     private clampFloatPosition;

package/dist/ui-ai-kit/p-e9ac7197.entry.js

@@ -0,0 +1 @@
+import{r as e,c as t,a as r,h as a,H as i}from"./p-VMEwYfaX.js";const s=class{constructor(r){e(this,r),this.retryClick=t(this,"retryClick"),this.positionChange=t(this,"positionChange")}get el(){return r(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 s=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,s=window.innerHeight,o=t.offsetHeight;r=Math.max(0,Math.min(r,i-t.offsetWidth)),a=Math.max(0,Math.min(a,s-o)),this.floatLeft=`${r}px`,this.floatTop=`${a}px`},o=()=>{this.dragState=null,document.removeEventListener("pointermove",s),document.removeEventListener("pointerup",o)};document.addEventListener("pointermove",s),document.addEventListener("pointerup",o)};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,s=parseFloat(this.floatTop)||0;i=Math.max(0,Math.min(i,e-r)),s=Math.max(0,Math.min(s,t-a)),this.floatLeft=`${i}px`,this.floatTop=`${s}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}]}}};s.style=':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))}';export{s as ai_chat_container}

package/dist/ui-ai-kit/ui-ai-kit.esm.js

@@ -1 +1 @@
-import{p as e,g as a,b as t}from"./p-VMEwYfaX.js";export{s as setNonce}from"./p-VMEwYfaX.js";(()=>{const a=import.meta.url,t={};return""!==a&&(t.resourcesUrl=new URL(".",a).href),e(t)})().then((async e=>(await a(),t([["p-6a4b66ed",[[513,"ai-message-input",{placeholder:[1],disabled:[4],showVoiceButton:[4,"show-voice-button"],maxLength:[2,"max-length"],isRecording:[4,"is-recording"],inputValue:[32],showVoiceRecorder:[32],isMultiline:[32],setInputValue:[64]},null,{isRecording:[{onIsRecordingChange:0}]}]]],["p-efb68380",[[513,"ai-rating",{question:[1],subtitle:[1],successMessage:[1,"success-message"],value:[1026],disabled:[4],hovered:[32],submitted:[32]}]]],["p-3007f89b",[[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"]]]]],["p-4359a116",[[513,"ai-agent-error",{headline:[1],message:[1],errorCode:[1,"error-code"],retryable:[4],retryLabel:[1,"retry-label"],dismissible:[4]}]]],["p-f645c832",[[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}]}]]],["p-8b1d056d",[[769,"ai-chat-message",{role:[1],content:[1],format:[1],agentName:[1,"agent-name"],timestamp:[1],showActions:[4,"show-actions"],enableRegenerate:[4,"enable-regenerate"],feedbackValue:[1025,"feedback-value"],copySuccess:[32]}]]],["p-11c960d8",[[769,"ai-conversation-summary",{conversation:[1],summary:[1],messageCount:[2,"message-count"],language:[1]}]]],["p-79309690",[[513,"ai-in-chat-browser",{url:[1],pageTitle:[1,"page-title"],isLoading:[32],hasError:[32]},null,{url:[{onUrlChange:0}]}]]],["p-e1a2a622",[[769,"ai-link",{label:[1],href:[1],target:[1],rel:[1]}]]],["p-cae762e0",[[513,"ai-loading",{mode:[1],statusText:[1,"status-text"],thinkingSubtext:[1,"thinking-subtext"],steps:[16],headerTitle:[1,"header-title"],currentAgent:[1,"current-agent"],showAgentBadges:[4,"show-agent-badges"],expanded:[1028],collapsible:[4],_expanded:[32]}]]],["p-9a8614d0",[[513,"ai-route-decision",{selectedAgent:[1,"selected-agent"],agentIcon:[1,"agent-icon"],reason:[1],confidence:[2],detectedLanguage:[1,"detected-language"],expanded:[1028],_expanded:[32]}]]],["p-9af03dbd",[[769,"ai-suggestion",{label:[1],disabled:[4]}]]],["p-a5f53c8c",[[513,"ai-voice-input",{disabled:[4],showWaveform:[4,"show-waveform"],autoStart:[4,"auto-start"],errorText:[1,"error-text"],waveformColor:[1,"waveform-color"],state:[32],error:[32],recordingDuration:[32],submitPulse:[32]}]]],["p-cde479ea",[[769,"ai-card",{noPadding:[4,"no-padding"],noShadow:[4,"no-shadow"]}]]],["p-17e5d542",[[513,"ai-conversation-list",{items:[16],activeId:[1,"active-id"],loading:[4],emptyText:[1,"empty-text"],error:[4],errorText:[1,"error-text"],retryLabel:[1,"retry-label"],deletingId:[1,"deleting-id"]}]]],["p-6b644d32",[[513,"ai-icon",{name:[1],size:[2]}]]]],e))));
+import{p as e,g as a,b as t}from"./p-VMEwYfaX.js";export{s as setNonce}from"./p-VMEwYfaX.js";(()=>{const a=import.meta.url,t={};return""!==a&&(t.resourcesUrl=new URL(".",a).href),e(t)})().then((async e=>(await a(),t([["p-6a4b66ed",[[513,"ai-message-input",{placeholder:[1],disabled:[4],showVoiceButton:[4,"show-voice-button"],maxLength:[2,"max-length"],isRecording:[4,"is-recording"],inputValue:[32],showVoiceRecorder:[32],isMultiline:[32],setInputValue:[64]},null,{isRecording:[{onIsRecordingChange:0}]}]]],["p-efb68380",[[513,"ai-rating",{question:[1],subtitle:[1],successMessage:[1,"success-message"],value:[1026],disabled:[4],hovered:[32],submitted:[32]}]]],["p-3007f89b",[[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"]]]]],["p-4359a116",[[513,"ai-agent-error",{headline:[1],message:[1],errorCode:[1,"error-code"],retryable:[4],retryLabel:[1,"retry-label"],dismissible:[4]}]]],["p-e9ac7197",[[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}]}]]],["p-8b1d056d",[[769,"ai-chat-message",{role:[1],content:[1],format:[1],agentName:[1,"agent-name"],timestamp:[1],showActions:[4,"show-actions"],enableRegenerate:[4,"enable-regenerate"],feedbackValue:[1025,"feedback-value"],copySuccess:[32]}]]],["p-11c960d8",[[769,"ai-conversation-summary",{conversation:[1],summary:[1],messageCount:[2,"message-count"],language:[1]}]]],["p-79309690",[[513,"ai-in-chat-browser",{url:[1],pageTitle:[1,"page-title"],isLoading:[32],hasError:[32]},null,{url:[{onUrlChange:0}]}]]],["p-e1a2a622",[[769,"ai-link",{label:[1],href:[1],target:[1],rel:[1]}]]],["p-cae762e0",[[513,"ai-loading",{mode:[1],statusText:[1,"status-text"],thinkingSubtext:[1,"thinking-subtext"],steps:[16],headerTitle:[1,"header-title"],currentAgent:[1,"current-agent"],showAgentBadges:[4,"show-agent-badges"],expanded:[1028],collapsible:[4],_expanded:[32]}]]],["p-9a8614d0",[[513,"ai-route-decision",{selectedAgent:[1,"selected-agent"],agentIcon:[1,"agent-icon"],reason:[1],confidence:[2],detectedLanguage:[1,"detected-language"],expanded:[1028],_expanded:[32]}]]],["p-9af03dbd",[[769,"ai-suggestion",{label:[1],disabled:[4]}]]],["p-a5f53c8c",[[513,"ai-voice-input",{disabled:[4],showWaveform:[4,"show-waveform"],autoStart:[4,"auto-start"],errorText:[1,"error-text"],waveformColor:[1,"waveform-color"],state:[32],error:[32],recordingDuration:[32],submitPulse:[32]}]]],["p-cde479ea",[[769,"ai-card",{noPadding:[4,"no-padding"],noShadow:[4,"no-shadow"]}]]],["p-17e5d542",[[513,"ai-conversation-list",{items:[16],activeId:[1,"active-id"],loading:[4],emptyText:[1,"empty-text"],error:[4],errorText:[1,"error-text"],retryLabel:[1,"retry-label"],deletingId:[1,"deleting-id"]}]]],["p-6b644d32",[[513,"ai-icon",{name:[1],size:[2]}]]]],e))));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salla.sa/ui-ai-kit-core",
-  "version": "2.2.5",
+  "version": "2.2.6",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
   "types": "dist/types/index.d.ts",

package/dist/ui-ai-kit/p-f645c832.entry.js

@@ -1 +0,0 @@
-import{r as e,c as t,a,h as r,H as i}from"./p-VMEwYfaX.js";const o=class{constructor(a){e(this,a),this.retryClick=t(this,"retryClick"),this.positionChange=t(this,"positionChange")}get el(){return a(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(),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()}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()};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:"1213110dce6a44b37c4a7b1f6a584368951964d2",class:{dark:this.isDark()}},r("div",{key:"df0df824b4ef271aae37dee7aa2fc85037ef647a",class:this.getContainerClasses(),style:this.getContainerStyle(),ref:e=>this.containerRef=e},this.showWatermark&&!this.loading&&!this.error&&r("div",{key:"168fd1510d8910f234331c03d4d549d0a9586472",class:"watermark"},r("svg",{key:"fde35527192a8501b190462bfdf66ae7d739742c",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:"63c94c35e3adafac862c39cda04d05d75199bae0",filter:"url(#wm_circle_shadow)"},r("circle",{key:"8e8e304ae2132ad36855457a7755b2ba20770038",cx:"66.415",cy:"66.415",r:"66.415",class:"watermark-circle"})),r("defs",{key:"c571edd0fb6a68bf9e62530398ba01e482f5755e"},r("filter",{key:"c63ab4c6c16db9eac63d944c481564af4667f493",id:"wm_circle_shadow",x:"0",y:"0",width:"132.83",height:"135.83",filterUnits:"userSpaceOnUse","color-interpolation-filters":"sRGB"},r("feFlood",{key:"37105253941532ffc3136713df67e87b9ef123e5","flood-opacity":"0",result:"BackgroundImageFix"}),r("feBlend",{key:"ecde8a14cbc2a11125e548ebe412f00381aa561e",mode:"normal",in:"SourceGraphic",in2:"BackgroundImageFix",result:"shape"}),r("feColorMatrix",{key:"1001d9bf46d7df0f8788e46cfb311a90b5984f8d",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:"4ffa296814b3eeb49e56688f1d6a981ac7055a92",dy:"3"}),r("feGaussianBlur",{key:"91a6bf8600f4b30c24af6717d61a7549584240f7",stdDeviation:"3"}),r("feComposite",{key:"325b8156a7a3cc8dfa1855d687436d170dc83bbb",in2:"hardAlpha",operator:"arithmetic",k2:"-1",k3:"1"}),r("feColorMatrix",{key:"48da64c927a7c97e21b499576cc8a421445ffd61",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:"2c3fcf67f6769a6e6cee16ee4f7a6115a2aa3fbc",mode:"normal",in2:"shape",result:"effect1_innerShadow"})))),r("svg",{key:"25669b41c62a83760adb26129d4547ece7d5f6d9",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:"e1347f63fe1b5b57c1be6d4958817c2682745972",filter:"url(#wm_star_shadow)"},r("path",{key:"12ca3bbc4dcca07dbd4cc9e5b0227c2a4b5eeb98",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:"6118bbae343ffc6cdc52df3d2062b63dd655f96d"},r("filter",{key:"ac762ad5983155b7122e4e1466dcaa9230d2ad4f",id:"wm_star_shadow",x:"0",y:"0",width:"77.4844",height:"79.4841",filterUnits:"userSpaceOnUse","color-interpolation-filters":"sRGB"},r("feFlood",{key:"452561901594c49f607f2a5a0dd149edab297703","flood-opacity":"0",result:"BackgroundImageFix"}),r("feBlend",{key:"bd77b4ec605953eff1b83d63b152f6bc0cf757f9",mode:"normal",in:"SourceGraphic",in2:"BackgroundImageFix",result:"shape"}),r("feColorMatrix",{key:"55215acb177fe0a8d7bf454244d1eec0a52657d9",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:"2079610df4ddb703dffdb0ba26a83262b28ddb8e",dy:"2"}),r("feGaussianBlur",{key:"b42acf138ed8ed2c51ce3a51eb774f8ccb3932a5",stdDeviation:"2"}),r("feComposite",{key:"6b2439a1f50c1355851333431d1745d864fd4a68",in2:"hardAlpha",operator:"arithmetic",k2:"-1",k3:"1"}),r("feColorMatrix",{key:"da9900a125e3e0df5f3bb383382b949d0c967d9c",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:"579851be42d902cbd9939df09ba996b11210181f",mode:"normal",in2:"shape",result:"effect1_innerShadow"}))))),r("slot",{key:"e2ef3a4097ff512ac2e9638fef4725b55cd4ea24",name:"header"}),r("div",{key:"46dac73e46b2eac797c88ed826497e4d6063f2d3",class:"messages-area",ref:e=>this.messagesAreaRef=e},this.loading?this.renderSkeleton():this.error?this.renderError():r("slot",null)),r("slot",{key:"ff2cf3628bbab90bd0cdce07df6c08ae597867ba",name:"footer"})))}static get watchers(){return{isOpen:[{isOpenChanged:0}],position:[{positionChanged:0}]}}};o.style=":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))}";export{o as ai_chat_container}