Add canSendMessage state & update ChatHeadless constructor

apps/test-site/src/App.tsx

@@ -24,6 +24,7 @@ function App() {
 
 function ChatComponent() {
   const isLoading = useChatState((s) => s.conversation.isLoading);
+  const canSendMessage = useChatState((s) => s.conversation.canSendMessage);
   const messages = useChatState((s) => s.conversation.messages);
   const [input, setInput] = useState("");
   const actions = useChatActions();
@@ -57,7 +58,12 @@ function ChatComponent() {
         <p key={i}>{`${m.source}: ${m.text}`}</p>
       ))}
       {isLoading && <p>loading...</p>}
-      <input type="text" value={input} onChange={onInputChange} />
+      <input
+        type="text"
+        value={input}
+        disabled={!canSendMessage}
+        onChange={onInputChange}
+      />
       <button onClick={onClick}>Send</button>
       <button onClick={onClickStream}>Send (Stream)</button>
     </div>

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

@@ -9,13 +9,12 @@ Constructs a new instance of the [ChatHeadless](./chat-headless.chatheadless.md)
 **Signature:**
 
 ```typescript
-constructor(config: ChatConfig, saveToSessionStorage?: boolean);
+constructor(config: HeadlessConfig);
 ```
 
 ## Parameters
 
 |  Parameter | Type | Description |
 |  --- | --- | --- |
-|  config | ChatConfig | The configuration for the [ChatHeadless](./chat-headless.chatheadless.md) instance |
-|  saveToSessionStorage | boolean | _(Optional)_ Whether to save the instance's [ConversationState](./chat-headless.conversationstate.md) to session storage. Defaults to true. |
+|  config | [HeadlessConfig](./chat-headless.headlessconfig.md) | The configuration for the [ChatHeadless](./chat-headless.chatheadless.md) instance |
 

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

@@ -9,7 +9,7 @@ Performs a Chat API request for the next message generated by chat bot using the
 **Signature:**
 
 ```typescript
-getNextMessage(text?: string, source?: MessageSource): Promise<MessageResponse>;
+getNextMessage(text?: string, source?: MessageSource): Promise<MessageResponse | undefined>;
 ```
 
 ## Parameters
@@ -21,7 +21,7 @@ getNextMessage(text?: string, source?: MessageSource): Promise<MessageResponse>;
 
 **Returns:**
 
-Promise&lt;MessageResponse&gt;
+Promise&lt;MessageResponse \| undefined&gt;
 
 a Promise of a response from the Chat API
 

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

@@ -16,7 +16,7 @@ export declare class ChatHeadless
 
 |  Constructor | Modifiers | Description |
 |  --- | --- | --- |
-|  [(constructor)(config, saveToSessionStorage)](./chat-headless.chatheadless._constructor_.md) |  | Constructs a new instance of the [ChatHeadless](./chat-headless.chatheadless.md) class. |
+|  [(constructor)(config)](./chat-headless.chatheadless._constructor_.md) |  | Constructs a new instance of the [ChatHeadless](./chat-headless.chatheadless.md) class. |
 
 ## Properties
 

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

@@ -9,7 +9,7 @@ Performs a Chat Stream API request for the next message generated by chat bot us
 **Signature:**
 
 ```typescript
-streamNextMessage(text?: string, source?: MessageSource): Promise<MessageResponse>;
+streamNextMessage(text?: string, source?: MessageSource): Promise<MessageResponse | undefined>;
 ```
 
 ## Parameters
@@ -21,7 +21,7 @@ streamNextMessage(text?: string, source?: MessageSource): Promise<MessageRespons
 
 **Returns:**
 
-Promise&lt;MessageResponse&gt;
+Promise&lt;MessageResponse \| undefined&gt;
 
 a Promise of the full response from the Chat Stream API
 

packages/chat-headless/docs/chat-headless.conversationstate.cansendmessage.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@yext/chat-headless](./chat-headless.md) &gt; [ConversationState](./chat-headless.conversationstate.md) &gt; [canSendMessage](./chat-headless.conversationstate.cansendmessage.md)
+
+## ConversationState.canSendMessage property
+
+Whether a new message can be sent to Chat API. This is set to false when a previous message is being processed.
+
+**Signature:**
+
+```typescript
+canSendMessage: boolean;
+```

