Merge branch 'heatmap-last-30-days' into live-agent-reports-controller

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

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

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

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

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

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