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

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

@@ -0,0 +1,379 @@
+import { Host, h } from "@stencil/core";
+import { iconRegistry } from "../../utils/icon-registry";
+export class AiChatMessage {
+    role = 'user';
+    content = '';
+    format = 'text';
+    agentName = '';
+    timestamp = '';
+    showActions = true;
+    enableRegenerate = false;
+    feedbackValue = null;
+    messageCopy;
+    messageFeedback;
+    messageRegenerate;
+    copySuccess = false;
+    copyTimeout;
+    disconnectedCallback() {
+        if (this.copyTimeout)
+            clearTimeout(this.copyTimeout);
+    }
+    renderIcon(name, size = 16) {
+        const icon = iconRegistry[name];
+        if (!icon)
+            return null;
+        const svg = `<svg width="${size}"  height="${size}" viewBox="${icon.viewBox}" fill="none" xmlns="http://www.w3.org/2000/svg">${icon.content}</svg>`;
+        return h("span", { class: "icon-wrap", innerHTML: svg });
+    }
+    parseMarkdown(text) {
+        let html = text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+        const blocks = [];
+        html = html.replace(/```(?:\w+)?\n?([\s\S]*?)```/g, (_, code) => {
+            const idx = blocks.length;
+            blocks.push(`<pre><code>${code}</code></pre>`);
+            return `\x00BLOCK${idx}\x00`;
+        });
+        html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
+        html = html.replace(/^## (.+)$/gm, '<h2>$1</h2>');
+        html = html.replace(/^### (.+)$/gm, '<h3>$1</h3>');
+        html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+        html = html.replace(/\*([^*\n]+)\*/g, '<em>$1</em>');
+        html = html.replace(/((?:^[ \t]*[-*] .+\n?)+)/gm, match => {
+            const items = match
+                .trim()
+                .split('\n')
+                .filter(l => l.trim())
+                .map(l => `<li>${l.replace(/^[ \t]*[-*] /, '')}</li>`)
+                .join('');
+            return `\x00BLOCK${blocks.length}\x00${(() => {
+                blocks.push(`<ul>${items}</ul>`);
+                return '';
+            })()}`;
+        });
+        html = html.replace(/((?:^[ \t]*\d+\. .+\n?)+)/gm, match => {
+            const items = match
+                .trim()
+                .split('\n')
+                .filter(l => l.trim())
+                .map(l => `<li>${l.replace(/^[ \t]*\d+\. /, '')}</li>`)
+                .join('');
+            return `\x00BLOCK${blocks.length}\x00${(() => {
+                blocks.push(`<ol>${items}</ol>`);
+                return '';
+            })()}`;
+        });
+        html = html
+            .split(/\n{2,}/)
+            .map(chunk => {
+            const trimmed = chunk.trim();
+            if (!trimmed)
+                return '';
+            if (/^\x00BLOCK\d+\x00$/.test(trimmed))
+                return trimmed;
+            return `<p>${trimmed.replace(/\n/g, '<br>')}</p>`;
+        })
+            .join('');
+        html = html.replace(/\x00BLOCK(\d+)\x00/g, (_, i) => blocks[parseInt(i, 10)] || '');
+        return html;
+    }
+    getRenderedContent() {
+        if (!this.content)
+            return '';
+        let html = this.parseMarkdown(this.content);
+        return html;
+    }
+    getRelativeTime() {
+        if (!this.timestamp)
+            return '';
+        try {
+            const date = new Date(this.timestamp);
+            if (isNaN(date.getTime()))
+                return this.timestamp;
+            const diffMin = Math.floor((Date.now() - date.getTime()) / 60000);
+            if (diffMin < 1)
+                return 'الآن';
+            if (diffMin < 60)
+                return `منذ ${diffMin} دقيقة`;
+            const hours = Math.floor(diffMin / 60);
+            if (hours < 24)
+                return `منذ ${hours} ساعة`;
+            return `منذ ${Math.floor(hours / 24)} يوم`;
+        }
+        catch {
+            return this.timestamp;
+        }
+    }
+    async handleCopy() {
+        try {
+            await navigator.clipboard.writeText(this.content);
+        }
+        catch (_) { }
+        this.copySuccess = true;
+        this.messageCopy.emit();
+        this.copyTimeout = setTimeout(() => (this.copySuccess = false), 1500);
+    }
+    handleFeedback(val) {
+        this.feedbackValue = this.feedbackValue === val ? null : val;
+        this.messageFeedback.emit(val);
+    }
+    renderActionsBar() {
+        return (h("div", { class: "actions-bar" }, this.enableRegenerate && h("button", { class: 'action-btn', onClick: () => this.messageRegenerate.emit(), title: "\u0625\u0639\u0627\u062F\u0629 \u062A\u062D\u0645\u064A\u0644" }, this.renderIcon('reload', 16)), h("button", { class: `action-btn copy-btn${this.copySuccess ? ' copy-success' : ''}`, onClick: () => this.handleCopy(), title: "\u0646\u0633\u062E" }, this.renderIcon('copy', 16)), h("div", { class: "feedback-group" }, h("button", { class: `feedback-btn thumbs-down-btn${this.feedbackValue === 'down' ? ' active' : ''}`, onClick: () => this.handleFeedback('down'), title: "\u063A\u064A\u0631 \u0645\u0641\u064A\u062F" }, this.renderIcon('thumbs-down', 16)), h("button", { class: `feedback-btn thumbs-up-btn${this.feedbackValue === 'up' ? ' active' : ''}`, onClick: () => this.handleFeedback('up'), title: "\u0645\u0641\u064A\u062F" }, this.renderIcon('thumbs-up', 16)))));
+    }
+    renderUserMessage() {
+        return (h("div", { class: "message-row user-row" }, h("div", { class: "bubble user-bubble" }, h("div", { class: "message-content", ref: el => {
+                if (!el)
+                    return;
+                if (this.format === 'markdown') {
+                    el.innerHTML = this.getRenderedContent();
+                }
+                else {
+                    el.textContent = this.content;
+                }
+            } }))));
+    }
+    renderAgentMessage() {
+        const showActions = this.showActions;
+        return (h("div", { class: "message-row agent-row" }, h("div", { class: "agent-bubble-wrapper" }, h("div", { class: "bubble agent-bubble" }, this.content && (h("div", { class: "message-content", ref: el => {
+                if (!el)
+                    return;
+                if (this.format === 'markdown') {
+                    el.innerHTML = this.getRenderedContent();
+                }
+                else {
+                    el.textContent = this.content;
+                }
+            } })), h("slot", null), showActions && this.renderActionsBar()), (this.agentName || this.timestamp) && (h("div", { class: "agent-info" }, this.agentName && h("span", { class: "agent-info-name" }, this.agentName), this.agentName && this.timestamp && this.renderIcon('eclipse', 10), this.timestamp && h("span", { class: "agent-info-time" }, this.getRelativeTime()))))));
+    }
+    render() {
+        return h(Host, { key: '77dd0c46a676c211fdfba283d51bd0e0d2594b24' }, this.role === 'user' ? this.renderUserMessage() : this.renderAgentMessage());
+    }
+    static get is() { return "ai-chat-message"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ai-chat-message.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ai-chat-message.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "role": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'user' | 'agent'",
+                    "resolved": "\"agent\" | \"user\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "role",
+                "defaultValue": "'user'"
+            },
+            "content": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "content",
+                "defaultValue": "''"
+            },
+            "format": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'text' | 'markdown'",
+                    "resolved": "\"markdown\" | \"text\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "format",
+                "defaultValue": "'text'"
+            },
+            "agentName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "agent-name",
+                "defaultValue": "''"
+            },
+            "timestamp": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "timestamp",
+                "defaultValue": "''"
+            },
+            "showActions": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-actions",
+                "defaultValue": "true"
+            },
+            "enableRegenerate": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "enable-regenerate",
+                "defaultValue": "false"
+            },
+            "feedbackValue": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "'up' | 'down' | null",
+                    "resolved": "\"down\" | \"up\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "feedback-value",
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "copySuccess": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "messageCopy",
+                "name": "messageCopy",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "messageFeedback",
+                "name": "messageFeedback",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "'up' | 'down'",
+                    "resolved": "\"down\" | \"up\"",
+                    "references": {}
+                }
+            }, {
+                "method": "messageRegenerate",
+                "name": "messageRegenerate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

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

@@ -0,0 +1,164 @@
+import { html } from "lit";
+const meta = {
+    title: 'Chat/Chat Message',
+    component: 'ai-chat-message',
+    tags: ['autodocs'],
+    argTypes: {
+        role: {
+            control: { type: 'select' },
+            options: ['user', 'agent'],
+        },
+        content: { control: 'text' },
+        format: {
+            control: { type: 'select' },
+            options: ['text', 'markdown'],
+        },
+        agentName: { control: 'text' },
+        timestamp: { control: 'text' },
+        isLoading: { control: 'boolean' },
+        showActions: { control: 'boolean' },
+        enableRegenerate: { control: 'boolean' },
+        feedbackValue: {
+            control: { type: 'select' },
+            options: [null, 'up', 'down'],
+        },
+    },
+};
+export default meta;
+const wrapStyle = 'padding: 24px; background: #f3f4f6; direction: rtl;';
+const threadStyle = `${wrapStyle} display: flex; flex-direction: column; gap: 12px; max-width: 480px;`;
+export const UserMessage = {
+    render: args => html `
+    <div style="${wrapStyle}">
+      <ai-chat-message
+        role="${args.role}"
+        content="${args.content}"
+        timestamp="${args.timestamp}"
+      ></ai-chat-message>
+    </div>
+  `,
+    args: {
+        role: 'user',
+        content: 'مرحباً، كيف يمكنني تتبع طلبي؟',
+        timestamp: new Date(Date.now() - 120000).toISOString(),
+    },
+};
+export const AgentMessageSimple = {
+    render: args => html `
+    <div style="${wrapStyle}">
+      <ai-chat-message
+        role="${args.role}"
+        content="${args.content}"
+        agent-name="${args.agentName}"
+        timestamp="${args.timestamp}"
+        ?show-actions="${args.showActions}"
+      ></ai-chat-message>
+    </div>
+  `,
+    args: {
+        role: 'agent',
+        content: 'مرحباً بك! يسعدني مساعدتك في تتبع طلبك. هل يمكنك تزويدي برقم الطلب؟',
+        agentName: 'الرد الآلي | Salla AI',
+        timestamp: new Date().toISOString(),
+        showActions: true,
+    },
+};
+export const AgentMessageMarkdown = {
+    render: args => html `
+    <div style="${wrapStyle}">
+      <ai-chat-message
+        role="${args.role}"
+        content="${args.content}"
+        format="${args.format}"
+        agent-name="${args.agentName}"
+        timestamp="${args.timestamp}"
+        ?show-actions="${args.showActions}"
+        ?enable-regenerate="${args.enableRegenerate}"
+      ></ai-chat-message>
+    </div>
+  `,
+    args: {
+        role: 'agent',
+        content: `## تفاصيل طلبك\n\nوجدت طلبك **#ORD-2024-78945**. إليك الملخص:\n\n- **الحالة**: قيد الشحن\n- **التاريخ**: 10 مارس 2026\n- **المنتجات**: 3 عناصر\n\n### الخطوات التالية\n\nسيصلك *رمز التتبع* خلال ساعة.`,
+        format: 'markdown',
+        agentName: 'الرد الآلي | Salla AI',
+        timestamp: new Date().toISOString(),
+        showActions: true,
+    },
+};
+export const FeedbackSelected = {
+    render: args => html `
+    <div style="${wrapStyle}">
+      <ai-chat-message
+        role="${args.role}"
+        content="${args.content}"
+        agent-name="${args.agentName}"
+        timestamp="${args.timestamp}"
+        feedback-value="${args.feedbackValue}"
+        ?show-actions="${args.showActions}"
+      ></ai-chat-message>
+    </div>
+  `,
+    args: {
+        role: 'agent',
+        content: 'تم شحن طلبك وسيصلك خلال يومين.',
+        agentName: 'الرد الآلي | Salla AI',
+        timestamp: new Date().toISOString(),
+        feedbackValue: 'up',
+        showActions: true,
+    },
+};
+export const WithSlottedContent = {
+    render: () => html `
+    <div style="${wrapStyle} max-width: 480px;">
+      <ai-chat-message
+        role="agent"
+        content="جاري معالجة طلبك..."
+        agent-name="الرد الآلي | Salla AI"
+        timestamp="${new Date().toISOString()}"
+        ?show-actions="${false}"
+      >
+        <ai-execution-steps
+          steps='[{"id":"1","title":"البحث عن الطلب","status":"completed","agent":"الطلبات"},{"id":"2","title":"التحقق من حالة الشحن","status":"executing","agent":"الشحن"},{"id":"3","title":"إعداد رابط التتبع","status":"pending","agent":"التجميع"}]'
+          language="ar"
+          variant="compact"
+          title="خطة التنفيذ"
+        ></ai-execution-steps>
+      </ai-chat-message>
+    </div>
+  `,
+};
+export const ConversationThread = {
+    render: () => html `
+    <div style="${threadStyle}">
+      <ai-chat-message
+        role="user"
+        content="مرحباً، أحتاج مساعدة في تتبع طلبي"
+        timestamp="${new Date(Date.now() - 300000).toISOString()}"
+      ></ai-chat-message>
+
+      <ai-chat-message
+        role="agent"
+        content="مرحباً! يسعدني مساعدتك. هل يمكنك تزويدي برقم الطلب؟"
+        agent-name="الرد الآلي | Salla AI"
+        timestamp="${new Date(Date.now() - 240000).toISOString()}"
+        show-actions
+      ></ai-chat-message>
+
+      <ai-chat-message
+        role="user"
+        content="بالتأكيد، رقمه #ORD-2024-78945"
+        timestamp="${new Date(Date.now() - 180000).toISOString()}"
+      ></ai-chat-message>
+
+      <ai-chat-message
+        role="agent"
+        content="**وجدت طلبك!** حالته الآن *قيد الشحن* وسيصلك خلال يومين عمل.\n\n- رقم التتبع: **TRK-9876543**\n- شركة الشحن: أرامكس"
+        format="markdown"
+        agent-name="الرد الآلي | Salla AI"
+        timestamp="${new Date().toISOString()}"
+        show-actions
+      ></ai-chat-message>
+    </div>
+  `,
+};

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

@@ -0,0 +1,9 @@
+:host {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+svg {
+  display: block;
+}

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

@@ -0,0 +1,76 @@
+import { Host, h } from "@stencil/core";
+import { iconRegistry } from "../../utils/icon-registry";
+export class AiIcon {
+    /** Icon name from the registry */
+    name;
+    /** Size in pixels for width and height */
+    size = 16;
+    render() {
+        const icon = iconRegistry[this.name];
+        if (!icon)
+            return null;
+        return (h(Host, null, h("svg", { width: this.size, height: this.size, viewBox: icon.viewBox, xmlns: "http://www.w3.org/2000/svg", ref: (el) => el && (el.innerHTML = icon.content), "aria-hidden": "true" })));
+    }
+    static get is() { return "ai-icon"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ai-icon.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ai-icon.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconName",
+                    "resolved": "\"arrow-right\" | \"arrow-up\" | \"cancel\" | \"check\" | \"chevron-down\" | \"copy\" | \"drag\" | \"eclipse\" | \"hand\" | \"mic\" | \"online-dot\" | \"pencil-edit\" | \"reload\" | \"send\" | \"share\" | \"sparkle\" | \"thumbs-down\" | \"thumbs-up\" | \"watermark\"",
+                    "references": {
+                        "IconName": {
+                            "location": "import",
+                            "path": "../../utils/icon-registry",
+                            "id": "src/utils/icon-registry.ts::IconName",
+                            "referenceLocation": "IconName"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon name from the registry"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "size": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size in pixels for width and height"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "16"
+            }
+        };
+    }
+}