services/raggr/raggr-frontend/src/components/ChatScreen.tsx

@@ -40,6 +40,7 @@ export const ChatScreen = ({ setAuthenticated }: ChatScreenProps) => {
   const [selectedConversation, setSelectedConversation] =
     useState<Conversation | null>(null);
   const [sidebarCollapsed, setSidebarCollapsed] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
 
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const simbaAnswers = ["meow.", "hiss...", "purrrrrr", "yowOWROWWowowr"];
@@ -131,11 +132,12 @@ export const ChatScreen = ({ setAuthenticated }: ChatScreenProps) => {
   }, [selectedConversation?.id]);
 
   const handleQuestionSubmit = async () => {
-    if (!query.trim()) return; // Don't submit empty messages
+    if (!query.trim() || isLoading) return; // Don't submit empty messages or while loading
 
     const currMessages = messages.concat([{ text: query, speaker: "user" }]);
     setMessages(currMessages);
     setQuery(""); // Clear input immediately after submission
+    setIsLoading(true);
 
     if (simbaMode) {
       console.log("simba mode activated");
@@ -150,6 +152,7 @@ export const ChatScreen = ({ setAuthenticated }: ChatScreenProps) => {
           },
         ]),
       );
+      setIsLoading(false);
       return;
     }
 
@@ -170,6 +173,8 @@ export const ChatScreen = ({ setAuthenticated }: ChatScreenProps) => {
       if (error instanceof Error && error.message.includes("Session expired")) {
         setAuthenticated(false);
       }
+    } finally {
+      setIsLoading(false);
     }
   };
 
@@ -281,6 +286,7 @@ export const ChatScreen = ({ setAuthenticated }: ChatScreenProps) => {
               }
               return <QuestionBubble key={index} text={msg.text} />;
             })}
+            {isLoading && <AnswerBubble text="" loading={true} />}
             <div ref={messagesEndRef} />
           </div>
         </div>
@@ -294,6 +300,7 @@ export const ChatScreen = ({ setAuthenticated }: ChatScreenProps) => {
               handleKeyDown={handleKeyDown}
               handleQuestionSubmit={handleQuestionSubmit}
               setSimbaMode={setSimbaMode}
+              isLoading={isLoading}
             />
           </div>
         </footer>

services/raggr/raggr-frontend/src/components/MessageInput.tsx

@@ -6,9 +6,17 @@ type MessageInputProps = {
   handleQuestionSubmit: () => void;
   setSimbaMode: (sdf: boolean) => void;
   query: string;
-}
+  isLoading: boolean;
+};
 
-export const MessageInput = ({query, handleKeyDown, handleQueryChange, handleQuestionSubmit, setSimbaMode}: MessageInputProps) => {
+export const MessageInput = ({
+  query,
+  handleKeyDown,
+  handleQueryChange,
+  handleQuestionSubmit,
+  setSimbaMode,
+  isLoading,
+}: MessageInputProps) => {
   return (
     <div className="flex flex-col gap-4 sticky bottom-0 bg-[#3D763A] p-6 rounded-xl">
       <div className="flex flex-row justify-between grow">
@@ -23,11 +31,16 @@ export const MessageInput = ({query, handleKeyDown, handleQueryChange, handleQue
       </div>
       <div className="flex flex-row justify-between gap-2 grow">
         <button
-                    className="p-3 sm:p-4 min-h-[44px] border border-blue-400 bg-[#EDA541] hover:bg-blue-400 cursor-pointer rounded-md flex-grow text-sm sm:text-base"
+          className={`p-3 sm:p-4 min-h-[44px] border border-blue-400 rounded-md flex-grow text-sm sm:text-base ${
+            isLoading
+              ? "bg-gray-400 cursor-not-allowed opacity-50"
+              : "bg-[#EDA541] hover:bg-blue-400 cursor-pointer"
+          }`}
           onClick={() => handleQuestionSubmit()}
           type="submit"
+          disabled={isLoading}
         >
-                    Submit
+          {isLoading ? "Sending..." : "Submit"}
         </button>
       </div>
       <div className="flex flex-row justify-center gap-2 grow items-center">
@@ -40,4 +53,4 @@ export const MessageInput = ({query, handleKeyDown, handleQueryChange, handleQue
       </div>
     </div>
   );
-}
+};