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

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

@@ -0,0 +1,192 @@
+import { Host, h } from "@stencil/core";
+export class MessageInput {
+    el;
+    /** Placeholder text for the textarea */
+    placeholder = 'ايش في بالك؟';
+    /** Whether the input is disabled */
+    disabled = false;
+    /** Whether to show the voice recording button */
+    showVoiceButton = true;
+    inputValue = '';
+    textareaRef;
+    /** Event emitted when a message is sent */
+    sendMessage;
+    /** Event emitted when the voice button is clicked — caller controls rendering the voice recorder */
+    voiceButtonClick;
+    /** 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`;
+            this.textareaRef.focus();
+        }
+    }
+    handleSendMessage = () => {
+        if (!this.inputValue.trim() || this.disabled)
+            return;
+        this.sendMessage.emit(this.inputValue.trim());
+        this.inputValue = '';
+        if (this.textareaRef) {
+            this.textareaRef.style.height = 'auto';
+        }
+    };
+    handleKeyPress = (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            this.handleSendMessage();
+        }
+    };
+    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`;
+        }
+    };
+    render() {
+        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" }))))));
+    }
+    static get is() { return "ai-message-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ai-message-input.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ai-message-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text for the textarea"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "'\u0627\u064A\u0634 \u0641\u064A \u0628\u0627\u0644\u0643\u061F'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the input is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "showVoiceButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the voice recording button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-voice-button",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "inputValue": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sendMessage",
+                "name": "sendMessage",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when a message is sent"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "voiceButtonClick",
+                "name": "voiceButtonClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the voice button is clicked \u2014 caller controls rendering the voice recorder"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setInputValue": {
+                "complexType": {
+                    "signature": "(value: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "value",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Set the textarea value programmatically (e.g. after speech-to-text transcription)",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/ai-message-input/ai-message-input.stories.js

@@ -0,0 +1,125 @@
+import { html } from "lit";
+const meta = {
+    title: 'Chat/Message Input',
+    component: 'ai-message-input',
+    tags: ['autodocs'],
+    argTypes: {
+        placeholder: {
+            control: 'text',
+            description: 'Placeholder text for the textarea',
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Whether the input is disabled',
+        },
+        showVoiceButton: {
+            control: 'boolean',
+            description: 'Show the mic button — emits voiceButtonClick when pressed so the caller can render ai-voice-input',
+        },
+    },
+    parameters: {
+        docs: {
+            description: {
+                component: `
+A pill-shaped chat input component.
+
+## Events
+- \`sendMessage\` — emitted with the trimmed message string when the user sends
+- \`voiceButtonClick\` — emitted when the mic button is pressed; the caller is responsible for showing \`ai-voice-input\`
+
+## Methods
+- \`setInputValue(text: string)\` — populates the textarea programmatically (e.g. after speech-to-text transcription)
+        `,
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    render: args => html `
+    <ai-message-input
+      placeholder=${args.placeholder || 'ايش في بالك؟'}
+      ?disabled=${args.disabled}
+      ?show-voice-button=${args.showVoiceButton !== false}
+      @sendMessage=${(e) => console.log('sendMessage:', e.detail)}
+      @voiceButtonClick=${() => console.log('voiceButtonClick')}
+    ></ai-message-input>
+  `,
+    args: {
+        placeholder: 'ايش في بالك؟',
+        disabled: false,
+        showVoiceButton: true,
+    },
+};
+export const Disabled = {
+    render: () => html `<ai-message-input placeholder="ايش في بالك؟" disabled></ai-message-input>`,
+};
+/**
+ * Demonstrates the full voice toggle pattern:
+ * clicking the mic button hides the message input and shows ai-voice-input.
+ * After recording (or cancel) the voice input is hidden and message input is restored.
+ * When audio is recorded, setInputValue() pre-fills the textarea for review.
+ */
+export const WithVoiceToggle = {
+    render: () => html `
+    <div id="voice-toggle-demo" style="max-width: 600px;">
+      <ai-message-input
+        id="msg-input"
+        placeholder="اكتب رسالة أو اضغط على الميكروفون"
+        @sendMessage=${(e) => {
+        const log = document.getElementById('toggle-log');
+        if (log)
+            log.innerHTML += `<div style="color:#10b981;">✓ Message sent: "${e.detail}"</div>`;
+    }}
+        @voiceButtonClick=${() => {
+        const msg = document.getElementById('msg-input');
+        const voice = document.getElementById('voice-recorder');
+        if (msg)
+            msg.style.display = 'none';
+        if (voice) {
+            voice.style.display = 'block';
+            voice.autoStart = true;
+        }
+    }}
+      ></ai-message-input>
+
+      <ai-voice-input
+        id="voice-recorder"
+        auto-start
+        style="display:none;"
+        @audioRecorded=${(e) => {
+        const msg = document.getElementById('msg-input');
+        const voice = document.getElementById('voice-recorder');
+        if (voice)
+            voice.style.display = 'none';
+        if (msg) {
+            msg.style.display = 'block';
+            // In a real app: send e.detail.blob to Whisper, then call setInputValue()
+            msg.setInputValue(`[Audio ${e.detail.duration}s — paste transcription here]`);
+        }
+        const log = document.getElementById('toggle-log');
+        if (log)
+            log.innerHTML += `<div style="color:#8b5cf6;">🎤 Audio recorded (${e.detail.duration}s, ${(e.detail.blob.size / 1024).toFixed(1)} KB)</div>`;
+    }}
+        @recordingCancel=${() => {
+        const msg = document.getElementById('msg-input');
+        const voice = document.getElementById('voice-recorder');
+        if (voice)
+            voice.style.display = 'none';
+        if (msg)
+            msg.style.display = 'block';
+        const log = document.getElementById('toggle-log');
+        if (log)
+            log.innerHTML += `<div style="color:#737373;">✕ Recording cancelled</div>`;
+    }}
+      ></ai-voice-input>
+
+      <div
+        id="toggle-log"
+        style="margin-top:1rem;padding:1rem;background:#f5f5f5;border-radius:8px;font-family:monospace;font-size:13px;min-height:80px;max-height:200px;overflow-y:auto;"
+      >
+        <div style="color:#666;font-weight:bold;margin-bottom:4px;">Event log:</div>
+      </div>
+    </div>
+  `,
+};

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

@@ -0,0 +1,145 @@
+/* ─── Custom Properties ──────────────────────────────────────────────────── */
+: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;
+
+  /* hover */
+  --ai-rating-btn-bg-hover:      var(--ai-bg-surface, #f9fafb);
+  --ai-rating-btn-border-hover:  1px solid var(--ai-border-default);
+
+  /* selected — matches Figma warning palette */
+  --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);
+
+  /* selected label */
+  --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);
+}
+
+/* ─── Wrapper ────────────────────────────────────────────────────────────── */
+.rating {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--ai-rating-gap);
+  width: 100%;
+}
+
+/* ─── Text block ─────────────────────────────────────────────────────────── */
+.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);
+}
+
+/* ─── Emoji row ──────────────────────────────────────────────────────────── */
+.rating__icons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  width: 100%;
+  flex-wrap: wrap;
+}
+
+/* ─── Emoji button ───────────────────────────────────────────────────────── */
+.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);
+}
+
+/* ─── Selected state ─────────────────────────────────────────────────────── */
+.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;
+}
+
+/* ─── Disabled ───────────────────────────────────────────────────────────── */
+.emoji-btn--disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* ─── Emoji icon ─────────────────────────────────────────────────────────── */
+.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;
+}
+
+/* ─── Selected label ─────────────────────────────────────────────────────── */
+.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); }
+}

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

