Live chat widget preview #2441 (#2523)

* update widget preview on storybook

* removed default value for logo

* add online dot

* resolve PR comments

- split widget to head, body & footer
- updated reply time to a select box

* update spacing with variables

* update reply-time with i18

* update with spacing variables

* update padding with space variable

* resolved PR comments

* update background color

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>

app/javascript/dashboard/modules/widget-preview/components/WidgetFooter.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="footer-wrap">
+    <div class="input-area"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'WidgetFooter',
+};
+</script>
+
+<style scoped lang="scss">
+.footer-wrap {
+  flex-shrink: 0;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  &::before {
+    content: '';
+    position: absolute;
+    top: var(--space-one);
+    left: 0;
+    width: 100%;
+    height: var(--space-one);
+    opacity: 0.1;
+    background: var(--color-background);
+  }
+
+  .input-area {
+    background-color: var(--white);
+    border-radius: var(--border-radius-normal);
+    height: var(--space-larger);
+    margin: var(--space-two);
+  }
+}
+</style>