feat: an easier way to use different bing styles (#264)

src/background/index.mjs

@@ -60,6 +60,7 @@ function setPortProxy(port, proxyTabId) {
 }
 
 async function executeApi(session, port, config) {
+  console.debug('modelName', session.modelName)
   if (chatgptWebModelKeys.includes(session.modelName)) {
     let tabId
     if (
@@ -78,9 +79,9 @@ async function executeApi(session, port, config) {
       const accessToken = await getChatGptAccessToken()
       await generateAnswersWithChatgptWebApi(port, session.question, session, accessToken)
     }
-  } else if (bingWebModelKeys.includes(session.modelName)) {
+  } else if (bingWebModelKeys.some((n) => session.modelName.includes(n))) {
     const accessToken = await getBingAccessToken()
-    if (session.modelName === 'bingFreeSydney')
+    if (session.modelName.includes('bingFreeSydney'))
       await generateAnswersWithBingWebApi(port, session.question, session, accessToken, true)
     else await generateAnswersWithBingWebApi(port, session.question, session, accessToken)
   } else if (gptApiModelKeys.includes(session.modelName)) {

src/components/ConversationCard/index.jsx

@@ -10,7 +10,7 @@ import FileSaver from 'file-saver'
 import { render } from 'preact'
 import FloatingToolbar from '../FloatingToolbar'
 import { useClampWindowSize } from '../../hooks/use-clamp-window-size'
-import { Models } from '../../config/index.mjs'
+import { ModelMode, Models } from '../../config/index.mjs'
 import { useTranslation } from 'react-i18next'
 import DeleteButton from '../DeleteButton'
 import { useConfig } from '../../hooks/use-config.mjs'
@@ -233,13 +233,25 @@ function ConversationCard(props) {
               else setSession(newSession)
             }}
           >
-            {config.activeApiModes.map((key) => {
-              const model = Models[key]
-              return (
-                <option value={key} key={key} selected={key === session.modelName}>
-                  {t(model.desc)}
-                </option>
-              )
+            {config.activeApiModes.map((modelName) => {
+              let desc
+              if (modelName.includes('-')) {
+                const splits = modelName.split('-')
+                if (splits[0] in Models)
+                  desc = `${t(Models[splits[0]].desc)} (${t(ModelMode[splits[1]])})`
+              } else {
+                if (modelName in Models) desc = t(Models[modelName].desc)
+              }
+              if (desc)
+                return (
+                  <option
+                    value={modelName}
+                    key={modelName}
+                    selected={modelName === session.modelName}
+                  >
+                    {desc}
+                  </option>
+                )
             })}
           </select>
         </span>

src/config/index.mjs

@@ -2,6 +2,42 @@ import { defaults } from 'lodash-es'
 import Browser from 'webextension-polyfill'
 import { isMobile } from '../utils/is-mobile.mjs'
 
+export const TriggerMode = {
+  always: 'Always',
+  questionMark: 'When query ends with question mark (?)',
+  manually: 'Manually',
+}
+
+export const ThemeMode = {
+  light: 'Light',
+  dark: 'Dark',
+  auto: 'Auto',
+}
+
+export const ModelMode = {
+  balanced: 'Balanced',
+  creative: 'Creative',
+  precise: 'Precise',
+  fast: 'Fast',
+}
+
+export const chatgptWebModelKeys = ['chatgptFree35', 'chatgptPlus4']
+export const bingWebModelKeys = ['bingFree4', 'bingFreeSydney']
+export const gptApiModelKeys = ['gptApiDavinci']
+export const chatgptApiModelKeys = ['chatgptApi35', 'chatgptApi4_8k', 'chatgptApi4_32k']
+export const customApiModelKeys = ['customModel']
+export const azureOpenAiApiModelKeys = ['azureOpenAi']
+export const githubThirdPartyApiModelKeys = ['waylaidwandererApi']
+export const poeWebModelKeys = [
+  'poeAiWebSage',
+  'poeAiWebGPT4',
+  'poeAiWebClaudePlus',
+  'poeAiWebClaude',
+  'poeAiWebCustom',
+  'poeAiWebChatGpt',
+  'poeAiWebDragonfly',
+]
+
 /**
  * @typedef {object} Model
  * @property {string} value
@@ -31,40 +67,13 @@ export const Models = {
   poeAiWebDragonfly: { value: 'dragonfly', desc: 'Poe AI (Web, Dragonfly)' },
 }
 
-export const chatgptWebModelKeys = ['chatgptFree35', 'chatgptPlus4']
-export const bingWebModelKeys = ['bingFree4', 'bingFreeSydney']
-export const gptApiModelKeys = ['gptApiDavinci']
-export const chatgptApiModelKeys = ['chatgptApi35', 'chatgptApi4_8k', 'chatgptApi4_32k']
-export const customApiModelKeys = ['customModel']
-export const azureOpenAiApiModelKeys = ['azureOpenAi']
-export const githubThirdPartyApiModelKeys = ['waylaidwandererApi']
-export const poeWebModelKeys = [
-  'poeAiWebSage',
-  'poeAiWebGPT4',
-  'poeAiWebClaudePlus',
-  'poeAiWebClaude',
-  'poeAiWebCustom',
-  'poeAiWebChatGpt',
-  'poeAiWebDragonfly',
-]
-
-export const TriggerMode = {
-  always: 'Always',
-  questionMark: 'When query ends with question mark (?)',
-  manually: 'Manually',
-}
-
-export const ThemeMode = {
-  light: 'Light',
-  dark: 'Dark',
-  auto: 'Auto',
-}
-
-export const ModelMode = {
-  balanced: 'Balanced',
-  creative: 'Creative',
-  precise: 'Precise',
-  fast: 'Fast',
+for (const modelName in Models) {
+  if (isUsingMultiModeModel({ modelName }))
+    for (const mode in ModelMode)
+      Models[`${modelName}-${mode}`] = {
+        value: mode,
+        desc: `${Models[modelName].desc} (${ModelMode[mode]})`,
+      }
 }
 
 /**

src/popup/sections/ApiModes.jsx

@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next'
 import PropTypes from 'prop-types'
-import { Models } from '../../config/index.mjs'
+import { ModelMode, Models } from '../../config/index.mjs'
 
 ApiModes.propTypes = {
   config: PropTypes.object.isRequired,
@@ -12,21 +12,32 @@ export function ApiModes({ config, updateConfig }) {
 
   return (
     <>
-      {config.apiModes.map((key) => (
-        <label key={key}>
-          <input
-            type="checkbox"
-            checked={config.activeApiModes.includes(key)}
-            onChange={(e) => {
-              const checked = e.target.checked
-              const activeApiModes = config.activeApiModes.filter((i) => i !== key)
-              if (checked) activeApiModes.push(key)
-              updateConfig({ activeApiModes })
-            }}
-          />
-          {t(Models[key].desc)}
-        </label>
-      ))}
+      {config.apiModes.map((modelName) => {
+        let desc
+        if (modelName.includes('-')) {
+          const splits = modelName.split('-')
+          if (splits[0] in Models)
+            desc = `${t(Models[splits[0]].desc)} (${t(ModelMode[splits[1]])})`
+        } else {
+          if (modelName in Models) desc = t(Models[modelName].desc)
+        }
+        if (desc)
+          return (
+            <label key={modelName}>
+              <input
+                type="checkbox"
+                checked={config.activeApiModes.includes(modelName)}
+                onChange={(e) => {
+                  const checked = e.target.checked
+                  const activeApiModes = config.activeApiModes.filter((i) => i !== modelName)
+                  if (checked) activeApiModes.push(modelName)
+                  updateConfig({ activeApiModes })
+                }}
+              />
+              {desc}
+            </label>
+          )
+      })}
     </>
   )
 }

src/popup/sections/GeneralPart.jsx

@@ -94,13 +94,25 @@ export function GeneralPart({ config, updateConfig }) {
               updateConfig({ modelName: modelName })
             }}
           >
-            {config.activeApiModes.map((key) => {
-              const model = Models[key]
-              return (
-                <option value={key} key={key} selected={key === config.modelName}>
-                  {t(model.desc)}
-                </option>
-              )
+            {config.activeApiModes.map((modelName) => {
+              let desc
+              if (modelName.includes('-')) {
+                const splits = modelName.split('-')
+                if (splits[0] in Models)
+                  desc = `${t(Models[splits[0]].desc)} (${t(ModelMode[splits[1]])})`
+              } else {
+                if (modelName in Models) desc = t(Models[modelName].desc)
+              }
+              if (desc)
+                return (
+                  <option
+                    value={modelName}
+                    key={modelName}
+                    selected={modelName === config.modelName}
+                  >
+                    {desc}
+                  </option>
+                )
             })}
           </select>
           {isUsingMultiModeModel(config) && (

src/services/apis/bing-web.mjs

@@ -18,6 +18,11 @@ export async function generateAnswersWithBingWebApi(
 ) {
   const { controller, messageListener } = setAbortController(port)
   const config = await getUserConfig()
+  let modelMode
+  if (session.modelName.includes('-')) modelMode = session.modelName.split('-')[1]
+  else modelMode = config.modelMode
+
+  console.debug('mode', modelMode)
 
   const bingAIClient = new BingAIClient({ userToken: accessToken })
   if (session.bingWeb_jailbreakConversationCache)
@@ -30,7 +35,7 @@ export async function generateAnswersWithBingWebApi(
   const response = await bingAIClient
     .sendMessage(question, {
       abortController: controller,
-      toneStyle: config.modelMode,
+      toneStyle: modelMode,
       jailbreakConversationId: sydneyMode,
       onProgress: (token) => {
         answer += token