npm - @salla.sa/ui-ai-kit-core - Versions diffs - 1.1.0 → 2.0.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (147) hide show

package/dist/esm/ai-conversation-list.entry.js ADDED Viewed

@@ -0,0 +1,78 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-B0yIzgh4.js';
+import { i as iconRegistry } from './icon-registry-SJZ6Ujn9.js';
+const aiConversationListCss = () => `:host{display:block;height:100%}.conversation-list{display:flex;flex-direction:column;gap:8px;height:100%;background:var(--ai-bg-surface)}.list-scroll{flex:1;overflow-y:auto;padding:0 8px 12px;scrollbar-width:thin;scrollbar-color:var(--ai-scrollbar-thumb) var(--ai-scrollbar-track)}.list-scroll::-webkit-scrollbar{width:4px}.list-scroll::-webkit-scrollbar-track{background:var(--ai-scrollbar-track)}.list-scroll::-webkit-scrollbar-thumb{background:var(--ai-scrollbar-thumb);border-radius:4px}.conv-item{display:flex;align-items:flex-start;gap:6px;margin-top:6px;padding:10px 10px 10px 6px;border-radius:10px;cursor:pointer;transition:background 0.15s;position:relative}.conv-item:hover{background:var(--ai-bg-card)}.conv-item--active{background:var(--ai-bg-card);box-shadow:var(--ai-shadow-sm)}.conv-item__body{flex:1;min-width:0}.conv-item__title{margin:0 0 3px;font-size:13px;font-weight:600;color:var(--ai-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.conv-item__preview{margin:0 0 5px;font-size:12px;color:var(--ai-text-muted);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.conv-item__meta{display:flex;align-items:center;gap:8px}.conv-item__time{font-size:11px;color:var(--ai-text-muted);flex-shrink:0}.rating-dots{display:flex;align-items:center;gap:3px}.rating-dot{width:6px;height:6px;border-radius:50%;background:var(--ai-border-default);transition:background 0.15s}.rating-dot--filled{background:var(--ai-accent-warning, #ffaf44)}.delete-btn{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;background:transparent;border:none;border-radius:6px;cursor:pointer;color:var(--ai-text-muted);opacity:0;transition:opacity 0.15s, background 0.15s, color 0.15s;margin-block-start:2px}.conv-item:hover .delete-btn,.conv-item--active .delete-btn{opacity:1}.delete-btn:hover{background:var(--ai-status-danger-bg, rgba(239, 68, 68, 0.1));color:var(--ai-status-danger, #ef4444)}.delete-btn .icon-wrap{display:inline-flex;align-items:center;line-height:0}.skeleton-list{display:flex;flex-direction:column;gap:4px}.skeleton-item{padding:10px;border-radius:10px;display:flex;flex-direction:column;gap:6px}.skeleton-line{border-radius:6px;background:var(--ai-shimmer-gradient);background-size:200% 100%;animation:shimmer 2s linear infinite;height:12px}.skeleton-line--title{width:65%;height:13px}.skeleton-line--preview{width:100%}.skeleton-line--meta{width:35%;height:10px}@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}`;
+const AiConversationList = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.conversationSelect = createEvent(this, "conversationSelect");
+        this.conversationDelete = createEvent(this, "conversationDelete");
+    }
+    /** 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))));
+            })))));
+    }
+};
+AiConversationList.style = aiConversationListCss();
+export { AiConversationList as ai_conversation_list };

package/dist/esm/ai-conversation-summary.entry.js ADDED Viewed

@@ -0,0 +1,31 @@
+import { r as registerInstance, h, H as Host } from './index-B0yIzgh4.js';
+import { i as iconRegistry } from './icon-registry-SJZ6Ujn9.js';
+const aiConversationSummaryCss = () => `:host{display:block}.icon-wrap{display:inline-flex;align-items:center;justify-content:center;line-height:0}.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)}}.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}.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{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)}.summary-slot{padding:12px 16px}.summary-slot:empty{display:none}`;
+const AiConversationSummary = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** 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' })))));
+    }
+};
+AiConversationSummary.style = aiConversationSummaryCss();
+export { AiConversationSummary as ai_conversation_summary };

package/dist/esm/ai-icon.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, H as Host } from './index-7hrZ8FOQ.js';
-import { i as iconRegistry } from './icon-registry-DYv5ef4M.js';
+import { r as registerInstance, h, H as Host } from './index-B0yIzgh4.js';
+import { i as iconRegistry } from './icon-registry-SJZ6Ujn9.js';
 const aiIconCss = () => `:host{display:inline-flex;align-items:center;justify-content:center}svg{display:block}`;

package/dist/esm/ai-link.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
-import { r as registerInstance, h, H as Host } from './index-7hrZ8FOQ.js';
-import { i as iconRegistry } from './icon-registry-DYv5ef4M.js';
+import { r as registerInstance, h, H as Host } from './index-B0yIzgh4.js';
+import { i as iconRegistry } from './icon-registry-SJZ6Ujn9.js';
-const aiLinkCss = () => `: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;--ai-link-gap:4px;--ai-link-icon-size:16px;display:flex;align-items:center;gap:var(--ai-link-gap);direction:rtl;font-family:var(--ai-font-family, 'PingARLT', sans-serif)}.link{display:inline-flex;align-items:center;justify-content:flex-end;gap:var(--ai-link-gap);color:var(--ai-link-color);font-size:var(--ai-link-font-size);font-weight:var(--ai-link-font-weight);font-family:inherit;line-height:var(--ai-link-line-height);text-decoration:none;white-space:nowrap;cursor:pointer;transition:color 0.15s ease;outline:none}.link:hover{color:var(--ai-link-color-hover);text-decoration:underline}.link:focus-visible{outline:2px solid var(--ai-accent);outline-offset:2px;border-radius:4px}.link__icon{display:inline-flex;align-items:center;justify-content:center;width:var(--ai-link-icon-size);height:var(--ai-link-icon-size);flex-shrink:0;line-height:0}.link__label{color:var(--ai-link-color);font-weight:bold}`;
+const aiLinkCss = () => `:host{--ai-link-font-size:14px;--ai-link-font-weight:700;--ai-link-line-height:20px;--ai-link-gap:4px;--ai-link-icon-size:16px;display:flex;align-items:center;gap:var(--ai-link-gap)}.link{display:inline-flex;align-items:center;justify-content:flex-end;gap:var(--ai-link-gap);color:var(--ai-accent-dark);font-size:var(--ai-link-font-size);font-weight:var(--ai-link-font-weight);font-family:inherit;line-height:var(--ai-link-line-height);text-decoration:none;white-space:nowrap;cursor:pointer;transition:color 0.15s ease;outline:none}.link:hover{color:var(--ai-accent-dark);text-decoration:underline}.link:focus-visible{outline:2px solid var(--ai-accent);outline-offset:2px;border-radius:4px}.link__icon{display:inline-flex;align-items:center;justify-content:center;width:var(--ai-link-icon-size);height:var(--ai-link-icon-size);flex-shrink:0;line-height:0}.link__label{color:var(--ai-accent-dark);font-weight:bold}`;
 const AiLink = class {
     constructor(hostRef) {
@@ -24,7 +24,7 @@ const AiLink = class {
     }
     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())));
     }
 };
 AiLink.style = aiLinkCss();

package/dist/esm/ai-loading.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-7hrZ8FOQ.js';
-import { i as iconRegistry } from './icon-registry-DYv5ef4M.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-B0yIzgh4.js';
+import { i as iconRegistry } from './icon-registry-SJZ6Ujn9.js';
-const aiLoadingCss = () => `:host{display:block;direction:rtl}.icon-wrap{display:inline-flex;align-items:center;justify-content:center;line-height:0}.sparkle-avatar{width:24px;height:24px;border-radius:9999px;background:var(--ai-bg-card, #FCFCFC);box-shadow:inset 0px 0px 3px 1px rgba(18, 18, 23, 0.06);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--ai-amber)}.thinking-row{display:inline-flex;align-items:center;gap:8px;flex-direction:row}@keyframes shimmer{0%{background-position:200% center}100%{background-position:-200% center}}.shimmer-text{font-size:14px;font-weight:400;line-height:1.5;background:var(--ai-glow-gradient, linear-gradient(90deg, #737373 0%, #c5c5c5 50%, #737373 100%));background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:shimmer 2s linear infinite}.steps-card{background:var(--ai-bg-card, #ffffff);border:1px solid var(--ai-border-default, #eeeeee);border-radius:16px;box-shadow:0px 1px 2px 0px rgba(18, 18, 23, 0.05);overflow:hidden}.steps-header{padding:16px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--ai-border-default, #eeeeee)}.steps-header.collapsible{cursor:pointer;user-select:none}.steps-header-center{flex:1;display:flex;align-items:center;gap:8px;min-width:0}.steps-title{font-size:16px;font-weight:500;color:var(--ai-text-primary, #333333);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.progress-badge{font-size:12px;font-weight:500;color:var(--ai-accent-dark);background:var(--ai-accent-bg);padding:2px 8px;border-radius:9999px;white-space:nowrap;flex-shrink:0}.collapse-btn{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;color:var(--ai-text-secondary, #737373);flex-shrink:0;transition:transform 0.2s ease;transform:rotate(180deg)}.collapse-btn.expanded{transform:rotate(0deg)}.steps-body{padding:12px 16px;display:flex;flex-direction:column}.step-row{display:flex;align-items:flex-start;gap:12px;cursor:pointer;padding:4px 0}.step-row:hover .step-text{color:var(--ai-text-primary, #333333)}.step-text{flex:1;font-size:14px;font-weight:400;color:var(--ai-text-secondary, #737373);line-height:1.5;padding-top:4px}.step-badge-col{display:flex;flex-direction:column;align-items:center;flex-shrink:0}.step-separator{width:1px;height:16px;background:var(--ai-border-default, #eeeeee);margin:2px 0}.step-badge-outer{padding:2px;border-radius:9999px;background:var(--ai-bg-surface, #f4f4f4);display:inline-flex;align-items:center;justify-content:center}.step-badge-inner{width:26px;height:26px;border-radius:9999px;background:var(--ai-bg-card, #ffffff);box-shadow:0px 0px 2px 1px rgba(18, 18, 23, 0.08);display:flex;align-items:center;justify-content:center;color:var(--ai-text-secondary, #737373)}.step-badge-inner.completed{background:var(--ai-success-bg);color:var(--ai-success-text)}.step-number{font-size:14px;font-weight:500;color:var(--ai-text-secondary, #737373);line-height:1}`;
+const aiLoadingCss = () => `:host{display:block}.icon-wrap{display:inline-flex;align-items:center;justify-content:center;line-height:0}.sparkle-avatar-wrap{display:inline-flex;align-items:center;gap:6px;flex-shrink:0}@keyframes sparkle-twinkle{0%,100%{transform:scale(1);opacity:1;filter:brightness(1)}15%{transform:scale(1.4);opacity:0.4;filter:brightness(2)}30%{transform:scale(0.85);opacity:0.9;filter:brightness(0.9)}50%{transform:scale(1.3);opacity:0.5;filter:brightness(1.8)}70%{transform:scale(0.9);opacity:1;filter:brightness(1)}}.sparkle-avatar{width:24px;height:24px;border-radius:9999px;background:var(--ai-bg-card);box-shadow:var(--ai-shadow-inner);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--ai-amber)}.sparkle-avatar .icon-wrap{animation:sparkle-twinkle 2.4s ease-in-out infinite;transform-origin:center}.header-agent{font-size:12px;color:var(--ai-text-secondary);white-space:nowrap}.thinking-row{display:inline-flex;align-items:center;gap:8px;flex-direction:row}.thinking-col{display:flex;flex-direction:column;gap:2px}@keyframes shimmer{0%{background-position:200% center}100%{background-position:-200% center}}.shimmer-text{font-size:14px;font-weight:400;line-height:1.5;background:var(--ai-glow-gradient);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:shimmer 2s linear infinite}.shimmer-text.subtext{font-size:12px;opacity:0.75}@keyframes fade-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.steps-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}.steps-header{padding:16px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--ai-border-default)}.steps-header.collapsible{cursor:pointer;user-select:none}.steps-header-center{flex:1;display:flex;align-items:center;gap:8px;min-width:0}.steps-title{font-size:16px;font-weight:500;color:var(--ai-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.progress-badge{font-size:12px;font-weight:500;color:var(--ai-accent-dark);background:var(--ai-accent-bg);padding:2px 8px;border-radius:9999px;white-space:nowrap;flex-shrink:0}.progress-badge.executing-title{max-width:180px;overflow:hidden;text-overflow:ellipsis}.collapse-btn{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;color:var(--ai-text-secondary);flex-shrink:0;transition:transform 0.2s ease;transform:rotate(180deg)}.collapse-btn.expanded{transform:rotate(0deg)}.steps-body{padding:12px 16px;display:flex;flex-direction:column}.planning-shimmer{padding:4px 0}.step-row{display:flex;align-items:flex-start;gap:12px;cursor:pointer;padding:4px 0}.step-row:hover .step-text{color:var(--ai-text-primary)}.step-row.pending{opacity:0.5}.step-row.executing .step-text{color:var(--ai-text-primary)}.step-row.failed .step-text{color:var(--ai-error-text, #dc2626)}.step-content{flex:1;display:flex;flex-direction:column;gap:2px;padding-top:4px}.step-text{font-size:14px;font-weight:400;color:var(--ai-text-secondary);line-height:1.5}.step-description{font-size:12px;color:var(--ai-text-secondary);line-height:1.4}.step-duration{font-size:11px;color:var(--ai-text-secondary);opacity:0.7}.agent-chip{display:inline-flex;align-self:flex-start;font-size:11px;padding:1px 6px;border-radius:9999px;border:1px solid var(--ai-border-default);color:var(--ai-text-secondary)}.step-badge-col{display:flex;flex-direction:column;align-items:center;flex-shrink:0}.step-separator{width:1px;height:16px;background:var(--ai-border-default);margin:2px 0}@keyframes pulse-ring{0%{transform:scale(1);opacity:0.6}100%{transform:scale(2);opacity:0}}.step-badge-outer{padding:2px;border-radius:9999px;background:var(--ai-bg-surface);display:inline-flex;align-items:center;justify-content:center;position:relative}.step-badge-outer.pulse-ring::after{content:'';position:absolute;inset:0;border-radius:9999px;border:2px solid var(--ai-amber);animation:pulse-ring 1.2s ease-out infinite}.step-badge-inner{width:26px;height:26px;border-radius:9999px;background:var(--ai-bg-card);box-shadow:var(--ai-shadow-badge);display:flex;align-items:center;justify-content:center;color:var(--ai-text-secondary)}.step-badge-inner.completed{background:var(--ai-success-bg);color:var(--ai-success-text)}.step-badge-inner.executing{color:var(--ai-amber)}.step-badge-inner.failed{background:var(--ai-error-bg, #fee2e2);color:var(--ai-error-text, #dc2626)}.step-number{font-size:14px;font-weight:500;color:var(--ai-text-secondary);line-height:1}`;
 const AiLoading = class {
     constructor(hostRef) {
@@ -13,10 +13,16 @@ const AiLoading = class {
     mode = 'thinking';
     /** Thinking mode status text */
     statusText = 'جاري التفكير...';
