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

package/dist/collection/components/ai-agent-error/ai-agent-error.css

@@ -0,0 +1,154 @@
+:host {
+  display: block;
+}
+
+.icon-wrap {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+}
+
+/* ── Card ─────────────────────────────────────────────── */
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.error-card {
+  background: var(--ai-danger-bg);
+  border: 1px solid var(--ai-danger-border);
+  border-radius: 16px;
+  box-shadow: var(--ai-shadow-error);
+  overflow: hidden;
+  animation: fade-in 0.3s ease;
+}
+
+/* ── Body row ─────────────────────────────────────────── */
+
+.error-body {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 16px;
+}
+
+/* ── Error icon ───────────────────────────────────────── */
+
+.error-icon-wrap {
+  width: 36px;
+  height: 36px;
+  border-radius: 9999px;
+  background: var(--ai-bg-card);
+  border: 1px solid var(--ai-danger-border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--ai-danger-text);
+}
+
+/* ── Text content ─────────────────────────────────────── */
+
+.error-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+}
+
+.error-headline-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.error-headline {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--ai-danger-text);
+  line-height: 1.4;
+}
+
+.error-code-badge {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--ai-danger-text);
+  background: var(--ai-bg-card);
+  border: 1px solid var(--ai-danger-border);
+  padding: 1px 7px;
+  border-radius: 9999px;
+  white-space: nowrap;
+  flex-shrink: 0;
+  opacity: 0.85;
+}
+
+.error-message {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 400;
+  color: var(--ai-text-secondary);
+  line-height: 1.5;
+}
+
+/* ── Dismiss button ───────────────────────────────────── */
+
+.dismiss-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  padding: 4px;
+  cursor: pointer;
+  color: var(--ai-danger-text);
+  opacity: 0.6;
+  flex-shrink: 0;
+  border-radius: 6px;
+  transition: opacity 0.15s ease, background 0.15s ease;
+}
+
+.dismiss-btn:hover {
+  opacity: 1;
+  background: var(--ai-hover-overlay);
+}
+
+/* ── Footer / retry ───────────────────────────────────── */
+
+.error-footer {
+  padding: 0 16px 14px;
+}
+
+.retry-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: var(--ai-bg-card);
+  border: 1px solid var(--ai-danger-border);
+  border-radius: 9999px;
+  padding: 6px 14px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--ai-danger-text);
+  cursor: pointer;
+  transition: box-shadow 0.15s ease, opacity 0.15s ease;
+  font-family: inherit;
+}
+
+.retry-btn:hover {
+  box-shadow: var(--ai-shadow-active);
+  opacity: 0.9;
+}
+
+.retry-btn:active {
+  opacity: 0.75;
+}

package/dist/collection/components/ai-agent-error/ai-agent-error.js

