[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/components/ChatHeaderExpanded.vue

@@ -0,0 +1,51 @@
+<template>
+  <header class="header-expanded">
+    <div>
+      <h2 class="title">
+        {{ introHeading }}
+      </h2>
+      <p class="body">
+        {{ introBody }}
+      </p>
+    </div>
+  </header>
+</template>
+
+<script>
+export default {
+  name: 'ChatHeaderExpanded',
+  props: {
+    introHeading: {
+      type: String,
+      default: 'Hi there ! 🙌🏼',
+    },
+    introBody: {
+      type: String,
+      default:
+        'We make it simple to connect with us. Ask us anything, or share your feedback.',
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import '~widget/assets/scss/variables.scss';
+
+.header-expanded {
+  background: $color-woot;
+  padding: $space-large;
+  width: 100%;
+  box-sizing: border-box;
+  color: $color-white;
+
+  .title {
+    font-size: $font-size-mega;
+    margin-bottom: $space-two;
+  }
+
+  .body {
+    font-size: $font-size-medium;
+    line-height: 1.5;
+  }
+}
+</style>