fix: Fix bot message rendering in dashboard (chatwoot#1743)

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

@@ -72,7 +72,7 @@ import Spinner from 'shared/components/Spinner';
 import contentTypeMixin from 'shared/mixins/contentTypeMixin';
 import BubbleActions from './bubble/Actions';
 import { MESSAGE_TYPE, MESSAGE_STATUS } from 'shared/constants/messages';
-
+import { generateBotMessageContent } from './helpers/botMessageContentHelper';
 export default {
   components: {
     BubbleActions,
@@ -99,7 +99,19 @@ export default {
   },
   computed: {
     message() {
-      return this.formatMessage(this.data.content, this.isATweet);
+      const botMessageContent = generateBotMessageContent(
+        this.contentType,
+        this.contentAttributes,
+        this.$t('CONVERSATION.NO_RESPONSE')
+      );
+      let messageContent =
+        this.formatMessage(this.data.content, this.isATweet) +
+        botMessageContent;
+
+      return messageContent;
+    },
+    contentAttributes() {
+      return this.data.content_attributes || {};
     },
     sender() {
       return this.data.sender || {};

app/javascript/dashboard/components/widgets/conversation/helpers/botMessageContentHelper.js

@@ -0,0 +1,57 @@
+const generateInputSelectContent = (contentType, contentAttributes) => {
+  const { submitted_values: submittedValues = [] } = contentAttributes;
+  const [selectedOption] = submittedValues;
+
+  if (selectedOption && selectedOption.title) {
+    return `<strong>${selectedOption.title}</strong>`;
+  }
+  return '';
+};
+
+const generateInputEmailContent = (contentType, contentAttributes) => {
+  const { submitted_email: submittedEmail = '' } = contentAttributes;
+  if (submittedEmail) {
+    return `<strong>${submittedEmail}</strong>`;
+  }
+  return '';
+};
+
+const generateFormContent = (
+  contentType,
+  contentAttributes,
+  noResponseText
+) => {
+  const { items, submitted_values: submittedValues = [] } = contentAttributes;
+  if (submittedValues.length) {
+    const submittedObject = submittedValues.reduce((acc, keyValuePair) => {
+      acc[keyValuePair.name] = keyValuePair.value;
+      return acc;
+    }, {});
+    let formMessageContent = '';
+    items.forEach(item => {
+      formMessageContent += `<div>${item.label}</div>`;
+      const response = submittedObject[item.name] || noResponseText;
+      formMessageContent += `<strong>${response}</strong><br/><br/>`;
+    });
+    return formMessageContent;
+  }
+  return '';
+};
+
+export const generateBotMessageContent = (
+  contentType,
+  contentAttributes,
+  noResponseText = 'No response'
+) => {
+  const contentTypeMethods = {
+    input_select: generateInputSelectContent,
+    input_email: generateInputEmailContent,
+    form: generateFormContent,
+  };
+
+  const contentTypeMethod = contentTypeMethods[contentType];
+  if (contentTypeMethod && typeof contentTypeMethod === 'function') {
+    return contentTypeMethod(contentType, contentAttributes, noResponseText);
+  }
+  return '';
+};

app/javascript/dashboard/components/widgets/conversation/helpers/specs/botMessageContentHelper.spec.js

@@ -0,0 +1,39 @@
+import { generateBotMessageContent } from '../botMessageContentHelper';
+
+describe('#generateBotMessageContent', () => {
+  it('return correct input_select content', () => {
+    expect(
+      generateBotMessageContent('input_select', {
+        submitted_values: [{ value: 'salad', title: 'Salad' }],
+      })
+    ).toEqual('<strong>Salad</strong>');
+  });
+
+  it('return correct input_email content', () => {
+    expect(
+      generateBotMessageContent('input_email', {
+        submitted_email: '[email protected]',
+      })
+    ).toEqual('<strong>[email protected]</strong>');
+  });
+
+  it('return correct form content', () => {
+    expect(
+      generateBotMessageContent('form', {
+        items: [
+          {
+            name: 'large_text',
+            label: 'This a large text',
+          },
+          {
+            name: 'email',
+            label: 'Email',
+          },
+        ],
+        submitted_values: [{ name: 'large_text', value: 'Large Text Content' }],
+      })
+    ).toEqual(
+      '<div>This a large text</div><strong>Large Text Content</strong><br/><br/><div>Email</div><strong>No response</strong><br/><br/>'
+    );
+  });
+});

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

@@ -25,6 +25,7 @@
     "REMOVE_SELECTION": "Remove Selection",
     "DOWNLOAD": "Download",
     "UPLOADING_ATTACHMENTS": "Uploading attachments...",
+    "NO_RESPONSE": "No response",
     "HEADER": {
       "RESOLVE_ACTION": "Resolve",
       "REOPEN_ACTION": "Reopen",