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

package/dist/collection/components/ai-chat-container/ai-chat-container.stories.js

@@ -0,0 +1,160 @@
+import { html, render } from "lit";
+const meta = {
+    title: 'Chat/Chat Container',
+    component: 'ai-chat-container',
+    tags: ['autodocs'],
+    argTypes: {
+        isOpen: {
+            control: 'boolean',
+            description: 'Controls visibility of the chat panel',
+        },
+        position: {
+            control: { type: 'select' },
+            options: ['left', 'right', 'float'],
+            description: 'Position of the panel',
+        },
+        width: {
+            control: 'text',
+            description: 'Width of the panel (CSS value, e.g., "400px", "30%", "28rem")',
+        },
+        floatHeight: {
+            control: 'text',
+            description: 'Height of the panel when position="float" (CSS value, e.g., "600px")',
+        },
+        autoScroll: {
+            control: 'boolean',
+            description: 'Enable/disable auto-scroll to latest message',
+        },
+        showWatermark: {
+            control: 'boolean',
+            description: 'Show AI watermark in the top half of the container',
+        },
+    },
+};
+export default meta;
+export const StickyRight = {
+    render: args => html `
+    <div style="position: relative; height: 600px; background: #f3f4f6;">
+      <ai-chat-container
+        ?is-open="${args.isOpen}"
+        position="${args.position}"
+        width="${args.width}"
+        ?auto-scroll="${args.autoScroll}"
+        ?show-watermark="${args.showWatermark}"
+        float-height="${args.floatHeight}"
+      ></ai-chat-container>
+    </div>
+  `,
+    args: {
+        isOpen: true,
+        position: 'right',
+        width: '28rem',
+        autoScroll: true,
+        showWatermark: true,
+    },
+};
+export const FloatMode = {
+    render: args => html `
+    <div style="height: 700px; background: #f3f4f6; position: relative;">
+      <p style="padding: 2rem; color: #6b7280;">The floating panel appears in the top-left corner. Drag it by the grip icon in the header.</p>
+      <ai-chat-container
+        ?is-open="${args.isOpen}"
+        position="${args.position}"
+        width="${args.width}"
+        float-height="${args.floatHeight}"
+        ?auto-scroll="${args.autoScroll}"
+        ?show-watermark="${args.showWatermark}"
+      >
+        <ai-chat-header slot="header" conversation="AI Assistant" is-draggable></ai-chat-header>
+      </ai-chat-container>
+    </div>
+  `,
+    args: {
+        isOpen: true,
+        position: 'float',
+        width: '28rem',
+        floatHeight: '600px',
+        autoScroll: true,
+        showWatermark: true,
+    },
+};
+export const ShowcaseConversation = {
+    render: () => {
+        const steps = JSON.stringify([
+            { id: '1', title: 'مقارنة الباقات المتاحة', status: 'completed' },
+            { id: '2', title: 'تحليل الفروقات والمزايا', status: 'completed' },
+            { id: '3', title: 'تجهيز التوصية المناسبة', status: 'executing' },
+            { id: '4', title: 'إعداد الروابط والمصادر', status: 'pending' },
+        ]);
+        const t = (offsetMs) => new Date(Date.now() - offsetMs).toISOString();
+        const comparisonContent = `باقة **بلس** مناسبة للمتاجر الصغيرة والمتوسطة، بينما باقة **برو** مصممة للمتاجر الكبيرة اللي تحتاج منتجات غير محدودة وعمولات أقل ودعم فني على مدار الساعة.\n\n**التوصية:** إذا كنت تتوقع نمواً سريعاً، باقة **برو** هي الأنسب.`;
+        const root = document.createElement('div');
+        let showVoice = false;
+        const update = () => {
+            render(html `
+          <div style="position: relative; height: 700px; background: #f3f4f6;">
+            <ai-chat-container is-open position="float" float-height="800px" width="28rem" auto-scroll>
+              <ai-chat-header slot="header" is-draggable mode="agent" conversation="مساعد سلة"></ai-chat-header>
+
+              <div style="padding:1rem; display:flex; flex-direction:column; gap:0.75rem;">
+                <ai-chat-message role="agent" enable-regenerate content="أهلاً وسهلاً! أنا مساعد سلة الذكي 🤖 كيف أقدر أساعدك اليوم؟" agent-name="سلة AI" timestamp="${t(300000)}">
+                  <div style="display:flex; flex-wrap:wrap; gap:0.5rem;">
+                    <ai-suggestion label="وش الباقات المتاحة؟"></ai-suggestion>
+                    <ai-suggestion label="كيف أرقي باقتي؟"></ai-suggestion>
+                    <ai-suggestion label="مقارنة بلس وبرو"></ai-suggestion>
+                  </div>
+                </ai-chat-message>
+
+                <ai-chat-message role="user" content="وش الفرق بين باقة بلس وبرو" timestamp="${t(240000)}"></ai-chat-message>
+
+                <ai-loading mode="thinking" status-text="جاري التحميل..."></ai-loading>
+
+                <ai-loading mode="steps" status-text="جاري التحليل..." steps="${steps}" expanded collapsible></ai-loading>
+
+                <ai-chat-message role="agent" .content=${comparisonContent} format="markdown" agent-name="سلة AI" timestamp="${t(180000)}" show-actions>
+                  <div style="display:flex; flex-wrap:wrap; gap:0.5rem;">
+                    <ai-suggestion label="كيف أرقي باقتي؟"></ai-suggestion>
+                    <ai-suggestion label="ما هي طرق الدفع؟"></ai-suggestion>
+                  </div>
+                </ai-chat-message>
+                <ai-card>
+                  <p >للاطلاع على التفاصيل الكاملة لجميع الباقات وأسعارها:</p>
+                  <ai-link label="صفحة الباقات" href="#"></ai-link>
+                </ai-card>
+
+                <ai-chat-message role="user" content="كيف أرقي باقتي؟" timestamp="${t(120000)}"></ai-chat-message>
+
+                <ai-chat-message
+                  role="agent"
+                  .content=${'ترقية باقتك سهلة وسريعة! اتبع الخطوات التالية:\n\n1. سجّل دخول إلى لوحة تحكم سلة\n2. اذهب إلى **الإعدادات** ← **الباقة والفوترة**\n3. اختر الباقة المطلوبة\n4. أكمل عملية الدفع\n\nسيتم تفعيل الباقة الجديدة فوراً بعد إتمام الدفع ✅'}
+                  format="markdown"
+                  agent-name="سلة AI"
+                  timestamp="${t(60000)}"
+                  feedback-value="up"
+                  show-actions
+                ></ai-chat-message>
+                <ai-card>
+                  <ai-rating question="كيف كانت تجربتك مع المساعد؟" subtitle="رأيك يساعدنا على التحسين"></ai-rating>
+                </ai-card>
+              </div>
+
+              ${showVoice
+                ? html `<ai-voice-input
+                    slot="footer"
+                    auto-start
+                    @audioRecorded=${() => { showVoice = false; update(); }}
+                    @recordingCancel=${() => { showVoice = false; update(); }}
+                  ></ai-voice-input>`
+                : html `<ai-message-input
+                    slot="footer"
+                    placeholder="اكتب رسالتك هنا..."
+                    @voiceButtonClick=${() => { showVoice = true; update(); }}
+                  ></ai-message-input>`}
+            </ai-chat-container>
+          </div>
+        `, root);
+        };
+        update();
+        return root;
+    },
+};

