Merge branch 'develop' into fix/CW-6859

app/builders/v2/report_builder.rb

@@ -1,6 +1,7 @@
 class V2::ReportBuilder
   include DateRangeHelper
   include ReportHelper
+
   attr_reader :account, :params
 
   DEFAULT_GROUP_BY = 'day'.freeze

app/builders/v2/reports/agent_summary_builder.rb

@@ -11,10 +11,6 @@ class V2::Reports::AgentSummaryBuilder < V2::Reports::BaseSummaryBuilder
   attr_reader :conversations_count, :resolved_count,
               :avg_resolution_time, :avg_first_response_time, :avg_reply_time
 
-  def fetch_conversations_count
-    account.conversations.where(created_at: range).group('assignee_id').count
-  end
-
   def prepare_report
     account.account_users.map do |account_user|
       build_agent_stats(account_user)

app/builders/v2/reports/base_summary_builder.rb

@@ -9,37 +9,13 @@ class V2::Reports::BaseSummaryBuilder
   private
 
   def load_data
-    @conversations_count = fetch_conversations_count
-    load_reporting_events_data
-  end
+    results = data_source.summary
 
-  def load_reporting_events_data
-    # Extract the column name for indexing (e.g., 'conversations.team_id' -> 'team_id')
-    index_key = group_by_key.to_s.split('.').last
-
-    results = reporting_events
-              .select(
-                "#{group_by_key} as #{index_key}",
-                "COUNT(CASE WHEN name = 'conversation_resolved' THEN 1 END) as resolved_count",
-                "AVG(CASE WHEN name = 'conversation_resolved' THEN #{average_value_key} END) as avg_resolution_time",
-                "AVG(CASE WHEN name = 'first_response' THEN #{average_value_key} END) as avg_first_response_time",
-                "AVG(CASE WHEN name = 'reply_time' THEN #{average_value_key} END) as avg_reply_time"
-              )
-              .group(group_by_key)
-              .index_by { |record| record.public_send(index_key) }
-
-    @resolved_count = results.transform_values(&:resolved_count)
-    @avg_resolution_time = results.transform_values(&:avg_resolution_time)
-    @avg_first_response_time = results.transform_values(&:avg_first_response_time)
-    @avg_reply_time = results.transform_values(&:avg_reply_time)
-  end
-
-  def reporting_events
-    @reporting_events ||= account.reporting_events.where(created_at: range)
-  end
-
-  def fetch_conversations_count
-    # Override this method
+    @conversations_count = results.transform_values { |data| data[:conversations_count] }
+    @resolved_count = results.transform_values { |data| data[:resolved_conversations_count] }
+    @avg_resolution_time = results.transform_values { |data| data[:avg_resolution_time] }
+    @avg_first_response_time = results.transform_values { |data| data[:avg_first_response_time] }
+    @avg_reply_time = results.transform_values { |data| data[:avg_reply_time] }
   end
 
   def group_by_key
@@ -50,7 +26,26 @@ class V2::Reports::BaseSummaryBuilder
     # Override this method
   end
 
-  def average_value_key
-    ActiveModel::Type::Boolean.new.cast(params[:business_hours]).present? ? :value_in_business_hours : :value
+  def data_source
+    @data_source ||= Reports::DataSource.for(
+      account: account,
+      metric: nil,
+      dimension_type: summary_dimension_type,
+      dimension_id: nil,
+      scope: nil,
+      range: range,
+      group_by: 'day',
+      timezone_offset: params[:timezone_offset],
+      business_hours: params[:business_hours]
+    )
+  end
+
+  def summary_dimension_type
+    {
+      'account_id' => 'account',
+      'user_id' => 'agent',
+      'inbox_id' => 'inbox',
+      'conversations.team_id' => 'team'
+    }.fetch(group_by_key.to_s)
   end
 end

app/builders/v2/reports/conversations/base_report_builder.rb

@@ -3,23 +3,10 @@ class V2::Reports::Conversations::BaseReportBuilder
 
   private
 
-  AVG_METRICS = %w[avg_first_response_time avg_resolution_time reply_time].freeze
-  COUNT_METRICS = %w[
-    conversations_count
-    incoming_messages_count
-    outgoing_messages_count
-    resolutions_count
-    bot_resolutions_count
-    bot_handoffs_count
-  ].freeze
-
   def builder_class(metric)
-    case metric
-    when *AVG_METRICS
-      V2::Reports::Timeseries::AverageReportBuilder
-    when *COUNT_METRICS
-      V2::Reports::Timeseries::CountReportBuilder
-    end
+    return unless Reports::ReportMetricRegistry.supported?(metric)
+
+    V2::Reports::Timeseries::ReportBuilder
   end
 
   def log_invalid_metric

app/builders/v2/reports/inbox_summary_builder.rb

@@ -11,15 +11,6 @@ class V2::Reports::InboxSummaryBuilder < V2::Reports::BaseSummaryBuilder
   attr_reader :conversations_count, :resolved_count,
               :avg_resolution_time, :avg_first_response_time, :avg_reply_time
 
-  def load_data
-    @conversations_count = fetch_conversations_count
-    load_reporting_events_data
-  end
-
-  def fetch_conversations_count
-    account.conversations.where(created_at: range).group(group_by_key).count
-  end
-
   def prepare_report
     account.inboxes.map do |inbox|
       build_inbox_stats(inbox)
@@ -40,8 +31,4 @@ class V2::Reports::InboxSummaryBuilder < V2::Reports::BaseSummaryBuilder
   def group_by_key
     :inbox_id
   end
-
-  def average_value_key
-    ActiveModel::Type::Boolean.new.cast(params[:business_hours]) ? :value_in_business_hours : :value
-  end
 end

app/builders/v2/reports/team_summary_builder.rb

@@ -6,14 +6,6 @@ class V2::Reports::TeamSummaryBuilder < V2::Reports::BaseSummaryBuilder
   attr_reader :conversations_count, :resolved_count,
               :avg_resolution_time, :avg_first_response_time, :avg_reply_time
 
-  def fetch_conversations_count
-    account.conversations.where(created_at: range).group(:team_id).count
-  end
-
-  def reporting_events
-    @reporting_events ||= account.reporting_events.where(created_at: range).joins(:conversation)
-  end
-
   def prepare_report
     account.teams.map do |team|
       build_team_stats(team)

app/builders/v2/reports/timeseries/average_report_builder.rb

@@ -1,48 +0,0 @@
-class V2::Reports::Timeseries::AverageReportBuilder < V2::Reports::Timeseries::BaseTimeseriesBuilder
-  def timeseries
-    grouped_average_time = reporting_events.average(average_value_key)
-    grouped_event_count = reporting_events.count
-    grouped_average_time.each_with_object([]) do |element, arr|
-      event_date, average_time = element
-      arr << {
-        value: average_time,
-        timestamp: event_date.in_time_zone(timezone).to_i,
-        count: grouped_event_count[event_date]
-      }
-    end
-  end
-
-  def aggregate_value
-    object_scope.average(average_value_key)
-  end
-
-  private
-
-  def event_name
-    metric_to_event_name = {
-      avg_first_response_time: :first_response,
-      avg_resolution_time: :conversation_resolved,
-      reply_time: :reply_time
-    }
-    metric_to_event_name[params[:metric].to_sym]
-  end
-
-  def object_scope
-    scope.reporting_events.where(name: event_name, created_at: range, account_id: account.id)
-  end
-
-  def reporting_events
-    @grouped_values = object_scope.group_by_period(
-      group_by,
-      :created_at,
-      default_value: 0,
-      range: range,
-      permit: %w[day week month year hour],
-      time_zone: timezone
-    )
-  end
-
-  def average_value_key
-    @average_value_key ||= params[:business_hours].present? ? :value_in_business_hours : :value
-  end
-end

app/builders/v2/reports/timeseries/base_timeseries_builder.rb

@@ -1,12 +1,13 @@
 class V2::Reports::Timeseries::BaseTimeseriesBuilder
   include TimezoneHelper
   include DateRangeHelper
+
   DEFAULT_GROUP_BY = 'day'.freeze
 
   pattr_initialize :account, :params
 
   def scope
-    case params[:type].to_sym
+    case dimension_type.to_sym
     when :account
       account
     when :inbox
@@ -20,6 +21,20 @@ class V2::Reports::Timeseries::BaseTimeseriesBuilder
     end
   end
 
+  def data_source
+    @data_source ||= Reports::DataSource.for(
+      account: account,
+      metric: params[:metric],
+      dimension_type: dimension_type,
+      dimension_id: params[:id],
+      scope: scope,
+      range: range,
+      group_by: group_by,
+      timezone_offset: params[:timezone_offset],
+      business_hours: params[:business_hours]
+    )
+  end
+
   def inbox
     @inbox ||= account.inboxes.find(params[:id])
   end
@@ -43,4 +58,10 @@ class V2::Reports::Timeseries::BaseTimeseriesBuilder
   def timezone
     @timezone ||= timezone_name_from_offset(params[:timezone_offset])
   end
+
+  private
+
+  def dimension_type
+    (params[:type].presence || 'account').to_s
+  end
 end

app/builders/v2/reports/timeseries/count_report_builder.rb

@@ -1,78 +0,0 @@
-class V2::Reports::Timeseries::CountReportBuilder < V2::Reports::Timeseries::BaseTimeseriesBuilder
-  def timeseries
-    grouped_count.each_with_object([]) do |element, arr|
-      event_date, event_count = element
-
-      # The `event_date` is in Date format (without time), such as "Wed, 15 May 2024".
-      # We need a timestamp for the start of the day. However, we can't use `event_date.to_time.to_i`
-      # because it converts the date to 12:00 AM server timezone.
-      # The desired output should be 12:00 AM in the specified timezone.
-      arr << { value: event_count, timestamp: event_date.in_time_zone(timezone).to_i }
-    end
-  end
-
-  def aggregate_value
-    object_scope.count
-  end
-
-  private
-
-  def metric
-    @metric ||= params[:metric]
-  end
-
-  def object_scope
-    send("scope_for_#{metric}")
-  end
-
-  def scope_for_conversations_count
-    scope.conversations.where(account_id: account.id, created_at: range)
-  end
-
-  def scope_for_incoming_messages_count
-    scope.messages.where(account_id: account.id, created_at: range).incoming.unscope(:order)
-  end
-
-  def scope_for_outgoing_messages_count
-    scope.messages.where(account_id: account.id, created_at: range).outgoing.unscope(:order)
-  end
-
-  def scope_for_resolutions_count
-    scope.reporting_events.where(
-      name: :conversation_resolved,
-      account_id: account.id,
-      created_at: range
-    )
-  end
-
-  def scope_for_bot_resolutions_count
-    scope.reporting_events.where(
-      name: :conversation_bot_resolved,
-      account_id: account.id,
-      created_at: range
-    )
-  end
-
-  def scope_for_bot_handoffs_count
-    scope.reporting_events.joins(:conversation).select(:conversation_id).where(
-      name: :conversation_bot_handoff,
-      account_id: account.id,
-      created_at: range
-    ).distinct
-  end
-
-  def grouped_count
-    # IMPORTANT: time_zone parameter affects both data grouping AND output timestamps
-    # It converts timestamps to the target timezone before grouping, which means
-    # the same event can fall into different day buckets depending on timezone
-    # Example: 2024-01-15 00:00 UTC becomes 2024-01-14 16:00 PST (falls on different day)
-    @grouped_values = object_scope.group_by_period(
-      group_by,
-      :created_at,
-      default_value: 0,
-      range: range,
-      permit: %w[day week month year hour],
-      time_zone: timezone
-    ).count
-  end
-end

app/builders/v2/reports/timeseries/report_builder.rb

@@ -0,0 +1,9 @@
+class V2::Reports::Timeseries::ReportBuilder < V2::Reports::Timeseries::BaseTimeseriesBuilder
+  def timeseries
+    data_source.timeseries
+  end
+
+  def aggregate_value
+    data_source.aggregate
+  end
+end

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

@@ -3,15 +3,15 @@ class Api::V2::Accounts::SummaryReportsController < Api::V1::Accounts::BaseContr
   before_action :prepare_builder_params, only: [:agent, :team, :inbox, :label, :channel]
 
   def agent
-    render_report_with(V2::Reports::AgentSummaryBuilder)
+    render_report_with(V2::Reports::AgentSummaryBuilder, type: :agent)
   end
 
   def team
-    render_report_with(V2::Reports::TeamSummaryBuilder)
+    render_report_with(V2::Reports::TeamSummaryBuilder, type: :team)
   end
 
   def inbox
-    render_report_with(V2::Reports::InboxSummaryBuilder)
+    render_report_with(V2::Reports::InboxSummaryBuilder, type: :inbox)
   end
 
   def label
@@ -38,8 +38,9 @@ class Api::V2::Accounts::SummaryReportsController < Api::V1::Accounts::BaseContr
     }
   end
 
-  def render_report_with(builder_class)
-    builder = builder_class.new(account: Current.account, params: @builder_params)
+  def render_report_with(builder_class, type: nil)
+    builder_params = type.present? ? @builder_params.merge(type: type) : @builder_params
+    builder = builder_class.new(account: Current.account, params: builder_params)
     render json: builder.build
   end
 

app/javascript/dashboard/components-next/Contacts/ContactsDetailsLayout.vue

