Message date support - Load chat message history

README.md

@@ -197,12 +197,14 @@ As of v3.0, messages now have an optional ID that can be added on creation.If yo
   - params:
     - text: string (supports markdown)
     - id: string (optional)
+    - date: Date (optional)
   - Method to add a new message written as a response to a user input.
 
 - **addUserMessage**
   - params: 
     - text: string (supports markdown)
     - id: string (optional)
+    - date: Date (optional)
   - This method will add a new message written as a user. Keep in mind it will not trigger the prop handleNewUserMessage()
 
 - **addLinkSnippet**

index.d.ts

@@ -8,9 +8,11 @@ declare const Widget: ElementType;
 
 export function addUserMessage(text: string): void;
 export function addUserMessage(text: string, id: string): void;
+export function addUserMessage(text: string, id: string, date: Date): void;
 
 export function addResponseMessage(text: string): void;
 export function addResponseMessage(text: string, id: string): void;
+export function addResponseMessage(text: string, id: string, date: Date): void;
 
 export function addLinkSnippet(link: { link: string, title: string, target?: string }): void;
 export function addLinkSnippet(link: { link: string, title: string, target?: string }, id: string): void;

src/store/actions/index.ts

@@ -15,19 +15,21 @@ export function toggleInputDisabled(): actionsTypes.ToggleInputDisabled {
   };
 }
 
-export function addUserMessage(text: string, id?: string): actionsTypes.AddUserMessage {
+export function addUserMessage(text: string, id?: string, date?: Date): actionsTypes.AddUserMessage {
   return {
     type: actionsTypes.ADD_NEW_USER_MESSAGE,
     text,
-    id
+    id,
+    date,
   };
 }
 
-export function addResponseMessage(text: string, id?: string): actionsTypes.AddResponseMessage {
+export function addResponseMessage(text: string, id?: string, date?: Date): actionsTypes.AddResponseMessage {
   return {
     type: actionsTypes.ADD_NEW_RESPONSE_MESSAGE,
     text,
-    id
+    id,
+    date,
   };
 }
 

src/store/actions/types.ts

@@ -30,12 +30,14 @@ export interface AddUserMessage {
   type: typeof ADD_NEW_USER_MESSAGE;
   text: string;
   id?: string;
+  date?: Date;
 }
 
 export interface AddResponseMessage {
   type: typeof ADD_NEW_RESPONSE_MESSAGE;
   text: string;
   id?: string;
+  date?: Date;
 }
 
 export interface ToggleMsgLoader {

src/store/dispatcher.ts

@@ -4,12 +4,12 @@ import store from '.';
 import * as actions from './actions';
 import { LinkParams, ImageState } from './types';
 
-export function addUserMessage(text: string, id?: string) {
-  store.dispatch(actions.addUserMessage(text, id));
+export function addUserMessage(text: string, id?: string, date?: Date) {
+  store.dispatch(actions.addUserMessage(text, id, date));
 }
 
-export function addResponseMessage(text: string, id?: string) {
-  store.dispatch(actions.addResponseMessage(text, id));
+export function addResponseMessage(text: string, id?: string, date?: Date) {
+  store.dispatch(actions.addResponseMessage(text, id, date));
 }
 
 export function addLinkSnippet(link: LinkParams, id?: string) {

src/store/reducers/messagesReducer.ts

@@ -22,11 +22,11 @@ const initialState = {
 };
 
 const messagesReducer = {
-  [ADD_NEW_USER_MESSAGE]: (state: MessagesState, { text, showClientAvatar, id }) =>
-    ({ ...state, messages: [...state.messages, createNewMessage(text, MESSAGE_SENDER.CLIENT, id)]}),
+  [ADD_NEW_USER_MESSAGE]: (state: MessagesState, { text, showClientAvatar, id, date }) =>
+    ({ ...state, messages: [...state.messages, createNewMessage(text, MESSAGE_SENDER.CLIENT, id, date)]}),
 
-  [ADD_NEW_RESPONSE_MESSAGE]: (state: MessagesState, { text, id }) =>
-    ({ ...state, messages: [...state.messages, createNewMessage(text, MESSAGE_SENDER.RESPONSE, id)], badgeCount: state.badgeCount + 1 }),
+  [ADD_NEW_RESPONSE_MESSAGE]: (state: MessagesState, { text, id, date }) =>
+    ({ ...state, messages: [...state.messages, createNewMessage(text, MESSAGE_SENDER.RESPONSE, id, date)], badgeCount: state.badgeCount + 1 }),
 
   [ADD_NEW_LINK_SNIPPET]: (state: MessagesState, { link, id }) =>
     ({ ...state, messages: [...state.messages, createLinkSnippet(link, id)] }),

src/utils/messages.ts

@@ -12,13 +12,14 @@ export function createNewMessage(
   text: string,
   sender: string,
   id?: string,
+  date?: Date,
 ): MessageI {
   return {
     type: MESSAGES_TYPES.TEXT,
     component: Message,
     text,
     sender,
-    timestamp: new Date(),
+    timestamp: date ? date : new Date(),
     showAvatar: true,
     customId: id,
     unread: sender === MESSAGE_SENDER.RESPONSE