package/dist/collection/components/ai-chat-header/ai-chat-header.css

@@ -0,0 +1,186 @@
+:host {
+  display: block;
+  font-family: var(--ai-font-family, "PingARLT", sans-serif);
+}
+
+/* ── Container ──────────────────────────────────────────────────── */
+.header-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 16px;
+  background: var(--ai-bg-card, white);
+  border-bottom: 1px solid var(--ai-border-light, #f4f4f4);
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.header-container {
+  direction: rtl;
+}
+
+/* ── Action & Back Buttons ──────────────────────────────────────── */
+.drag-btn {
+  cursor: grab;
+  color: var(--ai-text-muted);
+}
+
+.drag-btn:active {
+  cursor: grabbing;
+}
+
+.action-btn,
+.back-btn {
+  width: 40px;
+  height: 40px;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--ai-bg-card, white);
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  flex-shrink: 0;
+  color: var(--ai-text-primary);
+  transition: background 0.15s ease;
+}
+
+.action-btn:hover,
+.back-btn:hover {
+  background: var(--ai-bg-surface, #f9fafb);
+}
+
+.action-btn:focus-visible,
+.back-btn:focus-visible {
+  outline: 2px solid var(--ai-focus-ring);
+  outline-offset: 2px;
+}
+
+.action-btn:active,
+.back-btn:active {
+  background: var(--ai-bg-surface, #f3f4f6);
+}
+
+/* ── Actions Group ──────────────────────────────────────────────── */
+.actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+/* ── Content Area ───────────────────────────────────────────────── */
+.content {
+  flex: 1 0 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  min-width: 0;
+}
+
+.content.agent {
+  gap: 4px;
+  height: 40px;
+}
+
+.content.human {
+  gap: 8px;
+}
+
+/* ── Dropdown Trigger (agent mode) ──────────────────────────────── */
+.dropdown-trigger {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  flex-shrink: 0;
+  color: var(--ai-text-primary);
+}
+
+.dropdown-trigger:focus-visible {
+  outline: 2px solid var(--ai-focus-ring);
+  outline-offset: 2px;
+}
+
+/* ── Title (agent mode) ─────────────────────────────────────────── */
+.title {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--ai-text-primary, #444444);
+  white-space: nowrap;
+  line-height: normal;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ── Avatar & Online Dot (human mode) ──────────────────────────── */
+.avatar-wrapper {
+  position: relative;
+  width: 40px;
+  height: 40px;
+  flex-shrink: 0;
+}
+
+.avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 9999px;
+  border: 1px solid var(--ai-border-default, #eeeeee);
+  object-fit: cover;
+  display: block;
+}
+
+.online-dot {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 10px;
+  height: 10px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--ai-bg-card); /* used as stroke to match card bg in both themes */
+}
+
+/* ── Text Block (human mode) ────────────────────────────────────── */
+.text-block {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 0;
+  flex-shrink: 0;
+}
+
+
+.agent-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--ai-text-primary, #333333);
+  line-height: 20px;
+  white-space: nowrap;
+}
+
+.agent-status {
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--ai-text-secondary, #737373);
+  line-height: 20px;
+  white-space: nowrap;
+}
+
+/* ── Icon Wrapper ───────────────────────────────────────────────── */
+.icon-wrap {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.icon-wrap svg {
+  display: block;
+}

package/dist/collection/components/ai-chat-header/ai-chat-header.js

@@ -0,0 +1,311 @@
+import { Host, h } from "@stencil/core";
+import { iconRegistry } from "../../utils/icon-registry";
+export class AiChatHeader {
+    /** Layout variant */
+    mode = 'agent';
+    /** Agent mode: conversation title */
+    conversation = 'محادثة جديدة';
+    /** Human mode: agent's display name */
+    agentName = '';
+    /** Human mode: status label (e.g. "Active") */
+    agentStatus = '';
+    /** Human mode: avatar image URL */
+    agentAvatar = '';
+    /** Human mode: show the back button */
+    showBack = true;
+    isDraggable = false;
+    /** Cancel / close button */
+    closeClick;
+    /** Pencil-edit button (agent mode) */
+    editClick;
+    /** Title / chevron click → open conversation list (agent mode) */
+    dropdownClick;
+    /** Chevron-down button (human mode) */
+    moreClick;
+    /** Back-arrow button (human mode) */
+    backClick;
+    /**
+     * Fired on pointerdown of the drag handle.
+     * Composed + bubbling so ai-chat-container can receive it across shadow roots.
+     */
+    headerDragStart;
+    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 });
+    }
+    renderAgentMode() {
+        return [
+            this.isDraggable && (h("button", { class: "action-btn drag-btn", onPointerDown: (e) => {
+                    e.preventDefault();
+                    this.headerDragStart.emit({ clientX: e.clientX, clientY: e.clientY });
+                } }, this.renderIcon('drag', 11, 15))),
+            h("div", { class: "content agent" }, h("span", { class: "title" }, this.conversation), h("button", { class: "dropdown-trigger", onClick: () => this.dropdownClick.emit() }, this.renderIcon('chevron-down', 24, 24))),
+            h("div", { class: "actions" }, h("button", { class: "action-btn", onClick: () => this.editClick.emit() }, this.renderIcon('pencil-edit', 22, 22)), h("button", { class: "action-btn", onClick: () => this.moreClick.emit() }, this.renderIcon('hand', 22, 22)), h("button", { class: "action-btn", onClick: () => this.closeClick.emit() }, this.renderIcon('cancel', 22, 22))),
+        ];
+    }
+    renderHumanMode() {
+        return [
+            this.isDraggable && (h("button", { class: "action-btn drag-btn", onPointerDown: (e) => {
+                    e.preventDefault();
+                    this.headerDragStart.emit({ clientX: e.clientX, clientY: e.clientY });
+                } }, this.renderIcon('drag', 11, 15))),
+            h("div", { class: "content human" }, this.showBack && (h("button", { class: "back-btn", onClick: () => this.backClick.emit() }, this.renderIcon('arrow-right', 24, 24))), h("div", { class: "avatar-wrapper" }, h("img", { class: "avatar", src: this.agentAvatar, alt: this.agentName }), h("span", { class: "online-dot" }, this.renderIcon('online-dot', 10, 10))), h("div", { class: "text-block" }, h("span", { class: "agent-name" }, this.agentName), h("span", { class: "agent-status" }, this.agentStatus))),
+            h("div", { class: "actions" }, h("button", { class: "action-btn", onClick: () => this.moreClick.emit() }, this.renderIcon('hand', 22, 22)), h("button", { class: "action-btn", onClick: () => this.closeClick.emit() }, this.renderIcon('cancel', 22, 22))),
+        ];
+    }
+    render() {
+        return (h(Host, { key: '93fe332abe1339f7235aa18717d63aa65d9aac13' }, h("div", { key: 'b496695911f7d1f959c4f98506b0d230e77a86c3', class: "header-container" }, this.mode === 'agent' ? this.renderAgentMode() : this.renderHumanMode())));
+    }
+    static get is() { return "ai-chat-header"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ai-chat-header.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ai-chat-header.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "mode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'agent' | 'human'",
+                    "resolved": "\"agent\" | \"human\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Layout variant"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mode",
+                "defaultValue": "'agent'"
+            },
+            "conversation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Agent mode: conversation title"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "conversation",
+                "defaultValue": "'\u0645\u062D\u0627\u062F\u062B\u0629 \u062C\u062F\u064A\u062F\u0629'"
+            },
+            "agentName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Human mode: agent's display name"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "agent-name",
+                "defaultValue": "''"
+            },
+            "agentStatus": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Human mode: status label (e.g. \"Active\")"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "agent-status",
+                "defaultValue": "''"
+            },
+            "agentAvatar": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Human mode: avatar image URL"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "agent-avatar",
+                "defaultValue": "''"
+            },
+            "showBack": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Human mode: show the back button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-back",
+                "defaultValue": "true"
+            },
+            "isDraggable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-draggable",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "closeClick",
+                "name": "closeClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Cancel / close button"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "editClick",
+                "name": "editClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Pencil-edit button (agent mode)"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "dropdownClick",
+                "name": "dropdownClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Title / chevron click \u2192 open conversation list (agent mode)"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "moreClick",
+                "name": "moreClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Chevron-down button (human mode)"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "backClick",
+                "name": "backClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Back-arrow button (human mode)"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "headerDragStart",
+                "name": "headerDragStart",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired on pointerdown of the drag handle.\nComposed + bubbling so ai-chat-container can receive it across shadow roots."
+                },
+                "complexType": {
+                    "original": "{ clientX: number; clientY: number }",
+                    "resolved": "{ clientX: number; clientY: number; }",
+                    "references": {}
+                }
+            }];
+    }
+}