feat: lockWhenAnswer config (#5)

Author: josStorer

src/components/ConversationCard/index.jsx

@@ -10,6 +10,7 @@ import FileSaver from 'file-saver'
 import { render } from 'preact'
 import FloatingToolbar from '../FloatingToolbar'
 import { useClampWindowSize } from '../../hooks/use-clamp-window-size'
+import { defaultConfig, getUserConfig } from '../../config'
 
 const logo = Browser.runtime.getURL('logo.png')
 
@@ -63,6 +64,11 @@ function ConversationCard(props) {
       }
     })(),
   )
+  const [config, setConfig] = useState(defaultConfig)
+
+  useEffect(() => {
+    getUserConfig().then(setConfig)
+  }, [])
 
   useEffect(() => {
     if (props.onUpdate) props.onUpdate()
@@ -72,6 +78,10 @@ function ConversationCard(props) {
     bodyRef.current.scrollTop = bodyRef.current.scrollHeight
   }, [session])
 
+  useEffect(() => {
+    if (config.lockWhenAnswer) bodyRef.current.scrollTop = bodyRef.current.scrollHeight
+  }, [conversationItemData])
+
   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) {

src/config.mjs

@@ -42,31 +42,43 @@ export const maxResponseTokenLength = 1000
  * @typedef {typeof defaultConfig} UserConfig
  */
 export const defaultConfig = {
+  // general
+
   /** @type {keyof TriggerMode}*/
   triggerMode: 'manually',
   /** @type {keyof ThemeMode}*/
   themeMode: 'auto',
   /** @type {keyof Models}*/
   modelName: 'chatgptFree',
   apiKey: '',
+  preferredLanguage: navigator.language.substring(0, 2),
   insertAtTop: isMobile(),
+  lockWhenAnswer: false,
+
+  // advanced
+
+  customChatGptWebApiUrl: 'https://chat.openai.com',
+  customChatGptWebApiPath: '/backend-api/conversation',
+  customOpenAiApiUrl: 'https://api.openai.com',
   siteRegex: 'match nothing',
   userSiteRegexOnly: false,
   inputQuery: '',
   appendQuery: '',
   prependQuery: '',
+
+  // others
+
+  activeSelectionTools: Object.keys(toolsConfig),
+  activeSiteAdapters: ['bilibili', 'github', 'gitlab', 'quora', 'reddit', 'youtube', 'zhihu'],
   accessToken: '',
   tokenSavedOn: 0,
-  preferredLanguage: navigator.language.substring(0, 2),
-  userLanguage: navigator.language.substring(0, 2), // unchangeable
-  customChatGptWebApiUrl: 'https://chat.openai.com',
-  customChatGptWebApiPath: '/backend-api/conversation',
-  customOpenAiApiUrl: 'https://api.openai.com',
+
+  // unchangeable
+
+  userLanguage: navigator.language.substring(0, 2),
   selectionTools: Object.keys(toolsConfig),
-  activeSelectionTools: Object.keys(toolsConfig),
   // importing configuration will result in gpt-3-encoder being packaged into the output file
   siteAdapters: ['bilibili', 'github', 'gitlab', 'quora', 'reddit', 'youtube', 'zhihu'],
-  activeSiteAdapters: ['bilibili', 'github', 'gitlab', 'quora', 'reddit', 'youtube', 'zhihu'],
 }
 
 export async function getUserLanguage() {

src/popup/Popup.jsx

@@ -152,6 +152,18 @@ function GeneralPart({ config, updateConfig }) {
         />
         Insert chatGPT at the top of search results
       </label>
+      <label>
+        <input
+          type="checkbox"
+          checked={config.lockWhenAnswer}
+          onChange={(e) => {
+            const checked = e.target.checked
+            updateConfig({ lockWhenAnswer: checked })
+          }}
+        />
+        Lock Scrollbar while Answering
+      </label>
+      <br />
     </>
   )
 }