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

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

@@ -0,0 +1,78 @@
+import { html } from "lit";
+const meta = {
+    title: 'UI/Rating',
+    component: 'ai-rating',
+    tags: ['autodocs'],
+    argTypes: {
+        question: { control: 'text' },
+        subtitle: { control: 'text' },
+        value: {
+            control: { type: 'select' },
+            options: [null, 1, 2, 3, 4, 5],
+        },
+        disabled: { control: 'boolean' },
+    },
+};
+export default meta;
+const wrapStyle = 'padding: 24px; background: #f3f4f6; direction: rtl; max-width: 420px;';
+/* ─── Standalone ─────────────────────────────────────────────────────────── */
+export const Standalone = {
+    render: args => html `
+    <div style="${wrapStyle}">
+      <ai-rating
+        question="${args.question}"
+        subtitle="${args.subtitle}"
+        value="${args.value}"
+        ?disabled="${args.disabled}"
+      ></ai-rating>
+    </div>
+  `,
+    args: {
+        question: 'كيف كانت تجربتك؟',
+        subtitle: 'رأيك يساعدنا نحسن الخدمة',
+        value: null,
+        disabled: false,
+    },
+};
+/* ─── Inside Card (matches Figma node 1532-65078) ───────────────────────── */
+export const InsideCard = {
+    render: () => html `
+    <div style="${wrapStyle}">
+      <ai-card>
+        <ai-rating
+          question="كيف كانت تجربتك؟"
+          subtitle="رأيك يساعدنا نحسن الخدمة"
+        ></ai-rating>
+      </ai-card>
+    </div>
+  `,
+};
+/* ─── With Pre-selected Value ────────────────────────────────────────────── */
+export const PreSelected = {
+    render: () => html `
+    <div style="${wrapStyle}">
+      <ai-card>
+        <ai-rating
+          question="كيف كانت تجربتك؟"
+          subtitle="رأيك يساعدنا نحسن الخدمة"
+          value="5"
+        ></ai-rating>
+      </ai-card>
+    </div>
+  `,
+};
+/* ─── Disabled ───────────────────────────────────────────────────────────── */
+export const Disabled = {
+    render: () => html `
+    <div style="${wrapStyle}">
+      <ai-card>
+        <ai-rating
+          question="كيف كانت تجربتك؟"
+          subtitle="تم إرسال تقييمك"
+          value="4"
+          disabled
+        ></ai-rating>
+      </ai-card>
+    </div>
+  `,
+};

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

@@ -0,0 +1,69 @@
+/* ─── Custom Properties ──────────────────────────────────────────────────── */
+: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 button ────────────────────────────────────────────────────────── */
+.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;
+}
+
+/* ─── Disabled ───────────────────────────────────────────────────────────── */
+.chip--disabled,
+.chip:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* ─── Label ──────────────────────────────────────────────────────────────── */
+.chip__label {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ai-suggestion-gap);
+}

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

