whai/cherry-studio
1
1
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat: add a toggle for provider

Browse Source
This commit is contained in:
kangfenmao 2024-07-10 15:54:11 +08:00
parent 17826fd2d1
commit 7274473c23
7 changed files with 45 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/renderer/src/components/app/Sidebar.tsx
View File

@ -12,7 +12,7 @@ const Sidebar: FC = () => {
return (
<Container>
<StyledLink to="/settings/general">
<StyledLink to="/">
<AvatarImg src={avatar || Logo} />
</StyledLink>
<MainMenus>
@ -30,7 +30,7 @@ const Sidebar: FC = () => {
</Menus>
</MainMenus>
<Menus>
<StyledLink to="/settings/general">
<StyledLink to="/settings/provider">
<Icon className={pathname.startsWith('/settings') ? 'active' : ''}>
<i className="iconfont icon-setting"></i>
</Icon>

10
src/renderer/src/hooks/useProvider.ts
View File

@ -8,7 +8,11 @@ import { Assistant, Model, Provider } from '@renderer/types'
import { useDefaultModel } from './useAssistant'
export function useProviders() {
return useAppSelector((state) => state.llm.providers)
return useAppSelector((state) => state.llm.providers.filter((p) => p.enabled))
}
export function useSystemProviders() {
return useAppSelector((state) => state.llm.providers.filter((p) => p.isSystem))
}
export function useProvider(id: string) {
@ -30,7 +34,3 @@ export function useProviderByAssistant(assistant: Assistant) {
const { provider } = useProvider(model.provider)
return provider
}
export function useSystemProviders() {
return useAppSelector((state) => state.llm.providers.filter((p) => p.isSystem))
}

11
src/renderer/src/pages/settings/ProviderSettings.tsx
View File

@ -2,9 +2,9 @@ import { useSystemProviders } from '@renderer/hooks/useProvider'
import { Provider } from '@renderer/types'
import { FC, useState } from 'react'
import styled from 'styled-components'
import { Avatar } from 'antd'
import { Avatar, Tag } from 'antd'
import { getProviderLogo } from '@renderer/services/provider'
import ProviderModels from './components/ProviderModels'
import ProviderSetting from './components/ProviderSetting'
const ProviderSettings: FC = () => {
const providers = useSystemProviders()
@ -20,10 +20,15 @@ const ProviderSettings: FC = () => {
onClick={() => setSelectedProvider(provider)}>
<Avatar src={getProviderLogo(provider.id)} size={22} />
<ProviderItemName>{provider.name}</ProviderItemName>
{provider.enabled && (
<Tag color="green" style={{ marginLeft: 'auto' }}>
ON
</Tag>
)}
</ProviderListItem>
))}
</ProviderListContainer>
<ProviderModels provider={selectedProvider} />
<ProviderSetting provider={selectedProvider} key={JSON.stringify(selectedProvider)} />
</Container>
)
}

8
src/renderer/src/pages/settings/SettingsPage.tsx
View File

@ -22,9 +22,6 @@ const SettingsPage: FC = () => {
</Navbar>
<ContentContainer>
<SettingMenus>
<MenuItemLink to="/settings/general">
<MenuItem className={isRoute('/settings/general')}>{t('settings.general')}</MenuItem>
</MenuItemLink>
<MenuItemLink to="/settings/provider">
<MenuItem className={isRoute('/settings/provider')}>{t('settings.provider')}</MenuItem>
</MenuItemLink>
@ -34,16 +31,19 @@ const SettingsPage: FC = () => {
<MenuItemLink to="/settings/assistant">
<MenuItem className={isRoute('/settings/assistant')}>{t('settings.assistant')}</MenuItem>
</MenuItemLink>
<MenuItemLink to="/settings/general">
<MenuItem className={isRoute('/settings/general')}>{t('settings.general')}</MenuItem>
</MenuItemLink>
<MenuItemLink to="/settings/about">
<MenuItem className={isRoute('/settings/about')}>{t('settings.about')}</MenuItem>
</MenuItemLink>
</SettingMenus>
<SettingContent>
<Routes>
<Route path="general" element={<GeneralSettings />} />
<Route path="provider" element={<ProviderSettings />} />
<Route path="model" element={<ModelSettings />} />
<Route path="assistant" element={<AssistantSettings />} />
<Route path="general" element={<GeneralSettings />} />
<Route path="about" element={<AboutSettings />} />
</Routes>
</SettingContent>

15
src/renderer/src/pages/settings/components/ProviderModels.tsx → src/renderer/src/pages/settings/components/ProviderSetting.tsx
View File

@ -1,7 +1,7 @@
import { Provider } from '@renderer/types'
import { FC, useEffect, useState } from 'react'
import styled from 'styled-components'
import { Avatar, Button, Card, Divider, Flex, Input } from 'antd'
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'
@ -14,7 +14,7 @@ interface Props {
provider: Provider
}
const ProviderModels: FC<Props> = ({ provider }) => {
const ProviderSetting: FC<Props> = ({ provider }) => {
const [apiKey, setApiKey] = useState(provider.apiKey)
const [apiHost, setApiHost] = useState(provider.apiHost)
const { updateProvider, models } = useProvider(provider.id)
@ -44,7 +44,14 @@ const ProviderModels: FC<Props> = ({ provider }) => {
return (
<SettingContainer>
<SettingTitle>{provider.name}</SettingTitle>
<SettingTitle>
<span>{provider.name}</span>
<Switch
defaultValue={provider.enabled}
key={provider.id}
onChange={(enabled) => updateProvider({ ...provider, enabled })}
/>
</SettingTitle>
<Divider style={{ width: '100%', margin: '10px 0' }} />
<SettingSubtitle>API Key</SettingSubtitle>
<Input
@ -92,4 +99,4 @@ const ModelListItem = styled.div`
padding: 5px 0;
`
export default ProviderModels
export default ProviderSetting

21
src/renderer/src/store/llm.ts
View File

@ -18,56 +18,63 @@ const initialState: LlmState = {
name: 'OpenAI',
apiKey: '',
apiHost: 'https://api.openai.com',
models: SYSTEM_MODELS.openai.filter((m) => m.defaultEnabled),
isSystem: true,
models: SYSTEM_MODELS.openai.filter((m) => m.defaultEnabled)
enabled: true
},
{
id: 'silicon',
name: 'Silicon',
apiKey: '',
apiHost: 'https://api.siliconflow.cn',
models: SYSTEM_MODELS.silicon.filter((m) => m.defaultEnabled),
isSystem: true,
models: SYSTEM_MODELS.silicon.filter((m) => m.defaultEnabled)
enabled: false
},
{
id: 'deepseek',
name: 'deepseek',
apiKey: '',
apiHost: 'https://api.deepseek.com',
models: SYSTEM_MODELS.deepseek.filter((m) => m.defaultEnabled),
isSystem: true,
models: SYSTEM_MODELS.deepseek.filter((m) => m.defaultEnabled)
enabled: false
},
{
id: 'yi',
name: 'Yi',
apiKey: '',
apiHost: 'https://api.lingyiwanwu.com',
models: SYSTEM_MODELS.yi.filter((m) => m.defaultEnabled),
isSystem: true,
models: SYSTEM_MODELS.yi.filter((m) => m.defaultEnabled)
enabled: false
},
{
id: 'zhipu',
name: 'ZhiPu',
apiKey: '',
apiHost: 'https://open.bigmodel.cn/api/paas/v4/',
models: SYSTEM_MODELS.groq.filter((m) => m.defaultEnabled),
isSystem: true,
models: SYSTEM_MODELS.groq.filter((m) => m.defaultEnabled)
enabled: false
},
{
id: 'groq',
name: 'Groq',
apiKey: '',
apiHost: 'https://api.groq.com/openai',
models: SYSTEM_MODELS.groq.filter((m) => m.defaultEnabled),
isSystem: true,
models: SYSTEM_MODELS.groq.filter((m) => m.defaultEnabled)
enabled: false
},
{
id: 'ollama',
name: 'Ollama',
apiKey: '',
apiHost: 'http://localhost:11434/v1/',
models: [],
isSystem: true,
models: []
enabled: false
}
]
}

1
src/renderer/src/types/index.ts
View File

@ -37,6 +37,7 @@ export type Provider = {
apiKey: string
apiHost: string
models: Model[]
enabled: boolean
isSystem?: boolean
}