feat: Bot responsed after sended message

kekekuli · Dec 20, 2024 · 06d45ec · 06d45ec
1 parent eb4721c
commit 06d45ec
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 15 deletions.
diff --git a/packages/taskpane/components/App.tsx b/packages/taskpane/components/App.tsx
@@ -9,12 +9,22 @@ import type { Message } from './MessageBox';
 const serverURL = import.meta.env.VITE_SERVER_URL;
 
 export default function App() {
+  const [waitingResponse, setWaitingResponse] = useState(false);
+
   const [messages, setMessages] = useState(testMessages);
   const messageEndRef = useRef<HTMLDivElement>(null);
 
   function handleSend(message: string) {
-    const newMessages: Message[] = [...messages, { role: 'user', content: message }];
-    setMessages(newMessages);
+    // use arrow function to get the latest state
+    setMessages((prevMessages) => [...prevMessages, { role: 'user', content: message }]);
+    setWaitingResponse(() => true);
+
+    // Simulate bot response after a delay
+    setTimeout(() => {
+      const botMessage: Message = { role: 'bot', content: '为时已晚，有机体 '};
+      setMessages((prevMessages) => [...prevMessages, botMessage]);
+      setWaitingResponse(() => false);
+    }, 1000);
   }
 
   useEffect(() => {
@@ -25,12 +35,12 @@ export default function App() {
 
   return (
     <Stack className='h-screen'>
-      <BoxHeader />
+      <BoxHeader waitingResponse={waitingResponse} />
       <Box className=' overflow-y-scroll flex-grow max-h-full'>
         <MessageBox messages={messages}/>
         <div ref={messageEndRef}></div>
       </Box>
-      <InputField onSend={handleSend}/>
+      <InputField onSend={handleSend} waitingResponse={waitingResponse}/>
     </Stack>
   );
 }
diff --git a/packages/taskpane/components/BoxHeader.tsx b/packages/taskpane/components/BoxHeader.tsx
@@ -1,10 +1,23 @@
-
 import React from 'react';
+import { CircularProgress } from '@mui/material';
+
+interface BoxHeaderProps {
+    waitingResponse: boolean;
+}
 
-export default function BoxHeader() {
+export default function BoxHeader({ waitingResponse }: BoxHeaderProps) {
     return (
-        <div>
-            Hello, this is BoxHeader
+        <div className='bg-blue-500 h-24 flex items-center justify-center text-white'>
+            {
+                waitingResponse ? (
+                    <div className='flex items-center'>
+                        <CircularProgress color="inherit" size={24} />
+                        <p className='ml-2'>Waiting for response...</p>
+                    </div>
+                ) : (
+                    <p>Chat with the bot</p>
+                )
+            }
         </div>
-    )
-}
+    );
+}
diff --git a/packages/taskpane/components/InputField.tsx b/packages/taskpane/components/InputField.tsx
@@ -1,19 +1,19 @@
-import React, {useState} from 'react';
+import React, {useState, useRef, useEffect} from 'react';
 import {Box, TextField, Button} from '@mui/material';
 
 interface InputFieldProps {
+    waitingResponse: boolean;
     onSend: (message: string) => void;  
 }
 
-export default function InputField({onSend}: InputFieldProps){
+export default function InputField({onSend, waitingResponse}: InputFieldProps){
     const [inputValue, setInputValue] = useState<string>('');
 
     function handleSend(){
         onSend(inputValue);
         setInputValue('');
     }
 
-    console.log("rerender input field");
     return (
         <Box className="h-fit flex m-2">
             <TextField 
@@ -27,10 +27,14 @@ export default function InputField({onSend}: InputFieldProps){
                 onKeyDown={(e) => {
                     if(e.key === 'Enter')
                         handleSend();
-                }}></TextField>
+                }}
+                disabled={waitingResponse}
+                inputRef={(input) => {input && input.focus();}}
+                ></TextField>
             <Button 
                 className='h-full'
-                onClick={handleSend}>
+                onClick={handleSend}
+                disabled={waitingResponse}>
                 Send</Button>
         </Box>
     )