fix: Render articles in widget if it is available (#7654)

Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: iamsivin <iamsivin@gmail.com>
Co-authored-by: Sojan <sojan@pepalo.com>

app/javascript/widget/views/Home.vue

@@ -1,25 +1,53 @@
 <template>
-  <div class="flex flex-1 flex-col justify-end">
-    <div class="flex flex-1 overflow-auto">
-      <!-- Load Conversation List Components Here -->
+  <div
+    class="z-50 rounded-md w-full flex flex-1 flex-col"
+    :class="{ 'pb-2': showArticles, 'justify-end': !showArticles }"
+  >
+    <div class="px-4 pt-4 w-full">
+      <team-availability
+        :available-agents="availableAgents"
+        :has-conversation="!!conversationSize"
+        :unread-count="unreadMessageCount"
+        @start-conversation="startConversation"
+      />
+    </div>
+    <div v-if="showArticles" class="px-4 py-2 w-full">
+      <div class="p-4 rounded-md bg-white dark:bg-slate-700 shadow-sm w-full">
+        <article-hero
+          v-if="
+            !articleUiFlags.isFetching &&
+              !articleUiFlags.isError &&
+              popularArticles.length
+          "
+          :articles="popularArticles"
+          @view="openArticleInArticleViewer"
+          @view-all="viewAllArticles"
+        />
+      </div>
+    </div>
+    <div v-if="articleUiFlags.isFetching" class="px-4 py-2 w-full">
+      <div class="p-4 rounded-md bg-white dark:bg-slate-700 shadow-sm w-full">
+        <article-card-skeleton-loader />
+      </div>
     </div>
-    <team-availability
-      :available-agents="availableAgents"
-      :has-conversation="!!conversationSize"
-      @start-conversation="startConversation"
-    />
   </div>
 </template>
 
 <script>
-import configMixin from '../mixins/configMixin';
 import TeamAvailability from 'widget/components/TeamAvailability';
+import ArticleHero from 'widget/components/ArticleHero';
+import ArticleCardSkeletonLoader from 'widget/components/ArticleCardSkeletonLoader';
+
 import { mapGetters } from 'vuex';
 import routerMixin from 'widget/mixins/routerMixin';
+import configMixin from 'widget/mixins/configMixin';
+
 export default {
   name: 'Home',
   components: {
+    ArticleHero,
     TeamAvailability,
+    ArticleCardSkeletonLoader,
   },
   mixins: [configMixin, routerMixin],
   props: {
@@ -32,15 +60,33 @@ export default {
       default: false,
     },
   },
-  data() {
-    return {};
-  },
   computed: {
     ...mapGetters({
       availableAgents: 'agent/availableAgents',
       activeCampaign: 'campaign/getActiveCampaign',
       conversationSize: 'conversation/getConversationSize',
+      unreadMessageCount: 'conversation/getUnreadMessageCount',
+      popularArticles: 'article/popularArticles',
+      articleUiFlags: 'article/uiFlags',
     }),
+    portal() {
+      return window.chatwootWebChannel.portal;
+    },
+    showArticles() {
+      return (
+        this.portal &&
+        !this.articleUiFlags.isFetching &&
+        this.popularArticles.length
+      );
+    },
+  },
+  mounted() {
+    if (this.portal && this.popularArticles.length === 0) {
+      this.$store.dispatch('article/fetch', {
+        slug: this.portal.slug,
+        locale: 'en',
+      });
+    }
   },
   methods: {
     startConversation() {
@@ -49,6 +95,19 @@ export default {
       }
       return this.replaceRoute('messages');
     },
+    openArticleInArticleViewer(link) {
+      this.$router.push({
+        name: 'article-viewer',
+        params: { link: `${link}?show_plain_layout=true` },
+      });
+    },
+    viewAllArticles() {
+      const {
+        portal: { slug },
+        locale = 'en',
+      } = window.chatwootWebChannel;
+      this.openArticleInArticleViewer(`/hc/${slug}/${locale}`);
+    },
   },
 };
 </script>

app/javascript/widget/views/Messages.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="flex flex-col flex-1 overflow-hidden">
+  <div
+    class="flex flex-col flex-1 overflow-hidden rounded-b-lg bg-slate-25 dark:bg-slate-800"
+  >
     <div class="flex flex-1 overflow-auto">
       <conversation-wrap :grouped-messages="groupedMessages" />
     </div>
@@ -10,6 +12,7 @@
 </template>
 <script>
 import { mapGetters } from 'vuex';
+
 import ChatFooter from '../components/ChatFooter.vue';
 import ConversationWrap from '../components/ConversationWrap.vue';