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/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>