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

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

@@ -1,6 +1,5 @@
 :host {
   display: block;
-  direction: rtl;
 }
 
 /* ── Icon wrapper ───────────────────────────────────────── */
@@ -12,12 +11,27 @@
 }
 
 /* ── Sparkle avatar ─────────────────────────────────────── */
+.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, #FCFCFC);
-  box-shadow: inset 0px 0px 3px 1px rgba(18, 18, 23, 0.06);
+  background: var(--ai-bg-card);
+  box-shadow: var(--ai-shadow-inner);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -25,6 +39,17 @@
   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 mode ──────────────────────────────────────── */
 .thinking-row {
   display: inline-flex;
@@ -33,6 +58,12 @@
   flex-direction: row;
 }
 
+.thinking-col {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
 @keyframes shimmer {
   0% {
     background-position: 200% center;
@@ -46,7 +77,7 @@
   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: var(--ai-glow-gradient);
   background-size: 200% auto;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
@@ -54,13 +85,30 @@
   animation: shimmer 2s linear infinite;
 }
 
+.shimmer-text.subtext {
+  font-size: 12px;
+  opacity: 0.75;
+}
+
 /* ── Steps card ─────────────────────────────────────────── */
+@keyframes fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 .steps-card {
-  background: var(--ai-bg-card, #ffffff);
-  border: 1px solid var(--ai-border-default, #eeeeee);
+  background: var(--ai-bg-card);
+  border: 1px solid var(--ai-border-default);
   border-radius: 16px;
-  box-shadow: 0px 1px 2px 0px rgba(18, 18, 23, 0.05);
+  box-shadow: var(--ai-shadow-sm);
   overflow: hidden;
+  animation: fade-in 0.3s ease;
 }
 
 /* ── Steps header ───────────────────────────────────────── */
@@ -69,7 +117,7 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  border-bottom: 1px solid var(--ai-border-default, #eeeeee);
+  border-bottom: 1px solid var(--ai-border-default);
 }
 
 .steps-header.collapsible {
@@ -88,7 +136,7 @@
 .steps-title {
   font-size: 16px;
   font-weight: 500;
-  color: var(--ai-text-primary, #333333);
+  color: var(--ai-text-primary);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -105,6 +153,12 @@
   flex-shrink: 0;
 }
 
+.progress-badge.executing-title {
+  max-width: 180px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 /* ── Collapse button ────────────────────────────────────── */
 .collapse-btn {
   display: inline-flex;
@@ -114,7 +168,7 @@
   border: none;
   padding: 0;
   cursor: pointer;
-  color: var(--ai-text-secondary, #737373);
+  color: var(--ai-text-secondary);
   flex-shrink: 0;
   transition: transform 0.2s ease;
   transform: rotate(180deg);
@@ -131,6 +185,10 @@
   flex-direction: column;
 }
 
+.planning-shimmer {
+  padding: 4px 0;
+}
+
 .step-row {
   display: flex;
   align-items: flex-start;
@@ -140,16 +198,57 @@
 }
 
 .step-row:hover .step-text {
-  color: var(--ai-text-primary, #333333);
+  color: var(--ai-text-primary);
 }
 
-.step-text {
+.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 ───────────────────────────────────────── */
+.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, #737373);
+  color: var(--ai-text-secondary);
   line-height: 1.5;
-  padding-top: 4px;
+}
+
+.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 column (badge + separator) ──────────────── */
@@ -163,30 +262,51 @@
 .step-separator {
   width: 1px;
   height: 16px;
-  background: var(--ai-border-default, #eeeeee);
+  background: var(--ai-border-default);
   margin: 2px 0;
 }
 
 /* ── Step badge ─────────────────────────────────────────── */
+@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, #f4f4f4);
+  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, #ffffff);
-  box-shadow: 0px 0px 2px 1px rgba(18, 18, 23, 0.08);
+  background: var(--ai-bg-card);
+  box-shadow: var(--ai-shadow-badge);
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--ai-text-secondary, #737373);
+  color: var(--ai-text-secondary);
 }
 
 .step-badge-inner.completed {
@@ -194,9 +314,18 @@
   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, #737373);
+  color: var(--ai-text-secondary);
   line-height: 1;
 }

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

@@ -5,10 +5,16 @@ export class AiLoading {
     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 */
@@ -26,20 +32,16 @@ export class AiLoading {
         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)
@@ -49,17 +51,28 @@ export class AiLoading {
         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());
     }
     static get is() { return "ai-loading"; }
     static get encapsulation() { return "shadow"; }
@@ -115,7 +128,7 @@ export class AiLoading {
                 "attribute": "status-text",
                 "defaultValue": "'\u062C\u0627\u0631\u064A \u0627\u0644\u062A\u0641\u0643\u064A\u0631...'"
             },
-            "steps": {
+            "thinkingSubtext": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -127,13 +140,37 @@ export class AiLoading {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Steps as JSON string array of LoadingStep"
+                    "text": "Secondary shimmer line in thinking mode (e.g. live node name)"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "steps",
-                "defaultValue": "'[]'"
+                "attribute": "thinking-subtext",
+                "defaultValue": "''"
+            },
+            "steps": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "LoadingStep[]",
+                    "resolved": "LoadingStep[]",
+                    "references": {
+                        "LoadingStep": {
+                            "location": "local",
+                            "path": "/home/ahmed/Desktop/Salla/Dev/multi-agent/ui-ai-kit/packages/core/src/components/ai-loading/ai-loading.tsx",
+                            "id": "src/components/ai-loading/ai-loading.tsx::LoadingStep"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Steps as JSON string array of LoadingStep"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
             },
             "headerTitle": {
                 "type": "string",
@@ -155,6 +192,46 @@ export class AiLoading {
                 "attribute": "header-title",
                 "defaultValue": "'\u062E\u0637\u0629 \u0627\u0644\u062A\u0646\u0641\u064A\u0630'"
             },
+            "currentAgent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Agent name shown in header alongside sparkle"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "current-agent",
+                "defaultValue": "''"
+            },
+            "showAgentBadges": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show per-step agent chips"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-agent-badges",
+                "defaultValue": "false"
+            },
             "expanded": {
                 "type": "boolean",
                 "mutable": true,

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

@@ -1,23 +1,12 @@
 :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 holds glow + container */
 .wrapper {
   position: relative;
-  padding: var(--ai-input-wrapper-padding, 16px);
+  padding: var(--Spacing-Sizes-lg, 12px);
 }
 
 /* Decorative gradient glow below the input */
@@ -37,12 +26,17 @@
 /* Main container — pill shaped */
 .input-container {
   position: relative;
-  background-color: var(--ai-input-bg, #ffffff);
+  background-color: var(--ai-bg-input);
   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));
+  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 {
@@ -51,6 +45,10 @@
   gap: var(--ai-input-gap, 12px);
 }
 
+.input-container.multiline .input-row {
+  align-items: flex-end;
+}
+
 /* Action buttons (send + optional voice) */
 .actions {
   display: flex;
@@ -69,14 +67,11 @@
   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);
+  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;
+  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
   flex-shrink: 0;
 }
 
@@ -94,6 +89,7 @@
 
 .send-button:focus {
   outline: none;
+  box-shadow: 0 0 0 2px var(--ai-focus-ring-color, var(--ai-focus-ring));
 }
 
 /* Voice Button */
@@ -106,16 +102,14 @@
   border-radius: 32px;
   border: none;
   background-color: transparent;
-  color: var(--ai-voice-button-color, #737373);
+  color: var(--ai-text-secondary);
   cursor: pointer;
-  transition:
-    background-color 0.2s ease,
-    color 0.2s ease;
+  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));
+  background-color: var(--ai-hover-overlay);
   color: var(--ai-voice-button-hover-color, var(--ai-text-secondary));
 }
 
@@ -138,17 +132,17 @@
   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);
+  color: var(--ai-text-primary);
   font-family: inherit;
   min-height: 20px;
-  text-align: right;
-  direction: rtl;
+  max-height: var(--ai-input-max-height, 120px);
+  overflow-y: hidden;
+  text-align: start;
   padding: 0;
-  overflow: hidden;
 }
 
 .textarea::placeholder {
-  color: var(--ai-input-placeholder-color, #737373);
+  color: var(--ai-text-secondary);
 }
 
 .textarea:disabled {
@@ -159,7 +153,7 @@
 /* Active / focus state for container — matches Figma active state */
 .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);
+  box-shadow: var(--ai-input-focus-glow);
 }
 
 /* Disabled state */
@@ -168,8 +162,18 @@
   pointer-events: none;
 }
 
-/* RTL Support */
-:host([dir='ltr']) .textarea {
-  text-align: left;
-  direction: ltr;
+:host([disabled]) .glow {
+  display: none;
+}
+
+/* Character counter */
+.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));
 }