@salla.sa/ui-ai-kit-core 1.1.0 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salla.sa/ui-ai-kit-core",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
   "types": "dist/types/index.d.ts",
@@ -42,34 +42,26 @@
     "test.watch": "stencil test --spec --e2e --watchAll",
     "generate": "stencil generate",
     "clean": "rm -rf dist loader/index.js loader/index.cjs loader/index.d.ts",
-    "storybook": "storybook dev -p 6006",
-    "storybook:clean": "rm -rf node_modules/.cache/storybook && npm run storybook",
-    "build-storybook": "storybook build",
-    "dev": "concurrently \"npm run build:watch\" \"npm run storybook\" --names \"stencil,storybook\" --prefix-colors \"cyan,magenta\""
+    "dev": "npm run build:watch"
   },
   "peerDependencies": {
     "@salla.sa/ui-merchant-styles": "*"
   },
+  "dependencies": {
+    "dompurify": "^3.3.3"
+  },
   "devDependencies": {
-    "@chromatic-com/storybook": "^5.0.1",
     "@salla.sa/ui-merchant-styles": "0.307.5",
     "@stencil/core": "^4.27.1",
     "@stencil/react-output-target": "^1.4.2",
-    "@storybook/addon-a11y": "^10.2.16",
-    "@storybook/addon-docs": "^10.2.16",
-    "@storybook/addon-vitest": "^10.2.16",
-    "@storybook/web-components-vite": "^10.2.16",
     "@types/jest": "^29.5.14",
     "@types/node": "^22.13.5",
     "@vitest/browser-playwright": "^4.0.18",
     "@vitest/coverage-v8": "^4.0.18",
-    "concurrently": "^8.2.2",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
-    "lit": "^3.3.2",
     "playwright": "^1.58.2",
     "puppeteer": "^24.3.0",
-    "storybook": "^10.2.16",
     "vitest": "^4.0.18"
   },
   "license": "MIT"

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

@@ -1,52 +0,0 @@
-import { html } from "lit";
-const meta = {
-    title: 'UI/Card',
-    component: 'ai-card',
-    tags: ['autodocs'],
-    argTypes: {
-        noPadding: { control: 'boolean' },
-        noShadow: { control: 'boolean' },
-    },
-};
-export default meta;
-const wrapStyle = 'padding: 24px; background: #f3f4f6; direction: rtl; max-width: 420px;';
-/* ─── AI Reply (matches Figma node 1422-47585) ───────────────────────────── */
-export const AiReply = {
-    render: () => html `
-    <div style="${wrapStyle}">
-      <ai-card>
-        <p style="margin:0; font-size:14px; font-weight:500; color:#333; line-height:20px;">
-          أهلاً بك في ذكاء سلة الاصطناعي!
-        </p>
-        <p style="margin:0; font-size:14px; color:#737373; line-height:20px;">
-          أنا هنا لمساعدتك في إنشاء شرائح عملاء قوية لحملاتك التسويقية باستخدام لغة بسيطة وتفاعلية.
-        </p>
-        <p style="margin:0; font-size:14px; color:#737373; line-height:20px;">
-          يمكنك أن تطلب مني العثور على العملاء بناءً على تاريخ مشترياتهم، مثل "أظهر لي كل من اشترى الشهر الماضي." ما نوع الجمهور الذي ترغب في بنائه اليوم؟
-        </p>
-      </ai-card>
-    </div>
-  `,
-};
-/* ─── With Rating (Figma node 1532-65078) ────────────────────────────────── */
-export const WithRating = {
-    render: () => html `
-    <div style="${wrapStyle}">
-      <ai-card>
-        <ai-rating></ai-rating>
-      </ai-card>
-    </div>
-  `,
-};
-/* ─── No Padding ─────────────────────────────────────────────────────────── */
-export const NoPadding = {
-    render: () => html `
-    <div style="${wrapStyle}">
-      <ai-card no-padding>
-        <div style="padding:16px; background:#f4f4f4; color:#333; font-size:14px;">
-          محتوى بدون padding من البطاقة
-        </div>
-      </ai-card>
-    </div>
-  `,
-};

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

