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/stories/Widget.stories.js

@@ -0,0 +1,29 @@
+import Widget from '../components/Widget';
+
+const ReplyTime = {
+  'In a few minutes': 'in_a_few_minutes',
+  'In a few hours': 'in_a_few_hours',
+  'In a few day': 'in_a_day',
+};
+
+export default {
+  title: 'components/Widget',
+  component: Widget,
+  argTypes: {
+    replyTime: {
+      control: {
+        type: 'select',
+        options: ReplyTime,
+      },
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { Widget },
+  template: '<Widget v-bind="$props" />',
+});
+
+export const DefaultWidget = Template.bind({});
+DefaultWidget.args = {};