@salla.sa/ui-ai-kit-core 2.1.1 → 2.2.1

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

@@ -4,7 +4,7 @@ export class ChatContainer {
     /** Controls visibility of the chat panel */
     isOpen = false;
     /** Position of the panel: 'left', 'right', or 'float' */
-    position = 'right';
+    position = 'left';
     /** Width of the panel (CSS value, e.g., '400px', '30%', '28rem') */
     width = '28rem';
     /** Enable/disable auto-scroll to latest message */
@@ -15,6 +15,24 @@ export class ChatContainer {
     floatHeight = '600px';
     /** Color theme for the panel */
     theme = 'light';
+    /** Show skeleton loading state (e.g. while loading conversation history) */
+    loading = false;
+    /** Show error state (e.g. failed to load conversation) */
+    error = false;
+    /** Error message text */
+    errorText = 'تعذّر تحميل المحادثة';
+    /** Retry button label */
+    retryLabel = 'إعادة المحاولة';
+    /**
+     * Layout direction set by the host app.
+     * - `'rtl'` → valid docked position is `left`; cycle order: left ↔ float
+     * - `'ltr'` → valid docked position is `right`; cycle order: right ↔ float
+     */
+    direction = 'rtl';
+    /** Event emitted when the retry button is clicked */
+    retryClick;
+    /** Fired when the position changes (via cyclePosition or the header button) */
+    positionChange;
     isMobile = false;
     floatLeft = '24px';
     floatTop = '24px';
@@ -22,8 +40,11 @@ export class ChatContainer {
     messagesAreaRef;
     dragState = null;
     mutationObserver = null;
+    resizeObserver = null;
     // Named arrow so we can reliably add/remove it without leaking
     dragListener = (e) => {
+        if (typeof window === 'undefined')
+            return;
         const container = this.containerRef;
         if (!container)
             return;
@@ -62,19 +83,31 @@ export class ChatContainer {
         document.addEventListener('pointermove', onMove);
         document.addEventListener('pointerup', onUp);
     };
-    constructor() {
-        // Bind so window.removeEventListener can match the reference
-        this.checkMobile = this.checkMobile.bind(this);
+    /**
+     * Listen for the composed headerPositionClick event fired by ai-chat-header.
+     * Automatically cycles the position so the host app doesn't need to wire it manually.
+     */
+    handleHeaderPositionClick() {
+        this.cyclePosition();
     }
     componentWillLoad() {
         this.checkMobile();
     }
     componentDidLoad() {
-        if (typeof window !== 'undefined') {
-            window.addEventListener('resize', this.checkMobile);
-            if (this.position === 'float') {
-                this.setupDrag();
-            }
+        if (typeof window === 'undefined')
+            return;
+        // Use ResizeObserver for responsive mobile detection instead of window.resize
+        if (typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver = new ResizeObserver(() => {
+                this.checkMobile();
+                this.clampFloatPosition();
+            });
+            this.resizeObserver.observe(this.el);
+        }
+        // Also listen to window resize for viewport changes (e.g. browser resize)
+        window.addEventListener('resize', this.handleWindowResize);
+        if (this.position === 'float') {
+            this.setupDrag();
         }
         this.mutationObserver = new MutationObserver(() => {
             if (this.autoScroll && this.messagesAreaRef) {
@@ -99,9 +132,12 @@ export class ChatContainer {
         }
     }
     disconnectedCallback() {
-        window.removeEventListener('resize', this.checkMobile);
+        if (typeof window !== 'undefined') {
+            window.removeEventListener('resize', this.handleWindowResize);
+        }
         this.el.removeEventListener('headerDragStart', this.dragListener);
         this.mutationObserver?.disconnect();
+        this.resizeObserver?.disconnect();
     }
     /** Programmatically scroll the messages area to the bottom */
     async scrollToBottom() {
@@ -109,11 +145,40 @@ export class ChatContainer {
             this.messagesAreaRef.scrollTop = this.messagesAreaRef.scrollHeight;
         }
     }
+    /**
+     * Cycle to the next valid position based on the current direction.
+     * - RTL: left ↔ float
+     * - LTR: right ↔ float
+     */
+    async cyclePosition() {
+        const docked = this.direction === 'rtl' ? 'left' : 'right';
+        this.position = this.position === 'float' ? docked : 'float';
+        this.positionChange.emit(this.position);
+    }
+    handleWindowResize = () => {
+        this.checkMobile();
+        this.clampFloatPosition();
+    };
     checkMobile() {
         if (typeof window !== 'undefined') {
             this.isMobile = window.innerWidth < 768;
         }
     }
+    /** Re-clamp float position so the panel never ends up off-screen after resize */
+    clampFloatPosition() {
+        if (typeof window === 'undefined' || this.position !== 'float' || !this.containerRef)
+            return;
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+        const w = this.containerRef.offsetWidth;
+        const h = this.containerRef.offsetHeight;
+        let left = parseFloat(this.floatLeft) || 0;
+        let top = parseFloat(this.floatTop) || 0;
+        left = Math.max(0, Math.min(left, vw - w));
+        top = Math.max(0, Math.min(top, vh - h));
+        this.floatLeft = `${left}px`;
+        this.floatTop = `${top}px`;
+    }
     setupDrag() {
         // Remove any existing listener before adding to prevent accumulation
         this.el.removeEventListener('headerDragStart', this.dragListener);
@@ -153,8 +218,14 @@ export class ChatContainer {
         }
         return false;
     }
+    renderSkeleton() {
+        return (h("div", { class: "skeleton-messages", "aria-busy": "true", "aria-label": "Loading conversation" }, h("div", { class: "skeleton-row agent" }, h("div", { class: "skeleton-bubble" }, h("div", { class: "skeleton-line", style: { width: '80%' } }), h("div", { class: "skeleton-line", style: { width: '60%' } }), h("div", { class: "skeleton-line", style: { width: '40%' } }))), h("div", { class: "skeleton-row user" }, h("div", { class: "skeleton-bubble" }, h("div", { class: "skeleton-line", style: { width: '70%' } }))), h("div", { class: "skeleton-row agent" }, h("div", { class: "skeleton-bubble" }, h("div", { class: "skeleton-line", style: { width: '90%' } }), h("div", { class: "skeleton-line", style: { width: '55%' } }))), h("div", { class: "skeleton-row user" }, h("div", { class: "skeleton-bubble" }, h("div", { class: "skeleton-line", style: { width: '50%' } }), h("div", { class: "skeleton-line", style: { width: '35%' } })))));
+    }
+    renderError() {
+        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: 'fb25617bfba35681e5190cec602ad17f8a8e53ef', class: { dark: this.isDark() } }, h("div", { key: '463a07a473470a497212948fa601cd677d1f266b', class: this.getContainerClasses(), style: this.getContainerStyle(), ref: el => (this.containerRef = el) }, this.showWatermark && (h("div", { key: '40c3fa4a496a848950dba73372acacd14b4c5dda', class: "watermark" }, h("ai-icon", { key: '7467301453bce43c8d3eaca7efe83800a9e4bc8b', name: "watermark", size: 133 }))), h("slot", { key: 'c082990d1e7829d5d879a1c176dd0b57a3b3a244', name: "header" }), h("div", { key: '13b9ccd90f1e1e26794c8e780a5e8e89a4de43d2', class: "messages-area", ref: el => (this.messagesAreaRef = el) }, h("slot", { key: '247cb11401e834b41d220515b88d5e202f40e8e8' })), h("slot", { key: '8115183cbe55bc3ba472fed0e368a811e5232b47', name: "footer" }))));
+        return (h(Host, { key: '6290736307488f10a4ed441e2a8e0b3a2e89af05', class: { dark: this.isDark() } }, h("div", { key: '6d6a731d9941457b786c71625243a7dd1e9f11f8', class: this.getContainerClasses(), style: this.getContainerStyle(), ref: el => (this.containerRef = el) }, this.showWatermark && !this.loading && !this.error && (h("div", { key: '0c2ae5b52f8c30bdf356a3c356d52305451cb19e', class: "watermark" }, h("svg", { key: '36076d8dd514f5736050228d22b9a03d5d48ce28', class: "watermark-circle-svg", width: "133", height: "133", viewBox: "0 0 133 133", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: '737a3f3d8b7a0f91120258c292d047f9dc90871c', filter: "url(#wm_circle_shadow)" }, h("circle", { key: 'a59549c879ddaa2a0007c4fd9645c4382b14e73f', cx: "66.415", cy: "66.415", r: "66.415", class: "watermark-circle" })), h("defs", { key: '58d5edc4e05f3dd8a60f7a829b70f154ba85bfc1' }, h("filter", { key: 'd2cb7cb5a84bdf1496b56ec5a0c0c79001040670', id: "wm_circle_shadow", x: "0", y: "0", width: "132.83", height: "135.83", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { key: 'e90404f557fba552a21bd3748ad728470172040f', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feBlend", { key: 'ef5aee167a4973c35f8ffaa8ae4a0487de8266ee', mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), h("feColorMatrix", { key: 'e0869202bc43610b91abce92e85e8e5264cda999', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feOffset", { key: '7bef38d885b93711fce4c0efbb719a83417eeefb', dy: "3" }), h("feGaussianBlur", { key: '053de38388f049be8db7867b99b53d403de934ca', stdDeviation: "3" }), h("feComposite", { key: 'e5f68fbcf0923174a177545bf3364d066a122347', in2: "hardAlpha", operator: "arithmetic", k2: "-1", k3: "1" }), h("feColorMatrix", { key: '62dc924cbdc92ce4adc0ec81be851c1d40e7a5b0', type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" }), h("feBlend", { key: '908299725f9e553c636bd18eab6541c6a7c69fe5', mode: "normal", in2: "shape", result: "effect1_innerShadow" })))), h("svg", { key: '2a6ce2364bfd667c4eba56d859a1326f70a82901', class: "watermark-star-svg", width: "78", height: "78", viewBox: "0 0 78 78", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: 'e2c431ac6bee320c817a7283e6e356edc4667146', filter: "url(#wm_star_shadow)" }, h("path", { key: 'd87d0313e649527f5909ac1b08f7af2979760d79', d: "M38.7421 0C39.5691 0 40.2689 0.286272 40.8414 0.858815C41.414 1.43136 41.7002 2.13113 41.7002 2.95814C41.7002 8.87442 43.1952 14.3772 46.1851 19.4665C49.1115 24.4285 53.0557 28.3727 58.0177 31.299C63.107 34.289 68.6097 35.7839 74.526 35.7839C75.353 35.7839 76.0528 36.0702 76.6254 36.6428C77.1979 37.2153 77.4842 37.9151 77.4842 38.7421C77.4842 39.5691 77.1979 40.2689 76.6254 40.8414C76.0528 41.414 75.353 41.7002 74.526 41.7002C68.6097 41.7002 63.107 43.1952 58.0177 46.1851C53.0557 49.1115 49.1115 53.0557 46.1851 58.0177C43.1952 63.107 41.7002 68.6097 41.7002 74.526C41.7002 75.353 41.414 76.0528 40.8414 76.6254C40.2689 77.1979 39.5691 77.4842 38.7421 77.4842C37.9151 77.4842 37.2153 77.1979 36.6428 76.6254C36.0702 76.0528 35.7839 75.353 35.7839 74.526C35.7839 68.6097 34.289 63.107 31.299 58.0177C28.3727 53.0557 24.4285 49.1115 19.4665 46.1851C14.3772 43.1952 8.87442 41.7002 2.95814 41.7002C2.13113 41.7002 1.43136 41.414 0.858815 40.8414C0.286272 40.2689 0 39.5691 0 38.7421C0 37.9151 0.286272 37.2153 0.858815 36.6428C1.43136 36.0702 2.13113 35.7839 2.95814 35.7839C8.87442 35.7839 14.3772 34.289 19.4665 31.299C24.4285 28.3727 28.3727 24.4285 31.299 19.4665C34.289 14.3772 35.7839 8.87442 35.7839 2.95814C35.7839 2.13113 36.0702 1.43136 36.6428 0.858815C37.2153 0.286272 37.9151 0 38.7421 0Z", class: "watermark-star" })), h("defs", { key: '51e7ef185399e3a10d0b19eb399500be3e5384f8' }, h("filter", { key: '09f52cd1b7084a8af9488bbce05c277fe07012f9', id: "wm_star_shadow", x: "0", y: "0", width: "77.4844", height: "79.4841", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { key: '1b055616d714f824dd38a895a5c1a635fefc4a66', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feBlend", { key: '044cba9d32d0a1d56fc39d318dfc1cdd0fdc0ae7', mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), h("feColorMatrix", { key: '4bf50b36bd6b1ae90d29a95290762ef52dbfff7a', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feOffset", { key: '0988514af2fda03cb2ff43e95c1423137351186f', dy: "2" }), h("feGaussianBlur", { key: 'c96fb451b890e9bda84043dcd699c2a3f59c195c', stdDeviation: "2" }), h("feComposite", { key: '77b2bb3e01eefb08cac5f60a494c2cd15e97db4a', in2: "hardAlpha", operator: "arithmetic", k2: "-1", k3: "1" }), h("feColorMatrix", { key: 'aef785066c732cc5cbc16689f2e57a7df7d18bc5', type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" }), h("feBlend", { key: '292a1d370d268312514f1c8fcee2167159c2d4e9', mode: "normal", in2: "shape", result: "effect1_innerShadow" })))))), h("slot", { key: '009fd561884a5a70e559d865dc1b1d55937d923c', name: "header" }), h("div", { key: 'fde5090720cd70c2b5fe72bcaec95007e7792f4e', class: "messages-area", ref: el => (this.messagesAreaRef = el) }, this.loading ? this.renderSkeleton() : this.error ? this.renderError() : h("slot", null)), h("slot", { key: '838ea2de9f788af2af70568a7882a08645c6b2ac', name: "footer" }))));
     }
     static get is() { return "ai-chat-container"; }
     static get encapsulation() { return "shadow"; }
@@ -192,11 +263,17 @@ export class ChatContainer {
             },
             "position": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
-                    "original": "'left' | 'right' | 'float'",
+                    "original": "ChatPosition",
                     "resolved": "\"float\" | \"left\" | \"right\"",
-                    "references": {}
+                    "references": {
+                        "ChatPosition": {
+                            "location": "local",
+                            "path": "/home/ahmed/Desktop/Salla/Dev/multi-agent/ui-ai-kit/packages/core/src/components/ai-chat-container/ai-chat-container.tsx",
+                            "id": "src/components/ai-chat-container/ai-chat-container.tsx::ChatPosition"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
@@ -206,9 +283,9 @@ export class ChatContainer {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "position",
-                "defaultValue": "'right'"
+                "defaultValue": "'left'"
             },
             "width": {
                 "type": "string",
@@ -309,6 +386,106 @@ export class ChatContainer {
                 "reflect": false,
                 "attribute": "theme",
                 "defaultValue": "'light'"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show skeleton loading state (e.g. while loading conversation history)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "error": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show error state (e.g. failed to load conversation)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error",
+                "defaultValue": "false"
+            },
+            "errorText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Error message text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-text",
+                "defaultValue": "'\u062A\u0639\u0630\u0651\u0631 \u062A\u062D\u0645\u064A\u0644 \u0627\u0644\u0645\u062D\u0627\u062F\u062B\u0629'"
+            },
+            "retryLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Retry button label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "retry-label",
+                "defaultValue": "'\u0625\u0639\u0627\u062F\u0629 \u0627\u0644\u0645\u062D\u0627\u0648\u0644\u0629'"
+            },
+            "direction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'rtl' | 'ltr'",
+                    "resolved": "\"ltr\" | \"rtl\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Layout direction set by the host app.\n- `'rtl'` \u2192 valid docked position is `left`; cycle order: left \u2194 float\n- `'ltr'` \u2192 valid docked position is `right`; cycle order: right \u2194 float"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "direction",
+                "defaultValue": "'rtl'"
             }
         };
     }
@@ -319,6 +496,45 @@ export class ChatContainer {
             "floatTop": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "retryClick",
+                "name": "retryClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the retry button is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "positionChange",
+                "name": "positionChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when the position changes (via cyclePosition or the header button)"
+                },
+                "complexType": {
+                    "original": "ChatPosition",
+                    "resolved": "\"float\" | \"left\" | \"right\"",
+                    "references": {
+                        "ChatPosition": {
+                            "location": "local",
+                            "path": "/home/ahmed/Desktop/Salla/Dev/multi-agent/ui-ai-kit/packages/core/src/components/ai-chat-container/ai-chat-container.tsx",
+                            "id": "src/components/ai-chat-container/ai-chat-container.tsx::ChatPosition"
+                        }
+                    }
+                }
+            }];
+    }
     static get methods() {
         return {
             "scrollToBottom": {
@@ -337,6 +553,28 @@ export class ChatContainer {
                     "text": "Programmatically scroll the messages area to the bottom",
                     "tags": []
                 }
+            },
+            "cyclePosition": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "ChatPosition": {
+                            "location": "local",
+                            "path": "/home/ahmed/Desktop/Salla/Dev/multi-agent/ui-ai-kit/packages/core/src/components/ai-chat-container/ai-chat-container.tsx",
+                            "id": "src/components/ai-chat-container/ai-chat-container.tsx::ChatPosition"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Cycle to the next valid position based on the current direction.\n- RTL: left \u2194 float\n- LTR: right \u2194 float",
+                    "tags": []
+                }
             }
         };
     }
@@ -350,4 +588,13 @@ export class ChatContainer {
                 "methodName": "positionChanged"
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "headerPositionClick",
+                "method": "handleHeaderPositionClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }

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

@@ -1,5 +1,14 @@
 :host {
   display: block;
+  position: relative;
+  z-index: 10;
+}
+
+/* ── Wrapper ────────────────────────────────────────────────────── */
+.header-wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
 }
 
 /* ── Container ──────────────────────────────────────────────────── */
@@ -83,6 +92,10 @@
   gap: 8px;
 }
 
+.content.browser {
+  gap: 8px;
+}
+
 /* ── Dropdown Trigger (agent mode) ──────────────────────────────── */
 .dropdown-trigger {
   display: flex;
@@ -122,6 +135,55 @@
   text-overflow: ellipsis;
 }
 
+/* ── Title Skeleton (loading state) ─────────────────────────────── */
+@keyframes title-shimmer {
+  0%   { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+.title-skeleton {
+  display: inline-block;
+  width: 120px;
+  height: 16px;
+  border-radius: 8px;
+  background: var(--ai-shimmer-gradient, linear-gradient(90deg, rgba(0,0,0,0.06) 25%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.06) 75%));
+  background-size: 200% 100%;
+  animation: title-shimmer 1.6s ease-in-out infinite;
+}
+
+/* ── Browser Title (browser mode) ───────────────────────────────── */
+.browser-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--ai-text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+  line-height: 20px;
+}
+
+/* ── Browser Link Button (browser mode) ─────────────────────────── */
+.browser-link-btn {
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  flex-shrink: 0;
+  color: var(--ai-text-secondary);
+}
+
+.browser-link-btn:focus-visible {
+  outline: 2px solid var(--ai-focus-ring);
+  outline-offset: 2px;
+}
+
 /* ── Avatar & Online Dot (human mode) ──────────────────────────── */
 .avatar-wrapper {
   position: relative;
@@ -226,3 +288,39 @@
 :host([dir='ltr']) .back-btn .icon-wrap {
   transform: scaleX(-1);
 }
+
+/* ── Conversation Dropdown Panel ────────────────────────────────── */
+.conversation-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 20;
+  height: 360px;
+  display: flex;
+  flex-direction: column;
+  background: var(--ai-bg-surface);
+  border-bottom: 1px solid var(--ai-border-light);
+  box-shadow: var(--ai-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08));
+  animation: slideDown 0.2s ease;
+  overflow: hidden;
+}
+
+.conversation-dropdown ai-conversation-list {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}