Restructure omni services and add Chatwoot research snapshot

research/chatwoot/app/javascript/widget/components/pageComponents/Home/Article/ArticleBlock.vue

@@ -0,0 +1,48 @@
+<script setup>
+import { defineProps, defineEmits, computed } from 'vue';
+import ArticleListItem from './ArticleListItem.vue';
+import { useMapGetter } from 'dashboard/composables/store';
+
+const props = defineProps({
+  articles: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(['view', 'viewAll']);
+
+const widgetColor = useMapGetter('appConfig/getWidgetColor');
+
+const articlesToDisplay = computed(() => props.articles.slice(0, 6));
+
+const onArticleClick = link => {
+  emit('view', link);
+};
+</script>
+
+<template>
+  <div class="flex flex-col gap-3">
+    <h3 class="font-medium text-n-slate-12">
+      {{ $t('PORTAL.POPULAR_ARTICLES') }}
+    </h3>
+    <div class="flex flex-col gap-4">
+      <ArticleListItem
+        v-for="article in articlesToDisplay"
+        :key="article.slug"
+        :link="article.link"
+        :title="article.title"
+        @select-article="onArticleClick"
+      />
+    </div>
+    <div>
+      <button
+        class="font-medium tracking-wide inline-flex"
+        :style="{ color: widgetColor }"
+        @click="$emit('viewAll')"
+      >
+        <span>{{ $t('PORTAL.VIEW_ALL_ARTICLES') }}</span>
+      </button>
+    </div>
+  </div>
+</template>

research/chatwoot/app/javascript/widget/components/pageComponents/Home/Article/ArticleContainer.vue

@@ -0,0 +1,91 @@
+<script setup>
+import { computed, onMounted, watch } from 'vue';
+import ArticleBlock from 'widget/components/pageComponents/Home/Article/ArticleBlock.vue';
+import ArticleCardSkeletonLoader from 'widget/components/pageComponents/Home/Article/SkeletonLoader.vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { useStore } from 'dashboard/composables/store';
+import { useMapGetter } from 'dashboard/composables/store.js';
+import { useDarkMode } from 'widget/composables/useDarkMode';
+import { getMatchingLocale } from 'shared/helpers/portalHelper';
+
+const store = useStore();
+const router = useRouter();
+const i18n = useI18n();
+const { prefersDarkMode } = useDarkMode();
+
+const portal = computed(() => window.chatwootWebChannel.portal);
+
+const popularArticles = useMapGetter('article/popularArticles');
+const articleUiFlags = useMapGetter('article/uiFlags');
+
+const locale = computed(() => {
+  const { locale: selectedLocale } = i18n;
+
+  if (!portal.value || !portal.value.config) return null;
+
+  const { allowed_locales: allowedLocales } = portal.value.config;
+  return getMatchingLocale(selectedLocale.value, allowedLocales);
+});
+
+const fetchArticles = () => {
+  if (portal.value && locale.value) {
+    store.dispatch('article/fetch', {
+      slug: portal.value.slug,
+      locale: locale.value,
+    });
+  }
+};
+
+const openArticleInArticleViewer = link => {
+  const params = new URLSearchParams({
+    show_plain_layout: 'true',
+    theme: prefersDarkMode.value ? 'dark' : 'light',
+    ...(locale.value && { locale: locale.value }),
+  });
+
+  // Combine link with query parameters
+  const linkToOpen = `${link}?${params.toString()}`;
+  router.push({ name: 'article-viewer', query: { link: linkToOpen } });
+};
+
+const viewAllArticles = () => {
+  const {
+    portal: { slug },
+  } = window.chatwootWebChannel;
+  openArticleInArticleViewer(`/hc/${slug}/${locale.value}`);
+};
+
+const hasArticles = computed(
+  () =>
+    !articleUiFlags.value.isFetching &&
+    !articleUiFlags.value.isError &&
+    !!popularArticles.value.length &&
+    !!locale.value
+);
+
+// Watch for locale changes and refetch articles
+watch(locale, (newLocale, oldLocale) => {
+  if (newLocale && newLocale !== oldLocale) {
+    fetchArticles();
+  }
+});
+
+onMounted(() => fetchArticles());
+</script>
+
+<template>
+  <div
+    v-if="portal && (articleUiFlags.isFetching || !!popularArticles.length)"
+    class="w-full shadow outline-1 outline outline-n-container rounded-xl bg-n-background dark:bg-n-solid-2 px-5 py-4"
+  >
+    <ArticleBlock
+      v-if="hasArticles"
+      :articles="popularArticles"
+      @view="openArticleInArticleViewer"
+      @view-all="viewAllArticles"
+    />
+    <ArticleCardSkeletonLoader v-if="articleUiFlags.isFetching" />
+  </div>
+  <div v-else class="hidden" />
+</template>

research/chatwoot/app/javascript/widget/components/pageComponents/Home/Article/ArticleListItem.vue

@@ -0,0 +1,32 @@
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+const props = defineProps({
+  link: {
+    type: String,
+    default: '',
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+});
+const emit = defineEmits(['selectArticle']);
+const onClick = () => {
+  emit('selectArticle', props.link);
+};
+</script>
+
+<template>
+  <div
+    class="flex items-center justify-between rounded cursor-pointer text-n-slate-11 hover:text-n-slate-12 gap-2"
+    role="button"
+    @click="onClick"
+  >
+    <button
+      class="underline-offset-2 leading-6 ltr:text-left rtl:text-right text-base"
+    >
+      {{ title }}
+    </button>
+    <span class="i-lucide-chevron-right text-base shrink-0" />
+  </div>
+</template>

research/chatwoot/app/javascript/widget/components/pageComponents/Home/Article/SkeletonLoader.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="py-4 space-y-4">
+    <div class="space-y-2 animate-pulse">
+      <div class="h-6 bg-n-slate-5 dark:bg-n-alpha-black1 rounded w-2/5" />
+    </div>
+    <div class="space-y-2 animate-pulse">
+      <div class="h-4 bg-n-slate-5 dark:bg-n-alpha-black1 rounded" />
+      <div class="h-4 bg-n-slate-5 dark:bg-n-alpha-black1 rounded" />
+      <div class="h-4 bg-n-slate-5 dark:bg-n-alpha-black1 rounded" />
+    </div>
+    <div class="space-y-2 animate-pulse">
+      <div class="h-4 bg-n-slate-5 dark:bg-n-alpha-black1 rounded w-1/5" />
+    </div>
+  </div>
+</template>