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

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

@@ -0,0 +1,244 @@
+import { Host, h } from "@stencil/core";
+import { iconRegistry } from "../../utils/icon-registry";
+export class AiLoading {
+    /** Main mode switch */
+    mode = 'thinking';
+    /** Thinking mode status text */
+    statusText = 'جاري التفكير...';
+    /** Steps as JSON string array of LoadingStep */
+    steps = '[]';
+    /** Steps mode title */
+    headerTitle = 'خطة التنفيذ';
+    /** Steps mode expand state */
+    expanded = true;
+    /** Whether steps card is collapsible */
+    collapsible = true;
+    toggleExpand;
+    stepClick;
+    _expanded = true;
+    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 });
+    }
+    renderSparkleAvatar() {
+        return h("div", { class: "sparkle-avatar" }, this.renderIcon('sparkle', 14, 14));
+    }
+    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 [];
+        }
+    }
+    handleToggle() {
+        if (!this.collapsible)
+            return;
+        this._expanded = !this._expanded;
+        this.expanded = this._expanded;
+        this.toggleExpand.emit(this._expanded);
+    }
+    renderThinkingMode() {
+        return (h("div", { class: "thinking-row" }, this.renderSparkleAvatar(), h("span", { class: "shimmer-text" }, this.statusText)));
+    }
+    renderStepsMode() {
+        const stepsList = this.getStepsList();
+        const completedCount = stepsList.filter(s => s.status === 'completed').length;
+        const total = stepsList.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))))))));
+    }
+    render() {
+        return h(Host, { key: '8a994758abe21c8a333088eeda498d158631bae6' }, this.mode === 'thinking' ? this.renderThinkingMode() : this.renderStepsMode());
+    }
+    static get is() { return "ai-loading"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ai-loading.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ai-loading.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "mode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'thinking' | 'steps'",
+                    "resolved": "\"steps\" | \"thinking\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Main mode switch"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mode",
+                "defaultValue": "'thinking'"
+            },
+            "statusText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Thinking mode status text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status-text",
+                "defaultValue": "'\u062C\u0627\u0631\u064A \u0627\u0644\u062A\u0641\u0643\u064A\u0631...'"
+            },
+            "steps": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Steps as JSON string array of LoadingStep"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "steps",
+                "defaultValue": "'[]'"
+            },
+            "headerTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Steps mode title"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "header-title",
+                "defaultValue": "'\u062E\u0637\u0629 \u0627\u0644\u062A\u0646\u0641\u064A\u0630'"
+            },
+            "expanded": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Steps mode expand state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "expanded",
+                "defaultValue": "true"
+            },
+            "collapsible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether steps card is collapsible"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "collapsible",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "_expanded": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "toggleExpand",
+                "name": "toggleExpand",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "stepClick",
+                "name": "stepClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "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"
+                        }
+                    }
+                }
+            }];
+    }
+}

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