@@ -1,160 +0,0 @@
-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.stories.js

@@ -1,138 +0,0 @@
-import { html } from "lit";
-const meta = {
-    title: 'Chat/Chat Header',
-    component: 'ai-chat-header',
-    tags: ['autodocs'],
-    argTypes: {
-        mode: {
-            control: { type: 'select' },
-            options: ['agent', 'human'],
-            description: 'Layout variant',
-        },
-        conversation: {
-            control: 'text',
-            description: 'Conversation title (agent mode)',
-        },
-        agentName: {
-            control: 'text',
-            description: 'Human agent name (human mode)',
-        },
-        agentStatus: {
-            control: 'text',
-            description: 'Human agent status (human mode)',
-        },
-        agentAvatar: {
-            control: 'text',
-            description: 'Human agent avatar URL (human mode)',
-        },
-        showBack: {
-            control: 'boolean',
-            description: 'Show back button (human mode)',
-        },
-        isDraggable: {
-            control: 'boolean',
-            description: 'Show drag handle (used when container is draggable)',
-        },
-    },
-};
-export default meta;
-export const AgentMode = {
-    render: args => html `
-    <ai-chat-header
-      mode="${args.mode}"
-      conversation="${args.conversation}"
-      ?isDraggable="${args.isDraggable}"
-      @closeClick="${() => console.log('Close clicked')}"
-      @editClick="${() => console.log('Edit clicked')}"
-      @dropdownClick="${() => console.log('Dropdown clicked')}"
-    ></ai-chat-header>
-  `,
-    args: {
-        mode: 'agent',
-        conversation: 'محادثة جديدة',
-        isDraggable: true,
-    },
-};
-export const HumanMode = {
-    render: args => html `
-    <ai-chat-header
-      mode="${args.mode}"
-      agent-name="${args.agentName}"
-      agent-status="${args.agentStatus}"
-      agent-avatar="${args.agentAvatar}"
-      ?show-back="${args.showBack}"
-      ?draggable="${args.draggable}"
-      @closeClick="${() => console.log('Close clicked')}"
-      @moreClick="${() => console.log('More clicked')}"
-      @backClick="${() => console.log('Back clicked')}"
-    ></ai-chat-header>
-  `,
-    args: {
-        mode: 'human',
-        agentName: 'هلا',
-        agentStatus: 'Active',
-        agentAvatar: 'https://i.pravatar.cc/40?img=5',
-        showBack: true,
-        draggable: true,
-    },
-};
-export const HumanWithoutBack = {
-    render: args => html `
-    <ai-chat-header
-      mode="${args.mode}"
-      agent-name="${args.agentName}"
-      agent-status="${args.agentStatus}"
-      agent-avatar="${args.agentAvatar}"
-      ?show-back="${args.showBack}"
-      ?isDraggable="${args.isDraggable}"
-      @closeClick="${() => console.log('Close clicked')}"
-      @moreClick="${() => console.log('More clicked')}"
-    ></ai-chat-header>
-  `,
-    args: {
-        mode: 'human',
-        agentName: 'هلا',
-        agentStatus: 'Active',
-        agentAvatar: 'https://i.pravatar.cc/40?img=5',
-        showBack: false,
-        isDraggable: true,
-    },
-};
-export const InChatContainer = {
-    render: () => html `
-    <div style="position: relative; height: 600px; background: #f3f4f6;">
-      <ai-chat-container is-open position="right" width="32rem">
-        <div style="display: flex; flex-direction: column; height: 100%; background: white;">
-          <ai-chat-header
-            mode="agent"
-            title="محادثة مع المساعد الذكي"
-            @closeClick="${() => console.log('Close clicked')}"
-            @editClick="${() => console.log('Edit clicked')}"
-            @dropdownClick="${() => console.log('Dropdown clicked')}"
-          ></ai-chat-header>
-
-          <div style="flex: 1; padding: 1rem; display: flex; flex-direction: column; gap: 1rem; overflow-y: auto;">
-            <ai-chat-message
-              role="user"
-              content="مرحباً، كيف يمكنني المساعدة؟"
-              timestamp="${new Date(Date.now() - 300000).toISOString()}"
-              language="ar"
-            ></ai-chat-message>
-
-            <ai-chat-message
-              role="assistant"
-              content="مرحباً بك! أنا هنا لمساعدتك. ما الذي تحتاج إليه اليوم؟"
-              timestamp="${new Date().toISOString()}"
-              language="ar"
-              show-actions
-            ></ai-chat-message>
-          </div>
-
-          <div style="padding: 1rem; border-top: 1px solid #e5e7eb;">
-            <ai-message-input placeholder="اكتب رسالتك..." language="ar"></ai-message-input>
-          </div>
-        </div>
-      </ai-chat-container>
-    </div>
-  `,
-};

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

