From 509b8a6e0116ac063af857acc8a02c1215ff8d00 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Wed, 3 Jun 2026 14:46:06 +0530
Subject: [PATCH] fix: update stale mock data in component stories

These stories were written against older component APIs and broke under
the new harness:

- copilot: nest message content/reasoning and use message_type; pass the
  required conversationInboxType
- ArticlesPage: pass the required categories, allowedLocales, portalName
  and meta props
- CategoryPage: use the real category shape (name/icon/slug/meta) so cards
  render titles instead of "undefined undefined"
- PortalSettings: provide a portals array matching the seeded route so the
  settings forms render
---
 .../Pages/ArticlePage/ArticlesPage.story.vue  |  27 ++-
 .../CategoryPage/CategoriesPage.story.vue     | 206 +++---------------
 .../PortalSettings.story.vue                  |  18 +-
 .../components-next/copilot/Copilot.story.vue |  50 +++--
 .../copilot/CopilotThinkingGroup.story.vue    |  18 +-
 5 files changed, 114 insertions(+), 205 deletions(-)

diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticlesPage.story.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticlesPage.story.vue
index 58c7acee9..4641be2c0 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticlesPage.story.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticlesPage.story.vue
@@ -59,13 +59,38 @@ const articles = [
     views: 400,
   },
 ];
+
+const categories = [
+  { id: 1, name: 'Getting started', icon: '🚀' },
+  { id: 2, name: 'Marketing', icon: '⚡️' },
+  { id: 3, name: 'Development', icon: '🛠️' },
+];
+
+const allowedLocales = [{ code: 'en', name: 'English' }];
+
+const portalName = 'Chatwoot Help Center';
+
+const meta = {
+  currentPage: 1,
+  allArticlesCount: articles.length,
+  articlesCount: articles.length,
+  mineArticlesCount: 2,
+  draftArticlesCount: 1,
+  archivedArticlesCount: 2,
+};
 </script>
 
 <template>
   <Story title="Pages/HelpCenter/ArticlesPage" :layout="{ type: 'single' }">
     <Variant title="All Articles">
       <div class="w-full min-h-screen bg-n-background">
-        <ArticlesPage :articles="articles" />
+        <ArticlesPage
+          :articles="articles"
+          :categories="categories"
+          :allowed-locales="allowedLocales"
+          :portal-name="portalName"
+          :meta="meta"
+        />
       </div>
     </Variant>
   </Story>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoriesPage.story.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoriesPage.story.vue
