code updated to fix the scroll to bottom issue resolved

src/components/ChatBox.jsx

@@ -6,11 +6,19 @@ import "./ChatBox.css"; // Add dot animation CSS
 export default function ChatBox({ messages, loading }) {
 const bottomRef = useRef(null);
 
-  useEffect(() => {
-    if (bottomRef.current) {
-      bottomRef.current.scrollIntoView({ behavior: 'smooth' });
-    }
-  }, [messages, loading]);
+ useEffect(() => {
+  if (!bottomRef.current) return;
+
+  if (loading) {
+    bottomRef.current.scrollIntoView({ behavior: 'auto' });
+  } else {
+    // Smooth scroll after streaming ends with slight delay
+    setTimeout(() => {
+      bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+    }, 80); // tweak timing based on UX
+  }
+}, [messages, loading]);
+
 
  return (
     <Box className="chat-box">