@@ -1,164 +0,0 @@
-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-link/ai-link.stories.js

@@ -1,79 +0,0 @@
-import { html } from "lit";
-const meta = {
-    title: 'UI/Link',
-    component: 'ai-link',
-    tags: ['autodocs'],
-    argTypes: {
-        label: { control: 'text' },
-        href: { control: 'text' },
-        target: {
-            control: { type: 'select' },
-            options: ['_blank', '_self'],
-        },
-    },
-};
-export default meta;
-const wrapStyle = 'padding: 24px; background: #f3f4f6; direction: rtl;';
-/* ─── Playground ─────────────────────────────────────────────────────────── */
-export const Playground = {
-    render: args => html `
-    <div style="${wrapStyle}">
-      <ai-link
-        label="${args.label}"
-        href="${args.href}"
-        target="${args.target}"
-      ></ai-link>
-    </div>
-  `,
-    args: {
-        label: 'صفحة الباقات',
-        href: '#',
-        target: '_blank',
-    },
-};
-/* ─── Multiple links ─────────────────────────────────────────────────────── */
-export const MultipleLinks = {
-    render: () => html `
-    <div style="${wrapStyle} display: flex; flex-direction: column; gap: 12px; align-items: flex-end;">
-      <ai-link label="صفحة الباقات" href="#"></ai-link>
-      <ai-link label="لوحة التحكم" href="#"></ai-link>
-      <ai-link label="إعدادات المتجر" href="#"></ai-link>
-    </div>
-  `,
-};
-/* ─── Inside a card (realistic usage) ───────────────────────────────────── */
-export const InsideCard = {
-    render: () => html `
-    <div style="padding: 24px; background: #f3f4f6; direction: rtl; max-width: 420px;">
-      <ai-card>
-        <p style="margin:0; font-size:14px; font-weight:500; color:#333;">
-          يمكنك الاطلاع على تفاصيل الباقات المتاحة
-        </p>
-        <p style="margin:0; font-size:14px; color:#737373;">
-          باقة بلس توفر ميزات متقدمة للتسويق وإدارة العملاء.
-        </p>
-        <ai-link label="صفحة الباقات" href="#"></ai-link>
-      </ai-card>
-    </div>
-  `,
-};
-/* ─── In message context (card + link + suggestions) ────────────────────── */
-export const FullMessageContext = {
-    render: () => html `
-    <div style="padding: 24px; background: #f3f4f6; direction: rtl; max-width: 480px; display: flex; flex-direction: column; gap: 12px;">
-      <ai-card>
-        <p style="margin:0; font-size:14px; font-weight:500; color:#333;">
-          الفرق بين باقة بلس وبرو
-        </p>
-        <p style="margin:0; font-size:14px; color:#737373;">
-          باقة بلس مناسبة للمتاجر الناشئة، بينما باقة برو توفر أدوات تسويق متقدمة وتقارير تفصيلية.
-        </p>
-        <ai-link label="صفحة الباقات" href="#"></ai-link>
-      </ai-card>
-      <div style="display: flex; gap: 8px; flex-wrap: wrap;">
-        <ai-suggestion label="قارن الأسعار"></ai-suggestion>
-        <ai-suggestion label="كيف أرقي باقتي؟"></ai-suggestion>
-      </div>
-    </div>
-  `,
-};