index 6165949ba..f84a89602 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoriesPage.story.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoriesPage.story.vue
@@ -3,206 +3,62 @@ import CategoriesPage from './CategoriesPage.vue';
 
 const categories = [
   {
-    id: 'getting-started',
-    title: '🚀 Getting started',
+    id: 1,
+    name: 'Getting started',
+    icon: '🚀',
+    slug: 'getting-started',
     description:
       'Learn how to use Chatwoot effectively and make the most of its features to enhance customer support and engagement.',
-    articlesCount: '2',
-    articles: [
-      {
-        variant: 'Draft article',
-        title:
-          "How to get an SSL certificate for your Help Center's custom domain",
-        status: 'draft',
-        updatedAt: '2 days ago',
-        author: 'Michael',
-        category: '⚡️ Marketing',
-        views: 3400,
-      },
-      {
-        variant: 'Published article',
-        title: 'Setting up your first Help Center portal',
-        status: '',
-        updatedAt: '1 week ago',
-        author: 'John',
-        category: '🛠️ Development',
-        views: 400,
-      },
-    ],
+    meta: { articles_count: 12 },
   },
   {
-    id: 'marketing',
-    title: 'Marketing',
+    id: 2,
+    name: 'Marketing',
+    icon: '⚡️',
+    slug: 'marketing',
     description:
       'Learn how to use Chatwoot effectively and make the most of its features to enhance customer support.',
-    articlesCount: '4',
-    articles: [
-      {
-        variant: 'Draft article',
-        title:
-          "How to get an SSL certificate for your Help Center's custom domain",
-        status: 'draft',
-        updatedAt: '2 days ago',
-        author: 'Michael',
-        category: '⚡️ Marketing',
-        views: 3400,
-      },
-      {
-        variant: 'Published article',
-        title: 'Setting up your first Help Center portal',
-        status: '',
-        updatedAt: '1 week ago',
-        author: 'John',
-        category: '🛠️ Development',
-        views: 400,
-      },
-      {
-        variant: 'Archived article',
-        title: 'Best practices for organizing your Help Center content',
-        status: 'archived',
-        updatedAt: '3 days ago',
-        author: 'Fernando',
-        category: '💰 Finance',
-        views: 400,
-      },
-      {
-        variant: 'Published article',
-        title: 'Customizing the appearance of your Help Center',
-        status: '',
-        updatedAt: '5 days ago',
-        author: 'Jane',
-        category: '💰 Finance',
-        views: 400,
-      },
-    ],
+    meta: { articles_count: 4 },
   },
   {
-    id: 'development',
-    title: 'Development',
+    id: 3,
+    name: 'Development',
+    icon: '🛠️',
+    slug: 'development',
     description: '',
-    articlesCount: '5',
-    articles: [
-      {
-        variant: 'Draft article',
-        title:
-          "How to get an SSL certificate for your Help Center's custom domain",
-        status: 'draft',
-        updatedAt: '2 days ago',
-        author: 'Michael',
-        category: '⚡️ Marketing',
-        views: 3400,
-      },
-      {
-        variant: 'Published article',
-        title: 'Setting up your first Help Center portal',
-        status: '',
-        updatedAt: '1 week ago',
-        author: 'John',
-        category: '🛠️ Development',
-        views: 400,
-      },
-      {
-        variant: 'Archived article',
-        title: 'Best practices for organizing your Help Center content',
-        status: 'archived',
-        updatedAt: '3 days ago',
-        author: 'Fernando',
-        category: '💰 Finance',
-        views: 400,
-      },
-      {
-        variant: 'Archived article',
-        title: 'Best practices for organizing your Help Center content',
-        status: 'archived',
-        updatedAt: '3 days ago',
-        author: 'Fernando',
-        category: '💰 Finance',
-        views: 400,
-      },
-      {
-        variant: 'Published article',
-        title: 'Customizing the appearance of your Help Center',
-        status: '',
-        updatedAt: '5 days ago',
-        author: 'Jane',
-        category: '💰 Finance',
-        views: 400,
-      },
-    ],
+    meta: { articles_count: 5 },
   },
   {
-    id: 'roadmap',
-    title: '🛣️ Roadmap',
+    id: 4,
+    name: 'Roadmap',
+    icon: '🛣️',
+    slug: 'roadmap',
     description:
       'Learn how to use Chatwoot effectively and make the most of its features to enhance customer support and engagement.',
-    articlesCount: '3',
-    articles: [
-      {
-        variant: 'Draft article',
-        title:
-          "How to get an SSL certificate for your Help Center's custom domain",
-        status: 'draft',
-        updatedAt: '2 days ago',
-        author: 'Michael',
-        category: '⚡️ Marketing',
-        views: 3400,
-      },
-      {
-        variant: 'Published article',
-        title: 'Setting up your first Help Center portal',
-        status: '',
-        updatedAt: '1 week ago',
-        author: 'John',
-        category: '🛠️ Development',
-        views: 400,
-      },
-      {
-        variant: 'Published article',
-        title: 'Setting up your first Help Center portal',
-        status: '',
-        updatedAt: '1 week ago',
-        author: 'John',
-        category: '🛠️ Development',
-        views: 400,
-      },
-    ],
+    meta: { articles_count: 3 },
   },
   {
-    id: 'finance',
-    title: '💰 Finance',
+    id: 5,
+    name: 'Finance',
+    icon: '💰',
+    slug: 'finance',
     description:
       'Learn how to use Chatwoot effectively and make the most of its features to enhance customer support and engagement.',
-    articlesCount: '2',
-    articles: [
-      {
-        variant: 'Draft article',
-        title:
-          "How to get an SSL certificate for your Help Center's custom domain",
-        status: 'draft',
-        updatedAt: '2 days ago',
-        author: 'Michael',
-        category: '⚡️ Marketing',
-        views: 3400,
-      },
-      {
-        variant: 'Published article',
-        title: 'Setting up your first Help Center portal',
-        status: '',
-        updatedAt: '1 week ago',
-        author: 'John',
-        category: '🛠️ Development',
-        views: 400,
-      },
-    ],
+    meta: { articles_count: 2 },
   },
 ];
+
+const allowedLocales = [{ code: 'en', name: 'English' }];
 </script>
 
 <template>
   <Story title="Pages/HelpCenter/CategoryPage" :layout="{ type: 'single' }">
     <Variant title="All Categories">
       <div class="w-full min-h-screen bg-n-background">
-        <CategoriesPage :categories="categories" />
+        <CategoriesPage
+          :categories="categories"
+          :allowed-locales="allowedLocales"
+        />
       </div>
     </Variant>
   </Story>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalSettings.story.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalSettings.story.vue
index ab25484ad..3bd13e0d9 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalSettings.story.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalSettings.story.vue
@@ -1,12 +1,28 @@
 <script setup>
 import PortalSettings from './PortalSettings.vue';
+
+// `slug` matches the route the stories harness seeds (portals/chatwoot), so
+// PortalSettings resolves an active portal and renders the settings forms.
+const portals = [
+  {
+    id: 1,
+    name: 'Chatwoot Help Center',
+    slug: 'chatwoot',
+    header_text: 'How can we help you today?',
+    page_title: 'Chatwoot Help Center',
+    homepage_link: 'https://www.chatwoot.com',
+    custom_domain: '',
+    config: {},
+    ssl_settings: {},
+  },
+];
 </script>
 
 <template>
   <Story title="Pages/HelpCenter/PortalSettings" :layout="{ type: 'single' }">
     <Variant title="Default">
       <div class="w-[1000px] min-h-screen bg-n-background">
