diff --git a/app/components/home.tsx b/app/components/home.tsx
index 9c7e45f1..74434eb0 100644
--- a/app/components/home.tsx
+++ b/app/components/home.tsx
@@ -204,9 +204,21 @@ export function Chat(props: { showSideBar?: () => void }) {
 
   // for auto-scroll
   const latestMessageRef = useRef<HTMLDivElement>(null);
+  const inputPanelRef = useRef<HTMLDivElement>(null);
 
   // wont scroll while hovering messages
   const [autoScroll, setAutoScroll] = useState(false);
+  useEffect(() => {
+    const handleMouseDown = (e: MouseEvent) => {
+      // check if click on input panel
+      setAutoScroll(
+        !!inputPanelRef.current &&
+          inputPanelRef.current.contains(e.target as HTMLElement)
+      );
+    };
+    document.addEventListener("mousedown", handleMouseDown);
+    return () => document.removeEventListener("mousedown", handleMouseDown);
+  });
 
   // preview messages
   const messages = (session.messages as RenderMessage[])
@@ -369,7 +381,7 @@ export function Chat(props: { showSideBar?: () => void }) {
         </div>
       </div>
 
-      <div className={styles["chat-input-panel"]}>
+      <div className={styles["chat-input-panel"]} ref={inputPanelRef}>
         <div className={styles["chat-input-panel-inner"]}>
           <textarea
             className={styles["chat-input"]}
@@ -378,8 +390,6 @@ export function Chat(props: { showSideBar?: () => void }) {
             onInput={(e) => setUserInput(e.currentTarget.value)}
             value={userInput}
             onKeyDown={(e) => onInputKeyDown(e as any)}
-            onFocus={() => setAutoScroll(true)}
-            onBlur={() => setAutoScroll(false)}
             autoFocus
           />
           <IconButton