@@ -0,0 +1,197 @@
+import { Host, h } from "@stencil/core";
+import { iconRegistry } from "../../utils/icon-registry";
+export class AiAgentError {
+    /** Error card title */
+    headline = 'حدث خطأ أثناء التنفيذ';
+    /** Descriptive error message shown below the title */
+    message = '';
+    /** Optional error code / identifier shown as a small badge */
+    errorCode = '';
+    /** Show a retry button */
+    retryable = true;
+    /** Retry button label */
+    retryLabel = 'إعادة المحاولة';
+    /** Show a dismiss (×) button */
+    dismissible = false;
+    retryClick;
+    dismissClick;
+    renderIcon(name, width, height) {
+        const icon = iconRegistry[name];
+        if (!icon)
+            return null;
+        const svg = `<svg width="${width}" height="${height}" viewBox="${icon.viewBox}" fill="none" xmlns="http://www.w3.org/2000/svg">${icon.content}</svg>`;
+        return h("span", { class: "icon-wrap", innerHTML: svg });
+    }
+    render() {
+        return (h(Host, { key: '938a7d7ea8f1af9c4523eaf2a4944c4d1d7fb6a2' }, h("div", { key: 'ad4f04819ac44e4541405674c903f5e2a2ec5e6e', class: "error-card" }, h("div", { key: 'be863a0a24342ab7c8704e3a9ee0ad2b44633c4d', class: "error-body" }, h("div", { key: '0572130fca12b6d341f0e727a5f7f72f281d5cf7', class: "error-icon-wrap" }, this.renderIcon('warning', 20, 20)), h("div", { key: '53bbccb1da858d0f85c50609c2d6ab79d8bdd3cf', class: "error-content" }, h("div", { key: '76bbe45588ea39a29f72c4267881d39cc1767ad0', class: "error-headline-row" }, h("span", { key: '077fe71637fe1621b5ee532e8634657ff1b5f1ac', class: "error-headline" }, this.headline), this.errorCode && (h("span", { key: '45307d3a8f43c3d17daa44e0df7dc7643a9af7da', class: "error-code-badge" }, this.errorCode))), this.message && (h("p", { key: '6848d16db67c2ced84785e7762b79a1fac9a4d14', class: "error-message" }, this.message))), this.dismissible && (h("button", { key: 'c06661ef9c19dbcb9cb6620c9bec69e2a6a35205', class: "dismiss-btn", "aria-label": "\u0625\u063A\u0644\u0627\u0642", onClick: () => this.dismissClick.emit() }, this.renderIcon('cancel', 16, 16)))), this.retryable && (h("div", { key: '3b1ed90ee58f872a22f790abd0e5c9acd1480a36', class: "error-footer" }, h("button", { key: 'd50096dd81d9098c827f564f5c6e120dafe56dac', class: "retry-btn", onClick: () => this.retryClick.emit() }, this.renderIcon('reload', 16, 16), h("span", { key: '0ef79b60c4de040f57dfd6c7c71fd1d1863baa33' }, this.retryLabel)))))));
+    }
+    static get is() { return "ai-agent-error"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ai-agent-error.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ai-agent-error.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "headline": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Error card title"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "headline",
+                "defaultValue": "'\u062D\u062F\u062B \u062E\u0637\u0623 \u0623\u062B\u0646\u0627\u0621 \u0627\u0644\u062A\u0646\u0641\u064A\u0630'"
+            },
+            "message": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Descriptive error message shown below the title"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "message",
+                "defaultValue": "''"
+            },
+            "errorCode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional error code / identifier shown as a small badge"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-code",
+                "defaultValue": "''"
+            },
+            "retryable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show a retry button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "retryable",
+                "defaultValue": "true"
+            },
+            "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'"
+            },
+            "dismissible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show a dismiss (\u00D7) button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dismissible",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "retryClick",
+                "name": "retryClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "dismissClick",
+                "name": "dismissClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/ai-card/ai-card.js

@@ -5,11 +5,11 @@ export class AiCard {
     /** Remove the shadow */
     noShadow = false;
     render() {
-        return (h(Host, { key: '4805b02b4eee8e01d0233de788a58770a85db2aa' }, h("div", { key: '75576f8a791fc49c3a750d491b0e835d0e5ce8cb', class: {
+        return (h(Host, { key: 'de29e6d9cef8b521fdf6ac6a3f02732b80a8ebfe' }, h("div", { key: 'b6b097e595977af04497bf64e68f3b89854bc710', class: {
                 card: true,
                 'card--no-padding': this.noPadding,
                 'card--no-shadow': this.noShadow,
-            } }, h("slot", { key: 'e16cdb10e803451fdd47006a98656168fe2495f4' }))));
+            } }, h("slot", { key: '4a0af40b21edd47f187c8eaad0d6487575f1a6eb' }))));
     }
     static get is() { return "ai-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -99,8 +99,8 @@
 }
 
 .watermark ai-icon {
-  opacity: 0.8;
-  filter: var(--ai-shadow-watermark);
+  opacity: var(--ai-watermark-opacity, 0.8);
+  filter: var(--ai-watermark-filter, var(--ai-shadow-watermark));
 }
 
 /* ── Mobile ──────────────────────────────────────────────────────────────── */
@@ -133,8 +133,3 @@
   }
 }
 
-/* ── Dark mode watermark tweak ───────────────────────────────────────────── */
-
-:host(.dark) .watermark ai-icon {
-  opacity: 0.6;
-}

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