-        <PortalSettings />
+        <PortalSettings :portals="portals" :is-fetching="false" />
       </div>
     </Variant>
   </Story>
diff --git a/app/javascript/dashboard/components-next/copilot/Copilot.story.vue b/app/javascript/dashboard/components-next/copilot/Copilot.story.vue
index ece5ec31f..2cea42913 100644
--- a/app/javascript/dashboard/components-next/copilot/Copilot.story.vue
+++ b/app/javascript/dashboard/components-next/copilot/Copilot.story.vue
@@ -2,44 +2,51 @@
 import { ref } from 'vue';
 import Copilot from './Copilot.vue';
 
-const supportAgent = {
-  available_name: 'Pranav Raj',
-  avatar_url:
-    'https://app.chatwoot.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBd3FodGc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--d218a325af0ef45061eefd352f8efb9ac84275e8/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lKYW5CbFp3WTZCa1ZVT2hOeVpYTnBlbVZmZEc5ZlptbHNiRnNIYVFINk1BPT0iLCJleHAiOm51bGwsInB1ciI6InZhcmlhdGlvbiJ9fQ==--533c3ad7218e24c4b0e8f8959dc1953ce1d279b9/1707423736896.jpeg',
-};
-
 const messages = ref([
   {
     id: 1,
-    role: 'user',
-    content: 'Hi there! How can I help you today?',
+    message_type: 'user',
+    message: { content: 'Hi there! How can I help you today?' },
   },
   {
     id: 2,
-    role: 'assistant',
-    content:
-      "Hello! I'm the AI assistant. I'll be helping the support team today.",
+    message_type: 'assistant_thinking',
+    message: {
+      content: 'Analyzing the conversation',
+      reasoning: 'Breaking down the request into actionable steps',
+    },
+  },
+  {
+    id: 3,
+    message_type: 'assistant_thinking',
+    message: {
+      content: 'Searching the knowledge base',
+      reasoning: 'Looking for relevant articles and past replies',
+    },
+  },
+  {
+    id: 4,
+    message_type: 'assistant',
+    message: {
+      content:
+        "Hello! I'm the AI assistant. I'll be helping the support team today.",
+    },
   },
 ]);
 
-const isCaptainTyping = ref(false);
-
 const sendMessage = message => {
-  // Add user message
   messages.value.push({
     id: messages.value.length + 1,
-    role: 'user',
-    content: message,
+    message_type: 'user',
+    message: { content: message },
   });
 
   // Simulate AI response
-  isCaptainTyping.value = true;
   setTimeout(() => {
-    isCaptainTyping.value = false;
     messages.value.push({
       id: messages.value.length + 1,
-      role: 'assistant',
-      content: 'This is a simulated AI response.',
+      message_type: 'assistant',
+      message: { content: 'This is a simulated AI response.' },
     });
   }, 2000);
 };
@@ -51,9 +58,8 @@ const sendMessage = message => {
     :layout="{ type: 'grid', width: '400px', height: '800px' }"
   >
     <Copilot
-      :support-agent="supportAgent"
       :messages="messages"
-      :is-captain-typing="isCaptainTyping"
+      conversation-inbox-type="Channel::WebWidget"
       @send-message="sendMessage"
     />
   </Story>
diff --git a/app/javascript/dashboard/components-next/copilot/CopilotThinkingGroup.story.vue b/app/javascript/dashboard/components-next/copilot/CopilotThinkingGroup.story.vue
index 098316dbc..08af51e2f 100644
--- a/app/javascript/dashboard/components-next/copilot/CopilotThinkingGroup.story.vue
+++ b/app/javascript/dashboard/components-next/copilot/CopilotThinkingGroup.story.vue
@@ -4,18 +4,24 @@ import CopilotThinkingGroup from './CopilotThinkingGroup.vue';
 const messages = [
   {
     id: 1,
-    content: 'Analyzing the user query',
-    reasoning: 'Breaking down the request into actionable steps',
+    message: {
+      content: 'Analyzing the user query',
+      reasoning: 'Breaking down the request into actionable steps',
+    },
   },
   {
     id: 2,
-    content: 'Searching codebase',
-    reasoning: 'Looking for relevant files and functions',
+    message: {
+      content: 'Searching codebase',
+      reasoning: 'Looking for relevant files and functions',
+    },
   },
   {
     id: 3,
-    content: 'Generating response',
-    reasoning: 'Composing a helpful and accurate answer',
+    message: {
+      content: 'Generating response',
+      reasoning: 'Composing a helpful and accurate answer',
+    },
   },
 ];
 </script>