add typing bubble

frontend/src/components/ChatInterface.module.css

@@ -31,4 +31,39 @@
 .chat-messages, .thinking-process {
   scrollbar-width: none !important;
   -ms-overflow-style: none !important;
+}
+.typingBubble {
+  display: inline-block;
+  margin-left: 8px;
+}
+
+.typingDot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  margin-right: 4px;
+  border-radius: 50%;
+  background-color: black; /* Change color to ensure visibility */
+  animation: typing 1.4s infinite both;
+}
+
+.typingDot:nth-child(1) {
+  animation-delay: 0s;
+}
+
+.typingDot:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.typingDot:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes typing {
+  0%, 80%, 100% {
+    transform: scale(0);
+  }
+  40% {
+    transform: scale(1);
+  }
 }

frontend/src/components/chat-interface.tsx

@@ -39,6 +39,7 @@ export function ChatInterface() {
     actionInput?: string
   }[]>([]);
   const [maxHeight, setMaxHeight] = useState('80vh'); // Default to 100% of the viewport height
+  const [isBotTyping, setIsBotTyping] = useState(false);
 
   useEffect(() => {
     // This function will be called on resize events
@@ -98,7 +99,8 @@ export function ChatInterface() {
       human_say: userMessage,
       stream,
     };
-
+    setIsBotTyping(true); // Start showing the typing indicator
+
     try {
       const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/chat`, {
         method: 'POST',
@@ -135,6 +137,8 @@ export function ChatInterface() {
         }}
       } catch (error) {
         console.error("Failed to fetch bot's response:", error);
+      } finally {
+        setIsBotTyping(false); // Stop showing the typing indicator
       }
   };  
   return (
@@ -188,6 +192,16 @@ export function ChatInterface() {
     )}
   </div>
 ))}
+  {isBotTyping && (
+    <div className="flex items-center justify-start">
+      <img alt="Bot" className="rounded-full mr-2" src="/maskot.png" style={{ width: 24, height: 24, objectFit: "cover" }} />
+      <div className={`${styles.typingBubble}`}>
+      <span className={`${styles.typingDot}`}></span>
+      <span className={`${styles.typingDot}`}></span>
+      <span className={`${styles.typingDot}`}></span>
+    </div>
+    </div>
+  )}
           </div>
           <div className="mt-4">
             <Input