Merge branch 'develop' into feat/voice-channel

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

@@ -187,12 +187,20 @@ const isBotOrAgentMessage = computed(() => {
     return true;
   }
   const senderId = props.senderId ?? props.sender?.id;
-  const senderType = props.senderType ?? props.sender?.type;
+  const senderType = props.sender?.type ?? props.senderType;
 
   if (!senderType || !senderId) {
     return true;
   }
 
+  if (
+    [SENDER_TYPES.AGENT_BOT, SENDER_TYPES.CAPTAIN_ASSISTANT].includes(
+      senderType
+    )
+  ) {
+    return true;
+  }
+
   return senderType.toLowerCase() === SENDER_TYPES.USER.toLowerCase();
 });
 
@@ -317,11 +325,7 @@ const componentToRender = computed(() => {
 });
 
 const shouldShowContextMenu = computed(() => {
-  return !(
-    props.status === MESSAGE_STATUS.FAILED ||
-    props.status === MESSAGE_STATUS.PROGRESS ||
-    props.contentAttributes?.isUnsupported
-  );
+  return !props.contentAttributes?.isUnsupported;
 });
 
 const isBubble = computed(() => {
@@ -346,12 +350,23 @@ const contextMenuEnabledOptions = computed(() => {
   const hasAttachments = !!(props.attachments && props.attachments.length > 0);
 
   const isOutgoing = props.messageType === MESSAGE_TYPES.OUTGOING;
+  const isFailedOrProcessing =
+    props.status === MESSAGE_STATUS.FAILED ||
+    props.status === MESSAGE_STATUS.PROGRESS;
 
   return {
     copy: hasText,
-    delete: hasText || hasAttachments,
-    cannedResponse: isOutgoing && hasText,
-    replyTo: !props.private && props.inboxSupportsReplyTo.outgoing,
+    delete:
+      (hasText || hasAttachments) &&
+      !isFailedOrProcessing &&
+      !isMessageDeleted.value,
+    cannedResponse: isOutgoing && hasText && !isMessageDeleted.value,
+    copyLink: !isFailedOrProcessing,
+    translate: !isFailedOrProcessing && !isMessageDeleted.value && hasText,
+    replyTo:
+      !props.private &&
+      props.inboxSupportsReplyTo.outgoing &&
+      !isFailedOrProcessing,
   };
 });
 
@@ -416,7 +431,7 @@ const avatarInfo = computed(() => {
   const { name, type, avatarUrl, thumbnail } = sender || {};
 
   // If sender type is agent bot, use avatarUrl
-  if (type === SENDER_TYPES.AGENT_BOT) {
+  if ([SENDER_TYPES.AGENT_BOT, SENDER_TYPES.CAPTAIN_ASSISTANT].includes(type)) {
     return {
       name: name ?? '',
       src: avatarUrl ?? '',
@@ -501,8 +516,8 @@ provideMessageContext({
       <div
         class="[grid-area:bubble] flex"
         :class="{
-          'ltr:pl-8 rtl:pr-8 justify-end': orientation === ORIENTATION.RIGHT,
-          'ltr:pr-8 rtl:pl-8': orientation === ORIENTATION.LEFT,
+          'ltr:ml-8 rtl:mr-8 justify-end': orientation === ORIENTATION.RIGHT,
+          'ltr:mr-8 rtl:ml-8': orientation === ORIENTATION.LEFT,
           'min-w-0': variant === MESSAGE_VARIANTS.EMAIL,
           'min-w-0 max-w-full': componentToRender === VoiceCallBubble,
         }"
@@ -519,7 +534,7 @@ provideMessageContext({
     </div>
     <div v-if="shouldShowContextMenu" class="context-menu-wrap">
       <ContextMenu
-        v-if="isBubble && !isMessageDeleted"
+        v-if="isBubble"
         :context-menu-position="contextMenuPosition"
         :is-open="showContextMenu"
         :enabled-options="contextMenuEnabledOptions"

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

@@ -40,7 +40,7 @@ const senderName = computed(() => {
             <Icon :icon="icon" class="text-white size-4" />
           </slot>
         </div>
-        <div class="space-y-1">
+        <div class="space-y-1 overflow-hidden">
           <div v-if="senderName" class="text-n-slate-12 text-sm truncate">
             {{
               t(senderTranslationKey, {

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

@@ -2,10 +2,10 @@
 import { computed } from 'vue';
 import BaseBubble from './Base.vue';
 import { useI18n } from 'vue-i18n';
-import { CSAT_RATINGS } from 'shared/constants/messages';
+import { CSAT_RATINGS, CSAT_DISPLAY_TYPES } from 'shared/constants/messages';
 import { useMessageContext } from '../provider.js';
 
-const { contentAttributes } = useMessageContext();
+const { contentAttributes, content } = useMessageContext();
 const { t } = useI18n();
 
 const response = computed(() => {
@@ -16,6 +16,14 @@ const isRatingSubmitted = computed(() => {
   return !!response.value.rating;
 });
 
+const displayType = computed(() => {
+  return contentAttributes.value?.displayType || CSAT_DISPLAY_TYPES.EMOJI;
+});
+
+const isStarRating = computed(() => {
+  return displayType.value === CSAT_DISPLAY_TYPES.STAR;
+});
+
 const rating = computed(() => {
   if (isRatingSubmitted.value) {
     return CSAT_RATINGS.find(
@@ -25,16 +33,33 @@ const rating = computed(() => {
 
   return null;
 });
+
+const starRatingValue = computed(() => {
+  return response.value.rating || 0;
+});
 </script>
 
 <template>
   <BaseBubble class="px-4 py-3" data-bubble-name="csat">
-    <h4>{{ t('CONVERSATION.CSAT_REPLY_MESSAGE') }}</h4>
+    <h4>{{ content || t('CONVERSATION.CSAT_REPLY_MESSAGE') }}</h4>
     <dl v-if="isRatingSubmitted" class="mt-4">
       <dt class="text-n-slate-11 italic">
         {{ t('CONVERSATION.RATING_TITLE') }}
       </dt>
-      <dd>{{ t(rating.translationKey) }}</dd>
+      <dd v-if="!isStarRating">
+        {{ t(rating.translationKey) }}
+      </dd>
+      <dd v-else class="flex mt-1">
+        <span v-for="n in 5" :key="n" class="text-2xl mr-1">
+          <i
+            :class="[
+              n <= starRatingValue
+                ? 'i-ri-star-fill text-n-amber-9'
+                : 'i-ri-star-line text-n-slate-10',
+            ]"
+          />
+        </span>
+      </dd>
 
       <dt v-if="response.feedbackMessage" class="text-n-slate-11 italic mt-2">
         {{ t('CONVERSATION.FEEDBACK_TITLE') }}

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

@@ -21,6 +21,7 @@ export const SENDER_TYPES = {
   CONTACT: 'Contact',
   USER: 'User',
   AGENT_BOT: 'agent_bot',
+  CAPTAIN_ASSISTANT: 'captain_assistant',
 };
 
 export const ORIENTATION = {