From 1729c1e875e98542f0ad946ae19db1a8302408bc Mon Sep 17 00:00:00 2001 From: kangfenmao Date: Fri, 12 Jul 2024 13:50:22 +0800 Subject: [PATCH] feat(settings): add website to provider settings --- .../src/pages/settings/AssistantSettings.tsx | 2 +- .../src/pages/settings/GeneralSettings.tsx | 8 +- .../src/pages/settings/ModelSettings.tsx | 2 +- .../{ModelAddPopup.tsx => AddModelPopup.tsx} | 2 +- ...ModelListPopup.tsx => EditModelsPopup.tsx} | 2 +- .../settings/components/ProviderSetting.tsx | 156 +++++++++++++++--- .../{SettingComponent.tsx => index.tsx} | 4 +- 7 files changed, 143 insertions(+), 33 deletions(-) rename src/renderer/src/pages/settings/components/{ModelAddPopup.tsx => AddModelPopup.tsx} (98%) rename src/renderer/src/pages/settings/components/{ModelListPopup.tsx => EditModelsPopup.tsx} (99%) rename src/renderer/src/pages/settings/components/{SettingComponent.tsx => index.tsx} (93%) diff --git a/src/renderer/src/pages/settings/AssistantSettings.tsx b/src/renderer/src/pages/settings/AssistantSettings.tsx index 1185604b..998322bb 100644 --- a/src/renderer/src/pages/settings/AssistantSettings.tsx +++ b/src/renderer/src/pages/settings/AssistantSettings.tsx @@ -1,5 +1,5 @@ import { FC } from 'react' -import { SettingContainer, SettingDivider, SettingSubtitle, SettingTitle } from './components/SettingComponent' +import { SettingContainer, SettingDivider, SettingSubtitle, SettingTitle } from './components' import { Input } from 'antd' import TextArea from 'antd/es/input/TextArea' import { useDefaultAssistant } from '@renderer/hooks/useAssistant' diff --git a/src/renderer/src/pages/settings/GeneralSettings.tsx b/src/renderer/src/pages/settings/GeneralSettings.tsx index 454d475c..49a35ed7 100644 --- a/src/renderer/src/pages/settings/GeneralSettings.tsx +++ b/src/renderer/src/pages/settings/GeneralSettings.tsx @@ -1,11 +1,5 @@ import { FC } from 'react' -import { - SettingContainer, - SettingDivider, - SettingRow, - SettingRowTitle, - SettingTitle -} from './components/SettingComponent' +import { SettingContainer, SettingDivider, SettingRow, SettingRowTitle, SettingTitle } from './components' import { Avatar, message, Upload } from 'antd' import styled from 'styled-components' import LocalStorage from '@renderer/services/storage' diff --git a/src/renderer/src/pages/settings/ModelSettings.tsx b/src/renderer/src/pages/settings/ModelSettings.tsx index 6474fbe3..6345620e 100644 --- a/src/renderer/src/pages/settings/ModelSettings.tsx +++ b/src/renderer/src/pages/settings/ModelSettings.tsx @@ -1,5 +1,5 @@ import { FC } from 'react' -import { SettingContainer, SettingDivider, SettingTitle } from './components/SettingComponent' +import { SettingContainer, SettingDivider, SettingTitle } from './components' import { Select } from 'antd' import { useProviders } from '@renderer/hooks/useProvider' import { useDefaultModel } from '@renderer/hooks/useAssistant' diff --git a/src/renderer/src/pages/settings/components/ModelAddPopup.tsx b/src/renderer/src/pages/settings/components/AddModelPopup.tsx similarity index 98% rename from src/renderer/src/pages/settings/components/ModelAddPopup.tsx rename to src/renderer/src/pages/settings/components/AddModelPopup.tsx index 855beabf..7cac5437 100644 --- a/src/renderer/src/pages/settings/components/ModelAddPopup.tsx +++ b/src/renderer/src/pages/settings/components/AddModelPopup.tsx @@ -102,7 +102,7 @@ const PopupContainer: React.FC = ({ title, provider, resolve }) => { ) } -export default class ModalAddPopup { +export default class AddModelPopup { static topviewId = 0 static hide() { TopView.hide(this.topviewId) diff --git a/src/renderer/src/pages/settings/components/ModelListPopup.tsx b/src/renderer/src/pages/settings/components/EditModelsPopup.tsx similarity index 99% rename from src/renderer/src/pages/settings/components/ModelListPopup.tsx rename to src/renderer/src/pages/settings/components/EditModelsPopup.tsx index ec6ca90f..932125c5 100644 --- a/src/renderer/src/pages/settings/components/ModelListPopup.tsx +++ b/src/renderer/src/pages/settings/components/EditModelsPopup.tsx @@ -214,7 +214,7 @@ const Question = styled(QuestionCircleOutlined)` color: #888; ` -export default class ModelListPopup { +export default class EditModelsPopup { static topviewId = 0 static hide() { TopView.hide(this.topviewId) diff --git a/src/renderer/src/pages/settings/components/ProviderSetting.tsx b/src/renderer/src/pages/settings/components/ProviderSetting.tsx index 10beb245..ca3920b6 100644 --- a/src/renderer/src/pages/settings/components/ProviderSetting.tsx +++ b/src/renderer/src/pages/settings/components/ProviderSetting.tsx @@ -4,16 +4,91 @@ import styled from 'styled-components' import { Avatar, Button, Card, Divider, Flex, Input, Switch } from 'antd' import { useProvider } from '@renderer/hooks/useProvider' import { groupBy } from 'lodash' -import { SettingContainer, SettingSubtitle, SettingTitle } from './SettingComponent' +import { SettingContainer, SettingSubtitle, SettingTitle } from '.' import { getModelLogo } from '@renderer/services/provider' -import { EditOutlined, PlusOutlined } from '@ant-design/icons' -import ModalAddPopup from './ModelAddPopup' -import ModelListPopup from './ModelListPopup' +import { EditOutlined, ExportOutlined, PlusOutlined } from '@ant-design/icons' +import AddModelPopup from './AddModelPopup' +import EditModelsPopup from './EditModelsPopup' +import Link from 'antd/es/typography/Link' interface Props { provider: Provider } +const PROVIDER_CONFIG = { + openai: { + websites: { + official: 'https://openai.com/', + apiKey: 'https://platform.openai.com/api-keys', + docs: 'https://platform.openai.com/docs', + models: 'https://platform.openai.com/docs/models' + } + }, + silicon: { + websites: { + official: 'https://www.siliconflow.cn/', + apiKey: 'https://cloud.siliconflow.cn/account/ak', + docs: 'https://docs.siliconflow.cn/', + models: 'https://docs.siliconflow.cn/docs/model-names' + } + }, + deepseek: { + websites: { + official: 'https://deepseek.com/', + apiKey: 'https://platform.deepseek.com/api_keys', + docs: 'https://platform.deepseek.com/api-docs/', + models: 'https://platform.deepseek.com/api-docs/' + } + }, + yi: { + websites: { + official: 'https://platform.lingyiwanwu.com/', + apiKey: 'https://platform.lingyiwanwu.com/apikeys', + docs: 'https://platform.lingyiwanwu.com/docs', + models: 'https://platform.lingyiwanwu.com/docs#%E6%A8%A1%E5%9E%8B' + } + }, + zhipu: { + websites: { + official: 'https://open.bigmodel.cn/', + apiKey: 'https://open.bigmodel.cn/usercenter/apikeys', + docs: 'https://open.bigmodel.cn/dev/howuse/introduction', + models: 'https://open.bigmodel.cn/modelcenter/square' + } + }, + moonshot: { + websites: { + official: 'https://moonshot.ai/', + apiKey: 'https://platform.moonshot.cn/console/api-keys', + docs: 'https://platform.moonshot.cn/docs/', + models: 'https://platform.moonshot.cn/docs/intro#%E6%A8%A1%E5%9E%8B%E5%88%97%E8%A1%A8' + } + }, + openrouter: { + websites: { + official: 'https://openrouter.ai/', + apiKey: 'https://openrouter.ai/settings/keys', + docs: 'https://openrouter.ai/docs/quick-start', + models: 'https://openrouter.ai/docs/models' + } + }, + groq: { + websites: { + official: 'https://groq.com/', + apiKey: 'https://console.groq.com/keys', + docs: 'https://console.groq.com/docs/quickstart', + models: 'https://console.groq.com/docs/models' + } + }, + ollama: { + websites: { + official: 'https://ollama.com/', + docs: 'https://github.com/ollama/ollama/tree/main/docs', + models: 'https://ollama.com/library' + } + } +} + const ProviderSetting: FC = ({ provider }) => { const [apiKey, setApiKey] = useState(provider.apiKey) const [apiHost, setApiHost] = useState(provider.apiHost) @@ -26,26 +101,28 @@ const ProviderSetting: FC = ({ provider }) => { setApiHost(provider.apiHost) }, [provider]) - const onUpdateApiKey = () => { - updateProvider({ ...provider, apiKey }) - } + const onUpdateApiKey = () => updateProvider({ ...provider, apiKey }) + const onUpdateApiHost = () => updateProvider({ ...provider, apiHost }) + const onManageModel = () => EditModelsPopup.show({ provider }) + const onAddModel = () => AddModelPopup.show({ title: 'Add Model', provider }) - const onUpdateApiHost = () => { - updateProvider({ ...provider, apiHost }) - } - - const onManageModel = () => { - ModelListPopup.show({ provider }) - } - - const onAddModel = () => { - ModalAddPopup.show({ title: 'Add Model', provider }) - } + const providerConfig = PROVIDER_CONFIG[provider.id] + const officialWebsite = providerConfig?.websites?.official + const apiKeyWebsite = providerConfig?.websites?.apiKey + const docsWebsite = providerConfig?.websites?.docs + const modelsWebsite = providerConfig?.websites?.models return ( - {provider.name} + + {provider.name} + {officialWebsite! && ( + + + + )} + = ({ provider }) => { /> - API Key + API Key = ({ provider }) => { onBlur={onUpdateApiKey} spellCheck={false} disabled={provider.id === 'ollama'} + autoFocus={provider.enabled && apiKey === ''} /> + {apiKeyWebsite && ( + + Get API key from: + + {provider.name} + + + )} API Host = ({ provider }) => { ))} ))} + {docsWebsite && ( + + Check + + {provider.name} Docs + + and + + Models + + for more details + + )}