resolves #106 Cannot parametrize the max number of messages in history

correi-f · francoisno · commit a5937bd0c3bb · 2022-09-10T18:21:27.000+02:00
diff --git a/README.md b/README.md
@@ -257,8 +257,9 @@ A `TockTheme` can be used as a value of a `ThemeProvider` of [`emotion-theming`]
 | `timeoutBetweenMessage`                  | `number?`                             | Timeout between message                                          |
 | `widgets`                                | `any?`                                | Custom display component                                         |
 | `disableSse`                             | `boolean?`                            | Disable SSE (not even trying)                                    |
-| `accessibility`                          | `TockAccessibility?`                  | Object for overriding role and label accessibility attributes    |
-| `localStorage`                           | `boolean?`                            | Enable history local storage                                     |
+| `accessibility`                          | `TockAccessibility`                   | Object for overriding role and label accessibility attributes    |
+| ~~`localStorage`~~                       | ~~`boolean?`~~                        | Enable history local storage (@deprecated)                       |
+| `localStorageHistory`                    | `TockLocalStorage?`                   | Object for history local storage                                 |
 
 #### `TockAccessibility`
 
@@ -275,6 +276,13 @@ A `TockTheme` can be used as a value of a `ThemeProvider` of [`emotion-theming`]
 | `sendButtonLabel`                 | `string?`                  | Message of the send message button image aria-label attribute (overrides 'Send a message')          |
 | `clearButtonLabel`                | `string?`                  | Message of the clear messages button image aria-label attribute (overrides 'Clear messages')        |
 
+#### `TockLocalStorage`
+
+| Property name                     | Type                   | Description                                                                 |
+|-----------------------------------|------------------------|-----------------------------------------------------------------------------|
+| `enable`                          | `boolean?`             | Enable history local storage                                                |
+| `maxNumberMessages`               | `number?`              | Max number of messages in the history local storage (default 10)            |
+
 #### `CarouselAccessibility`
 
 | Property name             | Type                   | Description                                                                                        |
@@ -313,12 +321,12 @@ renderChat(
 );
 ```
 
-#### Local storage
+#### Local storage history
 
-The optional `localStorage` makes it possible to provide a history session of messages.
+The optional `localStorageHistory` makes it possible to provide a history session of messages.
 This history loads at the creation of the chat and is stored in the locale storage of the browser.
 
-The `localStorage` parameter is a boolean, by default set to false.
+The `localStorageHistory` parameter is an object, by default not set (enable then to false).
 
 Example:
 
@@ -328,7 +336,11 @@ renderChat(
     '<TOCK_BOT_API_URL>',
     undefined,
     {},
-    { localStorage: true },
+    { localStorageHistory: {
+        enable: true,
+        maxNumberMessages: 15, // by default 10 messages max
+      }
+    },
 );
 ```
 
diff --git a/src/TockLocalStorage.ts b/src/TockLocalStorage.ts
@@ -0,0 +1,6 @@
+export interface TockLocalStorage {
+  enable?: boolean;
+  maxNumberMessages?: number;
+}
+
+export default TockLocalStorage;
diff --git a/src/TockOptions.ts b/src/TockOptions.ts
@@ -1,4 +1,5 @@
 import TockAccessibility from 'TockAccessibility';
