Restructure omni services and add Chatwoot research snapshot

2026-02-21 11:11:27 +07:00
parent edea7a0034
commit b73babbbf6
7732 changed files with 978203 additions and 32 deletions
--- a/research/chatwoot/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
+++ b/research/chatwoot/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
@@ -0,0 +1,144 @@
+<script>
+import { mapGetters } from 'vuex';
+import ConversationHeader from './ConversationHeader.vue';
+import DashboardAppFrame from '../DashboardApp/Frame.vue';
+import EmptyState from './EmptyState/EmptyState.vue';
+import MessagesView from './MessagesView.vue';
+
+export default {
+  components: {
+    ConversationHeader,
+    DashboardAppFrame,
+    EmptyState,
+    MessagesView,
+  },
+  props: {
+    inboxId: {
+      type: [Number, String],
+      default: '',
+      required: false,
+    },
+    isInboxView: {
+      type: Boolean,
+      default: false,
+    },
+    isContactPanelOpen: {
+      type: Boolean,
+      default: true,
+    },
+    isOnExpandedLayout: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return { activeIndex: 0 };
+  },
+  computed: {
+    ...mapGetters({
+      currentChat: 'getSelectedChat',
+      dashboardApps: 'dashboardApps/getRecords',
+    }),
+    dashboardAppTabs() {
+      return [
+        {
+          key: 'messages',
+          index: 0,
+          name: this.$t('CONVERSATION.DASHBOARD_APP_TAB_MESSAGES'),
+        },
+        ...this.dashboardApps.map((dashboardApp, index) => ({
+          key: `dashboard-${dashboardApp.id}`,
+          index: index + 1,
+          name: dashboardApp.title,
+        })),
+      ];
+    },
+    showContactPanel() {
+      return this.isContactPanelOpen && this.currentChat.id;
+    },
+  },
+  watch: {
+    'currentChat.inbox_id': {
+      immediate: true,
+      handler(inboxId) {
+        if (inboxId) {
+          this.$store.dispatch('inboxAssignableAgents/fetch', [inboxId]);
+        }
+      },
+    },
+    'currentChat.id'() {
+      this.fetchLabels();
+      this.activeIndex = 0;
+    },
+  },
+  mounted() {
+    this.fetchLabels();
+    this.$store.dispatch('dashboardApps/get');
+  },
+  methods: {
+    fetchLabels() {
+      if (!this.currentChat.id) {
+        return;
+      }
+      this.$store.dispatch('conversationLabels/get', this.currentChat.id);
+    },
+    onDashboardAppTabChange(index) {
+      this.activeIndex = index;
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    class="conversation-details-wrap flex flex-col min-w-0 w-full bg-n-surface-1 relative"
+    :class="{
+      'border-l rtl:border-l-0 rtl:border-r border-n-weak': !isOnExpandedLayout,
+    }"
+  >
+    <ConversationHeader
+      v-if="currentChat.id"
+      :chat="currentChat"
+      :show-back-button="isOnExpandedLayout && !isInboxView"
+      :class="{
+        'border-b border-b-n-weak !pt-2': !dashboardApps.length,
+      }"
+    />
+    <woot-tabs
+      v-if="dashboardApps.length && currentChat.id"
+      :index="activeIndex"
+      class="h-10"
+      @change="onDashboardAppTabChange"
+    >
+      <woot-tabs-item
+        v-for="tab in dashboardAppTabs"
+        :key="tab.key"
+        :index="tab.index"
+        :name="tab.name"
+        :show-badge="false"
+        is-compact
+      />
+    </woot-tabs>
+    <div v-show="!activeIndex" class="flex h-full min-h-0 m-0">
+      <MessagesView
+        v-if="currentChat.id"
+        :inbox-id="inboxId"
+        :is-inbox-view="isInboxView"
+      />
+      <EmptyState
+        v-if="!currentChat.id && !isInboxView"
+        :is-on-expanded-layout="isOnExpandedLayout"
+      />
+      <slot />
+    </div>
+    <DashboardAppFrame
+      v-for="(dashboardApp, index) in dashboardApps"
+      v-show="activeIndex - 1 === index"
+      :key="currentChat.id + '-' + dashboardApp.id"
+      :is-visible="activeIndex - 1 === index"
+      :config="dashboardApps[index].content"
+      :position="index"
+      :current-chat="currentChat"
+    />
+  </div>
+</template>