feat: make the chat box display the correct model name, and allow multiple different models to be used at the same time (#49)

Author: josStorer

src/background/apis/bing-web.mjs

@@ -47,7 +47,7 @@ export async function generateAnswersWithBingWebApi(
         answer += token
         // remove reference markers [^number^]
         answer = answer.replaceAll(/\[\^\d+\^\]/g, '')
-        port.postMessage({ answer: answer, done: false, session: session })
+        port.postMessage({ answer: answer, done: false, session: null })
       },
     })
     .catch((err) => {

src/background/apis/chatgpt-web.mjs

@@ -122,7 +122,7 @@ export async function generateAnswersWithChatgptWebApi(port, question, session,
 
       answer = data.message?.content?.parts?.[0]
       if (answer) {
-        port.postMessage({ answer: answer, done: false, session: session })
+        port.postMessage({ answer: answer, done: false, session: null })
       }
     },
     async onStart() {

src/background/index.mjs

@@ -15,6 +15,7 @@ import {
   defaultConfig,
   getUserConfig,
   gptApiModelKeys,
+  Models,
 } from '../config/index.mjs'
 import { isSafari } from '../utils/is-safari'
 import { config as menuConfig } from '../content-script/menu-tools'
@@ -58,47 +59,50 @@ Browser.runtime.onConnect.addListener((port) => {
     const session = msg.session
     if (!session) return
     const config = await getUserConfig()
+    if (!session.modelName) session.modelName = config.modelName
+    if (!session.aiName) session.aiName = Models[session.modelName].desc
+    port.postMessage({ session })
 
     try {
-      if (chatgptWebModelKeys.includes(config.modelName)) {
+      if (chatgptWebModelKeys.includes(session.modelName)) {
         const accessToken = await getChatGptAccessToken()
         session.messageId = crypto.randomUUID()
         if (session.parentMessageId == null) {
           session.parentMessageId = crypto.randomUUID()
         }
         await generateAnswersWithChatgptWebApi(port, session.question, session, accessToken)
-      } else if (bingWebModelKeys.includes(config.modelName)) {
+      } else if (bingWebModelKeys.includes(session.modelName)) {
         const accessToken = await getBingAccessToken()
         await generateAnswersWithBingWebApi(
           port,
           session.question,
           session,
           accessToken,
-          config.modelName,
+          session.modelName,
         )
-      } else if (gptApiModelKeys.includes(config.modelName)) {
+      } else if (gptApiModelKeys.includes(session.modelName)) {
         await generateAnswersWithGptCompletionApi(
           port,
           session.question,
           session,
           config.apiKey,
-          config.modelName,
+          session.modelName,
         )
-      } else if (chatgptApiModelKeys.includes(config.modelName)) {
+      } else if (chatgptApiModelKeys.includes(session.modelName)) {
         await generateAnswersWithChatgptApi(
           port,
           session.question,
           session,
           config.apiKey,
-          config.modelName,
+          session.modelName,
         )
-      } else if (customApiModelKeys.includes(config.modelName)) {
+      } else if (customApiModelKeys.includes(session.modelName)) {
         await generateAnswersWithCustomApi(
           port,
           session.question,
           session,
           config.apiKey,
-          config.modelName,
+          session.modelName,
         )
       }
     } catch (err) {

src/components/ConversationCard/index.jsx

@@ -18,14 +18,12 @@ class ConversationItemData extends Object {
   /**
    * @param {'question'|'answer'|'error'} type
    * @param {string} content
-   * @param {object} session
    * @param {bool} done
    */
-  constructor(type, content, session = null, done = false) {
+  constructor(type, content, done = false) {
     super()
     this.type = type
     this.content = content
-    this.session = session
     this.done = done
   }
 }
@@ -41,7 +39,7 @@ function ConversationCard(props) {
    */
   const [conversationItemData, setConversationItemData] = useState(
     (() => {
-      if (props.session.conversationRecords.length === 0)
+      if (session.conversationRecords.length === 0)
         if (props.question)
           return [
             new ConversationItemData(
@@ -52,13 +50,9 @@ function ConversationCard(props) {
         else return []
       else {
         const ret = []
-        for (const record of props.session.conversationRecords) {
-          ret.push(
-            new ConversationItemData('question', record.question + '\n<hr/>', props.session, true),
-          )
-          ret.push(
-            new ConversationItemData('answer', record.answer + '\n<hr/>', props.session, true),
-          )
+        for (const record of session.conversationRecords) {
+          ret.push(new ConversationItemData('question', record.question + '\n<hr/>', true))
+          ret.push(new ConversationItemData('answer', record.answer + '\n<hr/>', true))
         }
         return ret
       }
@@ -106,7 +100,6 @@ function ConversationCard(props) {
         newType,
         appended ? copy[index].content + value : value,
       )
-      copy[index].session = { ...session }
       copy[index].done = done
       return copy
     })
@@ -249,7 +242,7 @@ function ConversationCard(props) {
             content={data.content}
             key={idx}
             type={data.type}
-            session={data.session}
+            session={session}
             done={data.done}
             port={port}
           />

src/components/ConversationItem/index.jsx

@@ -34,7 +34,7 @@ export function ConversationItem({ type, content, session, done, port }) {
       return (
         <div className={type} dir="auto">
           <div className="gpt-header">
-            <p>{session ? 'ChatGPT:' : 'Loading...'}</p>
+            <p>{session && session.aiName ? session.aiName : 'Loading...'}</p>
             <div style="display: flex; gap: 15px;">
               {!done && (
                 <button

src/utils/init-session.mjs

@@ -9,6 +9,8 @@
  * @typedef {object} Session
  * @property {string|null} question
  * @property {Object[]|null} conversationRecords
+ * @property {string|null} aiName
+ * @property {string|null} modelName
  * @property {string|null} conversationId - chatGPT web mode
  * @property {string|null} messageId - chatGPT web mode
  * @property {string|null} parentMessageId - chatGPT web mode
@@ -24,6 +26,8 @@ export function initSession({ question = null, conversationRecords = [] } = {})
     // common
     question,
     conversationRecords,
+    aiName: null,
+    modelName: null,
 
     // chatgpt-web
     conversationId: null,