@@ -143,7 +143,7 @@ export class ChatContainer {
         return false;
     }
     render() {
-        return (h(Host, { key: 'dd656127f6974b6eef12f64c78c072f2c1f92a6a', class: { dark: this.isDark() } }, h("div", { key: '0eb43bc5c8b80e5576146f01998e5279eb860162', class: this.getContainerClasses(), style: this.getContainerStyle(), ref: el => (this.containerRef = el) }, this.showWatermark && (h("div", { key: '363046f0e73ab7aa0209d5f41562031fb34d6c2d', class: "watermark" }, h("ai-icon", { key: '1f3c26ba6a145f8532f6e1a40ea344249e8e5b43', name: "watermark", size: 133 }))), h("slot", { key: '3ec10548660ff721c094be36a15a152fdf6dac78', name: "header" }), h("div", { key: '9babb87041287ac400322b910aa64f7a7b1743a5', class: "messages-area", ref: el => (this.messagesAreaRef = el) }, h("slot", { key: '937c0c0bd675e5a619d46883e7c1f890754aae4b' })), h("slot", { key: '0982b8bc96537c6cecca757926d5849ba386bd69', name: "footer" }))));
+        return (h(Host, { key: 'cd4fad0fb3c4e06b8efd4481aef825f4bfc521a2', class: { dark: this.isDark() } }, h("div", { key: '4ebc198e353d9e78a4f733bdd728d13a3f7ceade', class: this.getContainerClasses(), style: this.getContainerStyle(), ref: el => (this.containerRef = el) }, this.showWatermark && (h("div", { key: '3c67cd62b37489274e0f246194a35d1e26d7ae05', class: "watermark" }, h("ai-icon", { key: 'fd3482b93e53b43f59bd96b995f3ff0472444f05', name: "watermark", size: 133 }))), h("slot", { key: '783c04dafaeecd563c05196620e3b888669614a9', name: "header" }), h("div", { key: 'cd44c7e5ca42e659d29cf74720eaf5c1a4264f4e', class: "messages-area", ref: el => (this.messagesAreaRef = el) }, h("slot", { key: 'f1f61eed5585ad3e4d23c16368ad37cfe1b216be' })), h("slot", { key: 'fecfd1d232a324ab468b69eed15865a699af956a', name: "footer" }))));
     }
     static get is() { return "ai-chat-container"; }
     static get encapsulation() { return "shadow"; }

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

