commit 007

src/components/ChatBox.css

@@ -0,0 +1,30 @@
+.typing-indicator {
+  display: flex;
+  gap: 6px;
+  padding: 0.5rem 1rem;
+  align-items: center;
+}
+
+.typing-indicator .dot {
+  width: 8px;
+  height: 8px;
+  background-color: #aaa;
+  border-radius: 50%;
+  animation: blink 1.4s infinite both;
+}
+
+.typing-indicator .dot:nth-child(2) {
+  animation-delay: 0.2s;
+}
+.typing-indicator .dot:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes blink {
+  0%, 80%, 100% {
+    opacity: 0;
+  }
+  40% {
+    opacity: 1;
+  }
+}

src/components/ChatBox.jsx

@@ -1,6 +1,8 @@
+import React from "react";
 import CodeBlock from "./CodeBlock";
+import "./ChatBox.css"; // Add dot animation CSS
 
-export default function ChatBox({ messages }) {
+export default function ChatBox({ messages, loading }) {
   return (
     <div className="chat-box">
       {messages.map((msg, i) => (
@@ -10,6 +12,17 @@ export default function ChatBox({ messages }) {
           </div>
         </div>
       ))}
+
+      {/* ✅ Typing indicator when loading */}
+      {loading && (
+        <div className="message assistant">
+          <div className="bubble typing-indicator">
+            <span className="dot"></span>
+            <span className="dot"></span>
+            <span className="dot"></span>
+          </div>
+        </div>
+      )}
     </div>
   );
 }