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/AgentMessage.vue

@@ -1,42 +1,49 @@
 <template>
-  <div class="agent-message">
-    <div class="avatar-wrap">
-      <thumbnail
-        v-if="message.showAvatar"
-        :src="avatarUrl"
-        size="24px"
-        :username="agentName"
-      />
-    </div>
-    <div class="message-wrap">
-      <AgentMessageBubble
-        v-if="showTextBubble"
-        :content-type="contentType"
-        :message-content-attributes="messageContentAttributes"
-        :message-id="message.id"
-        :message-type="messageType"
-        :message="message.content"
-      />
-      <div v-if="hasAttachment" class="chat-bubble has-attachment agent">
-        <file-bubble
-          v-if="message.attachment && message.attachment.file_type !== 'image'"
-          :url="message.attachment.data_url"
-        />
-        <image-bubble
-          v-else
-          :url="message.attachment.data_url"
-          :thumb="message.attachment.thumb_url"
-          :readable-time="readableTime"
+  <div class="agent-bubble">
+    <div class="agent-message">
+      <div class="avatar-wrap">
+        <thumbnail
+          v-if="message.showAvatar || hasRecordedResponse"
+          :src="avatarUrl"
+          size="24px"
+          :username="agentName"
         />
       </div>
-      <p v-if="message.showAvatar" class="agent-name">
-        {{ agentName }}
-      </p>
+      <div class="message-wrap">
+        <AgentMessageBubble
+          v-if="showTextBubble && shouldDisplayAgentMessage"
+          :content-type="contentType"
+          :message-content-attributes="messageContentAttributes"
+          :message-id="message.id"
+          :message-type="messageType"
+          :message="message.content"
+        />
+        <div v-if="hasAttachment" class="chat-bubble has-attachment agent">
+          <file-bubble
+            v-if="
+              message.attachment && message.attachment.file_type !== 'image'
+            "
+            :url="message.attachment.data_url"
+          />
+          <image-bubble
+            v-else
+            :url="message.attachment.data_url"
+            :thumb="message.attachment.thumb_url"
+            :readable-time="readableTime"
+          />
+        </div>
+        <p v-if="message.showAvatar || hasRecordedResponse" class="agent-name">
+          {{ agentName }}
+        </p>
+      </div>
     </div>
+
+    <UserMessage v-if="hasRecordedResponse" :message="responseMessage" />
   </div>
 </template>
 
 <script>
+import UserMessage from 'widget/components/UserMessage';
 import AgentMessageBubble from 'widget/components/AgentMessageBubble';
 import timeMixin from 'dashboard/mixins/time';
 import ImageBubble from 'widget/components/ImageBubble';