@@ -24,7 +24,7 @@ export class AiChatHeader {
     /** Title / chevron click → open conversation list (agent mode) */
     dropdownClick;
     /** More options button */
-    moreClick;
+    positionClick;
     /** Back-arrow button (human mode) */
     backClick;
     /**
@@ -56,18 +56,18 @@ export class AiChatHeader {
         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: "actions" }, h("button", { class: "action-btn", "aria-label": "\u062A\u0639\u062F\u064A\u0644 / Edit", onClick: () => this.editClick.emit() }, this.renderIcon('pencil-edit', 22, 22)), h("button", { class: "action-btn", "aria-label": "\u0627\u0644\u0645\u0632\u064A\u062F / More", onClick: () => this.moreClick.emit() }, this.renderIcon('ellipsis', 22, 22)), h("button", { class: "action-btn", "aria-label": "\u0625\u063A\u0644\u0627\u0642 / Close", onClick: () => this.closeClick.emit() }, this.renderIcon('cancel', 22, 22))),
+            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))),
         ];
     }
     renderHumanMode() {
         return [
             this.renderDragBtn(),
             h("div", { class: "content human" }, this.showBack && (h("button", { class: "back-btn", "aria-label": "\u0631\u062C\u0648\u0639 / Back", onClick: () => this.backClick.emit() }, this.renderIcon('arrow-right', 24, 24))), h("div", { class: "avatar-wrapper" }, this.renderAvatar(), h("span", { class: `online-dot status-${this.statusIndicator}` }, this.renderIcon('online-dot', 10, 10))), h("div", { class: "text-block" }, h("span", { class: "agent-name" }, this.agentName), this.agentStatus && h("span", { class: "agent-status" }, this.agentStatus))),
-            h("div", { class: "actions" }, h("button", { class: "action-btn", "aria-label": "\u0627\u0644\u0645\u0632\u064A\u062F / More", onClick: () => this.moreClick.emit() }, this.renderIcon('ellipsis', 22, 22)), h("button", { class: "action-btn", "aria-label": "\u0625\u063A\u0644\u0627\u0642 / Close", onClick: () => this.closeClick.emit() }, this.renderIcon('cancel', 22, 22))),
+            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: 'f0b6caccf925bc1388b2680b49e4aec3a44fa353' }, h("div", { key: 'fd144266fb338cbb5d70a3fb1ae9c1b39710ffc5', class: "header-container" }, this.mode === 'agent' ? this.renderAgentMode() : this.renderHumanMode())));
+        return (h(Host, { key: '66ad39b3b123aebf528b675e9b26a3004693a137' }, h("div", { key: '355be9c94e460c995a9fc58484c891c071ed9604', class: "header-container" }, this.mode === 'agent' ? this.renderAgentMode() : this.renderHumanMode())));
     }
     static get is() { return "ai-chat-header"; }
     static get encapsulation() { return "shadow"; }
@@ -297,8 +297,8 @@ export class AiChatHeader {
                     "references": {}
                 }
             }, {
-                "method": "moreClick",
-                "name": "moreClick",
+                "method": "positionClick",
+                "name": "positionClick",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

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

@@ -195,7 +195,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: 'a3da55a7f023469f2538b363ff691674c241227e' }, this.role === 'user' ? this.renderUserMessage() : this.renderAgentMessage());
+        return h(Host, { key: 'ceb0df75b3fc5ba2bd7494e150e679960707b891' }, 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.js

@@ -54,7 +54,7 @@ export class AiConversationList {
     }
     render() {
         const list = this.getItems();
-        return (h(Host, { key: '4baef00dae7b30e73168684fce1dc512c35e8855' }, h("div", { key: '4da38479ba7a29b4f8d95aca4f9c0644361eb486', class: "conversation-list" }, h("div", { key: '671e0f54f45ceae32ce4424c1aa4bc72eed851e0', class: "list-scroll", role: "list" }, this.loading
+        return (h(Host, { key: '8c3d6b60fbd6fbc9e073d5dcada95a04bf6b22eb' }, h("div", { key: 'e11e29b8fb0247617b00fca7ab5d76bd547efc69', class: "conversation-list" }, h("div", { key: 'a24920fd77797e113fe91c96fe033c8301f01d58', class: "list-scroll", role: "list" }, this.loading
             ? this.renderSkeleton()
             : list.map(item => {
                 const isActive = item.id === this.activeId;

package/dist/collection/components/ai-conversation-summary/ai-conversation-summary.js

@@ -2,7 +2,7 @@ import { Host, h } from "@stencil/core";
 import { iconRegistry } from "../../utils/icon-registry";
 export class AiConversationSummary {
     /** Card heading */
-    title = 'ملخص المحادثة';
+    conversation = 'ملخص المحادثة';
     /** Summary body text */
     summary = '';
     /** Total message count shown as a badge */
@@ -17,7 +17,7 @@ export class AiConversationSummary {
         return h("span", { class: "icon-wrap", innerHTML: svg });
     }
     render() {
-        return (h(Host, { key: '86515141f587c12228ed4c6654dedca7b4ca98aa' }, h("div", { key: '92eb74db5756446522ad2ebd822cb156cec25e82', class: "summary-card" }, h("div", { key: 'e524143089223e6f223c29a869d6fe2f8e681f29', class: "summary-header" }, h("div", { key: '33298a6bd249a6a1befa48385fa03c002e13b14d', class: "sparkle-avatar" }, this.renderIcon('sparkle', 14, 14)), h("span", { key: '800084477746e0f5123f6977e45460299b802cdc', class: "summary-title" }, this.title), h("div", { key: 'c1c3d94d0d57fae1601ff3c1de52ce2392d0b0d4', class: "summary-badges" }, this.messageCount > 0 && (h("span", { key: '8252e3dd8054980ed20af95e7148b944c420ce70', class: "badge" }, this.renderIcon('list', 12, 12), this.messageCount)), this.language && (h("span", { key: 'd793ccbf1234050ad17f731050314cc51214de68', class: "badge lang-badge" }, this.language)))), this.summary && (h("p", { key: '0e0a0bcf45b947826a9e417b62fe3e6e3f530cfc', class: "summary-body", ref: el => el && (el.textContent = this.summary) })), h("div", { key: '9897f21508b7f1193ba596d0918d410d31a815b5', class: "summary-slot" }, h("slot", { key: 'be036f1905059a9914f2b6e12a87e4dfa1166194' })))));
+        return (h(Host, { key: '7d24574485e990986d6325bbf6f04b52b65e6a2d' }, h("div", { key: 'd55f22088754c266516c242228028c486ec94796', class: "summary-card" }, h("div", { key: 'b60b8f661a7edbb8a3b133f4a4998eb0ae57371c', class: "summary-header" }, h("div", { key: '1a1ce3df47afcf2b92caf2a8fc4dd2c7baca3370', class: "sparkle-avatar" }, this.renderIcon('sparkle', 14, 14)), h("span", { key: 'fbebe5e290dfa41a607e32f7159778b5ddb6250c', class: "summary-title" }, this.conversation), h("div", { key: '662436df14966ae975116c54dec54bb70ee887f5', class: "summary-badges" }, this.messageCount > 0 && (h("span", { key: 'ad3cc08fc5ba060deccafbebe39c53201d520192', class: "badge" }, this.renderIcon('list', 12, 12), this.messageCount)), this.language && (h("span", { key: 'c1fb40de5cce02913770604508aceae616bf50c4', class: "badge lang-badge" }, this.language)))), this.summary && (h("p", { key: 'd555295af336a739ede2f3453cba567630eaafe1', class: "summary-body", ref: el => el && (el.textContent = this.summary) })), h("div", { key: '4cb6f52194b37a037029da491153624749cd9bef', class: "summary-slot" }, h("slot", { key: '53cbd9e4d53ae8a51e43960369d7a5b45d7d491d' })))));
     }
     static get is() { return "ai-conversation-summary"; }
     static get encapsulation() { return "shadow"; }
@@ -33,7 +33,7 @@ export class AiConversationSummary {
     }
     static get properties() {
         return {
-            "title": {
+            "conversation": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -50,7 +50,7 @@ export class AiConversationSummary {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "title",
+                "attribute": "conversation",
                 "defaultValue": "'\u0645\u0644\u062E\u0635 \u0627\u0644\u0645\u062D\u0627\u062F\u062B\u0629'"
             },
             "summary": {

package/dist/collection/components/ai-link/ai-link.js

@@ -18,7 +18,7 @@ export class AiLink {
     }
     render() {
         const rel = this.rel || (this.target === '_blank' ? 'noopener noreferrer' : undefined);
-        return (h(Host, { key: 'c35f0fd1f17170d32846ebf7066177ca3a6b68f1' }, h("span", { key: '34c01b7fa4122659ca01402c76a67dbca5878ffe', class: "link__label" }, this.label, h("slot", { key: 'd9dd28b4bfba8c1cb5e6f977262942daf504fdc8' })), h("a", { key: 'b4da5e53ee8df0b40417c0d0a80a9647ae0b93d2', class: "link", href: this.href, target: this.target, rel: rel }, this.renderShareIcon())));
+        return (h(Host, { key: 'fbcd3760a7715aafa99b695597570de03c627014' }, h("span", { key: '8583d3c2576ea89dd95ffe57dc3a6c25afa6c9c1', class: "link__label" }, this.label, h("slot", { key: '272e44ad77cc4534b50e3ccdc34aac3fe43dcf02' })), h("a", { key: 'f5527c895f5d309c67da2a3b81accd9b2a263212', class: "link", href: this.href, target: this.target, rel: rel }, this.renderShareIcon())));
     }
     static get is() { return "ai-link"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ai-route-decision/ai-route-decision.js

@@ -31,7 +31,7 @@ export class AiRouteDecision {
         this.routeExpand.emit(this._expanded);
     }
     render() {
-        return (h(Host, { key: 'a22239e1db9982a860bbd6242e5848c3cdfe57ce' }, h("div", { key: '21c447b12e737e77d67b33b10f82f727f10ef4e5', class: `route-pill ${this._expanded ? 'expanded' : ''}` }, h("button", { key: 'fe5c0f167cad2b2fa2549a03a87a32c848efc4c6', class: "route-pill-main", onClick: () => this.handleToggle() }, h("span", { key: 'a1a07c6f8f108e637a43424fa9cdb918e882db3a', class: "route-icon" }, this.renderIcon('route', 14, 14)), h("span", { key: '005662e7b00f47edf185a7806ca268c2b0e9e62a', class: "agent-label" }, this.agentIcon && h("span", { key: '9fbadba81754d515e156bfcfa4821f7e2cefc88b', class: "agent-emoji", "aria-hidden": "true" }, this.agentIcon), this.selectedAgent), this.confidence > 0 && (h("span", { key: 'c2acf259644e0c74264b535b5d34ea5a3b519797', class: "confidence-badge" }, this.confidence, "%")), h("span", { key: 'ac5d1ee27417d85c50a88adb297b493c83aa85bc', class: `expand-icon ${this._expanded ? 'expanded' : ''}` }, this.renderIcon('arrow-right', 12, 12))), this._expanded && (h("div", { key: 'dc1f297cdeede44b4e6b8a4888204eef2200bc72', class: "route-details" }, this.reason && h("p", { key: '7e819d2a6dceeb81d88282e7fcc927b9fe4219c2', class: "reason-text" }, this.reason), this.confidence > 0 && (h("div", { key: 'ec6cbaf221e0679241fc1f13066d542d5b64b9ef', class: "confidence-bar-wrap" }, h("div", { key: '84b3c99aa734308db8d9abd7674eb9f5ee22b17c', class: "confidence-bar", style: { width: `${this.confidence}%` } }))), this.detectedLanguage && (h("div", { key: 'e83127633ec30ea79446a3622f31428ed50ede4d', class: "meta-row" }, this.renderIcon('list', 12, 12), h("span", { key: '1547936eaa529d999b9d0b9dc3421bff2e20937a', class: "lang-chip" }, this.detectedLanguage))))))));
+        return (h(Host, { key: '0dd7087ca8ffd500789fadbb6f33eeeac254348d' }, h("div", { key: '24b40d8747448030454300dcdceafc197232fd19', class: `route-pill ${this._expanded ? 'expanded' : ''}` }, h("button", { key: 'a5eabc6ac356b6f0bd4cce34257420b003f28ede', class: "route-pill-main", onClick: () => this.handleToggle() }, h("span", { key: '27e858ed0b66a7edaa2966ea626bd6fe849c04f4', class: "route-icon" }, this.renderIcon('route', 14, 14)), h("span", { key: '140bf4bcdb42501e446c0805a5011d652b3581e3', class: "agent-label" }, this.agentIcon && h("span", { key: 'ded6e4a619e7c4ae9d0affaf57b4e68d9ba8f2ea', class: "agent-emoji", "aria-hidden": "true" }, this.agentIcon), this.selectedAgent), this.confidence > 0 && (h("span", { key: 'd9f59152d831eb001c01ddffdba52b683b706671', class: "confidence-badge" }, this.confidence, "%")), h("span", { key: '4c290789b2bc8e3eace308bc81d9dad61b44d095', class: `expand-icon ${this._expanded ? 'expanded' : ''}` }, this.renderIcon('arrow-right', 12, 12))), this._expanded && (h("div", { key: 'e87b890275e49320579cc20e9a9a9c6cbb5f7522', class: "route-details" }, this.reason && h("p", { key: '47178ce7ea2d73a9699099185afa0d2002db3b96', class: "reason-text" }, this.reason), this.confidence > 0 && (h("div", { key: 'ad0fa3ba59e968e07bbc467eab1f5a9bba632f34', class: "confidence-bar-wrap" }, h("div", { key: '5c38961fb4b4b68b663cfaf1fddc0d6e35c880f8', class: "confidence-bar", style: { width: `${this.confidence}%` } }))), this.detectedLanguage && (h("div", { key: 'a33864e670395af9a1545d590cff0142094bca7d', class: "meta-row" }, this.renderIcon('list', 12, 12), h("span", { key: '2685871e51bf706709d8ff06beed9f7cb2f414ba', class: "lang-chip" }, this.detectedLanguage))))))));
     }
     static get is() { return "ai-route-decision"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ai-suggestion/ai-suggestion.js

@@ -11,10 +11,10 @@ export class AiSuggestion {
         this.suggestionClick.emit(this.label);
     }
     render() {
-        return (h(Host, { key: 'd8a9ff7279fce63faebd187cb69f0173239518ca' }, h("button", { key: '42bc023c9c48bafc11b388bb80e130255ea830b8', class: {
+        return (h(Host, { key: '6fe8c72e8cb7f039ec86c6e8cecf2f683fa1a815' }, h("button", { key: '8c452cabba9714ef32a6dbd333bd3fe5ee6eabfe', class: {
                 chip: true,
                 'chip--disabled': this.disabled,
-            }, disabled: this.disabled, onClick: () => this.handleClick() }, h("span", { key: '06f0324b97d9f7fb77fb2d4b9dbf0be9b5c4c3f1', class: "chip__label" }, this.label, h("slot", { key: 'ccd0d639f0b2c001088561b029b08691395e9198' })))));
+            }, disabled: this.disabled, onClick: () => this.handleClick() }, h("span", { key: '93b9d1089133e7e03939173cb739ae069c4af022', class: "chip__label" }, this.label, h("slot", { key: 'f9d093ee7f63b578060557e4288d7c91827a2d1e' })))));
     }
     static get is() { return "ai-suggestion"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ai-voice-input/ai-voice-input.css

@@ -119,8 +119,8 @@
 /* Waveform canvas */
 .waveform {
   flex: 1;
+  min-width: 0;
   height: 32px;
-  max-width: 100%;
 }
 
 /* Error message */

package/dist/collection/components/ai-voice-input/ai-voice-input.js

@@ -188,21 +188,15 @@ export class VoiceInput {
         const ctx = canvas.getContext('2d');
         if (!ctx)
             return;
-        const barCount = 100;
         const barWidth = 1;
         const gap = 2;
+        const minHeight = 4;
         const bufferLength = this.analyserRef.frequencyBinCount;
         const dataArray = new Uint8Array(bufferLength);
-        const binsPerBar = Math.max(1, Math.floor(bufferLength / barCount));
-        const minHeight = 4;
         // Resolve waveform color from prop → CSS var → fallback
         const resolvedColor = this.waveformColor ||
             getComputedStyle(this.el).getPropertyValue('--ai-waveform-color').trim() ||
             '#9ca3af';
-        // Initialize lerp state
-        if (this.prevHeights.length !== barCount) {
-            this.prevHeights = new Array(barCount).fill(minHeight);
-        }
         const drawRoundRect = (x, y, w, h, r) => {
             ctx.beginPath();
             if (typeof ctx.roundRect === 'function') {
@@ -227,6 +221,18 @@ export class VoiceInput {
             if (this.state !== 'recording')
                 return;
             this.animationFrameId = requestAnimationFrame(draw);
+            // Sync canvas buffer to actual rendered size so it never overflows
+            const renderedWidth = canvas.offsetWidth;
+            if (renderedWidth > 0 && canvas.width !== renderedWidth) {
+                canvas.width = renderedWidth;
+            }
+            // Recompute barCount each frame based on actual canvas width
+            const barCount = Math.min(100, Math.floor(canvas.width / (barWidth + gap)));
+            const binsPerBar = Math.max(1, Math.floor(bufferLength / barCount));
+            // Re-initialize lerp state when barCount changes
+            if (this.prevHeights.length !== barCount) {
+                this.prevHeights = new Array(barCount).fill(minHeight);
+            }
             this.analyserRef.getByteFrequencyData(dataArray);
             ctx.clearRect(0, 0, canvas.width, canvas.height);
             const centerY = canvas.height / 2;
@@ -263,7 +269,7 @@ export class VoiceInput {
     };
     render() {
         const remaining = MAX_RECORDING_TIME - this.recordingDuration;
-        return (h(Host, { key: 'ed98f3466e7ffb3855ad00f3a6963d14e9e14952' }, h("div", { key: 'babc46a00e425becd642e2f929c21f4771fa7253', class: "wrapper" }, h("div", { key: 'ae9bb1c3236a0c326d1c31ccec06132aa765a30d', class: `glow${this.state === 'recording' ? ' visible' : ''}`, "aria-hidden": "true" }), h("div", { key: 'd5b03673b6d078e153255a5ca1d91b366442ff19', class: "input-container" }, this.state === 'idle' ? (h("div", { class: "recording-row" }, h("button", { type: "button", class: "submit-button", onClick: this.startRecording, disabled: this.disabled, "aria-label": "Start recording" }, h("ai-icon", { name: "mic", size: 16 })), this.error && (h("div", { class: "error-message", role: "alert" }, this.error)))) : (h("div", { class: "recording-row" }, h("button", { type: "button", class: "cancel-button", onClick: this.cancelRecording, "aria-label": "Cancel" }, h("ai-icon", { name: "cancel", size: 14 })), h("div", { class: `timer${remaining <= 5 ? ' warning' : ''}` }, this.formatDuration(this.recordingDuration)), this.showWaveform && h("canvas", { ref: el => (this.canvasRef = el), class: "waveform", width: "260", height: "32" }), h("button", { type: "button", class: `submit-button${this.submitPulse ? ' pulse' : ''}`, onClick: this.stopRecording, "aria-label": "Send" }, h("ai-icon", { name: "arrow-up", size: 14 }))))))));
+        return (h(Host, { key: '8af076ad1ec6bf3ed6a09bb06e03baab91e1bed4' }, h("div", { key: 'f0ccb0576accd8f6ab47db2b06dd426ab7606c02', class: "wrapper" }, h("div", { key: 'c95052b95e0f859c406bdeb0991b87cb25b68f9f', class: `glow${this.state === 'recording' ? ' visible' : ''}`, "aria-hidden": "true" }), h("div", { key: '56ab65197d34e2f39c1b73a407561c65f40996f6', class: "input-container" }, this.state === 'idle' ? (h("div", { class: "recording-row" }, h("button", { type: "button", class: "submit-button", onClick: this.startRecording, disabled: this.disabled, "aria-label": "Start recording" }, h("ai-icon", { name: "mic", size: 16 })), this.error && (h("div", { class: "error-message", role: "alert" }, this.error)))) : (h("div", { class: "recording-row" }, h("button", { type: "button", class: "cancel-button", onClick: this.cancelRecording, "aria-label": "Cancel" }, h("ai-icon", { name: "cancel", size: 14 })), h("div", { class: `timer${remaining <= 5 ? ' warning' : ''}` }, this.formatDuration(this.recordingDuration)), this.showWaveform && h("canvas", { ref: el => (this.canvasRef = el), class: "waveform", height: "32" }), h("button", { type: "button", class: `submit-button${this.submitPulse ? ' pulse' : ''}`, onClick: this.stopRecording, "aria-label": "Send" }, h("ai-icon", { name: "arrow-up", size: 14 }))))))));
     }
     static get is() { return "ai-voice-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/components/ai-agent-error.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface AiAgentError extends Components.AiAgentError, HTMLElement {}
+export const AiAgentError: {
+    prototype: AiAgentError;
+    new (): AiAgentError;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ai-agent-error.js

@@ -0,0 +1 @@
+import{p as e,t as r,H as a,c as i,h as s,d as t}from"./p-CAnlgwx0.js";import{i as o}from"./p-SJZ6Ujn9.js";const d=e(class extends a{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.retryClick=i(this,"retryClick"),this.dismissClick=i(this,"dismissClick")}headline="حدث خطأ أثناء التنفيذ";message="";errorCode="";retryable=!0;retryLabel="إعادة المحاولة";dismissible=!1;retryClick;dismissClick;renderIcon(e,r,a){const i=o[e];return i?s("span",{class:"icon-wrap",innerHTML:`<svg width="${r}" height="${a}" viewBox="${i.viewBox}" fill="none" xmlns="http://www.w3.org/2000/svg">${i.content}</svg>`}):null}render(){return s(t,{key:"938a7d7ea8f1af9c4523eaf2a4944c4d1d7fb6a2"},s("div",{key:"ad4f04819ac44e4541405674c903f5e2a2ec5e6e",class:"error-card"},s("div",{key:"be863a0a24342ab7c8704e3a9ee0ad2b44633c4d",class:"error-body"},s("div",{key:"0572130fca12b6d341f0e727a5f7f72f281d5cf7",class:"error-icon-wrap"},this.renderIcon("warning",20,20)),s("div",{key:"53bbccb1da858d0f85c50609c2d6ab79d8bdd3cf",class:"error-content"},s("div",{key:"76bbe45588ea39a29f72c4267881d39cc1767ad0",class:"error-headline-row"},s("span",{key:"077fe71637fe1621b5ee532e8634657ff1b5f1ac",class:"error-headline"},this.headline),this.errorCode&&s("span",{key:"45307d3a8f43c3d17daa44e0df7dc7643a9af7da",class:"error-code-badge"},this.errorCode)),this.message&&s("p",{key:"6848d16db67c2ced84785e7762b79a1fac9a4d14",class:"error-message"},this.message)),this.dismissible&&s("button",{key:"c06661ef9c19dbcb9cb6620c9bec69e2a6a35205",class:"dismiss-btn","aria-label":"إغلاق",onClick:()=>this.dismissClick.emit()},this.renderIcon("cancel",16,16))),this.retryable&&s("div",{key:"3b1ed90ee58f872a22f790abd0e5c9acd1480a36",class:"error-footer"},s("button",{key:"d50096dd81d9098c827f564f5c6e120dafe56dac",class:"retry-btn",onClick:()=>this.retryClick.emit()},this.renderIcon("reload",16,16),s("span",{key:"0ef79b60c4de040f57dfd6c7c71fd1d1863baa33"},this.retryLabel)))))}static get style(){return":host{display:block}.icon-wrap{display:inline-flex;align-items:center;justify-content:center;line-height:0}@keyframes fade-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.error-card{background:var(--ai-danger-bg);border:1px solid var(--ai-danger-border);border-radius:16px;box-shadow:var(--ai-shadow-error);overflow:hidden;animation:fade-in 0.3s ease}.error-body{display:flex;align-items:flex-start;gap:12px;padding:16px}.error-icon-wrap{width:36px;height:36px;border-radius:9999px;background:var(--ai-bg-card);border:1px solid var(--ai-danger-border);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--ai-danger-text)}.error-content{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}.error-headline-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.error-headline{font-size:14px;font-weight:600;color:var(--ai-danger-text);line-height:1.4}.error-code-badge{font-size:11px;font-weight:500;color:var(--ai-danger-text);background:var(--ai-bg-card);border:1px solid var(--ai-danger-border);padding:1px 7px;border-radius:9999px;white-space:nowrap;flex-shrink:0;opacity:0.85}.error-message{margin:0;font-size:13px;font-weight:400;color:var(--ai-text-secondary);line-height:1.5}.dismiss-btn{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:4px;cursor:pointer;color:var(--ai-danger-text);opacity:0.6;flex-shrink:0;border-radius:6px;transition:opacity 0.15s ease, background 0.15s ease}.dismiss-btn:hover{opacity:1;background:var(--ai-hover-overlay)}.error-footer{padding:0 16px 14px}.retry-btn{display:inline-flex;align-items:center;gap:6px;background:var(--ai-bg-card);border:1px solid var(--ai-danger-border);border-radius:9999px;padding:6px 14px;font-size:13px;font-weight:500;color:var(--ai-danger-text);cursor:pointer;transition:box-shadow 0.15s ease, opacity 0.15s ease;font-family:inherit}.retry-btn:hover{box-shadow:var(--ai-shadow-active);opacity:0.9}.retry-btn:active{opacity:0.75}"}},[513,"ai-agent-error",{headline:[1],message:[1],errorCode:[1,"error-code"],retryable:[4],retryLabel:[1,"retry-label"],dismissible:[4]}]),n=d,c=function(){"undefined"!=typeof customElements&&["ai-agent-error"].forEach((e=>{"ai-agent-error"===e&&(customElements.get(r(e))||customElements.define(r(e),d))}))};export{n as AiAgentError,c as defineCustomElement}