@@ -0,0 +1,145 @@
+import { html } from "lit";
+const meta = {
+    title: 'Chat/Loading',
+    component: 'ai-loading',
+    tags: ['autodocs'],
+    argTypes: {
+        mode: {
+            control: { type: 'select' },
+            options: ['thinking', 'steps'],
+            description: 'Main mode switch',
+        },
+        statusText: {
+            control: 'text',
+            description: 'Thinking mode status text',
+        },
+        steps: {
+            control: 'text',
+            description: 'Steps as JSON string array',
+        },
+        headerTitle: {
+            control: 'text',
+            description: 'Steps card title',
+        },
+        expanded: {
+            control: 'boolean',
+            description: 'Steps card expand state',
+        },
+        collapsible: {
+            control: 'boolean',
+            description: 'Allow collapsing the steps card',
+        },
+    },
+};
+export default meta;
+const stepsInProgress = JSON.stringify([
+    { id: '1', title: 'البحث عن المعلومات المطلوبة', status: 'completed' },
+    { id: '2', title: 'تحليل البيانات وإعداد التقرير', status: 'executing' },
+    { id: '3', title: 'مراجعة النتائج والتحقق منها', status: 'pending' },
+    { id: '4', title: 'إرسال التقرير النهائي', status: 'pending' },
+]);
+const stepsAllCompleted = JSON.stringify([
+    { id: '1', title: 'البحث عن المعلومات المطلوبة', status: 'completed' },
+    { id: '2', title: 'تحليل البيانات وإعداد التقرير', status: 'completed' },
+    { id: '3', title: 'مراجعة النتائج والتحقق منها', status: 'completed' },
+]);
+export const Thinking = {
+    render: args => html `
+    <ai-loading
+      mode="${args.mode}"
+      status-text="${args.statusText}"
+    ></ai-loading>
+  `,
+    args: {
+        mode: 'thinking',
+        statusText: 'جاري التفكير...',
+    },
+};
+export const ThinkingCustomText = {
+    render: args => html `
+    <ai-loading
+      mode="${args.mode}"
+      status-text="${args.statusText}"
+    ></ai-loading>
+  `,
+    args: {
+        mode: 'thinking',
+        statusText: 'جاري معالجة طلبك...',
+    },
+};
+export const StepsInProgress = {
+    render: args => html `
+    <div style="min-width: 360px;">
+      <ai-loading
+        mode="${args.mode}"
+        .steps="${args.steps}"
+        ?expanded="${args.expanded}"
+        ?collapsible="${args.collapsible}"
+        @toggleExpand="${(e) => console.log('expand:', e.detail)}"
+        @stepClick="${(e) => console.log('step:', e.detail)}"
+      ></ai-loading>
+    </div>
+  `,
+    args: {
+        mode: 'steps',
+        steps: stepsInProgress,
+        expanded: true,
+        collapsible: true,
+    },
+};
+export const StepsAllCompleted = {
+    render: args => html `
+    <div style="min-width: 360px;">
+      <ai-loading
+        mode="${args.mode}"
+        .steps="${args.steps}"
+        ?expanded="${args.expanded}"
+        ?collapsible="${args.collapsible}"
+      ></ai-loading>
+    </div>
+  `,
+    args: {
+        mode: 'steps',
+        steps: stepsAllCompleted,
+        expanded: true,
+        collapsible: true,
+    },
+};
+export const StepsCollapsed = {
+    render: args => html `
+    <div style="min-width: 360px;">
+      <ai-loading
+        mode="${args.mode}"
+        .steps="${args.steps}"
+        ?expanded="${args.expanded}"
+        ?collapsible="${args.collapsible}"
+      ></ai-loading>
+    </div>
+  `,
+    args: {
+        mode: 'steps',
+        steps: stepsInProgress,
+        expanded: false,
+        collapsible: true,
+    },
+};
+export const StepsCustomTitle = {
+    render: args => html `
+    <div style="min-width: 360px;">
+      <ai-loading
+        mode="${args.mode}"
+        .steps="${args.steps}"
+        header-title="${args.headerTitle}"
+        ?expanded="${args.expanded}"
+        ?collapsible="${args.collapsible}"
+      ></ai-loading>
+    </div>
+  `,
+    args: {
+        mode: 'steps',
+        steps: stepsInProgress,
+        headerTitle: 'خطوات المهمة',
+        expanded: true,
+        collapsible: true,
+    },
+};

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

@@ -0,0 +1,175 @@
+: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);
+}
+
+/* Decorative gradient glow below the input */
+.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;
+}
+
+/* Main container — pill shaped */
+.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);
+}
+
+/* Action buttons (send + optional voice) */
+.actions {
+  display: flex;
+  align-items: center;
+  gap: var(--ai-actions-gap, 8px);
+  flex-shrink: 0;
+}
+
+/* Send Button */
+.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 */
+.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 */
+.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;
+}
+
+/* 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);
+}
+
+/* Disabled state */
+:host([disabled]) .wrapper {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+/* RTL Support */
+:host([dir='ltr']) .textarea {
+  text-align: left;
+  direction: ltr;
+}