@salla.sa/ui-ai-kit-core 2.1.0 → 2.2.0

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

@@ -1,6 +1,7 @@
 import { Host, h } from "@stencil/core";
 import { iconRegistry } from "../../utils/icon-registry";
 export class AiChatHeader {
+    el;
     /** Layout variant */
     mode = 'agent';
     /** Agent mode: conversation title */
@@ -16,7 +17,20 @@ export class AiChatHeader {
     isDraggable = false;
     /** Human mode: status indicator variant */
     statusIndicator = 'online';
+    /** Browser mode: page title shown in the header */
+    pageTitle = '';
+    /** Browser mode: the external URL to link to */
+    pageUrl = '';
+    /** Conversation list: items to display in the dropdown panel */
+    conversationItems = [];
+    /** Conversation list: ID of the currently active conversation */
+    conversationActiveId = '';
+    /** Conversation list: show skeleton loading state */
+    conversationLoading = false;
+    /** Show a shimmer skeleton in place of the conversation title (e.g. while loading conversation) */
+    titleLoading = false;
     avatarError = false;
+    dropdownOpen = false;
     /** Cancel / close button */
     closeClick;
     /** Pencil-edit button (agent mode) */
@@ -32,6 +46,17 @@ export class AiChatHeader {
      * Composed + bubbling so ai-chat-container can receive it across shadow roots.
      */
     headerDragStart;
+    /** Open-external button (browser mode) */
+    openExternal;
+    /** Fired when a conversation is selected from the dropdown list */
+    conversationSelect;
+    /** Fired when a conversation delete button is clicked */
+    conversationDelete;
+    handleDocumentClick(event) {
+        if (this.dropdownOpen && !this.el.contains(event.target)) {
+            this.dropdownOpen = false;
+        }
+    }
     renderIcon(name, width, height) {
         const icon = iconRegistry[name];
         if (!icon)
@@ -44,18 +69,39 @@ export class AiChatHeader {
         if (!this.agentAvatar || this.avatarError) {
             return h("div", { class: "avatar-fallback" }, fallbackLetter);
         }
-        return (h("img", { class: "avatar", src: this.agentAvatar, alt: this.agentName, onError: () => { this.avatarError = true; } }));
+        return (h("img", { class: "avatar", src: this.agentAvatar, alt: this.agentName, onError: () => {
+                this.avatarError = true;
+            } }));
     }
     renderDragBtn() {
-        return this.isDraggable && (h("button", { class: "action-btn drag-btn", "aria-label": "\u0633\u062D\u0628 / Drag", onPointerDown: (e) => {
+        return (this.isDraggable && (h("button", { class: "action-btn drag-btn", "aria-label": "\u0633\u062D\u0628 / Drag", onPointerDown: (e) => {
                 e.preventDefault();
                 this.headerDragStart.emit({ clientX: e.clientX, clientY: e.clientY });
-            } }, this.renderIcon('drag', 11, 15)));
+            } }, this.renderIcon('drag', 11, 15))));
+    }
+    handleConversationSelect = (e) => {
+        e.stopPropagation();
+        this.conversationSelect.emit(e.detail);
+        this.dropdownOpen = false;
+    };
+    handleConversationDelete = (e) => {
+        e.stopPropagation();
+        this.conversationDelete.emit(e.detail);
+    };
+    renderConversationDropdown() {
+        if (!this.dropdownOpen || this.mode !== 'agent')
+            return null;
+        return (h("div", { class: "conversation-dropdown" }, h("ai-conversation-list", { items: this.conversationItems, activeId: this.conversationActiveId, loading: this.conversationLoading, onConversationSelect: this.handleConversationSelect, onConversationDelete: this.handleConversationDelete })));
     }
     renderAgentMode() {
         return [
             this.renderDragBtn(),
-            h("div", { class: "content agent dropdown-trigger", role: "button", onClick: () => this.dropdownClick.emit(), "aria-haspopup": "listbox", "aria-expanded": false, "aria-label": `${this.conversation}, افتح قائمة المحادثات` }, h("span", { class: "title" }, this.conversation), h("span", { class: "dropdown-chevron" }, this.renderIcon('chevron-down', 24, 24))),
+            h("div", { class: "content agent dropdown-trigger", role: "button", onClick: () => {
+                    if (this.titleLoading)
+                        return;
+                    this.dropdownOpen = !this.dropdownOpen;
+                    this.dropdownClick.emit();
+                }, "aria-haspopup": "listbox", "aria-expanded": this.dropdownOpen, "aria-label": `${this.conversation}, افتح قائمة المحادثات` }, this.titleLoading ? (h("span", { class: "title-skeleton", "aria-busy": "true", "aria-label": "\u062C\u0627\u0631\u064A \u0627\u0644\u062A\u062D\u0645\u064A\u0644" })) : (h("span", { class: "title" }, this.conversation)), !this.titleLoading && (h("span", { class: `dropdown-chevron${this.dropdownOpen ? ' open' : ''}` }, this.renderIcon('chevron-down', 24, 24)))),
             h("div", { class: "actions" }, h("button", { class: "action-btn", "aria-label": "\u062A\u0639\u062F\u064A\u0644 / Edit", onClick: () => this.editClick.emit() }, this.renderIcon('pencil-edit', 22, 22)), h("button", { class: "action-btn", "aria-label": "\u0627\u0644\u0639\u0631\u0636 / Position", onClick: () => this.positionClick.emit() }, this.renderIcon('hand', 22, 22)), h("button", { class: "action-btn", "aria-label": "\u0625\u063A\u0644\u0627\u0642 / Close", onClick: () => this.closeClick.emit() }, this.renderIcon('cancel', 22, 22))),
         ];
     }
@@ -66,8 +112,15 @@ export class AiChatHeader {
             h("div", { class: "actions" }, h("button", { class: "action-btn", "aria-label": "\u0627\u0644\u0639\u0631\u0636 / Position", onClick: () => this.positionClick.emit() }, this.renderIcon('hand', 22, 22)), h("button", { class: "action-btn", "aria-label": "\u0625\u063A\u0644\u0627\u0642 / Close", onClick: () => this.closeClick.emit() }, this.renderIcon('cancel', 22, 22))),
         ];
     }
+    renderBrowserMode() {
+        return [
+            this.renderDragBtn(),
+            h("div", { class: "content browser" }, h("button", { class: "back-btn", "aria-label": "\u0631\u062C\u0648\u0639 / Back", onClick: () => this.backClick.emit() }, this.renderIcon('arrow-right', 24, 24)), h("span", { class: "browser-title" }, this.pageTitle), h("button", { class: "browser-link-btn", "aria-label": "\u0641\u062A\u062D \u0641\u064A \u0646\u0627\u0641\u0630\u0629 \u062C\u062F\u064A\u062F\u0629 / Open externally", onClick: () => this.openExternal.emit(this.pageUrl) }, this.renderIcon('link', 14, 14))),
+            h("div", { class: "actions" }, h("button", { class: "action-btn", "aria-label": "\u0627\u0644\u0639\u0631\u0636 / Position", onClick: () => this.positionClick.emit() }, this.renderIcon('hand', 22, 22)), h("button", { class: "action-btn", "aria-label": "\u0625\u063A\u0644\u0627\u0642 / Close", onClick: () => this.closeClick.emit() }, this.renderIcon('cancel', 22, 22))),
+        ];
+    }
     render() {
-        return (h(Host, { key: '66ad39b3b123aebf528b675e9b26a3004693a137' }, h("div", { key: '355be9c94e460c995a9fc58484c891c071ed9604', class: "header-container" }, this.mode === 'agent' ? this.renderAgentMode() : this.renderHumanMode())));
+        return (h(Host, { key: '8e1fe67030a0cb1eb94327f093327fb23d4faf01' }, h("div", { key: '14766bd663e5fe027f1a3320bd3f16d79e9feb45', class: "header-wrapper" }, h("div", { key: 'bef30f621ba3b148f4af055347eb707bc8f64b15', class: "header-container" }, this.mode === 'agent' ? this.renderAgentMode() : this.mode === 'human' ? this.renderHumanMode() : this.renderBrowserMode()), this.renderConversationDropdown())));
     }
     static get is() { return "ai-chat-header"; }
     static get encapsulation() { return "shadow"; }
@@ -87,8 +140,8 @@ export class AiChatHeader {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'agent' | 'human'",
-                    "resolved": "\"agent\" | \"human\"",
+                    "original": "'agent' | 'human' | 'browser'",
+                    "resolved": "\"agent\" | \"browser\" | \"human\"",
                     "references": {}
                 },
                 "required": false,
@@ -242,12 +295,138 @@ export class AiChatHeader {
                 "reflect": false,
                 "attribute": "status-indicator",
                 "defaultValue": "'online'"
+            },
+            "pageTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Browser mode: page title shown in the header"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "page-title",
+                "defaultValue": "''"
+            },
+            "pageUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Browser mode: the external URL to link to"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "page-url",
+                "defaultValue": "''"
+            },
+            "conversationItems": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ConversationItem[]",
+                    "resolved": "ConversationItem[]",
+                    "references": {
+                        "ConversationItem": {
+                            "location": "import",
+                            "path": "../ai-conversation-list/ai-conversation-list",
+                            "id": "src/components/ai-conversation-list/ai-conversation-list.tsx::ConversationItem",
+                            "referenceLocation": "ConversationItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Conversation list: items to display in the dropdown panel"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "conversationActiveId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Conversation list: ID of the currently active conversation"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "conversation-active-id",
+                "defaultValue": "''"
+            },
+            "conversationLoading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Conversation list: show skeleton loading state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "conversation-loading",
+                "defaultValue": "false"
+            },
+            "titleLoading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show a shimmer skeleton in place of the conversation title (e.g. while loading conversation)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "title-loading",
+                "defaultValue": "false"
             }
         };
     }
     static get states() {
         return {
-            "avatarError": {}
+            "avatarError": {},
+            "dropdownOpen": {}
         };
     }
     static get events() {
@@ -341,6 +520,61 @@ export class AiChatHeader {
                     "resolved": "{ clientX: number; clientY: number; }",
                     "references": {}
                 }
+            }, {
+                "method": "openExternal",
+                "name": "openExternal",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Open-external button (browser mode)"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "conversationSelect",
+                "name": "conversationSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when a conversation is selected from the dropdown list"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "conversationDelete",
+                "name": "conversationDelete",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when a conversation delete button is clicked"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleDocumentClick",
+                "target": "document",
+                "capture": false,
+                "passive": false
             }];
     }
 }

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