+import TockLocalStorage from 'TockLocalStorage';
 
 export interface TockOptions {
   // An initial message to send to the backend to trigger a welcome sequence
@@ -10,7 +11,11 @@ export interface TockOptions {
   widgets?: any;
   disableSse?: boolean;
   accessibility?: TockAccessibility;
+  /**
+   * @deprecated since version 22.3.1
+   */
   localStorage?: boolean;
+  localStorageHistory?: TockLocalStorage;
 }
 
 export default TockOptions;
diff --git a/src/components/Chat/Chat.tsx b/src/components/Chat/Chat.tsx
@@ -4,6 +4,7 @@ import ChatInput from '../ChatInput';
 import Container from '../Container';
 import Conversation from '../Conversation';
 import TockAccessibility from '../../TockAccessibility';
+import TockLocalStorage from 'TockLocalStorage';
 
 export interface ChatProps {
   endPoint: string;
@@ -14,7 +15,7 @@ export interface ChatProps {
   extraHeadersProvider?: () => Promise<Record<string, string>>;
   disableSse?: boolean;
   accessibility?: TockAccessibility;
-  localStorage?: boolean;
+  localStorageHistory?: TockLocalStorage;
 }
 
 const Chat: (props: ChatProps) => JSX.Element = ({
@@ -26,7 +27,7 @@ const Chat: (props: ChatProps) => JSX.Element = ({
   extraHeadersProvider = undefined,
   disableSse = false,
   accessibility = {},
-  localStorage = false,
+  localStorageHistory = {},
 }: ChatProps) => {
   const {
     messages,
@@ -45,7 +46,7 @@ const Chat: (props: ChatProps) => JSX.Element = ({
     endPoint,
     extraHeadersProvider,
     disableSse,
-    localStorage,
+    localStorageHistory,
   );
 
   useEffect(() => {
@@ -54,15 +55,14 @@ const Chat: (props: ChatProps) => JSX.Element = ({
       if (referralParameter) {
         sendReferralParameter(referralParameter);
       }
-      const history = window.localStorage.getItem('tockMessageHistory');
-      if (
-        messages.length === 0 &&
-        openingMessage &&
-        (localStorage === false || !history)
-      ) {
+      const history =
+        localStorageHistory?.enable == true
+          ? window.localStorage.getItem('tockMessageHistory')
+          : undefined;
+      if (messages.length === 0 && openingMessage && !history) {
         sendOpeningMessage(openingMessage);
       }
-      if (localStorage === true && history) {
+      if (history) {
         addHistory(
           JSON.parse(history),
           JSON.parse(
diff --git a/src/renderChat.tsx b/src/renderChat.tsx
@@ -34,9 +34,14 @@ export const renderChat: (
           extraHeadersProvider={options.extraHeadersProvider}
           disableSse={options.disableSse}
           accessibility={options.accessibility}
-          localStorage={
-            options.localStorage && storageAvailable('localStorage')
-          }
+          {...(storageAvailable('localStorage') && {
+            localStorageHistory: {
+              enable:
+                options.localStorage ||
+                options.localStorageHistory?.enable === true,
+              maxNumberMessages: options.localStorageHistory?.maxNumberMessages,
+            },
+          })}
         />
       </TockContext>
     </ThemeProvider>,
diff --git a/src/useTock.ts b/src/useTock.ts
@@ -19,6 +19,7 @@ import {
 } from './TockContext';
 import { Sse } from './Sse';
 import useLocalTools, { UseLocalTools } from './useLocalTools';
+import TockLocalStorage from 'TockLocalStorage';
 
 export interface UseTock {
   messages: Message[];
@@ -91,12 +92,12 @@ const useTock: (
   tockEndPoint: string,
   extraHeadersProvider?: () => Promise<Record<string, string>>,
   disableSse?: boolean,
-  localStorage?: boolean,
+  localStorageHistory?: TockLocalStorage,
 ) => UseTock = (
   tockEndPoint: string,
   extraHeadersProvider?: () => Promise<Record<string, string>>,
   disableSse?: boolean,
-  localStorage?: boolean,
+  localStorageHistory?: TockLocalStorage,
 ) => {
   const {
     messages,
@@ -106,7 +107,9 @@ const useTock: (
     sseInitializing,
   }: TockState = useTockState();
   const dispatch: Dispatch<TockAction> = useTockDispatch();
-  const { clearMessages }: UseLocalTools = useLocalTools(localStorage);
+  const { clearMessages }: UseLocalTools = useLocalTools(
+    localStorageHistory?.enable ?? false,
+  );
 
   const startLoading: () => void = () => {
     dispatch({
@@ -126,13 +129,14 @@ const useTock: (
     message: any,
   ) => {
     let history: any = window.localStorage.getItem('tockMessageHistory');
+    const maxNumberMessages = localStorageHistory?.maxNumberMessages ?? 10;
     if (!history) {
       history = [];
     } else {
       history = JSON.parse(history);
     }
-    if (history.length >= 10) {
-      history.shift();
+    if (history.length >= maxNumberMessages) {
+      history.splice(0, history.length - maxNumberMessages + 1);
     }
     history.push(message);
     window.localStorage.setItem('tockMessageHistory', JSON.stringify(history));
@@ -150,7 +154,7 @@ const useTock: (
         type: 'SET_QUICKREPLIES',
         quickReplies: quickReplies,
       });
-      if (localStorage) {
+      if (localStorageHistory?.enable ?? false) {
         window.localStorage.setItem(
           'tockQuickReplyHistory',
           JSON.stringify(quickReplies),
@@ -185,7 +189,7 @@ const useTock: (
                 type: MessageType.carousel,
               } as Carousel;
             }
-            if (localStorage) {
+            if (localStorageHistory?.enable ?? false) {
               recordResponseToLocaleSession(message);
             }
             return message;
@@ -253,7 +257,7 @@ const useTock: (
           message,
           type: MessageType.message,
         } as TextMessage;
-        if (localStorage) {
+        if (localStorageHistory?.enable ?? false) {
           recordResponseToLocaleSession(messageToDispatch);
         }
         dispatch({
@@ -314,7 +318,7 @@ const useTock: (
       return Promise.resolve();
     } else if (button.payload) {
       setQuickReplies([]);
-      if (localStorage) {
+      if (localStorageHistory?.enable ?? false) {
         recordResponseToLocaleSession({
           author: 'user',
           message: button.label,
