@salla.sa/ui-ai-kit-core 1.1.0 → 2.0.0

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

@@ -0,0 +1,176 @@
+import { Host, h } from "@stencil/core";
+import { iconRegistry } from "../../utils/icon-registry";
+export class AiConversationList {
+    /** JSON array of ConversationItem */
+    items = '[]';
+    /** ID of the currently active conversation */
+    activeId = '';
+    /** Show skeleton loading state */
+    loading = false;
+    conversationSelect;
+    conversationDelete;
+    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 });
+    }
+    getItems() {
+        try {
+            return JSON.parse(this.items) || [];
+        }
+        catch {
+            return [];
+        }
+    }
+    formatRelativeTime(timestamp) {
+        try {
+            const date = new Date(timestamp);
+            const diffMs = Date.now() - date.getTime();
+            const diffMin = Math.floor(diffMs / 60000);
+            const diffHour = Math.floor(diffMin / 60);
+            const diffDay = Math.floor(diffHour / 24);
+            const lang = (typeof document !== 'undefined' && document.documentElement.lang) || 'ar';
+            const rtf = new Intl.RelativeTimeFormat(lang, { numeric: 'auto' });
+            if (diffMin < 1)
+                return rtf.format(0, 'second');
+            if (diffMin < 60)
+                return rtf.format(-diffMin, 'minute');
+            if (diffHour < 24)
+                return rtf.format(-diffHour, 'hour');
+            return rtf.format(-diffDay, 'day');
+        }
+        catch {
+            return '';
+        }
+    }
+    renderRatingDots(rating) {
+        const total = 5;
+        return (h("div", { class: "rating-dots", "aria-label": rating ? `تقييم ${rating} من 5` : undefined }, Array.from({ length: total }, (_, i) => (h("span", { class: `rating-dot ${i < (rating ?? 0) ? 'rating-dot--filled' : ''}` })))));
+    }
+    renderSkeleton() {
+        return (h("div", { class: "skeleton-list" }, [1, 2, 3, 4].map(i => (h("div", { key: i, class: "skeleton-item" }, h("div", { class: "skeleton-line skeleton-line--title" }), h("div", { class: "skeleton-line skeleton-line--preview" }), h("div", { class: "skeleton-line skeleton-line--meta" }))))));
+    }
+    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
+            ? this.renderSkeleton()
+            : list.map(item => {
+                const isActive = item.id === this.activeId;
+                return (h("div", { key: item.id, class: { 'conv-item': true, 'conv-item--active': isActive }, role: "listitem", "aria-current": isActive ? 'true' : undefined, onClick: () => this.conversationSelect.emit(item.id) }, h("div", { class: "conv-item__body" }, h("p", { class: "conv-item__title" }, item.title), h("p", { class: "conv-item__preview" }, item.preview), h("div", { class: "conv-item__meta" }, h("span", { class: "conv-item__time" }, this.formatRelativeTime(item.timestamp)), item.rating != null && this.renderRatingDots(item.rating))), h("button", { class: "delete-btn", "aria-label": "\u062D\u0630\u0641 \u0627\u0644\u0645\u062D\u0627\u062F\u062B\u0629", onClick: e => {
+                        e.stopPropagation();
+                        this.conversationDelete.emit(item.id);
+                    } }, this.renderIcon('cancel', 14, 14))));
+            })))));
+    }
+    static get is() { return "ai-conversation-list"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ai-conversation-list.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ai-conversation-list.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "items": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "JSON array of ConversationItem"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "items",
+                "defaultValue": "'[]'"
+            },
+            "activeId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "ID of the currently active conversation"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "active-id",
+                "defaultValue": "''"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show skeleton loading state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "conversationSelect",
+                "name": "conversationSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "conversationDelete",
+                "name": "conversationDelete",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+}

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

@@ -0,0 +1,103 @@
+:host {
+  display: block;
+}
+
+/* ── Icon wrapper ───────────────────────────────────────── */
+.icon-wrap {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+}
+
+/* ── Card shell ─────────────────────────────────────────── */
+.summary-card {
+  background: var(--ai-bg-card);
+  border: 1px solid var(--ai-border-default);
+  border-radius: 16px;
+  box-shadow: var(--ai-shadow-sm);
+  overflow: hidden;
+  animation: fade-in 0.3s ease;
+}
+
+@keyframes fade-in {
+  from { opacity: 0; transform: translateY(4px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+/* ── Header ─────────────────────────────────────────────── */
+.summary-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--ai-border-default);
+}
+
+.sparkle-avatar {
+  width: 24px;
+  height: 24px;
+  border-radius: 9999px;
+  background: var(--ai-bg-surface);
+  box-shadow: var(--ai-shadow-inner);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--ai-amber);
+}
+
+.summary-title {
+  font-size: 15px;
+  font-weight: 500;
+  color: var(--ai-text-primary);
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ── Badges ─────────────────────────────────────────────── */
+.summary-badges {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--ai-accent-dark);
+  background: var(--ai-accent-bg);
+  padding: 2px 8px;
+  border-radius: 9999px;
+  white-space: nowrap;
+}
+
+.lang-badge {
+  color: var(--ai-text-secondary);
+  background: var(--ai-bg-surface);
+}
+
+/* ── Summary body ───────────────────────────────────────── */
+.summary-body {
+  margin: 0;
+  padding: 12px 16px;
+  font-size: 14px;
+  color: var(--ai-text-secondary);
+  line-height: 1.6;
+  border-bottom: 1px solid var(--ai-border-default);
+}
+
+/* ── Slot (ai-rating) ───────────────────────────────────── */
+.summary-slot {
+  padding: 12px 16px;
+}
+
+.summary-slot:empty {
+  display: none;
+}

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

