Merge branch 'develop' into feat/ui-lib

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

@@ -36,6 +36,7 @@ import DyteBubble from './bubbles/Dyte.vue';
 import LocationBubble from './bubbles/Location.vue';
 import CSATBubble from './bubbles/CSAT.vue';
 import FormBubble from './bubbles/Form.vue';
+import VoiceCallBubble from './bubbles/VoiceCall.vue';
 
 import MessageError from './MessageError.vue';
 import ContextMenu from 'dashboard/modules/conversations/components/MessageContextMenu.vue';
@@ -130,6 +131,8 @@ const props = defineProps({
   sourceId: { type: String, default: '' }, // eslint-disable-line vue/no-unused-properties
 });
 
+const emit = defineEmits(['retry']);
+
 const contextMenuPosition = ref({});
 const showBackgroundHighlight = ref(false);
 const showContextMenu = ref(false);
@@ -280,6 +283,10 @@ const componentToRender = computed(() => {
     return FormBubble;
   }
 
+  if (props.contentType === CONTENT_TYPES.VOICE_CALL) {
+    return VoiceCallBubble;
+  }
+
   if (props.contentType === CONTENT_TYPES.INCOMING_EMAIL) {
     return EmailBubble;
   }
@@ -519,6 +526,7 @@ provideMessageContext({
         class="[grid-area:meta]"
         :class="flexOrientationClass"
         :error="contentAttributes.externalError"
+        @retry="emit('retry')"
       />
     </div>
     <div v-if="shouldShowContextMenu" class="context-menu-wrap">

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

@@ -1,16 +1,22 @@
 <script setup>
+import { computed } from 'vue';
 import Icon from 'next/icon/Icon.vue';
 import { useI18n } from 'vue-i18n';
 import { useMessageContext } from './provider.js';
-import { ORIENTATION } from './constants';
+import { hasOneDayPassed } from 'shared/helpers/timeHelper';
+import { ORIENTATION, MESSAGE_STATUS } from './constants';
 
 defineProps({
   error: { type: String, required: true },
 });
 
-const { orientation } = useMessageContext();
+const emit = defineEmits(['retry']);
+
+const { orientation, status, createdAt } = useMessageContext();
 
 const { t } = useI18n();
+
+const canRetry = computed(() => !hasOneDayPassed(createdAt.value));
 </script>
 
 <template>
@@ -35,5 +41,14 @@ const { t } = useI18n();
         {{ error }}
       </div>
     </div>
+    <button
+      v-if="canRetry"
+      type="button"
+      :disabled="status !== MESSAGE_STATUS.FAILED"
+      class="bg-n-alpha-2 rounded-md size-5 grid place-content-center cursor-pointer"
+      @click="emit('retry')"
+    >
+      <Icon icon="i-lucide-refresh-ccw" class="text-n-ruby-11 size-[14px]" />
+    </button>
   </div>
 </template>

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

@@ -1,8 +1,10 @@
 <script setup>
-import { defineProps, computed } from 'vue';
+import { defineProps, computed, reactive } from 'vue';
 import Message from './Message.vue';
 import { MESSAGE_TYPES } from './constants.js';
 import { useCamelCase } from 'dashboard/composables/useTransformKeys';
+import { useMapGetter } from 'dashboard/composables/store.js';
+import MessageApi from 'dashboard/api/inbox/message.js';
 
 /**
  * Props definition for the component
@@ -37,10 +39,54 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits(['retry']);
+
 const allMessages = computed(() => {
   return useCamelCase(props.messages, { deep: true });
 });
 
+const currentChat = useMapGetter('getSelectedChat');
+
+// Cache for fetched reply messages to avoid duplicate API calls
+const fetchedReplyMessages = reactive(new Map());
+
+/**
+ * Fetches a specific message from the API by trying to get messages around it
+ * @param {number} messageId - The ID of the message to fetch
+ * @param {number} conversationId - The ID of the conversation
+ * @returns {Promise<Object|null>} - The fetched message or null if not found/error
+ */
+const fetchReplyMessage = async (messageId, conversationId) => {
+  // Return cached result if already fetched
+  if (fetchedReplyMessages.has(messageId)) {
+    return fetchedReplyMessages.get(messageId);
+  }
+
+  try {
+    const response = await MessageApi.getPreviousMessages({
+      conversationId,
+      before: messageId + 100,
+      after: messageId - 100,
+    });
+
+    const messages = response.data?.payload || [];
+    const targetMessage = messages.find(msg => msg.id === messageId);
+
+    if (targetMessage) {
+      const camelCaseMessage = useCamelCase(targetMessage);
+      fetchedReplyMessages.set(messageId, camelCaseMessage);
+      return camelCaseMessage;
+    }
+
+    // Cache null result to avoid repeated API calls
+    fetchedReplyMessages.set(messageId, null);
+    return null;
+  } catch (error) {
+    fetchedReplyMessages.set(messageId, null);
+    return null;
+  }
+};
+
 /**
  * Determines if a message should be grouped with the next message
  * @param {Number} index - Index of the current message
@@ -88,10 +134,26 @@ const getInReplyToMessage = parentMessage => {
 
   if (!inReplyToMessageId) return null;
 
-  // Find in-reply-to message in the messages prop
-  const replyMessage = props.messages?.find(
-    message => message.id === inReplyToMessageId
-  );
+  // Try to find in current messages first
+  let replyMessage = props.messages?.find(msg => msg.id === inReplyToMessageId);
+
+  // Then try store messages
+  if (!replyMessage && currentChat.value?.messages) {
+    replyMessage = currentChat.value.messages.find(
+      msg => msg.id === inReplyToMessageId
+    );
+  }
+
+  // Then check fetch cache
+  if (!replyMessage && fetchedReplyMessages.has(inReplyToMessageId)) {
+    replyMessage = fetchedReplyMessages.get(inReplyToMessageId);
+  }
+
+  // If still not found and we have conversation context, fetch it
+  if (!replyMessage && currentChat.value?.id) {
+    fetchReplyMessage(inReplyToMessageId, currentChat.value.id);
+    return null; // Let UI handle loading state
+  }
 
   return replyMessage ? useCamelCase(replyMessage) : null;
 };
@@ -113,6 +175,7 @@ const getInReplyToMessage = parentMessage => {
         :inbox-supports-reply-to="inboxSupportsReplyTo"
         :current-user-id="currentUserId"
         data-clarity-mask="True"
+        @retry="emit('retry', message)"
       />
     </template>
     <slot name="after" />

app/javascript/dashboard/components-next/message/bubbles/Base.vue

@@ -10,6 +10,10 @@ import { useI18n } from 'vue-i18n';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import { MESSAGE_VARIANTS, ORIENTATION } from '../constants';
 
+const props = defineProps({
+  hideMeta: { type: Boolean, default: false },
+});
+
 const { variant, orientation, inReplyTo, shouldGroupWithNext } =
   useMessageContext();
 const { t } = useI18n();
@@ -64,6 +68,13 @@ const scrollToMessage = () => {
   });
 };
 
+const shouldShowMeta = computed(
+  () =>
+    !props.hideMeta &&
+    !shouldGroupWithNext.value &&
+    variant.value !== MESSAGE_VARIANTS.ACTIVITY
+);
+
 const replyToPreview = computed(() => {
   if (!inReplyTo) return '';
 
@@ -93,16 +104,16 @@ const replyToPreview = computed(() => {
   >
     <div
       v-if="inReplyTo"
-      class="bg-n-alpha-black1 rounded-lg p-2 -mx-1 mb-2 cursor-pointer"
+      class="p-2 -mx-1 mb-2 rounded-lg cursor-pointer bg-n-alpha-black1"
       @click="scrollToMessage"
     >
-      <span class="line-clamp-2 break-all">
+      <span class="break-all line-clamp-2">
         {{ replyToPreview }}
       </span>
     </div>
     <slot />
     <MessageMeta
-      v-if="!shouldGroupWithNext && variant !== MESSAGE_VARIANTS.ACTIVITY"
+      v-if="shouldShowMeta"
       :class="[
         flexOrientationClass,
         variant === MESSAGE_VARIANTS.EMAIL ? 'px-3 pb-3' : '',

app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue

@@ -1,12 +1,13 @@
 <script setup>
 import { computed, useTemplateRef, ref, onMounted } from 'vue';
 import { Letter } from 'vue-letter';
+import { sanitizeTextForRender } from '@chatwoot/utils';
 import { allowedCssProperties } from 'lettersanitizer';
 
 import Icon from 'next/icon/Icon.vue';
-import { EmailQuoteExtractor } from './removeReply.js';
-import BaseBubble from 'next/message/bubbles/Base.vue';
+import { EmailQuoteExtractor } from 'dashboard/helper/emailQuoteExtractor.js';
 import FormattedContent from 'next/message/bubbles/Text/FormattedContent.vue';
+import BaseBubble from 'next/message/bubbles/Base.vue';
 import AttachmentChips from 'next/message/chips/AttachmentChips.vue';
 import EmailMeta from './EmailMeta.vue';
 import TranslationToggle from 'dashboard/components-next/message/TranslationToggle.vue';
@@ -37,15 +38,22 @@ const { hasTranslations, translationContent } =
 const originalEmailText = computed(() => {
   const text =
     contentAttributes?.value?.email?.textContent?.full ?? content.value;
-  return text?.replace(/\n/g, '<br>');
+  return sanitizeTextForRender(text);
 });
 
 const originalEmailHtml = computed(
   () =>
-    contentAttributes?.value?.email?.htmlContent?.full ??
+    contentAttributes?.value?.email?.htmlContent?.full ||
     originalEmailText.value
 );
 
+const hasEmailContent = computed(() => {
+  return (
+    contentAttributes?.value?.email?.textContent?.full ||
+    contentAttributes?.value?.email?.htmlContent?.full
+  );
+});
+
 const messageContent = computed(() => {
   // If translations exist and we're showing translations (not original)
   if (hasTranslations.value && !renderOriginal.value) {
@@ -136,7 +144,7 @@ const handleSeeOriginal = () => {
           </button>
         </div>
         <FormattedContent
-          v-if="isOutgoing && content"
+          v-if="isOutgoing && content && !hasEmailContent"
           class="text-n-slate-12"
           :content="messageContent"
         />

app/javascript/dashboard/components-next/message/bubbles/Email/removeReply.js

@@ -1,126 +0,0 @@
-// Quote detection strategies
-const QUOTE_INDICATORS = [
-  '.gmail_quote_container',
-  '.gmail_quote',
-  '.OutlookQuote',
-  '.email-quote',
-  '.quoted-text',
-  '.quote',
-  '[class*="quote"]',
-  '[class*="Quote"]',
-];
-
-// Regex patterns for quote identification
-const QUOTE_PATTERNS = [
-  /On .* wrote:/i,
-  /-----Original Message-----/i,
-  /Sent: /i,
-  /From: /i,
-];
-
-export class EmailQuoteExtractor {
-  /**
-   * Remove quotes from email HTML and return cleaned HTML
-   * @param {string} htmlContent - Full HTML content of the email
-   * @returns {string} HTML content with quotes removed
-   */
-  static extractQuotes(htmlContent) {
-    // Create a temporary DOM element to parse HTML
-    const tempDiv = document.createElement('div');
-    tempDiv.innerHTML = htmlContent;
-
-    // Remove elements matching class selectors
-    QUOTE_INDICATORS.forEach(selector => {
-      tempDiv.querySelectorAll(selector).forEach(el => {
-        el.remove();
-      });
-    });
-
-    // Remove text-based quotes
-    const textNodeQuotes = this.findTextNodeQuotes(tempDiv);
-    textNodeQuotes.forEach(el => {
-      el.remove();
-    });
-
-    return tempDiv.innerHTML;
-  }
-
-  /**
-   * Check if HTML content contains any quotes
-   * @param {string} htmlContent - Full HTML content of the email
-   * @returns {boolean} True if quotes are detected, false otherwise
-   */
-  static hasQuotes(htmlContent) {
-    const tempDiv = document.createElement('div');
-    tempDiv.innerHTML = htmlContent;
-
-    // Check for class-based quotes
-    // eslint-disable-next-line no-restricted-syntax
-    for (const selector of QUOTE_INDICATORS) {
-      if (tempDiv.querySelector(selector)) {
-        return true;
-      }
-    }
-
-    // Check for text-based quotes
-    const textNodeQuotes = this.findTextNodeQuotes(tempDiv);
-    return textNodeQuotes.length > 0;
-  }
-
-  /**
-   * Find text nodes that match quote patterns
-   * @param {Element} rootElement - Root element to search
-   * @returns {Element[]} Array of parent block elements containing quote-like text
-   */
-  static findTextNodeQuotes(rootElement) {
-    const quoteBlocks = [];
-    const treeWalker = document.createTreeWalker(
-      rootElement,
-      NodeFilter.SHOW_TEXT,
-      null,
-      false
-    );
-
-    for (
-      let currentNode = treeWalker.nextNode();
-      currentNode !== null;
-      currentNode = treeWalker.nextNode()
-    ) {
-      const isQuoteLike = QUOTE_PATTERNS.some(pattern =>
-        pattern.test(currentNode.textContent)
-      );
-
-      if (isQuoteLike) {
-        const parentBlock = this.findParentBlock(currentNode);
-        if (parentBlock && !quoteBlocks.includes(parentBlock)) {
-          quoteBlocks.push(parentBlock);
-        }
-      }
-    }
-
-    return quoteBlocks;
-  }
-
-  /**
-   * Find the closest block-level parent element by recursively traversing up the DOM tree.
-   * This method searches for common block-level elements like DIV, P, BLOCKQUOTE, and SECTION
-   * that contain the text node. It's used to identify and remove entire block-level elements
-   * that contain quote-like text, rather than just removing the text node itself. This ensures
-   * proper structural removal of quoted content while maintaining HTML integrity.
-   * @param {Node} node - Starting node to find parent
-   * @returns {Element|null} Block-level parent element
-   */
-  static findParentBlock(node) {
-    const blockElements = ['DIV', 'P', 'BLOCKQUOTE', 'SECTION'];
-    let current = node.parentElement;
-
-    while (current) {
-      if (blockElements.includes(current.tagName)) {
-        return current;
-      }
-      current = current.parentElement;
-    }
-
-    return null;
-  }
-}

app/javascript/dashboard/components-next/message/bubbles/VoiceCall.vue

@@ -0,0 +1,43 @@
+<script setup>
+import { computed } from 'vue';
+import BaseBubble from 'next/message/bubbles/Base.vue';
+import { useMessageContext } from '../provider.js';
+import { useVoiceCallStatus } from 'dashboard/composables/useVoiceCallStatus';
+
+const { contentAttributes } = useMessageContext();
+
+const data = computed(() => contentAttributes.value?.data);
+
+const status = computed(() => data.value?.status);
+const direction = computed(() => data.value?.call_direction);
+
+const { labelKey, subtextKey, bubbleIconBg, bubbleIconName } =
+  useVoiceCallStatus(status, direction);
+
+const containerRingClass = computed(() => {
+  return status.value === 'ringing' ? 'ring-1 ring-emerald-300' : '';
+});
+</script>
+
+<template>
+  <BaseBubble class="p-0 border-none" hide-meta>
+    <div
+      class="flex overflow-hidden flex-col w-full max-w-xs bg-white rounded-lg border border-slate-100 text-slate-900 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100"
+      :class="containerRingClass"
+    >
+      <div class="flex gap-3 items-center p-3 w-full">
+        <div
+          class="flex justify-center items-center rounded-full size-10 shrink-0"
+          :class="bubbleIconBg"
+        >
+          <span class="text-xl" :class="bubbleIconName" />
+        </div>
+
+        <div class="flex overflow-hidden flex-col flex-grow">
+          <span class="text-base font-medium truncate">{{ $t(labelKey) }}</span>
+          <span class="text-xs text-slate-500">{{ $t(subtextKey) }}</span>
+        </div>
+      </div>
+    </div>
+  </BaseBubble>
+</template>

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

@@ -1,8 +1,16 @@
 <script setup>
-import { computed, onMounted, useTemplateRef, ref } from 'vue';
+import {
+  computed,
+  onMounted,
+  useTemplateRef,
+  ref,
+  getCurrentInstance,
+} from 'vue';
 import Icon from 'next/icon/Icon.vue';
 import { timeStampAppendedURL } from 'dashboard/helper/URLHelper';
 import { downloadFile } from '@chatwoot/utils';
+import { useEmitter } from 'dashboard/composables/emitter';
+import { emitter } from 'shared/helpers/mitt';
 
 const { attachment } = defineProps({
   attachment: {
@@ -27,6 +35,8 @@ const currentTime = ref(0);
 const duration = ref(0);
 const playbackSpeed = ref(1);
 
+const { uid } = getCurrentInstance();
+
 const onLoadedMetadata = () => {
   duration.value = audioPlayer.value?.duration;
 };
@@ -43,6 +53,18 @@ onMounted(() => {
   audioPlayer.value.playbackRate = playbackSpeed.value;
 });
 
+// Listen for global audio play events and pause if it's not this audio
+useEmitter('pause_playing_audio', currentPlayingId => {
+  if (currentPlayingId !== uid && isPlaying.value) {
+    try {
+      audioPlayer.value.pause();
+    } catch {
+      /* ignore pause errors */
+    }
+    isPlaying.value = false;
+  }
+});
+
 const formatTime = time => {
   if (!time || Number.isNaN(time)) return '00:00';
   const minutes = Math.floor(time / 60);
@@ -70,6 +92,8 @@ const playOrPause = () => {
     audioPlayer.value.pause();
     isPlaying.value = false;
   } else {
+    // Emit event to pause all other audio
+    emitter.emit('pause_playing_audio', uid);
     audioPlayer.value.play();
     isPlaying.value = true;
   }
@@ -101,6 +125,7 @@ const downloadAudio = async () => {
     ref="audioPlayer"
     controls
     class="hidden"
+    playsinline
     @loadedmetadata="onLoadedMetadata"
     @timeupdate="onTimeUpdate"
     @ended="onEnd"

app/javascript/dashboard/components-next/message/constants.js

@@ -64,6 +64,7 @@ export const CONTENT_TYPES = {
   INPUT_CSAT: 'input_csat',
   INTEGRATIONS: 'integrations',
   STICKER: 'sticker',
+  VOICE_CALL: 'voice_call',
 };
 
 export const MEDIA_TYPES = [