Improve scroll behavior and input styling

Author: chriswritescode-dev

frontend/src/components/message/PromptInput.tsx

@@ -486,7 +486,7 @@ export function PromptInput({
 
 
   return (
-    <div className="relative backdrop-blur-md bg-background opacity-95 border border-border rounded-xl p-2 md:p-3 mx-2 md:mx-4 mb-2 md:mb-5 w-[90%] md:max-w-4xl">
+    <div className="relative backdrop-blur-md bg-background opacity-95 border border-border dark:border-white/30 rounded-xl p-2 md:p-3 md:mx-4 mb-2 md:mb-1 w-[95%] md:max-w-4xl">
       {hasActiveStream && (
         <div className="">
           <SessionStatusIndicator sessionID={sessionID} />
@@ -560,15 +560,13 @@ export function PromptInput({
           )}
         </div>
         <div className="flex items-center gap-1.5 md:gap-2 flex-shrink-0">
-          {showScrollButton && (
-            <button
+          <button
               onClick={onScrollToBottom}
-              className="p-1.5 md:p-2 rounded-lg bg-muted hover:bg-muted-foreground/20 text-muted-foreground hover:text-foreground transition-colors border border-foreground/30"
+              className={`p-1.5 md:p-2 rounded-lg bg-muted hover:bg-muted-foreground/20 text-muted-foreground hover:text-foreground transition-colors border border-transparent ${showScrollButton ? 'border-foreground/30 visible' : 'invisible'}`}
               title="Scroll to bottom"
             >
               <ChevronDown className="w-5 h-5" />
             </button>
-          )}
 {showStopButton && (
             <button
               onClick={handleStop}

frontend/src/hooks/useAutoScroll.ts

@@ -32,14 +32,17 @@ export function useAutoScroll<T extends Message>({
   const userScrolledAtRef = useRef(0)
   const userDisengagedRef = useRef(false)
   const pointerStartYRef = useRef<number | null>(null)
+  const onScrollStateChangeRef = useRef(onScrollStateChange)
+  
+  onScrollStateChangeRef.current = onScrollStateChange
 
   const scrollToBottom = useCallback(() => {
     if (!containerRef?.current) return
     userScrolledAtRef.current = 0
     userDisengagedRef.current = false
     containerRef.current.scrollTop = containerRef.current.scrollHeight
-    onScrollStateChange?.(false)
-  }, [containerRef, onScrollStateChange])
+    onScrollStateChangeRef.current?.(false)
+  }, [containerRef])
 
   useEffect(() => {
     lastMessageCountRef.current = 0
@@ -49,14 +52,13 @@ export function useAutoScroll<T extends Message>({
   }, [sessionId])
 
   useEffect(() => {
-    if (!containerRef?.current) return
-    
-    const container = containerRef.current
+    const container = containerRef?.current
+    if (!container) return
 
     const markDisengaged = () => {
       userScrolledAtRef.current = Date.now()
       userDisengagedRef.current = true
-      onScrollStateChange?.(true)
+      onScrollStateChangeRef.current?.(true)
     }
 
     const handlePointerDown = (e: PointerEvent) => {
@@ -85,13 +87,31 @@ export function useAutoScroll<T extends Message>({
         markDisengaged()
       }
     }
+
+    const handleScroll = () => {
+      const { scrollTop, scrollHeight, clientHeight } = container
+      const isAtBottom = scrollHeight - scrollTop - clientHeight < 50
+      
+      if (isAtBottom) {
+        if (userDisengagedRef.current) {
+          userScrolledAtRef.current = 0
+          userDisengagedRef.current = false
+          onScrollStateChangeRef.current?.(false)
+        }
+      } else if (!userDisengagedRef.current) {
+        userScrolledAtRef.current = Date.now()
+        userDisengagedRef.current = true
+        onScrollStateChangeRef.current?.(true)
+      }
+    }
 
     container.addEventListener('pointerdown', handlePointerDown, { passive: true })
     container.addEventListener('pointermove', handlePointerMove, { passive: true })
     container.addEventListener('pointerup', handlePointerUp, { passive: true })
     container.addEventListener('pointercancel', handlePointerUp, { passive: true })
     container.addEventListener('wheel', handleWheel, { passive: true })
     container.addEventListener('keydown', handleKeyDown)
+    container.addEventListener('scroll', handleScroll, { passive: true })
 
     return () => {
       container.removeEventListener('pointerdown', handlePointerDown)
@@ -100,8 +120,9 @@ export function useAutoScroll<T extends Message>({
       container.removeEventListener('pointercancel', handlePointerUp)
       container.removeEventListener('wheel', handleWheel)
       container.removeEventListener('keydown', handleKeyDown)
+      container.removeEventListener('scroll', handleScroll)
     }
-  }, [containerRef, onScrollStateChange])
+  }, [containerRef, sessionId, messages])
 
   useEffect(() => {
     if (!containerRef?.current || !messages) return