commit 011

src/App.js

@@ -27,7 +27,9 @@ export default function App() {
         botMsg.content += chunk;
         setMessages((prev) => [...prev.slice(0, -1), { ...botMsg }]);
       },
-      onDone: () => {},
+      onDone: () => {
+        setLoading(false); 
+      },
     });
   };
 

src/components/ChatBox.css

@@ -1,14 +1,15 @@
 .typing-indicator {
   display: flex;
   gap: 6px;
-  padding: 0.5rem 1rem;
+  padding: 0.5rem;
+  margin-left: 1rem;
   align-items: center;
 }
 
 .typing-indicator .dot {
   width: 8px;
   height: 8px;
-  background-color: #aaa;
+  background-color: #ccc;
   border-radius: 50%;
   animation: blink 1.4s infinite both;
 }
@@ -21,10 +22,6 @@
 }
 
 @keyframes blink {
-  0%, 80%, 100% {
-    opacity: 0;
-  }
-  40% {
-    opacity: 1;
-  }
+  0%, 80%, 100% { opacity: 0; }
+  40% { opacity: 1; }
 }

src/components/ChatBox.jsx

@@ -15,14 +15,14 @@ export default function ChatBox({ messages, loading }) {
 
       {/* ✅ 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 className="message assistant">
+    <div className="typing-indicator">
+      <span className="dot"></span>
+      <span className="dot"></span>
+      <span className="dot"></span>
+    </div>
+  </div>
+)}
     </div>
   );
 }