get chat session storage working inside useEffect

LICENSE

@@ -1,3 +1,6 @@
+Contains information from the language-subtag-registry JSON Database (https://github.com/mattcg/language-subtag-registry/tree/master/data/json)
+which is made available under the ODC Attribution License (https://github.com/mattcg/language-subtag-registry/blob/master/LICENSE.md).
+
 Contains information from the language-subtag-registry JSON Database (https://github.com/mattcg/language-subtag-registry/tree/master/data/json) which is made available under the ODC Attribution License (https://github.com/mattcg/language-subtag-registry/blob/master/LICENSE.md).
 
 The files listed in this repository are licensed under the below license.  All other features and products are subject to separate agreements and certain functionality requires paid subscriptions to Yext products.

packages/chat-headless-react/src/ChatHeadlessProvider.tsx

@@ -1,5 +1,5 @@
 import { ChatHeadless, HeadlessConfig } from "@yext/chat-headless";
-import { PropsWithChildren, useMemo } from "react";
+import { PropsWithChildren, useMemo, useEffect, useState } from "react";
 import { Provider } from "react-redux";
 import { ChatHeadlessContext } from "./ChatHeadlessContext";
 import { updateClientSdk } from "./utils/clientSdk";
@@ -25,14 +25,24 @@ export function ChatHeadlessProvider(
   props: ChatHeadlessProviderProps
 ): JSX.Element {
   const { children, config } = props;
-  const headless = useMemo(
-    () => new ChatHeadless(updateClientSdk(config)),
-    [config]
-  );
+  const [deferLoad, setDeferLoad] = useState(config.saveToSessionStorage);
+
+  const headless = useMemo(() => {
+    const configWithoutSession = { ...config, saveToSessionStorage: false };
+    const headless = new ChatHeadless(updateClientSdk(configWithoutSession));
+    return headless;
+  }, [config]);
+  useEffect(() => {
+    if (!config.saveToSessionStorage || !headless) {
+      return;
+    }
+    headless.initSessionStorage();
+    setDeferLoad(false);
+  }, [headless, config]);
 
   return (
     <ChatHeadlessContext.Provider value={headless}>
-      <Provider store={headless.store}>{children}</Provider>
+      {deferLoad || <Provider store={headless.store}>{children}</Provider>}
     </ChatHeadlessContext.Provider>
   );
 }

packages/chat-headless/docs/chat-headless.chatheadless.initsessionstorage.md

@@ -0,0 +1,21 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@yext/chat-headless](./chat-headless.md) &gt; [ChatHeadless](./chat-headless.chatheadless.md) &gt; [initSessionStorage](./chat-headless.chatheadless.initsessionstorage.md)
+
+## ChatHeadless.initSessionStorage() method
+
+Loads the [ConversationState](./chat-headless.conversationstate.md) from session storage, if present, and adds a listener to keep the conversation state in sync with the stored state
+
+**Signature:**
+
+```typescript
+initSessionStorage(): void;
+```
+**Returns:**
+
+void
+
+## Remarks
+
+This is called by default if [HeadlessConfig.saveToSessionStorage](./chat-headless.headlessconfig.savetosessionstorage.md) is true.
+

packages/chat-headless/docs/chat-headless.chatheadless.md

@@ -31,6 +31,7 @@ export declare class ChatHeadless
 |  [addListener(listener)](./chat-headless.chatheadless.addlistener.md) |  | Adds a listener for a specific state value of type T. |
 |  [addMessage(message)](./chat-headless.chatheadless.addmessage.md) |  | Adds a new message to [ConversationState.messages](./chat-headless.conversationstate.messages.md) |
 |  [getNextMessage(text, source)](./chat-headless.chatheadless.getnextmessage.md) |  | Performs a Chat API request for the next message generated by chat bot using the conversation state (e.g. message history and notes). Update the state with the response data. |
+|  [initSessionStorage()](./chat-headless.chatheadless.initsessionstorage.md) |  | Loads the [ConversationState](./chat-headless.conversationstate.md) from session storage, if present, and adds a listener to keep the conversation state in sync with the stored state |
 |  [report(eventPayload)](./chat-headless.chatheadless.report.md) |  | Send Chat related analytics event to Yext Analytics API. |
 |  [restartConversation()](./chat-headless.chatheadless.restartconversation.md) |  | Resets all fields within [ConversationState](./chat-headless.conversationstate.md) |
 |  [setChatLoadingStatus(isLoading)](./chat-headless.chatheadless.setchatloadingstatus.md) |  | Sets [ConversationState.isLoading](./chat-headless.conversationstate.isloading.md) to the specified loading state |

packages/chat-headless/etc/chat-headless.api.md

@@ -37,6 +37,7 @@ export class ChatHeadless {
     addListener<T>(listener: StateListener<T>): Unsubscribe;
     addMessage(message: Message): void;
     getNextMessage(text?: string, source?: MessageSource): Promise<MessageResponse | undefined>;
+    initSessionStorage(): void;
     report(eventPayload: Omit<ChatEventPayLoad, "chat"> & DeepPartial<Pick<ChatEventPayLoad, "chat">>): Promise<void>;
     restartConversation(): void;
     setChatLoadingStatus(isLoading: boolean): void;

packages/chat-headless/src/ChatHeadless.ts

@@ -64,18 +64,7 @@ export class ChatHeadless {
       ...this.config.analyticsConfig,
     });
     if (this.config.saveToSessionStorage) {
-      this.setState({
-        ...this.state,
-        conversation: loadSessionState(),
-      });
-      this.addListener({
-        valueAccessor: (s) => s.conversation,
-        callback: () =>
-          sessionStorage.setItem(
-            STATE_SESSION_STORAGE_KEY,
-            JSON.stringify(this.state.conversation)
-          ),
-      });
+      this.initSessionStorage();
     }
   }
 
@@ -136,6 +125,32 @@ export class ChatHeadless {
     };
   }
 
+  /**
+   * Loads the {@link ConversationState} from session storage, if present,
+   * and adds a listener to keep the conversation state in sync with the stored
+   * state
+   *
+   * @remarks
+   * This is called by default if {@link HeadlessConfig.saveToSessionStorage} is
+   * true.
+   *
+   * @public
+   */
+  initSessionStorage() {
+    this.setState({
+      ...this.state,
+      conversation: loadSessionState(),
+    });
+    this.addListener({
+      valueAccessor: (s) => s.conversation,
+      callback: () =>
+        sessionStorage.setItem(
+          STATE_SESSION_STORAGE_KEY,
+          JSON.stringify(this.state.conversation)
+        ),
+    });
+  }
+
   /**
    * Send Chat related analytics event to Yext Analytics API.
    *