diff --git a/locales/en-US/setting.json b/locales/en-US/setting.json index 2395ed1ca8ec..87df3bf8ae88 100644 --- a/locales/en-US/setting.json +++ b/locales/en-US/setting.json @@ -98,6 +98,7 @@ "title": "Use Client-Side Fetching Mode" }, "fetcher": { + "clear": "Clear The Obtained Models", "fetch": "Get Model List", "fetching": "Fetching Model List...", "latestTime": "Last Updated: {{time}}", diff --git a/locales/zh-CN/setting.json b/locales/zh-CN/setting.json index 92ac13332215..3fe9f0ff2ced 100644 --- a/locales/zh-CN/setting.json +++ b/locales/zh-CN/setting.json @@ -98,6 +98,7 @@ "title": "使用客户端请求模式" }, "fetcher": { + "clear": "清除获取的模型", "fetch": "获取模型列表", "fetching": "正在获取模型列表...", "latestTime": "上次更新时间:{{time}}", diff --git a/src/app/(main)/settings/llm/components/ProviderModelList/ModelFetcher.tsx b/src/app/(main)/settings/llm/components/ProviderModelList/ModelFetcher.tsx index 3b12b6d0df3c..16b17a9bf188 100644 --- a/src/app/(main)/settings/llm/components/ProviderModelList/ModelFetcher.tsx +++ b/src/app/(main)/settings/llm/components/ProviderModelList/ModelFetcher.tsx @@ -2,7 +2,7 @@ import { Icon, Tooltip } from '@lobehub/ui'; import { Typography } from 'antd'; import { createStyles } from 'antd-style'; import dayjs from 'dayjs'; -import { LucideLoaderCircle, LucideRefreshCcwDot } from 'lucide-react'; +import { CircleX, LucideLoaderCircle, LucideRefreshCcwDot } from 'lucide-react'; import { memo } from 'react'; import { useTranslation } from 'react-i18next'; import { Flexbox } from 'react-layout-kit'; @@ -16,6 +16,10 @@ import { import { GlobalLLMProviderKey } from '@/types/user/settings'; const useStyles = createStyles(({ css, token }) => ({ + buttons: css` + display: flex; + `, + hover: css` cursor: pointer; @@ -40,8 +44,9 @@ interface ModelFetcherProps { const ModelFetcher = memo(({ provider }) => { const { styles } = useStyles(); const { t } = useTranslation('setting'); - const [useFetchProviderModelList] = useUserStore((s) => [ + const [useFetchProviderModelList, clearObtainedModels] = useUserStore((s) => [ s.useFetchProviderModelList, + s.clearObtainedModels, s.setModelProviderConfig, ]); const enabledAutoFetch = useUserStore(modelConfigSelectors.isAutoFetchModelsEnabled(provider)); @@ -52,37 +57,55 @@ const ModelFetcher = memo(({ provider }) => { (s) => modelProviderSelectors.getModelCardsById(provider)(s).length, ); + const remoteModels = useUserStore((s) => + modelProviderSelectors.remoteProviderModelCards(provider)(s), + ); + const { mutate, isValidating } = useFetchProviderModelList(provider, enabledAutoFetch); return (
{t('llm.modelList.total', { count: totalModels })}
- - mutate()} +
+ - -
{isValidating ? t('llm.fetcher.fetching') : t('llm.fetcher.fetch')}
- -
+ mutate()} + > + +
{isValidating ? t('llm.fetcher.fetching') : t('llm.fetcher.fetch')}
+
+ + {remoteModels && remoteModels.length > 0 && ( + clearObtainedModels(provider)} + > + +
{t('llm.fetcher.clear')}
+
+ )} +
); diff --git a/src/locales/default/setting.ts b/src/locales/default/setting.ts index 54b2d26285fe..f0dd8171109f 100644 --- a/src/locales/default/setting.ts +++ b/src/locales/default/setting.ts @@ -100,6 +100,7 @@ export default { title: '使用客户端请求模式', }, fetcher: { + clear: '清除获取的模型', fetch: '获取模型列表', fetching: '正在获取模型列表...', latestTime: '上次更新时间:{{time}}', diff --git a/src/store/user/slices/modelList/action.ts b/src/store/user/slices/modelList/action.ts index 9a6a90f8d74d..de0aac0cb126 100644 --- a/src/store/user/slices/modelList/action.ts +++ b/src/store/user/slices/modelList/action.ts @@ -20,6 +20,7 @@ import { modelProviderSelectors } from './selectors/modelProvider'; * 设置操作 */ export interface ModelListAction { + clearObtainedModels: (provider: GlobalLLMProviderKey) => Promise; dispatchCustomModelCards: ( provider: GlobalLLMProviderKey, payload: CustomModelCardDispatch, @@ -61,6 +62,13 @@ export const createModelListSlice: StateCreator< [], ModelListAction > = (set, get) => ({ + clearObtainedModels: async (provider: GlobalLLMProviderKey) => { + await get().setModelProviderConfig(provider, { + remoteModelCards: [], + }); + + get().refreshDefaultModelProviderList(); + }, dispatchCustomModelCards: async (provider, payload) => { const prevState = settingsSelectors.providerConfig(provider)(get()); @@ -85,7 +93,14 @@ export const createModelListSlice: StateCreator< const serverChatModels = modelProviderSelectors.serverProviderModelCards(provider)(get()); const remoteChatModels = modelProviderSelectors.remoteProviderModelCards(provider)(get()); - return serverChatModels ?? remoteChatModels ?? defaultChatModels; + if (serverChatModels && serverChatModels.length > 0) { + return serverChatModels; + } + if (remoteChatModels && remoteChatModels.length > 0) { + return remoteChatModels; + } + + return defaultChatModels; }; const defaultModelProviderList = produce(DEFAULT_MODEL_PROVIDER_LIST, (draft) => {