WIP, custom API Modes

Author: josStorer

src/config/index.mjs

@@ -169,7 +169,7 @@ export const Models = {
   chatgptApi35: { value: 'gpt-3.5-turbo', desc: 'ChatGPT (GPT-3.5-turbo)' },
   chatgptApi35_16k: { value: 'gpt-3.5-turbo-16k', desc: 'ChatGPT (GPT-3.5-turbo-16k)' },
 
-  chatgptApi4o_128k: { value: 'gpt-4o', desc: 'ChatGPT (GPT-4o)' },
+  chatgptApi4o_128k: { value: 'gpt-4o', desc: 'ChatGPT (GPT-4o, 128k)' },
   chatgptApi4oMini: { value: 'gpt-4o-mini', desc: 'ChatGPT (GPT-4o mini)' },
   chatgptApi4_8k: { value: 'gpt-4', desc: 'ChatGPT (GPT-4-8k)' },
   chatgptApi4_32k: { value: 'gpt-4-32k', desc: 'ChatGPT (GPT-4-32k)' },
@@ -341,10 +341,13 @@ export const defaultConfig = {
   // others
 
   alwaysCreateNewConversationWindow: false,
+  // The handling of activeApiModes and customApiModes is somewhat complex.
+  // It does not directly convert activeApiModes into customApiModes, which is for compatibility considerations.
+  // It allows the content of activeApiModes to change with version updates when the user has not customized ApiModes.
+  // If it were directly written into customApiModes, the value would become fixed, even if the user has not made any customizations.
   activeApiModes: [
     'chatgptFree35',
     'chatgptFree4o',
-    'chatgptPlus4',
     'chatgptApi35',
     'chatgptApi4o_128k',
     'claude2WebFree',
@@ -354,7 +357,6 @@ export const defaultConfig = {
     'moonshot_v1_8k',
     'chatglmTurbo',
     'customModel',
-    'ollamaModel',
     'azureOpenAi',
   ],
   customApiModes: [

src/popup/sections/ApiModes.jsx

@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next'
 import PropTypes from 'prop-types'
-import { apiModeToModelName, modelNameToDesc } from '../../utils/index.mjs'
+import { apiModeToModelName, modelNameToApiMode, modelNameToDesc } from '../../utils/index.mjs'
 import { PencilIcon, TrashIcon } from '@primer/octicons-react'
 import { useState } from 'react'
 import {
@@ -31,6 +31,20 @@ export function ApiModes({ config, updateConfig }) {
   const [editingApiMode, setEditingApiMode] = useState(defaultApiMode)
   const [editingIndex, setEditingIndex] = useState(-1)
 
+  const stringApiModes = config.customApiModes.map(apiModeToModelName)
+  const originalApiModes = config.activeApiModes
+    .map((modelName) => {
+      // 'customModel' is always active
+      if (stringApiModes.includes(modelName) || modelName === 'customModel') {
+        return
+      }
+      if (modelName === 'azureOpenAi') modelName += '-' + config.azureDeploymentName
+      if (modelName === 'ollama') modelName += '-' + config.ollamaModelName
+      return modelNameToApiMode(modelName)
+    })
+    .filter((apiMode) => apiMode)
+  const apiModes = [...originalApiModes, ...config.customApiModes]
+
   const editingComponent = (
     <div style={{ display: 'flex', flexDirection: 'column', '--spacing': '4px' }}>
       <div style={{ display: 'flex', gap: '12px' }}>
@@ -47,12 +61,13 @@ export function ApiModes({ config, updateConfig }) {
             e.preventDefault()
             if (editingIndex === -1) {
               updateConfig({
-                customApiModes: [...config.customApiModes, editingApiMode],
+                activeApiModes: [],
+                customApiModes: [...apiModes, editingApiMode],
               })
             } else {
-              const customApiModes = [...config.customApiModes]
+              const customApiModes = [...apiModes]
               customApiModes[editingIndex] = editingApiMode
-              updateConfig({ customApiModes })
+              updateConfig({ activeApiModes: [], customApiModes })
             }
             setEditing(false)
           }}
@@ -128,7 +143,7 @@ export function ApiModes({ config, updateConfig }) {
 
   return (
     <>
-      {config.customApiModes.map(
+      {apiModes.map(
         (apiMode, index) =>
           apiMode.groupName &&
           apiMode.itemName &&
@@ -140,9 +155,9 @@ export function ApiModes({ config, updateConfig }) {
                 type="checkbox"
                 checked={apiMode.active}
                 onChange={(e) => {
-                  const customApiModes = [...config.customApiModes]
+                  const customApiModes = [...apiModes]
                   customApiModes[index] = { ...apiMode, active: e.target.checked }
-                  updateConfig({ customApiModes })
+                  updateConfig({ activeApiModes: [], customApiModes })
                 }}
               />
               {modelNameToDesc(apiModeToModelName(apiMode), t)}
@@ -163,9 +178,9 @@ export function ApiModes({ config, updateConfig }) {
                   style={{ cursor: 'pointer' }}
                   onClick={(e) => {
                     e.preventDefault()
-                    const customApiModes = [...config.customApiModes]
+                    const customApiModes = [...apiModes]
                     customApiModes.splice(index, 1)
-                    updateConfig({ customApiModes })
+                    updateConfig({ activeApiModes: [], customApiModes })
                   }}
                 >
                   <TrashIcon />

src/utils/model-name-convert.mjs

@@ -42,19 +42,19 @@ export function modelNameToValue(modelName) {
 }
 
 export function isCustomModelName(modelName) {
-  return modelName.includes('-')
+  return modelName ? modelName.includes('-') : false
 }
 
 export function modelNameToApiMode(modelName) {
   const presetPart = modelNameToPresetPart(modelName)
   const found =
     Object.entries(ModelGroups).find(([k]) => presetPart === k) ||
-    Object.entries(ModelGroups).find(([, g]) => presetPart in g.value)
+    Object.entries(ModelGroups).find(([, g]) => g.value.includes(presetPart))
   if (found) {
     const [groupName] = found
     const isCustom = isCustomModelName(modelName)
     let customName = ''
-    if (isCustom) customName = modelNameToCustomPart()
+    if (isCustom) customName = modelNameToCustomPart(modelName)
     return {
       groupName,
       itemName: presetPart,