Feature: Rich Message Types (#610)

Co-authored-by: Pranav Raj S <pranavrajs@gmail.com>
Co-authored-by: Nithin David Thomas <webofnithin@gmail.com>

app/javascript/widget/components/AgentMessageBubble.vue

@@ -1,21 +1,64 @@
 <template>
-  <div class="chat-bubble agent">
-    <span v-html="formatMessage(message)"></span>
-    <email-input
-      v-if="shouldShowInput"
-      :message-id="messageId"
-      :message-content-attributes="messageContentAttributes"
-    />
+  <div>
+    <div
+      v-if="!isCards && !isOptions && !isForm && !isArticle"
+      class="chat-bubble agent"
+    >
+      <span v-html="formatMessage(message)"></span>
+      <email-input
+        v-if="isTemplateEmail"
+        :message-id="messageId"
+        :message-content-attributes="messageContentAttributes"
+      />
+    </div>
+    <div v-if="isOptions">
+      <chat-options
+        :title="message"
+        :options="messageContentAttributes.items"
+        :hide-fields="!!messageContentAttributes.submitted_values"
+        @click="onOptionSelect"
+      >
+      </chat-options>
+    </div>
+    <chat-form
+      v-if="isForm"
+      :items="messageContentAttributes.items"
+      :submitted-values="messageContentAttributes.submitted_values"
+      @submit="onFormSubmit"
+    >
+    </chat-form>
+    <div v-if="isCards">
+      <chat-card
+        v-for="item in messageContentAttributes.items"
+        :key="item.title"
+        :media-url="item.media_url"
+        :title="item.title"
+        :description="item.description"
+        :actions="item.actions"
+      >
+      </chat-card>
+    </div>
+    <div v-if="isArticle">
+      <chat-article :items="messageContentAttributes.items"></chat-article>
+    </div>
   </div>
 </template>
 
 <script>
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import ChatCard from 'shared/components/ChatCard';
+import ChatForm from 'shared/components/ChatForm';
+import ChatOptions from 'shared/components/ChatOptions';
+import ChatArticle from './template/Article';
 import EmailInput from './template/EmailInput';
 
 export default {
   name: 'AgentMessageBubble',
   components: {
+    ChatArticle,
+    ChatCard,
+    ChatForm,
+    ChatOptions,
     EmailInput,
   },
   mixins: [messageFormatterMixin],
@@ -30,8 +73,44 @@ export default {
     },
   },
   computed: {
-    shouldShowInput() {
-      return this.contentType === 'input_email' && this.messageType === 3;
+    isTemplate() {
+      return this.messageType === 3;
+    },
+    isTemplateEmail() {
+      return this.contentType === 'input_email';
+    },
+    isCards() {
+      return this.contentType === 'cards';
+    },
+    isOptions() {
+      return this.contentType === 'input_select';
+    },
+    isForm() {
+      return this.contentType === 'form';
+    },
+    isArticle() {
+      return this.contentType === 'article';
+    },
+  },
+  methods: {
+    onResponse(messageResponse) {
+      this.$store.dispatch('message/update', messageResponse);
+    },
+    onOptionSelect(selectedOption) {
+      this.onResponse({
+        submittedValues: [selectedOption],
+        messageId: this.messageId,
+      });
+    },
+    onFormSubmit(formValues) {
+      const formValuesAsArray = Object.keys(formValues).map(key => ({
+        name: key,
+        value: formValues[key],
+      }));
+      this.onResponse({
+        submittedValues: formValuesAsArray,
+        messageId: this.messageId,
+      });
     },
   },
 };