feat: Redesign conversation card component UI (#12957)

app/javascript/dashboard/assets/scss/_next-colors.scss

@@ -120,6 +120,8 @@
     --card-color: 255 255 255;
     --overlay: 0, 0, 0, 0.12;
     --overlay-avatar: 255, 255, 255, 0.67;
+    --button-color: 255 255 255;
+    --button-hover-color: 255, 255, 255, 0.2;
 
     --alpha-1: 215, 215, 215, 0.22;
     --alpha-2: 196, 197, 198, 0.22;
@@ -248,6 +250,8 @@
     --card-color: 28 30 34;
     --overlay: 0, 0, 0, 0.4;
     --overlay-avatar: 0, 0, 0, 0.05;
+    --button-color: 42 43 51;
+    --button-hover-color: 0, 0, 0, 0.15;
 
     --alpha-1: 35, 36, 42, 0.8;
     --alpha-2: 147, 153, 176, 0.12;

app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactHistory.vue

@@ -3,6 +3,7 @@ import { computed } from 'vue';
 import { useMapGetter } from 'dashboard/composables/store';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
+import { useSnakeCase } from 'dashboard/composables/useTransformKeys';
 
 import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 import ConversationCard from 'dashboard/components-next/Conversation/ConversationCard/ConversationCard.vue';
@@ -13,11 +14,6 @@ const route = useRoute();
 const conversations = useMapGetter(
   'contactConversations/getAllConversationsByContactId'
 );
-const contactsById = useMapGetter('contacts/getContactById');
-const stateInbox = useMapGetter('inboxes/getInboxById');
-const accountLabels = useMapGetter('labels/getLabels');
-
-const accountLabelsValue = computed(() => accountLabels.value);
 
 const uiFlags = useMapGetter('contactConversations/getUIFlags');
 const isFetching = computed(() => uiFlags.value.isFetching);
@@ -36,16 +32,17 @@ const contactConversations = computed(() =>
   </div>
   <div
     v-else-if="contactConversations.length > 0"
-    class="px-6 py-4 divide-y divide-n-strong [&>*:hover]:!border-y-transparent [&>*:hover+*]:!border-t-transparent"
+    class="px-6 py-4 divide-y divide-n-weak"
   >
     <ConversationCard
       v-for="conversation in contactConversations"
       :key="conversation.id"
-      :conversation="conversation"
-      :contact="contactsById(conversation.meta.sender.id)"
-      :state-inbox="stateInbox(conversation.inboxId)"
-      :account-labels="accountLabelsValue"
-      class="rounded-none hover:rounded-xl hover:bg-n-alpha-1 dark:hover:bg-n-alpha-3"
+      :chat="useSnakeCase(conversation, { deep: true })"
+      enable-context-menu
+      compact
+      show-assignee
+      :allowed-context-menu-options="['open-new-tab', 'copy-link']"
+      :enable-selection="false"
     />
   </div>
   <p v-else class="px-6 py-10 text-sm leading-6 text-center text-n-slate-11">

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 self-start"
+    @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-sm font-420"
+      :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/CardHeader.vue

@@ -0,0 +1,23 @@
+<script setup>
+import TimeAgo from 'dashboard/components/ui/TimeAgo.vue';
+
+defineProps({
+  contactName: { type: String, required: true },
+  timestamp: { type: Number, required: true },
+  createdAt: { type: Number, required: true },
+});
+</script>
+
+<template>
+  <div class="grid grid-cols-[1fr_auto] items-center gap-2 h-5">
+    <h4 class="text-sm my-0 capitalize truncate text-n-slate-12 font-medium">
+      {{ contactName }}
+    </h4>
+
+    <TimeAgo
+      :last-activity-timestamp="timestamp"
+      :created-at-timestamp="createdAt"
+      class="font-440 !text-xs shrink-0"
+    />
+  </div>
+</template>

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

@@ -1,95 +1,167 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, inject, nextTick, useSlots, watch } 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';
 
 const props = defineProps({
   conversationLabels: {
     type: Array,
     required: true,
   },
-  accountLabels: {
-    type: Array,
-    required: true,
+  disableToggle: {
+    type: Boolean,
+    default: false,
   },
 });
 
-const WIDTH_CONFIG = Object.freeze({
-  DEFAULT_WIDTH: 80,
-  CHAR_WIDTH: {
-    SHORT: 8, // For labels <= 5 chars
-    LONG: 6, // For labels > 5 chars
-  },
-  BASE_WIDTH: 12, // dot + gap
-  THRESHOLD: 5, // character length threshold
-});
+const slots = useSlots();
+const { t } = useI18n();
 
-const containerRef = ref(null);
-const maxLabels = ref(1);
+const accountLabels = useMapGetter('labels/getLabels');
 
 const activeLabels = computed(() => {
-  const labelSet = new Set(props.conversationLabels);
-  return props.accountLabels?.filter(({ title }) => labelSet.has(title));
+  return accountLabels.value.filter(({ title }) =>
+    props.conversationLabels.includes(title)
+  );
 });
 
-const calculateLabelWidth = ({ title = '' }) => {
-  const charWidth =
-    title.length > WIDTH_CONFIG.THRESHOLD
-      ? WIDTH_CONFIG.CHAR_WIDTH.LONG
-      : WIDTH_CONFIG.CHAR_WIDTH.SHORT;
+const showAllLabels = ref(false);
+const showExpandLabelButton = ref(false);
+const labelPosition = ref(-1);
+const labelContainer = ref(null);
 
-  return title.length * charWidth + WIDTH_CONFIG.BASE_WIDTH;
-};
-
-const getAverageWidth = labels => {
-  if (!labels.length) return WIDTH_CONFIG.DEFAULT_WIDTH;
-
-  const totalWidth = labels.reduce(
-    (sum, label) => sum + calculateLabelWidth(label),
-    0
-  );
-
-  return totalWidth / labels.length;
-};
-
-const visibleLabels = computed(() =>
-  activeLabels.value?.slice(0, maxLabels.value)
+// Show if there are labels OR if before slot exists
+const showSection = computed(
+  () => activeLabels.value.length > 0 || !!slots.before
 );
 
-const updateVisibleLabels = () => {
-  if (!containerRef.value) return;
+const computeVisibleLabelPosition = () => {
+  const container = labelContainer.value;
+  if (!container || activeLabels.value.length === 0) {
+    showExpandLabelButton.value = false;
+    return;
+  }
 
-  const containerWidth = containerRef.value.offsetWidth;
-  const avgWidth = getAverageWidth(activeLabels.value);
+  const labels = container.querySelectorAll('[data-label]');
+  if (labels.length === 0) {
+    showExpandLabelButton.value = false;
+    return;
+  }
 
-  maxLabels.value = Math.max(1, Math.floor(containerWidth / avgWidth));
+  // 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 });
+
+// Recalculate when parent triggers (e.g., tab changes in ChatList)
+// Needed because inbox conversation view shows metadata inside CardLabels, affecting available width
+const recalculateKey = inject('recalculateLabelsKey', null);
+
+if (recalculateKey) {
+  watch(recalculateKey, () => nextTick(throttledCalculate));
+}
+
+const hiddenLabelsCount = computed(() => {
+  if (!showExpandLabelButton.value || showAllLabels.value) return 0;
+  return activeLabels.value.length - labelPosition.value - 1;
+});
+
+const hiddenLabelsTooltip = computed(() => {
+  if (!props.disableToggle || !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
-    ref="containerRef"
-    v-resize="updateVisibleLabels"
-    class="flex items-center gap-2.5 w-full min-w-0 h-6 overflow-hidden"
+    v-if="showSection"
+    ref="labelContainer"
+    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 }"
   >
-    <template v-for="(label, index) in visibleLabels" :key="label.id">
-      <div
-        class="flex items-center gap-1.5 min-w-0"
-        :class="[
-          index !== visibleLabels.length - 1
-            ? 'flex-shrink-0 text-ellipsis'
-            : 'flex-shrink',
-        ]"
-      >
-        <div
-          :style="{ backgroundColor: label.color }"
-          class="size-1.5 rounded-full flex-shrink-0"
-        />
-        <span
-          class="text-sm text-n-slate-10 whitespace-nowrap"
-          :class="{ truncate: index === visibleLabels.length - 1 }"
-        >
-          {{ label.title }}
-        </span>
-      </div>
-    </template>
+    <slot name="before" />
+
+    <div
+      v-for="(label, index) in activeLabels"
+      :key="label ? label.id : index"
+      data-label
+      :title="label.description"
+      class="bg-n-button-color px-1.5 h-6 gap-1 rounded-md -outline-offset-1 outline outline-1 outline-n-container inline-flex items-center flex-shrink-0"
+      :class="{
+        'invisible absolute': !showAllLabels && index > labelPosition,
+      }"
+    >
+      <span
+        class="rounded-sm size-1.5 flex-shrink-0"
+        :style="{ background: label.color }"
+      />
+      <span class="font-440 text-xs text-n-slate-12 whitespace-nowrap">
+        {{ label.title }}
+      </span>
+    </div>
+    <Button
+      v-if="showExpandLabelButton"
+      v-tooltip.top="{
+        content: tooltipText,
+        delay: { show: 1000, hide: 0 },
+      }"
+      :label="
+        !showAllLabels && hiddenLabelsCount > 0 ? `+${hiddenLabelsCount}` : ''
+      "
+      xs
+      slate
+      :no-animation="disableToggle"
+      :icon="
+        !showAllLabels && hiddenLabelsCount > 0 ? '' : 'i-lucide-chevron-left'
+      "
+      class="!py-0 !px-1.5 flex-shrink-0 !rounded-md !bg-n-button-color -outline-offset-1"
+      :class="{ 'cursor-default': disableToggle }"
+      @click="onShowLabels"
+    />
   </div>
+  <template v-else />
 </template>

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

@@ -1,67 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
-
-import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
-
-const props = defineProps({
-  conversation: {
-    type: Object,
-    required: true,
-  },
-});
-
-const { t } = useI18n();
-
-const { getPlainText } = useMessageFormatter();
-
-const lastNonActivityMessageContent = computed(() => {
-  const { lastNonActivityMessage = {}, customAttributes = {} } =
-    props.conversation;
-  const { email: { subject } = {} } = customAttributes;
-  return getPlainText(
-    subject || lastNonActivityMessage?.content || t('CHAT_LIST.NO_CONTENT')
-  );
-});
-
-const assignee = computed(() => {
-  const { meta: { assignee: agent = {} } = {} } = props.conversation;
-  return {
-    name: agent.name ?? agent.availableName,
-    thumbnail: agent.thumbnail,
-    status: agent.availabilityStatus,
-  };
-});
-
-const unreadMessagesCount = computed(() => {
-  const { unreadCount } = props.conversation;
-  return unreadCount;
-});
-</script>
-
-<template>
-  <div class="flex items-end w-full gap-2 pb-1">
-    <p class="w-full mb-0 text-sm leading-7 text-n-slate-12 line-clamp-2">
-      {{ lastNonActivityMessageContent }}
-    </p>
-    <div class="flex items-center flex-shrink-0 gap-2 pb-2">
-      <Avatar
-        v-if="assignee.name"
-        :name="assignee.name"
-        :src="assignee.thumbnail"
-        :size="20"
-        :status="assignee.status"
-        rounded-full
-      />
-      <div
-        v-if="unreadMessagesCount > 0"
-        class="inline-flex items-center justify-center rounded-full size-5 bg-n-brand"
-      >
-        <span class="text-xs font-semibold text-white">
-          {{ unreadMessagesCount }}
-        </span>
-      </div>
-    </div>
-  </div>
-</template>

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

@@ -1,108 +0,0 @@
-<script setup>
-import { computed, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
-
-import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
-import CardLabels from 'dashboard/components-next/Conversation/ConversationCard/CardLabels.vue';
-import SLACardLabel from 'dashboard/components-next/Conversation/ConversationCard/SLACardLabel.vue';
-
-const props = defineProps({
-  conversation: {
-    type: Object,
-    required: true,
-  },
-  accountLabels: {
-    type: Array,
-    required: true,
-  },
-});
-
-const { t } = useI18n();
-
-const slaCardLabelRef = ref(null);
-
-const { getPlainText } = useMessageFormatter();
-
-const lastNonActivityMessageContent = computed(() => {
-  const { lastNonActivityMessage = {}, customAttributes = {} } =
-    props.conversation;
-  const { email: { subject } = {} } = customAttributes;
-  return getPlainText(
-    subject || lastNonActivityMessage?.content || t('CHAT_LIST.NO_CONTENT')
-  );
-});
-
-const assignee = computed(() => {
-  const { meta: { assignee: agent = {} } = {} } = props.conversation;
-  return {
-    name: agent.name ?? agent.availableName,
-    thumbnail: agent.thumbnail,
-    status: agent.availabilityStatus,
-  };
-});
-
-const unreadMessagesCount = computed(() => {
-  const { unreadCount } = props.conversation;
-  return unreadCount;
-});
-
-const hasSlaThreshold = computed(() => {
-  return (
-    slaCardLabelRef.value?.hasSlaThreshold && props.conversation?.slaPolicyId
-  );
-});
-
-defineExpose({
-  hasSlaThreshold,
-});
-</script>
-
-<template>
-  <div class="flex flex-col w-full gap-1">
-    <div class="flex items-center justify-between w-full gap-2 py-1 h-7">
-      <p class="mb-0 text-sm leading-7 text-n-slate-12 line-clamp-1">
-        {{ lastNonActivityMessageContent }}
-      </p>
-
-      <div
-        v-if="unreadMessagesCount > 0"
-        class="inline-flex items-center justify-center flex-shrink-0 rounded-full size-5 bg-n-brand"
-      >
-        <span class="text-xs font-semibold text-white">
-          {{ unreadMessagesCount }}
-        </span>
-      </div>
-    </div>
-
-    <div
-      class="grid items-center gap-2.5 h-7"
-      :class="
-        hasSlaThreshold
-          ? 'grid-cols-[auto_auto_1fr_20px]'
-          : 'grid-cols-[1fr_20px]'
-      "
-    >
-      <SLACardLabel
-        v-show="hasSlaThreshold"
-        ref="slaCardLabelRef"
-        :conversation="conversation"
-      />
-      <div v-if="hasSlaThreshold" class="w-px h-3 bg-n-slate-4" />
-      <div class="overflow-hidden">
-        <CardLabels
-          :conversation-labels="conversation.labels"
-          :account-labels="accountLabels"
-        />
-      </div>
-      <Avatar
-        v-if="assignee.name"
-        :name="assignee.name"
-        :src="assignee.thumbnail"
-        :size="20"
-        :status="assignee.status"
-        rounded-full
-      />
-    </div>
-  </div>
-</template>

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

@@ -0,0 +1,108 @@
+<script setup>
+import { computed, useTemplateRef } from 'vue';
+import Avatar from 'next/avatar/Avatar.vue';
+import InboxName from 'dashboard/components-next/Conversation/InboxName.vue';
+import CardPriorityIcon from './CardPriorityIcon.vue';
+import CardStatusIcon from './CardStatusIcon.vue';
+import SLACardLabel from 'dashboard/components-next/Conversation/Sla/SLACardLabel.vue';
+
+const props = defineProps({
+  chat: { type: Object, required: true },
+  inbox: { type: Object, required: true },
+  showInboxName: { type: Boolean, default: false },
+  showAssignee: { type: Boolean, default: false },
+  assignee: { type: Object, default: () => ({}) },
+  inline: { type: Boolean, default: false },
+  isLabelsEmpty: { type: Boolean, default: false },
+});
+
+const slaCardLabel = useTemplateRef('slaCardLabel');
+
+const hasSlaPolicyId = computed(
+  () => props.chat?.sla_policy_id || slaCardLabel.value?.hasSlaThreshold
+);
+
+const showSection = computed(() => {
+  if (props.inline) {
+    return (
+      hasSlaPolicyId.value ||
+      props.chat.priority ||
+      (props.showAssignee && props.assignee.name)
+    );
+  }
+  return (
+    props.showInboxName ||
+    (props.showAssignee && props.assignee.name) ||
+    props.chat.priority ||
+    props.chat.status ||
+    hasSlaPolicyId.value
+  );
+});
+</script>
+
+<template>
+  <!-- Full meta section (when not inline) -->
+  <div
+    v-if="showSection && !inline"
+    class="flex items-center justify-between min-w-0 gap-8 h-6 mb-1"
+  >
+    <div class="flex-1 min-w-0 flex items-center gap-0.5">
+      <InboxName v-if="showInboxName" :inbox="inbox" class="min-w-0" />
+      <div
+        v-if="showInboxName && hasSlaPolicyId"
+        class="rounded-lg h-3 w-px bg-n-strong mx-1"
+      />
+      <SLACardLabel v-if="hasSlaPolicyId" ref="slaCardLabel" :chat="chat" />
+    </div>
+    <div class="flex items-center gap-1.5 flex-shrink-0">
+      <CardPriorityIcon
+        v-if="chat.priority"
+        :priority="chat.priority"
+        class="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
+        rounded-full
+      />
+      <CardStatusIcon v-if="chat.status" :status="chat.status" />
+    </div>
+  </div>
+
+  <!-- Inline meta section (compact mode for cases in inbox and label filter view) -->
+  <div
+    v-else-if="showSection && inline"
+    data-before-slot
+    class="flex items-center gap-1.5 flex-shrink-0"
+  >
+    <div class="flex items-center gap-1.5">
+      <CardPriorityIcon
+        v-if="chat.priority"
+        :priority="chat.priority"
+        class="flex-shrink-0"
+      />
+      <Avatar
+        v-if="showAssignee && assignee.name"
+        v-tooltip.top="assignee.name"
+        :name="assignee.name"
+        :src="assignee.thumbnail"
+        :size="14"
+        :status="assignee.availability_status"
+        hide-offline-status
+        rounded-full
+      />
+      <CardStatusIcon v-if="chat.status" :status="chat.status" />
+    </div>
+    <div v-if="hasSlaPolicyId" class="rounded-lg h-2 w-px bg-n-strong mx-0.5" />
+    <SLACardLabel v-if="hasSlaPolicyId" ref="slaCardLabel" :chat="chat" />
+    <div v-if="!isLabelsEmpty" class="rounded-lg h-2 w-px bg-n-strong mx-0.5" />
+  </div>
+</template>

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

@@ -1,207 +1,42 @@
 <script setup>
+import { computed } from 'vue';
 import { CONVERSATION_PRIORITY } from 'shared/constants/messages';
 
-defineProps({
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+
+const props = defineProps({
   priority: {
     type: String,
     default: '',
   },
+  showEmpty: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const icons = {
+  [CONVERSATION_PRIORITY.URGENT]: 'i-woot-priority-urgent',
+  [CONVERSATION_PRIORITY.HIGH]: 'i-woot-priority-high',
+  [CONVERSATION_PRIORITY.MEDIUM]: 'i-woot-priority-medium',
+  [CONVERSATION_PRIORITY.LOW]: 'i-woot-priority-low',
+};
+
+const iconName = computed(() => {
+  if (props.priority && icons[props.priority]) {
+    return icons[props.priority];
+  }
+  return props.showEmpty ? 'i-woot-priority-empty' : '';
 });
 </script>
 
-<!-- eslint-disable vue/no-static-inline-styles -->
 <template>
-  <div class="inline-flex items-center justify-center rounded-md">
-    <!-- Low Priority -->
-    <svg
-      v-if="priority === CONVERSATION_PRIORITY.LOW"
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <mask
-        id="mask0_2030_12879"
-        style="mask-type: alpha"
-        maskUnits="userSpaceOnUse"
-        x="0"
-        y="0"
-        width="20"
-        height="20"
-      >
-        <rect width="20" height="20" fill="#D9D9D9" />
-      </mask>
-      <g mask="url(#mask0_2030_12879)">
-        <rect
-          x="3.33301"
-          y="10"
-          width="3.33333"
-          height="6.66667"
-          rx="1.66667"
-          class="fill-n-amber-9"
-        />
-        <rect
-          x="8.33301"
-          y="6.6665"
-          width="3.33333"
-          height="10"
-          rx="1.66667"
-          class="fill-n-slate-6"
-        />
-        <rect
-          x="13.333"
-          y="3.3335"
-          width="3.33333"
-          height="13.3333"
-          rx="1.66667"
-          class="fill-n-slate-6"
-        />
-      </g>
-    </svg>
-
-    <!-- Medium Priority  -->
-    <svg
-      v-if="priority === CONVERSATION_PRIORITY.MEDIUM"
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <mask
-        id="mask0_2030_12879"
-        style="mask-type: alpha"
-        maskUnits="userSpaceOnUse"
-        x="0"
-        y="0"
-        width="20"
-        height="20"
-      >
-        <rect width="20" height="20" fill="#D9D9D9" />
-      </mask>
-      <g mask="url(#mask0_2030_12879)">
-        <rect
-          x="3.33301"
-          y="10"
-          width="3.33333"
-          height="6.66667"
-          rx="1.66667"
-          class="fill-n-amber-9"
-        />
-        <rect
-          x="8.33301"
-          y="6.6665"
-          width="3.33333"
-          height="10"
-          rx="1.66667"
-          class="fill-n-amber-9"
-        />
-        <rect
-          x="13.333"
-          y="3.3335"
-          width="3.33333"
-          height="13.3333"
-          rx="1.66667"
-          class="fill-n-slate-6"
-        />
-      </g>
-    </svg>
-
-    <!-- High Priority -->
-    <svg
-      v-if="priority === CONVERSATION_PRIORITY.HIGH"
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <mask
-        id="mask0_2030_12879"
-        style="mask-type: alpha"
-        maskUnits="userSpaceOnUse"
-        x="0"
-        y="0"
-        width="20"
-        height="20"
-      >
-        <rect width="20" height="20" fill="#D9D9D9" />
-      </mask>
-      <g mask="url(#mask0_2030_12879)">
-        <rect
-          x="3.33301"
-          y="10"
-          width="3.33333"
-          height="6.66667"
-          rx="1.66667"
-          class="fill-n-amber-9"
-        />
-        <rect
-          x="8.33301"
-          y="6.6665"
-          width="3.33333"
-          height="10"
-          rx="1.66667"
-          class="fill-n-amber-9"
-        />
-        <rect
-          x="13.333"
-          y="3.3335"
-          width="3.33333"
-          height="13.3333"
-          rx="1.66667"
-          class="fill-n-amber-9"
-        />
-      </g>
-    </svg>
-
-    <!-- Urgent Priority -->
-    <svg
-      v-if="priority === CONVERSATION_PRIORITY.URGENT"
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <mask
-        id="mask0_2030_12879"
-        style="mask-type: alpha"
-        maskUnits="userSpaceOnUse"
-        x="0"
-        y="0"
-        width="20"
-        height="20"
-      >
-        <rect width="20" height="20" fill="#D9D9D9" />
-      </mask>
-      <g mask="url(#mask0_2030_12879)">
-        <rect
-          x="3.33301"
-          y="10"
-          width="3.33333"
-          height="6.66667"
-          rx="1.66667"
-          class="fill-n-ruby-9"
-        />
-        <rect
-          x="8.33301"
-          y="6.6665"
-          width="3.33333"
-          height="10"
-          rx="1.66667"
-          class="fill-n-ruby-9"
-        />
-        <rect
-          x="13.333"
-          y="3.3335"
-          width="3.33333"
-          height="13.3333"
-          rx="1.66667"
-          class="fill-n-ruby-9"
-        />
-      </g>
-    </svg>
-  </div>
+  <Icon
+    v-tooltip.top="{
+      content: priority,
+      delay: { show: 500, hide: 0 },
+    }"
+    :icon="iconName"
+    class="size-4 text-n-slate-5"
+  />
 </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"
+  />
+</template>

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

@@ -1,477 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import ConversationCard from './ConversationCard.vue';
-
-// Base conversation object
-const conversationWithoutMeta = {
-  meta: {
-    sender: {
-      additionalAttributes: {},
-      availabilityStatus: 'offline',
-      email: 'candice@chatwoot.com',
-      id: 29,
-      name: 'Candice Matherson',
-      phone_number: '+918585858585',
-      identifier: null,
-      thumbnail: '',
-      customAttributes: {
-        linkContact: 'https://apple.com',
-        listContact: 'Not spam',
-        textContact: 'hey',
-        checkboxContact: true,
-      },
-      last_activity_at: 1712127410,
-      created_at: 1712127389,
-    },
-    channel: 'Channel::Email',
-    assignee: {
-      id: 1,
-      accountId: 2,
-      availabilityStatus: 'online',
-      autoOffline: false,
-      confirmed: true,
-      email: 'sivin@chatwoot.com',
-      availableName: 'Sivin',
-      name: 'Sivin',
-      role: 'administrator',
-      thumbnail: '',
-      customRoleId: null,
-    },
-    hmacVerified: false,
-  },
-  id: 38,
-  messages: [
-    {
-      id: 3597,
-      content: 'Sivin set the priority to low',
-      accountId: 2,
-      inboxId: 7,
-      conversationId: 38,
-      messageType: 2,
-      createdAt: 1730885168,
-      updatedAt: '2024-11-06T09:26:08.565Z',
-      private: false,
-      status: 'sent',
-      source_id: null,
-      contentType: 'text',
-      contentAttributes: {},
-      senderType: null,
-      senderId: null,
-      externalSourceIds: {},
-      additionalAttributes: {},
-      processedMessageContent: 'Sivin set the priority to low',
-      sentiment: {},
-      conversation: {
-        assigneeId: 1,
-        unreadCount: 0,
-        lastActivityAt: 1730885168,
-        contactInbox: {
-          sourceId: 'candice@chatwoot.com',
-        },
-      },
-    },
-  ],
-  accountId: 2,
-  uuid: '21bd8638-a711-4080-b4ac-7fda1bc71837',
-  additionalAttributes: {
-    mail_subject: 'Test email',
-  },
-  agentLastSeenAt: 0,
-  assigneeLastSeenAt: 0,
-  canReply: true,
-  contactLastSeenAt: 0,
-  customAttributes: {},
-  inboxId: 7,
-  labels: [],
-  status: 'open',
-  createdAt: 1730836533,
-  timestamp: 1730885168,
-  firstReplyCreatedAt: 1730836533,
-  unreadCount: 0,
-  lastNonActivityMessage: {
-    id: 3591,
-    content:
-      'Hello, I bought some paper but they did not come with the indices as we had assumed. Was there a change in the product line?',
-    account_id: 2,
-    inbox_id: 7,
-    conversation_id: 38,
-    message_type: 1,
-    created_at: 1730836533,
-    updated_at: '2024-11-05T19:55:37.158Z',
-    private: false,
-    status: 'sent',
-    source_id:
-      'conversation/21bd8638-a711-4080-b4ac-7fda1bc71837/messages/3591@paperlayer.test',
-    content_type: 'text',
-    content_attributes: {
-      cc_emails: ['test@gmail.com'],
-      bcc_emails: [],
-      to_emails: [],
-    },
-    sender_type: 'User',
-    sender_id: 1,
-    external_source_ids: {},
-    additional_attributes: {},
-    processed_message_content:
-      'Hello, I bought some paper but they did not come with the indices as we had assumed. Was there a change in the product line?',
-    sentiment: {},
-    conversation: {
-      assignee_id: 1,
-      unread_count: 0,
-      last_activity_at: 1730885168,
-      contact_inbox: {
-        source_id: 'candice@chatwoot.com',
-      },
-    },
-    sender: {
-      id: 1,
-      name: 'Sivin',
-      available_name: 'Sivin',
-      avatar_url: '',
-      type: 'user',
-      availability_status: 'online',
-      thumbnail: '',
-    },
-  },
-  lastActivityAt: 1730885168,
-  priority: 'low',
-  waitingSince: 0,
-  slaPolicyId: null,
-  slaEvents: [],
-};
-
-const conversationWithMeta = {
-  meta: {
-    sender: {
-      additionalAttributes: {},
-      availabilityStatus: 'offline',
-      email: 'willy@chatwoot.com',
-      id: 29,
-      name: 'Willy Castelot',
-      phoneNumber: '+918585858585',
-      identifier: null,
-      thumbnail: '',
-      customAttributes: {
-        linkContact: 'https://apple.com',
-        listContact: 'Not spam',
-        textContact: 'hey',
-        checkboxContact: true,
-      },
-      lastActivityAt: 1712127410,
-      createdAt: 1712127389,
-    },
-    channel: 'Channel::Email',
-    assignee: {
-      id: 1,
-      accountId: 2,
-      availabilityStatus: 'online',
-      autoOffline: false,
-      confirmed: true,
-      email: 'sivin@chatwoot.com',
-      availableName: 'Sivin',
-      name: 'Sivin',
-      role: 'administrator',
-      thumbnail: '',
-      customRoleId: null,
-    },
-    hmacVerified: false,
-  },
-  id: 37,
-  messages: [
-    {
-      id: 3599,
-      content:
-        'If you want to buy our premium supplies,we can offer you a 20% discount! They come with indices and lazer beams!',
-      accountId: 2,
-      inboxId: 7,
-      conversationId: 37,
-      messageType: 1,
-      createdAt: 1730885428,
-      updatedAt: '2024-11-06T09:30:30.619Z',
-      private: false,
-      status: 'sent',
-      sourceId:
-        'conversation/53df668d-329d-420e-8fe9-980cb0e4d63c/messages/3599@paperlayer.test',
-      contentType: 'text',
-      contentAttributes: {
-        ccEmails: [],
-        bccEmails: [],
-        toEmails: [],
-      },
-      sender_type: 'User',
-      senderId: 1,
-      externalSourceIds: {},
-      additionalAttributes: {},
-      processedMessageContent:
-        'If you want to buy our premium supplies,we can offer you a 20% discount! They come with indices and lazer beams!',
-      sentiment: {},
-      conversation: {
-        assignee_id: 1,
-        unread_count: 0,
-        last_activity_at: 1730885428,
-        contact_inbox: {
-          source_id: 'candice@chatwoot.com',
-        },
-      },
-      sender: {
-        id: 1,
-        name: 'Sivin',
-        availableName: 'Sivin',
-        avatarUrl: '',
-        type: 'user',
-        availabilityStatus: 'online',
-        thumbnail: '',
-      },
-    },
-  ],
-  accountId: 2,
-  uuid: '53df668d-329d-420e-8fe9-980cb0e4d63c',
-  additionalAttributes: {
-    mail_subject: 'we',
-  },
-  agentLastSeenAt: 1730885428,
-  assigneeLastSeenAt: 1730885428,
-  canReply: true,
-  contactLastSeenAt: 0,
-  customAttributes: {},
-  inboxId: 7,
-  labels: [
-    'billing',
-    'delivery',
-    'lead',
-    'premium-customer',
-    'software',
-    'ops-handover',
-  ],
-  muted: false,
-  snoozedUntil: null,
-  status: 'open',
-  createdAt: 1722487645,
-  timestamp: 1730885428,
-  firstReplyCreatedAt: 1722487645,
-  unreadCount: 0,
-  lastNonActivityMessage: {
-    id: 3599,
-    content:
-      'If you want to buy our premium supplies,we can offer you a 20% discount! They come with indices and lazer beams!',
-    account_id: 2,
-    inbox_id: 7,
-    conversation_id: 37,
-    message_type: 1,
-    created_at: 1730885428,
-    updated_at: '2024-11-06T09:30:30.619Z',
-    private: false,
-    status: 'sent',
-    source_id:
-      'conversation/53df668d-329d-420e-8fe9-980cb0e4d63c/messages/3599@paperlayer.test',
-    content_type: 'text',
-    content_attributes: {
-      cc_emails: [],
-      bcc_emails: [],
-      to_emails: [],
-    },
-    sender_type: 'User',
-    sender_id: 1,
-    external_source_ids: {},
-    additional_attributes: {},
-    processed_message_content:
-      'If you want to buy our premium supplies,we can offer you a 20% discount! They come with indices and lazer beams!',
-    sentiment: {},
-    conversation: {
-      assignee_id: 1,
-      unread_count: 2,
-      last_activity_at: 1730885428,
-      contact_inbox: {
-        source_id: 'willy@chatwoot.com',
-      },
-    },
-    sender: {
-      id: 1,
-      name: 'Sivin',
-      available_name: 'Sivin',
-      avatar_url: '',
-      type: 'user',
-      availability_status: 'online',
-      thumbnail: '',
-    },
-  },
-  lastActivityAt: 1730885428,
-  priority: 'urgent',
-  waitingSince: 1730885428,
-  slaPolicyId: 3,
-  appliedSla: {
-    id: 4,
-    sla_id: 3,
-    sla_status: 'active_with_misses',
-    created_at: 1712127410,
-    updated_at: 1712127545,
-    sla_description:
-      'Premium Service Level Agreements (SLAs) are contracts that define clear expectations ',
-    sla_name: 'Premium SLA',
-    sla_first_response_time_threshold: 120,
-    sla_next_response_time_threshold: 180,
-    sla_only_during_business_hours: false,
-    sla_resolution_time_threshold: 360,
-  },
-  slaEvents: [
-    {
-      id: 8,
-      event_type: 'frt',
-      meta: {},
-      updated_at: 1712127545,
-      created_at: 1712127545,
-    },
-    {
-      id: 9,
-      event_type: 'rt',
-      meta: {},
-      updated_at: 1712127790,
-      created_at: 1712127790,
-    },
-  ],
-};
-
-const contactForConversationWithoutMeta = computed(() => ({
-  availabilityStatus: null,
-  email: 'candice@chatwoot.com',
-  id: 29,
-  name: 'Candice Matherson',
-  phoneNumber: '+918585858585',
-  identifier: null,
-  thumbnail: 'https://api.dicebear.com/9.x/dylan/svg?seed=George',
-  customAttributes: {},
-  last_activity_at: 1712127410,
-  createdAt: 1712127389,
-  contactInboxes: [],
-}));
-
-const contactForConversationWithMeta = computed(() => ({
-  availabilityStatus: null,
-  email: 'willy@chatwoot.com',
-  id: 29,
-  name: 'Willy Castelot',
-  phoneNumber: '+918585858585',
-  identifier: null,
-  thumbnail: 'https://api.dicebear.com/9.x/dylan/svg?seed=Liam',
-  customAttributes: {},
-  lastActivityAt: 1712127410,
-  createdAt: 1712127389,
-  contactInboxes: [],
-}));
-
-const webWidgetInbox = computed(() => ({
-  phone_number: '+918585858585',
-  channel_type: 'Channel::WebWidget',
-}));
-
-const accountLabels = computed(() => [
-  {
-    id: 1,
-    title: 'billing',
-    description: 'Label is used for tagging billing related conversations',
-    color: '#28AD21',
-    show_on_sidebar: true,
-  },
-  {
-    id: 3,
-    title: 'delivery',
-    description: null,
-    color: '#A2FDD5',
-    show_on_sidebar: true,
-  },
-  {
-    id: 6,
-    title: 'lead',
-    description: null,
-    color: '#F161C8',
-    show_on_sidebar: true,
-  },
-  {
-    id: 4,
-    title: 'ops-handover',
-    description: null,
-    color: '#A53326',
-    show_on_sidebar: true,
-  },
-  {
-    id: 5,
-    title: 'premium-customer',
-    description: null,
-    color: '#6FD4EF',
-    show_on_sidebar: true,
-  },
-  {
-    id: 2,
-    title: 'software',
-    description: null,
-    color: '#8F6EF2',
-    show_on_sidebar: true,
-  },
-]);
-</script>
-
-<template>
-  <Story
-    title="Components/ConversationCard"
-    :layout="{ type: 'grid', width: '600px' }"
-  >
-    <Variant title="Conversation without meta">
-      <div class="flex flex-col">
-        <ConversationCard
-          :key="conversationWithoutMeta.id"
-          :conversation="conversationWithoutMeta"
-          :contact="contactForConversationWithoutMeta"
-          :state-inbox="webWidgetInbox"
-          :account-labels="accountLabels"
-          class="hover:bg-n-alpha-1"
-        />
-      </div>
-    </Variant>
-    <Variant title="Conversation with meta (SLA, Labels)">
-      <div class="flex flex-col">
-        <ConversationCard
-          :key="conversationWithMeta.id"
-          :conversation="{
-            ...conversationWithMeta,
-            priority: 'medium',
-          }"
-          :contact="contactForConversationWithMeta"
-          :state-inbox="webWidgetInbox"
-          :account-labels="accountLabels"
-          class="hover:bg-n-alpha-1"
-        />
-      </div>
-    </Variant>
-    <Variant title="Conversation without meta (Unread count)">
-      <div class="flex flex-col">
-        <ConversationCard
-          :key="conversationWithoutMeta.id"
-          :conversation="{
-            ...conversationWithoutMeta,
-            unreadCount: 2,
-            priority: 'high',
-          }"
-          :contact="contactForConversationWithoutMeta"
-          :state-inbox="webWidgetInbox"
-          :account-labels="accountLabels"
-          class="hover:bg-n-alpha-1"
-        />
-      </div>
-    </Variant>
-    <Variant title="Conversation with meta (SLA, Labels, Unread count)">
-      <div class="flex flex-col">
-        <ConversationCard
-          :key="conversationWithMeta.id"
-          :conversation="{
-            ...conversationWithMeta,
-            unreadCount: 2,
-          }"
-          :contact="contactForConversationWithMeta"
-          :state-inbox="webWidgetInbox"
-          :account-labels="accountLabels"
-          class="hover:bg-n-alpha-1"
-        />
-      </div>
-    </Variant>
-  </Story>
-</template>

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

@@ -1,133 +1,243 @@
 <script setup>
 import { computed, ref } from 'vue';
-import { getInboxIconByType } from 'dashboard/helper/inbox';
-import { useRouter, useRoute } from 'vue-router';
-import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper.js';
-import { dynamicTime, shortTimestamp } from 'shared/helpers/timeHelper';
-
-import Icon from 'dashboard/components-next/icon/Icon.vue';
-import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
-import CardMessagePreview from './CardMessagePreview.vue';
-import CardMessagePreviewWithMeta from './CardMessagePreviewWithMeta.vue';
-import CardPriorityIcon from './CardPriorityIcon.vue';
+import { useRouter } from 'vue-router';
+import { useBreakpoints } from '@vueuse/core';
+import { useMapGetter } from 'dashboard/composables/store';
+import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper';
+import wootConstants from 'dashboard/constants/globals';
+import ContextMenu from 'dashboard/components/ui/ContextMenu.vue';
+import ConversationContextMenu from 'dashboard/components/widgets/conversation/contextMenu/Index.vue';
+import ConversationCardExpanded from './ConversationCardExpanded.vue';
+import ConversationCardCompact from './ConversationCardCompact.vue';
 
 const props = defineProps({
-  conversation: {
-    type: Object,
-    required: true,
-  },
-  contact: {
-    type: Object,
-    required: true,
-  },
-  stateInbox: {
-    type: Object,
-    required: true,
-  },
-  accountLabels: {
-    type: Array,
-    required: true,
-  },
+  activeLabel: { type: String, default: '' },
+  chat: { type: Object, default: () => ({}) },
+  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: '' },
+  selected: { type: Boolean, default: false },
+  compact: { type: Boolean, default: false },
+  enableContextMenu: { type: Boolean, default: false },
+  allowedContextMenuOptions: { type: Array, default: () => [] },
+  enableSelection: { type: Boolean, default: true },
+  isExpandedLayout: { type: Boolean, default: false },
+  isPreviousConversations: { type: Boolean, default: false },
 });
 
+const emit = defineEmits([
+  'contextMenuToggle',
+  'assignAgent',
+  'assignLabel',
+  'assignTeam',
+  'markAsUnread',
+  'markAsRead',
+  'assignPriority',
+  'updateConversationStatus',
+  'deleteConversation',
+  'selectConversation',
+  'deSelectConversation',
+]);
+
 const router = useRouter();
-const route = useRoute();
 
-const cardMessagePreviewWithMetaRef = ref(null);
+const breakpoints = useBreakpoints({
+  lg: wootConstants.LARGE_SCREEN_BREAKPOINT,
+});
+const isLargeScreen = breakpoints.greaterOrEqual('lg');
 
-const currentContact = computed(() => props.contact);
+// Show expanded only when: isExpandedLayout=true AND screen >= 1024px
+const showExpanded = computed(() => {
+  return props.isExpandedLayout && isLargeScreen.value;
+});
 
-const currentContactName = computed(() => currentContact.value?.name);
-const currentContactThumbnail = computed(() => currentContact.value?.thumbnail);
-const currentContactStatus = computed(
-  () => currentContact.value?.availabilityStatus
+const showContextMenu = ref(false);
+const contextMenu = ref({ x: null, y: null });
+
+const currentChat = useMapGetter('getSelectedChat');
+const inboxesList = useMapGetter('inboxes/getInboxes');
+const activeInbox = useMapGetter('getSelectedInbox');
+const accountId = useMapGetter('getCurrentAccountId');
+const contactGetter = useMapGetter('contacts/getContact');
+const inboxGetter = useMapGetter('inboxes/getInbox');
+
+const chatMetadata = computed(() => props.chat.meta || {});
+const assignee = computed(() => chatMetadata.value.assignee || {});
+const senderId = computed(() => chatMetadata.value.sender?.id);
+const currentContact = computed(() =>
+  senderId.value ? contactGetter.value(senderId.value) : {}
 );
+const hasActiveInbox = computed(() => activeInbox.value);
 
-const inbox = computed(() => props.stateInbox);
-
-const inboxName = computed(() => inbox.value?.name);
-
-const inboxIcon = computed(() => {
-  const { channelType, medium } = inbox.value;
-  return getInboxIconByType(channelType, medium);
+const isActiveChat = computed(() => currentChat.value.id === props.chat.id);
+const inbox = computed(() => {
+  const inboxId = props.chat.inbox_id;
+  return inboxId ? inboxGetter.value(inboxId) : {};
 });
 
-const lastActivityAt = computed(() => {
-  const timestamp = props.conversation?.timestamp;
-  return timestamp ? shortTimestamp(dynamicTime(timestamp)) : '';
-});
+const showInboxName = computed(() => inboxesList.value.length > 1);
 
-const showMessagePreviewWithoutMeta = computed(() => {
-  const { labels = [] } = props.conversation;
-  return (
-    !cardMessagePreviewWithMetaRef.value?.hasSlaThreshold && labels.length === 0
+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 = frontendURL(
-    conversationUrl({
-      accountId: route.params.accountId,
-      id: props.conversation.id,
-    })
-  );
+  const path = conversationPath.value;
+  if (!path) return;
 
   if (e.metaKey || e.ctrlKey) {
+    e.preventDefault();
     window.open(
-      window.chatwootConfig.hostURL + path,
+      `${window.chatwootConfig.hostURL}${path}`,
       '_blank',
-      'noopener noreferrer nofollow'
+      'noopener,noreferrer'
     );
     return;
   }
+
+  if (isActiveChat.value) return;
   router.push({ path });
 };
+
+const onSelectConversation = checked => {
+  if (checked) {
+    emit('selectConversation', props.chat.id, inbox.value.id);
+  } else {
+    emit('deSelectConversation', props.chat.id, inbox.value.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 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]);
+  closeContextMenu();
+};
+
+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();
+};
 </script>
 
 <template>
-  <div
-    role="button"
-    class="flex w-full gap-3 px-3 py-4 transition-all duration-300 ease-in-out cursor-pointer"
+  <!-- Expanded: Only when isExpandedLayout=true AND screen >= 1024px -->
+  <ConversationCardExpanded
+    v-if="showExpanded"
+    :chat="chat"
+    :current-contact="currentContact"
+    :assignee="assignee"
+    :inbox="inbox"
+    :selected="selected"
+    :is-active-chat="isActiveChat"
+    :show-assignee="showAssignee"
+    :show-inbox-name="showInboxName"
+    :is-inbox-view="hasActiveInbox && !isPreviousConversations"
+    @select-conversation="onSelectConversation"
+    @de-select-conversation="onSelectConversation"
     @click="onCardClick"
+    @contextmenu="openContextMenu"
+  />
+
+  <!-- Compact: All other cases (mobile OR isExpandedLayout=false) -->
+  <ConversationCardCompact
+    v-else
+    :chat="chat"
+    :current-contact="currentContact"
+    :assignee="assignee"
+    :inbox="inbox"
+    :selected="selected"
+    :is-active-chat="isActiveChat"
+    :compact="compact"
+    :show-assignee="showAssignee"
+    :show-inbox-name="showInboxName"
+    :hide-thumbnail="hideThumbnail"
+    :enable-selection="enableSelection"
+    :is-inbox-view="hasActiveInbox && !isPreviousConversations"
+    @select-conversation="onSelectConversation"
+    @click="onCardClick"
+    @contextmenu="openContextMenu"
+  />
+
+  <ContextMenu
+    v-if="showContextMenu"
+    :x="contextMenu.x"
+    :y="contextMenu.y"
+    @close="closeContextMenu"
   >
-    <Avatar
-      :name="currentContactName"
-      :src="currentContactThumbnail"
-      :size="24"
-      :status="currentContactStatus"
-      rounded-full
+    <ConversationContextMenu
+      :status="chat.status"
+      :inbox-id="inbox.id"
+      :priority="chat.priority"
+      :chat-id="chat.id"
+      :has-unread-messages="chat.unread_count > 0"
+      :conversation-url="conversationPath"
+      :allowed-options="allowedContextMenuOptions"
+      @update-conversation="onUpdateConversation"
+      @assign-agent="onAssignAgent"
+      @assign-label="onAssignLabel"
+      @assign-team="onAssignTeam"
+      @mark-as-unread="markAsUnread"
+      @mark-as-read="markAsRead"
+      @assign-priority="assignPriority"
+      @delete-conversation="deleteConversation"
+      @close="closeContextMenu"
     />
-    <div class="flex flex-col w-full gap-1 min-w-0">
-      <div class="flex items-center justify-between h-6 gap-2">
-        <h4 class="text-base font-medium truncate text-n-slate-12">
-          {{ currentContactName }}
-        </h4>
-        <div class="flex items-center gap-2">
-          <CardPriorityIcon :priority="conversation.priority || null" />
-          <div
-            v-tooltip.left="inboxName"
-            class="flex items-center justify-center flex-shrink-0 rounded-full bg-n-alpha-2 size-5"
-          >
-            <Icon
-              :icon="inboxIcon"
-              class="flex-shrink-0 text-n-slate-11 size-3"
-            />
-          </div>
-          <span class="text-sm text-n-slate-10">
-            {{ lastActivityAt }}
-          </span>
-        </div>
-      </div>
-      <CardMessagePreview
-        v-show="showMessagePreviewWithoutMeta"
-        :conversation="conversation"
-      />
-      <CardMessagePreviewWithMeta
-        v-show="!showMessagePreviewWithoutMeta"
-        ref="cardMessagePreviewWithMetaRef"
-        :conversation="conversation"
-        :account-labels="accountLabels"
-      />
-    </div>
-  </div>
+  </ContextMenu>
 </template>

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

@@ -0,0 +1,120 @@
+<script setup>
+import { computed } from 'vue';
+import { getLastMessage } from 'dashboard/helper/conversationHelper';
+import CardMetaSection from './CardMetaSection.vue';
+import CardAvatar from './CardAvatar.vue';
+import CardHeader from './CardHeader.vue';
+import CardContent from './CardContent.vue';
+import CardLabels from './CardLabels.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 },
+  compact: { type: Boolean, default: false },
+  showAssignee: { type: Boolean, default: false },
+  showInboxName: { type: Boolean, default: false },
+  hideThumbnail: { type: Boolean, default: false },
+  enableSelection: { type: Boolean, default: true },
+  isInboxView: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(['selectConversation', 'click', 'contextmenu']);
+
+const lastMessageInChat = computed(() => getLastMessage(props.chat));
+const showLabelsSection = computed(() => props.chat.labels?.length > 0);
+const showExpandedPreview = computed(
+  () => props.compact && !showLabelsSection.value
+);
+
+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 onSelectConversation = checked => {
+  emit('selectConversation', checked);
+};
+</script>
+
+<template>
+  <div
+    class="relative flex items-start flex-grow-0 flex-shrink-0 w-auto max-w-full cursor-pointer group transition-all duration-200"
+    :class="{
+      'active animate-card-select bg-n-alpha-1 dark:bg-n-alpha-3': isActiveChat,
+      'selected bg-n-slate-2 dark:bg-n-slate-3': selected,
+      'px-0 py-3': compact,
+      'px-2 pt-2.5 pb-3 hover:bg-n-alpha-1 rounded-lg': !compact,
+    }"
+    @click="$emit('click', $event)"
+    @contextmenu="$emit('contextmenu', $event)"
+  >
+    <div class="min-w-0 w-full">
+      <CardMetaSection
+        v-if="!isInboxView"
+        :chat="chat"
+        :inbox="inbox"
+        :show-inbox-name="showInboxName"
+        :show-assignee="showAssignee"
+        :assignee="assignee"
+      />
+
+      <div
+        class="grid gap-2.5 items-start"
+        :class="{
+          'mt-0.5 grid-cols-1': compact,
+          'grid-cols-[auto,1fr]': !compact,
+        }"
+      >
+        <CardAvatar
+          v-if="!compact"
+          :contact="currentContact"
+          :selected="selected"
+          :enable-selection="enableSelection"
+          :hide-thumbnail="hideThumbnail"
+          @select-conversation="onSelectConversation"
+        />
+
+        <div class="min-w-0 flex flex-col gap-1.5">
+          <div class="min-w-0 flex flex-col gap-px">
+            <CardHeader
+              v-if="!compact"
+              :contact-name="currentContact.name"
+              :timestamp="chat.timestamp"
+              :created-at="chat.created_at"
+            />
+
+            <CardContent
+              :last-message="lastMessageInChat"
+              :voice-call-status="voiceCallData.status"
+              :voice-call-direction="voiceCallData.direction"
+              :unread-count="unreadCount"
+              :show-expanded-preview="showExpandedPreview"
+            />
+          </div>
+
+          <CardLabels
+            v-if="showLabelsSection || isInboxView"
+            :conversation-labels="chat.labels"
+          >
+            <template v-if="isInboxView" #before>
+              <CardMetaSection
+                :chat="chat"
+                :inbox="inbox"
+                :show-assignee="showAssignee"
+                :assignee="assignee"
+                :is-labels-empty="chat.labels.length === 0"
+                inline
+              />
+            </template>
+          </CardLabels>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,172 @@
+<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 './CardLabels.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="relative cursor-pointer group transition-all duration-200 grid gap-4 items-center px-2 h-12"
+    :class="{
+      'active animate-card-select bg-n-alpha-1 dark:bg-n-alpha-3': isActiveChat,
+      'selected bg-n-slate-2 dark:bg-n-slate-3': selected,
+      'hover:bg-n-alpha-1 rounded-lg': !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
+          rounded-full
+        />
+        <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>
+
+      <span
+        class="text-xs outline outline-1 -outline-offset-1 outline-n-weak px-1.5 rounded-md h-6 text-n-slate-11 font-440 min-w-14 flex-shrink-0 inline-flex items-center justify-center truncate"
+      >
+        {{ chat.id }}
+      </span>
+
+      <div class="flex-shrink-0">
+        <CardAvatar
+          :contact="currentContact"
+          :selected="false"
+          :enable-selection="false"
+          :hide-thumbnail="false"
+        />
+      </div>
+
+      <h4
+        class="text-sm 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-2 flex-shrink-0">
+      <div v-if="showLabelsSection" class="min-w-0 w-full">
+        <CardLabels
+          :conversation-labels="chat.labels"
+          disable-toggle
+          class="my-0 [&>div]: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
+          :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 font-420"
+      :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-blue-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

@@ -9,7 +9,6 @@ import Icon from 'dashboard/components-next/icon/Icon.vue';
 const props = defineProps({
   status: { type: String, default: '' },
   direction: { type: String, default: '' },
-  messagePreviewClass: { type: [String, Array, Object], default: '' },
 });
 
 const LABEL_KEYS = {
@@ -61,16 +60,9 @@ const statusColor = computed(
 </script>
 
 <template>
-  <div
-    class="my-0 mx-2 leading-6 h-6 flex-1 min-w-0 text-sm overflow-hidden text-ellipsis whitespace-nowrap"
-    :class="messagePreviewClass"
-  >
-    <Icon
-      class="inline-block -mt-0.5 align-middle size-4"
-      :icon="iconName"
-      :class="statusColor"
-    />
-    <span class="mx-1" :class="statusColor">
+  <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-sm font-420" :class="statusColor">
       {{ $t(labelKey) }}
     </span>
   </div>

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

@@ -10,12 +10,12 @@ defineProps({
 </script>
 
 <template>
-  <div class="flex items-center text-n-slate-11 text-xs min-w-0">
-    <ChannelIcon
-      :inbox="inbox"
-      class="size-3.5 ltr:mr-0.5 rtl:ml-0.5 flex-shrink-0"
-    />
-    <span class="truncate">
+  <div
+    :title="inbox.name"
+    class="flex items-center gap-0.5 text-n-slate-11 text-xs min-w-0"
+  >
+    <ChannelIcon :inbox="inbox" class="size-4 flex-shrink-0" />
+    <span class="truncate font-440">
       {{ inbox.name }}
     </span>
   </div>

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

@@ -1,8 +1,10 @@
 <script setup>
 import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
 import { evaluateSLAStatus } from '@chatwoot/utils';
+import { useCamelCase } from 'dashboard/composables/useTransformKeys';
+
 import SLAPopoverCard from './SLAPopoverCard.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
 
 const props = defineProps({
   chat: {
@@ -13,14 +15,9 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  parentWidth: {
-    type: Number,
-    default: 1000,
-  },
 });
 
 const REFRESH_INTERVAL = 60000;
-const { t } = useI18n();
 
 const timer = ref(null);
 const slaStatus = ref({
@@ -30,6 +27,10 @@ const slaStatus = ref({
   icon: null,
 });
 
+defineOptions({
+  inheritAttrs: false,
+});
+
 const appliedSLA = computed(() => props.chat?.applied_sla);
 const slaEvents = computed(() => props.chat?.sla_events);
 const hasSlaThreshold = computed(() => slaStatus.value?.threshold);
@@ -38,29 +39,16 @@ const slaTextStyles = computed(() =>
   isSlaMissed.value ? 'text-n-ruby-11' : 'text-n-amber-11'
 );
 
-const slaStatusText = computed(() => {
-  const upperCaseType = slaStatus.value?.type?.toUpperCase(); // FRT, NRT, or RT
-  const statusKey = isSlaMissed.value ? 'MISSED' : 'DUE';
-
-  return t(`CONVERSATION.HEADER.SLA_STATUS.${upperCaseType}`, {
-    status: t(`CONVERSATION.HEADER.SLA_STATUS.${statusKey}`),
-  });
-});
+const conversation = computed(() => useCamelCase(props.chat, { deep: true }));
 
 const showSlaPopoverCard = computed(
   () => props.showExtendedInfo && slaEvents.value?.length > 0
 );
 
-const groupClass = computed(() => {
-  return props.showExtendedInfo
-    ? 'h-[26px] rounded-lg bg-n-alpha-1'
-    : 'rounded h-5  border border-n-strong';
-});
-
 const updateSlaStatus = () => {
   slaStatus.value = evaluateSLAStatus({
-    appliedSla: appliedSLA.value,
-    chat: props.chat,
+    appliedSla: appliedSLA.value || {},
+    chat: conversation.value,
   });
 };
 
@@ -71,19 +59,6 @@ const createTimer = () => {
   }, REFRESH_INTERVAL);
 };
 
-watch(
-  () => props.chat,
-  () => {
-    updateSlaStatus();
-  }
-);
-
-const slaPopoverClass = computed(() => {
-  return props.showExtendedInfo
-    ? 'ltr:pr-1.5 rtl:pl-1.5 ltr:border-r rtl:border-l border-n-strong'
-    : '';
-});
-
 onMounted(() => {
   updateSlaStatus();
   createTimer();
@@ -94,40 +69,27 @@ onUnmounted(() => {
     clearTimeout(timer.value);
   }
 });
+
+watch(() => props.chat, updateSlaStatus);
+
+defineExpose({
+  hasSlaThreshold,
+});
 </script>
 
-<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
   <div
     v-if="hasSlaThreshold"
+    v-bind="$attrs"
     class="relative flex items-center cursor-pointer min-w-fit group"
-    :class="groupClass"
   >
-    <div
-      class="flex items-center w-full truncate px-1.5"
-      :class="showExtendedInfo ? '' : 'gap-1'"
-    >
-      <div class="flex items-center gap-1" :class="slaPopoverClass">
-        <fluent-icon
-          size="12"
-          :icon="slaStatus.icon"
-          type="outline"
-          :icon-lib="isSlaMissed ? 'lucide' : 'fluent'"
-          class="flex-shrink-0"
-          :class="slaTextStyles"
-        />
-        <span
-          v-if="showExtendedInfo && parentWidth > 650"
-          class="text-xs font-medium"
-          :class="slaTextStyles"
-        >
-          {{ slaStatusText }}
-        </span>
-      </div>
-      <span
-        class="text-xs font-medium"
-        :class="[slaTextStyles, showExtendedInfo && 'ltr:pl-1.5 rtl:pr-1.5']"
-      >
+    <div class="flex items-center w-full truncate gap-1" :class="slaTextStyles">
+      <Icon
+        icon="i-lucide-flame"
+        class="flex-shrink-0 size-3"
+        :class="slaTextStyles"
+      />
+      <span class="text-xs font-440" :class="slaTextStyles">
         {{ slaStatus.threshold }}
       </span>
     </div>
@@ -137,4 +99,5 @@ onUnmounted(() => {
       class="start-0 xl:start-auto xl:end-0 top-7 hidden group-hover:flex"
     />
   </div>
+  <template v-else />
 </template>

app/javascript/dashboard/components-next/Inbox/InboxCard.vue

@@ -12,7 +12,7 @@ import { NOTIFICATION_TYPES_MAPPING } from 'dashboard/routes/dashboard/inbox/hel
 import Icon from 'dashboard/components-next/icon/Icon.vue';
 import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
 import CardPriorityIcon from 'dashboard/components-next/Conversation/ConversationCard/CardPriorityIcon.vue';
-import SLACardLabel from 'dashboard/components-next/Conversation/ConversationCard/SLACardLabel.vue';
+import SLACardLabel from 'dashboard/components-next/Inbox/SLACardLabel.vue';
 import InboxContextMenu from 'dashboard/routes/dashboard/inbox/components/InboxContextMenu.vue';
 
 const props = defineProps({
@@ -221,7 +221,6 @@ onBeforeMount(contextMenuActions.close);
         <CardPriorityIcon
           v-if="primaryActor?.priority"
           :priority="primaryActor?.priority"
-          class="[&>svg]:size-4"
         />
         <div
           v-if="inboxIcon"

app/javascript/dashboard/components-next/avatar/Avatar.vue

@@ -112,6 +112,19 @@ const containerStyles = computed(() => ({
   height: `${props.size}px`,
 }));
 
+const borderRadiusClass = computed(() => {
+  if (props.roundedFull) {
+    return 'rounded-full';
+  }
+
+  // Approximates 25% of size
+  if (props.size <= 16) return 'rounded'; // 4px
+  if (props.size <= 24) return 'rounded-md'; // 6px
+  if (props.size <= 32) return 'rounded-lg'; // 8px
+  if (props.size <= 48) return 'rounded-xl'; // 12px
+  return 'rounded-2xl'; // 16px
+});
+
 const avatarStyles = computed(() => ({
   ...containerStyles.value,
   backgroundColor:
@@ -184,7 +197,7 @@ watch(
 
 <template>
   <span
-    class="relative inline-flex group/avatar z-0 flex-shrink-0"
+    class="relative inline-flex group/avatar z-0 flex-shrink-0 align-middle"
     :style="containerStyles"
   >
     <!-- Status Badge -->
@@ -218,7 +231,7 @@ watch(
       role="img"
       class="relative inline-flex items-center justify-center object-cover overflow-hidden font-medium"
       :class="[
-        roundedFull ? 'rounded-full' : 'rounded-xl',
+        borderRadiusClass,
         {
           'dark:!bg-[var(--dark-bg)] dark:!text-[var(--dark-text)]':
             !showDefaultAvatar && (!src || !isImageValid),

app/javascript/dashboard/components-next/checkbox/Checkbox.vue

@@ -24,20 +24,20 @@ const handleChange = event => {
 </script>
 
 <template>
-  <div class="relative w-4 h-4">
+  <div class="relative w-3.5 h-3.5">
     <input
       :checked="modelValue"
       :indeterminate="indeterminate"
       type="checkbox"
       :disabled="disabled"
-      class="peer absolute inset-0 z-10 h-4 w-4 disabled:opacity-50 appearance-none rounded border border-n-slate-6 ring-transparent transition-all duration-200 checked:border-n-brand checked:bg-n-brand dark:border-gray-600 dark:checked:border-n-brand indeterminate:border-n-brand indeterminate:bg-n-brand hover:enabled:bg-n-blue-border cursor-pointer"
+      class="peer absolute inset-0 z-10 h-3.5 w-3.5 disabled:opacity-50 appearance-none rounded border border-n-slate-6 bg-n-slate-2 ring-transparent transition-all duration-100 checked:border-n-brand checked:bg-n-brand dark:border-gray-600 dark:bg-n-slate-2 dark:checked:border-n-brand indeterminate:border-n-brand indeterminate:bg-n-brand hover:enabled:bg-n-blue-border cursor-pointer"
       @change="handleChange"
     />
     <!-- Checkmark SVG -->
     <svg
       viewBox="0 0 14 14"
       fill="none"
-      class="pointer-events-none absolute w-3.5 h-3.5 z-20 stroke-white opacity-0 peer-checked:opacity-100 transition-opacity duration-200 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
+      class="pointer-events-none absolute w-2.5 h-2.5 z-20 stroke-white opacity-0 peer-checked:opacity-100 transition-opacity duration-200 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
     >
       <path
         d="M3 8L6 11L11 3.5"
@@ -50,7 +50,7 @@ const handleChange = event => {
     <svg
       viewBox="0 0 14 14"
       fill="none"
-      class="pointer-events-none absolute w-3.5 h-3.5 z-20 stroke-white opacity-0 peer-indeterminate:opacity-100 transition-opacity duration-200 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
+      class="pointer-events-none absolute w-2.5 h-2.5 z-20 stroke-white opacity-0 peer-indeterminate:opacity-100 transition-opacity duration-200 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
     >
       <path
         d="M3 7L11 7"

app/javascript/dashboard/components/ChatList.vue

@@ -17,25 +17,21 @@ import {
   useFunctionGetter,
 } from 'dashboard/composables/store.js';
 
-// [VITE] [TODO] We are using vue-virtual-scroll for now, since that seemed the simplest way to migrate
-// from the current one. But we should consider using tanstack virtual in the future
-// https://tanstack.com/virtual/latest/docs/framework/vue/examples/variable
-import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller';
 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 IntersectionObserver from './IntersectionObserver.vue';
+
 import TeleportWithDirection from 'dashboard/components-next/TeleportWithDirection.vue';
-import Spinner from 'dashboard/components-next/spinner/Spinner.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';
@@ -45,7 +41,6 @@ import {
   useSnakeCase,
 } from 'dashboard/composables/useTransformKeys';
 import { useEmitter } from 'dashboard/composables/emitter';
-import { useEventListener } from '@vueuse/core';
 
 import { emitter } from 'shared/helpers/mitt';
 
@@ -68,8 +63,6 @@ import { matchesFilters } from '../store/modules/conversations/helpers/filterHel
 import { CONVERSATION_EVENTS } from '../helper/AnalyticsHelper/events';
 import { ASSIGNEE_TYPE_TAB_PERMISSIONS } from 'dashboard/constants/permissions.js';
 
-import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
-
 const props = defineProps({
   conversationInbox: { type: [String, Number], default: 0 },
   teamId: { type: [String, Number], default: 0 },
@@ -87,14 +80,14 @@ const router = useRouter();
 const route = useRoute();
 const store = useStore();
 
-const conversationListRef = ref(null);
-const conversationDynamicScroller = ref(null);
-
-provide('contextMenuElementTarget', conversationDynamicScroller);
-
 const activeAssigneeTab = ref(wootConstants.ASSIGNEE_TYPE.ME);
 const activeStatus = ref(wootConstants.STATUS_TYPE.OPEN);
 const activeSortBy = ref(wootConstants.SORT_BY_TYPE.LAST_ACTIVITY_AT_DESC);
+
+// Provide trigger for label recalculation (parent → child pattern)
+const recalculateLabelsKey = ref(0);
+provide('recalculateLabelsKey', recalculateLabelsKey);
+
 const showAdvancedFilters = ref(false);
 // chatsOnView is to store the chats that are currently visible on the screen,
 // which mirrors the conversationList.
@@ -130,7 +123,6 @@ const currentAccountId = useMapGetter('getCurrentAccountId');
 // We can't useFunctionGetter here since it needs to be called on setup?
 const getTeamFn = useMapGetter('teams/getTeam');
 
-useChatListKeyboardEvents(conversationListRef);
 const {
   selectedConversations,
   selectedInboxes,
@@ -154,12 +146,7 @@ const {
 });
 
 // computed
-const intersectionObserverOptions = computed(() => {
-  return {
-    root: conversationListRef.value,
-    rootMargin: '100px 0px 100px 0px',
-  };
-});
+// computed
 
 const hasAppliedFilters = computed(() => {
   return appliedFilters.value.length !== 0;
@@ -343,7 +330,7 @@ const conversationList = computed(() => {
 });
 
 const showEndOfListMessage = computed(() => {
-  return (
+  return !!(
     conversationList.value.length &&
     hasCurrentPageEndReached.value &&
     !chatListLoading.value
@@ -600,17 +587,6 @@ function loadMoreConversations() {
   }
 }
 
-// Add a method to handle scroll events
-function handleScroll() {
-  const scroller = conversationDynamicScroller.value;
-  if (scroller && scroller.hasScrollbar) {
-    const { scrollTop, scrollHeight, clientHeight } = scroller.$el;
-    if (scrollHeight - (scrollTop + clientHeight) < 100) {
-      loadMoreConversations();
-    }
-  }
-}
-
 function updateAssigneeTab(selectedTab) {
   if (activeAssigneeTab.value !== selectedTab) {
     resetBulkActions();
@@ -619,6 +595,8 @@ function updateAssigneeTab(selectedTab) {
     if (!currentPage.value) {
       fetchConversations();
     }
+    // Trigger label position recalculation
+    recalculateLabelsKey.value += 1;
   }
 }
 
@@ -761,8 +739,6 @@ useEmitter('fetch_conversation_stats', () => {
   store.dispatch('conversationStats/get', conversationFilters.value);
 });
 
-useEventListener(conversationDynamicScroller, 'scroll', handleScroll);
-
 onMounted(() => {
   store.dispatch('setChatListFilters', conversationFilters.value);
   setFiltersFromUISettings();
@@ -913,64 +889,20 @@ watch(conversationFilters, (newVal, oldVal) => {
       @assign-labels="onAssignLabels"
       @assign-team="onAssignTeamsForBulk"
     />
-    <div
-      ref="conversationListRef"
-      class="flex-1 overflow-hidden conversations-list hover:overflow-y-auto"
-      :class="{ 'overflow-hidden': isContextMenuOpen }"
-    >
-      <DynamicScroller
-        ref="conversationDynamicScroller"
-        :items="conversationList"
-        :min-item-size="24"
-        class="w-full h-full overflow-auto"
-      >
-        <template #default="{ item, index, active }">
-          <!--
-            If we encounter resizing issues, we can set the `watchData` prop to true
-            this will deeply watch the entire object instead of just size dependencies
-            But it can impact performance
-          -->
-          <DynamicScrollerItem
-            :item="item"
-            :active="active"
-            :data-index="index"
-            :size-dependencies="[
-              item.messages,
-              item.labels,
-              item.uuid,
-              item.inbox_id,
-            ]"
-          >
-            <ConversationItem
-              :source="item"
-              :label="label"
-              :team-id="teamId"
-              :folders-id="foldersId"
-              :conversation-type="conversationType"
-              :show-assignee="showAssigneeInConversationCard"
-              @select-conversation="selectConversation"
-              @de-select-conversation="deSelectConversation"
-            />
-          </DynamicScrollerItem>
-        </template>
-        <template #after>
-          <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"
-          />
-        </template>
-      </DynamicScroller>
-    </div>
+    <ConversationList
+      :items="conversationList"
+      :is-loading="chatListLoading"
+      :show-end-of-list-message="showEndOfListMessage"
+      :is-context-menu-open="isContextMenuOpen"
+      :label="label"
+      :team-id="teamId"
+      :folders-id="foldersId"
+      :conversation-type="conversationType"
+      :show-assignee="showAssigneeInConversationCard"
+      :is-expanded-layout="isOnExpandedLayout"
+      @load-more="loadMoreConversations"
+    />
+
     <Dialog
       ref="deleteConversationDialogRef"
       type="alert"

app/javascript/dashboard/components/ConversationItem.vue

@@ -1,50 +1,50 @@
-<script>
-import ConversationCard from './widgets/conversation/ConversationCard.vue';
-export default {
-  components: {
-    ConversationCard,
+<script setup>
+import { inject } from 'vue';
+import ConversationCard from 'dashboard/components-next/Conversation/ConversationCard/ConversationCard.vue';
+
+defineProps({
+  source: {
+    type: Object,
+    required: true,
   },
-  inject: [
-    'selectConversation',
-    'deSelectConversation',
-    'assignAgent',
-    'assignTeam',
-    'assignLabels',
-    '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,
-    },
+  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,
+  },
+  isExpandedLayout: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const selectConversation = inject('selectConversation');
+const deSelectConversation = inject('deSelectConversation');
+const assignAgent = inject('assignAgent');
+const assignTeam = inject('assignTeam');
+const assignLabels = inject('assignLabels');
+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');
 </script>
 
 <template>
@@ -57,6 +57,7 @@ export default {
     :conversation-type="conversationType"
     :selected="isConversationSelected(source.id)"
     :show-assignee="showAssignee"
+    :is-expanded-layout="isExpandedLayout"
     enable-context-menu
     @select-conversation="selectConversation"
     @de-select-conversation="deSelectConversation"

app/javascript/dashboard/components/ConversationList.vue

@@ -0,0 +1,119 @@
+<script setup>
+import { provide, useTemplateRef } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { Virtualizer } from 'virtua/vue';
+import { useInfiniteScroll } from '@vueuse/core';
+import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
+import ConversationItem from './ConversationItem.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+
+const props = defineProps({
+  items: { type: Array, default: () => [] },
+  isLoading: { type: Boolean, default: false },
+  showEndOfListMessage: { type: Boolean, default: false },
+  isContextMenuOpen: { 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 },
+  isExpandedLayout: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(['loadMore']);
+const { t } = useI18n();
+
+const parentRef = useTemplateRef('parentRef');
+
+provide('contextMenuElementTarget', parentRef);
+
+useInfiniteScroll(
+  parentRef,
+  () => {
+    if (props.isLoading || props.showEndOfListMessage) return;
+    emit('loadMore');
+  },
+  {
+    distance: 400,
+  }
+);
+
+// Keyboard navigation for conversation list
+const handleConversationNavigation = direction => {
+  if (!parentRef.value) return;
+
+  // Get all wrapper divs with data-id
+  const allWrappers = Array.from(parentRef.value.querySelectorAll('[data-id]'));
+
+  if (allWrappers.length === 0) return;
+
+  const activeIndex = allWrappers.findIndex(wrapper =>
+    wrapper.querySelector('.active')
+  );
+
+  const delta = direction === 'previous' ? -1 : 1;
+  const newIndex = activeIndex + delta;
+
+  // Clamp index to valid range [0, length-1]
+  const targetIndex = Math.max(0, Math.min(newIndex, allWrappers.length - 1));
+
+  // Click the first child (ConversationItem root element)
+  allWrappers[targetIndex]?.firstElementChild?.click();
+};
+
+useKeyboardEvents({
+  'Alt+KeyJ': {
+    action: () => handleConversationNavigation('previous'),
+    allowOnFocusedInput: true,
+  },
+  'Alt+KeyK': {
+    action: () => handleConversationNavigation('next'),
+    allowOnFocusedInput: true,
+  },
+});
+</script>
+
+<template>
+  <div
+    ref="parentRef"
+    class="conversation-list flex-1 w-full h-full touch-pan-y overscroll-contain [-webkit-overflow-scrolling:touch] [contain:strict] px-2 pt-2.5"
+    :class="isContextMenuOpen ? 'overflow-hidden' : 'overflow-y-auto'"
+  >
+    <Virtualizer
+      :data="items"
+      class="[&>div]:after:content-[''] [&>div]:after:absolute [&>div]:after:bottom-0 [&>div]:after:left-0 [&>div]:after:right-0 [&>div]:after:h-px [&>div]:after:bg-n-weak [&>div]:after:pointer-events-none [&>div]:after:transition-colors [&>div]:after:duration-150 [&>div:has(*:hover)]:after:!bg-n-surface-1 [&>div:has(+_*:hover)]:after:!bg-n-surface-1 [&>div:has(.active)]:after:!bg-n-surface-1 [&>div:has(+_*_.active)]:after:!bg-n-surface-1 [&>div:has(.selected)]:after:!bg-n-surface-1 [&>div:has(+_*_.selected)]:after:!bg-n-surface-1"
+    >
+      <template #default="{ item }">
+        <div :data-id="item.id">
+          <ConversationItem
+            :source="item"
+            :label="label"
+            :team-id="teamId"
+            :folders-id="foldersId"
+            :conversation-type="conversationType"
+            :show-assignee="showAssignee"
+            :is-expanded-layout="isExpandedLayout"
+          />
+        </div>
+      </template>
+    </Virtualizer>
+
+    <div class="py-2">
+      <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>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.conversation-list {
+  overflow-anchor: none;
+}
+</style>

app/javascript/dashboard/components/buttons/ResolveAction.vue

@@ -53,12 +53,14 @@ const showOpenButton = computed(() => {
 });
 
 const getConversationParams = () => {
+  // Get all conversation wrapper divs with data-id attribute
   const allConversations = document.querySelectorAll(
-    '.conversations-list .conversation'
+    '.conversation-list [data-id]'
   );
 
+  // Find the wrapper that contains the active conversation card
   const activeConversation = document.querySelector(
-    'div.conversations-list div.conversation.active'
+    '.conversation-list [data-id]:has(.active)'
   );
   const activeConversationIndex = [...allConversations].indexOf(
     activeConversation
@@ -116,10 +118,12 @@ const keyboardEvents = {
       await toggleStatus(wootConstants.STATUS_TYPE.RESOLVED);
 
       if (activeIndex < lastIndex) {
-        all[activeIndex + 1].click();
+        // Click the first child (ConversationItem) of the next wrapper
+        all[activeIndex + 1]?.firstElementChild?.click();
       } else if (all.length > 1) {
-        all[0].click();
-        document.querySelector('.conversations-list').scrollTop = 0;
+        // Click the first child of the first wrapper and scroll to top
+        all[0]?.firstElementChild?.click();
+        document.querySelector('.conversation-list').scrollTop = 0;
       }
       event.preventDefault();
     },

app/javascript/dashboard/components/ui/TimeAgo.vue

@@ -1,109 +1,106 @@
-<script>
-const MINUTE_IN_MILLI_SECONDS = 60000;
-const HOUR_IN_MILLI_SECONDS = MINUTE_IN_MILLI_SECONDS * 60;
-const DAY_IN_MILLI_SECONDS = HOUR_IN_MILLI_SECONDS * 24;
-
+<script setup>
+import { ref, computed, watch, onMounted, onUnmounted } from 'vue';
+import { useI18n } from 'vue-i18n';
 import {
   dynamicTime,
   dateFormat,
   shortTimestamp,
 } from 'shared/helpers/timeHelper';
 
-export default {
-  name: 'TimeAgo',
-  props: {
-    isAutoRefreshEnabled: {
-      type: Boolean,
-      default: true,
-    },
-    lastActivityTimestamp: {
-      type: [String, Date, Number],
-      default: '',
-    },
-    createdAtTimestamp: {
-      type: [String, Date, Number],
-      default: '',
-    },
+const props = defineProps({
+  isAutoRefreshEnabled: {
+    type: Boolean,
+    default: true,
   },
-  data() {
-    return {
-      lastActivityAtTimeAgo: dynamicTime(this.lastActivityTimestamp),
-      createdAtTimeAgo: dynamicTime(this.createdAtTimestamp),
-      timer: null,
-    };
+  lastActivityTimestamp: {
+    type: [String, Date, Number],
+    default: '',
   },
-  computed: {
-    lastActivityTime() {
-      return shortTimestamp(this.lastActivityAtTimeAgo);
-    },
-    createdAtTime() {
-      return shortTimestamp(this.createdAtTimeAgo);
-    },
-    createdAt() {
-      const createdTimeDiff = Date.now() - this.createdAtTimestamp * 1000;
-      const isBeforeAMonth = createdTimeDiff > DAY_IN_MILLI_SECONDS * 30;
-      return !isBeforeAMonth
-        ? `${this.$t('CHAT_LIST.CHAT_TIME_STAMP.CREATED.LATEST')} ${
-            this.createdAtTimeAgo
-          }`
-        : `${this.$t('CHAT_LIST.CHAT_TIME_STAMP.CREATED.OLDEST')} ${dateFormat(
-            this.createdAtTimestamp
-          )}`;
-    },
-    lastActivity() {
-      const lastActivityTimeDiff =
-        Date.now() - this.lastActivityTimestamp * 1000;
-      const isNotActive = lastActivityTimeDiff > DAY_IN_MILLI_SECONDS * 30;
-      return !isNotActive
-        ? `${this.$t('CHAT_LIST.CHAT_TIME_STAMP.LAST_ACTIVITY.ACTIVE')} ${
-            this.lastActivityAtTimeAgo
-          }`
-        : `${this.$t(
-            'CHAT_LIST.CHAT_TIME_STAMP.LAST_ACTIVITY.NOT_ACTIVE'
-          )} ${dateFormat(this.lastActivityTimestamp)}`;
-    },
-    tooltipText() {
-      return `${this.createdAt}
-              ${this.lastActivity}`;
-    },
+  createdAtTimestamp: {
+    type: [String, Date, Number],
+    default: '',
   },
-  watch: {
-    lastActivityTimestamp() {
-      this.lastActivityAtTimeAgo = dynamicTime(this.lastActivityTimestamp);
-    },
-    createdAtTimestamp() {
-      this.createdAtTimeAgo = dynamicTime(this.createdAtTimestamp);
-    },
-  },
-  mounted() {
-    if (this.isAutoRefreshEnabled) {
-      this.createTimer();
-    }
-  },
-  unmounted() {
-    clearTimeout(this.timer);
-  },
-  methods: {
-    createTimer() {
-      this.timer = setTimeout(() => {
-        this.lastActivityAtTimeAgo = dynamicTime(this.lastActivityTimestamp);
-        this.createdAtTimeAgo = dynamicTime(this.createdAtTimestamp);
-        this.createTimer();
-      }, this.refreshTime());
-    },
-    refreshTime() {
-      const timeDiff = Date.now() - this.lastActivityTimestamp * 1000;
-      if (timeDiff > DAY_IN_MILLI_SECONDS) {
-        return DAY_IN_MILLI_SECONDS;
-      }
-      if (timeDiff > HOUR_IN_MILLI_SECONDS) {
-        return HOUR_IN_MILLI_SECONDS;
-      }
+});
 
-      return MINUTE_IN_MILLI_SECONDS;
-    },
-  },
+const MINUTE_IN_MILLI_SECONDS = 60000;
+const HOUR_IN_MILLI_SECONDS = MINUTE_IN_MILLI_SECONDS * 60;
+const DAY_IN_MILLI_SECONDS = HOUR_IN_MILLI_SECONDS * 24;
+
+const { t } = useI18n();
+
+const lastActivityAtTimeAgo = ref(dynamicTime(props.lastActivityTimestamp));
+const createdAtTimeAgo = ref(dynamicTime(props.createdAtTimestamp));
+const timer = ref(null);
+
+const lastActivityTime = computed(() =>
+  shortTimestamp(lastActivityAtTimeAgo.value)
+);
+
+const createdAtTime = computed(() => shortTimestamp(createdAtTimeAgo.value));
+
+const createdAt = computed(() => {
+  const createdTimeDiff = Date.now() - props.createdAtTimestamp * 1000;
+  const isBeforeAMonth = createdTimeDiff > DAY_IN_MILLI_SECONDS * 30;
+  return !isBeforeAMonth
+    ? `${t('CHAT_LIST.CHAT_TIME_STAMP.CREATED.LATEST')} ${createdAtTimeAgo.value}`
+    : `${t('CHAT_LIST.CHAT_TIME_STAMP.CREATED.OLDEST')} ${dateFormat(props.createdAtTimestamp)}`;
+});
+
+const lastActivity = computed(() => {
+  const lastActivityTimeDiff = Date.now() - props.lastActivityTimestamp * 1000;
+  const isNotActive = lastActivityTimeDiff > DAY_IN_MILLI_SECONDS * 30;
+  return !isNotActive
+    ? `${t('CHAT_LIST.CHAT_TIME_STAMP.LAST_ACTIVITY.ACTIVE')} ${lastActivityAtTimeAgo.value}`
+    : `${t('CHAT_LIST.CHAT_TIME_STAMP.LAST_ACTIVITY.NOT_ACTIVE')} ${dateFormat(props.lastActivityTimestamp)}`;
+});
+
+const tooltipText = computed(() => {
+  return `${createdAt.value}
+${lastActivity.value}`;
+});
+
+const refreshTime = () => {
+  const timeDiff = Date.now() - props.lastActivityTimestamp * 1000;
+  if (timeDiff > DAY_IN_MILLI_SECONDS) {
+    return DAY_IN_MILLI_SECONDS;
+  }
+  if (timeDiff > HOUR_IN_MILLI_SECONDS) {
+    return HOUR_IN_MILLI_SECONDS;
+  }
+  return MINUTE_IN_MILLI_SECONDS;
 };
+
+const createTimer = () => {
+  timer.value = setTimeout(() => {
+    lastActivityAtTimeAgo.value = dynamicTime(props.lastActivityTimestamp);
+    createdAtTimeAgo.value = dynamicTime(props.createdAtTimestamp);
+    createTimer();
+  }, refreshTime());
+};
+
+watch(
+  () => props.lastActivityTimestamp,
+  () => {
+    lastActivityAtTimeAgo.value = dynamicTime(props.lastActivityTimestamp);
+  }
+);
+
+watch(
+  () => props.createdAtTimestamp,
+  () => {
+    createdAtTimeAgo.value = dynamicTime(props.createdAtTimestamp);
+  }
+);
+
+onMounted(() => {
+  if (props.isAutoRefreshEnabled) {
+    createTimer();
+  }
+});
+
+onUnmounted(() => {
+  clearTimeout(timer.value);
+});
 </script>
 
 <template>
@@ -111,7 +108,6 @@ export default {
     v-tooltip.top="{
       content: tooltipText,
       delay: { show: 1000, hide: 0 },
-      hideOnClick: true,
     }"
     class="ml-auto leading-4 text-xxs text-n-slate-10 hover:text-n-slate-11"
   >

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

@@ -1,397 +0,0 @@
-<script setup>
-import { computed, ref } 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 PriorityMark from './PriorityMark.vue';
-import SLACardLabel from './components/SLACardLabel.vue';
-import ContextMenu from 'dashboard/components/ui/ContextMenu.vue';
-import VoiceCallStatus from './VoiceCallStatus.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: '' },
-  selected: { type: Boolean, default: false },
-  compact: { type: Boolean, default: false },
-  enableContextMenu: { type: Boolean, default: false },
-  allowedContextMenuOptions: { type: Array, default: () => [] },
-});
-
-const emit = defineEmits([
-  'contextMenuToggle',
-  'assignAgent',
-  'assignLabel',
-  'assignTeam',
-  'markAsUnread',
-  'markAsRead',
-  'assignPriority',
-  'updateConversationStatus',
-  'deleteConversation',
-  'selectConversation',
-  'deSelectConversation',
-]);
-
-const router = useRouter();
-const store = useStore();
-
-const hovered = ref(false);
-const showContextMenu = ref(false);
-const contextMenu = ref({
-  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.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(() => ({
-  status: props.chat.additional_attributes?.call_status,
-  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.chat.priority
-  );
-});
-
-const hasSlaPolicyId = computed(() => props.chat?.sla_policy_id);
-
-const showLabelsSection = computed(() => {
-  return props.chat.labels?.length > 0 || hasSlaPolicyId.value;
-});
-
-const messagePreviewClass = computed(() => {
-  return [
-    hasUnread.value ? 'font-medium text-n-slate-12' : 'text-n-slate-11',
-    !props.compact && hasUnread.value ? 'ltr:pr-4 rtl:pl-4' : '',
-    props.compact && hasUnread.value ? 'ltr:pr-6 rtl:pl-6' : '',
-  ];
-});
-
-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;
-};
-
-const onThumbnailLeave = () => {
-  hovered.value = false;
-};
-
-const onSelectConversation = checked => {
-  if (checked) {
-    emit('selectConversation', props.chat.id, inbox.value.id);
-  } else {
-    emit('deSelectConversation', props.chat.id, inbox.value.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 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]);
-  closeContextMenu();
-};
-
-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();
-};
-</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="{
-      'active animate-card-select bg-n-alpha-1 dark:bg-n-alpha-3 border-n-weak':
-        isActiveChat,
-      'bg-n-slate-2 dark:bg-n-slate-3': selected,
-      'px-0': compact,
-      'px-3': !compact,
-    }"
-    @click="onCardClick"
-    @contextmenu="openContextMenu($event)"
-  >
-    <div
-      class="relative"
-      @mouseenter="onThumbnailHover"
-      @mouseleave="onThumbnailLeave"
-    >
-      <Avatar
-        v-if="!hideThumbnail"
-        :name="currentContact.name"
-        :src="currentContact.thumbnail"
-        :size="32"
-        :status="currentContact.availability_status"
-        :class="!showInboxName ? 'mt-4' : 'mt-8'"
-        hide-offline-status
-        rounded-full
-      >
-        <template #overlay="{ size }">
-          <label
-            v-if="hovered || selected"
-            class="flex items-center justify-center rounded-full cursor-pointer absolute inset-0 z-10 backdrop-blur-[2px]"
-            :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)"
-            />
-          </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
-        v-if="showMetaSection"
-        class="flex items-center min-w-0 gap-1"
-        :class="{
-          'ltr:ml-2 rtl:mr-2': !compact,
-          'mx-2': compact,
-        }"
-      >
-        <InboxName v-if="showInboxName" :inbox="inbox" class="flex-1 min-w-0" />
-        <div
-          class="flex items-center gap-2 flex-shrink-0"
-          :class="{
-            'flex-1 justify-between': !showInboxName,
-          }"
-        >
-          <span
-            v-if="showAssignee && assignee.name"
-            class="text-n-slate-11 text-xs font-medium leading-3 py-0.5 px-0 inline-flex items-center truncate"
-          >
-            <fluent-icon icon="person" size="12" class="text-n-slate-11" />
-            {{ assignee.name }}
-          </span>
-          <PriorityMark :priority="chat.priority" class="flex-shrink-0" />
-        </div>
-      </div>
-      <h4
-        class="conversation--user text-sm my-0 mx-2 capitalize pt-0.5 text-ellipsis overflow-hidden whitespace-nowrap flex-1 min-w-0 ltr:pr-16 rtl:pl-16 text-n-slate-12"
-        :class="hasUnread ? 'font-semibold' : 'font-medium'"
-      >
-        {{ currentContact.name }}
-      </h4>
-      <VoiceCallStatus
-        v-if="voiceCallData.status"
-        key="voice-status-row"
-        :status="voiceCallData.status"
-        :direction="voiceCallData.direction"
-        :message-preview-class="messagePreviewClass"
-      />
-      <MessagePreview
-        v-else-if="lastMessageInChat"
-        key="message-preview"
-        :message="lastMessageInChat"
-        class="my-0 mx-2 leading-6 h-6 flex-1 min-w-0 text-sm"
-        :class="messagePreviewClass"
-      />
-      <p
-        v-else
-        key="no-messages"
-        class="text-n-slate-11 text-sm my-0 mx-2 leading-6 h-6 flex-1 min-w-0 overflow-hidden text-ellipsis whitespace-nowrap"
-        :class="messagePreviewClass"
-      >
-        <fluent-icon
-          size="16"
-          class="-mt-0.5 align-middle inline-block text-n-slate-10"
-          icon="info"
-        />
-        <span class="mx-0.5">
-          {{ $t(`CHAT_LIST.NO_MESSAGES`) }}
-        </span>
-      </p>
-      <div
-        class="absolute flex flex-col ltr:right-3 rtl:left-3"
-        :class="showMetaSection ? 'top-8' : 'top-4'"
-      >
-        <span class="ml-auto font-normal leading-4 text-xxs">
-          <TimeAgo
-            :last-activity-timestamp="chat.timestamp"
-            :created-at-timestamp="chat.created_at"
-          />
-        </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>
-      </div>
-      <CardLabels
-        v-if="showLabelsSection"
-        :conversation-labels="chat.labels"
-        class="mt-0.5 mx-2 mb-0"
-      >
-        <template v-if="hasSlaPolicyId" #before>
-          <SLACardLabel :chat="chat" class="ltr:mr-1 rtl:ml-1" />
-        </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-url="conversationPath"
-        :allowed-options="allowedContextMenuOptions"
-        @update-conversation="onUpdateConversation"
-        @assign-agent="onAssignAgent"
-        @assign-label="onAssignLabel"
-        @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/ConversationHeader.vue

@@ -4,10 +4,10 @@ import { useRoute } from 'vue-router';
 import { useStore } from 'vuex';
 import { useElementSize } from '@vueuse/core';
 import BackButton from '../BackButton.vue';
-import InboxName from '../InboxName.vue';
+import InboxName from 'dashboard/components-next/Conversation/InboxName.vue';
 import MoreActions from './MoreActions.vue';
 import Avatar from 'next/avatar/Avatar.vue';
-import SLACardLabel from './components/SLACardLabel.vue';
+import SLACardLabel from 'dashboard/components-next/Conversation/Sla/SLACardLabel.vue';
 import wootConstants from 'dashboard/constants/globals';
 import { conversationListPageURL } from 'dashboard/helper/URLHelper';
 import { snoozedReopenTime } from 'dashboard/helper/snoozeHelpers';

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

@@ -1,109 +0,0 @@
-<script>
-import { MESSAGE_TYPE } from 'widget/helpers/constants';
-import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
-import { ATTACHMENT_ICONS } from 'shared/constants/messages';
-
-export default {
-  name: 'MessagePreview',
-  props: {
-    message: {
-      type: Object,
-      required: true,
-    },
-    showMessageType: {
-      type: Boolean,
-      default: true,
-    },
-    defaultEmptyMessage: {
-      type: String,
-      default: '',
-    },
-  },
-  setup() {
-    const { getPlainText } = useMessageFormatter();
-    return {
-      getPlainText,
-    };
-  },
-  computed: {
-    messageByAgent() {
-      const { message_type: messageType } = this.message;
-      return messageType === MESSAGE_TYPE.OUTGOING;
-    },
-    isMessageAnActivity() {
-      const { message_type: messageType } = this.message;
-      return messageType === MESSAGE_TYPE.ACTIVITY;
-    },
-    isMessagePrivate() {
-      const { private: isPrivate } = this.message;
-      return isPrivate;
-    },
-    parsedLastMessage() {
-      const { content_attributes: contentAttributes } = this.message;
-      const { email: { subject } = {} } = contentAttributes || {};
-      return this.getPlainText(subject || this.message.content);
-    },
-    lastMessageFileType() {
-      const [{ file_type: fileType } = {}] = this.message.attachments;
-      return fileType;
-    },
-    attachmentIcon() {
-      return ATTACHMENT_ICONS[this.lastMessageFileType];
-    },
-    attachmentMessageContent() {
-      return `CHAT_LIST.ATTACHMENTS.${this.lastMessageFileType}.CONTENT`;
-    },
-    isMessageSticker() {
-      return this.message && this.message.content_type === 'sticker';
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="overflow-hidden text-ellipsis whitespace-nowrap">
-    <template v-if="showMessageType">
-      <fluent-icon
-        v-if="isMessagePrivate"
-        size="16"
-        class="-mt-0.5 align-middle text-n-slate-11 inline-block"
-        icon="lock-closed"
-      />
-      <fluent-icon
-        v-else-if="messageByAgent"
-        size="16"
-        class="-mt-0.5 align-middle text-n-slate-11 inline-block"
-        icon="arrow-reply"
-      />
-      <fluent-icon
-        v-else-if="isMessageAnActivity"
-        size="16"
-        class="-mt-0.5 align-middle text-n-slate-11 inline-block"
-        icon="info"
-      />
-    </template>
-    <span v-if="message.content && isMessageSticker">
-      <fluent-icon
-        size="16"
-        class="-mt-0.5 align-middle inline-block text-n-slate-11"
-        icon="image"
-      />
-      {{ $t('CHAT_LIST.ATTACHMENTS.image.CONTENT') }}
-    </span>
-    <span v-else-if="message.content">
-      {{ parsedLastMessage }}
-    </span>
-    <span v-else-if="message.attachments">
-      <fluent-icon
-        v-if="attachmentIcon && showMessageType"
-        size="16"
-        class="-mt-0.5 align-middle inline-block text-n-slate-11"
-        :icon="attachmentIcon"
-      />
-      {{ $t(`${attachmentMessageContent}`) }}
-    </span>
-    <span v-else>
-      {{ defaultEmptyMessage || $t('CHAT_LIST.NO_CONTENT') }}
-    </span>
-  </div>
-</template>

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

@@ -1,54 +0,0 @@
-<script>
-import { CONVERSATION_PRIORITY } from '../../../../shared/constants/messages';
-
-export default {
-  name: 'PriorityMark',
-  props: {
-    priority: {
-      type: String,
-      default: '',
-      validate: value =>
-        [...Object.values(CONVERSATION_PRIORITY), ''].includes(value),
-    },
-  },
-  data() {
-    return {
-      CONVERSATION_PRIORITY,
-    };
-  },
-  computed: {
-    tooltipText() {
-      return this.$t(
-        `CONVERSATION.PRIORITY.OPTIONS.${this.priority.toUpperCase()}`
-      );
-    },
-    isUrgent() {
-      return this.priority === CONVERSATION_PRIORITY.URGENT;
-    },
-  },
-};
-</script>
-
-<!-- eslint-disable-next-line vue/no-root-v-if -->
-<template>
-  <span
-    v-if="priority"
-    v-tooltip="{
-      content: tooltipText,
-      delay: { show: 1500, hide: 0 },
-      hideOnClick: true,
-    }"
-    class="shrink-0 rounded-sm inline-flex items-center justify-center w-3.5 h-3.5"
-    :class="{
-      'bg-n-ruby-4 text-n-ruby-10': isUrgent,
-      'bg-n-slate-4 text-n-slate-11': !isUrgent,
-    }"
-  >
-    <fluent-icon
-      :icon="`priority-${priority.toLowerCase()}`"
-      :size="isUrgent ? 12 : 14"
-      class="flex-shrink-0"
-      view-box="0 0 14 14"
-    />
-  </span>
-</template>

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

@@ -1,6 +1,7 @@
 <script setup>
-import MessagePreview from 'dashboard/components/widgets/conversation/MessagePreview.vue';
+import MessagePreview from 'dashboard/components-next/Conversation/ConversationCard/MessagePreview.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
 
 defineProps({
   message: {
@@ -16,14 +17,16 @@ const emit = defineEmits(['dismiss']);
   <div
     class="reply-editor bg-n-slate-9/10 rounded-md py-1 pl-2 pr-1 text-xs tracking-wide mt-2 flex items-center gap-1.5 -mx-2"
   >
-    <fluent-icon class="flex-shrink-0 icon" icon="arrow-reply" size="14" />
-    <div class="flex-grow gap-1 mt-px text-xs truncate">
+    <Icon class="flex-shrink-0 size-3.5" icon="i-lucide-reply" />
+    <div
+      class="flex-grow gap-1 mt-px text-xs truncate inline-flex items-center"
+    >
       {{ $t('CONVERSATION.REPLYBOX.REPLYING_TO') }}
       <MessagePreview
         :message="message"
         :show-message-type="false"
         :default-empty-message="$t('CONVERSATION.REPLY_MESSAGE_NOT_FOUND')"
-        class="inline"
+        class="text-xs"
       />
     </div>
     <Button
@@ -32,6 +35,7 @@ const emit = defineEmits(['dismiss']);
       xs
       slate
       icon="i-lucide-x"
+      class="flex-shrink-0"
       @click.stop="emit('dismiss')"
     />
   </div>

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

@@ -172,7 +172,6 @@ export default {
                 ? $t('LABEL_MGMT.SUGGESTIONS.TOOLTIP.DESELECT')
                 : labelTooltip,
               delay: { show: 600, hide: 0 },
-              hideOnClick: true,
             }"
             class="label-suggestion--option !px-0"
             @click="pushOrAddLabel(label.title)"
@@ -188,7 +187,6 @@ export default {
             v-tooltip.top="{
               content: $t('LABEL_MGMT.SUGGESTIONS.TOOLTIP.DISMISS'),
               delay: { show: 600, hide: 0 },
-              hideOnClick: true,
             }"
             faded
             xs
@@ -214,7 +212,6 @@ export default {
             v-tooltip.top="{
               content: $t('LABEL_MGMT.SUGGESTIONS.TOOLTIP.DISMISS'),
               delay: { show: 600, hide: 0 },
-              hideOnClick: true,
             }"
             faded
             xs
@@ -230,7 +227,6 @@ export default {
           v-tooltip.top="{
             content: $t('LABEL_MGMT.SUGGESTIONS.POWERED_BY'),
             delay: { show: 600, hide: 0 },
-            hideOnClick: true,
           }"
           :size="16"
           name="chatwoot-ai"

app/javascript/dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue

@@ -1,99 +0,0 @@
-<script setup>
-import { ref, computed, watch, onMounted, nextTick, useSlots } from 'vue';
-import { useMapGetter } from 'dashboard/composables/store';
-
-const props = defineProps({
-  conversationLabels: {
-    type: Array,
-    required: true,
-  },
-});
-
-const slots = useSlots();
-const accountLabels = useMapGetter('labels/getLabels');
-
-const activeLabels = computed(() => {
-  return accountLabels.value.filter(({ title }) =>
-    props.conversationLabels.includes(title)
-  );
-});
-
-const showAllLabels = ref(false);
-const showExpandLabelButton = ref(false);
-const labelPosition = ref(-1);
-const labelContainer = ref(null);
-
-const computeVisibleLabelPosition = () => {
-  const beforeSlot = slots.before ? 100 : 0;
-  if (!labelContainer.value) {
-    return;
-  }
-
-  const labels = Array.from(labelContainer.value.querySelectorAll('.label'));
-  let labelOffset = 0;
-  showExpandLabelButton.value = false;
-  labels.forEach((label, index) => {
-    labelOffset += label.offsetWidth + 8;
-
-    if (labelOffset < labelContainer.value.clientWidth - beforeSlot) {
-      labelPosition.value = index;
-    } else {
-      showExpandLabelButton.value = labels.length > 1;
-    }
-  });
-};
-
-watch(activeLabels, () => {
-  nextTick(() => computeVisibleLabelPosition());
-});
-
-onMounted(() => {
-  computeVisibleLabelPosition();
-});
-
-const onShowLabels = e => {
-  e.stopPropagation();
-  showAllLabels.value = !showAllLabels.value;
-  nextTick(() => computeVisibleLabelPosition());
-};
-</script>
-
-<template>
-  <div ref="labelContainer" v-resize="computeVisibleLabelPosition">
-    <div
-      v-if="activeLabels.length || $slots.before"
-      class="flex items-end flex-shrink min-w-0 gap-y-1"
-      :class="{ 'h-auto overflow-visible flex-row flex-wrap': showAllLabels }"
-    >
-      <slot name="before" />
-      <woot-label
-        v-for="(label, index) in activeLabels"
-        :key="label ? label.id : index"
-        :title="label.title"
-        :description="label.description"
-        :color="label.color"
-        variant="smooth"
-        class="!mb-0 max-w-[calc(100%-0.5rem)]"
-        small
-        :class="{
-          'invisible absolute': !showAllLabels && index > labelPosition,
-        }"
-      />
-      <button
-        v-if="showExpandLabelButton"
-        :title="
-          showAllLabels
-            ? $t('CONVERSATION.CARD.HIDE_LABELS')
-            : $t('CONVERSATION.CARD.SHOW_LABELS')
-        "
-        class="h-5 py-0 px-1 flex-shrink-0 mr-6 ml-0 rtl:ml-6 rtl:mr-0 rtl:rotate-180 text-n-slate-11 border-n-strong dark:border-n-strong"
-        @click="onShowLabels"
-      >
-        <fluent-icon
-          :icon="showAllLabels ? 'chevron-left' : 'chevron-right'"
-          size="12"
-        />
-      </button>
-    </div>
-  </div>
-</template>

app/javascript/dashboard/composables/chatlist/useChatListKeyboardEvents.js

@@ -1,60 +0,0 @@
-import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
-
-export function useChatListKeyboardEvents(listRef) {
-  const getKeyboardListenerParams = () => {
-    const allConversations = listRef.value.querySelectorAll(
-      'div.conversations-list div.conversation'
-    );
-    const activeConversation = listRef.value.querySelector(
-      'div.conversations-list div.conversation.active'
-    );
-    const activeConversationIndex = [...allConversations].indexOf(
-      activeConversation
-    );
-    const lastConversationIndex = allConversations.length - 1;
-    return {
-      allConversations,
-      activeConversation,
-      activeConversationIndex,
-      lastConversationIndex,
-    };
-  };
-
-  const handleConversationNavigation = direction => {
-    const { allConversations, activeConversationIndex, lastConversationIndex } =
-      getKeyboardListenerParams();
-
-    // Determine the new index based on the direction
-    const newIndex =
-      direction === 'previous'
-        ? activeConversationIndex - 1
-        : activeConversationIndex + 1;
-
-    // Check if the new index is within the valid range
-    if (
-      allConversations.length > 0 &&
-      newIndex >= 0 &&
-      newIndex <= lastConversationIndex
-    ) {
-      // Click the conversation at the new index
-      allConversations[newIndex].click();
-    } else if (allConversations.length > 0) {
-      // If the new index is out of range, click the first or last conversation based on the direction
-      const fallbackIndex =
-        direction === 'previous' ? 0 : lastConversationIndex;
-      allConversations[fallbackIndex].click();
-    }
-  };
-  const keyboardEvents = {
-    'Alt+KeyJ': {
-      action: () => handleConversationNavigation('previous'),
-      allowOnFocusedInput: true,
-    },
-    'Alt+KeyK': {
-      action: () => handleConversationNavigation('next'),
-      allowOnFocusedInput: true,
-    },
-  };
-
-  useKeyboardEvents(keyboardEvents);
-}

app/javascript/dashboard/constants/globals.js

@@ -38,6 +38,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

@@ -134,6 +134,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/modules/search/components/SearchResultConversationItem.vue

@@ -3,7 +3,7 @@ import { computed } from 'vue';
 
 import { frontendURL } from 'dashboard/helper/URLHelper.js';
 import { dynamicTime } from 'shared/helpers/timeHelper';
-import InboxName from 'dashboard/components/widgets/InboxName.vue';
+import InboxName from 'dashboard/components-next/Conversation/InboxName.vue';
 import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
 
 const props = defineProps({

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

@@ -1,67 +1,68 @@
-<script>
-import ConversationCard from 'dashboard/components/widgets/conversation/ConversationCard.vue';
-import { mapGetters } from 'vuex';
+<script setup>
+import { computed, watch, onMounted } from 'vue';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+import ConversationCard from 'dashboard/components-next/Conversation/ConversationCard/ConversationCard.vue';
 import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 
-export default {
-  components: {
-    ConversationCard,
-    Spinner,
+const props = defineProps({
+  contactId: {
+    type: [String, Number],
+    required: true,
   },
-  props: {
-    contactId: {
-      type: [String, Number],
-      required: true,
-    },
-    conversationId: {
-      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 store = useStore();
+
+const uiFlags = useMapGetter('contactConversations/getUIFlags');
+const conversations = useMapGetter(
+  'contactConversations/getContactConversation'
+);
+
+const previousConversations = computed(() => {
+  return (
+    conversations
+      .value(props.contactId)
+      ?.filter(
+        conversation => conversation.id !== Number(props.conversationId)
+      ) || []
+  );
+});
+
+watch(
+  () => props.contactId,
+  (newContactId, prevContactId) => {
+    if (newContactId && newContactId !== prevContactId) {
+      store.dispatch('contactConversations/get', newContactId);
+    }
+  }
+);
+
+onMounted(() => {
+  store.dispatch('contactConversations/get', props.contactId);
+});
 </script>
 
 <template>
-  <div v-if="!uiFlags.isFetching" class="">
+  <div v-if="!uiFlags.isFetching" class="max-h-96 overflow-y-auto">
     <div v-if="!previousConversations.length" class="no-label-message px-4 p-3">
       <span>
         {{ $t('CONTACT_PANEL.CONVERSATIONS.NO_RECORDS_FOUND') }}
       </span>
     </div>
-    <div v-else class="contact-conversation--list">
+    <div v-else class="px-3 divide-y divide-n-weak">
       <ConversationCard
         v-for="conversation in previousConversations"
         :key="conversation.id"
         :chat="conversation"
-        :hide-inbox-name="false"
+        show-assignee
         hide-thumbnail
         enable-context-menu
         compact
+        is-previous-conversations
         :allowed-context-menu-options="['open-new-tab', 'copy-link']"
       />
     </div>

app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportItem.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { computed } from 'vue';
 import UserAvatarWithName from 'dashboard/components/widgets/UserAvatarWithName.vue';
-import CardLabels from 'dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue';
+import CardLabels from 'dashboard/components-next/Conversation/ConversationCard/CardLabels.vue';
 import SLAViewDetails from './SLAViewDetails.vue';
 const props = defineProps({
   slaName: {

app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAViewDetails.vue

@@ -1,5 +1,5 @@
 <script>
-import SLAPopoverCard from 'dashboard/components/widgets/conversation/components/SLAPopoverCard.vue';
+import SLAPopoverCard from 'dashboard/components-next/Conversation/Sla/SLAPopoverCard.vue';
 import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {

app/javascript/shared/constants/messages.js

@@ -151,15 +151,6 @@ export const MESSAGE_VARIABLES = [
   },
 ];
 
-export const ATTACHMENT_ICONS = {
-  image: 'image',
-  audio: 'headphones-sound-wave',
-  video: 'video',
-  file: 'document',
-  location: 'location',
-  fallback: 'link',
-};
-
 export const TWILIO_CONTENT_TEMPLATE_TYPES = {
   TEXT: 'text',
   MEDIA: 'media',