Merge pull request #65 from dfe-analytical-services/EES-4784/reset-er…

…ror-state-on-sending-new-message EES-4784: Reset error state on sending new message
dfe-analytical-services · Jan 11, 2024 · f66a0eb · f66a0eb
2 parents 7873bcb + 9dfe9c2
commit f66a0eb
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 15 deletions.
diff --git a/chatbot-ui/components/UserInputDialog.test.tsx b/chatbot-ui/components/UserInputDialog.test.tsx
@@ -9,7 +9,6 @@ describe('Message history', () => {
       <UserInputDialog
         sendMessage={() => Promise.resolve()}
         fetching={false}
-        error=""
       />,
     );
 
@@ -20,9 +19,7 @@ describe('Message history', () => {
 
   it('Calls `sendMessage` when successfully submitted', async () => {
     const handleSend = jest.fn();
-    render(
-      <UserInputDialog sendMessage={handleSend} fetching={false} error="" />,
-    );
+    render(<UserInputDialog sendMessage={handleSend} fetching={false} />);
 
     fireEvent.change(screen.getByLabelText('What is your question?'), {
       target: { value: 'Is the ski village on fire?' },
@@ -37,9 +34,7 @@ describe('Message history', () => {
 
   it('Shows an error message when submitted without a question', async () => {
     const handleSend = jest.fn();
-    render(
-      <UserInputDialog sendMessage={handleSend} fetching={false} error="" />,
-    );
+    render(<UserInputDialog sendMessage={handleSend} fetching={false} />);
 
     await userEvent.click(screen.getByRole('button', { name: 'Send' }));
 

diff --git a/chatbot-ui/components/UserInputDialog.tsx b/chatbot-ui/components/UserInputDialog.tsx
@@ -3,7 +3,7 @@ import { UseChatbotState } from '@/hooks/useChatbot';
 import ErrorSummary from '@/components/ErrorSummary';
 import classNames from 'classnames';
 
-const UserInputDialog = ({ sendMessage, error: APIError, fetching }: Props) => {
+const UserInputDialog = ({ sendMessage, fetching }: Props) => {
   const [query, setQuery] = useState<string>('');
   const [userInputError, setUserInputError] = useState<string | null>(null);
   const textAreaRef = useRef<HTMLTextAreaElement>(null);
@@ -59,7 +59,7 @@ const UserInputDialog = ({ sendMessage, error: APIError, fetching }: Props) => {
         {userInputError && <ErrorSummary error={userInputError} />}
         <textarea
           className="govuk-textarea"
-          disabled={fetching || APIError !== null}
+          disabled={fetching}
           onKeyDown={handleKeyDown}
           ref={textAreaRef}
           rows={3}
@@ -90,6 +90,6 @@ const UserInputDialog = ({ sendMessage, error: APIError, fetching }: Props) => {
   );
 };
 
-interface Props extends Omit<UseChatbotState, 'messages'> {}
+interface Props extends Omit<UseChatbotState, 'messages' | 'error'> {}
 
 export default UserInputDialog;
diff --git a/chatbot-ui/hooks/useChatbot.test.ts b/chatbot-ui/hooks/useChatbot.test.ts
@@ -63,4 +63,35 @@ describe('useChatbot', () => {
       'An error occurred while fetching the data. Please try again.',
     );
   });
+
+  it('Resets the error state after sending a new message', async () => {
+    ChatBotService.sendUserMessage.mockRejectedValue('I am the error');
+    const { result } = renderHook(() => useChatbot());
+
+    await act(() => result.current.sendMessage('I am a message'));
+
+    await waitFor(() => {
+      expect(ChatBotService.sendUserMessage).toHaveBeenCalledWith(
+        'I am a message',
+      );
+    });
+
+    const { error, messages: updatedMessages } = result.current;
+    expect(updatedMessages).toHaveLength(2);
+
+    expect(error).toBe(
+      'An error occurred while fetching the data. Please try again.',
+    );
+
+    ChatBotService.sendUserMessage.mockResolvedValue({
+      content: 'I am a future successful message',
+      type: 'apiMessage',
+    });
+
+    await act(() => result.current.sendMessage('I am a second message'));
+
+    const { error: errorTwo, messages: updatedMessagesTwo } = result.current;
+    expect(updatedMessagesTwo).toHaveLength(4);
+    expect(errorTwo).toBeNull();
+  });
 });
diff --git a/chatbot-ui/hooks/useChatbot.ts b/chatbot-ui/hooks/useChatbot.ts
@@ -17,6 +17,7 @@ function useChatbot(): UseChatbotState {
   };
 
   const sendMessage = async (userInput: string) => {
+    setError(null);
     const userMessage: Message = { content: userInput, type: 'userMessage' };
     recordMessageInHistory([userMessage]);
     setFetching(true);

diff --git a/chatbot-ui/pages/index.tsx b/chatbot-ui/pages/index.tsx
@@ -20,11 +20,7 @@ export default function Home({
 
         <MessageHistory messages={messages} loading={fetching} />
 
-        <UserInputDialog
-          sendMessage={sendMessage}
-          fetching={fetching}
-          error={error}
-        />
+        <UserInputDialog sendMessage={sendMessage} fetching={fetching} />
       </>
     </Page>
   );