feat(gpt-runner-web): optimize secrets settings

packages/gpt-runner-web/client/src/pages/chat/components/settings/components/model-settings/anthropic-settings/secrets-settings.tsx

@@ -1,5 +1,5 @@
-import { DEFAULT_ANTHROPIC_API_BASE_PATH } from '@nicepkg/gpt-runner-shared/common'
-import type { AnthropicSecrets, SingleFileConfig } from '@nicepkg/gpt-runner-shared/common'
+import { ChatModelType, DEFAULT_ANTHROPIC_API_BASE_PATH } from '@nicepkg/gpt-runner-shared/common'
+import type { AnthropicSecrets } from '@nicepkg/gpt-runner-shared/common'
 import { type FC, memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { HookFormInput } from '../../../../../../../components/hook-form/hook-form-input'
@@ -9,12 +9,9 @@ interface FormData extends Pick<AnthropicSecrets, 'apiKey' | 'basePath'> {
 }
 
 export interface AnthropicSecretsSettingsProps {
-  singleFileConfig: SingleFileConfig
 }
 
 export const AnthropicSecretsSettings: FC<AnthropicSecretsSettingsProps> = memo((props) => {
-  const { singleFileConfig } = props
-
   const { t } = useTranslation()
 
   const formConfig: BaseSecretsSettingsFormItemConfig<FormData>[] = [
@@ -49,7 +46,7 @@ export const AnthropicSecretsSettings: FC<AnthropicSecretsSettingsProps> = memo(
     },
   ]
 
-  return <BaseSecretsSettings singleFileConfig={singleFileConfig} formConfig={formConfig} />
+  return <BaseSecretsSettings modelType={ChatModelType.Anthropic} formConfig={formConfig} />
 })
 
 AnthropicSecretsSettings.displayName = 'AnthropicSecretsSettings'

packages/gpt-runner-web/client/src/pages/chat/components/settings/components/model-settings/base-secrets-settings.tsx

@@ -1,5 +1,4 @@
 import { ChatModelType, ServerStorageName, getModelConfigTypeSchema } from '@nicepkg/gpt-runner-shared/common'
-import type { SingleFileConfig } from '@nicepkg/gpt-runner-shared/common'
 import { memo, useEffect } from 'react'
 import type { ReactNode } from 'react'
 import { useForm } from 'react-hook-form'
@@ -24,16 +23,16 @@ export interface BaseSecretsSettingsFormItemConfig<FormData extends Record<strin
 }
 
 export interface BaseSecretsSettingsProps<FormData extends Record<string, any>> {
-  singleFileConfig?: SingleFileConfig
+  modelType?: ChatModelType
   formConfig: BaseSecretsSettingsFormItemConfig<FormData>[]
 }
 
 function BaseSecretsSettings_<FormData extends Record<string, any>>(props: BaseSecretsSettingsProps<FormData>) {
-  const { singleFileConfig, formConfig } = props
+  const { modelType, formConfig } = props
 
   const { t } = useTranslation()
   const { setLoading } = useLoading()
-  const currentModelType = singleFileConfig?.model?.type || ChatModelType.Openai
+  const currentModelType = modelType || ChatModelType.Openai
 
   const { data: querySecretsRes } = useQuery({
     queryKey: ['secrets', currentModelType],

packages/gpt-runner-web/client/src/pages/chat/components/settings/components/model-settings/index.tsx

@@ -15,11 +15,12 @@ export interface ModelSettingsProps {
   singleFilePath?: string
   singleFileConfig?: SingleFileConfig
   userConfig?: UserConfig
+  modelType?: ChatModelType
   viewType: ModelSettingsViewType
 }
 
 export const ModelSettings: FC<ModelSettingsProps> = memo((props) => {
-  const { rootPath, singleFilePath, singleFileConfig: singleFileConfigFromParams, userConfig: userConfigFromParams, viewType } = props
+  const { rootPath, singleFilePath, singleFileConfig: singleFileConfigFromParams, userConfig: userConfigFromParams, viewType, modelType } = props
 
   const { singleFileConfig: singleFileConfigFromRemote, userConfig: userConfigFromRemote } = useUserConfig({
     rootPath,
@@ -40,11 +41,11 @@ export const ModelSettings: FC<ModelSettingsProps> = memo((props) => {
     })
   }, [singleFileConfig, userConfig])
 
-  const finalModelType = resolvedSingleFileConfig?.model?.type || ChatModelType.Openai
+  const finalModelType = modelType || resolvedSingleFileConfig?.model?.type || ChatModelType.Openai
 
   const modelTypeViewMap: Record<ChatModelType, Record<ModelSettingsViewType, () => ReactNode>> = {
     [ChatModelType.Anthropic]: {
-      secrets: () => <AnthropicSecretsSettings singleFileConfig={resolvedSingleFileConfig} />,
+      secrets: () => <AnthropicSecretsSettings />,
       model: () => <AnthropicModelSettings singleFileConfig={resolvedSingleFileConfig} />,
       title: () => <>Anthropic</>,
     },
@@ -54,7 +55,7 @@ export const ModelSettings: FC<ModelSettingsProps> = memo((props) => {
       title: () => <>Hugging Face</>,
     },
     [ChatModelType.Openai]: {
-      secrets: () => <OpenaiSecretsSettings singleFileConfig={resolvedSingleFileConfig} />,
+      secrets: () => <OpenaiSecretsSettings />,
       model: () => <OpenaiModelSettings singleFileConfig={resolvedSingleFileConfig} />,
       title: () => <>OpenAI</>,
     },

packages/gpt-runner-web/client/src/pages/chat/components/settings/components/model-settings/openai-settings/secrets-settings.tsx

@@ -1,5 +1,5 @@
-import { DEFAULT_OPENAI_API_BASE_PATH } from '@nicepkg/gpt-runner-shared/common'
-import type { OpenaiSecrets, SingleFileConfig } from '@nicepkg/gpt-runner-shared/common'
+import { ChatModelType, DEFAULT_OPENAI_API_BASE_PATH } from '@nicepkg/gpt-runner-shared/common'
+import type { OpenaiSecrets } from '@nicepkg/gpt-runner-shared/common'
 import { type FC, memo } from 'react'
 import { VSCodeLink } from '@vscode/webview-ui-toolkit/react'
 import { useTranslation } from 'react-i18next'
@@ -11,12 +11,9 @@ interface FormData extends Pick<OpenaiSecrets, 'apiKey' | 'accessToken' | 'baseP
 }
 
 export interface OpenaiSecretsSettingsProps {
-  singleFileConfig: SingleFileConfig
 }
 
 export const OpenaiSecretsSettings: FC<OpenaiSecretsSettingsProps> = memo((props) => {
-  const { singleFileConfig } = props
-
   const { t } = useTranslation()
 
   const formConfig: BaseSecretsSettingsFormItemConfig<FormData>[] = [
@@ -67,7 +64,7 @@ export const OpenaiSecretsSettings: FC<OpenaiSecretsSettingsProps> = memo((props
     },
   ]
 
-  return <BaseSecretsSettings singleFileConfig={singleFileConfig} formConfig={formConfig} />
+  return <BaseSecretsSettings modelType={ChatModelType.Openai} formConfig={formConfig} />
 })
 
 OpenaiSecretsSettings.displayName = 'OpenaiSecretsSettings'

packages/gpt-runner-web/client/src/pages/chat/components/settings/index.tsx

@@ -1,6 +1,7 @@
-import { type CSSProperties, type FC, memo, useEffect, useMemo, useState } from 'react'
+import { type CSSProperties, type FC, Fragment, memo, useEffect, useMemo, useState } from 'react'
 import { VSCodePanelTab, VSCodePanelView } from '@vscode/webview-ui-toolkit/react'
 import { useTranslation } from 'react-i18next'
+import { ChatModelType } from '@nicepkg/gpt-runner-shared/common'
 import { StyledVSCodePanels } from '../../chat.styles'
 import { FormTitle } from '../../../../components/form-title'
 import { useGlobalStore } from '../../../../store/zustand/global'
@@ -60,6 +61,21 @@ export const Settings: FC<SettingsProps> = memo((props) => {
   }
 
   const renderOverrideSetting = () => {
+    const showModelTypeSecretsSettings: ChatModelType[] = [
+      ChatModelType.Openai,
+      ChatModelType.Anthropic,
+    ].sort((a, b) => {
+      const currentModelType = singleFileConfig?.model?.type || ChatModelType.Openai
+
+      if (a === currentModelType)
+        return -1
+
+      if (b === currentModelType)
+        return 1
+
+      return 0
+    })
+
     return <ConfigInfoWrapper>
       <FormTitle size="large">
         {t('chat_page.settings_general')}
@@ -69,11 +85,27 @@ export const Settings: FC<SettingsProps> = memo((props) => {
         {t('chat_page.settings_proxy')}
       </FormTitle>
       <ProxySettings></ProxySettings>
-      <FormTitle size="large">
-        <ModelSettings userConfig={userConfig} singleFileConfig={singleFileConfig} viewType='title'></ModelSettings>
-        {` ${t('chat_page.settings_config')}`}
-      </FormTitle>
-      <ModelSettings userConfig={userConfig} singleFileConfig={singleFileConfig} viewType='secrets'></ModelSettings>
+
+      {/* model settings */}
+      {showModelTypeSecretsSettings.map((modelType) => {
+        return <Fragment key={modelType}>
+          <FormTitle size="large">
+            <ModelSettings
+              modelType={modelType}
+              userConfig={userConfig}
+              singleFileConfig={singleFileConfig}
+              viewType='title'
+            ></ModelSettings>
+            {` ${t('chat_page.settings_config')}`}
+          </FormTitle>
+          <ModelSettings
+            userConfig={userConfig}
+            singleFileConfig={singleFileConfig}
+            viewType='secrets'
+            modelType={modelType}
+          ></ModelSettings>
+        </Fragment>
+      })}
     </ConfigInfoWrapper>
   }