(EAI-550) [UI] Refactor async state updates

packages/mongodb-chatbot-ui/src/ConversationProvider.tsx

@@ -30,6 +30,21 @@ export const ConversationContext = createContext<Conversation>({
   switchConversation: async () => {
     return;
   },
+  createStreamingResponse: async () => {
+    return;
+  },
+  appendStreamingResponse: async () => {
+    return;
+  },
+  appendStreamingReferences: async () => {
+    return;
+  },
+  finishStreamingResponse: async () => {
+    return;
+  },
+  cancelStreamingResponse: async () => {
+    return;
+  },
 });
 
 export default function ConversationProvider({

packages/mongodb-chatbot-ui/src/useChatbot.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import { useConversation, type UseConversationParams } from "./useConversation";
 
 export type OpenCloseHandlers = {
@@ -47,7 +47,7 @@ export function useChatbot({
   const [awaitingReply, setAwaitingReply] = useState(false);
   const inputBarRef = useRef<HTMLFormElement>(null);
 
-  async function openChat() {
+  const openChat = useCallback(async () => {
     if (open) {
       return;
     }
@@ -56,75 +56,84 @@ export function useChatbot({
     if (!conversation.conversationId) {
       await conversation.createConversation();
     }
-  }
+  }, [open, onOpen, conversation]);
 
-  function closeChat() {
+  const closeChat = useCallback(() => {
     if (!open) {
       return false;
     }
     onClose?.();
     setOpen(false);
     return true;
-  }
+  }, [open, onClose]);
 
   const [inputData, setInputData] = useState({
     text: "",
     error: "",
   });
   const inputText = inputData.text;
   const inputTextError = inputData.error;
-  function setInputText(text: string) {
-    const isValid = maxInputCharacters
-      ? text.length <= maxInputCharacters
-      : true;
-    setInputData({
-      text,
-      error: isValid
-        ? ""
-        : `Input must be less than ${maxInputCharacters} characters`,
-    });
-  }
+  const setInputText = useCallback(
+    (text: string) => {
+      const isValid = maxInputCharacters
+        ? text.length <= maxInputCharacters
+        : true;
+      setInputData({
+        text,
+        error: isValid
+          ? ""
+          : `Input must be less than ${maxInputCharacters} characters`,
+      });
+    },
+    [maxInputCharacters]
+  );
 
-  function canSubmit(text: string) {
-    // Don't let users submit a message if the conversation hasn't fully loaded
-    if (!conversation.conversationId) {
-      console.error(`Cannot add message without a conversationId`);
-      return false;
-    }
-    // Don't let users submit a message if something is wrong with their input text
-    if (inputData.error) {
-      console.error(`Cannot add message with invalid input text`);
-      return false;
-    }
-    // Don't let users submit a message that is empty or only whitespace
-    if (text.replace(/\s/g, "").length === 0) {
-      console.error(`Cannot add message with no text`);
-      return false;
-    }
-    // Don't let users submit a message if we're already waiting for a reply
-    if (awaitingReply) {
-      console.error(`Cannot add message while awaiting a reply`);
-      return false;
-    }
-    return true;
-  }
+  const canSubmit = useCallback(
+    (text: string) => {
+      // Don't let users submit a message if the conversation hasn't fully loaded
+      if (!conversation.conversationId) {
+        console.error(`Cannot add message without a conversationId`);
+        return false;
+      }
+      // Don't let users submit a message if something is wrong with their input text
+      if (inputData.error) {
+        console.error(`Cannot add message with invalid input text`);
+        return false;
+      }
+      // Don't let users submit a message that is empty or only whitespace
+      if (text.replace(/\s/g, "").length === 0) {
+        console.error(`Cannot add message with no text`);
+        return false;
+      }
+      // Don't let users submit a message if we're already waiting for a reply
+      if (awaitingReply) {
+        console.error(`Cannot add message while awaiting a reply`);
+        return false;
+      }
+      return true;
+    },
+    [conversation.conversationId, inputData.error, awaitingReply]
+  );
 
-  async function handleSubmit(text: string) {
-    if (!canSubmit(text)) return;
-    try {
-      setInputText("");
-      setAwaitingReply(true);
-      openChat();
-      await conversation.addMessage({
-        role: "user",
-        content: text,
-      });
-    } catch (e) {
-      console.error(e);
-    } finally {
-      setAwaitingReply(false);
-    }
-  }
+  const handleSubmit = useCallback(
+    async (text: string) => {
+      if (!canSubmit(text)) return;
+      try {
+        setInputText("");
+        setAwaitingReply(true);
+        openChat();
+        await conversation.addMessage({
+          role: "user",
+          content: text,
+        });
+      } catch (e) {
+        console.error(e);
+      } finally {
+        setAwaitingReply(false);
+      }
+    },
+    [canSubmit, setInputText, setAwaitingReply, openChat, conversation]
+  );
 
   return {
     awaitingReply,