Merge branch 'develop' into chore/upgrade-packages-2-25

Followup PR for https://github.com/chatwoot/chatwoot/pull/10876. This PR
just adds all the events related to conversation update to be reloaded
before sending it to the UI.

Gemfile.lock

@@ -186,7 +186,7 @@ GEM
     database_cleaner-core (2.0.1)
     datadog-ci (0.8.3)
       msgpack
-    date (3.3.4)
+    date (3.4.1)
     ddtrace (1.23.2)
       datadog-ci (~> 0.8.1)
       debase-ruby_core_source (= 3.3.1)
@@ -487,7 +487,7 @@ GEM
       uri
     net-http-persistent (4.0.2)
       connection_pool (~> 2.2)
-    net-imap (0.4.17)
+    net-imap (0.4.19)
       date
       net-protocol
     net-pop (0.1.2)
@@ -782,7 +782,7 @@ GEM
     time_diff (0.3.0)
       activesupport
       i18n
-    timeout (0.4.1)
+    timeout (0.4.3)
     trailblazer-option (0.1.2)
     twilio-ruby (5.77.0)
       faraday (>= 0.9, < 3.0)

VERSION_CWCTL

@@ -1 +1 @@
-3.1.0
+3.2.0

app/controllers/api/v2/accounts/live_reports_controller.rb

@@ -1,58 +0,0 @@
-class Api::V2::Accounts::LiveReportsController < Api::V1::Accounts::BaseController
-  before_action :load_conversations, only: [:conversation_metrics, :grouped_conversation_metrics]
-  before_action :set_group_scope, only: [:grouped_conversation_metrics]
-
-  def conversation_metrics
-    render json: {
-      open: @conversations.open.count,
-      unattended: @conversations.open.unattended.count,
-      unassigned: @conversations.open.unassigned.count,
-      pending: @conversations.pending.count
-    }
-  end
-
-  def grouped_conversation_metrics
-    count_by_group = @conversations.open.group(@group_scope).count
-    unattended_by_group = @conversations.open.unattended.group(@group_scope).count
-    unassigned_by_group = @conversations.open.unassigned.group(@group_scope).count
-
-    group_metrics = count_by_group.map do |group_id, count|
-      metric = {
-        open: count,
-        unattended: unattended_by_group[group_id] || 0,
-        unassigned: unassigned_by_group[group_id] || 0
-      }
-      metric[@group_scope] = group_id
-      metric
-    end
-
-    render json: group_metrics
-  end
-
-  private
-
-  def set_group_scope
-    render json: { error: 'invalid group_by' }, status: :unprocessable_entity and return unless %w[
-      team_id
-      assignee_id
-    ].include?(permitted_params[:group_by])
-
-    @group_scope = permitted_params[:group_by]
-  end
-
-  def team
-    return unless permitted_params[:team_id]
-
-    @team ||= Current.account.teams.find(permitted_params[:team_id])
-  end
-
-  def load_conversations
-    scope = Current.account.conversations
-    scope = scope.where(team_id: team.id) if team.present?
-    @conversations = scope
-  end
-
-  def permitted_params
-    params.permit(:team_id, :group_by)
-  end
-end

app/helpers/api/v2/accounts/heatmap_helper.rb

@@ -94,8 +94,7 @@ module Api::V2::Accounts::HeatmapHelper
   end
 
   def since_timestamp(date)
-    number_of_days = params[:days_before].present? ? params[:days_before].to_i.days : 6.days
-    (date - number_of_days).to_i.to_s
+    (date - 6.days).to_i.to_s
   end
 
   def until_timestamp(date)

app/javascript/dashboard/api/liveReports.js

@@ -1,20 +0,0 @@
-/* global axios */
-import ApiClient from './ApiClient';
-
-class LiveReportsAPI extends ApiClient {
-  constructor() {
-    super('live_reports', { accountScoped: true, apiVersion: 'v2' });
-  }
-
-  getConversationMetric(params = {}) {
-    return axios.get(`${this.url}/conversation_metrics`, { params });
-  }
-
-  getGroupedConversations({ groupBy } = { groupBy: 'assignee_id' }) {
-    return axios.get(`${this.url}/grouped_conversation_metrics`, {
-      params: { group_by: groupBy },
-    });
-  }
-}
-
-export default new LiveReportsAPI();

app/javascript/dashboard/api/reports.js

@@ -61,9 +61,9 @@ class ReportsAPI extends ApiClient {
     });
   }
 
-  getConversationTrafficCSV({ daysBefore = 6 } = {}) {
+  getConversationTrafficCSV() {
     return axios.get(`${this.url}/conversation_traffic`, {
-      params: { timezone_offset: getTimeOffset(), days_before: daysBefore },
+      params: { timezone_offset: getTimeOffset() },
     });
   }
 

app/javascript/dashboard/components-next/NewConversation/components/ActionButtons.vue

@@ -77,7 +77,7 @@ const toggleMessageSignature = () => {
   setSignature();
 };
 
-// Added this watch to dynamically set signature.
+// Added this watch to dynamically set signature on target inbox change.
 // Only targetInbox has value and is Advance Editor(used by isEmailOrWebWidgetInbox)
 // Set the signature only if the inbox based flag is true
 watch(
@@ -86,7 +86,8 @@ watch(
     nextTick(() => {
       if (newValue && props.isEmailOrWebWidgetInbox) setSignature();
     });
-  }
+  },
+  { immediate: true }
 );
 
 const onClickInsertEmoji = emoji => {

app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue

@@ -29,10 +29,6 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  labelClass: {
-    type: String,
-    default: '',
-  },
 });
 
 const emit = defineEmits(['action']);
