feat: multi-mode for bing

Author: josStorer

src/background/apis/bing-web.mjs

@@ -1,4 +1,5 @@
 import BingAIClient from '../clients/BingAIClient'
+import { getUserConfig } from '../../config/index.mjs'
 
 /**
  * @param {Runtime.Port} port
@@ -49,6 +50,7 @@ export async function generateAnswersWithBingWebApi(
         answer = answer.replaceAll(/\[\^\d+\^\]/g, '')
         port.postMessage({ answer: answer, done: false, session: null })
       },
+      toneStyle: (await getUserConfig()).modelMode,
     })
     .catch((err) => {
       port.onMessage.removeListener(stopListener)

src/config/index.mjs

@@ -39,6 +39,13 @@ export const ThemeMode = {
   auto: 'Auto',
 }
 
+export const ModelMode = {
+  balanced: 'Balanced',
+  creative: 'Creative',
+  precise: 'Precise',
+  fast: 'Fast',
+}
+
 export const maxResponseTokenLength = 1000
 
 /**
@@ -54,6 +61,8 @@ export const defaultConfig = {
   /** @type {keyof Models}*/
   modelName: 'chatgptFree35',
   apiKey: '',
+  /** @type {keyof ModelMode}*/
+  modelMode: 'balanced',
   preferredLanguage: navigator.language.substring(0, 2),
   insertAtTop: isMobile(),
   lockWhenAnswer: false,
@@ -128,6 +137,10 @@ export function isUsingApiKey(config) {
   )
 }
 
+export function isUsingMultiModeModel(config) {
+  return bingWebModelKeys.includes(config.modelName)
+}
+
 export function isUsingCustomModel(config) {
   return customApiModelKeys.includes(config.modelName)
 }

src/popup/Popup.jsx

@@ -5,6 +5,8 @@ import {
   getUserConfig,
   isUsingApiKey,
   isUsingCustomModel,
+  isUsingMultiModeModel,
+  ModelMode,
   Models,
   setUserConfig,
   ThemeMode,
@@ -78,7 +80,9 @@ function GeneralPart({ config, updateConfig }) {
         <legend>API Mode</legend>
         <span style="display: flex; gap: 15px;">
           <select
-            style={isUsingApiKey(config) ? 'width: 50%;' : undefined}
+            style={
+              isUsingApiKey(config) || isUsingMultiModeModel(config) ? 'width: 50%;' : undefined
+            }
             required
             onChange={(e) => {
               const modelName = e.target.value
@@ -93,6 +97,25 @@ function GeneralPart({ config, updateConfig }) {
               )
             })}
           </select>
+          {isUsingMultiModeModel(config) && (
+            <span style="width: 50%; display: flex; gap: 5px;">
+              <select
+                required
+                onChange={(e) => {
+                  const modelMode = e.target.value
+                  updateConfig({ modelMode: modelMode })
+                }}
+              >
+                {Object.entries(ModelMode).map(([key, desc]) => {
+                  return (
+                    <option value={key} key={key} selected={key === config.modelMode}>
+                      {desc}
+                    </option>
+                  )
+                })}
+              </select>
+            </span>
+          )}
           {isUsingApiKey(config) && (
             <span style="width: 50%; display: flex; gap: 5px;">
               <input