@@ -107,11 +107,10 @@ const closeMobileSidebar = () => {
                 size="sm"
               />
               <ComposeConversation :contact-id="contactId">
-                <template #trigger="{ toggle }">
+                <template #trigger>
                   <Button
                     :label="$t('CONTACTS_LAYOUT.HEADER.SEND_MESSAGE')"
                     size="sm"
-                    @click="toggle"
                   />
                 </template>
               </ComposeConversation>

app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue

@@ -114,8 +114,8 @@ const emit = defineEmits([
           </div>
           <div class="w-px h-4 bg-n-strong" />
           <ComposeConversation>
-            <template #trigger="{ toggle }">
-              <Button :label="buttonLabel" size="sm" @click="toggle" />
+            <template #trigger>
+              <Button :label="buttonLabel" size="sm" />
             </template>
           </ComposeConversation>
         </div>

app/javascript/dashboard/components-next/Conversation/ConversationCard/CardAvatar.vue

@@ -0,0 +1,58 @@
+<script setup>
+import { ref, computed } from 'vue';
+import Avatar from 'next/avatar/Avatar.vue';
+import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
+
+const props = defineProps({
+  contact: { type: Object, required: true },
+  selected: { type: Boolean, default: false },
+  enableSelection: { type: Boolean, default: true },
+  hideThumbnail: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(['selectConversation']);
+
+const hovered = ref(false);
+
+const onThumbnailHover = () => {
+  hovered.value = !props.hideThumbnail;
+};
+
+const onThumbnailLeave = () => {
+  hovered.value = false;
+};
+
+const selectedModel = computed({
+  get: () => props.selected,
+  set: value => {
+    emit('selectConversation', value);
+  },
+});
+</script>
+
+<template>
+  <div
+    class="relative flex items-center flex-shrink-0"
+    @mouseenter="onThumbnailHover"
+    @mouseleave="onThumbnailLeave"
+  >
+    <Avatar
+      v-if="!hideThumbnail"
+      :name="contact.name"
+      :src="contact.thumbnail"
+      :size="24"
+      :status="contact.availability_status"
+      hide-offline-status
+    >
+      <template v-if="enableSelection" #overlay>
+        <div
+          v-if="hovered || selected"
+          class="flex items-center justify-center rounded-md cursor-pointer absolute inset-0 z-10 backdrop-blur-[2px] size-6"
+          @click.stop
+        >
+          <Checkbox v-model="selectedModel" />
+        </div>
+      </template>
+    </Avatar>
+  </div>
+</template>

app/javascript/dashboard/components-next/Conversation/ConversationCard/CardContent.vue

@@ -0,0 +1,47 @@
+<script setup>
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import MessagePreview from './MessagePreview.vue';
+import VoiceCallStatus from './VoiceCallStatus.vue';
+import UnreadBadge from './UnreadBadge.vue';
+
+defineProps({
+  lastMessage: { type: Object, default: null },
+  voiceCallStatus: { type: String, default: '' },
+  voiceCallDirection: { type: String, default: '' },
+  unreadCount: { type: Number, default: 0 },
+  showExpandedPreview: { type: Boolean, default: false },
+});
+</script>
+
+<template>
+  <div
+    class="grid grid-cols-[1fr_auto] gap-1.5"
+    :class="showExpandedPreview ? 'items-end' : 'items-center'"
+  >
+    <VoiceCallStatus
+      v-if="voiceCallStatus"
+      key="voice-status-row"
+      :status="voiceCallStatus"
+      :direction="voiceCallDirection"
+      :class="unreadCount > 0 ? 'text-n-slate-12' : 'text-n-slate-11'"
+    />
+    <MessagePreview
+      v-else-if="lastMessage"
+      key="message-preview"
+      :message="lastMessage"
+      :multi-line="showExpandedPreview"
+      :class="unreadCount > 0 ? 'text-n-slate-12' : 'text-n-slate-11'"
+    />
+    <span
+      v-else
+      key="no-messages"
+      class="inline-grid grid-flow-col auto-cols-max items-center gap-1 text-body-main"
+      :class="unreadCount > 0 ? 'text-n-slate-12' : 'text-n-slate-11'"
+    >
+      <Icon icon="i-lucide-info" class="size-3.5" />
+      {{ $t(`CHAT_LIST.NO_MESSAGES`) }}
+    </span>
+
+    <UnreadBadge :count="unreadCount" :align-bottom="showExpandedPreview" />
+  </div>
+</template>

app/javascript/dashboard/components-next/Conversation/ConversationCard/CardLabelsV5.vue

@@ -0,0 +1,175 @@
+<script setup>
+import { ref, computed, nextTick, useSlots, watch, useAttrs } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useThrottleFn } from '@vueuse/core';
+import { useMapGetter } from 'dashboard/composables/store';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import Label from 'dashboard/components-next/label/Label.vue';
+
+const props = defineProps({
+  labels: {
+    type: Array,
+    default: () => [],
+  },
+  disableToggle: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+defineOptions({ inheritAttrs: false });
+
+const attrs = useAttrs();
+const slots = useSlots();
+const { t } = useI18n();
+
+const accountLabels = useMapGetter('labels/getLabels');
+
+const activeLabels = computed(() => {
+  return accountLabels.value.filter(({ title }) =>
+    props.labels.includes(title)
+  );
+});
+
+const showAllLabels = ref(false);
+const showExpandLabelButton = ref(false);
+const labelPosition = ref(-1);
+const labelContainer = ref(null);
+
+// Show if there are labels OR if before slot exists
+const showSection = computed(
+  () => activeLabels.value.length > 0 || !!slots.before
+);
+
+const computeVisibleLabelPosition = () => {
+  const container = labelContainer.value;
+  if (!container || activeLabels.value.length === 0) {
+    showExpandLabelButton.value = false;
+    return;
+  }
+
+  const labels = container.querySelectorAll('[data-label]');
+  if (labels.length === 0) {
+    showExpandLabelButton.value = false;
+    return;
+  }
+
+  // Early exit if all labels are visible
+  if (showAllLabels.value) return;
+
+  const beforeSlot = container.querySelector('[data-before-slot]');
+  const beforeSlotWidth = beforeSlot?.offsetWidth ?? 0;
+  const availableWidth = container.clientWidth - 46 - beforeSlotWidth;
+
+  let totalWidth = 0;
+  const labelsArray = Array.from(labels);
+
+  // Find last visible label index using some() - stops early on overflow
+  const overflowIndex = labelsArray.findIndex(label => {
+    totalWidth += label.offsetWidth + 6;
+    return totalWidth > availableWidth;
+  });
+
+  const visibleIndex =
+    overflowIndex === -1 ? labelsArray.length - 1 : overflowIndex - 1;
+
+  labelPosition.value = visibleIndex;
+  showExpandLabelButton.value = visibleIndex < labelsArray.length - 1;
+};
+
+const throttledCalculate = useThrottleFn(computeVisibleLabelPosition, 16);
+
+watch(activeLabels, () => nextTick(throttledCalculate), { immediate: true });
+
+const hiddenLabelsCount = computed(() => {
+  if (!showExpandLabelButton.value || showAllLabels.value) return 0;
+  return activeLabels.value.length - labelPosition.value - 1;
+});
+
+// Check if all labels are hidden (none visible)
+const allLabelsHidden = computed(() => {
+  return labelPosition.value === -1 && activeLabels.value.length > 0;
+});
+
+// Label text for button when disableToggle is true and all labels are hidden
+const labelsCountText = computed(() => {
+  if (props.disableToggle && allLabelsHidden.value) {
+    return t('CONVERSATION.CARD.LABELS_COUNT', {
+      count: activeLabels.value.length,
+    });
+  }
+  if (!showAllLabels.value && hiddenLabelsCount.value > 0) {
+    return hiddenLabelsCount.value;
+  }
+  return '';
+});
+
+const hiddenLabelsTooltip = computed(() => {
+  if (!props.disableToggle) return '';
+  // When all labels are hidden, show all label titles
+  if (allLabelsHidden.value) {
+    return activeLabels.value.map(label => label.title).join(', ');
+  }
+  if (!showExpandLabelButton.value) return '';
+  const hiddenLabels = activeLabels.value.slice(labelPosition.value + 1);
+  return hiddenLabels.map(label => label.title).join(', ');
+});
+
+const tooltipText = computed(() => {
+  if (props.disableToggle && hiddenLabelsTooltip.value) {
+    return hiddenLabelsTooltip.value;
+  }
+  return showAllLabels.value
+    ? t('CONVERSATION.CARD.HIDE_LABELS')
+    : t('CONVERSATION.CARD.SHOW_LABELS');
+});
+
+const onShowLabels = e => {
+  e.stopPropagation();
+  if (props.disableToggle) return;
+  showAllLabels.value = !showAllLabels.value;
+  nextTick(() => computeVisibleLabelPosition());
+};
+</script>
+
+<template>
+  <div
+    v-if="showSection"
+    ref="labelContainer"
+    v-bind="attrs"
+    v-resize="throttledCalculate"
+    data-labels-container
+    class="flex items-center flex-shrink min-w-0 min-h-6 gap-x-1.5 gap-y-1 [&:not(:has([data-label],[data-before-slot]))]:hidden"
+    :class="{ 'h-auto overflow-visible flex-row flex-wrap': showAllLabels }"
+  >
+    <slot name="before" />
+
+    <Label
+      v-for="(label, index) in activeLabels"
+      :key="label ? label.id : index"
+      data-label
+      :label="label"
+      compact
+      :class="{
+        'invisible absolute': !showAllLabels && index > labelPosition,
+      }"
+    />
+    <Button
+      v-if="showExpandLabelButton || (disableToggle && allLabelsHidden)"
+      v-tooltip.top="{
+        content: tooltipText,
+        delay: { show: 500, hide: 0 },
+      }"
+      :label="labelsCountText"
+      xs
+      slate
+      :no-animation="disableToggle"
+      :icon="labelsCountText ? 'i-lucide-plus' : 'i-lucide-chevron-left'"
+      class="!py-0 !px-1.5 flex-shrink-0 !rounded-md !bg-n-button-color -outline-offset-1 !gap-0.5 [&>span:first-child]:!text-n-slate-10 [&>span:last-child]:!text-n-slate-11"
+      :class="{ 'cursor-default': disableToggle }"
+      @click="onShowLabels"
+    />
+  </div>
+  <template v-else />
+</template>

app/javascript/dashboard/components-next/Conversation/ConversationCard/CardStatusIcon.vue

@@ -0,0 +1,42 @@
+<script setup>
+import { computed } from 'vue';
+import { CONVERSATION_STATUS } from 'shared/constants/messages';
+
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+
+const props = defineProps({
+  status: {
+    type: String,
+    default: '',
+  },
+  showEmpty: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const icons = {
+  [CONVERSATION_STATUS.OPEN]: 'i-woot-status-open',
+  [CONVERSATION_STATUS.RESOLVED]: 'i-woot-status-resolved',
+  [CONVERSATION_STATUS.PENDING]: 'i-woot-status-pending',
+  [CONVERSATION_STATUS.SNOOZED]: 'i-woot-status-snoozed',
+};
+
+const iconName = computed(() => {
+  if (props.status && icons[props.status]) {
+    return icons[props.status];
+  }
+  return props.showEmpty ? 'i-woot-status-empty' : '';
+});
+</script>
+
+<template>
+  <Icon
+    v-tooltip.top="{
+      content: status,
+      delay: { show: 500, hide: 0 },
+    }"
+    :icon="iconName"
+    class="size-4 flex-shrink-0"
+  />
+</template>

app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCardExpanded.vue

@@ -0,0 +1,183 @@
+<script setup>
+import { computed, useTemplateRef } from 'vue';
+import { getLastMessage } from 'dashboard/helper/conversationHelper';
+import CardAvatar from './CardAvatar.vue';
+import CardContent from './CardContent.vue';
+import CardLabels from './CardLabelsV5.vue';
+import CardPriorityIcon from './CardPriorityIcon.vue';
+import InboxName from 'dashboard/components-next/Conversation/InboxName.vue';
+import Avatar from 'next/avatar/Avatar.vue';
+import TimeAgo from 'dashboard/components/ui/TimeAgo.vue';
+import SLACardLabel from 'dashboard/components-next/Conversation/Sla/SLACardLabel.vue';
+import CardStatusIcon from './CardStatusIcon.vue';
+import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+
+const props = defineProps({
+  chat: { type: Object, required: true },
+  currentContact: { type: Object, required: true },
+  assignee: { type: Object, default: () => ({}) },
+  inbox: { type: Object, default: () => ({}) },
+  selected: { type: Boolean, default: false },
+  isActiveChat: { type: Boolean, default: false },
+  showAssignee: { type: Boolean, default: false },
+  showInboxName: { type: Boolean, default: false },
+  isInboxView: { type: Boolean, default: false },
+});
+
+const emit = defineEmits([
+  'selectConversation',
+  'deSelectConversation',
+  'click',
+  'contextmenu',
+]);
+
+const lastMessageInChat = computed(() => getLastMessage(props.chat));
+const showLabelsSection = computed(() => props.chat.labels?.length > 0);
+
+const voiceCallData = computed(() => ({
+  status: props.chat.additional_attributes?.call_status,
+  direction: props.chat.additional_attributes?.call_direction,
+}));
+
+const unreadCount = computed(() => props.chat.unread_count);
+
+const slaCardLabel = useTemplateRef('slaCardLabel');
+
+const hasSlaPolicyId = computed(
+  () => props.chat?.sla_policy_id || slaCardLabel.value?.hasSlaThreshold
+);
+
+const selectedModel = computed({
+  get: () => props.selected,
+  set: value => {
+    if (value) {
+      emit('selectConversation', value);
+    } else {
+      emit('deSelectConversation', value);
+    }
+  },
+});
+</script>
+
+<template>
+  <div
+    class="conversation relative cursor-pointer group grid gap-4 items-center px-3 h-12 border-b border-n-slate-3 hover:border-n-surface-1 hover:z-[1] before:content-[none] before:absolute before:-top-px before:inset-x-0 before:h-px before:bg-n-surface-1 before:pointer-events-none hover:before:content-['']"
+    :class="{
+      'active animate-card-select bg-n-alpha-1 dark:bg-n-alpha-3 !border-n-surface-1':
+        isActiveChat,
+      'selected bg-n-slate-2 dark:bg-n-slate-3 !border-n-surface-1': selected,
+      'hover:bg-n-alpha-1': !isActiveChat && !selected,
+      'grid-cols-[minmax(0,2fr)_minmax(0,1fr)]': showLabelsSection,
+      'grid-cols-[minmax(0,2fr)_max-content]': !showLabelsSection,
+    }"
+    @click="$emit('click', $event)"
+    @contextmenu="$emit('contextmenu', $event)"
+  >
+    <!-- LEFT SECTION -->
+    <div class="flex items-center gap-2 min-w-0 flex-1">
+      <div class="flex items-center justify-center flex-shrink-0" @click.stop>
+        <Checkbox v-model="selectedModel" />
+      </div>
+
+      <div class="w-px h-3 bg-n-slate-6 flex-shrink-0" />
+
+      <div class="w-4 flex items-center justify-center flex-shrink-0">
+        <CardPriorityIcon :priority="chat.priority" show-empty />
+      </div>
+
+      <div class="w-4 flex items-center justify-center flex-shrink-0">
+        <Avatar
+          v-if="showAssignee && assignee.name"
+          v-tooltip.top="{
+            content: assignee.name,
+            delay: { show: 500, hide: 0 },
+          }"
+          :name="assignee.name"
+          :src="assignee.thumbnail"
+          :size="14"
+          :status="assignee.availability_status"
+          hide-offline-status
+        />
+        <Icon
+          v-else
+          icon="i-woot-empty-assignee"
+          class="size-4 text-n-slate-7"
+        />
+      </div>
+
+      <div class="w-4 flex items-center justify-center flex-shrink-0">
+        <CardStatusIcon :status="chat.status" show-empty />
+      </div>
+
+      <div class="w-px h-3 bg-n-slate-6 flex-shrink-0" />
+
+      <div v-if="!isInboxView" class="w-20 flex-shrink-0">
+        <InboxName v-if="showInboxName" :inbox="inbox" class="min-w-0" />
+      </div>
+
+      <div v-if="!isInboxView" class="w-px h-3 bg-n-slate-6 flex-shrink-0" />
+
+      <div
+        v-tooltip.top="{
+          content: chat.id,
+          delay: { show: 500, hide: 0 },
+        }"
+        class="h-6 flex items-center gap-1 max-w-20 w-full min-w-0 flex-shrink-0"
+      >
+        <Icon
+          icon="i-woot-hash"
+          class="size-3.5 text-n-slate-10 flex-shrink-0"
+        />
+        <span class="text-body-main text-n-slate-11 truncate">
+          {{ chat.id }}
+        </span>
+      </div>
+
+      <CardAvatar
+        :contact="currentContact"
+        :selected="false"
+        :enable-selection="false"
+        :hide-thumbnail="false"
+      />
+
+      <h4
+        class="text-heading-3 my-0 capitalize truncate text-n-slate-12 font-medium w-32 flex-shrink-0"
+      >
+        {{ currentContact.name }}
+      </h4>
+
+      <CardContent
+        :last-message="lastMessageInChat"
+        :voice-call-status="voiceCallData.status"
+        :voice-call-direction="voiceCallData.direction"
+        :unread-count="unreadCount"
+        :show-expanded-preview="false"
+      />
+    </div>
+
+    <!-- RIGHT SECTION -->
+    <div class="flex items-center justify-end gap-1.5 flex-shrink-0">
+      <div v-if="showLabelsSection" class="min-w-0 w-full">
+        <CardLabels
+          :labels="chat.labels"
+          disable-toggle
+          class="my-0 [&>div]:justify-end justify-end"
+        />
+      </div>
+
+      <div v-if="hasSlaPolicyId" class="flex-shrink-0">
+        <SLACardLabel ref="slaCardLabel" :chat="chat" />
+      </div>
+
+      <div class="flex-shrink-0 w-[4.375rem] text-end">
+        <TimeAgo
+          :conversation-id="chat.id"
+          :last-activity-timestamp="chat.timestamp"
+          :created-at-timestamp="chat.created_at"
+          class="font-440 !text-xs text-n-slate-11"
+        />
+      </div>
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components-next/Conversation/ConversationCard/MessagePreview.vue

@@ -0,0 +1,156 @@
+<script setup>
+import { computed } from 'vue';
+import { MESSAGE_TYPE } from 'widget/helpers/constants';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+
+const props = defineProps({
+  message: {
+    type: Object,
+    required: true,
+  },
+  showMessageType: {
+    type: Boolean,
+    default: true,
+  },
+  defaultEmptyMessage: {
+    type: String,
+    default: '',
+  },
+  multiLine: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const { getPlainText } = useMessageFormatter();
+
+const attachmentIcons = {
+  image: 'i-lucide-image',
+  audio: 'i-lucide-headphones',
+  video: 'i-lucide-video',
+  file: 'i-lucide-file',
+  location: 'i-lucide-map-pin',
+  fallback: 'i-lucide-link-2',
+};
+
+const messageByAgent = computed(() => {
+  const { message_type: messageType } = props.message;
+  return messageType === MESSAGE_TYPE.OUTGOING;
+});
+
+const isMessageAnActivity = computed(() => {
+  const { message_type: messageType } = props.message;
+  return messageType === MESSAGE_TYPE.ACTIVITY;
+});
+
+const isMessagePrivate = computed(() => {
+  const { private: isPrivate } = props.message;
+  return isPrivate;
+});
+
+const parsedLastMessage = computed(() => {
+  const { content_attributes: contentAttributes } = props.message;
+  const { email: { subject } = {} } = contentAttributes || {};
+  return getPlainText(subject || props.message.content);
+});
+
+const lastMessageFileType = computed(() => {
+  const [{ file_type: fileType } = {}] = props.message.attachments;
+  return fileType;
+});
+
+const attachmentIcon = computed(() => {
+  return attachmentIcons[lastMessageFileType.value];
+});
+
+const attachmentMessageContent = computed(() => {
+  return `CHAT_LIST.ATTACHMENTS.${lastMessageFileType.value}.CONTENT`;
+});
+
+const isMessageSticker = computed(() => {
+  return props.message && props.message.content_type === 'sticker';
+});
+</script>
+
+<template>
+  <div
+    class="min-w-0 text-sm"
+    :class="
+      multiLine
+        ? 'flex items-start gap-1'
+        : 'grid grid-cols-[auto_1fr] items-center gap-1'
+    "
+  >
+    <template v-if="showMessageType && !multiLine">
+      <Icon
+        v-if="isMessagePrivate"
+        icon="i-lucide-lock-keyhole"
+        class="size-3.5"
+      />
+      <Icon
+        v-else-if="messageByAgent"
+        icon="i-lucide-undo-2"
+        class="size-3.5"
+      />
+      <Icon
+        v-else-if="isMessageAnActivity"
+        icon="i-lucide-info"
+        class="size-3.5"
+      />
+    </template>
+
+    <span
+      class="min-w-0 text-body-main"
+      :class="multiLine ? 'line-clamp-2' : 'truncate'"
+    >
+      <!-- Case for previous and conversation conversation card -->
+      <template v-if="showMessageType && multiLine">
+        <Icon
+          v-if="isMessagePrivate"
+          icon="i-lucide-lock-keyhole"
+          class="inline-block align-middle size-3.5 ltr:mr-1 rtl:ml-1"
+        />
+        <Icon
+          v-else-if="messageByAgent"
+          icon="i-lucide-undo-2"
+          class="inline-block align-middle size-3.5 ltr:mr-1 rtl:ml-1"
+        />
+        <Icon
+          v-else-if="isMessageAnActivity"
+          icon="i-lucide-info"
+          class="inline-block align-middle size-3.5 ltr:mr-1 rtl:ml-1"
+        />
+      </template>
+      <span
+        v-if="message.content && isMessageSticker"
+        class="inline-grid grid-flow-col auto-cols-max items-center gap-1"
+      >
+        <Icon icon="i-lucide-image" class="size-3.5" />
+        {{ $t('CHAT_LIST.ATTACHMENTS.image.CONTENT') }}
+      </span>
+
+      <template v-else-if="message.content">
+        {{ parsedLastMessage }}
+      </template>
+
+      <span
+        v-else-if="message.attachments"
+        class="inline-block align-middle truncate"
+      >
+        <Icon
+          v-if="attachmentIcon && showMessageType"
+          :icon="attachmentIcon"
+          class="inline-block align-middle size-3.5 ltr:mr-1 rtl:ml-1"
+        />
+        <span class="inline-block align-middle">
+          {{ $t(attachmentMessageContent) }}
+        </span>
+      </span>
+
+      <template v-else>
+        {{ defaultEmptyMessage || $t('CHAT_LIST.NO_CONTENT') }}
+      </template>
+    </span>
+  </div>
+</template>

app/javascript/dashboard/components-next/Conversation/ConversationCard/UnreadBadge.vue

@@ -0,0 +1,28 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const props = defineProps({
+  count: { type: Number, required: true },
+  alignBottom: { type: Boolean, default: false },
+});
+
+const { t } = useI18n();
+
+const displayCount = computed(() =>
+  props.count > 9 ? t('CHAT_LIST.UNREAD_COUNT_OVERFLOW') : props.count
+);
+</script>
+
+<template>
+  <span
+    v-if="count > 0"
+    class="bg-n-teal-9 rounded-full h-4 min-w-4 max-w-5 px-1 w-fit font-medium text-xxs leading-3 text-white inline-grid place-items-center flex-shrink-0"
+    :class="{
+      'mb-0.5': alignBottom,
+    }"
+  >
+    {{ displayCount }}
+  </span>
+  <span v-else />
+</template>

app/javascript/dashboard/components-next/Conversation/ConversationCard/VoiceCallStatus.vue

@@ -0,0 +1,69 @@
+<script setup>
+import { computed } from 'vue';
+import {
+  VOICE_CALL_STATUS,
+  VOICE_CALL_DIRECTION,
+} from 'dashboard/components-next/message/constants';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+
+const props = defineProps({
+  status: { type: String, default: '' },
+  direction: { type: String, default: '' },
+});
+
+const LABEL_KEYS = {
+  [VOICE_CALL_STATUS.IN_PROGRESS]: 'CONVERSATION.VOICE_CALL.CALL_IN_PROGRESS',
+  [VOICE_CALL_STATUS.COMPLETED]: 'CONVERSATION.VOICE_CALL.CALL_ENDED',
+};
+
+const ICON_MAP = {
+  [VOICE_CALL_STATUS.IN_PROGRESS]: 'i-ph-phone-call',
+  [VOICE_CALL_STATUS.NO_ANSWER]: 'i-ph-phone-x',
+  [VOICE_CALL_STATUS.FAILED]: 'i-ph-phone-x',
+};
+
+const COLOR_MAP = {
+  [VOICE_CALL_STATUS.IN_PROGRESS]: 'text-n-teal-9',
+  [VOICE_CALL_STATUS.RINGING]: 'text-n-teal-9',
+  [VOICE_CALL_STATUS.COMPLETED]: 'text-n-slate-11',
+  [VOICE_CALL_STATUS.NO_ANSWER]: 'text-n-ruby-9',
+  [VOICE_CALL_STATUS.FAILED]: 'text-n-ruby-9',
+};
+
+const isOutbound = computed(
+  () => props.direction === VOICE_CALL_DIRECTION.OUTBOUND
+);
+const isFailed = computed(() =>
+  [VOICE_CALL_STATUS.NO_ANSWER, VOICE_CALL_STATUS.FAILED].includes(props.status)
+);
+
+const labelKey = computed(() => {
+  if (LABEL_KEYS[props.status]) return LABEL_KEYS[props.status];
+  if (props.status === VOICE_CALL_STATUS.RINGING) {
+    return isOutbound.value
+      ? 'CONVERSATION.VOICE_CALL.OUTGOING_CALL'
+      : 'CONVERSATION.VOICE_CALL.INCOMING_CALL';
+  }
+  return isFailed.value
+    ? 'CONVERSATION.VOICE_CALL.MISSED_CALL'
+    : 'CONVERSATION.VOICE_CALL.INCOMING_CALL';
+});
+
+const iconName = computed(() => {
+  if (ICON_MAP[props.status]) return ICON_MAP[props.status];
+  return isOutbound.value ? 'i-ph-phone-outgoing' : 'i-ph-phone-incoming';
+});
+
+const statusColor = computed(
+  () => COLOR_MAP[props.status] || 'text-n-slate-11'
+);
+</script>
+
+<template>
+  <div class="grid grid-cols-[auto_1fr] items-center gap-1 min-w-0 text-sm">
+    <Icon class="size-3.5" :icon="iconName" :class="statusColor" />
+    <span class="truncate text-body-main" :class="statusColor">
+      {{ $t(labelKey) }}
+    </span>
+  </div>
+</template>

app/javascript/dashboard/components-next/Conversation/InboxName.vue

@@ -0,0 +1,19 @@
+<script setup>
+import ChannelIcon from 'dashboard/components-next/icon/ChannelIcon.vue';
+
+defineProps({
+  inbox: {
+    type: Object,
+    default: () => {},
+  },
+});
+</script>
+
+<template>
+  <div :title="inbox.name" class="flex items-center gap-0.5 min-w-0">
+    <ChannelIcon :inbox="inbox" class="size-4 flex-shrink-0 text-n-slate-11" />
+    <span class="truncate text-body-main text-n-slate-11">
+      {{ inbox.name }}
+    </span>
+  </div>
+</template>

app/javascript/dashboard/components-next/Conversation/Sla/SLACardLabel.vue

@@ -0,0 +1,82 @@
+<script setup>
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
+import { evaluateSLAStatus } from '@chatwoot/utils';
+
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import Label from 'dashboard/components-next/label/Label.vue';
+
+const props = defineProps({
+  chat: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const REFRESH_INTERVAL = 60000;
+
+const timer = ref(null);
+const slaStatus = ref({
+  threshold: null,
+  isSlaMissed: false,
+  type: null,
+  icon: null,
+});
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const appliedSLA = computed(() => props.chat?.applied_sla);
+const hasSlaThreshold = computed(() => slaStatus.value?.threshold);
+const isSlaMissed = computed(() => slaStatus.value?.isSlaMissed);
+
+const updateSlaStatus = () => {
+  slaStatus.value = evaluateSLAStatus({
+    appliedSla: appliedSLA.value || {},
+    chat: props.chat,
+  });
+};
+
+const createTimer = () => {
+  timer.value = setTimeout(() => {
+    updateSlaStatus();
+    createTimer();
+  }, REFRESH_INTERVAL);
+};
+
+onMounted(() => {
+  updateSlaStatus();
+  createTimer();
+});
+
+onUnmounted(() => {
+  if (timer.value) {
+    clearTimeout(timer.value);
+  }
+});
+
+watch(() => props.chat, updateSlaStatus);
+
+defineExpose({
+  hasSlaThreshold,
+});
+</script>
+
+<template>
+  <div
+    v-if="hasSlaThreshold"
+    v-bind="$attrs"
+    class="relative flex items-center cursor-pointer min-w-fit group"
+  >
+    <Label
+      :label="slaStatus.threshold"
+      :color="isSlaMissed ? 'ruby' : 'amber'"
+      compact
+    >
+      <template #icon>
+        <Icon icon="i-lucide-flame" class="flex-shrink-0 size-3.5" />
+      </template>
+    </Label>
+  </div>
+  <template v-else />
+</template>

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

@@ -2,13 +2,10 @@
 import { reactive, ref, computed, onMounted, watch } from 'vue';
 import { useStore, useMapGetter } from 'dashboard/composables/store';
 import { useI18n } from 'vue-i18n';
-import { useWindowSize } from '@vueuse/core';
 import { useUISettings } from 'dashboard/composables/useUISettings';
-import { vOnClickOutside } from '@vueuse/components';
 import { useAlert } from 'dashboard/composables';
 import { ExceptionWithMessage } from 'shared/helpers/CustomErrors';
 import { debounce } from '@chatwoot/utils';
-import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
 import { emitter } from 'shared/helpers/mitt';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import {
@@ -18,22 +15,18 @@ import {
   processContactableInboxes,
   mergeInboxDetails,
 } from 'dashboard/components-next/NewConversation/helpers/composeConversationHelper';
-import wootConstants from 'dashboard/constants/globals';
 
+import Popover from 'dashboard/components-next/popover/Popover.vue';
 import ComposeNewConversationForm from 'dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue';
 
 const props = defineProps({
-  alignPosition: {
-    type: String,
-    default: 'left',
-  },
   contactId: {
     type: String,
     default: null,
   },
-  isModal: {
-    type: Boolean,
-    default: false,
+  align: {
+    type: String,
+    default: 'end',
   },
 });
 
@@ -42,23 +35,16 @@ const emit = defineEmits(['close']);
 const searchContacts = createContactSearcher();
 const store = useStore();
 const { t } = useI18n();
-const { width: windowWidth } = useWindowSize();
 
 const { fetchSignatureFlagFromUISettings } = useUISettings();
 
-const isSmallScreen = computed(
-  () => windowWidth.value < wootConstants.SMALL_SCREEN_BREAKPOINT
-);
-
-const viewInModal = computed(() => props.isModal || isSmallScreen.value);
-
+const popoverRef = ref(null);
 const contacts = ref([]);
 const selectedContact = ref(null);
 const targetInbox = ref(null);
 const isCreatingContact = ref(false);
 const isFetchingInboxes = ref(false);
 const isSearching = ref(false);
-const showComposeNewConversation = ref(false);
 
 const formState = reactive({
   message: '',
@@ -95,14 +81,6 @@ const directUploadsEnabled = computed(
 
 const activeContact = computed(() => contactById.value(props.contactId));
 
-const composePopoverClass = computed(() => {
-  if (viewInModal.value) return '';
-
-  return props.alignPosition === 'right'
-    ? 'absolute ltr:left-0 ltr:right-[unset] rtl:right-0 rtl:left-[unset]'
-    : 'absolute rtl:left-0 rtl:right-[unset] ltr:right-0 ltr:left-[unset]';
-});
-
 const onContactSearch = debounce(
   async query => {
     isSearching.value = true;
@@ -172,7 +150,7 @@ const clearSelectedContact = () => {
 };
 
 const closeCompose = () => {
-  showComposeNewConversation.value = false;
+  popoverRef.value?.hide();
   if (!props.contactId) {
     // If contactId is passed as prop
     // Then don't allow to remove the selected contact
@@ -180,7 +158,6 @@ const closeCompose = () => {
   }
   targetInbox.value = null;
   resetContacts();
-  emit('close');
 };
 
 const discardCompose = () => {
@@ -213,8 +190,15 @@ const createConversation = async ({ payload, isFromWhatsApp }) => {
   }
 };
 
-const toggle = () => {
-  showComposeNewConversation.value = !showComposeNewConversation.value;
+const onPopoverShow = () => {
+  // Flag to prevent triggering drag n drop,
+  // When compose modal is active
+  emitter.emit(BUS_EVENTS.NEW_CONVERSATION_MODAL, true);
+};
+
+const onPopoverHide = () => {
+  emitter.emit(BUS_EVENTS.NEW_CONVERSATION_MODAL, false);
+  emit('close');
 };
 
 watch(
@@ -242,64 +226,22 @@ watch(
   { immediate: true, deep: true }
 );
 
-const handleClickOutside = () => {
-  if (!showComposeNewConversation.value) return;
-
-  showComposeNewConversation.value = false;
-  emit('close');
-};
-
-const onModalBackdropClick = () => {
-  if (!viewInModal.value) return;
-  handleClickOutside();
-};
-
 onMounted(() => resetContacts());
-
-const keyboardEvents = {
-  Escape: {
-    action: () => {
-      if (showComposeNewConversation.value) {
-        showComposeNewConversation.value = false;
-        emit('close');
-        emitter.emit(BUS_EVENTS.NEW_CONVERSATION_MODAL, false);
-      }
-    },
-  },
-};
-
-useKeyboardEvents(keyboardEvents);
 </script>
 
 <template>
-  <div
-    v-on-click-outside="[
-      handleClickOutside,
-      // Fixed and edge case https://github.com/chatwoot/chatwoot/issues/10785
-      // This will prevent closing the compose conversation modal when the editor Create link popup is open
-      { ignore: ['dialog.ProseMirror-prompt-backdrop'] },
-    ]"
-    class="relative"
-    :class="{
-      'z-50': showComposeNewConversation && !viewInModal,
-    }"
+  <Popover
+    ref="popoverRef"
+    :align="align"
+    @show="onPopoverShow"
+    @hide="onPopoverHide"
   >
-    <slot
-      name="trigger"
-      :is-open="showComposeNewConversation"
-      :toggle="toggle"
-    />
-    <div
-      v-if="showComposeNewConversation"
-      :class="{
-        'fixed z-50 bg-n-alpha-black1 backdrop-blur-[4px] flex items-start pt-[clamp(3rem,15vh,12rem)] justify-center inset-0':
-          viewInModal,
-      }"
-      @click.self="onModalBackdropClick"
-    >
+    <template #default="{ isOpen }">
+      <slot name="trigger" :is-open="isOpen" />
+    </template>
+    <template #content>
       <ComposeNewConversationForm
         :form-state="formState"
-        :class="[{ 'mt-2': !viewInModal }, composePopoverClass]"
         :contacts="contacts"
         :contact-id="contactId"
         :is-loading="isSearching"
@@ -321,6 +263,6 @@ useKeyboardEvents(keyboardEvents);
         @create-conversation="createConversation"
         @discard="discardCompose"
       />
-    </div>
-  </div>
+    </template>
+  </Popover>
 </template>

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

@@ -220,7 +220,7 @@ useEventListener(document, 'paste', onPaste);
         />
         <EmojiInput
           v-if="isEmojiPickerOpen"
-          class="top-full mt-1.5 ltr:left-0 rtl:right-0"
+          class="!top-auto !bottom-full mb-1.5 ltr:left-0 rtl:right-0"
           :on-click="onClickInsertEmoji"
         />
       </div>

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

@@ -361,7 +361,7 @@ useKeyboardEvents({
 
 <template>
   <div
-    class="w-[42rem] divide-y divide-n-strong overflow-visible transition-all duration-300 ease-in-out top-full flex flex-col bg-n-alpha-3 border border-n-strong shadow-sm backdrop-blur-[100px] rounded-xl min-w-0 max-h-[calc(100vh-8rem)]"
+    class="w-full md:w-[42rem] divide-y divide-n-strong overflow-visible transition-all duration-300 ease-in-out top-full flex flex-col bg-n-alpha-3 border border-n-strong shadow-sm backdrop-blur-[100px] rounded-xl min-w-0 max-h-[calc(100vh-8rem)]"
   >
     <div class="flex-1 overflow-y-auto divide-y divide-n-strong">
       <ContactSelector

app/javascript/dashboard/components-next/popover/Popover.vue

@@ -0,0 +1,121 @@
+<script setup>
+import { ref, computed, watch, nextTick } from 'vue';
+import { vOnClickOutside } from '@vueuse/components';
+import { useBreakpoints, breakpointsTailwind } from '@vueuse/core';
+import { useDropdownPosition } from 'dashboard/composables/useDropdownPosition';
+import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
+import TeleportWithDirection from 'dashboard/components-next/TeleportWithDirection.vue';
+
+const props = defineProps({
+  align: {
+    type: String,
+    default: 'end',
+    validator: v => ['start', 'end'].includes(v),
+  },
+});
+
+const emit = defineEmits(['show', 'hide']);
+
+const isActive = ref(false);
+const triggerRef = ref(null);
+const popoverRef = ref(null);
+const mobileContentRef = ref(null);
+
+const breakpoints = useBreakpoints(breakpointsTailwind);
+const isMobile = breakpoints.smaller('md');
+const showPopover = computed(() => isActive.value && !isMobile.value);
+
+const { fixedPosition, updatePosition } = useDropdownPosition(
+  triggerRef,
+  popoverRef,
+  showPopover,
+  { align: props.align }
+);
+
+const show = async () => {
+  isActive.value = true;
+  if (!isMobile.value) {
+    await nextTick();
+    updatePosition();
+  }
+  emit('show');
+};
+
+const hide = () => {
+  if (!isActive.value) return;
+  isActive.value = false;
+  emit('hide');
+};
+
+const toggle = async () => {
+  if (isActive.value) hide();
+  else await show();
+};
+
+// Recalculate position when switching from mobile to desktop while open
+watch(isMobile, async mobile => {
+  if (!isActive.value || mobile) return;
+  await nextTick();
+  updatePosition();
+});
+
+const handleClickOutside = event => {
+  if (triggerRef.value?.contains(event.target)) return;
+  hide();
+};
+
+// Selectors for teleported elements that should not trigger close
+const clickOutsideIgnore = [
+  'dialog.ProseMirror-prompt-backdrop',
+  '[data-popover-content]',
+];
+
+useKeyboardEvents({
+  Escape: {
+    action: () => isActive.value && hide(),
+    allowOnFocusedInput: true,
+  },
+});
+
+defineExpose({ show, hide, toggle });
+</script>
+
+<template>
+  <span ref="triggerRef" class="inline-flex" @click="toggle">
+    <slot :is-open="isActive" />
+  </span>
+
+  <TeleportWithDirection to="body">
+    <!-- Mobile: centered modal with backdrop -->
+    <div
+      v-if="isActive && isMobile"
+      data-popover-backdrop
+      class="fixed inset-0 z-[9999] flex items-start pt-[clamp(3rem,15vh,12rem)] justify-center bg-n-alpha-black1"
+    >
+      <div
+        ref="mobileContentRef"
+        v-on-click-outside="[
+          handleClickOutside,
+          { ignore: clickOutsideIgnore },
+        ]"
+        data-popover-content
+        class="relative w-full max-w-lg max-h-[calc(100vh-4rem)] mx-4 overflow-y-auto bg-n-alpha-3 backdrop-blur-[100px] shadow-xl rounded-xl"
+      >
+        <slot name="content" :hide="hide" />
+      </div>
+    </div>
+
+    <!-- Desktop: fixed popover -->
+    <div
+      v-else-if="showPopover"
+      ref="popoverRef"
+      v-on-click-outside="[handleClickOutside, { ignore: clickOutsideIgnore }]"
+      data-popover-content
+      :class="fixedPosition.class"
+      :style="fixedPosition.style"
+      class="bg-n-alpha-3 backdrop-blur-[100px] shadow-xl rounded-xl overflow-y-auto max-h-[calc(100vh-2rem)]"
+    >
+      <slot name="content" :hide="hide" />
+    </div>
+  </TeleportWithDirection>
+</template>

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

@@ -10,8 +10,6 @@ import { useSidebarKeyboardShortcuts } from './useSidebarKeyboardShortcuts';
 import { vOnClickOutside } from '@vueuse/components';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import { useWindowSize, useEventListener } from '@vueuse/core';
-import { emitter } from 'shared/helpers/mitt';
-import { BUS_EVENTS } from 'shared/constants/busEvents';
 
 import Button from 'dashboard/components-next/button/Button.vue';
 import SidebarGroup from './SidebarGroup.vue';
@@ -184,15 +182,6 @@ const closeMobileSidebar = () => {
   emit('closeMobileSidebar');
 };
 
-const onComposeOpen = toggleFn => {
-  toggleFn();
-  emitter.emit(BUS_EVENTS.NEW_CONVERSATION_MODAL, true);
-};
-
-const onComposeClose = () => {
-  emitter.emit(BUS_EVENTS.NEW_CONVERSATION_MODAL, false);
-};
-
 const newReportRoutes = () => [
   {
     name: 'Reports Agent',
@@ -734,7 +723,13 @@ const menuItems = computed(() => {
   <aside
     v-on-click-outside="[
       closeMobileSidebar,
-      { ignore: ['#mobile-sidebar-launcher'] },
+      {
+        ignore: [
+          '#mobile-sidebar-launcher',
+          '[data-popover-content]',
+          '[data-popover-backdrop]',
+        ],
+      },
     ]"
     class="bg-n-background flex flex-col text-sm pb-px fixed top-0 ltr:left-0 rtl:right-0 h-full z-40 w-[200px] md:w-auto md:relative md:flex-shrink-0 md:ltr:translate-x-0 md:rtl:translate-x-0 ltr:border-r rtl:border-l border-n-weak"
     :class="[
@@ -802,8 +797,8 @@ const menuItems = computed(() => {
         >
           <span class="i-lucide-search size-4 text-n-slate-11" />
         </RouterLink>
-        <ComposeConversation align-position="right" @close="onComposeClose">
-          <template #trigger="{ toggle, isOpen }">
+        <ComposeConversation align="start">
+          <template #trigger="{ isOpen }">
             <Button
               icon="i-lucide-pen-line"
               color="slate"
@@ -815,7 +810,6 @@ const menuItems = computed(() => {
                   : '!h-7 !outline-n-weak !text-n-slate-11',
                 { '!bg-n-alpha-2 dark:!bg-n-slate-9/30': isOpen },
               ]"
-              @click="onComposeOpen(toggle)"
             />
           </template>
         </ComposeConversation>

app/javascript/dashboard/components/ChatList.vue

@@ -1,15 +1,5 @@
 <script setup>
-// [TODO] This componet is too big and bulky to be in the same file, we can consider splitting this into multiple
-// composables and components, useVirtualChatList, useChatlistFilters
-import {
-  ref,
-  unref,
-  provide,
-  computed,
-  watch,
-  onMounted,
-  defineEmits,
-} from 'vue';
+import { ref, unref, provide, computed, watch, onMounted } from 'vue';
 import { useStore } from 'vuex';
 import { useRoute, useRouter } from 'vue-router';
 import {
@@ -17,23 +7,19 @@ import {
   useFunctionGetter,
 } from 'dashboard/composables/store.js';
 
-import { Virtualizer } from 'virtua/vue';
 import ChatListHeader from './ChatListHeader.vue';
+import ConversationList from './ConversationList.vue';
 import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
 import ConversationFilter from 'next/filter/ConversationFilter.vue';
 import SaveCustomView from 'next/filter/SaveCustomView.vue';
 import ChatTypeTabs from './widgets/ChatTypeTabs.vue';
-import ConversationItem from './ConversationItem.vue';
 import DeleteCustomViews from 'dashboard/routes/dashboard/customviews/DeleteCustomViews.vue';
 import ConversationBulkActions from './widgets/conversation/conversationBulkActions/Index.vue';
 import TeleportWithDirection from 'dashboard/components-next/TeleportWithDirection.vue';
-import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
-import IntersectionObserver from 'dashboard/components/IntersectionObserver.vue';
 import ConversationResolveAttributesModal from 'dashboard/components-next/ConversationWorkflow/ConversationResolveAttributesModal.vue';
 
 import { useUISettings } from 'dashboard/composables/useUISettings';
 import { useAlert } from 'dashboard/composables';
-import { useChatListKeyboardEvents } from 'dashboard/composables/chatlist/useChatListKeyboardEvents';
 import { useBulkActions } from 'dashboard/composables/chatlist/useBulkActions';
 import { useFilter } from 'shared/composables/useFilter';
 import { useTrack } from 'dashboard/composables';
@@ -85,10 +71,6 @@ const route = useRoute();
 const store = useStore();
 
 const resolveAttributesModalRef = ref(null);
-const conversationListRef = ref(null);
-const virtualListRef = ref(null);
-
-provide('contextMenuElementTarget', virtualListRef);
 
 const activeAssigneeTab = ref(wootConstants.ASSIGNEE_TYPE.ME);
 const activeStatus = ref(wootConstants.STATUS_TYPE.OPEN);
@@ -100,7 +82,6 @@ const chatsOnView = ref([]);
 const foldersQuery = ref({});
 const showAddFoldersModal = ref(false);
 const showDeleteFoldersModal = ref(false);
-const isContextMenuOpen = ref(false);
 const appliedFilter = ref([]);
 const advancedFilterTypes = ref(
   advancedFilterOptions.map(filter => ({
@@ -130,7 +111,6 @@ const currentAccountId = useMapGetter('getCurrentAccountId');
 const getTeamFn = useMapGetter('teams/getTeam');
 const getConversationById = useMapGetter('getConversationById');
 
-useChatListKeyboardEvents(conversationListRef);
 const {
   selectedConversations,
   selectedInboxes,
@@ -360,7 +340,7 @@ const conversationList = computed(() => {
 });
 
 const showEndOfListMessage = computed(() => {
-  return (
+  return !!(
     conversationList.value.length &&
     hasCurrentPageEndReached.value &&
     !chatListLoading.value
@@ -605,14 +585,6 @@ function loadMoreConversations() {
   }
 }
 
-// Use IntersectionObserver instead of @scroll since Virtualizer only emits on user scroll.
-// If the list doesn’t fill the viewport, loading can stall.
-// IntersectionObserver triggers as soon as the sentinel is visible.
-const intersectionObserverOptions = computed(() => ({
-  root: conversationListRef.value,
-  rootMargin: '100px 0px 100px 0px',
-}));
-
 function updateAssigneeTab(selectedTab) {
   if (activeAssigneeTab.value !== selectedTab) {
     resetBulkActions();
@@ -806,10 +778,6 @@ function allSelectedConversationsStatus(status) {
   });
 }
 
-function onContextMenuToggle(state) {
-  isContextMenuOpen.value = state;
-}
-
 function toggleSelectAll(check) {
   selectAllConversations(check, conversationList);
 }
@@ -857,7 +825,6 @@ provide('assignTeam', onAssignTeam);
 provide('assignLabels', onAssignLabels);
 provide('removeLabels', onRemoveLabels);
 provide('updateConversationStatus', handleResolveConversation);
-provide('toggleContextMenu', onContextMenuToggle);
 provide('markAsUnread', markAsUnread);
 provide('markAsRead', markAsRead);
 provide('assignPriority', assignPriority);
@@ -970,43 +937,18 @@ watch(conversationFilters, (newVal, oldVal) => {
       @assign-labels="onAssignLabels"
       @assign-team="onAssignTeamsForBulk"
     />
-    <div
-      ref="conversationListRef"
-      class="flex-1 min-h-0 overflow-y-auto conversations-list"
-      :class="{ '!overflow-hidden': isContextMenuOpen }"
-    >
-      <Virtualizer
-        ref="virtualListRef"
-        v-slot="{ item, index }"
-        :data="conversationList"
-      >
-        <ConversationItem
-          :source="item"
-          :label="label"
-          :team-id="teamId"
-          :folders-id="foldersId"
-          :conversation-type="conversationType"
-          :show-assignee="showAssigneeInConversationCard"
-          :data-index="index"
-          @select-conversation="selectConversation"
-          @de-select-conversation="deSelectConversation"
-        />
-      </Virtualizer>
-      <div v-if="chatListLoading" class="flex justify-center my-4">
-        <Spinner class="text-n-brand" />
-      </div>
-      <p
-        v-else-if="showEndOfListMessage"
-        class="p-4 text-center text-n-slate-11"
-      >
-        {{ $t('CHAT_LIST.EOF') }}
-      </p>
-      <IntersectionObserver
-        v-else
-        :options="intersectionObserverOptions"
-        @observed="loadMoreConversations"
-      />
-    </div>
+    <ConversationList
+      :conversation-list="conversationList"
+      :is-loading="chatListLoading"
+      :show-end-of-list-message="showEndOfListMessage"
+      :label="label"
+      :team-id="teamId"
+      :folders-id="foldersId"
+      :conversation-type="conversationType"
+      :show-assignee="showAssigneeInConversationCard"
+      :is-on-expanded-layout="isOnExpandedLayout"
+      @load-more="loadMoreConversations"
+    />
     <Dialog
       ref="deleteConversationDialogRef"
       type="alert"

app/javascript/dashboard/components/ConversationItem.vue

@@ -1,74 +1,244 @@
-<script>
+<script setup>
+import { computed, ref, watch, inject } from 'vue';
+import { useRouter } from 'vue-router';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper';
 import ConversationCard from './widgets/conversation/ConversationCard.vue';
-export default {
-  components: {
-    ConversationCard,
-  },
-  inject: [
-    'selectConversation',
-    'deSelectConversation',
-    'assignAgent',
-    'assignTeam',
-    'assignLabels',
-    'removeLabels',
-    'updateConversationStatus',
-    'toggleContextMenu',
-    'markAsUnread',
-    'markAsRead',
-    'assignPriority',
-    'isConversationSelected',
-    'deleteConversation',
-  ],
-  props: {
-    source: {
-      type: Object,
-      required: true,
-    },
-    teamId: {
-      type: [String, Number],
-      default: 0,
-    },
-    label: {
-      type: String,
-      default: '',
-    },
-    conversationType: {
-      type: String,
-      default: '',
-    },
-    foldersId: {
-      type: [String, Number],
-      default: 0,
-    },
-    showAssignee: {
-      type: Boolean,
-      default: false,
-    },
-  },
+import ConversationCardExpanded from 'dashboard/components-next/Conversation/ConversationCard/ConversationCardExpanded.vue';
+import ContextMenu from 'dashboard/components/ui/ContextMenu.vue';
+import ConversationContextMenu from './widgets/conversation/contextMenu/Index.vue';
+
+const props = defineProps({
+  source: { type: Object, required: true },
+  teamId: { type: [String, Number], default: 0 },
+  label: { type: String, default: '' },
+  conversationType: { type: String, default: '' },
+  foldersId: { type: [String, Number], default: 0 },
+  showAssignee: { type: Boolean, default: false },
+  showExpanded: { type: Boolean, default: false },
+});
+
+const router = useRouter();
+const store = useStore();
+
+const selectConversation = inject('selectConversation');
+const deSelectConversation = inject('deSelectConversation');
+const assignAgent = inject('assignAgent');
+const assignTeam = inject('assignTeam');
+const assignLabels = inject('assignLabels');
+const removeLabels = inject('removeLabels');
+const updateConversationStatus = inject('updateConversationStatus');
+const toggleContextMenu = inject('toggleContextMenu');
+const markAsUnread = inject('markAsUnread');
+const markAsRead = inject('markAsRead');
+const assignPriority = inject('assignPriority');
+const isConversationSelected = inject('isConversationSelected');
+const deleteConversation = inject('deleteConversation');
+
+// --- Context menu state (shared by both layouts) ---
+const showContextMenu = ref(false);
+const contextMenu = ref({ x: null, y: null });
+
+// Reset context menu state when the row is recycled to a different conversation.
+watch(
+  () => props.source.id,
+  () => {
+    if (showContextMenu.value) {
+      toggleContextMenu(false);
+    }
+    showContextMenu.value = false;
+    contextMenu.value = { x: null, y: null };
+  }
+);
+
+const currentChat = useMapGetter('getSelectedChat');
+const inboxesList = useMapGetter('inboxes/getInboxes');
+const activeInbox = useMapGetter('getSelectedInbox');
+const accountId = useMapGetter('getCurrentAccountId');
+
+const chatMetadata = computed(() => props.source.meta || {});
+const assignee = computed(() => chatMetadata.value.assignee || {});
+const senderId = computed(() => chatMetadata.value.sender?.id);
+
+const currentContact = computed(() =>
+  senderId.value ? store.getters['contacts/getContact'](senderId.value) : {}
+);
+
+const isActiveChat = computed(() => currentChat.value.id === props.source.id);
+
+const inbox = computed(() => {
+  const inboxId = props.source.inbox_id;
+  return inboxId ? store.getters['inboxes/getInbox'](inboxId) : {};
+});
+
+const showInboxName = computed(
+  () => !activeInbox.value && inboxesList.value.length > 1
+);
+const isInboxView = computed(() => !!activeInbox.value);
+const showAssigneeForExpandedCard = computed(
+  () => props.showExpanded || props.showAssignee
+);
+
+const conversationPath = computed(() =>
+  frontendURL(
+    conversationUrl({
+      accountId: accountId.value,
+      activeInbox: activeInbox.value,
+      id: props.source.id,
+      label: props.label,
+      teamId: props.teamId,
+      conversationType: props.conversationType,
+      foldersId: props.foldersId,
+    })
+  )
+);
+
+const onCardClick = e => {
+  const path = conversationPath.value;
+  if (!path) return;
+
+  if (e.metaKey || e.ctrlKey) {
+    e.preventDefault();
+    window.open(
+      `${window.chatwootConfig.hostURL}${path}`,
+      '_blank',
+      'noopener,noreferrer'
+    );
+    return;
+  }
+
+  if (isActiveChat.value) return;
+  router.push({ path });
+};
+
+const onExpandedSelect = checked => {
+  if (checked) {
+    selectConversation(props.source.id, inbox.value.id);
+  } else {
+    deSelectConversation(props.source.id, inbox.value.id);
+  }
+};
+
+const openContextMenu = e => {
+  e.preventDefault();
+  toggleContextMenu(true);
+  contextMenu.value.x = e.pageX || e.clientX;
+  contextMenu.value.y = e.pageY || e.clientY;
+  showContextMenu.value = true;
+};
+
+const closeContextMenu = () => {
+  toggleContextMenu(false);
+  showContextMenu.value = false;
+  contextMenu.value.x = null;
+  contextMenu.value.y = null;
+};
+
+const onUpdateConversation = (status, snoozedUntil) => {
+  closeContextMenu();
+  updateConversationStatus(props.source.id, status, snoozedUntil);
+};
+
+const onAssignAgent = agent => {
+  assignAgent(agent, [props.source.id]);
+  closeContextMenu();
+};
+
+const onAssignLabel = label => {
+  assignLabels([label.title], [props.source.id]);
+};
+
+const onRemoveLabel = label => {
+  removeLabels([label.title], [props.source.id]);
+};
+
+const onAssignTeam = team => {
+  assignTeam(team, props.source.id);
+  closeContextMenu();
+};
+
+const onMarkAsUnread = () => {
+  markAsUnread(props.source.id);
+  closeContextMenu();
+};
+
+const onMarkAsRead = () => {
+  markAsRead(props.source.id);
+  closeContextMenu();
+};
+
+const onAssignPriority = priority => {
+  assignPriority(priority, props.source.id);
+  closeContextMenu();
+};
+
+const onDeleteConversation = () => {
+  deleteConversation(props.source.id);
+  closeContextMenu();
 };
 </script>
 
 <template>
-  <ConversationCard
-    :active-label="label"
-    :team-id="teamId"
-    :folders-id="foldersId"
+  <!-- Expanded layout: wide screen + expanded setting -->
+  <ConversationCardExpanded
+    v-if="showExpanded"
     :chat="source"
-    :conversation-type="conversationType"
+    :current-contact="currentContact"
+    :assignee="assignee"
+    :inbox="inbox"
     :selected="isConversationSelected(source.id)"
+    :is-active-chat="isActiveChat"
+    :show-assignee="showAssigneeForExpandedCard"
+    :show-inbox-name="showInboxName"
+    :is-inbox-view="isInboxView"
+    @select-conversation="onExpandedSelect"
+    @de-select-conversation="onExpandedSelect"
+    @click="onCardClick"
+    @contextmenu="openContextMenu"
+  />
+
+  <!-- Default (condensed) layout -->
+  <ConversationCard
+    v-else
+    :chat="source"
+    :current-contact="currentContact"
+    :assignee="assignee"
+    :inbox="inbox"
+    :selected="isConversationSelected(source.id)"
+    :is-active-chat="isActiveChat"
     :show-assignee="showAssignee"
-    enable-context-menu
+    :show-inbox-name="showInboxName"
+    @click="onCardClick"
+    @contextmenu="openContextMenu"
     @select-conversation="selectConversation"
     @de-select-conversation="deSelectConversation"
-    @assign-agent="assignAgent"
-    @assign-team="assignTeam"
-    @assign-label="assignLabels"
-    @remove-label="removeLabels"
-    @update-conversation-status="updateConversationStatus"
-    @context-menu-toggle="toggleContextMenu"
-    @mark-as-unread="markAsUnread"
-    @mark-as-read="markAsRead"
-    @assign-priority="assignPriority"
-    @delete-conversation="deleteConversation"
   />
+
+  <!-- Shared context menu for both layouts -->
+  <ContextMenu
+    v-if="showContextMenu"
+    :x="contextMenu.x"
+    :y="contextMenu.y"
+    @close="closeContextMenu"
+  >
+    <ConversationContextMenu
+      :status="source.status"
+      :inbox-id="inbox.id"
+      :priority="source.priority"
+      :chat-id="source.id"
+      :has-unread-messages="source.unread_count > 0"
+      :conversation-labels="source.labels"
+      :conversation-url="conversationPath"
+      @update-conversation="onUpdateConversation"
+      @assign-agent="onAssignAgent"
+      @assign-label="onAssignLabel"
+      @remove-label="onRemoveLabel"
+      @assign-team="onAssignTeam"
+      @mark-as-unread="onMarkAsUnread"
+      @mark-as-read="onMarkAsRead"
+      @assign-priority="onAssignPriority"
+      @delete-conversation="onDeleteConversation"
+      @close="closeContextMenu"
+    />
+  </ContextMenu>
 </template>

app/javascript/dashboard/components/ConversationList.vue

@@ -0,0 +1,95 @@
+<script setup>
+import { ref, computed, provide } from 'vue';
+import { Virtualizer } from 'virtua/vue';
+import { useBreakpoints } from '@vueuse/core';
+import { useChatListKeyboardEvents } from 'dashboard/composables/chatlist/useChatListKeyboardEvents';
+import ConversationItem from './ConversationItem.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+import IntersectionObserver from 'dashboard/components/IntersectionObserver.vue';
+
+import wootConstants from 'dashboard/constants/globals';
+
+const props = defineProps({
+  conversationList: { type: Array, default: () => [] },
+  isLoading: { type: Boolean, default: false },
+  showEndOfListMessage: { type: Boolean, default: false },
+  label: { type: String, default: '' },
+  teamId: { type: [String, Number], default: 0 },
+  foldersId: { type: [String, Number], default: 0 },
+  conversationType: { type: String, default: '' },
+  showAssignee: { type: Boolean, default: false },
+  isOnExpandedLayout: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(['loadMore']);
+
+const conversationListRef = ref(null);
+const virtualListRef = ref(null);
+const isContextMenuOpen = ref(false);
+
+provide('contextMenuElementTarget', virtualListRef);
+
+const breakpoints = useBreakpoints({
+  lg: wootConstants.LARGE_SCREEN_BREAKPOINT,
+});
+const isLgScreen = breakpoints.greaterOrEqual('lg');
+const showExpandedCards = computed(
+  () => props.isOnExpandedLayout && isLgScreen.value
+);
+
+useChatListKeyboardEvents(conversationListRef);
+
+const intersectionObserverOptions = computed(() => ({
+  root: conversationListRef.value,
+  rootMargin: '100px 0px 100px 0px',
+}));
+
+const onContextMenuToggle = state => {
+  isContextMenuOpen.value = state;
+};
+
+const loadMoreConversations = () => {
+  emit('loadMore');
+};
+
+provide('toggleContextMenu', onContextMenuToggle);
+
+defineExpose({ conversationListRef });
+</script>
+
+<template>
+  <div
+    ref="conversationListRef"
+    class="flex-1 min-h-0 overflow-y-auto conversations-list"
+    :class="{ '!overflow-hidden': isContextMenuOpen }"
+  >
+    <Virtualizer
+      ref="virtualListRef"
+      v-slot="{ item, index }"
+      :data="conversationList"
+      class="[&>div:has(+_div_.active)>*]:!border-n-surface-1 [&>div:has(+_div_.selected)>*]:!border-n-surface-1"
+    >
+      <ConversationItem
+        :key="index"
+        :source="item"
+        :label="label"
+        :team-id="teamId"
+        :folders-id="foldersId"
+        :conversation-type="conversationType"
+        :show-assignee="showAssignee"
+        :show-expanded="showExpandedCards"
+      />
+    </Virtualizer>
+    <div v-if="isLoading" class="flex justify-center my-4">
+      <Spinner class="text-n-brand" />
+    </div>
+    <p v-else-if="showEndOfListMessage" class="p-4 text-center text-n-slate-11">
+      {{ $t('CHAT_LIST.EOF') }}
+    </p>
+    <IntersectionObserver
+      v-else
+      :options="intersectionObserverOptions"
+      @observed="loadMoreConversations"
+    />
+  </div>
+</template>

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

@@ -1,98 +1,41 @@
 <script setup>
 import { computed, ref, watch } from 'vue';
-import { useRouter } from 'vue-router';
-import { useStore, useMapGetter } from 'dashboard/composables/store';
 import { getLastMessage } from 'dashboard/helper/conversationHelper';
-import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper';
 import Avatar from 'next/avatar/Avatar.vue';
 import MessagePreview from './MessagePreview.vue';
 import InboxName from '../InboxName.vue';
-import ConversationContextMenu from './contextMenu/Index.vue';
 import TimeAgo from 'dashboard/components/ui/TimeAgo.vue';
 import CardLabels from './conversationCardComponents/CardLabels.vue';
 import CardPriorityIcon from 'dashboard/components-next/Conversation/ConversationCard/CardPriorityIcon.vue';
+import UnreadBadge from 'dashboard/components-next/Conversation/ConversationCard/UnreadBadge.vue';
 import SLACardLabel from './components/SLACardLabel.vue';
-import ContextMenu from 'dashboard/components/ui/ContextMenu.vue';
 import VoiceCallStatus from './VoiceCallStatus.vue';
+import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
 
 const props = defineProps({
-  activeLabel: { type: String, default: '' },
-  chat: { type: Object, default: () => ({}) },
-  hideInboxName: { type: Boolean, default: false },
-  hideThumbnail: { type: Boolean, default: false },
-  teamId: { type: [String, Number], default: 0 },
-  foldersId: { type: [String, Number], default: 0 },
-  showAssignee: { type: Boolean, default: false },
-  conversationType: { type: String, default: '' },
+  chat: { type: Object, required: true },
+  currentContact: { type: Object, required: true },
+  assignee: { type: Object, default: () => ({}) },
+  inbox: { type: Object, default: () => ({}) },
   selected: { type: Boolean, default: false },
+  isActiveChat: { type: Boolean, default: false },
+  showAssignee: { type: Boolean, default: false },
+  showInboxName: { type: Boolean, default: false },
+  hideThumbnail: { type: Boolean, default: false },
   compact: { type: Boolean, default: false },
-  enableContextMenu: { type: Boolean, default: false },
-  allowedContextMenuOptions: { type: Array, default: () => [] },
 });
 
 const emit = defineEmits([
-  'contextMenuToggle',
-  'assignAgent',
-  'assignLabel',
-  'removeLabel',
-  'assignTeam',
-  'markAsUnread',
-  'markAsRead',
-  'assignPriority',
-  'updateConversationStatus',
-  'deleteConversation',
+  'click',
+  'contextmenu',
   'selectConversation',
   'deSelectConversation',
 ]);
 
-const router = useRouter();
-const store = useStore();
-
 const hovered = ref(false);
-const showContextMenu = ref(false);
-const contextMenu = ref({ x: null, y: null });
-
-// Reset UI state when conversation changes at same index (no :key, instance reused on reorder)
-// This prevents context menu/hover state from leaking to a different conversation
-// Emit contextMenuToggle(false) to sync parent state if menu was open during recycling
-const resetState = () => {
-  if (showContextMenu.value) {
-    emit('contextMenuToggle', false);
-  }
-  hovered.value = false;
-  showContextMenu.value = false;
-  contextMenu.value = { x: null, y: null };
-};
-
-watch(() => props.chat.id, resetState);
-
-const currentChat = useMapGetter('getSelectedChat');
-const inboxesList = useMapGetter('inboxes/getInboxes');
-const activeInbox = useMapGetter('getSelectedInbox');
-const accountId = useMapGetter('getCurrentAccountId');
-
-const chatMetadata = computed(() => props.chat.meta || {});
-
-const assignee = computed(() => chatMetadata.value.assignee || {});
-
-const senderId = computed(() => chatMetadata.value.sender?.id);
-
-const currentContact = computed(() => {
-  return senderId.value
-    ? store.getters['contacts/getContact'](senderId.value)
-    : {};
-});
-
-const isActiveChat = computed(() => {
-  return currentChat.value.id === props.chat.id;
-});
 
 const unreadCount = computed(() => props.chat.unread_count);
-
 const hasUnread = computed(() => unreadCount.value > 0);
-
-const isInboxNameVisible = computed(() => !activeInbox.value);
-
 const lastMessageInChat = computed(() => getLastMessage(props.chat));
 
 const voiceCallData = computed(() => ({
@@ -100,24 +43,10 @@ const voiceCallData = computed(() => ({
   direction: props.chat.additional_attributes?.call_direction,
 }));
 
-const inboxId = computed(() => props.chat.inbox_id);
-
-const inbox = computed(() => {
-  return inboxId.value ? store.getters['inboxes/getInbox'](inboxId.value) : {};
-});
-
-const showInboxName = computed(() => {
-  return (
-    !props.hideInboxName &&
-    isInboxNameVisible.value &&
-    inboxesList.value.length > 1
-  );
-});
-
 const showMetaSection = computed(() => {
   return (
-    showInboxName.value ||
-    (props.showAssignee && assignee.value.name) ||
+    props.showInboxName ||
+    (props.showAssignee && props.assignee.name) ||
     props.chat.priority
   );
 });
@@ -136,41 +65,6 @@ const messagePreviewClass = computed(() => {
   ];
 });
 
-const conversationPath = computed(() => {
-  return frontendURL(
-    conversationUrl({
-      accountId: accountId.value,
-      activeInbox: activeInbox.value,
-      id: props.chat.id,
-      label: props.activeLabel,
-      teamId: props.teamId,
-      conversationType: props.conversationType,
-      foldersId: props.foldersId,
-    })
-  );
-});
-
-const onCardClick = e => {
-  const path = conversationPath.value;
-  if (!path) return;
-
-  // Handle Ctrl/Cmd + Click for new tab
-  if (e.metaKey || e.ctrlKey) {
-    e.preventDefault();
-    window.open(
-      `${window.chatwootConfig.hostURL}${path}`,
-      '_blank',
-      'noopener,noreferrer'
-    );
-    return;
-  }
-
-  // Skip if already active
-  if (isActiveChat.value) return;
-
-  router.push({ path });
-};
-
 const onThumbnailHover = () => {
   hovered.value = !props.hideThumbnail;
 };
@@ -181,83 +75,37 @@ const onThumbnailLeave = () => {
 
 const onSelectConversation = checked => {
   if (checked) {
-    emit('selectConversation', props.chat.id, inbox.value.id);
+    emit('selectConversation', props.chat.id, props.inbox.id);
   } else {
-    emit('deSelectConversation', props.chat.id, inbox.value.id);
+    emit('deSelectConversation', props.chat.id, props.inbox.id);
   }
 };
 
-const openContextMenu = e => {
-  if (!props.enableContextMenu) return;
-  e.preventDefault();
-  emit('contextMenuToggle', true);
-  contextMenu.value.x = e.pageX || e.clientX;
-  contextMenu.value.y = e.pageY || e.clientY;
-  showContextMenu.value = true;
-};
+const selectedModel = computed({
+  get: () => props.selected,
+  set: value => onSelectConversation(value),
+});
 
-const closeContextMenu = () => {
-  emit('contextMenuToggle', false);
-  showContextMenu.value = false;
-  contextMenu.value.x = null;
-  contextMenu.value.y = null;
-};
-
-const onUpdateConversation = (status, snoozedUntil) => {
-  closeContextMenu();
-  emit('updateConversationStatus', props.chat.id, status, snoozedUntil);
-};
-
-const onAssignAgent = agent => {
-  emit('assignAgent', agent, [props.chat.id]);
-  closeContextMenu();
-};
-
-const onAssignLabel = label => {
-  emit('assignLabel', [label.title], [props.chat.id]);
-};
-
-const onRemoveLabel = label => {
-  emit('removeLabel', [label.title], [props.chat.id]);
-};
-
-const onAssignTeam = team => {
-  emit('assignTeam', team, props.chat.id);
-  closeContextMenu();
-};
-
-const markAsUnread = () => {
-  emit('markAsUnread', props.chat.id);
-  closeContextMenu();
-};
-
-const markAsRead = () => {
-  emit('markAsRead', props.chat.id);
-  closeContextMenu();
-};
-
-const assignPriority = priority => {
-  emit('assignPriority', priority, props.chat.id);
-  closeContextMenu();
-};
-
-const deleteConversation = () => {
-  emit('deleteConversation', props.chat.id);
-  closeContextMenu();
-};
+watch(
+  () => props.chat.id,
+  () => {
+    hovered.value = false;
+  }
+);
 </script>
 
 <template>
   <div
-    class="relative flex items-start flex-grow-0 flex-shrink-0 w-auto max-w-full py-0 border-t-0 border-b-0 border-l-0 border-r-0 border-transparent border-solid cursor-pointer conversation hover:bg-n-alpha-1 dark:hover:bg-n-alpha-3 group"
+    class="relative flex items-start flex-grow-0 flex-shrink-0 w-auto max-w-full py-0 cursor-pointer conversation border-b border-n-slate-3 hover:border-n-surface-1 hover:bg-n-alpha-1 dark:hover:bg-n-alpha-3 group hover:z-[1] before:content-[none] before:absolute before:-top-px before:inset-x-0 before:h-px before:bg-n-surface-1 before:pointer-events-none hover:before:content-['']"
     :class="{
-      'active animate-card-select bg-n-background border-n-weak': isActiveChat,
-      'bg-n-slate-2': selected,
+      'active animate-card-select bg-n-background !border-n-surface-1':
+        isActiveChat,
+      'selected bg-n-slate-2 !border-n-surface-1': selected,
       'px-0': compact,
       'px-3': !compact,
     }"
-    @click="onCardClick"
-    @contextmenu="openContextMenu($event)"
+    @click="$emit('click', $event)"
+    @contextmenu="$emit('contextmenu', $event)"
   >
     <div
       class="relative"
@@ -272,7 +120,6 @@ const deleteConversation = () => {
         :status="currentContact.availability_status"
         :class="!showInboxName ? 'mt-4' : 'mt-8'"
         hide-offline-status
-        rounded-full
       >
         <template #overlay="{ size }">
           <label
@@ -281,20 +128,12 @@ const deleteConversation = () => {
             :style="{ width: `${size}px`, height: `${size}px` }"
             @click.stop
           >
-            <input
-              :value="selected"
-              :checked="selected"
-              class="!m-0 cursor-pointer"
-              type="checkbox"
-              @change="onSelectConversation($event.target.checked)"
-            />
+            <Checkbox v-model="selectedModel" />
           </label>
         </template>
       </Avatar>
     </div>
-    <div
-      class="px-0 py-3 border-b group-hover:border-transparent flex-1 border-n-slate-3 min-w-0"
-    >
+    <div class="px-0 py-3 flex-1 min-w-0 border-line">
       <div
         v-if="showMetaSection"
         class="flex items-center min-w-0 gap-1"
@@ -369,12 +208,11 @@ const deleteConversation = () => {
             :conversation-id="chat.id"
           />
         </span>
-        <span
-          class="shadow-lg rounded-full text-xxs font-semibold h-4 leading-4 ltr:ml-auto rtl:mr-auto mt-1 min-w-[1rem] px-1 py-0 text-center text-white bg-n-teal-9"
-          :class="hasUnread ? 'block' : 'hidden'"
-        >
-          {{ unreadCount > 9 ? '9+' : unreadCount }}
-        </span>
+        <UnreadBadge
+          v-if="hasUnread"
+          :count="unreadCount"
+          class="ltr:ml-auto rtl:mr-auto mt-1"
+        />
       </div>
       <CardLabels
         v-if="showLabelsSection"
@@ -386,32 +224,5 @@ const deleteConversation = () => {
         </template>
       </CardLabels>
     </div>
-    <ContextMenu
-      v-if="showContextMenu"
-      :x="contextMenu.x"
-      :y="contextMenu.y"
-      @close="closeContextMenu"
-    >
-      <ConversationContextMenu
-        :status="chat.status"
-        :inbox-id="inbox.id"
-        :priority="chat.priority"
-        :chat-id="chat.id"
-        :has-unread-messages="hasUnread"
-        :conversation-labels="chat.labels"
-        :conversation-url="conversationPath"
-        :allowed-options="allowedContextMenuOptions"
-        @update-conversation="onUpdateConversation"
-        @assign-agent="onAssignAgent"
-        @assign-label="onAssignLabel"
-        @remove-label="onRemoveLabel"
-        @assign-team="onAssignTeam"
-        @mark-as-unread="markAsUnread"
-        @mark-as-read="markAsRead"
-        @assign-priority="assignPriority"
-        @delete-conversation="deleteConversation"
-        @close="closeContextMenu"
-      />
-    </ContextMenu>
   </div>
 </template>

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

@@ -41,7 +41,16 @@ const closeContactPanel = () => {
 
 <template>
   <div
-    v-on-click-outside="() => closeContactPanel()"
+    v-on-click-outside="[
+      () => closeContactPanel(),
+      {
+        ignore: [
+          'dialog.ProseMirror-prompt-backdrop',
+          '[data-popover-content]',
+          '[data-popover-backdrop]',
+        ],
+      },
+    ]"
     class="bg-n-surface-2 h-full overflow-hidden flex flex-col fixed top-0 z-40 w-full max-w-sm transition-transform duration-300 ease-in-out ltr:right-0 rtl:left-0 md:static md:w-[320px] md:min-w-[320px] ltr:border-l rtl:border-r border-n-weak 2xl:min-w-[360px] 2xl:w-[360px] shadow-lg md:shadow-none"
     :class="[
       {

app/javascript/dashboard/composables/spec/useDropdownPosition.spec.js

@@ -0,0 +1,239 @@
+import { ref } from 'vue';
+import { useDropdownPosition } from 'dashboard/composables/useDropdownPosition';
+
+// Mock @vueuse/core — return reactive refs we can control per test
+const mockBounding = () => ({
+  top: ref(0),
+  bottom: ref(0),
+  left: ref(0),
+  right: ref(0),
+  width: ref(0),
+  height: ref(0),
+  update: vi.fn(),
+});
+
+const triggerBounds = mockBounding();
+const dropdownBounds = mockBounding();
+const winWidth = ref(1024);
+const winHeight = ref(768);
+
+vi.mock('@vueuse/core', () => {
+  let callCount = 0;
+  return {
+    // First call = trigger, second = dropdown, third = container (if any)
+    useElementBounding: () => {
+      callCount += 1;
+      return callCount % 3 === 1 ? triggerBounds : dropdownBounds;
+    },
+    useWindowSize: () => ({ width: winWidth, height: winHeight }),
+  };
+});
+
+const setTrigger = ({ top, bottom, left, right }) => {
+  triggerBounds.top.value = top;
+  triggerBounds.bottom.value = bottom;
+  triggerBounds.left.value = left ?? 100;
+  triggerBounds.right.value = right ?? 200;
+};
+
+const setDropdown = ({ width, height }) => {
+  dropdownBounds.width.value = width ?? 200;
+  dropdownBounds.height.value = height;
+};
+
+describe('useDropdownPosition', () => {
+  beforeEach(() => {
+    winWidth.value = 1024;
+    winHeight.value = 768;
+    document.body.innerHTML = '<div id="app" dir="ltr"></div>';
+  });
+
+  describe('verticalClass (relative mode)', () => {
+    it('places below when enough space', () => {
+      // Trigger at y=100, dropdown 200px tall
+      // Space below = 768 - 140 = 628 → fits (628 > 216)
+      setTrigger({ top: 100, bottom: 140 });
+      setDropdown({ height: 200 });
+
+      const { position } = useDropdownPosition(ref(null), ref(null), ref(true));
+      expect(position.value.class).toBe('top-full mt-2');
+    });
+
+    it('places above when not enough space below but enough above', () => {
+      // Trigger near bottom at y=600
+      // Space below = 128 → doesn't fit. Space above = 600 → fits
+      setTrigger({ top: 600, bottom: 640 });
+      setDropdown({ height: 200 });
+
+      const { position } = useDropdownPosition(ref(null), ref(null), ref(true));
+      expect(position.value.class).toBe('bottom-full mb-2');
+    });
+
+    it('picks the side with more space when dropdown fits neither', () => {
+      // Dropdown 500px tall, won't fit above (300) or below (428)
+      // Below has more room → stays below
+      setTrigger({ top: 300, bottom: 340 });
+      setDropdown({ height: 500 });
+
+      const { position } = useDropdownPosition(ref(null), ref(null), ref(true));
+      expect(position.value.class).toBe('top-full mt-2');
+    });
+
+    it('picks above when above has more space and neither fits', () => {
+      // Dropdown 600px tall, won't fit above (500) or below (228)
+      // Above has more room → flips above
+      setTrigger({ top: 500, bottom: 540 });
+      setDropdown({ height: 600 });
+
+      const { position } = useDropdownPosition(ref(null), ref(null), ref(true));
+      expect(position.value.class).toBe('bottom-full mb-2');
+    });
+
+    it('returns default when disabled', () => {
+      setTrigger({ top: 700, bottom: 740 });
+      setDropdown({ height: 200 });
+
+      const { position } = useDropdownPosition(
+        ref(null),
+        ref(null),
+        ref(false)
+      );
+      expect(position.value.class).toBe('top-full mt-2');
+      expect(position.value.style).toEqual({});
+    });
+  });
+
+  describe('fixedPosition', () => {
+    it('places below with correct top and maxHeight', () => {
+      // Trigger at y=140, space below = 628
+      // top = 140 + 8(gap) = 148
+      // maxHeight = 628 - 8(gap) - 16(margin) = 604
+      setTrigger({ top: 100, bottom: 140 });
+      setDropdown({ height: 200, width: 200 });
+
+      const { fixedPosition } = useDropdownPosition(
+        ref(null),
+        ref(null),
+        ref(true)
+      );
+
+      expect(fixedPosition.value.style.top).toBe('148px');
+      expect(fixedPosition.value.style.bottom).toBeUndefined();
+      expect(fixedPosition.value.style.maxHeight).toBe('604px');
+    });
+
+    it('flips above with correct bottom and maxHeight', () => {
+      // Trigger near bottom at y=650, space below = 78 → doesn't fit
+      // Flips above: bottom = 768 - 650 + 8 = 126
+      // maxHeight = 650 - 8 - 16 = 626
+      setTrigger({ top: 650, bottom: 690 });
+      setDropdown({ height: 200, width: 200 });
+
+      const { fixedPosition } = useDropdownPosition(
+        ref(null),
+        ref(null),
+        ref(true)
+      );
+
+      expect(fixedPosition.value.style.bottom).toBe('126px');
+      expect(fixedPosition.value.style.top).toBeUndefined();
+      expect(fixedPosition.value.style.maxHeight).toBe('626px');
+    });
+
+    it('constrains maxHeight to available space on short viewports', () => {
+      // Short viewport (400px), trigger in the middle, dropdown 500px tall
+      // Neither side fits → above (200) > below (160) → places above
+      // maxHeight capped to 200 - 8 - 16 = 176
+      winHeight.value = 400;
+      setTrigger({ top: 200, bottom: 240 });
+      setDropdown({ height: 500, width: 200 });
+
+      const { fixedPosition } = useDropdownPosition(
+        ref(null),
+        ref(null),
+        ref(true)
+      );
+
+      expect(fixedPosition.value.style.bottom).toBeDefined();
+      expect(fixedPosition.value.style.maxHeight).toBe('176px');
+    });
+
+    it('returns defaults when disabled', () => {
+      const { fixedPosition } = useDropdownPosition(
+        ref(null),
+        ref(null),
+        ref(false)
+      );
+      expect(fixedPosition.value.class).toBe('fixed z-[9999]');
+      expect(fixedPosition.value.style).toEqual({});
+    });
+  });
+
+  describe('horizontal positioning (fixedPosition)', () => {
+    it('anchors to the right edge by default (align=end, LTR)', () => {
+      // align=end + LTR → anchorLeft=false → uses style.right
+      // right = 1024 - 900 = 124
+      setTrigger({ top: 100, bottom: 140, left: 800, right: 900 });
+      setDropdown({ height: 100, width: 200 });
+
+      const { fixedPosition } = useDropdownPosition(
+        ref(null),
+        ref(null),
+        ref(true)
+      );
+
+      expect(fixedPosition.value.style.right).toBe('124px');
+    });
+
+    it('anchors to the left edge when align=start (LTR)', () => {
+      // align=start + LTR → anchorLeft=true → uses style.left
+      setTrigger({ top: 100, bottom: 140, left: 100, right: 200 });
+      setDropdown({ height: 100, width: 200 });
+
+      const { fixedPosition } = useDropdownPosition(
+        ref(null),
+        ref(null),
+        ref(true),
+        { align: 'start' }
+      );
+
+      expect(fixedPosition.value.style.left).toBe('100px');
+    });
+
+    it('shifts left when dropdown overflows right edge', () => {
+      // Trigger at x=900, dropdown 300px wide → 900+300=1200 > 1024
+      // Falls back to right: 16px (margin)
+      setTrigger({ top: 100, bottom: 140, left: 900, right: 1000 });
+      setDropdown({ height: 100, width: 300 });
+
+      const { fixedPosition } = useDropdownPosition(
+        ref(null),
+        ref(null),
+        ref(true),
+        { align: 'start' }
+      );
+
+      expect(fixedPosition.value.style.right).toBe('16px');
+    });
+  });
+
+  describe('RTL', () => {
+    beforeEach(() => {
+      document.body.innerHTML = '<div id="app" dir="rtl"></div>';
+    });
+
+    it('flips anchor direction in RTL (align=end anchors left)', () => {
+      // align=end + RTL → anchorLeft=true → uses style.left
+      setTrigger({ top: 100, bottom: 140, left: 100, right: 200 });
+      setDropdown({ height: 100, width: 200 });
+
+      const { fixedPosition } = useDropdownPosition(
+        ref(null),
+        ref(null),
+        ref(true)
+      );
+
+      expect(fixedPosition.value.style.left).toBe('100px');
+    });
+  });
+});

app/javascript/dashboard/composables/useDropdownPosition.js

@@ -0,0 +1,128 @@
+import { computed, unref, watch } from 'vue';
+import { useElementBounding, useWindowSize } from '@vueuse/core';
+
+const FALLBACK_SIZE = 200;
+const SAFE_MARGIN = 16;
+const GAP = 8;
+
+/**
+ * Auto-position a floating element based on available viewport space.
+ *
+ * @param {Ref} triggerRef - Trigger element ref
+ * @param {Ref} dropdownRef - Dropdown/popover element ref
+ * @param {Ref} enabled - Whether to calculate position
+ * @param {Object} options
+ * @param {Ref}    [options.container] - Constraining container ref
+ * @param {number} [options.margin=16] - Min distance from viewport/container edges
+ * @param {string} [options.align='end'] - 'start' or 'end' (flips automatically for RTL)
+ */
+export function useDropdownPosition(
+  triggerRef,
+  dropdownRef,
+  enabled,
+  { container = null, margin = SAFE_MARGIN, align = 'end' } = {}
+) {
+  const trigger = useElementBounding(triggerRef);
+  const dropdown = useElementBounding(dropdownRef);
+  const bounds = useElementBounding(container);
+  const { width: winWidth, height: winHeight } = useWindowSize();
+
+  const isRTL = computed(
+    () => document.querySelector('#app[dir]')?.getAttribute('dir') === 'rtl'
+  );
+
+  // Whether to anchor to the left edge of the trigger
+  const anchorLeft = computed(() => (align === 'start') !== isRTL.value);
+
+  const verticalClass = computed(() => {
+    if (!unref(enabled)) return 'top-full mt-2';
+    const dh = dropdown.height.value || FALLBACK_SIZE;
+    const spaceBelow = winHeight.value - trigger.bottom.value;
+    const spaceAbove = trigger.top.value;
+    // Only flip above if it fits there; otherwise stay below (more room or equal)
+    if (spaceBelow >= dh + margin) return 'top-full mt-2';
+    if (spaceAbove >= dh + margin) return 'bottom-full mb-2';
+    return spaceBelow >= spaceAbove ? 'top-full mt-2' : 'bottom-full mb-2';
+  });
+
+  // Relative mode: Tailwind class + style for absolute-in-parent dropdowns
+  const position = computed(() => {
+    if (!unref(enabled)) return { class: 'top-full mt-2', style: {} };
+
+    const dw = dropdown.width.value || FALLBACK_SIZE;
+    const leftBound = container ? bounds.left.value : 0;
+    const rightBound = container ? bounds.right.value : winWidth.value;
+    const style = {};
+
+    if (anchorLeft.value) {
+      const available = rightBound - trigger.left.value;
+      const overflow = dw - available;
+      style.left = overflow > 0 ? `-${overflow}px` : '0px';
+    } else {
+      const available = trigger.right.value - leftBound;
+      const overflow = dw - available;
+      style.right = overflow > 0 ? `-${overflow}px` : '0px';
+    }
+
+    return { class: verticalClass.value, style };
+  });
+
+  // Fixed mode: styles for teleported popovers
+  const fixedPosition = computed(() => {
+    if (!unref(enabled)) return { class: 'fixed z-[9999]', style: {} };
+
+    const dh = dropdown.height.value || FALLBACK_SIZE;
+    const dw = dropdown.width.value || FALLBACK_SIZE;
+    const spaceBelow = winHeight.value - trigger.bottom.value;
+    const style = {};
+
+    // Vertical: prefer below, flip above only if it fits, else pick the larger side
+    const spaceAbove = trigger.top.value;
+    const placeAbove =
+      spaceBelow < dh + margin &&
+      (spaceAbove >= dh + margin || spaceAbove > spaceBelow);
+
+    if (placeAbove) {
+      style.bottom = `${winHeight.value - trigger.top.value + GAP}px`;
+      style.maxHeight = `${spaceAbove - GAP - margin}px`;
+    } else {
+      style.top = `${trigger.bottom.value + GAP}px`;
+      style.maxHeight = `${spaceBelow - GAP - margin}px`;
+    }
+
+    // Horizontal
+    if (anchorLeft.value) {
+      const left = trigger.left.value;
+      if (left + dw > winWidth.value - margin) {
+        style.right = `${margin}px`;
+      } else {
+        style.left = `${Math.max(margin, left)}px`;
+      }
+    } else {
+      const right = winWidth.value - trigger.right.value;
+      if (trigger.right.value - dw < margin) {
+        style.left = `${margin}px`;
+      } else {
+        style.right = `${right}px`;
+      }
+    }
+
+    return { class: 'fixed z-[9999]', style };
+  });
+
+  const updatePosition = () => {
+    trigger.update();
+    dropdown.update();
+    if (container) bounds.update();
+  };
+
+  // Update position when dropdown opens to ensure RTL state is current
+  watch(
+    () => unref(enabled),
+    isEnabled => {
+      if (isEnabled) updatePosition();
+    }
+  );
+
+  return { position, fixedPosition, updatePosition };
+}

app/javascript/dashboard/constants/globals.js

@@ -45,6 +45,7 @@ export default {
   WHATSAPP_EMBEDDED_SIGNUP_DOCS_URL:
     'https://developers.facebook.com/docs/whatsapp/embedded-signup/custom-flows/onboarding-business-app-users#limitations',
   SMALL_SCREEN_BREAKPOINT: 768,
+  LARGE_SCREEN_BREAKPOINT: 1024,
   AVAILABILITY_STATUS_KEYS: ['online', 'busy', 'offline'],
   SNOOZE_OPTIONS: {
     UNTIL_NEXT_REPLY: 'until_next_reply',

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

@@ -140,6 +140,7 @@
     "HIDE_QUOTED_TEXT": "Hide Quoted Text",
     "SHOW_QUOTED_TEXT": "Show Quoted Text",
     "MESSAGE_READ": "Read",
-    "SENDING": "Sending"
+    "SENDING": "Sending",
+    "UNREAD_COUNT_OVERFLOW": "9+"
   }
 }

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

@@ -71,7 +71,8 @@
     "REPLY_MESSAGE_NOT_FOUND": "Message not available",
     "CARD": {
       "SHOW_LABELS": "Show labels",
-      "HIDE_LABELS": "Hide labels"
+      "HIDE_LABELS": "Hide labels",
+      "LABELS_COUNT": "{count} labels"
     },
     "VOICE_CALL": {
       "INCOMING_CALL": "Incoming call",

app/javascript/dashboard/modules/contact/ContactDeleteModal.vue

@@ -0,0 +1,94 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useStore } from 'vuex';
+import { useRoute, useRouter } from 'vue-router';
+import { useAlert } from 'dashboard/composables';
+import { useMapGetter } from 'dashboard/composables/store';
+
+import Popover from 'dashboard/components-next/popover/Popover.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+import {
+  isAConversationRoute,
+  isAInboxViewRoute,
+  getConversationDashboardRoute,
+} from 'dashboard/helper/routeHelpers';
+
+const props = defineProps({
+  contact: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['close', 'deleted']);
+
+const { t } = useI18n();
+const store = useStore();
+const route = useRoute();
+const router = useRouter();
+
+const uiFlags = useMapGetter('contacts/getUIFlags');
+
+const confirmMessage = computed(
+  () => `${t('DELETE_CONTACT.CONFIRM.MESSAGE')} ${props.contact.name}?`
+);
+
+const onDelete = async hide => {
+  try {
+    await store.dispatch('contacts/delete', props.contact.id);
+    useAlert(t('DELETE_CONTACT.API.SUCCESS_MESSAGE'));
+    hide();
+    emit('deleted');
+    emit('close');
+
+    if (isAConversationRoute(route.name)) {
+      router.push({ name: getConversationDashboardRoute(route.name) });
+    } else if (isAInboxViewRoute(route.name)) {
+      router.push({ name: 'inbox_view' });
+    } else if (route.name !== 'contacts_dashboard') {
+      router.push({ name: 'contacts_dashboard' });
+    }
+  } catch (error) {
+    useAlert(error.message || t('DELETE_CONTACT.API.ERROR_MESSAGE'));
+  }
+};
+</script>
+
+<template>
+  <Popover @hide="$emit('close')">
+    <slot name="trigger" />
+    <template #content="{ hide }">
+      <div
+        class="w-full md:w-80 p-6 flex flex-col gap-4 border-0 md:border rounded-xl md:border-n-strong"
+      >
+        <div class="flex flex-col gap-2">
+          <h3 class="text-base font-medium leading-6 text-n-slate-12">
+            {{ $t('DELETE_CONTACT.CONFIRM.TITLE') }}
+          </h3>
+          <p class="mb-0 text-sm text-n-slate-11">
+            {{ confirmMessage }}
+          </p>
+        </div>
+        <div class="flex items-center justify-end gap-2">
+          <Button
+            faded
+            slate
+            sm
+            :label="$t('DELETE_CONTACT.CONFIRM.NO')"
+            @click="hide"
+          />
+          <Button
+            ruby
+            sm
+            :label="$t('DELETE_CONTACT.CONFIRM.YES')"
+            :is-loading="uiFlags.isDeleting"
+            :disabled="uiFlags.isDeleting"
+            @click="onDelete(hide)"
+          />
+        </div>
+      </div>
+    </template>
+  </Popover>
+</template>

app/javascript/dashboard/modules/contact/ContactMergeModal.vue

@@ -5,8 +5,8 @@ import { useStore } from 'vuex';
 import { useAlert, useTrack } from 'dashboard/composables';
 import { useMapGetter } from 'dashboard/composables/store';
 
+import Popover from 'dashboard/components-next/popover/Popover.vue';
 import MergeContact from 'dashboard/modules/contact/components/MergeContact.vue';
-import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
 import ContactAPI from 'dashboard/api/contacts';
 import { CONTACTS_EVENTS } from '../../helper/AnalyticsHelper/events';
 
@@ -23,7 +23,6 @@ const { t } = useI18n();
 const store = useStore();
 const uiFlags = useMapGetter('contacts/getUIFlags');
 
-const dialogRef = ref(null);
 const isSearching = ref(false);
 const searchResults = ref([]);
 
@@ -35,21 +34,6 @@ watch(
   }
 );
 
-const open = () => {
-  dialogRef.value?.open();
-};
-
-const close = () => {
-  dialogRef.value?.close();
-};
-
-defineExpose({ open, close });
-
-const onClose = () => {
-  close();
-  emit('close');
-};
-
 const onContactSearch = async query => {
   isSearching.value = true;
   searchResults.value = [];
@@ -68,7 +52,7 @@ const onContactSearch = async query => {
   }
 };
 
-const onMergeContacts = async parentContactId => {
+const onMergeContacts = async (parentContactId, hide) => {
   useTrack(CONTACTS_EVENTS.MERGED_CONTACTS);
   try {
     await store.dispatch('contacts/merge', {
@@ -76,7 +60,7 @@ const onMergeContacts = async parentContactId => {
       parentId: parentContactId,
     });
     useAlert(t('MERGE_CONTACTS.FORM.SUCCESS_MESSAGE'));
-    close();
+    hide();
     emit('close');
   } catch (error) {
     useAlert(t('MERGE_CONTACTS.FORM.ERROR_MESSAGE'));
@@ -85,24 +69,31 @@ const onMergeContacts = async parentContactId => {
 </script>
 
 <template>
-  <Dialog
-    ref="dialogRef"
-    type="edit"
-    width="2xl"
-    :title="$t('MERGE_CONTACTS.TITLE')"
-    :description="$t('MERGE_CONTACTS.DESCRIPTION')"
-    :show-cancel-button="false"
-    :show-confirm-button="false"
-  >
-    <MergeContact
-      :key="primaryContact.id"
-      :primary-contact="primaryContact"
-      :is-searching="isSearching"
-      :is-merging="uiFlags.isMerging"
-      :search-results="searchResults"
-      @search="onContactSearch"
-      @cancel="onClose"
-      @submit="onMergeContacts"
-    />
-  </Dialog>
+  <Popover @hide="$emit('close')">
+    <slot name="trigger" />
+    <template #content="{ hide }">
+      <div
+        class="w-full md:w-96 p-6 flex flex-col gap-4 border-0 md:border rounded-xl md:border-n-strong"
+      >
+        <div class="flex flex-col gap-2">
+          <h3 class="text-base font-medium leading-6 text-n-slate-12">
+            {{ $t('MERGE_CONTACTS.TITLE') }}
+          </h3>
+          <p class="mb-0 text-sm text-n-slate-11">
+            {{ $t('MERGE_CONTACTS.DESCRIPTION') }}
+          </p>
+        </div>
+        <MergeContact
+          :key="primaryContact.id"
+          :primary-contact="primaryContact"
+          :is-searching="isSearching"
+          :is-merging="uiFlags.isMerging"
+          :search-results="searchResults"
+          @search="onContactSearch"
+          @cancel="hide"
+          @submit="id => onMergeContacts(id, hide)"
+        />
+      </div>
+    </template>
+  </Popover>
 </template>

app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue

@@ -1,49 +1,131 @@
-<script>
+<script setup>
+import { computed, ref, watch, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper';
+import {
+  isOnMentionsView,
+  isOnUnattendedView,
+  isOnFoldersView,
+} from 'dashboard/store/modules/conversations/helpers/actionHelpers';
 import ConversationCard from 'dashboard/components/widgets/conversation/ConversationCard.vue';
-import { mapGetters } from 'vuex';
+import ContextMenu from 'dashboard/components/ui/ContextMenu.vue';
+import ConversationContextMenu from 'dashboard/components/widgets/conversation/contextMenu/Index.vue';
 import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 
-export default {
-  components: {
-    ConversationCard,
-    Spinner,
-  },
-  props: {
-    contactId: {
-      type: [String, Number],
-      required: true,
-    },
-    conversationId: {
-      type: [String, Number],
-      required: true,
-    },
-  },
-  computed: {
-    conversations() {
-      return this.$store.getters['contactConversations/getContactConversation'](
-        this.contactId
-      );
-    },
-    previousConversations() {
-      return this.conversations.filter(
-        conversation => conversation.id !== Number(this.conversationId)
-      );
-    },
-    ...mapGetters({
-      uiFlags: 'contactConversations/getUIFlags',
-    }),
-  },
-  watch: {
-    contactId(newContactId, prevContactId) {
-      if (newContactId && newContactId !== prevContactId) {
-        this.$store.dispatch('contactConversations/get', newContactId);
-      }
-    },
-  },
-  mounted() {
-    this.$store.dispatch('contactConversations/get', this.contactId);
-  },
+const props = defineProps({
+  contactId: { type: [String, Number], required: true },
+  conversationId: { type: [String, Number], required: true },
+});
+
+const store = useStore();
+const route = useRoute();
+const router = useRouter();
+
+const currentChat = useMapGetter('getSelectedChat');
+const uiFlags = useMapGetter('contactConversations/getUIFlags');
+
+const contactGetter = useMapGetter('contacts/getContact');
+const inboxGetter = useMapGetter('inboxes/getInbox');
+
+const activeInbox = useMapGetter('getSelectedInbox');
+const inboxesList = useMapGetter('inboxes/getInboxes');
+const showInboxName = computed(
+  () => !activeInbox.value && inboxesList.value.length > 1
+);
+
+const contactConversationGetter = useMapGetter(
+  'contactConversations/getContactConversation'
+);
+const conversations = computed(() =>
+  contactConversationGetter.value(props.contactId)
+);
+
+const previousConversations = computed(() =>
+  conversations.value.filter(c => c.id !== Number(props.conversationId))
+);
+
+const activeContextChat = ref(null);
+const showContextMenu = ref(false);
+const contextMenu = ref({ x: null, y: null });
+
+const buildConversationUrl = conversationId => {
+  const {
+    params: { accountId, inbox_id: inboxId, label, teamId },
+    name,
+  } = route;
+
+  let conversationType = '';
+  if (isOnMentionsView({ route: { name } })) {
+    conversationType = 'mention';
+  } else if (isOnUnattendedView({ route: { name } })) {
+    conversationType = 'unattended';
+  }
+
+  return frontendURL(
+    conversationUrl({
+      accountId,
+      activeInbox: inboxId,
+      id: conversationId,
+      label,
+      teamId,
+      foldersId: isOnFoldersView({ route: { name } }) ? route.params.id : 0,
+      conversationType,
+    })
+  );
 };
+
+const conversationPath = computed(() => {
+  if (!activeContextChat.value) return '';
+  return buildConversationUrl(activeContextChat.value.id);
+});
+
+const onCardClick = (conversation, e) => {
+  const path = buildConversationUrl(conversation.id);
+  if (!path) return;
+
+  if (e.metaKey || e.ctrlKey) {
+    e.preventDefault();
+    window.open(
+      `${window.chatwootConfig.hostURL}${path}`,
+      '_blank',
+      'noopener,noreferrer'
+    );
+    return;
+  }
+
+  router.push({ path });
+};
+
+const openContextMenu = (conversation, e) => {
+  e.preventDefault();
+  activeContextChat.value = conversation;
+  contextMenu.value.x = e.pageX || e.clientX;
+  contextMenu.value.y = e.pageY || e.clientY;
+  showContextMenu.value = true;
+};
+
+const closeContextMenu = () => {
+  showContextMenu.value = false;
+  contextMenu.value.x = null;
+  contextMenu.value.y = null;
+  activeContextChat.value = null;
+};
+
+watch(
+  () => props.contactId,
+  (newId, oldId) => {
+    if (newId && newId !== oldId) {
+      showContextMenu.value = false;
+      activeContextChat.value = null;
+      store.dispatch('contactConversations/get', newId);
+    }
+  }
+);
+
+onMounted(() => {
+  store.dispatch('contactConversations/get', props.contactId);
+});
 </script>
 
 <template>
@@ -53,18 +135,43 @@ export default {
         {{ $t('CONTACT_PANEL.CONVERSATIONS.NO_RECORDS_FOUND') }}
       </span>
     </div>
-    <div v-else class="contact-conversation--list">
+    <div
+      v-else
+      class="contact-conversation--list [&>.conversation:last-child]:!border-b-0 [&>.conversation:last-child:hover]:!border-b-0 [&>.conversation:last-child]:!rounded-b-lg"
+    >
       <ConversationCard
         v-for="conversation in previousConversations"
         :key="conversation.id"
         :chat="conversation"
-        :hide-inbox-name="false"
+        :current-contact="contactGetter(conversation.meta?.sender?.id) || {}"
+        :assignee="conversation.meta?.assignee || {}"
+        :inbox="inboxGetter(conversation.inbox_id) || {}"
+        :is-active-chat="currentChat.id === conversation.id"
+        :show-inbox-name="showInboxName"
         hide-thumbnail
-        enable-context-menu
         compact
-        :allowed-context-menu-options="['open-new-tab', 'copy-link']"
+        @click="onCardClick(conversation, $event)"
+        @contextmenu="openContextMenu(conversation, $event)"
       />
     </div>
+    <ContextMenu
+      v-if="showContextMenu && activeContextChat"
+      :x="contextMenu.x"
+      :y="contextMenu.y"
+      @close="closeContextMenu"
+    >
+      <ConversationContextMenu
+        :status="activeContextChat.status"
+        :inbox-id="activeContextChat.inbox_id"
+        :priority="activeContextChat.priority"
+        :chat-id="activeContextChat.id"
+        :has-unread-messages="activeContextChat.unread_count > 0"
+        :conversation-labels="activeContextChat.labels"
+        :conversation-url="conversationPath"
+        :allowed-options="['open-new-tab', 'copy-link']"
+        @close="closeContextMenu"
+      />
+    </ContextMenu>
   </div>
   <div v-else class="flex items-center justify-center py-5">
     <Spinner />

app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue

@@ -12,19 +12,12 @@ import Avatar from 'next/avatar/Avatar.vue';
 import SocialIcons from './SocialIcons.vue';
 import EditContact from './EditContact.vue';
 import ContactMergeModal from 'dashboard/modules/contact/ContactMergeModal.vue';
+import ContactDeleteModal from 'dashboard/modules/contact/ContactDeleteModal.vue';
 import ComposeConversation from 'dashboard/components-next/NewConversation/ComposeConversation.vue';
-import { BUS_EVENTS } from 'shared/constants/busEvents';
 import NextButton from 'dashboard/components-next/button/Button.vue';
 import VoiceCallButton from 'dashboard/components-next/Contacts/VoiceCallButton.vue';
 import InlineInput from 'dashboard/components-next/inline-input/InlineInput.vue';
 
-import {
-  isAConversationRoute,
-  isAInboxViewRoute,
-  getConversationDashboardRoute,
-} from '../../../../helper/routeHelpers';
-import { emitter } from 'shared/helpers/mitt';
-
 export default {
   components: {
     NextButton,
@@ -34,6 +27,7 @@ export default {
     ComposeConversation,
     SocialIcons,
     ContactMergeModal,
+    ContactDeleteModal,
     VoiceCallButton,
     InlineInput,
   },
@@ -57,7 +51,6 @@ export default {
   data() {
     return {
       showEditModal: false,
-      showDeleteModal: false,
       isEditingName: false,
       editName: '',
     };
@@ -99,10 +92,6 @@ export default {
         telegram,
       };
     },
-    // Delete Modal
-    confirmDeleteMessage() {
-      return ` ${this.contact.name}?`;
-    },
   },
   watch: {
     'contact.id': {
@@ -117,28 +106,6 @@ export default {
     toggleEditModal() {
       this.showEditModal = !this.showEditModal;
     },
-    openComposeConversationModal(toggleFn) {
-      toggleFn();
-      // Flag to prevent triggering drag n drop,
-      // When compose modal is active
-      emitter.emit(BUS_EVENTS.NEW_CONVERSATION_MODAL, true);
-    },
-    closeComposeConversationModal() {
-      // Flag to enable drag n drop,
-      // When compose modal is closed
-      emitter.emit(BUS_EVENTS.NEW_CONVERSATION_MODAL, false);
-    },
-    toggleDeleteModal() {
-      this.showDeleteModal = !this.showDeleteModal;
-    },
-    confirmDeletion() {
-      this.deleteContact(this.contact);
-      this.closeDelete();
-    },
-    closeDelete() {
-      this.showDeleteModal = false;
-      this.showEditModal = false;
-    },
     findCountryFlag(countryCode, cityAndCountry) {
       try {
         if (!countryCode) {
@@ -151,36 +118,6 @@ export default {
         return '';
       }
     },
-    async deleteContact({ id }) {
-      try {
-        await this.$store.dispatch('contacts/delete', id);
-        this.$emit('panelClose');
-        useAlert(this.$t('DELETE_CONTACT.API.SUCCESS_MESSAGE'));
-
-        if (isAConversationRoute(this.$route.name)) {
-          this.$router.push({
-            name: getConversationDashboardRoute(this.$route.name),
-          });
-        } else if (isAInboxViewRoute(this.$route.name)) {
-          this.$router.push({
-            name: 'inbox_view',
-          });
-        } else if (this.$route.name !== 'contacts_dashboard') {
-          this.$router.push({
-            name: 'contacts_dashboard',
-          });
-        }
-      } catch (error) {
-        useAlert(
-          error.message
-            ? error.message
-            : this.$t('DELETE_CONTACT.API.ERROR_MESSAGE')
-        );
-      }
-    },
-    openMergeModal() {
-      this.$refs.mergeModal?.open();
-    },
     startEditingName() {
       this.editName = this.contact.name || '';
       this.isEditingName = true;
@@ -354,19 +291,14 @@ export default {
         </div>
       </div>
       <div class="flex items-center w-full mt-0.5 gap-2">
-        <ComposeConversation
-          :contact-id="String(contact.id)"
-          is-modal
-          @close="closeComposeConversationModal"
-        >
-          <template #trigger="{ toggle }">
+        <ComposeConversation :contact-id="String(contact.id)">
+          <template #trigger>
             <NextButton
               v-tooltip.top-end="$t('CONTACT_PANEL.NEW_MESSAGE')"
               icon="i-ph-chat-circle-dots"
               slate
               faded
               sm
-              @click="openComposeConversationModal(toggle)"
             />
           </template>
         </ComposeConversation>
@@ -387,45 +319,41 @@ export default {
           sm
           @click="toggleEditModal"
         />
-        <NextButton
-          v-tooltip.top-end="$t('CONTACT_PANEL.MERGE_CONTACT')"
-          icon="i-ph-arrows-merge"
-          slate
-          faded
-          sm
-          :disabled="uiFlags.isMerging"
-          @click="openMergeModal"
-        />
-        <NextButton
+        <ContactMergeModal :primary-contact="contact">
+          <template #trigger>
+            <NextButton
+              v-tooltip.top-end="$t('CONTACT_PANEL.MERGE_CONTACT')"
+              icon="i-ph-arrows-merge"
+              slate
+              faded
+              sm
+              :disabled="uiFlags.isMerging"
+            />
+          </template>
+        </ContactMergeModal>
+        <ContactDeleteModal
           v-if="isAdmin"
-          v-tooltip.top-end="$t('DELETE_CONTACT.BUTTON_LABEL')"
-          icon="i-ph-trash"
-          slate
-          faded
-          sm
-          ruby
-          :disabled="uiFlags.isDeleting"
-          @click="toggleDeleteModal"
-        />
+          :contact="contact"
+          @deleted="$emit('panelClose')"
+        >
+          <template #trigger>
+            <NextButton
+              v-tooltip.top-end="$t('DELETE_CONTACT.BUTTON_LABEL')"
+              icon="i-ph-trash"
+              slate
+              faded
+              sm
+              ruby
+              :disabled="uiFlags.isDeleting"
+            />
+          </template>
+        </ContactDeleteModal>
       </div>
       <EditContact
-        v-if="showEditModal"
         :show="showEditModal"
         :contact="contact"
         @cancel="toggleEditModal"
       />
-      <ContactMergeModal ref="mergeModal" :primary-contact="contact" />
     </div>
-    <woot-delete-modal
-      v-if="showDeleteModal"
-      v-model:show="showDeleteModal"
-      :on-close="closeDelete"
-      :on-confirm="confirmDeletion"
-      :title="$t('DELETE_CONTACT.CONFIRM.TITLE')"
-      :message="$t('DELETE_CONTACT.CONFIRM.MESSAGE')"
-      :message-value="confirmDeleteMessage"
-      :confirm-text="$t('DELETE_CONTACT.CONFIRM.YES')"
-      :reject-text="$t('DELETE_CONTACT.CONFIRM.NO')"
-    />
   </div>
 </template>

app/javascript/dashboard/routes/dashboard/conversation/contact/EditContact.vue

@@ -1,74 +1,70 @@
-<script>
-import { mapGetters } from 'vuex';
+<script setup>
+import { useStore } from 'dashboard/composables/store';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
 import ContactForm from './ContactForm.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
 
-export default {
-  components: {
-    ContactForm,
-  },
-  props: {
-    show: {
-      type: Boolean,
-      default: false,
-    },
-    contact: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  emits: ['cancel', 'update:show'],
-  computed: {
-    ...mapGetters({
-      uiFlags: 'contacts/getUIFlags',
-    }),
-    localShow: {
-      get() {
-        return this.show;
-      },
-      set(value) {
-        this.$emit('update:show', value);
-      },
-    },
-  },
+const props = defineProps({
+  show: { type: Boolean, default: false },
+  contact: { type: Object, default: () => ({}) },
+});
 
-  methods: {
-    onCancel() {
-      this.$emit('cancel');
-    },
-    onSuccess() {
-      this.$emit('cancel');
-    },
-    async onSubmit(contactItem) {
-      await this.$store.dispatch('contacts/update', contactItem);
-      await this.$store.dispatch(
-        'contacts/fetchContactableInbox',
-        this.contact.id
-      );
-    },
-  },
+const emit = defineEmits(['cancel']);
+
+const store = useStore();
+const uiFlags = useMapGetter('contacts/getUIFlags');
+
+const onCancel = () => emit('cancel');
+
+const onSubmit = async contactItem => {
+  await store.dispatch('contacts/update', contactItem);
+  await store.dispatch('contacts/fetchContactableInbox', props.contact.id);
 };
+
+// Restore Escape-to-close behavior that was provided by woot-modal before
+// this drawer was reimplemented as a plain fixed panel.
+useKeyboardEvents({
+  Escape: {
+    action: () => {
+      if (props.show) onCancel();
+    },
+    allowOnFocusedInput: true,
+  },
+});
 </script>
 
 <template>
-  <woot-modal
-    v-model:show="localShow"
-    :on-close="onCancel"
-    modal-type="right-aligned"
+  <transition
+    enter-active-class="transition duration-200 ease-out"
+    enter-from-class="ltr:translate-x-full rtl:-translate-x-full opacity-0"
+    leave-active-class="transition duration-150 ease-in"
+    leave-to-class="ltr:translate-x-[30%] rtl:-translate-x-[30%] opacity-0"
   >
-    <div class="flex flex-col h-auto overflow-auto">
-      <woot-modal-header
-        :header-title="`${$t('EDIT_CONTACT.TITLE')} - ${
-          contact.name || contact.email
-        }`"
-        :header-content="$t('EDIT_CONTACT.DESC')"
-      />
+    <div
+      v-if="show"
+      class="fixed inset-y-0 ltr:right-0 rtl:left-0 z-50 flex flex-col w-[30rem] max-w-full h-full bg-n-surface-2 ltr:border-l rtl:border-r border-n-weak shadow-lg overflow-auto"
+    >
+      <div class="flex items-center justify-between px-8 pt-8 pb-2">
+        <div>
+          <h2 class="text-lg font-medium text-n-slate-12 mb-1">
+            {{
+              `${$t('EDIT_CONTACT.TITLE')} - ${contact.name || contact.email}`
+            }}
+          </h2>
+          <p class="text-sm text-n-slate-11 mb-0">
+            {{ $t('EDIT_CONTACT.DESC') }}
+          </p>
+        </div>
+        <Button icon="i-lucide-x" slate ghost sm @click="onCancel" />
+      </div>
       <ContactForm
         :contact="contact"
         :in-progress="uiFlags.isUpdating"
         :on-submit="onSubmit"
-        @success="onSuccess"
+        @success="onCancel"
         @cancel="onCancel"
       />
     </div>
-  </woot-modal>
+  </transition>
 </template>

app/services/reports/data_source.rb

@@ -0,0 +1,64 @@
+class Reports::DataSource
+  include TimezoneHelper
+
+  attr_reader :account, :metric, :dimension_type, :dimension_id,
+              :scope, :range, :group_by, :timezone_offset,
+              :business_hours
+
+  class << self
+    def for(**context)
+      # TODO: Route to Reports::RollupDataSource when rollup reads are implemented
+      Reports::RawDataSource.new(**context)
+    end
+  end
+
+  def initialize(**context)
+    @account = context[:account]
+    @metric = context[:metric]
+    @dimension_type = (context[:dimension_type].presence || 'account').to_s
+    @dimension_id = context[:dimension_id]
+    @scope = context[:scope]
+    @range = context[:range]
+    @group_by = context[:group_by].to_s.presence || 'day'
+    @timezone_offset = context[:timezone_offset]
+    @business_hours = context[:business_hours]
+  end
+
+  private
+
+  def report_metric
+    @report_metric ||= Reports::ReportMetricRegistry.fetch(metric)
+  end
+
+  def average_metric?
+    report_metric&.average?
+  end
+
+  def count_metric?
+    !average_metric?
+  end
+
+  def rollup_metric
+    report_metric&.rollup_metric
+  end
+
+  def raw_event_name
+    report_metric&.raw_event_name
+  end
+
+  def raw_count_strategy
+    report_metric&.raw_count_strategy
+  end
+
+  def summary_metrics
+    @summary_metrics ||= Reports::ReportMetricRegistry.summary_metrics
+  end
+
+  def timezone
+    @timezone ||= timezone_name_from_offset(timezone_offset)
+  end
+
+  def use_business_hours?
+    ActiveModel::Type::Boolean.new.cast(business_hours)
+  end
+end

app/services/reports/raw_data_source.rb

@@ -0,0 +1,156 @@
+class Reports::RawDataSource < Reports::DataSource
+  def timeseries
+    average_metric? ? average_timeseries : count_timeseries
+  end
+
+  def aggregate
+    average_metric? ? average_scope.average(average_value_key) : count_scope.count
+  end
+
+  def summary
+    metric_results = summary_scope
+                     .select(*summary_select_fields)
+                     .group(summary_group_by_key)
+                     .index_by { |record| record.public_send(summary_index_key) }
+
+    merge_summary_results(metric_results, summary_conversation_counts)
+  end
+
+  private
+
+  def count_timeseries
+    grouped_count.map do |event_date, event_count|
+      { value: event_count, timestamp: event_date.in_time_zone(timezone).to_i }
+    end
+  end
+
+  def average_timeseries
+    grouped_average_time = grouped_average_scope.average(average_value_key)
+    grouped_event_count = grouped_average_scope.count
+
+    grouped_average_time.each_with_object([]) do |(event_date, average_time), results|
+      results << {
+        value: average_time,
+        timestamp: event_date.in_time_zone(timezone).to_i,
+        count: grouped_event_count[event_date]
+      }
+    end
+  end
+
+  def grouped_average_scope
+    average_scope.group_by_period(
+      group_by,
+      :created_at,
+      default_value: 0,
+      range: range,
+      permit: %w[day week month year hour],
+      time_zone: timezone
+    )
+  end
+
+  def grouped_count
+    count_scope.group_by_period(
+      group_by,
+      :created_at,
+      default_value: 0,
+      range: range,
+      permit: %w[day week month year hour],
+      time_zone: timezone
+    ).count
+  end
+
+  def average_scope
+    scope.reporting_events.where(name: raw_event_name, created_at: range, account_id: account.id)
+  end
+
+  def count_scope
+    case metric.to_s
+    when 'conversations_count'
+      scope.conversations.where(account_id: account.id, created_at: range)
+    when 'incoming_messages_count'
+      scope.messages.where(account_id: account.id, created_at: range).incoming.unscope(:order)
+    when 'outgoing_messages_count'
+      scope.messages.where(account_id: account.id, created_at: range).outgoing.unscope(:order)
+    else
+      reporting_event_count_scope
+    end
+  end
+
+  def reporting_event_count_scope
+    events = scope.reporting_events.where(
+      name: raw_event_name,
+      account_id: account.id,
+      created_at: range
+    )
+
+    return events unless raw_count_strategy == :distinct_conversation
+
+    events.joins(:conversation).select(:conversation_id).distinct
+  end
+
+  def summary_scope
+    scope = account.reporting_events.where(created_at: range)
+    return scope.joins(:conversation) if dimension_type == 'team'
+
+    scope
+  end
+
+  def summary_conversation_counts
+    account.conversations
+           .where(created_at: range)
+           .group(summary_conversation_group_by_key)
+           .count
+  end
+
+  def merge_summary_results(metric_results, conversation_counts)
+    (metric_results.keys | conversation_counts.keys).each_with_object({}) do |dimension_id, results|
+      record = metric_results[dimension_id]
+      results[dimension_id] = summary_attributes_for(record, conversation_counts[dimension_id])
+    end
+  end
+
+  def summary_select_fields
+    ["#{summary_group_by_key} as #{summary_index_key}"] + summary_metrics.map { |definition| summary_select_field(definition) }
+  end
+
+  def summary_select_field(definition)
+    if definition.count?
+      "COUNT(CASE WHEN name = '#{definition.raw_event_name}' THEN 1 END) as #{definition.summary_key}"
+    else
+      "AVG(CASE WHEN name = '#{definition.raw_event_name}' THEN #{average_value_key} END) as #{definition.summary_key}"
+    end
+  end
+
+  def summary_attributes_for(record, conversations_count = 0)
+    summary_metrics.each_with_object({ conversations_count: conversations_count.to_i }) do |definition, attributes|
+      value = record&.public_send(definition.summary_key)
+      attributes[definition.summary_key] = definition.count? ? value.to_i : value
+    end
+  end
+
+  def summary_group_by_key
+    {
+      'account' => :account_id,
+      'agent' => :user_id,
+      'inbox' => :inbox_id,
+      'team' => 'conversations.team_id'
+    }[dimension_type]
+  end
+
+  def summary_conversation_group_by_key
+    {
+      'account' => :account_id,
+      'agent' => :assignee_id,
+      'inbox' => :inbox_id,
+      'team' => :team_id
+    }[dimension_type]
+  end
+
+  def summary_index_key
+    summary_group_by_key.to_s.split('.').last
+  end
+
+  def average_value_key
+    use_business_hours? ? :value_in_business_hours : :value
+  end
+end

app/services/reports/report_metric_registry.rb

@@ -0,0 +1,120 @@
+module Reports::ReportMetricRegistry
+  # Describes one public report metric.
+  # name: API-facing metric name requested by reports.
+  # aggregate: whether the metric is a count or average.
+  # raw_event_name: source reporting_events name for raw queries.
+  # rollup_metric: source reporting_events_rollups metric for rollup queries.
+  # summary_key: key used when this metric appears in grouped summary responses.
+  # raw_count_strategy: optional raw-query counting rule, such as distinct conversations.
+  Metric = Data.define(
+    :name,
+    :aggregate,
+    :raw_event_name,
+    :rollup_metric,
+    :summary_key,
+    :raw_count_strategy
+  ) do
+    def initialize(name:, aggregate:, raw_event_name: nil, rollup_metric: nil, summary_key: nil, raw_count_strategy: nil) # rubocop:disable Metrics/ParameterLists
+      super
+    end
+
+    def average?
+      aggregate == :average
+    end
+
+    def count?
+      aggregate == :count
+    end
+
+    def rollup_supported?
+      rollup_metric.present?
+    end
+
+    def summary?
+      summary_key.present?
+    end
+  end
+
+  METRICS = {
+    conversations_count: Metric.new(
+      name: :conversations_count,
+      aggregate: :count
+    ),
+    incoming_messages_count: Metric.new(
+      name: :incoming_messages_count,
+      aggregate: :count
+    ),
+    outgoing_messages_count: Metric.new(
+      name: :outgoing_messages_count,
+      aggregate: :count
+    ),
+    avg_first_response_time: Metric.new(
+      name: :avg_first_response_time,
+      aggregate: :average,
+      raw_event_name: :first_response,
+      rollup_metric: :first_response,
+      summary_key: :avg_first_response_time
+    ),
+    avg_resolution_time: Metric.new(
+      name: :avg_resolution_time,
+      aggregate: :average,
+      raw_event_name: :conversation_resolved,
+      rollup_metric: :resolution_time,
+      summary_key: :avg_resolution_time
+    ),
+    reply_time: Metric.new(
+      name: :reply_time,
+      aggregate: :average,
+      raw_event_name: :reply_time,
+      rollup_metric: :reply_time,
+      summary_key: :avg_reply_time
+    ),
+    resolutions_count: Metric.new(
+      name: :resolutions_count,
+      aggregate: :count,
+      raw_event_name: :conversation_resolved,
+      rollup_metric: :resolutions_count,
+      summary_key: :resolved_conversations_count
+    ),
+    bot_resolutions_count: Metric.new(
+      name: :bot_resolutions_count,
+      aggregate: :count,
+      raw_event_name: :conversation_bot_resolved,
+      rollup_metric: :bot_resolutions_count
+    ),
+    bot_handoffs_count: Metric.new(
+      name: :bot_handoffs_count,
+      aggregate: :count,
+      raw_event_name: :conversation_bot_handoff,
+      rollup_metric: :bot_handoffs_count,
+      raw_count_strategy: :distinct_conversation
+    )
+  }.freeze
+
+  SUMMARY_METRIC_NAMES = %i[
+    resolutions_count
+    avg_resolution_time
+    avg_first_response_time
+    reply_time
+  ].freeze
+
+  module_function
+
+  def fetch(name)
+    return if name.blank?
+
+    METRICS[name.to_sym]
+  end
+
+  def supported?(name)
+    fetch(name).present?
+  end
+
+  def rollup_supported?(name)
+    fetch(name)&.rollup_supported? || false
+  end
+
+  def summary_metrics
+    SUMMARY_METRIC_NAMES.map { |metric_name| METRICS.fetch(metric_name) }
+  end
+end

spec/builders/v2/reports/conversations/metric_builder_spec.rb

@@ -5,12 +5,10 @@ RSpec.describe V2::Reports::Conversations::MetricBuilder, type: :model do
 
   let(:account) { create(:account) }
   let(:params) { { since: '2023-01-01', until: '2024-01-01' } }
-  let(:count_builder_instance) { instance_double(V2::Reports::Timeseries::CountReportBuilder, aggregate_value: 42) }
-  let(:avg_builder_instance) { instance_double(V2::Reports::Timeseries::AverageReportBuilder, aggregate_value: 42) }
+  let(:builder_instance) { instance_double(V2::Reports::Timeseries::ReportBuilder, aggregate_value: 42) }
 
   before do
-    allow(V2::Reports::Timeseries::CountReportBuilder).to receive(:new).and_return(count_builder_instance)
-    allow(V2::Reports::Timeseries::AverageReportBuilder).to receive(:new).and_return(avg_builder_instance)
+    allow(V2::Reports::Timeseries::ReportBuilder).to receive(:new).and_return(builder_instance)
   end
 
   describe '#summary' do
@@ -31,8 +29,8 @@ RSpec.describe V2::Reports::Conversations::MetricBuilder, type: :model do
 
     it 'creates builders with proper params' do
       subject.summary
-      expect(V2::Reports::Timeseries::CountReportBuilder).to have_received(:new).with(account, params.merge(metric: 'conversations_count'))
-      expect(V2::Reports::Timeseries::AverageReportBuilder).to have_received(:new).with(account, params.merge(metric: 'avg_first_response_time'))
+      expect(V2::Reports::Timeseries::ReportBuilder).to have_received(:new).with(account, params.merge(metric: 'conversations_count'))
+      expect(V2::Reports::Timeseries::ReportBuilder).to have_received(:new).with(account, params.merge(metric: 'avg_first_response_time'))
     end
   end
 

spec/builders/v2/reports/conversations/report_builder_spec.rb

@@ -4,19 +4,19 @@ describe V2::Reports::Conversations::ReportBuilder do
   subject { described_class.new(account, params) }
 
   let(:account) { create(:account) }
-  let(:average_builder) { V2::Reports::Timeseries::AverageReportBuilder }
-  let(:count_builder) { V2::Reports::Timeseries::CountReportBuilder }
+  let(:builder) { V2::Reports::Timeseries::ReportBuilder }
 
-  shared_examples 'valid metric handler' do |metric, method, builder|
+  shared_examples 'valid metric handler' do |metric, method|
     context 'when a valid metric is given' do
       let(:params) { { metric: metric } }
 
-      it "calls the correct #{method} builder for #{metric}" do
+      it "calls the shared #{method} builder for #{metric}" do
         builder_instance = instance_double(builder)
         allow(builder).to receive(:new).and_return(builder_instance)
-        allow(builder_instance).to receive(method)
+        allow(builder_instance).to receive(method).and_return(:result)
 
-        builder_instance.public_send(method)
+        expect(subject.public_send(method)).to eq(:result)
+        expect(builder).to have_received(:new).with(account, params)
         expect(builder_instance).to have_received(method)
       end
     end
@@ -33,12 +33,12 @@ describe V2::Reports::Conversations::ReportBuilder do
   end
 
   describe '#timeseries' do
-    it_behaves_like 'valid metric handler', 'avg_first_response_time', :timeseries, V2::Reports::Timeseries::AverageReportBuilder
-    it_behaves_like 'valid metric handler', 'conversations_count', :timeseries, V2::Reports::Timeseries::CountReportBuilder
+    it_behaves_like 'valid metric handler', 'avg_first_response_time', :timeseries
+    it_behaves_like 'valid metric handler', 'conversations_count', :timeseries
   end
 
   describe '#aggregate_value' do
-    it_behaves_like 'valid metric handler', 'avg_first_response_time', :aggregate_value, V2::Reports::Timeseries::AverageReportBuilder
-    it_behaves_like 'valid metric handler', 'conversations_count', :aggregate_value, V2::Reports::Timeseries::CountReportBuilder
+    it_behaves_like 'valid metric handler', 'avg_first_response_time', :aggregate_value
+    it_behaves_like 'valid metric handler', 'conversations_count', :aggregate_value
   end
 end

spec/builders/v2/reports/timeseries/average_report_builder_spec.rb

@@ -1,174 +0,0 @@
-require 'rails_helper'
-
-describe V2::Reports::Timeseries::AverageReportBuilder do
-  subject { described_class.new(account, params) }
-
-  let(:account) { create(:account) }
-  let(:team) { create(:team, account: account) }
-  let(:inbox) { create(:inbox, account: account) }
-  let(:label) { create(:label, title: 'spec-billing', account: account) }
-  let!(:conversation) { create(:conversation, account: account, inbox: inbox, team: team) }
-  let(:current_time) { '26.10.2020 10:00'.to_datetime }
-
-  let(:params) do
-    {
-      type: filter_type,
-      business_hours: business_hours,
-      timezone_offset: timezone_offset,
-      group_by: group_by,
-      metric: metric,
-      since: (current_time - 1.week).beginning_of_day.to_i.to_s,
-      until: current_time.end_of_day.to_i.to_s,
-      id: filter_id
-    }
-  end
-  let(:timezone_offset) { nil }
-  let(:group_by) { 'day' }
-  let(:metric) { 'avg_first_response_time' }
-  let(:business_hours) { false }
-  let(:filter_type) { :account }
-  let(:filter_id) { '' }
-
-  before do
-    travel_to current_time
-    conversation.label_list.add(label.title)
-    conversation.save!
-    create(:reporting_event, name: 'first_response', value: 80, value_in_business_hours: 10, account: account, created_at: Time.zone.now,
-                             conversation: conversation, inbox: inbox)
-    create(:reporting_event, name: 'first_response', value: 100, value_in_business_hours: 20, account: account, created_at: 1.hour.ago)
-    create(:reporting_event, name: 'first_response', value: 93, value_in_business_hours: 30, account: account, created_at: 1.week.ago)
-  end
-
-  describe '#timeseries' do
-    context 'when there is no filter applied' do
-      it 'returns the correct values' do
-        timeseries_values = subject.timeseries
-
-        expect(timeseries_values).to eq(
-          [
-            { count: 1, timestamp: 1_603_065_600, value: 93.0 },
-            { count: 0, timestamp: 1_603_152_000, value: 0 },
-            { count: 0, timestamp: 1_603_238_400, value: 0 },
-            { count: 0, timestamp: 1_603_324_800, value: 0 },
-            { count: 0, timestamp: 1_603_411_200, value: 0 },
-            { count: 0, timestamp: 1_603_497_600, value: 0 },
-            { count: 0, timestamp: 1_603_584_000, value: 0 },
-            { count: 2, timestamp: 1_603_670_400, value: 90.0 }
-          ]
-        )
-      end
-
-      context 'when business hours is provided' do
-        let(:business_hours) { true }
-
-        it 'returns correct timeseries' do
-          timeseries_values = subject.timeseries
-
-          expect(timeseries_values).to eq(
-            [
-              { count: 1, timestamp: 1_603_065_600, value: 30.0 },
-              { count: 0, timestamp: 1_603_152_000, value: 0 },
-              { count: 0, timestamp: 1_603_238_400, value: 0 },
-              { count: 0, timestamp: 1_603_324_800, value: 0 },
-              { count: 0, timestamp: 1_603_411_200, value: 0 },
-              { count: 0, timestamp: 1_603_497_600, value: 0 },
-              { count: 0, timestamp: 1_603_584_000, value: 0 },
-              { count: 2, timestamp: 1_603_670_400, value: 15.0 }
-            ]
-          )
-        end
-      end
-
-      context 'when group_by is provided' do
-        let(:group_by) { 'week' }
-
-        it 'returns correct timeseries' do
-          timeseries_values = subject.timeseries
-          expect(timeseries_values).to eq(
-            [
-              { count: 1, timestamp: (current_time - 1.week).beginning_of_week(:sunday).to_i, value: 93.0 },
-              { count: 2, timestamp: current_time.beginning_of_week(:sunday).to_i, value: 90.0 }
-            ]
-          )
-        end
-      end
-
-      context 'when timezone offset is provided' do
-        let(:timezone_offset) { '5.5' }
-        let(:group_by) { 'week' }
-
-        it 'returns correct timeseries' do
-          timeseries_values = subject.timeseries
-          expect(timeseries_values).to eq(
-            [
-              { count: 1, timestamp: (current_time - 1.week).in_time_zone('Chennai').beginning_of_week(:sunday).to_i, value: 93.0 },
-              { count: 2, timestamp: current_time.in_time_zone('Chennai').beginning_of_week(:sunday).to_i, value: 90.0 }
-            ]
-          )
-        end
-      end
-    end
-
-    context 'when the label filter is applied' do
-      let(:group_by) { 'week' }
-      let(:filter_type) { 'label' }
-      let(:filter_id) { label.id }
-
-      it 'returns correct timeseries' do
-        timeseries_values = subject.timeseries
-        start_of_the_week = current_time.beginning_of_week(:sunday).to_i
-        last_week_start_of_the_week = (current_time - 1.week).beginning_of_week(:sunday).to_i
-        expect(timeseries_values).to eq(
-          [
-            { count: 0, timestamp: last_week_start_of_the_week, value: 0 },
-            { count: 1, timestamp: start_of_the_week, value: 80.0 }
-          ]
-        )
-      end
-    end
-
-    context 'when the inbox filter is applied' do
-      let(:group_by) { 'week' }
-      let(:filter_type) { 'inbox' }
-      let(:filter_id) { inbox.id }
-
-      it 'returns correct timeseries' do
-        timeseries_values = subject.timeseries
-        start_of_the_week = current_time.beginning_of_week(:sunday).to_i
-        last_week_start_of_the_week = (current_time - 1.week).beginning_of_week(:sunday).to_i
-        expect(timeseries_values).to eq(
-          [
-            { count: 0, timestamp: last_week_start_of_the_week, value: 0 },
-            { count: 1, timestamp: start_of_the_week, value: 80.0 }
-          ]
-        )
-      end
-    end
-
-    context 'when the team filter is applied' do
-      let(:group_by) { 'week' }
-      let(:filter_type) { 'team' }
-      let(:filter_id) { team.id }
-
-      it 'returns correct timeseries' do
-        timeseries_values = subject.timeseries
-        start_of_the_week = current_time.beginning_of_week(:sunday).to_i
-        last_week_start_of_the_week = (current_time - 1.week).beginning_of_week(:sunday).to_i
-        expect(timeseries_values).to eq(
-          [
-            { count: 0, timestamp: last_week_start_of_the_week, value: 0 },
-            { count: 1, timestamp: start_of_the_week, value: 80.0 }
-          ]
-        )
-      end
-    end
-  end
-
-  describe '#aggregate_value' do
-    context 'when there is no filter applied' do
-      it 'returns the correct average value' do
-        expect(subject.aggregate_value).to eq 91.0
-      end
-    end
-  end
-end

spec/builders/v2/reports/timeseries/count_report_builder_spec.rb

@@ -1,113 +0,0 @@
-require 'rails_helper'
-
-describe V2::Reports::Timeseries::CountReportBuilder do
-  subject { described_class.new(account, params) }
-
-  let(:account) { create(:account) }
-  let(:account2) { create(:account) }
-  let(:user) { create(:user, email: 'agent1@example.com') }
-  let(:inbox) { create(:inbox, account: account) }
-  let(:inbox2) { create(:inbox, account: account2) }
-  let(:current_time) { Time.current }
-
-  let(:params) do
-    {
-      type: 'agent',
-      metric: 'resolutions_count',
-      since: (current_time - 1.day).beginning_of_day.to_i.to_s,
-      until: current_time.end_of_day.to_i.to_s,
-      id: user.id.to_s
-    }
-  end
-
-  before do
-    travel_to current_time
-
-    # Add the same user to both accounts
-    create(:account_user, account: account, user: user)
-    create(:account_user, account: account2, user: user)
-
-    # Create conversations in account1
-    conversation1 = create(:conversation, account: account, inbox: inbox, assignee: user)
-    conversation2 = create(:conversation, account: account, inbox: inbox, assignee: user)
-
-    # Create conversations in account2
-    conversation3 = create(:conversation, account: account2, inbox: inbox2, assignee: user)
-    conversation4 = create(:conversation, account: account2, inbox: inbox2, assignee: user)
-
-    # User resolves 2 conversations in account1
-    create(:reporting_event,
-           name: 'conversation_resolved',
-           account: account,
-           user: user,
-           conversation: conversation1,
-           created_at: current_time - 12.hours)
-
-    create(:reporting_event,
-           name: 'conversation_resolved',
-           account: account,
-           user: user,
-           conversation: conversation2,
-           created_at: current_time - 6.hours)
-
-    # Same user resolves 3 conversations in account2 - these should NOT be counted for account1
-    create(:reporting_event,
-           name: 'conversation_resolved',
-           account: account2,
-           user: user,
-           conversation: conversation3,
-           created_at: current_time - 8.hours)
-
-    create(:reporting_event,
-           name: 'conversation_resolved',
-           account: account2,
-           user: user,
-           conversation: conversation4,
-           created_at: current_time - 4.hours)
-
-    # Create another conversation in account2 for testing
-    conversation5 = create(:conversation, account: account2, inbox: inbox2, assignee: user)
-    create(:reporting_event,
-           name: 'conversation_resolved',
-           account: account2,
-           user: user,
-           conversation: conversation5,
-           created_at: current_time - 2.hours)
-  end
-
-  describe '#aggregate_value' do
-    it 'returns only resolutions performed by the user in the specified account' do
-      # User should have 2 resolutions in account1, not 5 (total across both accounts)
-      expect(subject.aggregate_value).to eq(2)
-    end
-
-    context 'when querying account2' do
-      subject { described_class.new(account2, params) }
-
-      it 'returns only resolutions for account2' do
-        # User should have 3 resolutions in account2
-        expect(subject.aggregate_value).to eq(3)
-      end
-    end
-  end
-
-  describe '#timeseries' do
-    it 'filters resolutions by account' do
-      result = subject.timeseries
-      # Should only count the 2 resolutions from account1
-      total_count = result.sum { |r| r[:value] }
-      expect(total_count).to eq(2)
-    end
-  end
-
-  describe 'account isolation' do
-    it 'does not leak data between accounts' do
-      # If account isolation works correctly, the counts should be different
-      account1_count = described_class.new(account, params).aggregate_value
-      account2_count = described_class.new(account2, params).aggregate_value
-
-      expect(account1_count).to eq(2)
-      expect(account2_count).to eq(3)
-    end
-  end
-end

spec/builders/v2/reports/timeseries/report_builder_spec.rb

@@ -0,0 +1,313 @@
+require 'rails_helper'
+
+describe V2::Reports::Timeseries::ReportBuilder do
+  describe 'average metrics' do
+    subject { described_class.new(account, params) }
+
+    let(:account) { create(:account) }
+    let(:team) { create(:team, account: account) }
+    let(:inbox) { create(:inbox, account: account) }
+    let(:label) { create(:label, title: 'spec-billing', account: account) }
+    let!(:conversation) { create(:conversation, account: account, inbox: inbox, team: team) }
+    let(:current_time) { '26.10.2020 10:00'.to_datetime }
+
+    let(:params) do
+      {
+        type: filter_type,
+        business_hours: business_hours,
+        timezone_offset: timezone_offset,
+        group_by: group_by,
+        metric: metric,
+        since: (current_time - 1.week).beginning_of_day.to_i.to_s,
+        until: current_time.end_of_day.to_i.to_s,
+        id: filter_id
+      }
+    end
+    let(:timezone_offset) { nil }
+    let(:group_by) { 'day' }
+    let(:metric) { 'avg_first_response_time' }
+    let(:business_hours) { false }
+    let(:filter_type) { :account }
+    let(:filter_id) { '' }
+
+    before do
+      travel_to current_time
+      conversation.label_list.add(label.title)
+      conversation.save!
+      create(:reporting_event, name: 'first_response', value: 80, value_in_business_hours: 10, account: account, created_at: Time.zone.now,
+                               conversation: conversation, inbox: inbox)
+      create(:reporting_event, name: 'first_response', value: 100, value_in_business_hours: 20, account: account, created_at: 1.hour.ago)
+      create(:reporting_event, name: 'first_response', value: 93, value_in_business_hours: 30, account: account, created_at: 1.week.ago)
+    end
+
+    describe '#timeseries' do
+      it 'returns the correct values' do
+        timeseries_values = subject.timeseries
+
+        expect(timeseries_values).to eq(
+          [
+            { count: 1, timestamp: 1_603_065_600, value: 93.0 },
+            { count: 0, timestamp: 1_603_152_000, value: 0 },
+            { count: 0, timestamp: 1_603_238_400, value: 0 },
+            { count: 0, timestamp: 1_603_324_800, value: 0 },
+            { count: 0, timestamp: 1_603_411_200, value: 0 },
+            { count: 0, timestamp: 1_603_497_600, value: 0 },
+            { count: 0, timestamp: 1_603_584_000, value: 0 },
+            { count: 2, timestamp: 1_603_670_400, value: 90.0 }
+          ]
+        )
+      end
+
+      context 'when business hours is provided' do
+        let(:business_hours) { true }
+
+        it 'returns correct timeseries' do
+          timeseries_values = subject.timeseries
+
+          expect(timeseries_values).to eq(
+            [
+              { count: 1, timestamp: 1_603_065_600, value: 30.0 },
+              { count: 0, timestamp: 1_603_152_000, value: 0 },
+              { count: 0, timestamp: 1_603_238_400, value: 0 },
+              { count: 0, timestamp: 1_603_324_800, value: 0 },
+              { count: 0, timestamp: 1_603_411_200, value: 0 },
+              { count: 0, timestamp: 1_603_497_600, value: 0 },
+              { count: 0, timestamp: 1_603_584_000, value: 0 },
+              { count: 2, timestamp: 1_603_670_400, value: 15.0 }
+            ]
+          )
+        end
+      end
+
+      context 'when group_by is provided' do
+        let(:group_by) { 'week' }
+
+        it 'returns correct timeseries' do
+          timeseries_values = subject.timeseries
+          expect(timeseries_values).to eq(
+            [
+              { count: 1, timestamp: (current_time - 1.week).beginning_of_week(:sunday).to_i, value: 93.0 },
+              { count: 2, timestamp: current_time.beginning_of_week(:sunday).to_i, value: 90.0 }
+            ]
+          )
+        end
+      end
+
+      context 'when timezone offset is provided' do
+        let(:timezone_offset) { '5.5' }
+        let(:group_by) { 'week' }
+
+        it 'returns correct timeseries' do
+          timeseries_values = subject.timeseries
+          expect(timeseries_values).to eq(
+            [
+              { count: 1, timestamp: (current_time - 1.week).in_time_zone('Chennai').beginning_of_week(:sunday).to_i, value: 93.0 },
+              { count: 2, timestamp: current_time.in_time_zone('Chennai').beginning_of_week(:sunday).to_i, value: 90.0 }
+            ]
+          )
+        end
+      end
+
+      context 'when the label filter is applied' do
+        let(:group_by) { 'week' }
+        let(:filter_type) { 'label' }
+        let(:filter_id) { label.id }
+
+        it 'returns correct timeseries' do
+          timeseries_values = subject.timeseries
+          start_of_the_week = current_time.beginning_of_week(:sunday).to_i
+          last_week_start_of_the_week = (current_time - 1.week).beginning_of_week(:sunday).to_i
+          expect(timeseries_values).to eq(
+            [
+              { count: 0, timestamp: last_week_start_of_the_week, value: 0 },
+              { count: 1, timestamp: start_of_the_week, value: 80.0 }
+            ]
+          )
+        end
+      end
+
+      context 'when the inbox filter is applied' do
+        let(:group_by) { 'week' }
+        let(:filter_type) { 'inbox' }
+        let(:filter_id) { inbox.id }
+
+        it 'returns correct timeseries' do
+          timeseries_values = subject.timeseries
+          start_of_the_week = current_time.beginning_of_week(:sunday).to_i
+          last_week_start_of_the_week = (current_time - 1.week).beginning_of_week(:sunday).to_i
+          expect(timeseries_values).to eq(
+            [
+              { count: 0, timestamp: last_week_start_of_the_week, value: 0 },
+              { count: 1, timestamp: start_of_the_week, value: 80.0 }
+            ]
+          )
+        end
+      end
+
+      context 'when the team filter is applied' do
+        let(:group_by) { 'week' }
+        let(:filter_type) { 'team' }
+        let(:filter_id) { team.id }
+
+        it 'returns correct timeseries' do
+          timeseries_values = subject.timeseries
+          start_of_the_week = current_time.beginning_of_week(:sunday).to_i
+          last_week_start_of_the_week = (current_time - 1.week).beginning_of_week(:sunday).to_i
+          expect(timeseries_values).to eq(
+            [
+              { count: 0, timestamp: last_week_start_of_the_week, value: 0 },
+              { count: 1, timestamp: start_of_the_week, value: 80.0 }
+            ]
+          )
+        end
+      end
+    end
+
+    describe '#aggregate_value' do
+      context 'when there is no filter applied' do
+        it 'returns the correct average value' do
+          expect(subject.aggregate_value).to eq 91.0
+        end
+      end
+
+      context 'when rollups are enabled and the agent does not exist' do
+        let(:filter_type) { :agent }
+        let(:filter_id) { '999999' }
+        let(:timezone_offset) { '0' }
+
+        before do
+          account.update!(reporting_timezone: 'Etc/UTC')
+          allow(account).to receive(:feature_enabled?).with(:report_rollup).and_return(true)
+        end
+
+        it 'raises record not found to preserve raw path behavior' do
+          expect { subject.aggregate_value }.to raise_error(ActiveRecord::RecordNotFound)
+        end
+      end
+    end
+  end
+
+  describe 'count metrics' do
+    subject { described_class.new(account, params) }
+
+    let(:account) { create(:account) }
+    let(:account2) { create(:account) }
+    let(:user) { create(:user, email: 'agent1@example.com') }
+    let(:inbox) { create(:inbox, account: account) }
+    let(:inbox2) { create(:inbox, account: account2) }
+    let(:current_time) { Time.current }
+
+    let(:params) do
+      {
+        type: 'agent',
+        metric: 'resolutions_count',
+        since: since_time.beginning_of_day.to_i.to_s,
+        until: current_time.end_of_day.to_i.to_s,
+        timezone_offset: timezone_offset,
+        group_by: group_by,
+        id: user.id.to_s
+      }
+    end
+    let(:group_by) { 'day' }
+    let(:since_time) { current_time - 1.day }
+    let(:timezone_offset) { nil }
+
+    before do
+      travel_to current_time
+
+      create(:account_user, account: account, user: user)
+      create(:account_user, account: account2, user: user)
+
+      conversation1 = create(:conversation, account: account, inbox: inbox, assignee: user)
+      conversation2 = create(:conversation, account: account, inbox: inbox, assignee: user)
+
+      conversation3 = create(:conversation, account: account2, inbox: inbox2, assignee: user)
+      conversation4 = create(:conversation, account: account2, inbox: inbox2, assignee: user)
+
+      create(:reporting_event,
+             name: 'conversation_resolved',
+             account: account,
+             user: user,
+             conversation: conversation1,
+             created_at: current_time - 12.hours)
+
+      create(:reporting_event,
+             name: 'conversation_resolved',
+             account: account,
+             user: user,
+             conversation: conversation2,
+             created_at: current_time - 6.hours)
+
+      create(:reporting_event,
+             name: 'conversation_resolved',
+             account: account2,
+             user: user,
+             conversation: conversation3,
+             created_at: current_time - 8.hours)
+
+      create(:reporting_event,
+             name: 'conversation_resolved',
+             account: account2,
+             user: user,
+             conversation: conversation4,
+             created_at: current_time - 4.hours)
+
+      conversation5 = create(:conversation, account: account2, inbox: inbox2, assignee: user)
+      create(:reporting_event,
+             name: 'conversation_resolved',
+             account: account2,
+             user: user,
+             conversation: conversation5,
+             created_at: current_time - 2.hours)
+    end
+
+    describe '#aggregate_value' do
+      it 'returns only resolutions performed by the user in the specified account' do
+        expect(subject.aggregate_value).to eq(2)
+      end
+
+      context 'when rollups are enabled and the agent does not exist' do
+        let(:timezone_offset) { '0' }
+
+        let(:params) do
+          super().merge(id: '999999')
+        end
+
+        before do
+          account.update!(reporting_timezone: 'Etc/UTC')
+          allow(account).to receive(:feature_enabled?).with(:report_rollup).and_return(true)
+        end
+
+        it 'raises record not found to preserve raw path behavior' do
+          expect { subject.aggregate_value }.to raise_error(ActiveRecord::RecordNotFound)
+        end
+      end
+
+      context 'when querying account2' do
+        subject { described_class.new(account2, params) }
+
+        it 'returns only resolutions for account2' do
+          expect(subject.aggregate_value).to eq(3)
+        end
+      end
+    end
+
+    describe '#timeseries' do
+      it 'filters resolutions by account' do
+        result = subject.timeseries
+        total_count = result.sum { |row| row[:value] }
+        expect(total_count).to eq(2)
+      end
+    end
+
+    describe 'account isolation' do
+      it 'does not leak data between accounts' do
+        account1_count = described_class.new(account, params).aggregate_value
+        account2_count = described_class.new(account2, params).aggregate_value
+
+        expect(account1_count).to eq(2)
+        expect(account2_count).to eq(3)
+      end
+    end
+  end
+end

spec/controllers/api/v2/accounts/summary_reports_controller_spec.rb

@@ -45,7 +45,10 @@ RSpec.describe 'Summary Reports API', type: :request do
             headers: admin.create_new_auth_token,
             as: :json
 
-        expect(V2::Reports::AgentSummaryBuilder).to have_received(:new).with(account: account, params: params)
+        expect(V2::Reports::AgentSummaryBuilder).to have_received(:new).with(
+          account: account,
+          params: params.merge(type: :agent)
+        )
         expect(agent_summary_builder).to have_received(:build)
 
         expect(response).to have_http_status(:success)
@@ -96,7 +99,10 @@ RSpec.describe 'Summary Reports API', type: :request do
             headers: admin.create_new_auth_token,
             as: :json
 
-        expect(V2::Reports::InboxSummaryBuilder).to have_received(:new).with(account: account, params: params)
+        expect(V2::Reports::InboxSummaryBuilder).to have_received(:new).with(
+          account: account,
+          params: params.merge(type: :inbox)
+        )
         expect(inbox_summary_builder).to have_received(:build)
 
         expect(response).to have_http_status(:success)
@@ -147,7 +153,10 @@ RSpec.describe 'Summary Reports API', type: :request do
             headers: admin.create_new_auth_token,
             as: :json
 
-        expect(V2::Reports::TeamSummaryBuilder).to have_received(:new).with(account: account, params: params)
+        expect(V2::Reports::TeamSummaryBuilder).to have_received(:new).with(
+          account: account,
+          params: params.merge(type: :team)
+        )
         expect(team_summary_builder).to have_received(:build)
 
         expect(response).to have_http_status(:success)

spec/finders/email_channel_finder_spec.rb

@@ -83,7 +83,7 @@ describe EmailChannelFinder do
         reply_mail.mail['bcc'] = 'test@example.com'
 
         # Configure other account IDs but not this one
-        other_account_ids = [123, 456, 789]
+        other_account_ids = [channel_email.account_id + 1, channel_email.account_id + 2, channel_email.account_id + 3]
         allow(GlobalConfigService).to receive(:load)
           .with('SKIP_INCOMING_BCC_PROCESSING', '')
           .and_return(other_account_ids.join(','))

spec/services/reports/report_metric_registry_spec.rb

@@ -0,0 +1,74 @@
+require 'rails_helper'
+
+RSpec.describe Reports::ReportMetricRegistry do
+  describe '.fetch' do
+    it 'returns the definition for raw-only count metrics' do
+      metric = described_class.fetch(:conversations_count)
+
+      expect(metric.name).to eq(:conversations_count)
+      expect(metric.count?).to be(true)
+      expect(metric.rollup_supported?).to be(false)
+      expect(metric.raw_event_name).to be_nil
+    end
+
+    it 'returns the definition for avg_resolution_time' do
+      metric = described_class.fetch(:avg_resolution_time)
+
+      expect(metric.name).to eq(:avg_resolution_time)
+      expect(metric.average?).to be(true)
+      expect(metric.raw_event_name).to eq(:conversation_resolved)
+      expect(metric.rollup_metric).to eq(:resolution_time)
+      expect(metric.summary_key).to eq(:avg_resolution_time)
+    end
+
+    it 'locks the distinct conversation strategy for bot_handoffs_count' do
+      metric = described_class.fetch(:bot_handoffs_count)
+
+      expect(metric.count?).to be(true)
+      expect(metric.raw_event_name).to eq(:conversation_bot_handoff)
+      expect(metric.rollup_metric).to eq(:bot_handoffs_count)
+      expect(metric.raw_count_strategy).to eq(:distinct_conversation)
+    end
+
+    it 'returns nil for unsupported metrics' do
+      expect(described_class.fetch(:unknown_metric)).to be_nil
+    end
+  end
+
+  describe '.supported?' do
+    it 'returns true for supported raw-only metrics' do
+      expect(described_class.supported?(:conversations_count)).to be(true)
+    end
+
+    it 'returns false for unsupported metrics' do
+      expect(described_class.supported?(:unknown_metric)).to be(false)
+    end
+  end
+
+  describe '.rollup_supported?' do
+    it 'returns true for rollup-backed metrics' do
+      expect(described_class.rollup_supported?(:reply_time)).to be(true)
+    end
+
+    it 'returns false for raw-only metrics' do
+      expect(described_class.rollup_supported?(:conversations_count)).to be(false)
+    end
+  end
+
+  describe '.summary_metrics' do
+    it 'returns the summary metric definitions in registry order' do
+      expect(
+        described_class.summary_metrics.map do |metric|
+          [metric.name, metric.summary_key, metric.aggregate, metric.raw_event_name, metric.rollup_metric]
+        end
+      ).to eq(
+        [
+          [:resolutions_count, :resolved_conversations_count, :count, :conversation_resolved, :resolutions_count],
+          [:avg_resolution_time, :avg_resolution_time, :average, :conversation_resolved, :resolution_time],
+          [:avg_first_response_time, :avg_first_response_time, :average, :first_response, :first_response],
+          [:reply_time, :avg_reply_time, :average, :reply_time, :reply_time]
+        ]
+      )
+    end
+  end
+end

theme/icons.js

@@ -148,10 +148,59 @@ export const icons = {
     width: 7,
     height: 11,
   },
+  'empty-assignee': {
+    body: `<g fill="none" stroke="currentColor">
+    <path d="M10.29 3.16394C11.4196 2.94535 12.5805 2.94535 13.71 3.16394" stroke-width="1.79999" stroke-linecap="round" stroke-linejoin="round"/><path d="M13.71 20.8362C12.5805 21.0548 11.4196 21.0548 10.29 20.8362" stroke-width="1.79999" stroke-linecap="round" stroke-linejoin="round"/><path d="M17.0479 4.54907C18.0032 5.19637 18.8251 6.02134 19.4688 6.97906" stroke-width="1.79999" stroke-linecap="round" stroke-linejoin="round"/><path d="M3.16394 13.7101C2.94535 12.5806 2.94535 11.4196 3.16394 10.2901" stroke-width="1.79999" stroke-linecap="round" stroke-linejoin="round"/><path d="M19.4515 17.0482C18.8042 18.0035 17.9792 18.8254 17.0215 19.4691" stroke-width="1.79999" stroke-linecap="round" stroke-linejoin="round"/><path d="M20.8359 10.2901C21.0545 11.4196 21.0545 12.5806 20.8359 13.7101" stroke-width="1.79999" stroke-linecap="round" stroke-linejoin="round"/><path d="M4.54883 6.95205C5.19612 5.99673 6.0211 5.17481 6.97881 4.53107" stroke-width="1.79999" stroke-linecap="round" stroke-linejoin="round"/><path d="M6.95223 19.4512C5.99692 18.8039 5.175 17.9789 4.53125 17.0212" stroke-width="1.79999" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 14.25C13.7259 14.25 15.125 12.8509 15.125 11.125C15.125 9.39911 13.7259 8 12 8C10.2741 8 8.875 9.39911 8.875 11.125C8.875 12.8509 10.2741 14.25 12 14.25Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M17 19.25C17 17.9239 16.4732 16.6521 15.5355 15.7144C14.5979 14.7767 13.3261 14.25 12 14.25C10.6739 14.25 9.40215 14.7767 8.46447 15.7144C7.52678 16.6521 7 17.9239 7 19.25" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g>`,
+    width: 24,
+    height: 24,
+  },
+  party: {
+    body: `<g fill="currentColor" stroke="none"><path d="M8.023 2.426a.6.6 0 0 1 .4.748l-.562 1.85a.6.6 0 0 1-1.15-.348l.563-1.85a.6.6 0 0 1 .75-.4M12.8 3a.6.6 0 1 0-1.2 0v.2h-.2a.6.6 0 0 0 0 1.2h.2v.2a.6.6 0 0 0 1.2 0v-.2h.2a.6.6 0 1 0 0-1.2h-.2z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M6.645 6.197a1.4 1.4 0 0 0-2.268.416L2.703 10.35a2.2 2.2 0 0 0 .452 2.456l.04.04a2.2 2.2 0 0 0 2.457.452l3.734-1.675a1.4 1.4 0 0 0 .417-2.267zm-1.172.908a.2.2 0 0 1 .324-.06l3.158 3.158a.2.2 0 0 1-.06.324l-3.734 1.674a1 1 0 0 1-1.116-.205l-.041-.04a1 1 0 0 1-.206-1.117z"/><path d="M4.6 2.4a.6.6 0 0 1 .6.6v.2h.2a.6.6 0 0 1 0 1.2h-.2v.2a.6.6 0 0 1-1.2 0v-.2h-.2a.6.6 0 1 1 0-1.2H4V3a.6.6 0 0 1 .6-.6m8.2 8.2a.6.6 0 0 0-1.2 0v.2h-.2a.6.6 0 1 0 0 1.2h.2v.2a.6.6 0 0 0 1.2 0V12h.2a.6.6 0 1 0 0-1.2h-.2zm-1.976-4.576a.6.6 0 0 0-.848-.848l-.8.8a.6.6 0 0 0 .848.848zm2.438 2.802a.6.6 0 1 0-.33-1.154l-1.874.538a.6.6 0 1 0 .33 1.153z"/></g>`,
+    width: 16,
+    height: 16,
+  },
+  'expand-list': {
+    body: `<g fill="none" stroke="currentColor"><path d="M1.333 12V4a2 2 0 0 1 2-2h1.334a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3.333a2 2 0 0 1-2-2Z" stroke-width="1.2"/><path d="M10.667 2H12a2.667 2.667 0 0 1 2.667 2.667v6.666A2.667 2.667 0 0 1 12 14h-1.333m-4-6H12m0 0-2-2m2 2-2 2" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></g>`,
+    width: 16,
+    height: 16,
+  },
+  hash: {
+    body: `<g fill="currentColor" stroke="none"><path d="M11.8125 8.3125H9.1875V5.6875H11.8125C11.9285 5.6875 12.0398 5.64141 12.1219 5.55936C12.2039 5.47731 12.25 5.36603 12.25 5.25C12.25 5.13397 12.2039 5.02269 12.1219 4.94064C12.0398 4.85859 11.9285 4.8125 11.8125 4.8125H9.1875V2.1875C9.1875 2.07147 9.14141 1.96019 9.05936 1.87814C8.97731 1.79609 8.86603 1.75 8.75 1.75C8.63397 1.75 8.52269 1.79609 8.44064 1.87814C8.35859 1.96019 8.3125 2.07147 8.3125 2.1875V4.8125H5.6875V2.1875C5.6875 2.07147 5.64141 1.96019 5.55936 1.87814C5.47731 1.79609 5.36603 1.75 5.25 1.75C5.13397 1.75 5.02269 1.79609 4.94064 1.87814C4.85859 1.96019 4.8125 2.07147 4.8125 2.1875V4.8125H2.1875C2.07147 4.8125 1.96019 4.85859 1.87814 4.94064C1.79609 5.02269 1.75 5.13397 1.75 5.25C1.75 5.36603 1.79609 5.47731 1.87814 5.55936C1.96019 5.64141 2.07147 5.6875 2.1875 5.6875H4.8125V8.3125H2.1875C2.07147 8.3125 1.96019 8.35859 1.87814 8.44064C1.79609 8.52269 1.75 8.63397 1.75 8.75C1.75 8.86603 1.79609 8.97731 1.87814 9.05936C1.96019 9.14141 2.07147 9.1875 2.1875 9.1875H4.8125V11.8125C4.8125 11.9285 4.85859 12.0398 4.94064 12.1219C5.02269 12.2039 5.13397 12.25 5.25 12.25C5.36603 12.25 5.47731 12.2039 5.55936 12.1219C5.64141 12.0398 5.6875 11.9285 5.6875 11.8125V9.1875H8.3125V11.8125C8.3125 11.9285 8.35859 12.0398 8.44064 12.1219C8.52269 12.2039 8.63397 12.25 8.75 12.25C8.86603 12.25 8.97731 12.2039 9.05936 12.1219C9.14141 12.0398 9.1875 11.9285 9.1875 11.8125V9.1875H11.8125C11.9285 9.1875 12.0398 9.14141 12.1219 9.05936C12.2039 8.97731 12.25 8.86603 12.25 8.75C12.25 8.63397 12.2039 8.52269 12.1219 8.44064C12.0398 8.35859 11.9285 8.3125 11.8125 8.3125ZM5.6875 8.3125V5.6875H8.3125V8.3125H5.6875Z" fill="currentColor"/></g>`,
+    width: 14,
+    height: 14,
+  },
+
+  /** Conversation Status Starts */
+  'status-empty': {
+    body: `<path d="M12 3a9 9 0 0 1 6.642 15.075" stroke="#60646c" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/><path d="M14.7 12 12 9.3 9.3 12m2.7 2.7V9.3" stroke="#60646c" stroke-width="1.35" stroke-linecap="round" stroke-linejoin="round"/><path d="M3.45 9.188a9 9 0 0 0-.45 2.7m.747 3.712a9 9 0 0 0 2.187 3.06M5.372 5.911a9 9 0 0 1 .802-.77M8.98 20.478a9 9 0 0 0 6.867-.342" stroke="#60646c" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>`,
+    width: 24,
+    height: 24,
+  },
+  'status-pending': {
+    body: `<mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#d9d9d9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)" stroke="#b9bbc6" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.164a9 9 0 0 1 3.42 0m0 17.672a9 9 0 0 1-3.42 0M17.048 4.55a9 9 0 0 1 2.42 2.43M3.164 13.71a9 9 0 0 1 0-3.42m16.288 6.758a9 9 0 0 1-2.43 2.421m3.814-9.179a9 9 0 0 1 0 3.42M4.549 6.952a9 9 0 0 1 2.43-2.421m-.027 14.92a9 9 0 0 1-2.42-2.43"/></g>`,
+    width: 24,
+    height: 24,
+  },
+  'status-open': {
+    body: `<mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#d9d9d9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="M4.188 18.25q2.187 2.724 5.612 3.5a.89.89 0 0 0 .837-.176.99.99 0 0 0 .363-.8q0-.35-.2-.625a.88.88 0 0 0-.55-.35q-2.75-.625-4.5-2.8T4 12t1.75-5 4.5-2.8a.88.88 0 0 0 .55-.35q.2-.275.2-.625 0-.5-.363-.8A.89.89 0 0 0 9.8 2.25q-3.424.776-5.613 3.5Q2 8.474 2 12t2.188 6.25m9.175 3.324q.361.3.837.175.825-.2 1.613-.525.787-.325 1.512-.775a.99.99 0 0 0 .45-.737.96.96 0 0 0-.3-.813 1.02 1.02 0 0 0-.588-.3.8.8 0 0 0-.612.15q-.575.375-1.212.638a8 8 0 0 1-1.313.412.88.88 0 0 0-.55.35q-.2.275-.2.625 0 .5.363.8m5.237-4.662q.05.337.3.587a.96.96 0 0 0 .813.3 1 1 0 0 0 .737-.45q.45-.724.775-1.512a11 11 0 0 0 .525-1.613.89.89 0 0 0-.175-.837.99.99 0 0 0-.8-.363q-.35 0-.625.188a.83.83 0 0 0-.35.537 8.4 8.4 0 0 1-.413 1.325 7 7 0 0 1-.637 1.225.8.8 0 0 0-.15.613m1.55-6.112q.275.199.625.2.5 0 .8-.363t.175-.838a11 11 0 0 0-.525-1.612 10.4 10.4 0 0 0-.775-1.513q-.275-.425-.738-.475a.96.96 0 0 0-.812.3 1.02 1.02 0 0 0-.3.588.88.88 0 0 0 .15.637q.375.575.637 1.213.263.637.413 1.312.075.35.35.55m-5.087-6.187q.638.262 1.212.637.3.201.638.15.336-.05.587-.3a.96.96 0 0 0 .3-.812q-.05-.463-.475-.738a10.4 10.4 0 0 0-1.512-.775A11 11 0 0 0 14.2 2.25a.89.89 0 0 0-.837.175.99.99 0 0 0-.363.8q0 .35.2.625t.55.35q.674.15 1.313.413M11.913 7" fill="#2781f6"/><path d="M12.001 12.902a.9.9 0 1 0 0-1.8.9.9 0 0 0 0 1.8" stroke="#2781f6" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></g>`,
+    width: 24,
+    height: 24,
+  },
+  'status-snoozed': {
+    body: `<path d="M10 10H14.5L10 14.5H14.5" fill="none" stroke="#FFBA1A" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/><path d="M4.1875 18.2492C5.64583 20.0658 7.51667 21.2325 9.8 21.7492C10.1167 21.8325 10.3958 21.7742 10.6375 21.5742C10.8792 21.3742 11 21.1075 11 20.7742C11 20.5408 10.9333 20.3325 10.8 20.1492C10.6667 19.9658 10.4833 19.8492 10.25 19.7992C8.41667 19.3825 6.91667 18.4492 5.75 16.9992C4.58333 15.5492 4 13.8825 4 11.9992C4 10.1158 4.58333 8.44917 5.75 6.99917C6.91667 5.54917 8.41667 4.61583 10.25 4.19917C10.4833 4.14917 10.6667 4.0325 10.8 3.84917C10.9333 3.66583 11 3.4575 11 3.22417C11 2.89083 10.8792 2.62417 10.6375 2.42417C10.3958 2.22417 10.1167 2.16583 9.8 2.24917C7.51667 2.76583 5.64583 3.9325 4.1875 5.74917C2.72917 7.56583 2 9.64917 2 11.9992C2 14.3492 2.72917 16.4325 4.1875 18.2492Z" fill="#FFBA1A"/><path d="M13.3625 21.5742C13.6042 21.7742 13.8833 21.8325 14.2 21.7492C14.75 21.6158 15.2875 21.4408 15.8125 21.2242C16.3375 21.0075 16.8417 20.7492 17.325 20.4492C17.5917 20.2658 17.7417 20.02 17.775 19.7117C17.8083 19.4033 17.7083 19.1325 17.475 18.8992C17.3083 18.7325 17.1125 18.6325 16.8875 18.5992C16.6625 18.5658 16.4583 18.6158 16.275 18.7492C15.8917 18.9992 15.4875 19.2117 15.0625 19.3867C14.6375 19.5617 14.2 19.6992 13.75 19.7992C13.5167 19.8492 13.3333 19.9658 13.2 20.1492C13.0667 20.3325 13 20.5408 13 20.7742C13 21.1075 13.1208 21.3742 13.3625 21.5742Z" fill="#FFBA1A"/><path d="M18.6 16.9117C18.6333 17.1367 18.7333 17.3325 18.9 17.4992C19.1333 17.7325 19.4042 17.8325 19.7125 17.7992C20.0208 17.7658 20.2667 17.6158 20.45 17.3492C20.75 16.8658 21.0083 16.3617 21.225 15.8367C21.4417 15.3117 21.6167 14.7742 21.75 14.2242C21.8333 13.9075 21.775 13.6283 21.575 13.3867C21.375 13.145 21.1083 13.0242 20.775 13.0242C20.5417 13.0242 20.3333 13.0867 20.15 13.2117C19.9667 13.3367 19.85 13.5158 19.8 13.7492C19.7 14.1992 19.5625 14.6408 19.3875 15.0742C19.2125 15.5075 19 15.9158 18.75 16.2992C18.6167 16.4825 18.5667 16.6867 18.6 16.9117Z" fill="#FFBA1A"/><path d="M20.15 10.7992C20.3333 10.9325 20.5417 10.9992 20.775 10.9992C21.1083 10.9992 21.375 10.8783 21.575 10.6367C21.775 10.395 21.8333 10.1158 21.75 9.79917C21.6167 9.24917 21.4417 8.71167 21.225 8.18667C21.0083 7.66167 20.75 7.1575 20.45 6.67417C20.2667 6.39083 20.0208 6.2325 19.7125 6.19917C19.4042 6.16583 19.1333 6.26583 18.9 6.49917C18.7333 6.66583 18.6333 6.86167 18.6 7.08667C18.5667 7.31167 18.6167 7.52417 18.75 7.72417C19 8.1075 19.2125 8.51167 19.3875 8.93667C19.5625 9.36167 19.7 9.79917 19.8 10.2492C19.85 10.4825 19.9667 10.6658 20.15 10.7992Z" fill="#FFBA1A"/><path d="M15.0625 4.61167C15.4875 4.78667 15.8917 4.99917 16.275 5.24917C16.475 5.3825 16.6875 5.4325 16.9125 5.39917C17.1375 5.36583 17.3333 5.26583 17.5 5.09917C17.7333 4.86583 17.8333 4.595 17.8 4.28667C17.7667 3.97833 17.6083 3.7325 17.325 3.54917C16.8417 3.24917 16.3375 2.99083 15.8125 2.77417C15.2875 2.5575 14.75 2.3825 14.2 2.24917C13.8833 2.16583 13.6042 2.22417 13.3625 2.42417C13.1208 2.62417 13 2.89083 13 3.22417C13 3.4575 13.0667 3.66583 13.2 3.84917C13.3333 4.0325 13.5167 4.14917 13.75 4.19917C14.2 4.29917 14.6375 4.43667 15.0625 4.61167Z" fill="#FFBA1A"/><path d="M11.9128 7.00075C11.9418 7.00025 11.9709 7 12 7C12.0072 7 12.0144 7.00002 12.0215 7.00005C12.0062 6.99946 11.9907 6.99917 11.975 6.99917C11.954 6.99917 11.9333 6.99969 11.9128 7.00075Z" fill="#FFBA1A"/>`,
+    width: 24,
+    height: 24,
+  },
+  'status-resolved': {
+    body: `<path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="#0D9B8A" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" fill="none"/><path d="M9.2998 12L11.0998 13.8L14.6998 10.2" stroke="#0D9B8A" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" fill="none"/>`,
+    width: 24,
+    height: 24,
+  },
+  /** Ends */
 
   /** Conversation Priority Starts */
   'priority-empty': {
-    body: `<mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#d9d9d9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)" fill="#d9d9d9"><rect x="4" y="12" width="4" height="8" rx="2"/><rect x="10" y="8" width="4" height="12" rx="2"/><rect x="16" y="4" width="4" height="16" rx="2"/></g>`,
+    body: `<mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="currentColor" d="M0 0h24v24H0z"/></mask><g mask="url(#a)" fill="currentColor"><rect x="4" y="12" width="4" height="8" rx="2"/><rect x="10" y="8" width="4" height="12" rx="2"/><rect x="16" y="4" width="4" height="16" rx="2"/></g>`,
     width: 24,
     height: 24,
   },