diff --git a/code/frontend/src/pages/chat/Chat.tsx b/code/frontend/src/pages/chat/Chat.tsx index bdd8409f7..00be18798 100644 --- a/code/frontend/src/pages/chat/Chat.tsx +++ b/code/frontend/src/pages/chat/Chat.tsx @@ -69,6 +69,7 @@ const Chat = () => { const lastQuestionRef = useRef(""); const chatMessageStreamEnd = useRef(null); const [isLoading, setIsLoading] = useState(false); + const [isGenerating, setIsGenerating] = useState(false); // Add this state const [showLoadingMessage, setShowLoadingMessage] = useState(false); const [isAssistantAPILoading, setIsAssistantAPILoading] = useState(false); const [isSendButtonDisabled, setSendButtonDisabled] = useState(false); @@ -185,7 +186,7 @@ const Chat = () => { text: "Clear all chat history", disabled: !chatHistory.length || - isLoading || + isGenerating || fetchingConvMessages || fetchingChatHistory, iconProps: { iconName: "Delete" }, @@ -194,7 +195,7 @@ const Chat = () => { const makeApiRequest = async (question: string) => { lastQuestionRef.current = question; - setIsLoading(true); + setIsGenerating(true); setShowLoadingMessage(true); const abortController = new AbortController(); abortFuncs.current.unshift(abortController); @@ -274,7 +275,7 @@ const Chat = () => { } setAnswers([...answers, userMessage]); } finally { - setIsLoading(false); + setIsGenerating(false); setShowLoadingMessage(false); abortFuncs.current = abortFuncs.current.filter( (a) => a !== abortController @@ -371,7 +372,7 @@ const Chat = () => { const stopGenerating = () => { abortFuncs.current.forEach((a) => a.abort()); setShowLoadingMessage(false); - setIsLoading(false); + setIsGenerating(false); }; useEffect(() => { @@ -485,6 +486,10 @@ const Chat = () => { }; const onSelectConversation = async (id: string) => { + if (isGenerating) { + // If response is being generated, prevent switching threads + return; + } if (!id) { console.error("No conversation Id found"); return; @@ -623,7 +628,7 @@ const Chat = () => { ) : (
{fetchingConvMessages && (
@@ -697,7 +702,7 @@ const Chat = () => {
- {isLoading && ( + {isGenerating && ( { className={`${styles.clearChatBroom} ${styles.mobileclearChatBroom}`} style={{ background: - isLoading || answers.length === 0 + isGenerating || answers.length === 0 ? "#BDBDBD" : "radial-gradient(109.81% 107.82% at 100.1% 90.19%, #0F6CBD 33.63%, #2D87C3 70.31%, #8DDDD8 100%)", - cursor: isLoading || answers.length === 0 ? "" : "pointer", + cursor: isGenerating || answers.length === 0 ? "" : "pointer", }} onClick={clearChat} onKeyDown={(e) => @@ -741,7 +746,7 @@ const Chat = () => { makeApiRequest(question)} recognizedText={recognizedText} isSendButtonDisabled={isSendButtonDisabled}