@@ -0,0 +1,93 @@
+import { Host, h } from "@stencil/core";
+export class AiSuggestion {
+    /** Suggestion text label */
+    label = '';
+    /** Disabled state */
+    disabled = false;
+    suggestionClick;
+    handleClick() {
+        if (this.disabled)
+            return;
+        this.suggestionClick.emit(this.label);
+    }
+    render() {
+        return (h(Host, { key: '642ab1b74098e6cd3cebab33a127757cddd2a450' }, h("button", { key: 'd75585d53f5996d06a96bdfad5dc11a85b101b23', 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' })))));
+    }
+    static get is() { return "ai-suggestion"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ai-suggestion.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ai-suggestion.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Suggestion text label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disabled state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "suggestionClick",
+                "name": "suggestionClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+}

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

@@ -0,0 +1,62 @@
+import { html } from "lit";
+const meta = {
+    title: 'UI/Suggestion',
+    component: 'ai-suggestion',
+    tags: ['autodocs'],
+    argTypes: {
+        label: { control: 'text' },
+        disabled: { control: 'boolean' },
+    },
+};
+export default meta;
+const wrapStyle = 'padding: 24px; background: #f3f4f6; direction: rtl; display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start;';
+/* ─── Playground ─────────────────────────────────────────────────────────── */
+export const Playground = {
+    render: args => html `
+    <div style="${wrapStyle}">
+      <ai-suggestion
+        label="${args.label}"
+        ?disabled="${args.disabled}"
+      ></ai-suggestion>
+    </div>
+  `,
+    args: {
+        label: 'وش الفرق بين باقة بلس وبرو',
+        disabled: false,
+    },
+};
+/* ─── Multiple suggestions (typical usage in chat) ──────────────────────── */
+export const SuggestionGroup = {
+    render: () => html `
+    <div style="${wrapStyle}">
+      <ai-suggestion label="وش الفرق بين باقة بلس وبرو"></ai-suggestion>
+      <ai-suggestion label="كيف أضيف منتج جديد؟"></ai-suggestion>
+      <ai-suggestion label="أظهر لي العملاء اللي ما اشتروا هذا الشهر"></ai-suggestion>
+      <ai-suggestion label="ما هي أفضل وقت لإرسال حملة تسويقية؟"></ai-suggestion>
+    </div>
+  `,
+};
+/* ─── Disabled ───────────────────────────────────────────────────────────── */
+export const Disabled = {
+    render: () => html `
+    <div style="${wrapStyle}">
+      <ai-suggestion label="وش الفرق بين باقة بلس وبرو" disabled></ai-suggestion>
+      <ai-suggestion label="كيف أضيف منتج جديد؟" disabled></ai-suggestion>
+    </div>
+  `,
+};
+/* ─── Inside chat (realistic usage) ─────────────────────────────────────── */
+export const InChatContext = {
+    render: () => html `
+    <div style="padding: 24px; background: #f3f4f6; direction: rtl; max-width: 480px; display: flex; flex-direction: column; gap: 16px;">
+      <ai-card>
+        <p style="margin:0; font-size:14px; font-weight:500; color:#333;">أهلاً! كيف يمكنني مساعدتك اليوم؟</p>
+      </ai-card>
+      <div style="display: flex; gap: 8px; flex-wrap: wrap;">
+        <ai-suggestion label="وش الفرق بين باقة بلس وبرو"></ai-suggestion>
+        <ai-suggestion label="أظهر لي أفضل المنتجات مبيعاً"></ai-suggestion>
+        <ai-suggestion label="كيف أحسن معدل التحويل؟"></ai-suggestion>
+      </div>
+    </div>
+  `,
+};

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

@@ -0,0 +1,136 @@
+:host {
+  display: block;
+  width: 100%;
+  font-family: var(--ai-font-family, "PingARLT", sans-serif);
+
+  --ai-input-bg:                    var(--ai-bg-input, #ffffff);
+  --ai-input-border-color:          var(--ai-border-default, #eeeeee);
+  --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);
+  --ai-voice-timer-color:           var(--ai-text-secondary, #737373);
+}
+
+/* Mirrors ai-message-input wrapper */
+.wrapper {
+  position: relative;
+  padding: var(--ai-input-wrapper-padding, 16px);
+}
+
+/* Same glow as message 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;
+}
+
+/* Same pill container as message input */
+.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;
+}
+
+/* Recording row — mirrors .input-row */
+.recording-row {
+  display: flex;
+  align-items: center;
+  gap: var(--ai-input-gap, 10px);
+}
+
+/* Cancel button — same style as inactive send-button */
+.cancel-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, var(--ai-border-default));
+  background-color: var(--ai-send-button-bg, var(--ai-border-default));
+  color: var(--ai-send-button-color, var(--ai-text-secondary));
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+}
+
+.cancel-button:hover {
+  background-color: var(--ai-bg-surface);
+  border-color: var(--ai-bg-surface);
+}
+
+/* Submit button — same style as active send-button */
+.submit-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+  width: 32px;
+  min-width: 32px;
+  padding: 4px 8px;
+  border-radius: 32px;
+  border: 2px solid var(--ai-send-button-active-border, var(--ai-accent));
+  background-color: var(--ai-send-button-active-bg, var(--ai-accent));
+  color: var(--ai-accent-text);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+}
+
+.submit-button: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));
+}
+
+/* Timer */
+.timer {
+  font-size: 13px;
+  font-weight: 500;
+  font-family: var(--ai-font-family, "PingARLT", sans-serif);
+  color: var(--ai-voice-timer-color, #737373);
+  min-width: 36px;
+  text-align: center;
+  flex-shrink: 0;
+}
+
+.timer.warning {
+  color: var(--ai-voice-timer-warning-color, var(--ai-danger-text));
+}
+
+/* Waveform canvas */
+.waveform {
+  flex: 1;
+  height: 32px;
+  max-width: 100%;
+}
+
+/* Error message */
+.error-message {
+  position: absolute;
+  bottom: -40px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--ai-voice-error-bg, var(--ai-danger-bg));
+  color: var(--ai-voice-error-color, var(--ai-danger-text));
+  font-size: 11px;
+  padding: 6px 12px;
+  border-radius: 6px;
+  white-space: nowrap;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  border: 1px solid var(--ai-voice-error-border, var(--ai-danger-border));
+  z-index: 10;
+}