Merge branch 'develop' into feat/captain-limits

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/components-next/message/bubbles/Image.vue

@@ -5,6 +5,8 @@ import Button from 'next/button/Button.vue';
 import Icon from 'next/icon/Icon.vue';
 import { useSnakeCase } from 'dashboard/composables/useTransformKeys';
 import { useMessageContext } from '../provider.js';
+import { downloadFile } from '@chatwoot/utils';
+
 import GalleryView from 'dashboard/components/widgets/conversation/components/GalleryView.vue';
 
 const emit = defineEmits(['error']);
@@ -23,16 +25,8 @@ const handleError = () => {
 };
 
 const downloadAttachment = async () => {
-  const response = await fetch(attachment.value.dataUrl);
-  const blob = await response.blob();
-  const url = window.URL.createObjectURL(blob);
-  const a = document.createElement('a');
-  a.href = url;
-  a.download = `attachment${attachment.value.extension || ''}`;
-  document.body.appendChild(a);
-  a.click();
-  window.URL.revokeObjectURL(url);
-  document.body.removeChild(a);
+  const { fileType, dataUrl, extension } = attachment.value;
+  downloadFile({ url: dataUrl, type: fileType, extension });
 };
 </script>
 

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

@@ -2,6 +2,7 @@
 import { computed, onMounted, useTemplateRef, ref } from 'vue';
 import Icon from 'next/icon/Icon.vue';
 import { timeStampAppendedURL } from 'dashboard/helper/URLHelper';
+import { downloadFile } from '@chatwoot/utils';
 
 const { attachment } = defineProps({
   attachment: {
@@ -73,17 +74,8 @@ const onEnd = () => {
 };
 
 const downloadAudio = async () => {
-  const response = await fetch(timeStampURL.value);
-  const blob = await response.blob();
-  const url = window.URL.createObjectURL(blob);
-  const anchor = document.createElement('a');
-  anchor.href = url;
-  const filename = timeStampURL.value.split('/').pop().split('?')[0] || 'audio';
-  anchor.download = filename;
-  document.body.appendChild(anchor);
-  anchor.click();
-  window.URL.revokeObjectURL(url);
-  document.body.removeChild(anchor);
+  const { fileType, dataUrl, extension } = attachment;
+  downloadFile({ url: dataUrl, type: fileType, extension });
 };
 </script>
 

app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue

@@ -3,6 +3,7 @@ import { ref, computed, onMounted } from 'vue';
 import { useStoreGetters } from 'dashboard/composables/store';
 import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
 import { messageTimestamp } from 'shared/helpers/timeHelper';
+import { downloadFile } from '@chatwoot/utils';
 
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 
@@ -117,14 +118,11 @@ const onClickChangeAttachment = (attachment, index) => {
 };
 
 const onClickDownload = () => {
-  const { file_type: type, data_url: url } = activeAttachment.value;
+  const { file_type: type, data_url: url, extension } = activeAttachment.value;
   if (!Object.values(ALLOWED_FILE_TYPES).includes(type)) {
     return;
   }
-  const link = document.createElement('a');
-  link.href = url;
-  link.download = `attachment.${type}`;
-  link.click();
+  downloadFile({ url, type, extension });
 };
 
 const onRotate = type => {

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",

package.json

@@ -33,7 +33,7 @@
     "@breezystack/lamejs": "^1.2.7",
     "@chatwoot/ninja-keys": "1.2.3",
     "@chatwoot/prosemirror-schema": "1.1.1-next",
-    "@chatwoot/utils": "^0.0.30",
+    "@chatwoot/utils": "^0.0.31",
     "@formkit/core": "^1.6.7",
     "@formkit/vue": "^1.6.7",
     "@hcaptcha/vue3-hcaptcha": "^1.3.0",

pnpm-lock.yaml

@@ -23,8 +23,8 @@ importers:
         specifier: 1.1.1-next
         version: 1.1.1-next
       '@chatwoot/utils':
-        specifier: ^0.0.30
-        version: 0.0.30
+        specifier: ^0.0.31
+        version: 0.0.31
       '@formkit/core':
         specifier: ^1.6.7
         version: 1.6.7
@@ -404,8 +404,8 @@ packages:
   '@chatwoot/prosemirror-schema@1.1.1-next':
     resolution: {integrity: sha512-/M2qZ+ZF7GlQNt1riwVP499fvp3hxSqd5iy8hxyF9pkj9qQ+OKYn5JK+v3qwwqQY3IxhmNOn1Lp6tm7vstrd9Q==}
 
-  '@chatwoot/utils@0.0.30':
-    resolution: {integrity: sha512-UfKn2GUV/9PF7zoj17dAoyx5RZkJihjjclhWTtG0SHRfRizKS/pg0SpXSt9ToAEDeNeRtqmD7RrVMUaso8TZxw==}
+  '@chatwoot/utils@0.0.31':
+    resolution: {integrity: sha512-15ir4Jf6q4/gIFC6KqgWZu/NEWYnaw5j2/JB+CYGzZ5a/e+rXG7nmY/sObvRqCnMW6LCS2++shlVQdTxle3CyQ==}
     engines: {node: '>=10'}
 
   '@codemirror/commands@6.7.0':
@@ -5154,7 +5154,7 @@ snapshots:
       prosemirror-utils: 1.2.2(prosemirror-model@1.22.3)(prosemirror-state@1.4.3)
       prosemirror-view: 1.34.1
 
-  '@chatwoot/utils@0.0.30':
+  '@chatwoot/utils@0.0.31':
     dependencies:
       date-fns: 2.29.3