packages/chat-headless/docs/chat-headless.conversationstate.isloading.md

@@ -4,10 +4,10 @@
 
 ## ConversationState.isLoading property
 
-Whether the next message is currently processing or has finished processing.
+Whether the next message is currently processing or has started responding.
 
 **Signature:**
 
 ```typescript
-isLoading?: boolean;
+isLoading: boolean;
 ```

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

@@ -16,8 +16,9 @@ export interface ConversationState
 
 |  Property | Modifiers | Type | Description |
 |  --- | --- | --- | --- |
+|  [canSendMessage](./chat-headless.conversationstate.cansendmessage.md) |  | boolean | Whether a new message can be sent to Chat API. This is set to false when a previous message is being processed. |
 |  [conversationId?](./chat-headless.conversationstate.conversationid.md) |  | string | _(Optional)_ The id of the current conversation. |
-|  [isLoading?](./chat-headless.conversationstate.isloading.md) |  | boolean | _(Optional)_ Whether the next message is currently processing or has finished processing. |
+|  [isLoading](./chat-headless.conversationstate.isloading.md) |  | boolean | Whether the next message is currently processing or has started responding. |
 |  [messages](./chat-headless.conversationstate.messages.md) |  | Message\[\] | The messages in a conversation. |
 |  [notes?](./chat-headless.conversationstate.notes.md) |  | MessageNotes | _(Optional)_ Information relevant to the current state of the conversation, generated and provided by Chat API. |
 

packages/chat-headless/docs/chat-headless.headlessconfig.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; [HeadlessConfig](./chat-headless.headlessconfig.md)
+
+## HeadlessConfig interface
+
+The configuration for a SearchHeadless instance.
+
+**Signature:**
+
+```typescript
+export interface HeadlessConfig extends ChatConfig 
+```
+**Extends:** ChatConfig
+
+## Properties
+
+|  Property | Modifiers | Type | Description |
+|  --- | --- | --- | --- |
+|  [saveToSessionStorage?](./chat-headless.headlessconfig.savetosessionstorage.md) |  | boolean | _(Optional)_ Whether to save the instance's [ConversationState](./chat-headless.conversationstate.md) to session storage. Defaults to true. |
+

packages/chat-headless/docs/chat-headless.headlessconfig.savetosessionstorage.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@yext/chat-headless](./chat-headless.md) &gt; [HeadlessConfig](./chat-headless.headlessconfig.md) &gt; [saveToSessionStorage](./chat-headless.headlessconfig.savetosessionstorage.md)
+
+## HeadlessConfig.saveToSessionStorage property
+
+Whether to save the instance's [ConversationState](./chat-headless.conversationstate.md) to session storage. Defaults to true.
+
+**Signature:**
+
+```typescript
+saveToSessionStorage?: boolean;
+```

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

@@ -15,6 +15,7 @@
 |  Interface | Description |
 |  --- | --- |
 |  [ConversationState](./chat-headless.conversationstate.md) | Maintains the data for the current conversation. |
+|  [HeadlessConfig](./chat-headless.headlessconfig.md) | The configuration for a SearchHeadless instance. |
 |  [MetaState](./chat-headless.metastate.md) | Maintains the metadata for Chat Headless. |
 |  [State](./chat-headless.state.md) | The state representing a ChatHeadless instance. |
 |  [StateListener](./chat-headless.statelistener.md) | Represents a listener for a specific value of type T in the state. |

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