@@ -126,7 +126,13 @@ export class AiChatMessage {
     getRenderedContent() {
         if (!this.content)
             return '';
-        return DOMPurify.sanitize(this.parseMarkdown(this.content), SANITIZE_CONFIG);
+        try {
+            return DOMPurify.sanitize(this.parseMarkdown(this.content), SANITIZE_CONFIG);
+        }
+        catch {
+            // Fallback: render raw text safely if markdown parsing fails
+            return DOMPurify.sanitize(`<p>${this.content.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br>')}</p>`, SANITIZE_CONFIG);
+        }
     }
     getRelativeTime() {
         if (!this.timestamp)
@@ -195,7 +201,7 @@ export class AiChatMessage {
             } })), h("slot", null), showActions && this.renderActionsBar()), (this.agentName || this.timestamp) && (h("div", { class: "agent-info" }, this.agentName && h("span", { class: "agent-info-name" }, this.agentName), this.agentName && this.timestamp && this.renderIcon('eclipse', 10), this.timestamp && h("span", { class: "agent-info-time" }, this.getRelativeTime()))))));
     }
     render() {
-        return h(Host, { key: 'ceb0df75b3fc5ba2bd7494e150e679960707b891' }, this.role === 'user' ? this.renderUserMessage() : this.renderAgentMessage());
+        return h(Host, { key: 'b6fe466c9830e69c3ae6f405daa9e77ef3f75aca' }, this.role === 'user' ? this.renderUserMessage() : this.renderAgentMessage());
     }
     static get is() { return "ai-chat-message"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ai-conversation-list/ai-conversation-list.css

@@ -1,13 +1,17 @@
 :host {
-  display: block;
+  display: flex;
+  flex-direction: column;
   height: 100%;
+  min-height: 0;
+  overflow: hidden;
 }
 
 .conversation-list {
   display: flex;
   flex-direction: column;
   gap: 8px;
-  height: 100%;
+  flex: 1;
+  min-height: 0;
   background: var(--ai-bg-surface);
 }
 
@@ -15,23 +19,28 @@
 
 .list-scroll {
   flex: 1;
+  min-height: 0;
   overflow-y: auto;
   padding: 0 8px 12px;
   scrollbar-width: thin;
-  scrollbar-color: var(--ai-scrollbar-thumb) var(--ai-scrollbar-track);
+  scrollbar-color: var(--ai-scrollbar-thumb) transparent;
 }
 
 .list-scroll::-webkit-scrollbar {
-  width: 4px;
+  width: 3px;
 }
 
 .list-scroll::-webkit-scrollbar-track {
-  background: var(--ai-scrollbar-track);
+  background: transparent;
 }
 
 .list-scroll::-webkit-scrollbar-thumb {
   background: var(--ai-scrollbar-thumb);
-  border-radius: 4px;
+  border-radius: 99px;
+}
+
+.list-scroll::-webkit-scrollbar-thumb:hover {
+  background: var(--ai-scrollbar-thumb-hover);
 }
 
 /* ── Conversation item ─────────────────────────────────── */
@@ -152,6 +161,106 @@
   line-height: 0;
 }
 
