[Feature] Website live chat (#187)

Co-authored-by: Nithin David Thomas <webofnithin@gmail.com>
Co-authored-by: Sojan Jose <sojan@pepalo.com>

app/javascript/widget/views/Home.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="home">
+    <div class="header-wrap">
+      <ChatHeaderExpanded />
+    </div>
+    <div class="conversation-wrap">
+      <ConversationWrap :messages="getConversation" />
+    </div>
+    <div class="footer-wrap">
+      <ChatFooter :on-send-message="handleSendMessage" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapActions, mapGetters } from 'vuex';
+
+// import { DEFAULT_CONVERSATION } from 'widget/store/modules/conversation';
+import ChatFooter from 'widget/components/ChatFooter.vue';
+import ChatHeaderExpanded from 'widget/components/ChatHeaderExpanded.vue';
+import ConversationWrap from 'widget/components/ConversationWrap.vue';
+
+export default {
+  name: 'Home',
+  components: {
+    ChatFooter,
+    ChatHeaderExpanded,
+    ConversationWrap,
+  },
+  methods: {
+    ...mapActions('conversation', ['sendMessage']),
+    handleSendMessage(content) {
+      this.sendMessage({
+        content,
+      });
+    },
+    scrollToBottom() {
+      const container = this.$el.querySelector('.conversation-wrap');
+      container.scrollTop = container.scrollHeight;
+    },
+  },
+  computed: {
+    ...mapGetters('conversation', ['getConversation']),
+  },
+  mounted() {
+    this.scrollToBottom();
+  },
+  updated() {
+    this.scrollToBottom();
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import '~widget/assets/scss/woot.scss';
+
+.home {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  background: $color-background;
+
+  .header-wrap {
+    flex-shrink: 0;
+  }
+
+  .conversation-wrap {
+    flex: 1;
+    overflow-y: auto;
+  }
+
+  .footer-wrap {
+    flex-shrink: 0;
+  }
+}
+</style>