+    /** Secondary shimmer line in thinking mode (e.g. live node name) */
+    thinkingSubtext = '';
     /** Steps as JSON string array of LoadingStep */
-    steps = '[]';
+    steps = [];
     /** Steps mode title */
     headerTitle = 'خطة التنفيذ';
+    /** Agent name shown in header alongside sparkle */
+    currentAgent = '';
+    /** Show per-step agent chips */
+    showAgentBadges = false;
     /** Steps mode expand state */
     expanded = true;
     /** Whether steps card is collapsible */
@@ -34,20 +40,16 @@ const AiLoading = class {
         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 });
     }
-    renderSparkleAvatar() {
-        return h("div", { class: "sparkle-avatar" }, this.renderIcon('sparkle', 14, 14));
+    renderSparkleAvatar(agentName) {
+        return (h("div", { class: "sparkle-avatar-wrap" }, h("div", { class: "sparkle-avatar" }, this.renderIcon('sparkle', 14, 14)), agentName && h("span", { class: "header-agent" }, agentName)));
     }
     renderStepBadge(step, index) {
-        const isCompleted = step.status === 'completed';
-        return (h("div", { class: "step-badge-outer" }, h("div", { class: `step-badge-inner ${isCompleted ? 'completed' : ''}` }, isCompleted ? this.renderIcon('check', 14, 14) : h("span", { class: "step-number" }, index + 1))));
-    }
-    getStepsList() {
-        try {
-            return JSON.parse(this.steps) || [];
-        }
-        catch {
-            return [];
-        }
+        const { status } = step;
+        const isCompleted = status === 'completed';
+        const isExecuting = status === 'executing';
+        const isFailed = status === 'failed';
+        const inner = (h("div", { class: `step-badge-inner ${isCompleted ? 'completed' : ''} ${isExecuting ? 'executing' : ''} ${isFailed ? 'failed' : ''}` }, isCompleted && this.renderIcon('check', 14, 14), isFailed && this.renderIcon('cancel', 14, 14), isExecuting && this.renderIcon('list', 14, 14), !isCompleted && !isFailed && !isExecuting && h("span", { class: "step-number" }, index + 1)));
+        return h("div", { class: `step-badge-outer ${isExecuting ? 'pulse-ring' : ''}` }, inner);
     }
     handleToggle() {
         if (!this.collapsible)
@@ -57,17 +59,28 @@ const AiLoading = class {
         this.toggleExpand.emit(this._expanded);
     }
     renderThinkingMode() {
-        return (h("div", { class: "thinking-row" }, this.renderSparkleAvatar(), h("span", { class: "shimmer-text" }, this.statusText)));
+        return (h("div", { class: "thinking-row" }, this.renderSparkleAvatar(), h("div", { class: "thinking-col" }, h("span", { class: "shimmer-text" }, this.statusText), this.thinkingSubtext && h("span", { class: "shimmer-text subtext" }, this.thinkingSubtext))));
+    }
+    renderPlanningShimmer() {
+        return (h("div", { class: "steps-body" }, h("div", { class: "thinking-row planning-shimmer" }, h("div", { class: "sparkle-avatar" }, this.renderIcon('sparkle', 14, 14)), h("span", { class: "shimmer-text" }, "\u062C\u0627\u0631\u064A \u0627\u0644\u062A\u062E\u0637\u064A\u0637..."))));
     }
     renderStepsMode() {
-        const stepsList = this.getStepsList();
-        const completedCount = stepsList.filter(s => s.status === 'completed').length;
-        const total = stepsList.length;
+        const completedCount = this.steps.filter(s => s.status === 'completed').length;
+        const total = this.steps.length;
         const allDone = total > 0 && completedCount === total;
-        return (h("div", { class: "steps-card" }, h("div", { class: `steps-header ${this.collapsible ? 'collapsible' : ''}`, onClick: () => this.handleToggle() }, this.renderSparkleAvatar(), h("div", { class: "steps-header-center" }, h("span", { class: "steps-title" }, this.headerTitle), total > 0 && h("span", { class: "progress-badge" }, allDone ? 'مكتمل' : `${completedCount}/${total}`)), this.collapsible && h("button", { class: `collapse-btn ${this._expanded ? 'expanded' : ''}` }, this.renderIcon('chevron-down', 20, 20))), this._expanded && stepsList.length > 0 && (h("div", { class: "steps-body" }, stepsList.map((step, i) => (h("div", { class: "step-row", onClick: () => this.stepClick.emit(step) }, h("div", { class: "step-badge-col" }, this.renderStepBadge(step, i), i < stepsList.length - 1 && h("div", { class: "step-separator" })), h("span", { class: "step-text" }, step.title))))))));
+        const executingStep = this.steps.find(s => s.status === 'executing');
+        const headerBadge = () => {
+            if (total === 0)
+                return null;
+            if (!this._expanded && executingStep) {
+                return h("span", { class: "progress-badge executing-title" }, executingStep.action);
+            }
+            return h("span", { class: "progress-badge" }, allDone ? 'مكتمل' : `${completedCount}/${total}`);
+        };
+        return (h("div", { class: "steps-card" }, h("div", { class: `steps-header ${this.collapsible ? 'collapsible' : ''}`, onClick: () => this.handleToggle() }, this.renderSparkleAvatar(this.currentAgent || undefined), h("div", { class: "steps-header-center" }, h("span", { class: "steps-title" }, this.headerTitle), headerBadge()), this.collapsible && h("button", { class: `collapse-btn ${this._expanded ? 'expanded' : ''}` }, this.renderIcon('chevron-down', 20, 20))), this._expanded && total === 0 && this.renderPlanningShimmer(), this._expanded && total > 0 && (h("div", { class: "steps-body" }, this.steps.map((step, i) => (h("div", { class: `step-row ${step.status}`, onClick: () => this.stepClick.emit(step) }, h("div", { class: "step-badge-col" }, this.renderStepBadge(step, i), i < this.steps.length - 1 && h("div", { class: "step-separator" })), h("div", { class: "step-content" }, h("span", { class: "step-text" }, step.action), step.reason && h("span", { class: "step-description" }, step.reason)))))))));
     }
     render() {
-        return h(Host, { key: '8a994758abe21c8a333088eeda498d158631bae6' }, this.mode === 'thinking' ? this.renderThinkingMode() : this.renderStepsMode());
+        return h(Host, { key: 'da2c7fad8bbf4e572972a9b8308204cecb91dd63' }, this.mode === 'thinking' ? this.renderThinkingMode() : this.renderStepsMode());
     }
 };
 AiLoading.style = aiLoadingCss();

package/dist/esm/ai-message-input.entry.js CHANGED Viewed

@@ -1,12 +1,12 @@
-import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-7hrZ8FOQ.js';
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-B0yIzgh4.js';
-const aiMessageInputCss = () => `:host{display:block;font-family:var(--ai-font-family, "PingARLT", sans-serif);width:100%;--ai-input-bg:var(--ai-bg-input, #ffffff);--ai-input-border-color:var(--ai-border-default, #eeeeee);--ai-input-text-color:var(--ai-text-primary, #333333);--ai-input-placeholder-color:var(--ai-text-secondary, #737373);--ai-voice-button-color:var(--ai-text-secondary, #737373);--ai-send-button-bg:var(--ai-border-default, #eeeeee);--ai-send-button-border:var(--ai-border-default, #eeeeee);--ai-send-button-color:var(--ai-text-secondary, #737373);--ai-send-button-active-color:var(--ai-text-primary, #333333)}.wrapper{position:relative;padding:var(--ai-input-wrapper-padding, 16px)}.glow{position:absolute;bottom:20px;left:39px;right:39px;height:29px;border-radius:9999px;background:var(--ai-input-glow);filter:blur(20px);opacity:0.9;pointer-events:none}.input-container{position:relative;background-color:var(--ai-input-bg, #ffffff);border-radius:var(--ai-input-border-radius, 9999px);border:1px solid var(--ai-input-border-color, #eeeeee);box-shadow:0 1px 2px 0 var(--ai-input-shadow-color, rgba(18, 18, 23, 0.05));padding:var(--ai-input-padding, 12px);overflow:hidden}.input-row{display:flex;align-items:center;gap:var(--ai-input-gap, 12px)}.actions{display:flex;align-items:center;gap:var(--ai-actions-gap, 8px);flex-shrink:0}.send-button{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:32px;max-height:32px;padding:4px 8px;border-radius:32px;border:2px solid var(--ai-send-button-border, #eeeeee);background-color:var(--ai-send-button-bg, #eeeeee);color:var(--ai-send-button-color, #737373);cursor:not-allowed;transition:background-color 0.2s ease,     border-color 0.2s ease,     color 0.2s ease;flex-shrink:0}.send-button.active{background-color:var(--ai-send-button-active-bg, var(--ai-accent));border-color:var(--ai-send-button-active-border, var(--ai-accent));color:var(--ai-accent-text);cursor:pointer}.send-button.active:hover{background-color:var(--ai-send-button-active-hover-bg, var(--ai-accent));border-color:var(--ai-send-button-active-hover-border, var(--ai-accent))}.send-button:focus{outline:none}.voice-button{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:32px;border:none;background-color:transparent;color:var(--ai-voice-button-color, #737373);cursor:pointer;transition:background-color 0.2s ease,     color 0.2s ease;flex-shrink:0}.voice-button:hover:not(:disabled){background-color:var(--ai-voice-button-hover-bg, rgba(0, 0, 0, 0.06));color:var(--ai-voice-button-hover-color, var(--ai-text-secondary))}.voice-button:disabled{cursor:not-allowed;opacity:0.5}.voice-button:focus{outline:none;box-shadow:0 0 0 2px var(--ai-focus-ring-color, var(--ai-focus-ring))}.textarea{flex:1;resize:none;outline:none;border:none;background:transparent;font-size:var(--ai-input-font-size, 14px);line-height:var(--ai-input-line-height, 20px);color:var(--ai-input-text-color, #333333);font-family:inherit;min-height:20px;text-align:right;direction:rtl;padding:0;overflow:hidden}.textarea::placeholder{color:var(--ai-input-placeholder-color, #737373)}.textarea:disabled{cursor:not-allowed;opacity:0.6}.input-container:focus-within{border-color:var(--ai-input-focus-border-color, var(--ai-accent));box-shadow:0 0 10px 4px rgba(227, 255, 247, 0.4)}:host([disabled]) .wrapper{opacity:0.6;pointer-events:none}:host([dir='ltr']) .textarea{text-align:left;direction:ltr}`;
+const aiMessageInputCss = () => `:host{display:block;width:100%}.wrapper{position:relative;padding:var(--Spacing-Sizes-lg, 12px)}.glow{position:absolute;bottom:20px;left:39px;right:39px;height:29px;border-radius:9999px;background:var(--ai-input-glow);filter:blur(20px);opacity:0.9;pointer-events:none}.input-container{position:relative;background-color:var(--ai-bg-input);border-radius:var(--ai-input-border-radius, 9999px);border:1px solid var(--ai-border-default);box-shadow:var(--ai-shadow-sm);padding:var(--ai-input-padding, 12px);overflow:hidden;transition:border-radius 0.15s ease}.input-container.multiline{border-radius:var(--ai-input-border-radius-multiline, 20px)}.input-row{display:flex;align-items:center;gap:var(--ai-input-gap, 12px)}.input-container.multiline .input-row{align-items:flex-end}.actions{display:flex;align-items:center;gap:var(--ai-actions-gap, 8px);flex-shrink:0}.send-button{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:32px;max-height:32px;padding:4px 8px;border-radius:32px;border:2px solid var(--ai-border-default);background-color:var(--ai-border-default);color:var(--ai-text-secondary);cursor:not-allowed;transition:background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;flex-shrink:0}.send-button.active{background-color:var(--ai-send-button-active-bg, var(--ai-accent));border-color:var(--ai-send-button-active-border, var(--ai-accent));color:var(--ai-accent-text);cursor:pointer}.send-button.active:hover{background-color:var(--ai-send-button-active-hover-bg, var(--ai-accent));border-color:var(--ai-send-button-active-hover-border, var(--ai-accent))}.send-button:focus{outline:none;box-shadow:0 0 0 2px var(--ai-focus-ring-color, var(--ai-focus-ring))}.voice-button{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:32px;border:none;background-color:transparent;color:var(--ai-text-secondary);cursor:pointer;transition:background-color 0.2s ease, color 0.2s ease;flex-shrink:0}.voice-button:hover:not(:disabled){background-color:var(--ai-hover-overlay);color:var(--ai-voice-button-hover-color, var(--ai-text-secondary))}.voice-button:disabled{cursor:not-allowed;opacity:0.5}.voice-button:focus{outline:none;box-shadow:0 0 0 2px var(--ai-focus-ring-color, var(--ai-focus-ring))}.textarea{flex:1;resize:none;outline:none;border:none;background:transparent;font-size:var(--ai-input-font-size, 14px);line-height:var(--ai-input-line-height, 20px);color:var(--ai-text-primary);font-family:inherit;min-height:20px;max-height:var(--ai-input-max-height, 120px);overflow-y:hidden;text-align:start;padding:0}.textarea::placeholder{color:var(--ai-text-secondary)}.textarea:disabled{cursor:not-allowed;opacity:0.6}.input-container:focus-within{border-color:var(--ai-input-focus-border-color, var(--ai-accent));box-shadow:var(--ai-input-focus-glow)}:host([disabled]) .wrapper{opacity:0.6;pointer-events:none}:host([disabled]) .glow{display:none}.char-counter{font-size:11px;color:var(--ai-text-secondary);flex-shrink:0;transition:color 0.2s ease}.char-counter.warning{color:var(--ai-voice-timer-warning-color, var(--ai-danger-text))}`;
 const MessageInput = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.sendMessage = createEvent(this, "sendMessage");
-        this.voiceButtonClick = createEvent(this, "voiceButtonClick");
+        this.voiceAudioReady = createEvent(this, "voiceAudioReady");
     }
     get el() { return getElement(this); }
     /** Placeholder text for the textarea */