+/* ── Empty state ───────────────────────────────────────── */
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 40px 16px;
+  text-align: center;
+}
+
+.empty-state__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+  background: var(--ai-bg-card);
+  color: var(--ai-text-muted);
+  line-height: 0;
+}
+
+.empty-state__icon .icon-wrap {
+  display: inline-flex;
+  align-items: center;
+  line-height: 0;
+}
+
+.empty-state__text {
+  margin: 0;
+  font-size: 13px;
+  color: var(--ai-text-muted);
+  line-height: 1.4;
+}
+
+/* ── Error state ───────────────────────────────────────── */
+
+.error-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 40px 16px;
+  text-align: center;
+}
+
+.error-state__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+  background: var(--ai-status-danger-bg, rgba(239, 68, 68, 0.1));
+  color: var(--ai-status-danger, #ef4444);
+  line-height: 0;
+}
+
+.error-state__icon .icon-wrap {
+  display: inline-flex;
+  align-items: center;
+  line-height: 0;
+}
+
+.error-state__text {
+  margin: 0;
+  font-size: 13px;
+  color: var(--ai-text-muted);
+  line-height: 1.4;
+}
+
+.error-state__retry {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: 4px;
+  padding: 6px 14px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--ai-text-primary);
+  background: var(--ai-bg-card);
+  border: 1px solid var(--ai-border-default);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background 0.15s, box-shadow 0.15s;
+}
+
+.error-state__retry:hover {
+  box-shadow: var(--ai-shadow-sm);
+}
+
+.error-state__retry .icon-wrap {
+  display: inline-flex;
+  align-items: center;
+  line-height: 0;
+}
+
 /* ── Skeleton loading ──────────────────────────────────── */
 
 .skeleton-list {
@@ -170,7 +279,7 @@
 
 .skeleton-line {
   border-radius: 6px;
-  background: var(--ai-shimmer-gradient);
+  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: shimmer 2s linear infinite;
   height: 12px;