feat: Add reset conversation functionality (#30)

* feat: Add reset conversation functionality

* Address comments

* Update usage of resetConversation in code samples.

README.md

@@ -124,7 +124,7 @@ import { useChat } from "@vectara/react-chatbot/lib";
 
 /* snip */
 
-const { sendMessage, messageHistory, isLoading, hasError } = useChat(
+const { sendMessage, startNewConversation, messageHistory, isLoading, hasError } = useChat(
   "CUSTOMER_ID",
   ["CORPUS_ID_1", "CORPUS_ID_2", "CORPUS_ID_N"],
   "API_KEY"
@@ -139,6 +139,10 @@ The values returned by the hook can be passed on to your custom components as pr
 
 This is used to send a message to the chat API. Send `true` for the optional `isRetry` flag to if this is retrying a previously failed message. This allows the internal logic to correctly link the next successful answer to the failed query.
 
+##### startNewConversation: `() => void;`
+
+This is used to reset the conversational context of the chat. The message history will be cleared and the chatbot will "forget" everything that's been discussed.
+
 ##### messageHistory: `ChatTurn[]`
 
 This is an array of objects representing question and answer pairs from the entire conversation. Each pair is a `ChatTurn` object. More information on types can be found [here](src/types.ts).

docs/src/index.tsx

@@ -259,7 +259,7 @@ const App = () => {
 import { useChat } from "@vectara/react-chatbot/lib";
 
 export const App = () => {
-  const { sendMessage, messageHistory, isLoading, hasError } = useChat(
+  const { sendMessage, startNewConversation, messageHistory, isLoading, hasError } = useChat(
     DEFAULT_CUSTOMER_ID,
     DEFAULT_CORPUS_IDS,
     DEFAULT_API_KEY
@@ -278,6 +278,7 @@ export const App = () => {
               <p>The hook returns:</p>
               <ul>
                 <li>sendMessage - a function that sends a string to the Chat API endpoint</li>
+                <li>startNewConversation - a function that resets the conversational context</li>
                 <li>messageHistory - an array of objects representing messages from the entire conversation</li>
                 <li>isLoading - a boolean value indicating whether or not a chat message request is pending</li>
                 <li>

src/components/ChatView.tsx

@@ -1,5 +1,5 @@
-import { Fragment, ReactNode, useCallback, useEffect, useRef, useState } from "react";
-import { VuiFlexContainer, VuiFlexItem, VuiSpacer } from "../vui";
+import { Fragment, ReactNode, useEffect, useRef, useState } from "react";
+import { VuiButtonSecondary, VuiFlexContainer, VuiFlexItem, VuiSpacer } from "../vui";
 import { QueryInput } from "./QueryInput";
 import { ChatItem } from "./ChatItem";
 import { useChat } from "../useChat";
@@ -54,7 +54,11 @@ export const ChatView = ({
 }: Props) => {
   const [isOpen, setIsOpen] = useState<boolean>(isInitiallyOpen ?? false);
   const [query, setQuery] = useState<string>("");
-  const { sendMessage, messageHistory, isLoading, hasError } = useChat(customerId, corpusIds, apiKey);
+  const { sendMessage, startNewConversation, messageHistory, isLoading, hasError } = useChat(
+    customerId,
+    corpusIds,
+    apiKey
+  );
   const appLayoutRef = useRef<HTMLDivElement>(null);
   const isScrolledToBottomRef = useRef(true);
 
@@ -147,7 +151,7 @@ export const ChatView = ({
                   if (messageHistory[index]?.answer === "") {
                     spacer = null;
                   } else {
-                    spacer = index < chatItems.length - 1 ? <VuiSpacer size="m" /> : <VuiSpacer size="xl" />;
+                    spacer = index < chatItems.length - 1 ? <VuiSpacer size="m" /> : <VuiSpacer size="l" />;
                   }
                   return (
                     <Fragment key={index}>
@@ -156,6 +160,14 @@ export const ChatView = ({
                     </Fragment>
                   );
                 })}
+                <VuiFlexContainer fullWidth={true} justifyContent="center">
+                  <VuiFlexItem>
+                    <VuiButtonSecondary color="neutral" size="xs" onClick={startNewConversation} isDisabled={isLoading}>
+                      Start new conversation
+                    </VuiButtonSecondary>
+                  </VuiFlexItem>
+                </VuiFlexContainer>
+                <VuiSpacer size="l" />
               </>
             )}
           </div>

src/index.test.tsx

@@ -97,6 +97,7 @@ describe("ReactChatbot", () => {
 
     expect(screen.getByShadowText("mock-question")).toBeInTheDocument();
     expect(screen.getByShadowText("mock-answer")).toBeInTheDocument();
+    expect(screen.getByShadowText("Start new conversation")).toBeInTheDocument();
   });
 
   it("should execute callback when sending message", () => {

src/useChat.test.ts

@@ -80,4 +80,54 @@ describe("useChat", () => {
 
     expect(result.current.isLoading).toEqual(true);
   });
+
+  it("should be able to reset the conversation", async () => {
+    const { result } = renderHook(() => useChat("mock-customer-id", ["1"], "mock-api-key"));
+    (sendSearchRequest as jest.Mock).mockImplementation(() => Promise.resolve(MOCK_API_RESPONSE));
+
+    await act(async () => {
+      await result.current.sendMessage({ query: "mock-query" });
+      await result.current.sendMessage({ query: "mock-query-2" });
+    });
+
+    // Assert that the second request uses the current conversation id.
+    expect(sendSearchRequest).toHaveBeenCalledWith(
+      expect.objectContaining({
+        chat: {
+          conversationId: "mock-conversation-id"
+        }
+      })
+    );
+
+    (sendSearchRequest as jest.Mock).mockImplementation(() =>
+      Promise.resolve({
+        ...MOCK_API_RESPONSE,
+        summary: [
+          {
+            chat: {
+              conversationId: "mock-conversation-id-2",
+              turnId: "mock-turn-id",
+              text: "mock-answer"
+            }
+          }
+        ]
+      })
+    );
+
+    await act(async () => {
+      await result.current.startNewConversation();
+    });
+
+    expect(result.current.messageHistory.length).toEqual(0);
+
+    await act(async () => {
+      await result.current.sendMessage({ query: "mock-query-3" });
+    });
+
+    const calls = (sendSearchRequest as jest.Mock).mock.calls;
+    const recentSendSearchRequestCall = calls[calls.length - 1][0];
+
+    // Assert that the request after reset is has no conversation id.
+    expect(recentSendSearchRequestCall.chat.conversationId).toEqual(undefined);
+  });
 });

src/useChat.ts

@@ -95,6 +95,11 @@ export const useChat = (customerId: string, corpusIds: string[], apiKey: string)
     }
   };
 
+  const startNewConversation = () => {
+    setMessageHistory([]);
+    setConversationId(undefined);
+  };
+
   useEffect(() => {
     if (!recentAnswer) return;
 
@@ -107,6 +112,7 @@ export const useChat = (customerId: string, corpusIds: string[], apiKey: string)
 
   return {
     sendMessage,
+    startNewConversation,
     messageHistory,
     isLoading,
     hasError