@@ -0,0 +1,176 @@
+import { Host, h } from "@stencil/core";
+const EMOJI_OPTIONS = [
+    { value: 1, emoji: '😠', label: 'سيئ جداً' },
+    { value: 2, emoji: '☹️', label: 'سيئ' },
+    { value: 3, emoji: '😐', label: 'مقبول' },
+    { value: 4, emoji: '🙂', label: 'جيد' },
+    { value: 5, emoji: '😍', label: 'ممتاز' },
+];
+export class AiRating {
+    /** Main question label */
+    question = 'كيف كانت تجربتك؟';
+    /** Sub-label below the question */
+    subtitle = 'رأيك يساعدنا نحسن الخدمة';
+    /** Currently selected rating value (1–5) */
+    value = null;
+    /** Disable interaction */
+    disabled = false;
+    hovered = null;
+    ratingChange;
+    select(val) {
+        if (this.disabled)
+            return;
+        this.value = this.value === val ? null : val;
+        if (this.value !== null)
+            this.ratingChange.emit(this.value);
+    }
+    get selectedLabel() {
+        if (this.value === null)
+            return null;
+        return EMOJI_OPTIONS.find(o => o.value === this.value)?.label ?? null;
+    }
+    render() {
+        const label = this.selectedLabel;
+        return (h(Host, { key: 'e540c94762552fbf2bc8a60f37a9059e1f9b6610' }, h("div", { key: '0e5ff97267ee692a19e6e1ba5d6f32b456d6401e', class: "rating" }, h("div", { key: '00c30cb515c0d51d7c1f9e8393f15b1d0475ffc7', class: "rating__text" }, h("p", { key: '2a390c9465eed30fac0d8f8291f6a7c2dab35a47', class: "rating__question" }, this.question), h("p", { key: '09a1010df00e31aa05946e6a1cf1fc23d9fa77a0', class: "rating__subtitle" }, this.subtitle)), h("div", { key: '777a46e4157d1c1bc3691bdd0783a7023f7e3d8d', class: "rating__icons", role: "group", "aria-label": this.question }, EMOJI_OPTIONS.map(opt => {
+            const isActive = this.value === opt.value;
+            const isHovered = this.hovered === opt.value;
+            return (h("button", { key: opt.value, class: {
+                    'emoji-btn': true,
+                    'emoji-btn--active': isActive,
+                    'emoji-btn--hovered': isHovered && !isActive,
+                    'emoji-btn--disabled': this.disabled,
+                }, "aria-label": opt.label, "aria-pressed": isActive ? 'true' : 'false', disabled: this.disabled, onClick: () => this.select(opt.value), onMouseEnter: () => (this.hovered = opt.value), onMouseLeave: () => (this.hovered = null) }, h("span", { class: "emoji-btn__icon", "aria-hidden": "true" }, opt.emoji)));
+        })), label && h("p", { key: 'bba5b2ff2bcdd371cb3aefc761a5d7653bbf8630', class: "rating__selected-label" }, label))));
+    }
+    static get is() { return "ai-rating"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ai-rating.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ai-rating.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "question": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Main question label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "question",
+                "defaultValue": "'\u0643\u064A\u0641 \u0643\u0627\u0646\u062A \u062A\u062C\u0631\u0628\u062A\u0643\u061F'"
+            },
+            "subtitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sub-label below the question"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "subtitle",
+                "defaultValue": "'\u0631\u0623\u064A\u0643 \u064A\u0633\u0627\u0639\u062F\u0646\u0627 \u0646\u062D\u0633\u0646 \u0627\u0644\u062E\u062F\u0645\u0629'"
+            },
+            "value": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "RatingValue | null",
+                    "resolved": "1 | 2 | 3 | 4 | 5",
+                    "references": {
+                        "RatingValue": {
+                            "location": "local",
+                            "path": "/home/ahmed/Desktop/Salla/Dev/multi-agent/ui-ai-kit/packages/core/src/components/ai-rating/ai-rating.tsx",
+                            "id": "src/components/ai-rating/ai-rating.tsx::RatingValue"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Currently selected rating value (1\u20135)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "null"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disable interaction"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hovered": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "ratingChange",
+                "name": "ratingChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "RatingValue",
+                    "resolved": "1 | 2 | 3 | 4 | 5",
+                    "references": {
+                        "RatingValue": {
+                            "location": "local",
+                            "path": "/home/ahmed/Desktop/Salla/Dev/multi-agent/ui-ai-kit/packages/core/src/components/ai-rating/ai-rating.tsx",
+                            "id": "src/components/ai-rating/ai-rating.tsx::RatingValue"
+                        }
+                    }
+                }
+            }];
+    }
+}