diff --git a/src/components/ConversationCard/index.jsx b/src/components/ConversationCard/index.jsx
index 0661859..138824f 100644
--- a/src/components/ConversationCard/index.jsx
+++ b/src/components/ConversationCard/index.jsx
@@ -382,7 +382,7 @@ function ConversationCard(props) {
             onChange={(e) => {
               let apiMode = null
               let modelName = 'customModel'
-              if (e.target.value !== -1) {
+              if (e.target.value !== '-1') {
                 apiMode = apiModes[e.target.value]
                 modelName = apiModeToModelName(apiMode)
               }
@@ -390,7 +390,7 @@ function ConversationCard(props) {
                 ...session,
                 modelName,
                 apiMode,
-                aiName: modelNameToDesc(modelName, t),
+                aiName: modelNameToDesc(apiMode ? apiModeToModelName(apiMode) : modelName, t),
               }
               if (config.autoRegenAfterSwitchModel && conversationItemData.length > 0)
                 getRetryFn(newSession)()
@@ -401,17 +401,14 @@ function ConversationCard(props) {
               const modelName = apiModeToModelName(apiMode)
               const desc = modelNameToDesc(modelName, t)
               if (desc) {
-                let selected
-                if (isApiModeSelected(apiMode, session)) selected = true
-                else selected = session.modelName === modelName
                 return (
-                  <option value={index} key={index} selected={selected}>
+                  <option value={index} key={index} selected={isApiModeSelected(apiMode, session)}>
                     {desc}
                   </option>
                 )
               }
             })}
-            <option value={-1} selected={!config.apiMode && config.modelName === 'customModel'}>
+            <option value={-1} selected={!session.apiMode && session.modelName === 'customModel'}>
               {t(Models.customModel.desc)}
             </option>
           </select>
diff --git a/src/config/index.mjs b/src/config/index.mjs
index 174fcaf..50f0af9 100644
--- a/src/config/index.mjs
+++ b/src/config/index.mjs
@@ -1,7 +1,7 @@
 import { defaults } from 'lodash-es'
 import Browser from 'webextension-polyfill'
 import { isMobile } from '../utils/is-mobile.mjs'
-import { modelNameToDesc } from '../utils/model-name-convert.mjs'
+import { isInApiModeGroup, modelNameToDesc } from '../utils/model-name-convert.mjs'
 import { t } from 'i18next'
 
 export const TriggerMode = {
@@ -458,53 +458,77 @@ export function getNavigatorLanguage() {
   return navigator.language.substring(0, 2)
 }
 
-export function isUsingOpenAiApiKey(configOrSession) {
-  return (
-    gptApiModelKeys.includes(configOrSession.modelName) ||
-    chatgptApiModelKeys.includes(configOrSession.modelName)
-  )
+export function isUsingChatgptWebModel(configOrSession) {
+  return isInApiModeGroup(chatgptWebModelKeys, configOrSession)
+}
+
+export function isUsingClaudeWebModel(configOrSession) {
+  return isInApiModeGroup(claudeWebModelKeys, configOrSession)
+}
+
+export function isUsingMoonshotWebModel(configOrSession) {
+  return isInApiModeGroup(moonshotWebModelKeys, configOrSession)
+}
+
+export function isUsingBingWebModel(configOrSession) {
+  return isInApiModeGroup(bingWebModelKeys, configOrSession)
 }
 
 export function isUsingMultiModeModel(configOrSession) {
-  return bingWebModelKeys.includes(configOrSession.modelName)
+  return isInApiModeGroup(bingWebModelKeys, configOrSession)
+}
+
+export function isUsingGeminiWebModel(configOrSession) {
+  return isInApiModeGroup(bardWebModelKeys, configOrSession)
+}
+
+export function isUsingChatgptApiModel(configOrSession) {
+  return isInApiModeGroup(chatgptApiModelKeys, configOrSession)
+}
+
+export function isUsingGptCompletionApiModel(configOrSession) {
+  return isInApiModeGroup(gptApiModelKeys, configOrSession)
+}
+
+export function isUsingOpenAiApiModel(configOrSession) {
+  return isUsingChatgptApiModel(configOrSession) || isUsingGptCompletionApiModel(configOrSession)
+}
+
+export function isUsingClaudeApiModel(configOrSession) {
+  return isInApiModeGroup(claudeApiModelKeys, configOrSession)
+}
+
+export function isUsingMoonshotApiModel(configOrSession) {
+  return isInApiModeGroup(moonshotApiModelKeys, configOrSession)
+}
+
+export function isUsingChatGLMApiModel(configOrSession) {
+  return isInApiModeGroup(chatglmApiModelKeys, configOrSession)
+}
+
+export function isUsingOllamaApiModel(configOrSession) {
+  return isInApiModeGroup(ollamaApiModelKeys, configOrSession)
+}
+
+export function isUsingAzureOpenAiApiModel(configOrSession) {
+  return isInApiModeGroup(azureOpenAiApiModelKeys, configOrSession)
+}
+
+export function isUsingGithubThirdPartyApiModel(configOrSession) {
+  return isInApiModeGroup(githubThirdPartyApiModelKeys, configOrSession)
 }
 
 export function isUsingCustomModel(configOrSession) {
-  return customApiModelKeys.includes(configOrSession.modelName)
-}
-
-export function isUsingOllamaModel(configOrSession) {
-  return ollamaApiModelKeys.includes(configOrSession.modelName)
-}
-
-export function isUsingChatGLMApi(configOrSession) {
-  return chatglmApiModelKeys.includes(configOrSession.modelName)
-}
-
-export function isUsingMoonshotApi(configOrSession) {
-  return moonshotApiModelKeys.includes(configOrSession.modelName)
+  return isInApiModeGroup(customApiModelKeys, configOrSession)
 }
 
+/**
+ * @deprecated
+ */
 export function isUsingCustomNameOnlyModel(configOrSession) {
   return configOrSession.modelName === 'poeAiWebCustom'
 }
 
-export function isUsingAzureOpenAi(configOrSession) {
-  return azureOpenAiApiModelKeys.includes(configOrSession.modelName)
-}
-
-export function isUsingClaudeApi(configOrSession) {
-  return claudeApiModelKeys.includes(configOrSession.modelName)
-}
-
-export function isUsingMoonshotWeb(configOrSession) {
-  return moonshotWebModelKeys.includes(configOrSession.modelName)
-}
-
-export function isUsingGithubThirdPartyApi(configOrSession) {
-  return githubThirdPartyApiModelKeys.includes(configOrSession.modelName)
-}
-
 export async function getPreferredLanguageKey() {
   const config = await getUserConfig()
   if (config.preferredLanguage === 'auto') return config.userLanguage
diff --git a/src/popup/sections/ApiModes.jsx b/src/popup/sections/ApiModes.jsx
index 7178d82..9020aa1 100644
--- a/src/popup/sections/ApiModes.jsx
+++ b/src/popup/sections/ApiModes.jsx
@@ -50,7 +50,7 @@ export function ApiModes({ config, updateConfig }) {
   ])
 
   const updateWhenApiModeDisabled = (apiMode) => {
-    if (isApiModeSelected(apiMode, config) || config.modelName === apiModeToModelName(apiMode))
+    if (isApiModeSelected(apiMode, config))
       updateConfig({
         modelName:
           apiModeStringArray.includes(config.modelName) &&
@@ -82,11 +82,7 @@ export function ApiModes({ config, updateConfig }) {
               })
             } else {
               const apiMode = apiModes[editingIndex]
-              if (
-                isApiModeSelected(apiMode, config) ||
-                config.modelName === apiModeToModelName(apiMode) // there is a minor bug here, but it's not a big issue
-              )
-                updateConfig({ apiMode: editingApiMode })
+              if (isApiModeSelected(apiMode, config)) updateConfig({ apiMode: editingApiMode })
               const customApiModes = [...apiModes]
               customApiModes[editingIndex] = editingApiMode
               updateConfig({ activeApiModes: [], customApiModes })
diff --git a/src/popup/sections/GeneralPart.jsx b/src/popup/sections/GeneralPart.jsx
index cfd8ef8..3859970 100644
--- a/src/popup/sections/GeneralPart.jsx
+++ b/src/popup/sections/GeneralPart.jsx
@@ -9,19 +9,19 @@ import {
   apiModeToModelName,
 } from '../../utils/index.mjs'
 import {
-  isUsingOpenAiApiKey,
-  isUsingAzureOpenAi,
-  isUsingChatGLMApi,
-  isUsingClaudeApi,
+  isUsingOpenAiApiModel,
+  isUsingAzureOpenAiApiModel,
+  isUsingChatGLMApiModel,
+  isUsingClaudeApiModel,
   isUsingCustomModel,
   isUsingCustomNameOnlyModel,
-  isUsingOllamaModel,
-  isUsingGithubThirdPartyApi,
+  isUsingOllamaApiModel,
+  isUsingGithubThirdPartyApiModel,
   isUsingMultiModeModel,
   ModelMode,
   ThemeMode,
   TriggerMode,
-  isUsingMoonshotApi,
+  isUsingMoonshotApiModel,
   Models,
 } from '../../config/index.mjs'
 import Browser from 'webextension-polyfill'
@@ -172,20 +172,20 @@ export function GeneralPart({ config, updateConfig, setTabIndex }) {
         <span style="display: flex; gap: 15px;">
           <select
             style={
-              isUsingOpenAiApiKey(config) ||
+              isUsingOpenAiApiModel(config) ||
               isUsingMultiModeModel(config) ||
               isUsingCustomModel(config) ||
-              isUsingOllamaModel(config) ||
-              isUsingAzureOpenAi(config) ||
-              isUsingClaudeApi(config) ||
+              isUsingOllamaApiModel(config) ||
+              isUsingAzureOpenAiApiModel(config) ||
+              isUsingClaudeApiModel(config) ||
               isUsingCustomNameOnlyModel(config) ||
-              isUsingMoonshotApi(config)
+              isUsingMoonshotApiModel(config)
                 ? 'width: 50%;'
                 : undefined
             }
             required
             onChange={(e) => {
-              if (e.target.value === -1) {
+              if (e.target.value === '-1') {
                 updateConfig({ modelName: 'customModel', apiMode: null })
                 return
               }
@@ -197,11 +197,8 @@ export function GeneralPart({ config, updateConfig, setTabIndex }) {
               const modelName = apiModeToModelName(apiMode)
               const desc = modelNameToDesc(modelName, t)
               if (desc) {
-                let selected
-                if (isApiModeSelected(apiMode, config)) selected = true
-                else selected = config.modelName === modelName
                 return (
-                  <option value={index} key={index} selected={selected}>
+                  <option value={index} key={index} selected={isApiModeSelected(apiMode, config)}>
                     {desc}
                   </option>
                 )
@@ -229,7 +226,7 @@ export function GeneralPart({ config, updateConfig, setTabIndex }) {
               })}
             </select>
           )}
-          {isUsingOpenAiApiKey(config) && (
+          {isUsingOpenAiApiModel(config) && (
             <span style="width: 50%; display: flex; gap: 5px;">
               <input
                 type="password"
@@ -285,7 +282,7 @@ export function GeneralPart({ config, updateConfig, setTabIndex }) {
               }}
             />
           )}
-          {isUsingOllamaModel(config) && (
+          {isUsingOllamaApiModel(config) && (
             <input
               style="width: 50%;"
               type="text"
@@ -297,7 +294,7 @@ export function GeneralPart({ config, updateConfig, setTabIndex }) {
               }}
             />
           )}
-          {isUsingAzureOpenAi(config) && (
+          {isUsingAzureOpenAiApiModel(config) && (
             <input
               type="password"
               style="width: 50%;"
@@ -309,7 +306,7 @@ export function GeneralPart({ config, updateConfig, setTabIndex }) {
               }}
             />
           )}
-          {isUsingClaudeApi(config) && (
+          {isUsingClaudeApiModel(config) && (
             <input
               type="password"
               style="width: 50%;"
@@ -321,7 +318,7 @@ export function GeneralPart({ config, updateConfig, setTabIndex }) {
               }}
             />
           )}
-          {isUsingChatGLMApi(config) && (
+          {isUsingChatGLMApiModel(config) && (
             <input
               type="password"
               style="width: 50%;"
@@ -333,7 +330,7 @@ export function GeneralPart({ config, updateConfig, setTabIndex }) {
               }}
             />
           )}
-          {isUsingMoonshotApi(config) && (
+          {isUsingMoonshotApiModel(config) && (
             <span style="width: 50%; display: flex; gap: 5px;">
               <input
                 type="password"
@@ -380,7 +377,7 @@ export function GeneralPart({ config, updateConfig, setTabIndex }) {
             }}
           />
         )}
-        {isUsingOllamaModel(config) && (
+        {isUsingOllamaApiModel(config) && (
           <div style={{ display: 'flex', gap: '10px' }}>
             {t('Keep-Alive Time') + ':'}
             <label>
@@ -421,7 +418,7 @@ export function GeneralPart({ config, updateConfig, setTabIndex }) {
             </label>
           </div>
         )}
-        {isUsingOllamaModel(config) && (
+        {isUsingOllamaApiModel(config) && (
           <input
             type="text"
             value={config.ollamaEndpoint}
@@ -432,7 +429,7 @@ export function GeneralPart({ config, updateConfig, setTabIndex }) {
             }}
           />
         )}
-        {isUsingOllamaModel(config) && (
+        {isUsingOllamaApiModel(config) && (
           <input
             type="password"
             value={config.ollamaApiKey}
@@ -443,7 +440,7 @@ export function GeneralPart({ config, updateConfig, setTabIndex }) {
             }}
           />
         )}
-        {isUsingAzureOpenAi(config) && (
+        {isUsingAzureOpenAiApiModel(config) && (
           <input
             type="password"
             value={config.azureEndpoint}
@@ -454,7 +451,7 @@ export function GeneralPart({ config, updateConfig, setTabIndex }) {
             }}
           />
         )}
-        {isUsingAzureOpenAi(config) && (
+        {isUsingAzureOpenAiApiModel(config) && (
           <input
             type="text"
             value={config.azureDeploymentName}
@@ -465,7 +462,7 @@ export function GeneralPart({ config, updateConfig, setTabIndex }) {
             }}
           />
         )}
-        {isUsingGithubThirdPartyApi(config) && (
+        {isUsingGithubThirdPartyApiModel(config) && (
           <input
             type="text"
             value={config.githubThirdPartyUrl}
diff --git a/src/services/init-session.mjs b/src/services/init-session.mjs
index 33f5a14..e96f1cd 100644
--- a/src/services/init-session.mjs
+++ b/src/services/init-session.mjs
@@ -1,5 +1,5 @@
 import { v4 as uuidv4 } from 'uuid'
-import { modelNameToDesc } from '../utils/model-name-convert.mjs'
+import { apiModeToModelName, modelNameToDesc } from '../utils/model-name-convert.mjs'
 import { t } from 'i18next'
 
 /**
@@ -57,7 +57,10 @@ export function initSession({
     createdAt: new Date().toISOString(),
     updatedAt: new Date().toISOString(),
 
-    aiName: modelName ? modelNameToDesc(modelName, t) : null,
+    aiName:
+      modelName || apiMode
+        ? modelNameToDesc(apiMode ? apiModeToModelName(apiMode) : modelName, t)
+        : null,
     modelName,
     apiMode,
 
diff --git a/src/services/wrappers.mjs b/src/services/wrappers.mjs
index 229cf0c..28f55fb 100644
--- a/src/services/wrappers.mjs
+++ b/src/services/wrappers.mjs
@@ -7,7 +7,7 @@ import {
 } from '../config/index.mjs'
 import Browser from 'webextension-polyfill'
 import { t } from 'i18next'
-import { modelNameToDesc } from '../utils/model-name-convert.mjs'
+import { apiModeToModelName, modelNameToDesc } from '../utils/model-name-convert.mjs'
 
 export async function getChatGptAccessToken() {
   await clearOldAccessToken()
@@ -103,7 +103,12 @@ export function registerPortListener(executor) {
       if (!session) return
       const config = await getUserConfig()
       if (!session.modelName) session.modelName = config.modelName
-      if (!session.aiName) session.aiName = modelNameToDesc(session.modelName, t)
+      if (!session.apiMode) session.apiMode = config.apiMode
+      if (!session.aiName)
+        session.aiName = modelNameToDesc(
+          session.apiMode ? apiModeToModelName(session.apiMode) : session.modelName,
+          t,
+        )
       port.postMessage({ session })
       try {
         await executor(session, port, config)
diff --git a/src/utils/crop-text.mjs b/src/utils/crop-text.mjs
index 057cb28..75da9ad 100644
--- a/src/utils/crop-text.mjs
+++ b/src/utils/crop-text.mjs
@@ -22,7 +22,7 @@
 
 import { encode } from '@nem035/gpt-3-encoder'
 import { getUserConfig } from '../config/index.mjs'
-import { modelNameToDesc } from './model-name-convert.mjs'
+import { apiModeToModelName, modelNameToDesc } from './model-name-convert.mjs'
 
 const clamp = (v, min, max) => {
   return Math.min(Math.max(v, min), max)
@@ -36,7 +36,9 @@ export async function cropText(
   tiktoken = true,
 ) {
   const userConfig = await getUserConfig()
-  const k = modelNameToDesc(userConfig.modelName).match(/[- (]*([0-9]+)k/)?.[1]
+  const k = modelNameToDesc(
+    userConfig.apiMode ? apiModeToModelName(userConfig.apiMode) : userConfig.modelName,
+  ).match(/[- (]*([0-9]+)k/)?.[1]
   if (k) {
     maxLength = Number(k) * 1000
     maxLength -= 100 + clamp(userConfig.maxResponseTokenLength, 1, maxLength - 1000)
diff --git a/src/utils/model-name-convert.mjs b/src/utils/model-name-convert.mjs
index 50d0aff..a5e2f60 100644
--- a/src/utils/model-name-convert.mjs
+++ b/src/utils/model-name-convert.mjs
@@ -47,9 +47,7 @@ export function isCustomModelName(modelName) {
 
 export function modelNameToApiMode(modelName) {
   const presetPart = modelNameToPresetPart(modelName)
-  const found =
-    Object.entries(ModelGroups).find(([k]) => presetPart === k) ||
-    Object.entries(ModelGroups).find(([, g]) => g.value.includes(presetPart))
+  const found = getModelNameGroup(presetPart)
   if (found) {
     const [groupName] = found
     const isCustom = isCustomModelName(modelName)
@@ -107,7 +105,29 @@ export function getApiModesStringArrayFromConfig(config, onlyActive) {
 }
 
 export function isApiModeSelected(apiMode, configOrSession) {
+  return configOrSession.apiMode
+    ? JSON.stringify(configOrSession.apiMode) === JSON.stringify(apiMode)
+    : configOrSession.modelName === apiModeToModelName(apiMode)
+}
+
+export function getModelNameGroup(modelName) {
+  const presetPart = modelNameToPresetPart(modelName)
   return (
-    configOrSession.apiMode && JSON.stringify(configOrSession.apiMode) === JSON.stringify(apiMode)
+    Object.entries(ModelGroups).find(([k]) => presetPart === k) ||
+    Object.entries(ModelGroups).find(([, g]) => g.value.includes(presetPart))
   )
 }
+
+export function getApiModeGroup(apiMode) {
+  return getModelNameGroup(apiModeToModelName(apiMode))
+}
+
+export function isInApiModeGroup(apiModeGroup, configOrSession) {
+  let foundGroup
+  if (configOrSession.apiMode) foundGroup = getApiModeGroup(configOrSession.apiMode)
+  else foundGroup = getModelNameGroup(configOrSession.modelName)
+
+  if (!foundGroup) return false
+  const [, groupValue] = foundGroup
+  return groupValue === apiModeGroup
+}