feat: enabled API Modes option (#264)

Author: josStorer

src/_locales/en/main.json

@@ -110,5 +110,6 @@
   "Modules": "Modules",
   "API Params": "API Params",
   "API Url": "API Url",
-  "Others": "Others"
+  "Others": "Others",
+  "API Modes": "API Modes"
 }

src/_locales/zh-hans/main.json

@@ -110,5 +110,6 @@
   "Modules": "模块",
   "API Params": "API参数",
   "API Url": "API地址",
-  "Others": "其他"
+  "Others": "其他",
+  "API Modes": "API模式"
 }

src/_locales/zh-hant/main.json

@@ -110,5 +110,6 @@
   "Modules": "模組",
   "API Params": "API參數",
   "API Url": "API網址",
-  "Others": "其他"
+  "Others": "其他",
+  "API Modes": "API模式"
 }

src/components/ConversationCard/index.jsx

@@ -233,7 +233,8 @@ function ConversationCard(props) {
               else setSession(newSession)
             }}
           >
-            {Object.entries(Models).map(([key, model]) => {
+            {config.activeApiModes.map((key) => {
+              const model = Models[key]
               return (
                 <option value={key} key={key} selected={key === session.modelName}>
                   {t(model.desc)}

src/config/index.mjs

@@ -118,6 +118,20 @@ export const defaultConfig = {
   // others
 
   alwaysCreateNewConversationWindow: false,
+  activeApiModes: [
+    'chatgptFree35',
+    'chatgptPlus4',
+    'chatgptApi35',
+    'bingFree4',
+    'bingFreeSydney',
+    'poeAiWebSage',
+    'poeAiWebGPT4',
+    'poeAiWebClaudePlus',
+    'chatgptApi4_8k',
+    'customModel',
+    'azureOpenAi',
+    'poeAiWebCustom',
+  ],
   activeSelectionTools: ['translate', 'summary', 'polish', 'code', 'ask'],
   activeSiteAdapters: [
     'bilibili',
@@ -139,6 +153,7 @@ export const defaultConfig = {
   // unchangeable
 
   userLanguage: getNavigatorLanguage(),
+  apiModes: Object.keys(Models),
   selectionTools: [
     'translate',
     'translateToEn',

src/content-script/index.jsx

@@ -304,6 +304,10 @@ async function overwriteAccessToken() {
 async function prepareForForegroundRequests() {
   if (location.hostname !== 'chat.openai.com') return
 
+  const userConfig = await getUserConfig()
+
+  if (!chatgptWebModelKeys.some((model) => userConfig.activeApiModes.includes(model))) return
+
   const div = document.createElement('div')
   document.body.append(div)
   render(<NotificationForChatGPTWeb container={div} />, div)

src/popup/sections/ApiModes.jsx

@@ -0,0 +1,32 @@
+import { useTranslation } from 'react-i18next'
+import PropTypes from 'prop-types'
+import { Models } from '../../config/index.mjs'
+
+ApiModes.propTypes = {
+  config: PropTypes.object.isRequired,
+  updateConfig: PropTypes.func.isRequired,
+}
+
+export function ApiModes({ config, updateConfig }) {
+  const { t } = useTranslation()
+
+  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>
+      ))}
+    </>
+  )
+}

src/popup/sections/GeneralPart.jsx

@@ -94,7 +94,8 @@ export function GeneralPart({ config, updateConfig }) {
               updateConfig({ modelName: modelName })
             }}
           >
-            {Object.entries(Models).map(([key, model]) => {
+            {config.activeApiModes.map((key) => {
+              const model = Models[key]
               return (
                 <option value={key} key={key} selected={key === config.modelName}>
                   {t(model.desc)}

src/popup/sections/ModulesPart.jsx

@@ -1,6 +1,7 @@
 import { useTranslation } from 'react-i18next'
 import PropTypes from 'prop-types'
 import { Tab, TabList, TabPanel, Tabs } from 'react-tabs'
+import { ApiModes } from './ApiModes'
 import { SelectionTools } from './SelectionTools'
 import { SiteAdapters } from './SiteAdapters'
 
@@ -16,10 +17,14 @@ export function ModulesPart({ config, updateConfig }) {
     <>
       <Tabs selectedTabClassName="popup-tab--selected">
         <TabList>
+          <Tab className="popup-tab">{t('API Modes')}</Tab>
           <Tab className="popup-tab">{t('Selection Tools')}</Tab>
           <Tab className="popup-tab">{t('Sites')}</Tab>
         </TabList>
 
+        <TabPanel>
+          <ApiModes config={config} updateConfig={updateConfig} />
+        </TabPanel>
         <TabPanel>
           <SelectionTools config={config} updateConfig={updateConfig} />
         </TabPanel>