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

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: 'hello@chatwoot.com',
+      })
+    ).toEqual('<strong>hello@chatwoot.com</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/>'
+    );
+  });
+});