fix: minor bugs, TODO: session management

Author: entelecheia

src/apis/chatgpt.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable @typescript-eslint/no-empty-function */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { isEmpty } from 'lodash-es'
@@ -82,7 +83,7 @@ export async function generateAnswersWithChatgptWebApi(
   port.onDisconnect.addListener(() => {
     console.debug('port disconnected')
     controller.abort()
-    deleteConversation()
+    // deleteConversation()
   })
 
   const models = await getModels(accessToken).catch(() => {

src/components/ChatCard.tsx

@@ -44,11 +44,27 @@ function usePrevious(value: any) {
 }
 
 function ChatCard(props: ChatCardProps) {
+  // Component states
   const [isReady, setIsReady] = useState(!props.question)
   const [port, setPort] = useState(() => Browser.runtime.connect())
   const [session, setSession] = useState(props.session)
+  const [config, setConfig] = useState(defaultConfig)
+
+  const prevQuestion = usePrevious(props.question)
   const windowSize = useClampWindowSize([0, Infinity], [250, 1100])
   const bodyRef = useRef<HTMLDivElement>(null)
+
+  // Load and set user configuration
+  useEffect(() => {
+    getUserConfig().then(setConfig)
+  }, [])
+
+  // Handle onUpdate callback if provided
+  useEffect(() => {
+    if (props.onUpdate) props.onUpdate()
+  })
+
+  // Initialize chatItemData
   const [chatItemData, setChatItemData] = useState<ChatItemData[]>(
     (() => {
       if (props.session.conversationRecords?.length === 0) {
@@ -65,16 +81,6 @@ function ChatCard(props: ChatCardProps) {
       }
     })(),
   )
-  const [config, setConfig] = useState(defaultConfig)
-  const prevQuestion = usePrevious(props.question)
-
-  useEffect(() => {
-    getUserConfig().then(setConfig)
-  }, [])
-
-  useEffect(() => {
-    if (props.onUpdate) props.onUpdate()
-  })
 
   useEffect(() => {
     if (props.question && (!prevQuestion || prevQuestion !== props.question) && isReady) {
@@ -124,6 +130,7 @@ function ChatCard(props: ChatCardProps) {
   useEffect(() => {
     const listener = () => {
       setPort(Browser.runtime.connect())
+      setIsReady(true)
     }
     port.onDisconnect.addListener(listener)
     return () => {

src/configs/userConfig.ts

@@ -175,7 +175,7 @@ export async function updateUserConfig(updates: Partial<UserConfigType>) {
 
 export async function getPreferredLanguage() {
   return getUserConfig().then((config) => {
-    if (config.uiLanguage === 'Auto') {
+    if (config.chatLanguage === 'Auto') {
       return getUILanguage()
     }
     return config.chatLanguage

src/content/index.tsx

@@ -2,6 +2,7 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import { render } from 'preact'
+import Browser from 'webextension-polyfill'
 import '../../styles/base.css'
 import '../../styles/styles.scss'
 import ChatContainer from '../components/ChatContainer'
@@ -144,6 +145,17 @@ async function run() {
     window.postMessage({ type: 'NEW_PROMPT', prompt }, '*')
   }
 
+  const onUrlChange = () => {
+    // Send a message to the background script to delete the conversation when the context changes.
+    const message = {
+      type: 'DELETE_CONVERSATION',
+      conversationId: session.conversationId,
+    }
+    Browser.runtime.sendMessage(message)
+  }
+
+  window.addEventListener('popstate', onUrlChange)
+
   // Call mountChatContainer with the initialQuestion as the initial prompt
   mountChatContainer(session, initialQuestion, siteConfig)
   attachToolbar(session, handlePromptGenerated)

src/service/index.ts

@@ -7,6 +7,7 @@ import {
   generateAnswersWithChatgptWebApi,
   generateAnswersWithGptCompletionApi,
   sendMessageFeedback,
+  setConversationProperty,
 } from '../apis'
 import {
   chatgptApiModelKeys,
@@ -17,6 +18,13 @@ import {
 } from '../configs'
 import { cache, getAccessToken, KEY_ACCESS_TOKEN } from '../utils'
 
+async function deleteConversation(conversationId: string) {
+  const accessToken = await getAccessToken()
+  if (conversationId) {
+    await setConversationProperty(accessToken, conversationId, { is_visible: false })
+  }
+}
+
 Browser.runtime.onConnect.addListener((port) => {
   console.debug('connected')
   port.onMessage.addListener(async (msg) => {
@@ -75,6 +83,8 @@ Browser.runtime.onMessage.addListener(async (message) => {
     return getAccessToken()
   } else if (message.type === 'OPEN_LECTURE') {
     Browser.tabs.create({ url: 'https://lecture.entelecheia.ai' })
+  } else if (message.type === 'DELETE_CONVERSATION') {
+    deleteConversation(message.conversationId)
   }
 })