@@ -15,21 +15,38 @@ const MessageInput = class {
     disabled = false;
     /** Whether to show the voice recording button */
     showVoiceButton = true;
+    /** Maximum characters allowed */
+    maxLength = 4000;
+    /** External prop to show/hide the inline voice recorder */
+    isRecording = false;
     inputValue = '';
+    showVoiceRecorder = false;
+    isMultiline = false;
     textareaRef;
     /** Event emitted when a message is sent */
     sendMessage;
-    /** Event emitted when the voice button is clicked — caller controls rendering the voice recorder */
-    voiceButtonClick;
+    /** Event emitted when voice recording is complete and audio is ready */
+    voiceAudioReady;
+    onIsRecordingChange(newVal) {
+        this.showVoiceRecorder = newVal;
+    }
     /** Set the textarea value programmatically (e.g. after speech-to-text transcription) */
     async setInputValue(value) {
         this.inputValue = value;
         if (this.textareaRef) {
-            this.textareaRef.style.height = 'auto';
-            this.textareaRef.style.height = `${this.textareaRef.scrollHeight}px`;
+            // Set value imperatively before measuring to avoid stale scrollHeight from async render queue
+            this.textareaRef.value = value;
+            this.updateHeight();
             this.textareaRef.focus();
         }
     }
+    updateHeight = () => {
+        if (!this.textareaRef)
+            return;
+        this.textareaRef.style.height = 'auto';
+        this.textareaRef.style.height = `${this.textareaRef.scrollHeight}px`;
+        this.isMultiline = this.textareaRef.scrollHeight > 28;
+    };
     handleSendMessage = () => {
         if (!this.inputValue.trim() || this.disabled)
             return;
@@ -37,26 +54,42 @@ const MessageInput = class {
         this.inputValue = '';
         if (this.textareaRef) {
             this.textareaRef.style.height = 'auto';
+            this.isMultiline = false;
         }
     };
-    handleKeyPress = (e) => {
+    handleKeyDown = (e) => {
         if (e.key === 'Enter' && !e.shiftKey) {
             e.preventDefault();
             this.handleSendMessage();
         }
     };
+    handleVoiceClick = () => {
+        this.showVoiceRecorder = true;
+    };
+    handleAudioRecorded = (e) => {
+        this.showVoiceRecorder = false;
+        this.voiceAudioReady.emit(e.detail);
+    };
+    handleRecordingCancel = () => {
+        this.showVoiceRecorder = false;
+    };
     handleInputChange = (e) => {
-        const target = e.target;
-        this.inputValue = target.value;
-        if (this.textareaRef) {
-            this.textareaRef.style.height = 'auto';
-            this.textareaRef.style.height = `${this.textareaRef.scrollHeight}px`;
-        }
+        this.inputValue = e.target.value;
+        this.updateHeight();
     };
     render() {
+        if (this.showVoiceRecorder) {
+            return (h(Host, null, h("ai-voice-input", { autoStart: true, onAudioRecorded: this.handleAudioRecorded, onRecordingCancel: this.handleRecordingCancel })));
+        }
         const canSend = !!this.inputValue.trim() && !this.disabled;
-        return (h(Host, { key: '97dfe627b89657d36e4f7281a8bdb708cc913374' }, h("div", { key: 'a3efb2a0b95ec3a86cc5f575d0fdb2bb6dd2eb6c', part: "wrapper", class: "wrapper" }, h("div", { key: '5986fa2946a44757c143999a72b25ea3b6e7c336', part: "glow", class: "glow", "aria-hidden": "true" }), h("div", { key: 'd5b9d346495de00e8b0e0900ef3e766756844626', part: "container", class: "input-container" }, h("div", { key: '8313695b2e4d7557a5362e9b9d2a5c5803a4ec0c', class: "input-row" }, h("div", { key: '9c184f8097e28527b5d18fccf92010fb36b14a9c', class: "actions" }, h("button", { key: '39ad3feb24a53fd5a08e8a8388f7bcee71413a91', part: "send-button", class: `send-button${canSend ? ' active' : ''}`, onClick: this.handleSendMessage, disabled: !canSend, type: "button", "aria-label": "Send message" }, h("ai-icon", { key: '1fe555709288d33551696312fb3329b1c656d063', name: "send", size: 16 })), this.showVoiceButton && !this.inputValue && (h("button", { key: 'a7bcc3b9ca5f5e59c32a34ab33c2fbbd607bb298', part: "voice-button", class: "voice-button", onClick: () => this.voiceButtonClick.emit(), disabled: this.disabled, type: "button", "aria-label": "Record voice" }, h("ai-icon", { key: '98fea04c79e841e4a2b8ee50a480bb554212b055', name: "mic", size: 16 })))), h("textarea", { key: '798af74ca2298a31f37459dfa1c176182d740839', part: "textarea", ref: el => (this.textareaRef = el), value: this.inputValue, onInput: this.handleInputChange, onKeyPress: this.handleKeyPress, disabled: this.disabled, placeholder: this.placeholder, rows: 1, class: "textarea" }))))));
+        const remaining = this.maxLength - this.inputValue.length;
+        return (h(Host, null, h("div", { part: "wrapper", class: "wrapper" }, h("div", { part: "glow", class: "glow", "aria-hidden": "true" }), h("div", { part: "container", class: `input-container${this.isMultiline ? ' multiline' : ''}` }, h("div", { class: "input-row" }, h("textarea", { part: "textarea", ref: el => (this.textareaRef = el), value: this.inputValue, onInput: this.handleInputChange, onKeyDown: this.handleKeyDown, disabled: this.disabled, placeholder: this.placeholder, rows: 1, class: "textarea", maxLength: this.maxLength }), remaining < 200 && (h("span", { class: `char-counter${remaining < 50 ? ' warning' : ''}`, "aria-live": "polite" }, remaining)), h("div", { class: "actions" }, this.showVoiceButton && !this.inputValue && (h("button", { part: "voice-button", class: "voice-button", onClick: this.handleVoiceClick, disabled: this.disabled, type: "button", "aria-label": "Record voice" }, h("ai-icon", { name: "mic", size: 16 }))), h("button", { part: "send-button", class: `send-button${canSend ? ' active' : ''}`, onClick: this.handleSendMessage, disabled: !canSend, type: "button", "aria-label": "Send message" }, h("ai-icon", { name: "send", size: 16 }))))))));
     }
+    static get watchers() { return {
+        "isRecording": [{
+                "onIsRecordingChange": 0
+            }]
+    }; }
 };
 MessageInput.style = aiMessageInputCss();

package/dist/esm/ai-rating.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-7hrZ8FOQ.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-B0yIzgh4.js';
-const aiRatingCss = () => `:host{--ai-rating-question-color:var(--ai-text-primary, #333333);--ai-rating-subtitle-color:var(--ai-text-secondary, #737373);--ai-rating-question-size:16px;--ai-rating-subtitle-size:14px;--ai-rating-gap:8px;--ai-rating-emoji-size:24px;--ai-rating-btn-padding:6px;--ai-rating-btn-border:1px solid var(--ai-border-light, #f4f4f4);--ai-rating-btn-radius:9999px;--ai-rating-btn-bg-hover:var(--ai-bg-surface, #f9fafb);--ai-rating-btn-border-hover:1px solid var(--ai-border-default);--ai-rating-btn-bg-active:var(--ai-warning-bg, #fff9eb);--ai-rating-btn-border-active:1px solid var(--ai-warning-border, #ffaf44);--ai-rating-btn-shadow-active:0px 4px 6px -1px rgba(18, 18, 23, 0.08),                                   0px 2px 4px -1px rgba(18, 18, 23, 0.06);--ai-rating-label-color:var(--ai-text-primary, #333333);--ai-rating-label-size:16px;display:block;direction:rtl;font-family:var(--ai-font-family, "PingARLT", sans-serif)}.rating{display:flex;flex-direction:column;align-items:center;gap:var(--ai-rating-gap);width:100%}.rating__text{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;text-align:center}.rating__question{margin:0;font-size:var(--ai-rating-question-size);font-weight:500;line-height:24px;color:var(--ai-rating-question-color)}.rating__subtitle{margin:0;font-size:var(--ai-rating-subtitle-size);font-weight:400;line-height:20px;color:var(--ai-rating-subtitle-color)}.rating__icons{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;flex-wrap:wrap}.emoji-btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--ai-rating-btn-padding);border:var(--ai-rating-btn-border);border-radius:var(--ai-rating-btn-radius);background:transparent;cursor:pointer;transition:background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;outline:none}.emoji-btn:focus-visible{outline:2px solid var(--ai-warning-border);outline-offset:2px}.emoji-btn:hover:not(:disabled),.emoji-btn--hovered{background:var(--ai-rating-btn-bg-hover);border:var(--ai-rating-btn-border-hover);transform:scale(1.1)}.emoji-btn--active{background:var(--ai-rating-btn-bg-active) !important;border:var(--ai-rating-btn-border-active) !important;box-shadow:var(--ai-rating-btn-shadow-active);transform:scale(1.18) !important}.emoji-btn--disabled{opacity:0.45;cursor:not-allowed;pointer-events:none}.emoji-btn__icon{font-size:var(--ai-rating-emoji-size);line-height:1;display:inline-flex;align-items:center;justify-content:center;width:var(--ai-rating-emoji-size);height:var(--ai-rating-emoji-size);pointer-events:none}.rating__selected-label{margin:0;font-size:var(--ai-rating-label-size);font-weight:500;line-height:24px;color:var(--ai-rating-label-color);text-align:center;width:100%;animation:fadeIn 0.15s ease}@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}`;
+const aiRatingCss = () => `:host{--ai-rating-question-size:16px;--ai-rating-subtitle-size:14px;--ai-rating-gap:8px;--ai-rating-emoji-size:24px;--ai-rating-btn-padding:6px;--ai-rating-btn-border:1px solid var(--ai-border-light);--ai-rating-btn-radius:9999px;--ai-rating-btn-bg-hover:var(--ai-bg-surface);--ai-rating-btn-border-hover:1px solid var(--ai-border-default);--ai-rating-btn-bg-active:var(--ai-warning-bg);--ai-rating-btn-border-active:1px solid var(--ai-warning-border);--ai-rating-btn-shadow-active:var(--ai-shadow-active);--ai-rating-label-size:16px;display:block}.rating{display:flex;flex-direction:column;align-items:center;gap:var(--ai-rating-gap);width:100%}.rating__text{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;text-align:center}.rating__question{margin:0;font-size:var(--ai-rating-question-size);font-weight:500;line-height:24px;color:var(--ai-text-primary)}.rating__subtitle{margin:0;font-size:var(--ai-rating-subtitle-size);font-weight:400;line-height:20px;color:var(--ai-text-secondary)}.rating__icons{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;flex-wrap:wrap}.emoji-btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--ai-rating-btn-padding);border:var(--ai-rating-btn-border);border-radius:var(--ai-rating-btn-radius);background:transparent;cursor:pointer;transition:background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;outline:none}.emoji-btn:focus-visible{outline:2px solid var(--ai-warning-border);outline-offset:2px}.emoji-btn:hover:not(:disabled),.emoji-btn--hovered{background:var(--ai-rating-btn-bg-hover);border:var(--ai-rating-btn-border-hover);transform:scale(1.1)}.emoji-btn--active{background:var(--ai-rating-btn-bg-active) !important;border:var(--ai-rating-btn-border-active) !important;box-shadow:var(--ai-rating-btn-shadow-active);transform:scale(1.18) !important}.emoji-btn--disabled{opacity:0.45;cursor:not-allowed;pointer-events:none}.emoji-btn__icon{font-size:var(--ai-rating-emoji-size);line-height:1;display:inline-flex;align-items:center;justify-content:center;width:var(--ai-rating-emoji-size);height:var(--ai-rating-emoji-size);pointer-events:none}.rating__selected-label{margin:0;font-size:var(--ai-rating-label-size);font-weight:500;line-height:24px;color:var(--ai-text-primary);text-align:center;width:100%;animation:fadeIn 0.15s ease}@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}`;
 const EMOJI_OPTIONS = [
     { value: 1, emoji: '😠', label: 'سيئ جداً' },

package/dist/esm/ai-route-decision.entry.js ADDED Viewed

@@ -0,0 +1,46 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-B0yIzgh4.js';
+import { i as iconRegistry } from './icon-registry-SJZ6Ujn9.js';
+const aiRouteDecisionCss = () => `:host{display:inline-block}.icon-wrap{display:inline-flex;align-items:center;justify-content:center;line-height:0}.route-pill{display:inline-flex;flex-direction:column;background:var(--ai-bg-card);border:1px solid var(--ai-border-default);border-radius:9999px;box-shadow:var(--ai-shadow-sm);overflow:hidden;transition:border-radius 0.2s ease}.route-pill.expanded{border-radius:12px}.route-pill-main{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:none;border:none;cursor:pointer;color:var(--ai-text-primary);font-size:13px;font-weight:500;white-space:nowrap;width:100%}.route-icon{color:var(--ai-accent-dark);display:inline-flex;flex-shrink:0}.agent-label{display:inline-flex;align-items:center;gap:4px}.agent-emoji{font-size:14px;line-height:1}.confidence-badge{font-size:11px;font-weight:600;color:var(--ai-accent-dark);background:var(--ai-accent-bg);padding:1px 6px;border-radius:9999px}.expand-icon{display:inline-flex;margin-inline-start:auto;color:var(--ai-text-secondary);transition:transform 0.2s ease;transform:rotate(0deg)}.expand-icon.expanded{transform:rotate(90deg)}.route-details{display:flex;flex-direction:column;gap:8px;padding:8px 12px 12px;border-top:1px solid var(--ai-border-default);animation:fade-in 0.2s ease}@keyframes fade-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.reason-text{margin:0;font-size:12px;color:var(--ai-text-secondary);line-height:1.5}.confidence-bar-wrap{height:4px;border-radius:9999px;background:var(--ai-border-default);overflow:hidden}.confidence-bar{height:100%;border-radius:9999px;background:var(--ai-accent-dark);transition:width 0.4s ease}.meta-row{display:inline-flex;align-items:center;gap:4px;color:var(--ai-text-secondary)}.lang-chip{font-size:11px;color:var(--ai-text-secondary)}`;
+const AiRouteDecision = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.routeExpand = createEvent(this, "routeExpand");
+    }
+    /** Selected agent name */
+    selectedAgent = '';
+    /** Agent icon — emoji or short text displayed before the agent name */
+    agentIcon = '';
+    /** Reason for routing decision (shown when expanded) */
+    reason = '';
+    /** Routing confidence percentage 0–100 */
+    confidence = 0;
+    /** Detected language label (shown when expanded) */
+    detectedLanguage = '';
+    /** Initial expanded state */
+    expanded = false;
+    _expanded = false;
+    routeExpand;
+    componentWillLoad() {
+        this._expanded = this.expanded;
+    }
+    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 });
+    }
+    handleToggle() {
+        this._expanded = !this._expanded;
+        this.expanded = this._expanded;
+        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))))))));
+    }
+};
+AiRouteDecision.style = aiRouteDecisionCss();
+export { AiRouteDecision as ai_route_decision };

