diff --git a/app/javascript/shared/components/DateSeparator.vue b/app/javascript/shared/components/DateSeparator.vue
new file mode 100644
index 000000000000..6a4e9f6d4e13
--- /dev/null
+++ b/app/javascript/shared/components/DateSeparator.vue
@@ -0,0 +1,48 @@
+
+
+ {{ date }}
+
+
+
+
+
+
diff --git a/app/javascript/shared/components/specs/DateSeparator.spec.js b/app/javascript/shared/components/specs/DateSeparator.spec.js
new file mode 100644
index 000000000000..92f54c360794
--- /dev/null
+++ b/app/javascript/shared/components/specs/DateSeparator.spec.js
@@ -0,0 +1,14 @@
+import { mount } from '@vue/test-utils';
+import DateSeparator from '../DateSeparator';
+
+describe('Spinner', () => {
+ test('matches snapshot', () => {
+ const wrapper = mount(DateSeparator, {
+ propsData: {
+ date: 'Nov 18, 2019',
+ },
+ });
+ expect(wrapper.isVueInstance()).toBeTruthy();
+ expect(wrapper.element).toMatchSnapshot();
+ });
+});
diff --git a/app/javascript/shared/components/specs/__snapshots__/DateSeparator.spec.js.snap b/app/javascript/shared/components/specs/__snapshots__/DateSeparator.spec.js.snap
new file mode 100644
index 000000000000..ebed84bcfa64
--- /dev/null
+++ b/app/javascript/shared/components/specs/__snapshots__/DateSeparator.spec.js.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Spinner matches snapshot 1`] = `
+
+
+ Nov 18, 2019
+
+
+`;
diff --git a/app/javascript/shared/helpers/DateHelper.js b/app/javascript/shared/helpers/DateHelper.js
new file mode 100644
index 000000000000..961ca5b61f4a
--- /dev/null
+++ b/app/javascript/shared/helpers/DateHelper.js
@@ -0,0 +1,13 @@
+import moment from 'moment';
+
+class DateHelper {
+ constructor(date) {
+ this.date = moment(date * 1000);
+ }
+
+ format(dateFormat = 'MMM DD, YYYY') {
+ return this.date.format(dateFormat);
+ }
+}
+
+export default DateHelper;
diff --git a/app/javascript/shared/helpers/specs/DateHelper.sepc.js b/app/javascript/shared/helpers/specs/DateHelper.sepc.js
new file mode 100644
index 000000000000..3641bc369108
--- /dev/null
+++ b/app/javascript/shared/helpers/specs/DateHelper.sepc.js
@@ -0,0 +1,13 @@
+import DateSeparator from '../DateSeparator';
+
+describe('#DateSeparator', () => {
+ it('should format correctly without dateFormat', () => {
+ expect(new DateSeparator(1576340626).format()).toEqual('Dec 14, 2019');
+ });
+
+ it('should format correctly without dateFormat', () => {
+ expect(new DateSeparator(1576340626).format('DD-MM-YYYY')).toEqual(
+ '14-12-2019'
+ );
+ });
+});
diff --git a/app/javascript/widget/components/ConversationWrap.vue b/app/javascript/widget/components/ConversationWrap.vue
index 262779f53da3..51c9784717c6 100755
--- a/app/javascript/widget/components/ConversationWrap.vue
+++ b/app/javascript/widget/components/ConversationWrap.vue
@@ -4,11 +4,14 @@
-
+
+
+
+
@@ -17,6 +20,7 @@