Add custom provider workflow to API modes

Extend API Modes editing so custom model entries can bind to a
providerId and create a new OpenAI-compatible provider in the same flow
with only provider name and base URL.

Unify API key editing in General settings by resolving the currently
selected OpenAI-compatible provider and writing secrets into the new
providerSecrets map, while still syncing legacy key fields for backward
compatibility.

Preserve legacy custom URL behavior for legacy provider mode and clear
apiMode.customUrl when users switch to a registered provider so provider
registry URLs are applied correctly.

Author: PeterDaveHello

src/popup/sections/ApiModes.jsx

@@ -7,44 +7,109 @@ import {
   modelNameToDesc,
 } from '../../utils/index.mjs'
 import { PencilIcon, TrashIcon } from '@primer/octicons-react'
-import { useLayoutEffect, useState } from 'react'
+import { useLayoutEffect, useRef, useState } from 'react'
+import { AlwaysCustomGroups, ModelGroups } from '../../config/index.mjs'
 import {
-  AlwaysCustomGroups,
-  CustomApiKeyGroups,
-  CustomUrlGroups,
-  ModelGroups,
-} from '../../config/index.mjs'
+  getCustomOpenAIProviders,
+  OPENAI_COMPATIBLE_GROUP_TO_PROVIDER_ID,
+} from '../../services/apis/provider-registry.mjs'
 
 ApiModes.propTypes = {
   config: PropTypes.object.isRequired,
   updateConfig: PropTypes.func.isRequired,
 }
 
+const LEGACY_CUSTOM_PROVIDER_ID = 'legacy-custom-default'
+
 const defaultApiMode = {
   groupName: 'chatgptWebModelKeys',
   itemName: 'chatgptFree35',
   isCustom: false,
   customName: '',
   customUrl: 'http://localhost:8000/v1/chat/completions',
   apiKey: '',
+  providerId: '',
   active: true,
 }
 
+const defaultProviderDraft = {
+  name: '',
+  baseUrl: '',
+  chatCompletionsPath: '/v1/chat/completions',
+  completionsPath: '/v1/completions',
+}
+
+const defaultProviderDraftValidation = {
+  name: false,
+  baseUrl: false,
+}
+
+function normalizeProviderId(value) {
+  return String(value || '')
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+}
+
+function createProviderId(providerName, existingProviders) {
+  const usedIds = new Set([
+    ...Object.values(OPENAI_COMPATIBLE_GROUP_TO_PROVIDER_ID),
+    ...existingProviders.map((provider) => provider.id),
+  ])
+  const baseId =
+    normalizeProviderId(providerName) || `custom-provider-${existingProviders.length + 1}`
+  let nextId = baseId
+  let suffix = 2
+  while (usedIds.has(nextId)) {
+    nextId = `${baseId}-${suffix}`
+    suffix += 1
+  }
+  return nextId
+}
+
+function normalizeBaseUrl(value) {
+  return String(value || '')
+    .trim()
+    .replace(/\/+$/, '')
+}
+
+function sanitizeApiModeForSave(apiMode) {
+  const nextApiMode = { ...apiMode }
+  if (nextApiMode.groupName !== 'customApiModelKeys') {
+    nextApiMode.providerId = ''
+    nextApiMode.apiKey = ''
+    return nextApiMode
+  }
+  if (!nextApiMode.providerId) nextApiMode.providerId = LEGACY_CUSTOM_PROVIDER_ID
+  return nextApiMode
+}
+
 export function ApiModes({ config, updateConfig }) {
   const { t } = useTranslation()
   const [editing, setEditing] = useState(false)
   const [editingApiMode, setEditingApiMode] = useState(defaultApiMode)
   const [editingIndex, setEditingIndex] = useState(-1)
   const [apiModes, setApiModes] = useState([])
   const [apiModeStringArray, setApiModeStringArray] = useState([])
+  const [customProviders, setCustomProviders] = useState([])
+  const [providerSelector, setProviderSelector] = useState(LEGACY_CUSTOM_PROVIDER_ID)
+  const [providerDraft, setProviderDraft] = useState(defaultProviderDraft)
+  const [providerDraftValidation, setProviderDraftValidation] = useState(
+    defaultProviderDraftValidation,
+  )
+  const providerNameInputRef = useRef(null)
+  const providerBaseUrlInputRef = useRef(null)
 
   useLayoutEffect(() => {
-    const apiModes = getApiModesFromConfig(config)
-    setApiModes(apiModes)
-    setApiModeStringArray(apiModes.map(apiModeToModelName))
+    const nextApiModes = getApiModesFromConfig(config)
+    setApiModes(nextApiModes)
+    setApiModeStringArray(nextApiModes.map(apiModeToModelName))
+    setCustomProviders(getCustomOpenAIProviders(config))
   }, [
     config.activeApiModes,
     config.customApiModes,
+    config.customOpenAIProviders,
     config.azureDeploymentName,
     config.ollamaModelName,
   ])
@@ -61,6 +126,97 @@ export function ApiModes({ config, updateConfig }) {
       })
   }
 