package/dist/esm/ai-suggestion.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-7hrZ8FOQ.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-B0yIzgh4.js';
-const aiSuggestionCss = () => `:host{--ai-suggestion-bg:var(--ai-bg-card);--ai-suggestion-bg-hover:var(--ai-accent-bg);--ai-suggestion-bg-active:var(--ai-accent-bg);--ai-suggestion-border:1px solid var(--ai-accent);--ai-suggestion-border-hover:1px solid var(--ai-accent);--ai-suggestion-radius:9999px;--ai-suggestion-padding:8px 12px;--ai-suggestion-gap:4px;--ai-suggestion-color:var(--ai-accent-dark);--ai-suggestion-font-size:14px;--ai-suggestion-line-height:20px;display:inline-block;direction:rtl;font-family:var(--ai-font-family, "PingARLT", sans-serif)}.chip{display:inline-flex;align-items:center;justify-content:center;gap:var(--ai-suggestion-gap);background:var(--ai-suggestion-bg);border:var(--ai-suggestion-border);border-radius:var(--ai-suggestion-radius);padding:var(--ai-suggestion-padding);color:var(--ai-suggestion-color);font-size:var(--ai-suggestion-font-size);font-weight:400;line-height:var(--ai-suggestion-line-height);font-family:inherit;white-space:nowrap;cursor:pointer;transition:background 0.15s ease, border-color 0.15s ease;outline:none;text-align:right}.chip:hover:not(:disabled){background:var(--ai-suggestion-bg-hover);border:var(--ai-suggestion-border-hover)}.chip:active:not(:disabled){background:var(--ai-suggestion-bg-active)}.chip:focus-visible{outline:2px solid var(--ai-accent);outline-offset:2px}.chip--disabled,.chip:disabled{opacity:0.45;cursor:not-allowed;pointer-events:none}.chip__label{display:inline-flex;align-items:center;gap:var(--ai-suggestion-gap)}`;
+const aiSuggestionCss = () => `:host{--ai-suggestion-border:1px solid var(--ai-accent);--ai-suggestion-border-hover:1px solid var(--ai-accent);--ai-suggestion-radius:9999px;--ai-suggestion-padding:8px 12px;--ai-suggestion-gap:4px;--ai-suggestion-font-size:14px;--ai-suggestion-line-height:20px;display:inline-block}.chip{display:inline-flex;align-items:center;justify-content:center;gap:var(--ai-suggestion-gap);background:var(--ai-bg-card);border:var(--ai-suggestion-border);border-radius:var(--ai-suggestion-radius);padding:var(--ai-suggestion-padding);color:var(--ai-accent-dark);font-size:var(--ai-suggestion-font-size);font-weight:400;line-height:var(--ai-suggestion-line-height);font-family:inherit;white-space:nowrap;cursor:pointer;transition:background 0.15s ease, border-color 0.15s ease;outline:none;text-align:start}.chip:hover:not(:disabled){background:var(--ai-accent-bg);border:var(--ai-suggestion-border-hover)}.chip:active:not(:disabled){background:var(--ai-accent-bg)}.chip:focus-visible{outline:2px solid var(--ai-accent);outline-offset:2px}.chip--disabled,.chip:disabled{opacity:0.45;cursor:not-allowed;pointer-events:none}.chip__label{display:inline-flex;align-items:center;gap:var(--ai-suggestion-gap)}`;
 const AiSuggestion = class {
     constructor(hostRef) {
@@ -18,10 +18,10 @@ const AiSuggestion = class {
         this.suggestionClick.emit(this.label);
     }
     render() {
-        return (h(Host, { key: '642ab1b74098e6cd3cebab33a127757cddd2a450' }, h("button", { key: 'd75585d53f5996d06a96bdfad5dc11a85b101b23', class: {
+        return (h(Host, { key: 'd8a9ff7279fce63faebd187cb69f0173239518ca' }, h("button", { key: '42bc023c9c48bafc11b388bb80e130255ea830b8', class: {
                 chip: true,
                 'chip--disabled': this.disabled,
-            }, disabled: this.disabled, onClick: () => this.handleClick() }, h("span", { key: '532a8cc6168accab91bc10f0b4383d4173b8c887', class: "chip__label" }, this.label, h("slot", { key: '691ae51253a08ff2005733a263153f8470e77472' })))));
+            }, disabled: this.disabled, onClick: () => this.handleClick() }, h("span", { key: '06f0324b97d9f7fb77fb2d4b9dbf0be9b5c4c3f1', class: "chip__label" }, this.label, h("slot", { key: 'ccd0d639f0b2c001088561b029b08691395e9198' })))));
     }
 };
 AiSuggestion.style = aiSuggestionCss();