@@ -48,8 +55,9 @@ export default {
   name: 'AgentMessage',
   components: {
     AgentMessageBubble,
-    Thumbnail,
     ImageBubble,
+    Thumbnail,
+    UserMessage,
     FileBubble,
   },
   mixins: [timeMixin],
@@ -60,12 +68,22 @@ export default {
     },
   },
   computed: {
+    shouldDisplayAgentMessage() {
+      if (
+        this.contentType === 'input_select' &&
+        this.messageContentAttributes.submitted_values &&
+        !this.message.content
+      ) {
+        return false;
+      }
+      return true;
+    },
     hasAttachment() {
       return !!this.message.attachment;
     },
     showTextBubble() {
       const { message } = this;
-      return !!message.content;
+      return !message.attachment;
     },
     readableTime() {
       const { created_at: createdAt = '' } = this.message;
@@ -88,25 +106,59 @@ export default {
         return 'Bot';
       }
 
-      return this.message.sender ? this.message.sender.name : '';
+      return this.message.sender ? this.message.sender.name : 'Bot';
     },
     avatarUrl() {
+      // eslint-disable-next-line
+      const BotImage = require('dashboard/assets/images/chatwoot_bot.png')
       if (this.message.message_type === MESSAGE_TYPE.TEMPLATE) {
-        // eslint-disable-next-line
-        return require('dashboard/assets/images/chatwoot_bot.png');
+        return BotImage;
       }
 
-      return this.message.sender ? this.message.sender.avatar_url : '';
+      return this.message.sender ? this.message.sender.avatar_url : BotImage;
+    },
+    hasRecordedResponse() {
+      return (
+        this.messageContentAttributes.submitted_email ||
+        (this.messageContentAttributes.submitted_values &&
+          this.contentType !== 'form')
+      );
+    },
+    responseMessage() {
+      if (this.messageContentAttributes.submitted_email) {
+        return { content: this.messageContentAttributes.submitted_email };
+      }
+
+      if (this.messageContentAttributes.submitted_values) {
+        if (this.contentType === 'input_select') {
+          const [
+            selectionOption = {},
+          ] = this.messageContentAttributes.submitted_values;
+          return { content: selectionOption.title || selectionOption.value };
+        }
+      }
+      return '';
     },
   },
 };
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style lang="scss" scoped>
+<style lang="scss">
 @import '~widget/assets/scss/variables.scss';
 
 .conversation-wrap {
+  .agent-bubble {
+    margin-bottom: $space-micro;
+    & + .agent-bubble {
+      .agent-message {
+        .chat-bubble {
+          border-top-left-radius: $space-smaller;
+        }
+      }
+    }
+  }
+
   .agent-message {
     align-items: flex-end;
     display: flex;
@@ -115,6 +167,10 @@ export default {
     margin: 0 0 $space-micro $space-small;
     max-width: 88%;
 
+    & + .user-message {
+      margin-top: $space-one;
+    }
+
     .avatar-wrap {
       height: $space-medium;
       width: $space-medium;
@@ -147,22 +203,3 @@ export default {
   }
 }
 </style>
-<style lang="scss">
-@import '~widget/assets/scss/variables.scss';
-
-.conversation-wrap {
-  .agent-message {
-    + .agent-message {
-      margin-bottom: $space-micro;
-
-      .chat-bubble {
-        border-top-left-radius: $space-smaller;
-      }
-    }
-
-    + .user-message {
-      margin-top: $space-normal;
-    }
-  }
-}
-</style>

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,
+      });
     },
   },
 };

app/javascript/widget/components/UserMessageBubble.vue

@@ -48,7 +48,7 @@ export default {
   padding: $space-small $space-normal;
   text-align: left;
 
-  a {
+  > a {
     color: $color-primary;
     word-break: break-all;
   }
@@ -56,7 +56,7 @@ export default {
   &.user {
     border-bottom-right-radius: $space-smaller;
 
-    a {
+    > a {
       color: $color-white;
     }
   }

app/javascript/widget/components/template/Article.vue

@@ -0,0 +1,62 @@
+<template>
+  <div v-if="!!items.length" class="chat-bubble agent">
+    <div v-for="item in items" :key="item.link" class="article-item">
+      <a :href="item.link" target="_blank" rel="noopener noreferrer nofollow">
+        <span class="title">
+          <i class="ion-link icon"></i>{{ item.title }}
+        </span>
+        <span class="description">{{ truncateMessage(item.description) }}</span>
+      </a>
+    </div>
+  </div>
+</template>
+
+<script>
+import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+
+export default {
+  mixins: [messageFormatterMixin],
+  props: {
+    items: {
+      type: Array,
+      default: () => [],
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import '~widget/assets/scss/variables.scss';
+
+.article-item {
+  border-bottom: 1px solid $color-border;
+  font-size: $font-size-default;
+  padding: $space-small 0;
+
+  a {
+    color: $color-body;
+    text-decoration: none;
+  }
+
+  .title {
+    color: $color-woot;
+    display: block;
+    font-weight: $font-weight-medium;
+
+    .icon {
+      color: $color-body;
+      font-size: $font-size-medium;
+      padding-right: $space-small;
+    }
+  }
+
+  .description {
+    display: block;
+    margin-top: $space-smaller;
+  }
+
+  &:last-child {
+    border-bottom: 0;
+  }
+}
+</style>

app/javascript/widget/components/template/EmailInput.vue

@@ -21,9 +21,6 @@
         <spinner v-else />
       </button>
     </form>
-    <span v-else>
-      <i>{{ messageContentAttributes.submitted_email }}</i>
-    </span>
   </div>
 </template>
 
@@ -71,7 +68,7 @@ export default {
   },
   methods: {
     onSubmit() {
-      this.$store.dispatch('message/updateContactAttributes', {
+      this.$store.dispatch('message/update', {
         email: this.email,
         messageId: this.messageId,
       });