+  const shouldEditProvider = editingApiMode.groupName === 'customApiModelKeys'
+
+  const persistApiMode = (nextApiMode, nextCustomProviders) => {
+    const payload = {
+      activeApiModes: [],
+      customApiModes:
+        editingIndex === -1
+          ? [...apiModes, nextApiMode]
+          : apiModes.map((apiMode, index) => (index === editingIndex ? nextApiMode : apiMode)),
+    }
+    if (nextCustomProviders !== null) payload.customOpenAIProviders = nextCustomProviders
+    if (editingIndex !== -1 && isApiModeSelected(apiModes[editingIndex], config)) {
+      payload.apiMode = nextApiMode
+    }
+    updateConfig(payload)
+  }
+
+  const onSaveEditing = (event) => {
+    event.preventDefault()
+    let nextApiMode = { ...editingApiMode }
+    let nextCustomProviders = null
+    const previousProviderId =
+      editingIndex === -1 ? '' : apiModes[editingIndex]?.providerId || LEGACY_CUSTOM_PROVIDER_ID
+
+    if (shouldEditProvider) {
+      if (providerSelector === '__new__') {
+        const providerName = providerDraft.name.trim()
+        const providerBaseUrl = normalizeBaseUrl(providerDraft.baseUrl)
+        const nextProviderDraftValidation = {
+          name: !providerName,
+          baseUrl: !providerBaseUrl,
+        }
+        if (nextProviderDraftValidation.name || nextProviderDraftValidation.baseUrl) {
+          setProviderDraftValidation(nextProviderDraftValidation)
+          if (nextProviderDraftValidation.name) {
+            providerNameInputRef.current?.focus()
+          } else {
+            providerBaseUrlInputRef.current?.focus()
+          }
+          return
+        }
+        setProviderDraftValidation(defaultProviderDraftValidation)
+        const hasChatCompletionsEndpoint = /\/chat\/completions$/i.test(providerBaseUrl)
+        const hasV1BasePath = /\/v1$/i.test(providerBaseUrl)
+        const providerChatCompletionsUrl = hasChatCompletionsEndpoint ? providerBaseUrl : ''
+        const providerCompletionsUrl = hasChatCompletionsEndpoint
+          ? providerBaseUrl.replace(/\/chat\/completions$/i, '/completions')
+          : ''
+        const providerChatCompletionsPath = hasV1BasePath
+          ? '/chat/completions'
+          : providerDraft.chatCompletionsPath
+        const providerCompletionsPath = hasV1BasePath
+          ? '/completions'
+          : providerDraft.completionsPath
+
+        const providerId = createProviderId(providerName, customProviders)
+        const createdProvider = {
+          id: providerId,
+          name: providerName,
+          baseUrl: hasChatCompletionsEndpoint ? '' : providerBaseUrl,
+          chatCompletionsPath: providerChatCompletionsPath,
+          completionsPath: providerCompletionsPath,
+          chatCompletionsUrl: providerChatCompletionsUrl,
+          completionsUrl: providerCompletionsUrl,
+          enabled: true,
+          allowLegacyResponseField: true,
+        }
+        nextCustomProviders = [...customProviders, createdProvider]
+        const shouldClearApiKey = editingIndex !== -1 && providerId !== previousProviderId
+        nextApiMode = {
+          ...nextApiMode,
+          providerId,
+          customUrl: '',
+          apiKey: shouldClearApiKey ? '' : nextApiMode.apiKey,
+        }
+      } else {
+        const selectedProviderId = providerSelector || LEGACY_CUSTOM_PROVIDER_ID
+        const shouldClearApiKey = editingIndex !== -1 && selectedProviderId !== previousProviderId
+        nextApiMode = {
+          ...nextApiMode,
+          providerId: selectedProviderId,
+          customUrl: '',
+          apiKey: shouldClearApiKey ? '' : nextApiMode.apiKey,
+        }
+      }
+    }
+
+    persistApiMode(sanitizeApiModeForSave(nextApiMode), nextCustomProviders)
+    setEditing(false)
+  }
+
   const editingComponent = (
     <div style={{ display: 'flex', flexDirection: 'column', '--spacing': '4px' }}>
       <div style={{ display: 'flex', gap: '12px' }}>
@@ -72,26 +228,7 @@ export function ApiModes({ config, updateConfig }) {
         >
           {t('Cancel')}
         </button>
-        <button
-          onClick={(e) => {
-            e.preventDefault()
-            if (editingIndex === -1) {
-              updateConfig({
-                activeApiModes: [],
-                customApiModes: [...apiModes, editingApiMode],
-              })
-            } else {
-              const apiMode = apiModes[editingIndex]
-              if (isApiModeSelected(apiMode, config)) updateConfig({ apiMode: editingApiMode })
-              const customApiModes = [...apiModes]
-              customApiModes[editingIndex] = editingApiMode
-              updateConfig({ activeApiModes: [], customApiModes })
-            }
-            setEditing(false)
-          }}
-        >
-          {t('Save')}
-        </button>
+        <button onClick={onSaveEditing}>{t('Save')}</button>
       </div>
       <div style={{ display: 'flex', gap: '4px', alignItems: 'center', whiteSpace: 'noWrap' }}>
         {t('Type')}
@@ -103,7 +240,16 @@ export function ApiModes({ config, updateConfig }) {
             const isCustom =
               editingApiMode.itemName === 'custom' && !AlwaysCustomGroups.includes(groupName)
             if (isCustom) itemName = 'custom'
-            setEditingApiMode({ ...editingApiMode, groupName, itemName, isCustom })
+            const providerId =
+              groupName === 'customApiModelKeys'
+                ? editingApiMode.providerId || LEGACY_CUSTOM_PROVIDER_ID
+                : ''
+            setEditingApiMode({ ...editingApiMode, groupName, itemName, isCustom, providerId })
+            if (groupName === 'customApiModelKeys') {
+              setProviderSelector(providerId)
+            } else {
+              setProviderSelector(LEGACY_CUSTOM_PROVIDER_ID)
+            }
           }}
         >
           {Object.entries(ModelGroups).map(([groupName, { desc }]) => (
@@ -141,24 +287,68 @@ export function ApiModes({ config, updateConfig }) {
           />
         )}
       </div>
-      {CustomUrlGroups.includes(editingApiMode.groupName) &&
-        (editingApiMode.isCustom || AlwaysCustomGroups.includes(editingApiMode.groupName)) && (
+      {shouldEditProvider && (
+        <div style={{ display: 'flex', gap: '4px', alignItems: 'center', whiteSpace: 'noWrap' }}>
+          {t('Provider')}
+          <select
+            value={providerSelector}
+            onChange={(e) => {
+              const value = e.target.value
+              setProviderSelector(value)
+              if (value !== '__new__') {
+                setEditingApiMode({ ...editingApiMode, providerId: value })
+              }
+              setProviderDraftValidation(defaultProviderDraftValidation)
+            }}
+          >
+            <option value={LEGACY_CUSTOM_PROVIDER_ID}>{t('Custom')}</option>
+            {customProviders.map((provider) => (
+              <option key={provider.id} value={provider.id}>
+                {provider.name}
+              </option>
+            ))}
+            <option value="__new__">{t('New')}</option>
+          </select>
+        </div>
+      )}
+      {shouldEditProvider && providerSelector === '__new__' && (
+        <>
           <input
             type="text"
-            value={editingApiMode.customUrl}
-            placeholder={t('API Url')}
-            onChange={(e) => setEditingApiMode({ ...editingApiMode, customUrl: e.target.value })}
+            ref={providerNameInputRef}
+            value={providerDraft.name}
+            placeholder={t('Provider')}
+            onChange={(e) => {
+              setProviderDraft({ ...providerDraft, name: e.target.value })
+              if (providerDraftValidation.name) {
+                setProviderDraftValidation({
+                  ...providerDraftValidation,
+                  name: false,
+                })
+              }
+            }}
+            aria-invalid={providerDraftValidation.name}
+            style={providerDraftValidation.name ? { borderColor: 'red' } : undefined}
           />
-        )}
-      {CustomApiKeyGroups.includes(editingApiMode.groupName) &&
-        (editingApiMode.isCustom || AlwaysCustomGroups.includes(editingApiMode.groupName)) && (
           <input
-            type="password"
-            value={editingApiMode.apiKey}
-            placeholder={t('API Key')}
-            onChange={(e) => setEditingApiMode({ ...editingApiMode, apiKey: e.target.value })}
+            type="text"
+            ref={providerBaseUrlInputRef}
+            value={providerDraft.baseUrl}
+            placeholder={t('API Url')}
+            onChange={(e) => {
+              setProviderDraft({ ...providerDraft, baseUrl: e.target.value })
+              if (providerDraftValidation.baseUrl) {
+                setProviderDraftValidation({
+                  ...providerDraftValidation,
+                  baseUrl: false,
+                })
+              }
+            }}
+            aria-invalid={providerDraftValidation.baseUrl}
+            style={providerDraftValidation.baseUrl ? { borderColor: 'red' } : undefined}
           />
-        )}
+        </>
+      )}
     </div>
   )
 
@@ -190,7 +380,18 @@ export function ApiModes({ config, updateConfig }) {
                   onClick={(e) => {
                     e.preventDefault()
                     setEditing(true)
-                    setEditingApiMode(apiMode)
+                    const isCustomApiMode = apiMode.groupName === 'customApiModelKeys'
+                    const providerId = isCustomApiMode
+                      ? apiMode.providerId || LEGACY_CUSTOM_PROVIDER_ID
+                      : ''
+                    setEditingApiMode({
+                      ...defaultApiMode,
+                      ...apiMode,
+                      providerId,
+                    })
+                    setProviderSelector(providerId || LEGACY_CUSTOM_PROVIDER_ID)
+                    setProviderDraft(defaultProviderDraft)
+                    setProviderDraftValidation(defaultProviderDraftValidation)
                     setEditingIndex(index)
                   }}
                 >
@@ -223,6 +424,9 @@ export function ApiModes({ config, updateConfig }) {
             e.preventDefault()
             setEditing(true)
             setEditingApiMode(defaultApiMode)
+            setProviderSelector(LEGACY_CUSTOM_PROVIDER_ID)
+            setProviderDraft(defaultProviderDraft)
+            setProviderDraftValidation(defaultProviderDraftValidation)
             setEditingIndex(-1)
           }}
         >