From 0b934b835d79a51695a7c791f0ea83b8c29f963d Mon Sep 17 00:00:00 2001
From: josc146 <josStorer@outlook.com>
Date: Thu, 16 Mar 2023 11:31:51 +0800
Subject: [PATCH] feat: auto scroll to bottom when submitting a question or
 finishing an answer

---
 src/components/ConversationCard/index.jsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/ConversationCard/index.jsx b/src/components/ConversationCard/index.jsx
index ab31c11..c50fba4 100644
--- a/src/components/ConversationCard/index.jsx
+++ b/src/components/ConversationCard/index.jsx
@@ -1,4 +1,4 @@
-import { memo, useEffect, useState } from 'react'
+import { memo, useEffect, useRef, useState } from 'react'
 import PropTypes from 'prop-types'
 import Browser from 'webextension-polyfill'
 import InputBox from '../InputBox'
@@ -34,6 +34,7 @@ function ConversationCard(props) {
   const [port, setPort] = useState(() => Browser.runtime.connect())
   const [session, setSession] = useState(props.session)
   const windowSize = useClampWindowSize([0, Infinity], [250, 1100])
+  const bodyRef = useRef(null)
   /**
    * @type {[ConversationItemData[], (conversationItemData: ConversationItemData[]) => void]}
    */
@@ -67,6 +68,10 @@ function ConversationCard(props) {
     if (props.onUpdate) props.onUpdate()
   })
 
+  useEffect(() => {
+    bodyRef.current.scrollTop = bodyRef.current.scrollHeight
+  }, [session])
+
   useEffect(() => {
     // when the page is responsive, session may accumulate redundant data and needs to be cleared after remounting and before making a new request
     if (props.question) {
@@ -215,7 +220,11 @@ function ConversationCard(props) {
         </span>
       </div>
       <hr />
-      <div className="markdown-body" style={{ maxHeight: windowSize[1] * 0.75 + 'px' }}>
+      <div
+        ref={bodyRef}
+        className="markdown-body"
+        style={{ maxHeight: windowSize[1] * 0.75 + 'px' }}
+      >
         {conversationItemData.map((data, idx) => (
           <ConversationItem
             content={data.content}