feat: add CSAT & Form bubble (#10711)

![CleanShot 2025-01-17 at 14 02
40@2x](https://github.com/user-attachments/assets/7a19c4d7-7548-4b6a-92bb-0ddba181c428)

![CleanShot 2025-01-17 at 14 39
50@2x](https://github.com/user-attachments/assets/4251c944-2d1f-4cb5-817a-6352a644b743)

---------

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

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

@@ -34,6 +34,8 @@ import UnsupportedBubble from './bubbles/Unsupported.vue';
 import ContactBubble from './bubbles/Contact.vue';
 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 MessageError from './MessageError.vue';
 import ContextMenu from 'dashboard/modules/conversations/components/MessageContextMenu.vue';
@@ -260,6 +262,16 @@ const componentToRender = computed(() => {
     if (emailInboxTypes.includes(props.messageType)) return EmailBubble;
   }
 
+  if (props.contentType === CONTENT_TYPES.INPUT_CSAT) {
+    return CSATBubble;
+  }
+
+  if (
+    [CONTENT_TYPES.INPUT_SELECT, CONTENT_TYPES.FORM].includes(props.contentType)
+  ) {
+    return FormBubble;
+  }
+
   if (props.contentType === CONTENT_TYPES.INCOMING_EMAIL) {
     return EmailBubble;
   }

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

@@ -0,0 +1,45 @@
+<script setup>
+import { computed } from 'vue';
+import BaseBubble from './Base.vue';
+import { useI18n } from 'vue-i18n';
+import { CSAT_RATINGS } from 'shared/constants/messages';
+import { useMessageContext } from '../provider.js';
+
+const { contentAttributes } = useMessageContext();
+const { t } = useI18n();
+
+const response = computed(() => {
+  return contentAttributes.value?.submittedValues?.csatSurveyResponse ?? {};
+});
+
+const isRatingSubmitted = computed(() => {
+  return !!response.value.rating;
+});
+
+const rating = computed(() => {
+  if (isRatingSubmitted.value) {
+    return CSAT_RATINGS.find(
+      csatOption => csatOption.value === response.value.rating
+    );
+  }
+
+  return null;
+});
+</script>
+
+<template>
+  <BaseBubble class="px-4 py-3" data-bubble-name="csat">
+    <h4>{{ 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>
+
+      <dt v-if="response.feedbackMessage" class="text-n-slate-11 italic mt-2">
+        {{ t('CONVERSATION.FEEDBACK_TITLE') }}
+      </dt>
+      <dd>{{ response.feedbackMessage }}</dd>
+    </dl>
+  </BaseBubble>
+</template>

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

@@ -0,0 +1,62 @@
+<script setup>
+import { computed } from 'vue';
+import BaseBubble from './Base.vue';
+import { useI18n } from 'vue-i18n';
+import { CONTENT_TYPES } from '../constants.js';
+import { useMessageContext } from '../provider.js';
+
+const { content, contentAttributes, contentType } = useMessageContext();
+const { t } = useI18n();
+
+const formValues = computed(() => {
+  if (contentType.value === CONTENT_TYPES.FORM) {
+    const { items, submittedValues = [] } = contentAttributes.value;
+
+    if (submittedValues.length) {
+      return submittedValues.map(submittedValue => {
+        const item = items.find(
+          formItem => formItem.name === submittedValue.name
+        );
+        return {
+          title: submittedValue.value,
+          value: submittedValue.value,
+          label: item?.label,
+        };
+      });
+    }
+
+    return [];
+  }
+
+  if (contentType.value === CONTENT_TYPES.INPUT_SELECT) {
+    const [item] = contentAttributes.value?.submittedValues ?? [];
+
+    return [
+      {
+        title: item.title,
+        value: item.value,
+        label: '',
+      },
+    ];
+  }
+
+  return [];
+});
+</script>
+
+<template>
+  <BaseBubble class="px-4 py-3" data-bubble-name="csat">
+    <span v-dompurify-html="content" :title="content" />
+    <dl v-if="formValues.length" class="mt-4">
+      <template v-for="item in formValues" :key="item.title">
+        <dt class="text-n-slate-11 italic mt-2">
+          {{ item.label || t('CONVERSATION.RESPONSE') }}
+        </dt>
+        <dd>{{ item.title }}</dd>
+      </template>
+    </dl>
+    <div v-else class="my-2 font-medium">
+      {{ t('CONVERSATION.NO_RESPONSE') }}
+    </div>
+  </BaseBubble>
+</template>

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

@@ -54,6 +54,7 @@
     "SUCCESS_DELETE_MESSAGE": "Message deleted successfully",
     "FAIL_DELETE_MESSSAGE": "Couldn't delete message! Try again",
     "NO_RESPONSE": "No response",
+    "RESPONSE": "Response",
     "RATING_TITLE": "Rating",
     "FEEDBACK_TITLE": "Feedback",
     "REPLY_MESSAGE_NOT_FOUND": "Message not available",