added auto-scroll to the bottom

frontend/src/Components/AiPage.css

@@ -288,6 +288,11 @@ button.send-btn.stop-btn:hover {
 /* Chat container */
 .chat-container {
   flex-grow: 1;
+  margin-bottom: 9rem;
+}
+
+/* When processing a new prompt */
+.chat-container.processing {
   margin-bottom: 40rem;
 }
 
@@ -304,4 +309,4 @@ button.send-btn.stop-btn:hover {
     margin: 0;
     padding: 1rem;
   }
-}
+}

frontend/src/Components/AiPage.js

@@ -45,6 +45,9 @@ function AiPage() {
   const [activeBlockId, setActiveBlockId] = useState(null);
   const activeEventSourceRef = useRef(null);
 
+  // State to track if we should auto-scroll to the bottom
+  const [autoScrollEnabled, setAutoScrollEnabled] = useState(false);
+
   // Snackbar state
   const [snackbar, setSnackbar] = useState({
     open: false,
@@ -71,6 +74,24 @@ function AiPage() {
   const tokenExpiryTimersRef = useRef({});
   const notificationIdsRef = useRef({});
 
+  // Function to check if we are near the bottom of the page
+  const checkIfNearBottom = (threshold = 400) => {
+    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+    const scrollHeight = document.documentElement.scrollHeight;
+    const clientHeight = window.innerHeight;
+    const distanceFromBottom = scrollHeight - (scrollTop + clientHeight);
+    
+    return distanceFromBottom <= threshold;
+  };
+
+  // Helper to scroll to bottom
+  const scrollToBottom = (smooth = true) => {
+    window.scrollTo({
+      top: document.documentElement.scrollHeight,
+      behavior: smooth ? 'smooth' : 'auto'
+    });
+  };
+
   // Function to open the snackbar
   const openSnackbar = useCallback((message, severity = "success", duration) => {
     let finalDuration;
@@ -215,14 +236,6 @@ function AiPage() {
     return Date.now() < expiryTime;
   };
 
-  // Function to get valid token
-  const getValidToken = (provider) => {
-    if (isTokenValid(provider)) {
-      return sessionStorage.getItem(`${provider}_token`);
-    }
-    return null;
-  };
-
   // Function to get provider icon
   const getProviderIcon = useCallback((provider) => {
     switch (provider.toLowerCase()) {
@@ -504,6 +517,11 @@ function AiPage() {
   // Create a new chat block and initiate the SSE
   const handleSend = () => {
     if (!searchText.trim()) return;
+
+    // Check if user is near bottom before adding new block
+    const shouldScroll = checkIfNearBottom(1000); // 1000px threshold
+    setAutoScrollEnabled(shouldScroll);
+
     const blockId = new Date().getTime();
     setActiveBlockId(blockId);
     setIsProcessing(true);
@@ -537,6 +555,13 @@ function AiPage() {
     }
   };
 
+  // Auto-scroll when chat block is added
+  useEffect(() => {
+    if (autoScrollEnabled && isProcessing) {
+      scrollToBottom();
+    }
+  }, [isProcessing, autoScrollEnabled]);
+
   // Stop the user request and close the active SSE connection
   const handleStop = async () => {
     // Close the active SSE connection if it exists
@@ -903,7 +928,7 @@ function AiPage() {
       <main className="main-content">
         {showChatWindow ? (
           <>
-            <div className="chat-container">
+            <div className={`chat-container ${isProcessing ? 'processing' : ''}`}>
               {chatBlocks.map((block) => (
                 <ChatWindow
                   key={block.id}

src/utils/api_key_manager.py

@@ -17,6 +17,9 @@ import asyncio
 
 # Tell Pydantic to finish wiring up this dynamic model
 ChatGoogleGenerativeAI.model_rebuild()
+ChatAnthropic.model_rebuild()
+ChatOpenAI.model_rebuild()
+ChatXAI.model_rebuild()
 
 ModelProvider = Literal["openai", "anthropic", "google", "xai"]