@@ -101,13 +97,9 @@ onMounted(() => {
       </slot>
       <Icon v-if="item.icon" :icon="item.icon" class="flex-shrink-0 size-3.5" />
       <span v-if="item.emoji" class="flex-shrink-0">{{ item.emoji }}</span>
-      <span
-        v-if="item.label"
-        class="min-w-0 text-sm truncate"
-        :class="labelClass"
-      >
-        {{ item.label }}
-      </span>
+      <span v-if="item.label" class="min-w-0 text-sm truncate">{{
+        item.label
+      }}</span>
     </button>
     <div
       v-if="filteredMenuItems.length === 0"

app/javascript/dashboard/components-next/message/MessageList.vue

@@ -15,18 +15,14 @@ import { useCamelCase } from 'dashboard/composables/useTransformKeys';
  * @property {Array} messages - Array of all messages [These are not in camelcase]
  */
 const props = defineProps({
-  readMessages: {
-    type: Array,
-    default: () => [],
-  },
-  unReadMessages: {
-    type: Array,
-    default: () => [],
-  },
   currentUserId: {
     type: Number,
     required: true,
   },
+  firstUnreadId: {
+    type: Number,
+    default: null,
+  },
   isAnEmailChannel: {
     type: Boolean,
     default: false,
@@ -41,12 +37,8 @@ const props = defineProps({
   },
 });
 
-const unread = computed(() => {
-  return useCamelCase(props.unReadMessages, { deep: true });
-});
-
-const read = computed(() => {
-  return useCamelCase(props.readMessages, { deep: true });
+const allMessages = computed(() => {
+  return useCamelCase(props.messages, { deep: true });
 });
 
 /**
@@ -108,26 +100,18 @@ const getInReplyToMessage = parentMessage => {
 <template>
   <ul class="px-4 bg-n-background">
     <slot name="beforeAll" />
-    <template v-for="(message, index) in read" :key="message.id">
-      <Message
-        v-bind="message"
-        :is-email-inbox="isAnEmailChannel"
-        :in-reply-to="getInReplyToMessage(message)"
-        :group-with-next="shouldGroupWithNext(index, read)"
-        :inbox-supports-reply-to="inboxSupportsReplyTo"
-        :current-user-id="currentUserId"
-        data-clarity-mask="True"
+    <template v-for="(message, index) in allMessages" :key="message.id">
+      <slot
+        v-if="firstUnreadId && message.id === firstUnreadId"
+        name="unreadBadge"
       />
-    </template>
-    <slot name="beforeUnread" />
-    <template v-for="(message, index) in unread" :key="message.id">
       <Message
         v-bind="message"
+        :is-email-inbox="isAnEmailChannel"
         :in-reply-to="getInReplyToMessage(message)"
-        :group-with-next="shouldGroupWithNext(index, unread)"
+        :group-with-next="shouldGroupWithNext(index, allMessages)"
         :inbox-supports-reply-to="inboxSupportsReplyTo"
         :current-user-id="currentUserId"
-        :is-email-inbox="isAnEmailChannel"
         data-clarity-mask="True"
       />
     </template>

app/javascript/dashboard/components-next/message/chips/Audio.vue

@@ -38,9 +38,10 @@ onMounted(() => {
 });
 
 const formatTime = time => {
+  if (!time || Number.isNaN(time)) return '00:00';
   const minutes = Math.floor(time / 60);
   const seconds = Math.floor(time % 60);
-  return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+  return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
 };
 
 const toggleMute = () => {
@@ -49,7 +50,7 @@ const toggleMute = () => {
 };
 
 const onTimeUpdate = () => {
-  currentTime.value = audioPlayer.value.currentTime;
+  currentTime.value = audioPlayer.value?.currentTime;
 };
 
 const seek = event => {

app/javascript/dashboard/components-next/sidebar/Sidebar.vue

@@ -42,8 +42,6 @@ const isFeatureEnabledonAccount = useMapGetter(
   'accounts/isFeatureEnabledonAccount'
 );
 
-const globalConfig = useMapGetter('globalConfig/get');
-
 const showV4Routes = computed(() => {
   return isFeatureEnabledonAccount.value(
     currentAccountId.value,
@@ -527,12 +525,7 @@ const menuItems = computed(() => {
     <section class="grid gap-2 mt-2 mb-4">
       <div class="flex items-center min-w-0 gap-2 px-2">
         <div class="grid flex-shrink-0 size-6 place-content-center">
-          <img
-            v-if="globalConfig.logoThumbnail"
-            :src="globalConfig.logoThumbnail"
-            class="h-5 w-5"
-          />
-          <Logo v-else />
+          <Logo />
         </div>
         <div class="flex-shrink-0 w-px h-3 bg-n-strong" />
         <SidebarAccountSwitcher

app/javascript/dashboard/components/widgets/conversation/MessagesView.vue

@@ -243,6 +243,15 @@ export default {
     unreadMessageCount() {
       return this.currentChat.unread_count || 0;
     },
+    unreadMessageLabel() {
+      const count =
+        this.unreadMessageCount > 9 ? '9+' : this.unreadMessageCount;
+      const label =
+        this.unreadMessageCount > 1
+          ? 'CONVERSATION.UNREAD_MESSAGES'
+          : 'CONVERSATION.UNREAD_MESSAGE';
+      return `${count} ${this.$t(label)}`;
+    },
     isInstagramDM() {
       return this.conversationType === 'instagram_direct_message';
     },
@@ -492,12 +501,11 @@ export default {
     <NextMessageList
       v-if="showNextBubbles"
       class="conversation-panel"
-      :read-messages="readMessages"
-      :un-read-messages="unReadMessages"
       :current-user-id="currentUserId"
+      :first-unread-id="unReadMessages[0]?.id"
       :is-an-email-channel="isAnEmailChannel"
       :inbox-supports-reply-to="inboxSupportsReplyTo"
-      :messages="currentChat ? currentChat.messages : []"
+      :messages="getMessages"
     >
       <template #beforeAll>
         <transition name="slide-up">
@@ -507,15 +515,10 @@ export default {
           </li>
         </transition>
       </template>
-      <template #beforeUnread>
+      <template #unreadBadge>
         <li v-show="unreadMessageCount != 0" class="unread--toast">
           <span>
-            {{ unreadMessageCount > 9 ? '9+' : unreadMessageCount }}
-            {{
-              unreadMessageCount > 1
-                ? $t('CONVERSATION.UNREAD_MESSAGES')
-                : $t('CONVERSATION.UNREAD_MESSAGE')
-            }}
+            {{ unreadMessageLabel }}
           </span>
         </li>
       </template>

app/javascript/dashboard/composables/useLiveRefresh.js

@@ -1,28 +0,0 @@
-import { ref, onBeforeUnmount } from 'vue';
-
-export const useLiveRefresh = (callback, interval = 60000) => {
-  const timeoutId = ref(null);
-
-  const startRefetching = () => {
-    timeoutId.value = setTimeout(async () => {
-      await callback();
-      startRefetching();
-    }, interval);
-  };
-
-  const stopRefetching = () => {
-    if (timeoutId.value) {
-      clearTimeout(timeoutId.value);
-      timeoutId.value = null;
-    }
-  };
-
-  onBeforeUnmount(() => {
-    stopRefetching();
-  });
-
-  return {
-    startRefetching,
-    stopRefetching,
-  };
-};

app/javascript/dashboard/i18n/locale/en/chatlist.json

@@ -99,6 +99,9 @@
       },
       "fallback": {
         "CONTENT": "has shared a url"
+      },
+      "contact": {
+        "CONTENT": "Shared contact"
       }
     },
     "CHAT_SORT_BY_FILTER": {

app/javascript/dashboard/i18n/locale/en/report.json

@@ -476,18 +476,6 @@
         "STATUS": "Status"
       }
     },
-    "TEAM_CONVERSATIONS": {
-      "ALL_TEAMS": "All Teams",
-      "HEADER": "Conversations by teams",
-      "LOADING_MESSAGE": "Loading team metrics...",
-      "NO_TEAMS": "There is no data available",
-      "TABLE_HEADER": {
-        "TEAM": "Team",
-        "OPEN": "Open",
-        "UNATTENDED": "Unattended",
-        "STATUS": "Status"
-      }
-    },
     "AGENT_STATUS": {
       "HEADER": "Agent status",
       "ONLINE": "Online",

app/javascript/dashboard/i18n/locale/en/search.json

@@ -24,6 +24,7 @@
     "READ_MORE": "Read more",
     "WROTE": "wrote:",
     "FROM": "from",
-    "EMAIL": "email"
+    "EMAIL": "email",
+    "EMAIL_SUBJECT": "subject"
   }
 }

app/javascript/dashboard/modules/search/components/SearchResultConversationItem.vue

@@ -35,6 +35,10 @@ const props = defineProps({
     type: Number,
     default: 0,
   },
+  emailSubject: {
+    type: String,
+    default: '',
+  },
 });
 
 const navigateTo = computed(() => {
@@ -49,6 +53,28 @@ const navigateTo = computed(() => {
 });
 
 const createdAtTime = dynamicTime(props.createdAt);
+
+const infoItems = computed(() => [
+  {
+    label: 'SEARCH.FROM',
+    value: props.name,
+    show: !!props.name,
+  },
+  {
+    label: 'SEARCH.EMAIL',
+    value: props.email,
+    show: !!props.email,
+  },
+  {
+    label: 'SEARCH.EMAIL_SUBJECT',
+    value: props.emailSubject,
+    show: !!props.emailSubject,
+  },
+]);
+
+const visibleInfoItems = computed(() =>
+  infoItems.value.filter(item => item.show)
+);
 </script>
 
 <template>
@@ -86,26 +112,18 @@ const createdAtTime = dynamicTime(props.createdAt);
           {{ createdAtTime }}
         </span>
       </div>
-      <div class="flex gap-2">
+      <div class="flex flex-wrap gap-x-2 gap-y-1.5">
         <h5
-          v-if="name"
-          class="m-0 text-sm min-w-0 truncate text-n-slate-12 dark:text-n-slate-12"
-        >
-          <span class="text-xs font-norma text-n-slate-11 dark:text-n-slate-11">
-            {{ $t('SEARCH.FROM') }}:
-          </span>
-          {{ name }}
-        </h5>
-        <h5
-          v-if="email"
-          class="m-0 overflow-hidden text-sm text-n-slate-12 dark:text-n-slate-12 truncate"
+          v-for="item in visibleInfoItems"
+          :key="item.label"
+          class="m-0 text-sm min-w-0 text-n-slate-12 dark:text-n-slate-12 truncate"
         >
           <span
             class="text-xs font-normal text-n-slate-11 dark:text-n-slate-11"
           >
-            {{ $t('SEARCH.EMAIL') }}:
+            {{ $t(item.label) }}:
           </span>
-          {{ email }}
+          {{ item.value }}
         </h5>
       </div>
       <slot />

app/javascript/dashboard/modules/search/components/SearchResultConversationsList.vue

@@ -1,9 +1,10 @@
 <script setup>
+import { defineProps, computed } from 'vue';
 import { useMapGetter } from 'dashboard/composables/store.js';
 import SearchResultSection from './SearchResultSection.vue';
 import SearchResultConversationItem from './SearchResultConversationItem.vue';
 
-defineProps({
+const props = defineProps({
   conversations: {
     type: Array,
     default: () => [],
@@ -23,6 +24,13 @@ defineProps({
 });
 
 const accountId = useMapGetter('getCurrentAccountId');
+
+const conversationsWithSubject = computed(() => {
+  return props.conversations.map(conversation => ({
+    ...conversation,
+    mail_subject: conversation.additional_attributes?.mail_subject || '',
+  }));
+});
 </script>
 
 <template>
@@ -34,7 +42,10 @@ const accountId = useMapGetter('getCurrentAccountId');
     :is-fetching="isFetching"
   >
     <ul v-if="conversations.length" class="space-y-1.5 list-none">
-      <li v-for="conversation in conversations" :key="conversation.id">
+      <li
+        v-for="conversation in conversationsWithSubject"
+        :key="conversation.id"
+      >
         <SearchResultConversationItem
           :id="conversation.id"
           :name="conversation.contact.name"
@@ -42,6 +53,7 @@ const accountId = useMapGetter('getCurrentAccountId');
           :account-id="accountId"
           :inbox="conversation.inbox"
           :created-at="conversation.created_at"
+          :email-subject="conversation.mail_subject"
         />
       </li>
     </ul>

app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue

@@ -1,17 +1,214 @@
-<script setup>
+<script>
+import { mapGetters } from 'vuex';
+import AgentTable from './components/overview/AgentTable.vue';
+import MetricCard from './components/overview/MetricCard.vue';
+import { OVERVIEW_METRICS } from './constants';
+import ReportHeatmap from './components/Heatmap.vue';
+
+import endOfDay from 'date-fns/endOfDay';
+import getUnixTime from 'date-fns/getUnixTime';
+import startOfDay from 'date-fns/startOfDay';
+import subDays from 'date-fns/subDays';
 import ReportHeader from './components/ReportHeader.vue';
-import HeatmapContainer from './components/HeatmapContainer.vue';
-import AgentLiveReportContainer from './components/AgentLiveReportContainer.vue';
-import TeamLiveReportContainer from './components/TeamLiveReportContainer.vue';
-import StatsLiveReportsContainer from './components/StatsLiveReportsContainer.vue';
+export const FETCH_INTERVAL = 60000;
+
+export default {
+  name: 'LiveReports',
+  components: {
+    ReportHeader,
+    AgentTable,
+    MetricCard,
+    ReportHeatmap,
+  },
+  data() {
+    return {
+      // always start with 0, this is to manage the pagination in tanstack table
+      // when we send the data, we do a +1 to this value
+      pageIndex: 0,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      agentStatus: 'agents/getAgentStatus',
+      agents: 'agents/getAgents',
+      accountConversationMetric: 'getAccountConversationMetric',
+      agentConversationMetric: 'getAgentConversationMetric',
+      accountConversationHeatmap: 'getAccountConversationHeatmapData',
+      uiFlags: 'getOverviewUIFlags',
+    }),
+    agentStatusMetrics() {
+      let metric = {};
+      Object.keys(this.agentStatus).forEach(key => {
+        const metricName = this.$t(
+          `OVERVIEW_REPORTS.AGENT_STATUS.${OVERVIEW_METRICS[key]}`
+        );
+        metric[metricName] = this.agentStatus[key];
+      });
+      return metric;
+    },
+    conversationMetrics() {
+      let metric = {};
+      Object.keys(this.accountConversationMetric).forEach(key => {
+        const metricName = this.$t(
+          `OVERVIEW_REPORTS.ACCOUNT_CONVERSATIONS.${OVERVIEW_METRICS[key]}`
+        );
+        metric[metricName] = this.accountConversationMetric[key];
+      });
+      return metric;
+    },
+  },
+  mounted() {
+    this.$store.dispatch('agents/get');
+    this.initalizeReport();
+  },
+  beforeUnmount() {
+    if (this.timeoutId) {
+      clearTimeout(this.timeoutId);
+    }
+  },
+  methods: {
+    initalizeReport() {
+      this.fetchAllData();
+      this.scheduleReportRefresh();
+    },
+    scheduleReportRefresh() {
+      this.timeoutId = setTimeout(async () => {
+        await this.fetchAllData();
+        this.scheduleReportRefresh();
+      }, FETCH_INTERVAL);
+    },
+    fetchAllData() {
+      this.fetchAccountConversationMetric();
+      this.fetchAgentConversationMetric();
+      this.fetchHeatmapData();
+    },
+    downloadHeatmapData() {
+      let to = endOfDay(new Date());
+
+      this.$store.dispatch('downloadAccountConversationHeatmap', {
+        to: getUnixTime(to),
+      });
+    },
+    fetchHeatmapData() {
+      if (this.uiFlags.isFetchingAccountConversationsHeatmap) {
+        return;
+      }
+
+      // the data for the last 6 days won't ever change,
+      // so there's no need to fetch it again
+      // but we can write some logic to check if the data is already there
+      // if it is there, we can refetch data only for today all over again
+      // and reconcile it with the rest of the data
+      // this will reduce the load on the server doing number crunching
+      let to = endOfDay(new Date());
+      let from = startOfDay(subDays(to, 6));
+
+      if (this.accountConversationHeatmap.length) {
+        to = endOfDay(new Date());
+        from = startOfDay(to);
+      }
+
+      this.$store.dispatch('fetchAccountConversationHeatmap', {
+        metric: 'conversations_count',
+        from: getUnixTime(from),
+        to: getUnixTime(to),
+        groupBy: 'hour',
+        businessHours: false,
+      });
+    },
+    fetchAccountConversationMetric() {
+      this.$store.dispatch('fetchAccountConversationMetric', {
+        type: 'account',
+      });
+    },
+    fetchAgentConversationMetric() {
+      this.$store.dispatch('fetchAgentConversationMetric', {
+        type: 'agent',
+        page: this.pageIndex + 1,
+      });
+    },
+    onPageNumberChange(pageIndex) {
+      this.pageIndex = pageIndex;
+      this.fetchAgentConversationMetric();
+    },
+  },
+};
 </script>
 
 <template>
   <ReportHeader :header-title="$t('OVERVIEW_REPORTS.HEADER')" />
   <div class="flex flex-col gap-4 pb-6">
-    <StatsLiveReportsContainer />
-    <HeatmapContainer />
-    <AgentLiveReportContainer />
-    <TeamLiveReportContainer />
+    <div class="flex flex-col items-center md:flex-row gap-4">
+      <div
+        class="flex-1 w-full max-w-full md:w-[65%] md:max-w-[65%] conversation-metric"
+      >
+        <MetricCard
+          :header="$t('OVERVIEW_REPORTS.ACCOUNT_CONVERSATIONS.HEADER')"
+          :is-loading="uiFlags.isFetchingAccountConversationMetric"
+          :loading-message="
+            $t('OVERVIEW_REPORTS.ACCOUNT_CONVERSATIONS.LOADING_MESSAGE')
+          "
+        >
+          <div
+            v-for="(metric, name, index) in conversationMetrics"
+            :key="index"
+            class="flex-1 min-w-0 pb-2"
+          >
+            <h3 class="text-base text-n-slate-11">
+              {{ name }}
+            </h3>
+            <p class="text-n-slate-12 text-3xl mb-0 mt-1">
+              {{ metric }}
+            </p>
+          </div>
+        </MetricCard>
+      </div>
+      <div class="flex-1 w-full max-w-full md:w-[35%] md:max-w-[35%]">
+        <MetricCard :header="$t('OVERVIEW_REPORTS.AGENT_STATUS.HEADER')">
+          <div
+            v-for="(metric, name, index) in agentStatusMetrics"
+            :key="index"
+            class="flex-1 min-w-0 pb-2"
+          >
+            <h3 class="text-base text-n-slate-11">
+              {{ name }}
+            </h3>
+            <p class="text-n-slate-12 text-3xl mb-0 mt-1">
+              {{ metric }}
+            </p>
+          </div>
+        </MetricCard>
+      </div>
+    </div>
+    <div class="flex flex-row flex-wrap max-w-full">
+      <MetricCard :header="$t('OVERVIEW_REPORTS.CONVERSATION_HEATMAP.HEADER')">
+        <template #control>
+          <woot-button
+            icon="arrow-download"
+            size="small"
+            variant="smooth"
+            color-scheme="secondary"
+            @click="downloadHeatmapData"
+          >
+            {{ $t('OVERVIEW_REPORTS.CONVERSATION_HEATMAP.DOWNLOAD_REPORT') }}
+          </woot-button>
+        </template>
+        <ReportHeatmap
+          :heat-data="accountConversationHeatmap"
+          :is-loading="uiFlags.isFetchingAccountConversationsHeatmap"
+        />
+      </MetricCard>
+    </div>
+    <div class="flex flex-row flex-wrap max-w-full">
+      <MetricCard :header="$t('OVERVIEW_REPORTS.AGENT_CONVERSATIONS.HEADER')">
+        <AgentTable
+          :agents="agents"
+          :agent-metrics="agentConversationMetric"
+          :page-index="pageIndex"
+          :is-loading="uiFlags.isFetchingAgentConversationMetric"
+          @page-change="onPageNumberChange"
+        />
+      </MetricCard>
+    </div>
   </div>
 </template>

app/javascript/dashboard/routes/dashboard/settings/reports/components/AgentLiveReportContainer.vue

@@ -1,36 +0,0 @@
-<script setup>
-import { onMounted } from 'vue';
-
-import AgentTable from './overview/AgentTable.vue';
-import MetricCard from './overview/MetricCard.vue';
-import { useStore, useMapGetter } from 'dashboard/composables/store';
-import { useLiveRefresh } from 'dashboard/composables/useLiveRefresh';
-
-const store = useStore();
-
-const uiFlags = useMapGetter('getOverviewUIFlags');
-const agentConversationMetric = useMapGetter('getAgentConversationMetric');
-const agents = useMapGetter('agents/getAgents');
-
-const fetchData = () => store.dispatch('fetchAgentConversationMetric');
-
-const { startRefetching } = useLiveRefresh(fetchData);
-
-onMounted(() => {
-  store.dispatch('agents/get');
-  fetchData();
-  startRefetching();
-});
-</script>
-
-<template>
-  <div class="flex flex-row flex-wrap max-w-full">
-    <MetricCard :header="$t('OVERVIEW_REPORTS.AGENT_CONVERSATIONS.HEADER')">
-      <AgentTable
-        :agents="agents"
-        :agent-metrics="agentConversationMetric"
-        :is-loading="uiFlags.isFetchingAgentConversationMetric"
-      />
-    </MetricCard>
-  </div>
-</template>

app/javascript/dashboard/routes/dashboard/settings/reports/components/Heatmap.vue

@@ -10,14 +10,10 @@ import { groupHeatmapByDay } from 'helpers/ReportsDataHelper';
 import { useI18n } from 'vue-i18n';
 
 const props = defineProps({
-  heatmapData: {
+  heatData: {
     type: Array,
     default: () => [],
   },
-  numberOfRows: {
-    type: Number,
-    default: 7,
-  },
   isLoading: {
     type: Boolean,
     default: false,
@@ -25,11 +21,11 @@ const props = defineProps({
 });
 const { t } = useI18n();
 const processedData = computed(() => {
-  return groupHeatmapByDay(props.heatmapData);
+  return groupHeatmapByDay(props.heatData);
 });
 
 const quantileRange = computed(() => {
-  const flattendedData = props.heatmapData.map(data => data.value);
+  const flattendedData = props.heatData.map(data => data.value);
   return getQuantileIntervals(flattendedData, [0.2, 0.4, 0.6, 0.8, 0.9, 0.99]);
 });
 
@@ -99,14 +95,14 @@ function getHeatmapLevelClass(value) {
     <template v-if="isLoading">
       <div class="grid gap-[5px] flex-shrink-0">
         <div
-          v-for="ii in numberOfRows"
+          v-for="ii in 7"
           :key="ii"
           class="w-full rounded-sm bg-slate-100 dark:bg-slate-900 animate-loader-pulse h-8 min-w-[70px]"
         />
       </div>
       <div class="grid gap-[5px] w-full min-w-[700px]">
         <div
-          v-for="ii in numberOfRows"
+          v-for="ii in 7"
           :key="ii"
           class="grid gap-[5px] grid-cols-[repeat(24,_1fr)]"
         >

app/javascript/dashboard/routes/dashboard/settings/reports/components/HeatmapContainer.vue

@@ -1,119 +0,0 @@
-<script setup>
-import { onMounted, ref, computed } from 'vue';
-import { useToggle } from '@vueuse/core';
-import MetricCard from './overview/MetricCard.vue';
-import ReportHeatmap from './Heatmap.vue';
-import { useStore, useMapGetter } from 'dashboard/composables/store';
-import { useLiveRefresh } from 'dashboard/composables/useLiveRefresh';
-import endOfDay from 'date-fns/endOfDay';
-import getUnixTime from 'date-fns/getUnixTime';
-import startOfDay from 'date-fns/startOfDay';
-import subDays from 'date-fns/subDays';
-import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-import { useI18n } from 'vue-i18n';
-
-const store = useStore();
-
-const uiFlags = useMapGetter('getOverviewUIFlags');
-const accountConversationHeatmap = useMapGetter(
-  'getAccountConversationHeatmapData'
-);
-const { t } = useI18n();
-
-const menuItems = [
-  {
-    label: t('REPORT.DATE_RANGE_OPTIONS.LAST_7_DAYS'),
-    value: 6,
-  },
-  {
-    label: t('REPORT.DATE_RANGE_OPTIONS.LAST_30_DAYS'),
-    value: 29,
-  },
-];
-
-const selectedDays = ref(6);
-
-const selectedDayFilter = computed(() =>
-  menuItems.find(menuItem => menuItem.value === selectedDays.value)
-);
-
-const downloadHeatmapData = () => {
-  const to = endOfDay(new Date());
-  store.dispatch('downloadAccountConversationHeatmap', {
-    daysBefore: selectedDays.value,
-    to: getUnixTime(to),
-  });
-};
-const [showDropdown, toggleDropdown] = useToggle();
-const fetchHeatmapData = () => {
-  if (uiFlags.value.isFetchingAccountConversationsHeatmap) {
-    return;
-  }
-
-  let to = endOfDay(new Date());
-  let from = startOfDay(subDays(to, Number(selectedDays.value)));
-
-  store.dispatch('fetchAccountConversationHeatmap', {
-    metric: 'conversations_count',
-    from: getUnixTime(from),
-    to: getUnixTime(to),
-    groupBy: 'hour',
-    businessHours: false,
-  });
-};
-
-const handleAction = ({ value }) => {
-  toggleDropdown(false);
-  selectedDays.value = value;
-  fetchHeatmapData();
-};
-
-const { startRefetching } = useLiveRefresh(fetchHeatmapData);
-
-onMounted(() => {
-  fetchHeatmapData();
-  startRefetching();
-});
-</script>
-
-<template>
-  <div class="flex flex-row flex-wrap max-w-full">
-    <MetricCard :header="$t('OVERVIEW_REPORTS.CONVERSATION_HEATMAP.HEADER')">
-      <template #control>
-        <div
-          v-on-clickaway="() => toggleDropdown(false)"
-          class="relative flex items-center group"
-        >
-          <Button
-            sm
-            slate
-            faded
-            :label="selectedDayFilter.label"
-            class="rounded-md group-hover:bg-n-alpha-2"
-            @click="toggleDropdown()"
-          />
-          <DropdownMenu
-            v-if="showDropdown"
-            :menu-items="menuItems"
-            class="mt-1 ltr:right-0 rtl:left-0 xl:ltr:right-0 xl:rtl:left-0 top-full"
-            @action="handleAction($event)"
-          />
-        </div>
-        <Button
-          sm
-          slate
-          faded
-          :label="t('OVERVIEW_REPORTS.CONVERSATION_HEATMAP.DOWNLOAD_REPORT')"
-          class="rounded-md group-hover:bg-n-alpha-2"
-          @click="downloadHeatmapData"
-        />
-      </template>
-      <ReportHeatmap
-        :heatmap-data="accountConversationHeatmap"
-        :number-of-rows="selectedDays + 1"
-        :is-loading="uiFlags.isFetchingAccountConversationsHeatmap"
-      />
-    </MetricCard>
-  </div>
-</template>

app/javascript/dashboard/routes/dashboard/settings/reports/components/StatsLiveReportsContainer.vue

@@ -1,142 +0,0 @@
-<script setup>
-import { computed, onMounted, ref } from 'vue';
-import { OVERVIEW_METRICS } from '../constants';
-import { useToggle } from '@vueuse/core';
-
-import MetricCard from './overview/MetricCard.vue';
-import { useStore, useMapGetter } from 'dashboard/composables/store';
-import { useLiveRefresh } from 'dashboard/composables/useLiveRefresh';
-import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-import { useI18n } from 'vue-i18n';
-const { t } = useI18n();
-
-const uiFlags = useMapGetter('getOverviewUIFlags');
-const agentStatus = useMapGetter('agents/getAgentStatus');
-const accountConversationMetric = useMapGetter('getAccountConversationMetric');
-const store = useStore();
-
-const accounti18nKey = 'OVERVIEW_REPORTS.ACCOUNT_CONVERSATIONS';
-const teams = useMapGetter('teams/getTeams');
-
-const teamMenuList = computed(() => {
-  return [
-    { label: t('OVERVIEW_REPORTS.TEAM_CONVERSATIONS.ALL_TEAMS'), value: null },
-    ...teams.value.map(team => ({ label: team.name, value: team.id })),
-  ];
-});
-
-const agentStatusMetrics = computed(() => {
-  let metric = {};
-  Object.keys(agentStatus.value).forEach(key => {
-    const metricName = t(
-      `OVERVIEW_REPORTS.AGENT_STATUS.${OVERVIEW_METRICS[key]}`
-    );
-    metric[metricName] = agentStatus.value[key];
-  });
-  return metric;
-});
-const conversationMetrics = computed(() => {
-  let metric = {};
-  Object.keys(accountConversationMetric.value).forEach(key => {
-    const metricName = t(`${accounti18nKey}.${OVERVIEW_METRICS[key]}`);
-    metric[metricName] = accountConversationMetric.value[key];
-  });
-  return metric;
-});
-
-const selectedTeam = ref(null);
-const selectedTeamLabel = computed(() => {
-  const team =
-    teamMenuList.value.find(
-      menuItem => menuItem.value === selectedTeam.value
-    ) || {};
-  return team.label;
-});
-const fetchData = () => {
-  const params = {};
-  if (selectedTeam.value) {
-    params.team_id = selectedTeam.value;
-  }
-  store.dispatch('fetchAccountConversationMetric', params);
-};
-
-const { startRefetching } = useLiveRefresh(fetchData);
-const [showDropdown, toggleDropdown] = useToggle();
-
-const handleAction = ({ value }) => {
-  toggleDropdown(false);
-  selectedTeam.value = value;
-  fetchData();
-};
-
-onMounted(() => {
-  fetchData();
-  startRefetching();
-});
-</script>
-
-<template>
-  <div class="flex flex-col items-center md:flex-row gap-4">
-    <div
-      class="flex-1 w-full max-w-full md:w-[65%] md:max-w-[65%] conversation-metric"
-    >
-      <MetricCard
-        :header="t(`${accounti18nKey}.HEADER`)"
-        :is-loading="uiFlags.isFetchingAccountConversationMetric"
-        :loading-message="t(`${accounti18nKey}.LOADING_MESSAGE`)"
-      >
-        <template v-if="teams.length" #control>
-          <div
-            v-on-clickaway="() => toggleDropdown(false)"
-            class="relative flex items-center group z-50"
-          >
-            <Button
-              sm
-              slate
-              faded
-              :label="selectedTeamLabel"
-              class="capitalize rounded-md group-hover:bg-n-alpha-2"
-              @click="toggleDropdown()"
-            />
-            <DropdownMenu
-              v-if="showDropdown"
-              :menu-items="teamMenuList"
-              class="mt-1 ltr:right-0 rtl:left-0 xl:ltr:right-0 xl:rtl:left-0 top-full"
-              label-class="capitalize"
-              @action="handleAction($event)"
-            />
-          </div>
-        </template>
-        <div
-          v-for="(metric, name, index) in conversationMetrics"
-          :key="index"
-          class="flex-1 min-w-0 pb-2"
-        >
-          <h3 class="text-base text-n-slate-11">
-            {{ name }}
-          </h3>
-          <p class="text-n-slate-12 text-3xl mb-0 mt-1">
-            {{ metric }}
-          </p>
-        </div>
-      </MetricCard>
-    </div>
-    <div class="flex-1 w-full max-w-full md:w-[35%] md:max-w-[35%]">
-      <MetricCard :header="$t('OVERVIEW_REPORTS.AGENT_STATUS.HEADER')">
-        <div
-          v-for="(metric, name, index) in agentStatusMetrics"
-          :key="index"
-          class="flex-1 min-w-0 pb-2"
-        >
-          <h3 class="text-base text-n-slate-11">
-            {{ name }}
-          </h3>
-          <p class="text-n-slate-12 text-3xl mb-0 mt-1">
-            {{ metric }}
-          </p>
-        </div>
-      </MetricCard>
-    </div>
-  </div>
-</template>

app/javascript/dashboard/routes/dashboard/settings/reports/components/TeamLiveReportContainer.vue

@@ -1,36 +0,0 @@
-<script setup>
-import { onMounted } from 'vue';
-
-import MetricCard from './overview/MetricCard.vue';
-import { useStore, useMapGetter } from 'dashboard/composables/store';
-import { useLiveRefresh } from 'dashboard/composables/useLiveRefresh';
-import TeamTable from './overview/TeamTable.vue';
-
-const store = useStore();
-
-const uiFlags = useMapGetter('getOverviewUIFlags');
-const teamConversationMetric = useMapGetter('getTeamConversationMetric');
-const teams = useMapGetter('teams/getTeams');
-
-const fetchData = () => store.dispatch('fetchTeamConversationMetric');
-
-const { startRefetching } = useLiveRefresh(fetchData);
-
-onMounted(() => {
-  store.dispatch('teams/get');
-  fetchData();
-  startRefetching();
-});
-</script>
-
-<template>
-  <div class="flex flex-row flex-wrap max-w-full">
-    <MetricCard :header="$t('OVERVIEW_REPORTS.TEAM_CONVERSATIONS.HEADER')">
-      <TeamTable
-        :teams="teams"
-        :team-metrics="teamConversationMetric"
-        :is-loading="uiFlags.isFetchingTeamConversationMetric"
-      />
-    </MetricCard>
-  </div>
-</template>

app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/AgentTable.vue

@@ -4,7 +4,6 @@ import {
   useVueTable,
   createColumnHelper,
   getCoreRowModel,
-  getPaginationRowModel,
 } from '@tanstack/vue-table';
 import { useI18n } from 'vue-i18n';
 
@@ -14,7 +13,7 @@ import Table from 'dashboard/components/table/Table.vue';
 import Pagination from 'dashboard/components/table/Pagination.vue';
 import AgentCell from './AgentCell.vue';
 
-const { agents, agentMetrics } = defineProps({
+const { agents, agentMetrics, pageIndex } = defineProps({
   agents: {
     type: Array,
     default: () => [],
@@ -27,45 +26,42 @@ const { agents, agentMetrics } = defineProps({
     type: Boolean,
     default: false,
   },
+  pageIndex: {
+    type: Number,
+    default: 1,
+  },
 });
 
+const emit = defineEmits(['pageChange']);
 const { t } = useI18n();
 
-const getAgentMetrics = id =>
-  agentMetrics.find(metrics => metrics.assignee_id === Number(id)) || {};
+function getAgentInformation(id) {
+  return agents?.find(agent => agent.id === Number(id));
+}
 
-const tableData = computed(() =>
-  agents
+const totalCount = computed(() => agents.length);
+
+const tableData = computed(() => {
+  return agentMetrics
+    .filter(agentMetric => getAgentInformation(agentMetric.id))
     .map(agent => {
-      const metric = getAgentMetrics(agent.id);
+      const agentInformation = getAgentInformation(agent.id);
       return {
-        agent: agent.available_name || agent.name,
-        email: agent.email,
-        thumbnail: agent.thumbnail,
-        open: metric.open || 0,
-        unattended: metric.unattended || 0,
-        status: agent.availability_status,
+        agent: agentInformation.name || agentInformation.available_name,
+        email: agentInformation.email,
+        thumbnail: agentInformation.thumbnail,
+        open: agent.metric.open ?? 0,
+        unattended: agent.metric.unattended ?? 0,
+        status: agentInformation.availability_status,
       };
-    })
-    .sort((a, b) => {
-      // First sort by open tickets (descending)
-      const openDiff = b.open - a.open;
-      // If open tickets are equal, sort by name (ascending)
-      if (openDiff === 0) {
-        return a.agent.localeCompare(b.agent);
-      }
-      return openDiff;
-    })
-);
+    });
+});
 
 const defaulSpanRender = cellProps =>
   h(
     'span',
-
     {
-      class: cellProps.getValue()
-        ? 'capitalize text-n-slate-12'
-        : 'capitalize text-n-slate-11',
+      class: cellProps.getValue() ? '' : 'text-slate-300 dark:text-slate-700',
     },
     cellProps.getValue() ? cellProps.getValue() : '---'
   );
@@ -90,33 +86,100 @@ const columns = [
   }),
 ];
 
+const paginationParams = computed(() => {
+  return {
+    pageIndex: pageIndex,
+    pageSize: 25,
+  };
+});
+
 const table = useVueTable({
   get data() {
     return tableData.value;
   },
   columns,
+  manualPagination: true,
   enableSorting: false,
   getCoreRowModel: getCoreRowModel(),
-  getPaginationRowModel: getPaginationRowModel(),
+  get rowCount() {
+    return totalCount.value;
+  },
+  state: {
+    get pagination() {
+      return paginationParams.value;
+    },
+  },
+  onPaginationChange: updater => {
+    const newPagintaion = updater(paginationParams.value);
+    emit('pageChange', newPagintaion.pageIndex);
+  },
 });
 </script>
 
 <template>
-  <div class="flex flex-col flex-1">
+  <div class="agent-table-container">
     <Table :table="table" class="max-h-[calc(100vh-21.875rem)]" />
     <Pagination class="mt-2" :table="table" />
-    <div
-      v-if="isLoading"
-      class="items-center flex text-base justify-center p-8"
-    >
+    <div v-if="isLoading" class="agents-loader">
       <Spinner />
-      <span>
-        {{ $t('OVERVIEW_REPORTS.AGENT_CONVERSATIONS.LOADING_MESSAGE') }}
-      </span>
+      <span>{{
+        $t('OVERVIEW_REPORTS.AGENT_CONVERSATIONS.LOADING_MESSAGE')
+      }}</span>
     </div>
     <EmptyState
-      v-else-if="!isLoading && !agents.length"
+      v-else-if="!isLoading && !agentMetrics.length"
       :title="$t('OVERVIEW_REPORTS.AGENT_CONVERSATIONS.NO_AGENTS')"
     />
   </div>
 </template>
+
+<style lang="scss" scoped>
+.agent-table-container {
+  @apply flex flex-col flex-1;
+
+  .ve-table {
+    &::v-deep {
+      th.ve-table-header-th {
+        @apply text-sm rounded-xl;
+        padding: var(--space-small) var(--space-two) !important;
+      }
+
+      td.ve-table-body-td {
+        padding: var(--space-one) var(--space-two) !important;
+      }
+    }
+  }
+
+  &::v-deep .ve-pagination {
+    @apply bg-transparent dark:bg-transparent;
+  }
+
+  &::v-deep .ve-pagination-select {
+    @apply hidden;
+  }
+
+  .row-user-block {
+    @apply items-center flex text-left;
+
+    .user-block {
+      @apply items-start flex flex-col min-w-0 my-0 mx-2;
+
+      .title {
+        @apply text-sm m-0 leading-[1.2] text-slate-800 dark:text-slate-100;
+      }
+
+      .sub-title {
+        @apply text-xs text-slate-600 dark:text-slate-200;
+      }
+    }
+  }
+
+  .table-pagination {
+    @apply mt-4 text-right;
+  }
+}
+
+.agents-loader {
+  @apply items-center flex text-base justify-center p-8;
+}
+</style>

app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/MetricCard.vue

@@ -1,25 +1,31 @@
-<script setup>
+<script>
 import Spinner from 'shared/components/Spinner.vue';
 
-defineProps({
-  header: {
-    type: String,
-    default: '',
+export default {
+  name: 'MetricCard',
+  components: {
+    Spinner,
   },
-  isLoading: {
-    type: Boolean,
-    default: false,
+  props: {
+    header: {
+      type: String,
+      default: '',
+    },
+    isLoading: {
+      type: Boolean,
+      default: false,
+    },
+    loadingMessage: {
+      type: String,
+      default: '',
+    },
   },
-  loadingMessage: {
-    type: String,
-    default: '',
-  },
-});
+};
 </script>
 
 <template>
   <div
-    class="flex flex-col m-0.5 px-6 py-5 rounded-xl flex-grow text-n-slate-12 shadow outline-1 outline outline-n-container bg-n-solid-2 min-h-[10rem]"
+    class="flex flex-col m-0.5 px-6 py-5 overflow-hidden rounded-xl flex-grow text-n-slate-12 shadow outline-1 outline outline-n-container bg-n-solid-2 min-h-[10rem]"
   >
     <div
       class="card-header grid w-full mb-6 grid-cols-[repeat(auto-fit,minmax(max-content,50%))] gap-y-2"
@@ -40,7 +46,9 @@ defineProps({
             </span>
           </span>
         </div>
-        <div class="flex flex-row items-center justify-end gap-2">
+        <div
+          class="transition-opacity duration-200 ease-in-out opacity-20 hover:opacity-100 flex flex-row items-center justify-end gap-2"
+        >
           <slot name="control" />
         </div>
       </slot>

app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/TeamTable.vue

@@ -1,116 +0,0 @@
-<script setup>
-import { computed, h } from 'vue';
-import {
-  useVueTable,
-  createColumnHelper,
-  getCoreRowModel,
-  getPaginationRowModel,
-} from '@tanstack/vue-table';
-import { useI18n } from 'vue-i18n';
-
-import Spinner from 'shared/components/Spinner.vue';
-import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
-import Table from 'dashboard/components/table/Table.vue';
-import Pagination from 'dashboard/components/table/Pagination.vue';
-
-const { teams, teamMetrics } = defineProps({
-  teams: {
-    type: Array,
-    default: () => [],
-  },
-  teamMetrics: {
-    type: Array,
-    default: () => [],
-  },
-  isLoading: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const { t } = useI18n();
-
-const getTeamMetrics = id =>
-  teamMetrics.find(metrics => metrics.team_id === Number(id)) || {};
-
-const tableData = computed(() =>
-  teams
-    .map(team => {
-      const metric = getTeamMetrics(team.id);
-      return {
-        agent: team.name,
-        open: metric.open || 0,
-        unattended: metric.unattended || 0,
-      };
-    })
-    .sort((a, b) => {
-      // First sort by open tickets (descending)
-      const openDiff = b.open - a.open;
-      // If open tickets are equal, sort by name (ascending)
-      if (openDiff === 0) {
-        return a.agent.localeCompare(b.agent);
-      }
-      return openDiff;
-    })
-);
-
-const defaulSpanRender = cellProps =>
-  h(
-    'span',
-    {
-      class: cellProps.getValue()
-        ? 'capitalize text-n-slate-12'
-        : 'capitalize text-n-slate-11',
-    },
-    cellProps.getValue() ? cellProps.getValue() : '---'
-  );
-
-const columnHelper = createColumnHelper();
-const columns = [
-  columnHelper.accessor('agent', {
-    header: t('OVERVIEW_REPORTS.TEAM_CONVERSATIONS.TABLE_HEADER.TEAM'),
-    cell: defaulSpanRender,
-    size: 250,
-  }),
-  columnHelper.accessor('open', {
-    header: t('OVERVIEW_REPORTS.TEAM_CONVERSATIONS.TABLE_HEADER.OPEN'),
-    cell: defaulSpanRender,
-    size: 100,
-  }),
-  columnHelper.accessor('unattended', {
-    header: t('OVERVIEW_REPORTS.TEAM_CONVERSATIONS.TABLE_HEADER.UNATTENDED'),
-    cell: defaulSpanRender,
-    size: 100,
-  }),
-];
-
-const table = useVueTable({
-  get data() {
-    return tableData.value;
-  },
-  columns,
-  enableSorting: false,
-  getCoreRowModel: getCoreRowModel(),
-  getPaginationRowModel: getPaginationRowModel(),
-});
-</script>
-
-<template>
-  <div class="flex flex-col flex-1">
-    <Table :table="table" class="max-h-[calc(100vh-21.875rem)]" />
-    <Pagination class="mt-2" :table="table" />
-    <div
-      v-if="isLoading"
-      class="items-center flex text-base justify-center p-8"
-    >
-      <Spinner />
-      <span>
-        {{ $t('OVERVIEW_REPORTS.TEAM_CONVERSATIONS.LOADING_MESSAGE') }}
-      </span>
-    </div>
-    <EmptyState
-      v-else-if="!isLoading && !teams.length"
-      :title="$t('OVERVIEW_REPORTS.TEAM_CONVERSATIONS.NO_TEAMS')"
-    />
-  </div>
-</template>

app/javascript/dashboard/store/modules/reports.js

@@ -4,8 +4,10 @@ import Report from '../../api/reports';
 import { downloadCsvFile, generateFileName } from '../../helper/downloadHelper';
 import AnalyticsHelper from '../../helper/AnalyticsHelper';
 import { REPORTS_EVENTS } from '../../helper/AnalyticsHelper/events';
-import { clampDataBetweenTimeline } from 'shared/helpers/ReportsDataHelper';
-import liveReports from '../../api/liveReports';
+import {
+  reconcileHeatmapData,
+  clampDataBetweenTimeline,
+} from 'shared/helpers/ReportsDataHelper';
 
 const state = {
   fetchingStatus: false,
@@ -55,12 +57,10 @@ const state = {
       isFetchingAccountConversationMetric: false,
       isFetchingAccountConversationsHeatmap: false,
       isFetchingAgentConversationMetric: false,
-      isFetchingTeamConversationMetric: false,
     },
     accountConversationMetric: {},
     accountConversationHeatmap: [],
     agentConversationMetric: [],
-    teamConversationMetric: [],
   },
 };
 
@@ -83,9 +83,6 @@ const getters = {
   getAgentConversationMetric(_state) {
     return _state.overview.agentConversationMetric;
   },
-  getTeamConversationMetric(_state) {
-    return _state.overview.teamConversationMetric;
-  },
   getOverviewUIFlags($state) {
     return $state.overview.uiFlags;
   },
@@ -117,6 +114,11 @@ export const actions = {
       let { data } = heatmapData;
       data = clampDataBetweenTimeline(data, reportObj.from, reportObj.to);
 
+      data = reconcileHeatmapData(
+        data,
+        state.overview.accountConversationHeatmap
+      );
+
       commit(types.default.SET_HEATMAP_DATA, data);
       commit(types.default.TOGGLE_HEATMAP_LOADING, false);
     });
@@ -151,10 +153,9 @@ export const actions = {
         commit(types.default.TOGGLE_ACCOUNT_REPORT_LOADING, false);
       });
   },
-  fetchAccountConversationMetric({ commit }, params = {}) {
+  fetchAccountConversationMetric({ commit }, reportObj) {
     commit(types.default.TOGGLE_ACCOUNT_CONVERSATION_METRIC_LOADING, true);
-    liveReports
-      .getConversationMetric(params)
+    Report.getConversationMetric(reportObj.type)
       .then(accountConversationMetric => {
         commit(
           types.default.SET_ACCOUNT_CONVERSATION_METRIC,
@@ -166,10 +167,9 @@ export const actions = {
         commit(types.default.TOGGLE_ACCOUNT_CONVERSATION_METRIC_LOADING, false);
       });
   },
-  fetchAgentConversationMetric({ commit }) {
+  fetchAgentConversationMetric({ commit }, reportObj) {
     commit(types.default.TOGGLE_AGENT_CONVERSATION_METRIC_LOADING, true);
-    liveReports
-      .getGroupedConversations({ groupBy: 'assignee_id' })
+    Report.getConversationMetric(reportObj.type, reportObj.page)
       .then(agentConversationMetric => {
         commit(
           types.default.SET_AGENT_CONVERSATION_METRIC,
@@ -181,18 +181,6 @@ export const actions = {
         commit(types.default.TOGGLE_AGENT_CONVERSATION_METRIC_LOADING, false);
       });
   },
-  fetchTeamConversationMetric({ commit }) {
-    commit(types.default.TOGGLE_TEAM_CONVERSATION_METRIC_LOADING, true);
-    liveReports
-      .getGroupedConversations({ groupBy: 'team_id' })
-      .then(teamMetric => {
-        commit(types.default.SET_TEAM_CONVERSATION_METRIC, teamMetric.data);
-        commit(types.default.TOGGLE_TEAM_CONVERSATION_METRIC_LOADING, false);
-      })
-      .catch(() => {
-        commit(types.default.TOGGLE_TEAM_CONVERSATION_METRIC_LOADING, false);
-      });
-  },
   downloadAgentReports(_, reportObj) {
     return Report.getAgentReports(reportObj)
       .then(response => {
@@ -246,7 +234,7 @@ export const actions = {
       });
   },
   downloadAccountConversationHeatmap(_, reportObj) {
-    Report.getConversationTrafficCSV({ daysBefore: reportObj.daysBefore })
+    Report.getConversationTrafficCSV()
       .then(response => {
         downloadCsvFile(
           generateFileName({
@@ -298,12 +286,6 @@ const mutations = {
   [types.default.TOGGLE_AGENT_CONVERSATION_METRIC_LOADING](_state, flag) {
     _state.overview.uiFlags.isFetchingAgentConversationMetric = flag;
   },
-  [types.default.SET_TEAM_CONVERSATION_METRIC](_state, metricData) {
-    _state.overview.teamConversationMetric = metricData;
-  },
-  [types.default.TOGGLE_TEAM_CONVERSATION_METRIC_LOADING](_state, flag) {
-    _state.overview.uiFlags.isFetchingTeamConversationMetric = flag;
-  },
 };
 
 export default {

app/javascript/dashboard/store/mutation-types.js

@@ -335,8 +335,4 @@ export default {
   SET_SLA_REPORTS: 'SET_SLA_REPORTS',
   SET_SLA_REPORTS_METRICS: 'SET_SLA_REPORTS_METRICS',
   SET_SLA_REPORTS_META: 'SET_SLA_REPORTS_META',
-
-  SET_TEAM_CONVERSATION_METRIC: 'SET_TEAM_CONVERSATION_METRIC',
-  TOGGLE_TEAM_CONVERSATION_METRIC_LOADING:
-    'TOGGLE_TEAM_CONVERSATION_METRIC_LOADING',
 };

app/jobs/action_cable_broadcast_job.rb

@@ -1,9 +1,44 @@
 class ActionCableBroadcastJob < ApplicationJob
   queue_as :critical
+  include Events::Types
+
+  CONVERSATION_UPDATE_EVENTS = [
+    CONVERSATION_READ,
+    CONVERSATION_UPDATED,
+    TEAM_CHANGED,
+    ASSIGNEE_CHANGED,
+    CONVERSATION_STATUS_CHANGED
+  ].freeze
 
   def perform(members, event_name, data)
+    return if members.blank?
+
+    broadcast_data = prepare_broadcast_data(event_name, data)
+    broadcast_to_members(members, event_name, broadcast_data)
+  end
+
+  private
+
+  # Ensures that only the latest available data is sent to prevent UI issues
+  # caused by out-of-order events during high-traffic periods. This prevents
+  # the conversation job from processing outdated data.
+  def prepare_broadcast_data(event_name, data)
+    return data unless CONVERSATION_UPDATE_EVENTS.include?(event_name)
+
+    account = Account.find(data[:account_id])
+    conversation = account.conversations.find_by!(display_id: data[:id])
+    conversation.push_event_data.merge(account_id: data[:account_id])
+  end
+
+  def broadcast_to_members(members, event_name, broadcast_data)
     members.each do |member|
-      ActionCable.server.broadcast(member, { event: event_name, data: data })
+      ActionCable.server.broadcast(
+        member,
+        {
+          event: event_name,
+          data: broadcast_data
+        }
+      )
     end
   end
 end

app/presenters/conversations/event_data_presenter.rb

@@ -42,7 +42,8 @@ class Conversations::EventDataPresenter < SimpleDelegator
       contact_last_seen_at: contact_last_seen_at.to_i,
       last_activity_at: last_activity_at.to_i,
       timestamp: last_activity_at.to_i,
-      created_at: created_at.to_i
+      created_at: created_at.to_i,
+      updated_at: updated_at.to_f
     }
   end
 end

app/services/telegram/incoming_message_service.rb

@@ -43,6 +43,7 @@ class Telegram::IncomingMessageService
   def process_message_attachments
     attach_location
     attach_files
+    attach_contact
   end
 
   def update_contact_avatar
@@ -136,6 +137,16 @@ class Telegram::IncomingMessageService
     )
   end
 
+  def attach_contact
+    return unless contact_card
+
+    @message.attachments.new(
+      account_id: @message.account_id,
+      file_type: :contact,
+      fallback_title: contact_card['phone_number'].to_s
+    )
+  end
+
   def file
     @file ||= visual_media_params || params[:message][:voice].presence || params[:message][:audio].presence || params[:message][:document].presence
   end
@@ -154,6 +165,10 @@ class Telegram::IncomingMessageService
     @location ||= params.dig(:message, :location).presence
   end
 
+  def contact_card
+    @contact_card ||= params.dig(:message, :contact).presence
+  end
+
   def visual_media_params
     params[:message][:photo].presence&.last || params.dig(:message, :sticker, :thumb).presence || params[:message][:video].presence
   end

app/views/api/v1/accounts/search/conversations.json.jbuilder

@@ -16,6 +16,8 @@ json.payload do
       json.agent do
         json.partial! 'agent', formats: [:json], agent: conversation.assignee if conversation.try(:assignee).present?
       end
+
+      json.additional_attributes conversation.additional_attributes
     end
   end
 end

app/views/api/v1/conversations/partials/_conversation.json.jbuilder

@@ -44,6 +44,7 @@ json.muted conversation.muted?
 json.snoozed_until conversation.snoozed_until
 json.status conversation.status
 json.created_at conversation.created_at.to_i
+json.updated_at conversation.updated_at.to_f
 json.timestamp conversation.last_activity_at.to_i
 json.first_reply_created_at conversation.first_reply_created_at.to_i
 json.unread_count conversation.unread_incoming_messages.count

app/views/api/v2/accounts/reports/agents.csv.erb

@@ -1,4 +1,4 @@
-<%= CSV.generate_line [I18n.t('reports.period', since: Date.strptime(params[:since], '%s'), until: Date.strptime(params[:until], '%s'))] %>
+<%= CSVSafe.generate_line [I18n.t('reports.period', since: Date.strptime(params[:since], '%s'), until: Date.strptime(params[:until], '%s'))] %>
 
 <% headers = [
     I18n.t('reports.agent_csv.agent_name'),
@@ -9,7 +9,7 @@
     I18n.t('reports.agent_csv.resolution_count')
   ]
 %>
-<%= CSV.generate_line headers -%>
+<%= CSVSafe.generate_line headers -%>
 <% @report_data.each do |row| %>
-<%= CSV.generate_line row -%>
+<%= CSVSafe.generate_line row -%>
 <% end %>

app/views/api/v2/accounts/reports/conversation_traffic.erb

@@ -1,5 +1,5 @@
 <%= CSV.generate_line [I18n.t('reports.conversation_traffic_csv.timezone'), @timezone] %>
 
 <% @report_data.each do |row| %>
-<%= CSV.generate_line row -%>
+<%= CSVSafe.generate_line row -%>
 <% end %>

app/views/api/v2/accounts/reports/inboxes.csv.erb

@@ -1,4 +1,4 @@
-<%= CSV.generate_line [I18n.t('reports.period', since: Date.strptime(params[:since], '%s'), until: Date.strptime(params[:until], '%s'))] %>
+<%= CSVSafe.generate_line [I18n.t('reports.period', since: Date.strptime(params[:since], '%s'), until: Date.strptime(params[:until], '%s'))] %>
 
 <% headers = [
     I18n.t('reports.inbox_csv.inbox_name'),
@@ -8,7 +8,7 @@
     I18n.t('reports.inbox_csv.avg_resolution_time')
   ]
 %>
-<%= CSV.generate_line headers -%>
+<%= CSVSafe.generate_line headers -%>
 <% @report_data.each do |row| %>
-<%= CSV.generate_line row -%>
+<%= CSVSafe.generate_line row -%>
 <% end %>

app/views/api/v2/accounts/reports/labels.csv.erb

@@ -1,4 +1,4 @@
-<%= CSV.generate_line [I18n.t('reports.period', since: Date.strptime(params[:since], '%s'), until: Date.strptime(params[:until], '%s'))] %>
+<%= CSVSafe.generate_line [I18n.t('reports.period', since: Date.strptime(params[:since], '%s'), until: Date.strptime(params[:until], '%s'))] %>
 
 <% headers = [
     I18n.t('reports.label_csv.label_title'),
@@ -7,7 +7,7 @@
     I18n.t('reports.label_csv.avg_resolution_time')
   ]
 %>
-<%= CSV.generate_line headers -%>
+<%= CSVSafe.generate_line headers -%>
 <% @report_data.each do |row| %>
-<%= CSV.generate_line row -%>
+<%= CSVSafe.generate_line row -%>
 <% end %>

app/views/api/v2/accounts/reports/teams.csv.erb

@@ -1,4 +1,4 @@
-<%= CSV.generate_line [I18n.t('reports.period', since: Date.strptime(params[:since], '%s'), until: Date.strptime(params[:until], '%s'))] %>
+<%= CSVSafe.generate_line [I18n.t('reports.period', since: Date.strptime(params[:since], '%s'), until: Date.strptime(params[:until], '%s'))] %>
 
 <% headers = [
     I18n.t('reports.team_csv.team_name'),
@@ -9,7 +9,7 @@
     I18n.t('reports.team_csv.resolution_count')
   ]
 %>
-<%= CSV.generate_line headers -%>
+<%= CSVSafe.generate_line headers -%>
 <% @report_data.each do |row| %>
-<%= CSV.generate_line row -%>
+<%= CSVSafe.generate_line row -%>
 <% end %>

app/views/installation/onboarding/index.html.erb

@@ -70,7 +70,9 @@
                 Finish Setup
               </button>
             </div>
-          <% end %>
+            <% end %>
+          </div>
+        </section>
       </main>
     </div>
   </body>

config/routes.rb

@@ -336,12 +336,6 @@ Rails.application.routes.draw do
               get :bot_metrics
             end
           end
-          resources :live_reports, only: [] do
-            collection do
-              get :conversation_metrics
-              get :grouped_conversation_metrics
-            end
-          end
         end
       end
     end

deployment/setup_20.04.sh

@@ -2,7 +2,7 @@
 
 # Description: Install and manage a Chatwoot installation.
 # OS: Ubuntu 20.04 LTS, 22.04 LTS, 24.04 LTS
-# Script Version: 3.1.0
+# Script Version: 3.2.0
 # Run this script as root
 
 set -eu -o errexit -o pipefail -o noclobber -o nounset
@@ -19,7 +19,7 @@ fi
 # option --output/-o requires 1 argument
 LONGOPTS=console,debug,help,install,Install:,logs:,restart,ssl,upgrade,webserver,version
 OPTIONS=cdhiI:l:rsuwv
-CWCTL_VERSION="3.1.0"
+CWCTL_VERSION="3.2.0"
 pg_pass=$(head /dev/urandom | tr -dc A-Za-z0-9 | head -c 15 ; echo '')
 CHATWOOT_HUB_URL="https://hub.2.chatwoot.com/events"
 

package.json

@@ -34,18 +34,17 @@
     "@chatwoot/ninja-keys": "1.2.3",
     "@chatwoot/prosemirror-schema": "1.1.1-next",
     "@chatwoot/utils": "^0.0.35",
-    "@formkit/core": "^1.6.7",
-    "@formkit/vue": "^1.6.7",
+    "@formkit/core": "^1.6.9",
+    "@formkit/vue": "^1.6.9",
     "@hcaptcha/vue3-hcaptcha": "^1.3.0",
     "@highlightjs/vue-plugin": "^2.1.0",
-    "@iconify-json/material-symbols": "^1.2.10",
     "@june-so/analytics-next": "^2.0.0",
     "@lk77/vue3-color": "^3.0.6",
     "@radix-ui/colors": "^3.0.0",
     "@rails/actioncable": "6.1.3",
     "@rails/ujs": "^7.1.400",
     "@scmmishra/pico-search": "0.5.4",
-    "@sentry/vue": "^8.31.0",
+    "@sentry/vue": "^8.54.0",
     "@sindresorhus/slugify": "2.2.1",
     "@tailwindcss/typography": "^0.5.15",
     "@tanstack/vue-table": "^8.20.5",
@@ -53,25 +52,25 @@
     "@vue/compiler-sfc": "^3.5.8",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "@vueuse/components": "^12.0.0",
-    "@vueuse/core": "^12.0.0",
+    "@vueuse/components": "^12.5.0",
+    "@vueuse/core": "^12.5.0",
     "activestorage": "^5.2.6",
-    "axios": "^1.7.7",
+    "axios": "^1.7.9",
     "camelcase-keys": "^9.1.3",
     "chart.js": "~4.4.4",
     "color2k": "^2.0.2",
     "company-email-validator": "^1.1.0",
     "core-js": "3.38.1",
-    "countries-and-timezones": "^3.6.0",
+    "countries-and-timezones": "^3.7.2",
     "date-fns": "2.21.1",
     "date-fns-tz": "^1.3.3",
     "dompurify": "3.1.6",
-    "flag-icons": "^7.2.3",
+    "flag-icons": "^7.3.2",
     "floating-vue": "^5.2.2",
-    "highlight.js": "^11.10.0",
-    "idb": "^8.0.0",
+    "highlight.js": "^11.11.1",
+    "idb": "^8.0.2",
     "js-cookie": "^3.0.5",
-    "libphonenumber-js": "^1.11.9",
+    "libphonenumber-js": "^1.11.19",
     "markdown-it": "^13.0.2",
     "markdown-it-link-attributes": "^4.0.1",
     "md5": "^2.3.0",
@@ -86,10 +85,10 @@
     "video.js": "7.18.1",
     "videojs-record": "4.5.0",
     "videojs-wavesurfer": "3.8.0",
-    "vue": "^3.5.12",
+    "vue": "^3.5.13",
     "vue-chartjs": "5.3.1",
     "vue-datepicker-next": "^1.0.3",
-    "vue-dompurify-html": "^5.1.0",
+    "vue-dompurify-html": "^5.2.0",
     "vue-i18n": "9.14.2",
     "vue-letter": "^0.2.0",
     "vue-multiselect": "3.1.0",
@@ -103,18 +102,19 @@
     "wavesurfer.js": "7.8.6"
   },
   "devDependencies": {
-    "@egoist/tailwindcss-icons": "^1.8.1",
+    "@egoist/tailwindcss-icons": "^1.9.0",
     "@histoire/plugin-vue": "0.17.15",
-    "@iconify-json/logos": "^1.2.3",
-    "@iconify-json/lucide": "^1.2.11",
-    "@iconify-json/ph": "^1.2.1",
-    "@iconify-json/ri": "^1.2.3",
-    "@iconify-json/teenyicons": "^1.2.1",
+    "@iconify-json/logos": "^1.2.4",
+    "@iconify-json/lucide": "^1.2.26",
+    "@iconify-json/material-symbols": "^1.2.14",
+    "@iconify-json/ph": "^1.2.2",
+    "@iconify-json/ri": "^1.2.5",
+    "@iconify-json/teenyicons": "^1.2.2",
     "@size-limit/file": "^8.2.4",
     "@vitest/coverage-v8": "3.0.5",
     "@vue/test-utils": "^2.4.6",
     "autoprefixer": "^10.4.20",
-    "eslint": "^8.57.0",
+    "eslint": "^8.57.1",
     "eslint-config-airbnb-base": "15.0.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-interactive": "^11.1.0",
@@ -133,7 +133,7 @@
     "prettier": "^3.3.3",
     "prosemirror-model": "^1.22.3",
     "size-limit": "^8.2.4",
-    "tailwindcss": "^3.4.13",
+    "tailwindcss": "^3.4.17",
     "vite": "^5.4.12",
     "vite-plugin-ruby": "^5.0.0",
     "vitest": "3.0.5"

spec/models/conversation_spec.rb

@@ -538,6 +538,7 @@ RSpec.describe Conversation do
         contact_last_seen_at: conversation.contact_last_seen_at.to_i,
         agent_last_seen_at: conversation.agent_last_seen_at.to_i,
         created_at: conversation.created_at.to_i,
+        updated_at: conversation.updated_at.to_f,
         waiting_since: conversation.waiting_since.to_i,
         priority: nil,
         unread_count: 0

spec/presenters/conversations/event_data_presenter_spec.rb

@@ -31,6 +31,7 @@ RSpec.describe Conversations::EventDataPresenter do
         contact_last_seen_at: conversation.contact_last_seen_at.to_i,
         agent_last_seen_at: conversation.agent_last_seen_at.to_i,
         created_at: conversation.created_at.to_i,
+        updated_at: conversation.updated_at.to_f,
         waiting_since: conversation.waiting_since.to_i,
         priority: nil,
         unread_count: 0

spec/services/telegram/incoming_message_service_spec.rb

@@ -309,5 +309,22 @@ describe Telegram::IncomingMessageService do
         expect(telegram_channel.inbox.messages.first.content).to eq('Option 1')
       end
     end
+
+    context 'when valid contact message params' do
+      it 'creates appropriate conversations, message and contacts' do
+        params = {
+          'update_id' => 2_342_342_343_242,
+          'message' => {
+            'contact': {
+              'phone_number': '+918660944581'
+            }
+          }.merge(message_params)
+        }.with_indifferent_access
+        described_class.new(inbox: telegram_channel.inbox, params: params).perform
+        expect(telegram_channel.inbox.conversations.count).not_to eq(0)
+        expect(Contact.all.first.name).to eq('Sojan Jose')
+        expect(telegram_channel.inbox.messages.first.attachments.first.file_type).to eq('contact')
+      end
+    end
   end
 end