@@ -0,0 +1,118 @@
+import { Host, h } from "@stencil/core";
+import { iconRegistry } from "../../utils/icon-registry";
+export class AiConversationSummary {
+    /** Card heading */
+    conversation = 'ملخص المحادثة';
+    /** Summary body text */
+    summary = '';
+    /** Total message count shown as a badge */
+    messageCount = 0;
+    /** Conversation language label */
+    language = '';
+    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: 'ba825419953fd661993da1d66225739ebef76d74' }, h("div", { key: 'fe04fdadafde04a068c26b312f806d072d8d1bf7', class: "summary-card" }, h("div", { key: '4f3ec735cb2ac9dcd6a2f9692e1e4969a39a0131', class: "summary-header" }, h("div", { key: '4ba618456b44073d8ac93d79c29818fb9252b822', class: "sparkle-avatar" }, this.renderIcon('sparkle', 14, 14)), h("span", { key: 'bf6d22cfc8c5fc40b0199f46b36fcaceca8dc944', class: "summary-title" }, this.conversation), h("div", { key: '2a96497dcaa02da9e6f8a2bdcd3ec9f0e2f78b57', class: "summary-badges" }, this.messageCount > 0 && (h("span", { key: '679c9d24f8d34fc0d5b4dfe0c7ef1f5564c7eff9', class: "badge" }, this.renderIcon('list', 12, 12), this.messageCount)), this.language && (h("span", { key: '8a0f13ed6d7ec584ed22c9316af2758cb1ea5b24', class: "badge lang-badge" }, this.language)))), this.summary && (h("p", { key: '5a51b1b00c35daf289690c526de3525c9de40f7e', class: "summary-body", ref: el => el && (el.textContent = this.summary) })), h("div", { key: 'ccbb381d21d7c3e6ac8ebddc4a9a3ed26e1aa874', class: "summary-slot" }, h("slot", { key: '58a86a50dcef6c5d2534e664d309c194eb5c89df' })))));
+    }
+    static get is() { return "ai-conversation-summary"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ai-conversation-summary.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ai-conversation-summary.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "conversation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Card heading"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "conversation",
+                "defaultValue": "'\u0645\u0644\u062E\u0635 \u0627\u0644\u0645\u062D\u0627\u062F\u062B\u0629'"
+            },
+            "summary": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Summary body text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "summary",
+                "defaultValue": "''"
+            },
+            "messageCount": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Total message count shown as a badge"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "message-count",
+                "defaultValue": "0"
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Conversation language label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "language",
+                "defaultValue": "''"
+            }
+        };
+    }
+}

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

@@ -30,7 +30,7 @@ export class AiIcon {
                 "mutable": false,
                 "complexType": {
                     "original": "IconName",
-                    "resolved": "\"arrow-right\" | \"arrow-up\" | \"cancel\" | \"check\" | \"chevron-down\" | \"copy\" | \"drag\" | \"eclipse\" | \"hand\" | \"mic\" | \"online-dot\" | \"pencil-edit\" | \"reload\" | \"send\" | \"share\" | \"sparkle\" | \"thumbs-down\" | \"thumbs-up\" | \"watermark\"",
+                    "resolved": "\"arrow-right\" | \"arrow-up\" | \"cancel\" | \"check\" | \"check-circle\" | \"chevron-down\" | \"copy\" | \"drag\" | \"eclipse\" | \"ellipsis\" | \"hand\" | \"list\" | \"mic\" | \"online-dot\" | \"pencil-edit\" | \"reload\" | \"route\" | \"send\" | \"share\" | \"sparkle\" | \"thumbs-down\" | \"thumbs-up\" | \"warning\" | \"watermark\" | \"wifi-off\"",
                     "references": {
                         "IconName": {
                             "location": "import",

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

@@ -1,7 +1,5 @@
 /* ─── Custom Properties ──────────────────────────────────────────────────── */
 :host {
-  --ai-link-color: var(--ai-accent-dark);
-  --ai-link-color-hover: var(--ai-accent-dark);
   --ai-link-font-size: 14px;
   --ai-link-font-weight: 700;
   --ai-link-line-height: 20px;
@@ -11,8 +9,6 @@
   display: flex;
   align-items: center;
   gap: var(--ai-link-gap);
-  direction: rtl;
-  font-family: var(--ai-font-family, 'PingARLT', sans-serif);
 }
 
 /* ─── Anchor ─────────────────────────────────────────────────────────────── */
@@ -21,7 +17,7 @@
   align-items: center;
   justify-content: flex-end;
   gap: var(--ai-link-gap);
-  color: var(--ai-link-color);
+  color: var(--ai-accent-dark);
   font-size: var(--ai-link-font-size);
   font-weight: var(--ai-link-font-weight);
   font-family: inherit;
@@ -34,7 +30,7 @@
 }
 
 .link:hover {
-  color: var(--ai-link-color-hover);
+  color: var(--ai-accent-dark);
   text-decoration: underline;
 }
 
@@ -57,6 +53,6 @@
 
 /* ─── Label ──────────────────────────────────────────────────────────────── */
 .link__label {
-  color: var(--ai-link-color);
+  color: var(--ai-accent-dark);
   font-weight: bold;
 }

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: '58a742b11ef7dcc1094031e804be6032311cea9d' }, h("span", { key: 'bf45468deb328c2d8ed70ac299d36968c16ababe', class: "link__label" }, this.label, h("slot", { key: 'bd43bc12d120ab806c895922ede0a08d4ec2f882' })), h("a", { key: 'b7c75a59bf18b1f1dc2e713b9e78c045afaa82e2', class: "link", href: this.href, target: this.target, rel: rel }, this.renderShareIcon())));
+        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())));
     }
     static get is() { return "ai-link"; }
     static get encapsulation() { return "shadow"; }