final ui updates 5

src/pages/dashboard/ask.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { Send, Loader2, X, History, MessageSquarePlus, AlertCircle } from 'lucide-react';
+import { Send, Loader2, X, History, MessageSquarePlus, AlertCircle, ArrowDown } from 'lucide-react';
 import { Link, useParams, useNavigate } from 'react-router-dom';
 import { Button } from '../../components/ui/Button';
 import { Message } from '../../components/chat/Message';
@@ -21,6 +21,7 @@ export default function AskQuestion() {
   const [isNewChat, setIsNewChat] = useState(false);
   const [hasExistingChats, setHasExistingChats] = useState<boolean | null>(null);
   const [isTyping, setIsTyping] = useState(false);
+  const [showScrollButton, setShowScrollButton] = useState(false);
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const scrollAreaRef = useRef<HTMLDivElement>(null);
 
@@ -168,14 +169,53 @@ export default function AskQuestion() {
     }
   };
 
+  // Function to handle scroll events
+  const handleScroll = () => {
+    if (scrollAreaRef.current) {
+      const { scrollTop, scrollHeight, clientHeight } = scrollAreaRef.current;
+      const isAtBottom = scrollHeight - scrollTop - clientHeight < 100;
+      setShowScrollButton(!isAtBottom);
+    }
+  };
+
+  // Add scroll event listener
+  useEffect(() => {
+    const scrollArea = scrollAreaRef.current;
+    if (scrollArea) {
+      scrollArea.addEventListener('scroll', handleScroll);
+      // Initial check for scroll position
+      handleScroll();
+      return () => scrollArea.removeEventListener('scroll', handleScroll);
+    }
+  }, []);
+
   // Auto-scroll when new messages arrive
   useEffect(() => {
     if (scrollAreaRef.current) {
       const scrollArea = scrollAreaRef.current;
+      const { scrollTop, scrollHeight, clientHeight } = scrollArea;
+      const isAtBottom = scrollHeight - scrollTop - clientHeight < 100;
+
+      // Only auto-scroll if user is already at bottom
+      if (isAtBottom) {
         scrollArea.scrollTop = scrollArea.scrollHeight;
       }
+
+      // Check if we should show scroll button
+      handleScroll();
+    }
   }, [messages, isTyping]);
 
+  // Function to scroll to bottom
+  const scrollToBottom = () => {
+    if (scrollAreaRef.current) {
+      scrollAreaRef.current.scrollTo({
+        top: scrollAreaRef.current.scrollHeight,
+        behavior: 'smooth'
+      });
+    }
+  };
+
   // Show loading state while checking for existing chats
   if (hasExistingChats === null) {
     return (
@@ -240,17 +280,20 @@ export default function AskQuestion() {
         </div>
       </div>
 
-      {/* Main Chat Container - Added pb-20 to create space at bottom */}
+      {/* Main Chat Container */}
-      <div className="flex-1 bg-background rounded-lg mx-4 flex flex-col min-h-0">
+      <div className="flex-1 bg-background rounded-lg mx-4 overflow-hidden flex flex-col relative">
-        {/* Messages Container */}
+        {/* Messages Container with ref moved to correct div */}
-        <div className="flex-1 overflow-y-auto">
+        <div
+          ref={scrollAreaRef}
+          className="flex-1 overflow-y-auto relative"
+        >
+          <div className="flex flex-col space-y-6 p-4">
             {error && (
-            <div className="flex-none mx-4 mt-4 flex items-center gap-2 rounded-lg bg-destructive/10 p-3 text-sm text-destructive">
+              <div className="flex-none mb-4 flex items-center gap-2 rounded-lg bg-destructive/10 p-3 text-sm text-destructive">
                 <AlertCircle className="h-4 w-4" />
                 {error}
               </div>
             )}
-          <div className="flex flex-col space-y-6 p-4">
             {!isNewChat && !chatId ? (
               <div className="h-full flex items-center justify-center min-h-[calc(100vh-50rem)]">
                 <div className="max-w-md w-full space-y-8">
@@ -372,12 +415,38 @@ export default function AskQuestion() {
               </>
             )}
           </div>
+
+          {/* Scroll to Bottom Button */}
+          {showScrollButton && messages.length > 0 && (
+            <div className="absolute -left-16 bottom-2 animate-in fade-in duration-1000 slide-in-from-bottom-4">
+              <Button
+                onClick={scrollToBottom}
+                size="sm"
+                className="rounded-full shadow-lg bg-background hover:bg-accent transition-all duration-200 p-3 h-auto w-auto"
+              >
+                <ArrowDown className="h-5 w-5 text-primary" />
+              </Button>
             </div>
+          )}
         </div>
 
-      {/* Input Box - Keep original styling */}
+        {/* Input Box */}
-      <div className="sticky bottom-0 left-0 right-0 p-4 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+        <div className="flex-none sticky bottom-0 left-0 right-0 p-4 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-        <form onSubmit={handleSubmit} className="mx-auto max-w-3xl">
+          <div className="relative mx-auto max-w-3xl">
+            {/* Scroll to Bottom Button */}
+            {showScrollButton && messages.length > 0 && (
+              <div className="absolute -left-14 top-1/2 -translate-y-1/2 animate-in fade-in duration-1000 slide-in-from-bottom-4">
+                <Button
+                  onClick={scrollToBottom}
+                  size="sm"
+                  className="rounded-full shadow-lg bg-background hover:bg-accent transition-all duration-200 p-3 h-auto w-auto"
+                >
+                  <ArrowDown className="h-5 w-5 text-primary" />
+                </Button>
+              </div>
+            )}
+
+            <form onSubmit={handleSubmit}>
               <div className="flex items-start gap-2">
                 <div className="flex-1 relative">
                   <textarea
@@ -436,5 +505,7 @@ export default function AskQuestion() {
             </form>
           </div>
         </div>
+      </div>
+    </div>
   );
 }