added loading state

Author: kartikpersistent

frontend/src/components/Chatbot.tsx

@@ -12,6 +12,7 @@ export default function Chatbot(props: ChatbotProps) {
   const { messages: listMessages, setMessages: setListMessages } = props;
   const [inputMessage, setInputMessage] = useState('');
   const formattedTextStyle = { color: 'rgb(var(--theme-palette-discovery-bg-strong))' };
+  const [loading, setLoading] = useState<boolean>(false)
   const { userCredentials } = useCredentials();
   const { model } = useFileContext();
   const messagesEndRef = useRef<HTMLDivElement>(null);
@@ -53,14 +54,17 @@ export default function Chatbot(props: ChatbotProps) {
     const userMessage = { id: Date.now(), user: 'user', message: inputMessage, datetime: datetime };
     setListMessages((listMessages) => [...listMessages, userMessage]);
     try {
+      setLoading(true)
       const chatresponse = await chatBotAPI(userCredentials, model, inputMessage);
       chatbotReply = chatresponse?.data?.message;
       setInputMessage('');
       simulateTypingEffect(chatbotReply);
+      setLoading(false)
     } catch (error) {
       chatbotReply = "Oops! It seems we couldn't retrieve the answer. Please try again later";
       setInputMessage('');
       simulateTypingEffect(chatbotReply);
+      setLoading(false)
     }
   };
 
@@ -111,9 +115,8 @@ export default function Chatbot(props: ChatbotProps) {
                 <Widget
                   header=''
                   isElevated={true}
-                  className={`p-4 self-start ${
-                    chat.user === 'chatbot' ? 'n-bg-palette-neutral-bg-strong' : 'n-bg-palette-primary-bg-weak'
-                  }`}
+                  className={`p-4 self-start ${chat.user === 'chatbot' ? 'n-bg-palette-neutral-bg-strong' : 'n-bg-palette-primary-bg-weak'
+                    }`}
                 >
                   <div>
                     {chat.message.split(/`(.+?)`/).map((part, index) =>
@@ -144,7 +147,7 @@ export default function Chatbot(props: ChatbotProps) {
             fluid
             onChange={handleInputChange}
           />
-          <Button type='submit'>Submit</Button>
+          <Button type='submit' disabled={loading}>Submit</Button>
         </form>
       </div>
     </div>