[Feature] Email collect message hooks (#331)

- Add email collect hook on creating conversation
- Merge contact if it already exist

app/javascript/widget/components/AgentMessageBubble.vue

@@ -1,20 +1,42 @@
 <template>
-  <div class="chat-bubble agent" v-html="formatMessage(message)"></div>
+  <div class="chat-bubble agent">
+    <span v-html="formatMessage(message)"></span>
+    <email-input
+      v-if="shouldShowInput"
+      :message-id="messageId"
+      :message-content-attributes="messageContentAttributes"
+    />
+  </div>
 </template>
 
 <script>
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import EmailInput from './template/EmailInput';
 
 export default {
   name: 'AgentMessageBubble',
+  components: {
+    EmailInput,
+  },
   mixins: [messageFormatterMixin],
   props: {
     message: String,
+    contentType: String,
+    messageType: Number,
+    messageId: Number,
+    messageContentAttributes: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  computed: {
+    shouldShowInput() {
+      return this.contentType === 'input_email' && this.messageType === 3;
+    },
   },
 };
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss">
 @import '~widget/assets/scss/variables.scss';