@@ -25,9 +25,9 @@ export { ChatConfig }
 
 // @public
 export class ChatHeadless {
-    constructor(config: ChatConfig, saveToSessionStorage?: boolean);
+    constructor(config: HeadlessConfig);
     addListener<T>(listener: StateListener<T>): Unsubscribe;
-    getNextMessage(text?: string, source?: MessageSource): Promise<MessageResponse>;
+    getNextMessage(text?: string, source?: MessageSource): Promise<MessageResponse | undefined>;
     restartConversation(): void;
     setChatLoadingStatus(isLoading: boolean): void;
     setContext(context: any): void;
@@ -37,19 +37,25 @@ export class ChatHeadless {
     get state(): State;
     // @internal
     get store(): Store;
-    streamNextMessage(text?: string, source?: MessageSource): Promise<MessageResponse>;
+    streamNextMessage(text?: string, source?: MessageSource): Promise<MessageResponse | undefined>;
 }
 
 // @public
 export interface ConversationState {
+    canSendMessage: boolean;
     conversationId?: string;
-    isLoading?: boolean;
+    isLoading: boolean;
     messages: Message[];
     notes?: MessageNotes;
 }
 
 export { EndEvent }
 
+// @public
+export interface HeadlessConfig extends ChatConfig {
+    saveToSessionStorage?: boolean;
+}
+
 export { Message }
 
 export { MessageNotes }

packages/chat-headless/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yext/chat-headless",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "A library for powering UI components for Yext Chat integrations",
   "main": "./dist/commonjs/index.js",
   "module": "./dist/esm/index.js",

packages/chat-headless/src/ChatHeadless.ts

@@ -1,5 +1,4 @@
 import {
-  ChatConfig,
   ChatCore,
   Message,
   MessageNotes,
@@ -11,6 +10,7 @@ import { State } from "./models/state";
 import { ReduxStateManager } from "./ReduxStateManager";
 import {
   loadSessionState,
+  setCanSendMessage,
   setConversationId,
   setIsLoading,
   setMessageNotes,
@@ -20,6 +20,7 @@ import {
 import { Store, Unsubscribe } from "@reduxjs/toolkit";
 import { StateListener } from "./models";
 import { setContext } from "./slices/meta";
+import { HeadlessConfig } from "./models/HeadlessConfig";
 
 /**
  * Provides the functionality for interacting with a Chat Bot
@@ -37,12 +38,15 @@ export class ChatHeadless {
    * @public
    *
    * @param config - The configuration for the {@link ChatHeadless} instance
-   * @param saveToSessionStorage - Whether to save the instance's {@link ConversationState} to session storage. Defaults to true.
    */
-  constructor(config: ChatConfig, saveToSessionStorage = true) {
-    this.chatCore = new ChatCore(config);
+  constructor(config: HeadlessConfig) {
+    const defaultConfig: Partial<HeadlessConfig> = {
+      saveToSessionStorage: true,
+    };
+    const mergedConfig = { ...defaultConfig, ...config };
+    this.chatCore = new ChatCore(mergedConfig);
     this.stateManager = new ReduxStateManager();
-    if (saveToSessionStorage) {
+    if (mergedConfig.saveToSessionStorage) {
       this.setState({
         ...this.state,
         conversation: loadSessionState(),
@@ -149,6 +153,17 @@ export class ChatHeadless {
     this.stateManager.dispatch(setConversationId(id));
   }
 
+  /**
+   * Sets {@link ConversationState.canSendMessage} to the specified state
+   *
+   * @internal
+   *
+   * @param canSendMessage - the state to set
+   */
+  private setCanSendMessage(canSendMessage: boolean) {
+    this.stateManager.dispatch(setCanSendMessage(canSendMessage));
+  }
+
   /**
    * Resets all fields within {@link ConversationState}
    *
@@ -157,6 +172,7 @@ export class ChatHeadless {
   restartConversation() {
     this.setConversationId(undefined);
     this.setChatLoadingStatus(false);
+    this.setCanSendMessage(true);
     this.setMessageNotes({});
     this.setMessages([]);
   }
@@ -190,7 +206,7 @@ export class ChatHeadless {
   async getNextMessage(
     text?: string,
     source: MessageSource = MessageSource.USER
-  ): Promise<MessageResponse> {
+  ): Promise<MessageResponse | undefined> {
     return this.nextMessageHandler(
       async () => {
         const { messages, conversationId, notes } = this.state.conversation;
@@ -229,7 +245,7 @@ export class ChatHeadless {
   async streamNextMessage(
     text?: string,
     source: MessageSource = MessageSource.USER
-  ): Promise<MessageResponse> {
+  ): Promise<MessageResponse | undefined> {
     return this.nextMessageHandler(
       async () => {
         let messageResponse: MessageResponse | undefined = undefined;
@@ -245,6 +261,7 @@ export class ChatHeadless {
           context: this.state.meta.context,
         });
         stream.addEventListener(StreamEventName.StartEvent, ({ data }) => {
+          this.setChatLoadingStatus(false);
           this.setMessageNotes(data);
         });
         stream.addEventListener(
@@ -277,8 +294,10 @@ export class ChatHeadless {
 
   /**
    * Setup relevant state before hitting Chat API endpoint for next message, such as
-   * setting loading status and appending new user's message in conversation state.
-   * Also update loading state when the next message is received or an error occurred.
+   * setting loading status, "canSendMessage" status, and appending new user's message
+   * in conversation state.
+   *
+   * @internal
    *
    * @param nextMessageFn - function to invoke to get next message
    * @param text - the text of the next message
@@ -289,7 +308,14 @@ export class ChatHeadless {
     nextMessageFn: () => Promise<MessageResponse>,
     text?: string,
     source: MessageSource = MessageSource.USER
-  ): Promise<MessageResponse> {
+  ): Promise<MessageResponse | undefined> {
+    if (!this.state.conversation.canSendMessage) {
+      console.warn(
+        "Unable to process new message at the moment. Another message is still being processed."
+      );
+      return;
+    }
+    this.setCanSendMessage(false);
     this.setChatLoadingStatus(true);
     let messages: Message[] = this.state.conversation.messages;
     if (text && text.length > 0) {
@@ -307,9 +333,11 @@ export class ChatHeadless {
     try {
       messageResponse = await nextMessageFn();
     } catch (e) {
+      this.setCanSendMessage(true);
       this.setChatLoadingStatus(false);
       return Promise.reject(e as Error);
     }
+    this.setCanSendMessage(true);
     this.setChatLoadingStatus(false);
     return messageResponse;
   }

packages/chat-headless/src/models/HeadlessConfig.ts

@@ -0,0 +1,11 @@
+import { ChatConfig } from "@yext/chat-core";
+
+/**
+ * The configuration for a SearchHeadless instance.
+ *
+ * @public
+ */
+export interface HeadlessConfig extends ChatConfig {
+  /** Whether to save the instance's {@link ConversationState} to session storage. Defaults to true. */
+  saveToSessionStorage?: boolean;
+}

packages/chat-headless/src/models/index.ts

@@ -1,4 +1,5 @@
 export { State } from "./state";
-export { ConversationState } from "./slices/conversation";
-export { MetaState } from "./slices/meta";
+export { ConversationState } from "./slices/ConversationState";
+export { MetaState } from "./slices/MetaState";
 export { StateListener } from "./utils/StateListeners";
+export { HeadlessConfig } from "./HeadlessConfig";

packages/chat-headless/src/models/slices/conversation.ts → packages/chat-headless/src/models/slices/ConversationState.ts

@@ -12,6 +12,11 @@ export interface ConversationState {
   messages: Message[];
   /** Information relevant to the current state of the conversation, generated and provided by Chat API. */
   notes?: MessageNotes;
-  /** Whether the next message is currently processing or has finished processing. */
-  isLoading?: boolean;
+  /** Whether the next message is currently processing or has started responding. */
+  isLoading: boolean;
+  /**
+   * Whether a new message can be sent to Chat API.
+   * This is set to false when a previous message is being processed.
+   */
+  canSendMessage: boolean;
 }

packages/chat-headless/src/models/state.ts

@@ -1,5 +1,5 @@
-import { ConversationState } from "./slices/conversation";
-import { MetaState } from "./slices/meta";
+import { ConversationState } from "./slices/ConversationState";
+import { MetaState } from "./slices/MetaState";
 
 /**
  * The state representing a ChatHeadless instance.