From 8512a7d3ad5d3ef5ae6d06a5db33715d8a139e0b Mon Sep 17 00:00:00 2001 From: Yi Date: Tue, 7 Jan 2025 14:43:54 +0800 Subject: [PATCH] chore: update the onOpenModel function to a hook --- .../model-provider-page/hooks.ts | 43 +++++++++++++++++++ .../model-provider-page/index.tsx | 38 +++------------- .../agent-model-trigger.tsx | 37 +--------------- 3 files changed, 50 insertions(+), 68 deletions(-) diff --git a/web/app/components/header/account-setting/model-provider-page/hooks.ts b/web/app/components/header/account-setting/model-provider-page/hooks.ts index 612747e42b..231df0e9db 100644 --- a/web/app/components/header/account-setting/model-provider-page/hooks.ts +++ b/web/app/components/header/account-setting/model-provider-page/hooks.ts @@ -16,6 +16,7 @@ import type { } from './declarations' import { ConfigurationMethodEnum, + CustomConfigurationStatusEnum, ModelStatusEnum, } from './declarations' import I18n from '@/context/i18n' @@ -33,6 +34,9 @@ import { import type { Plugin } from '@/app/components/plugins/types' import { PluginType } from '@/app/components/plugins/types' import { getMarketplacePluginsByCollectionId } from '@/app/components/plugins/marketplace/utils' +import { useModalContextSelector } from '@/context/modal-context' +import { useEventEmitterContextContext } from '@/context/event-emitter' +import { UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST } from './provider-added-card' type UseDefaultModelAndModelList = ( defaultModel: DefaultModelResponse | undefined, @@ -304,3 +308,42 @@ export const useMarketplaceAllPlugins = (providers: ModelProvider[], searchText: isLoading, } } + +export const useModelModalHandler = () => { + const setShowModelModal = useModalContextSelector(state => state.setShowModelModal) + const updateModelProviders = useUpdateModelProviders() + const updateModelList = useUpdateModelList() + const { eventEmitter } = useEventEmitterContextContext() + + return ( + provider: ModelProvider, + configurationMethod: ConfigurationMethodEnum, + CustomConfigurationModelFixedFields?: CustomConfigurationModelFixedFields, + ) => { + setShowModelModal({ + payload: { + currentProvider: provider, + currentConfigurationMethod: configurationMethod, + currentCustomConfigurationModelFixedFields: CustomConfigurationModelFixedFields, + }, + onSaveCallback: () => { + updateModelProviders() + + provider.supported_model_types.forEach((type) => { + updateModelList(type) + }) + + if (configurationMethod === ConfigurationMethodEnum.customizableModel + && provider.custom_configuration.status === CustomConfigurationStatusEnum.active) { + eventEmitter?.emit({ + type: UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST, + payload: provider.provider, + } as any) + + if (CustomConfigurationModelFixedFields?.__model_type) + updateModelList(CustomConfigurationModelFixedFields.__model_type) + } + }, + }) + } +} diff --git a/web/app/components/header/account-setting/model-provider-page/index.tsx b/web/app/components/header/account-setting/model-provider-page/index.tsx index 428686efce..2e09fe93b1 100644 --- a/web/app/components/header/account-setting/model-provider-page/index.tsx +++ b/web/app/components/header/account-setting/model-provider-page/index.tsx @@ -9,19 +9,21 @@ import { RiBrainLine, } from '@remixicon/react' import SystemModelSelector from './system-model-selector' -import ProviderAddedCard, { UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST } from './provider-added-card' +import ProviderAddedCard from './provider-added-card' import type { + ConfigurationMethodEnum, CustomConfigurationModelFixedFields, + ModelProvider, } from './declarations' import { - ConfigurationMethodEnum, CustomConfigurationStatusEnum, ModelTypeEnum, } from './declarations' import { useDefaultModel, useMarketplaceAllPlugins, + useModelModalHandler, useUpdateModelList, useUpdateModelProviders, } from './hooks' @@ -87,37 +89,7 @@ const ModelProviderPage = ({ searchText }: Props) => { return [filteredConfiguredProviders, filteredNotConfiguredProviders] }, [configuredProviders, debouncedSearchText, notConfiguredProviders]) - const handleOpenModal = ( - provider: ModelProvider, - configurationMethod: ConfigurationMethodEnum, - CustomConfigurationModelFixedFields?: CustomConfigurationModelFixedFields, - ) => { - setShowModelModal({ - payload: { - currentProvider: provider, - currentConfigurationMethod: configurationMethod, - currentCustomConfigurationModelFixedFields: CustomConfigurationModelFixedFields, - }, - onSaveCallback: () => { - updateModelProviders() - - provider.supported_model_types.forEach((type) => { - updateModelList(type) - }) - - if (configurationMethod === ConfigurationMethodEnum.customizableModel && provider.custom_configuration.status === CustomConfigurationStatusEnum.active) { - eventEmitter?.emit({ - type: UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST, - payload: provider.provider, - } as any) - - if (CustomConfigurationModelFixedFields?.__model_type) - updateModelList(CustomConfigurationModelFixedFields?.__model_type) - } - }, - }) - } - + const handleOpenModal = useModelModalHandler() const [collapse, setCollapse] = useState(false) const locale = getLocaleOnClient() const { diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/agent-model-trigger.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/agent-model-trigger.tsx index fd510f0beb..1d07e76541 100644 --- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/agent-model-trigger.tsx +++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/agent-model-trigger.tsx @@ -2,21 +2,19 @@ import type { FC } from 'react' import { useEffect, useMemo, useState } from 'react' import { useTranslation } from 'react-i18next' import type { - CustomConfigurationModelFixedFields, ModelItem, ModelProvider, } from '../declarations' import { - ConfigurationMethodEnum, CustomConfigurationStatusEnum, ModelTypeEnum, } from '../declarations' -import { UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST } from '../provider-added-card' import type { PluginInfoFromMarketPlace } from '@/app/components/plugins/types' import { useInvalidateInstalledPluginList } from '@/service/use-plugins' import ConfigurationButton from './configuration-button' import { PluginType } from '@/app/components/plugins/types' import { + useModelModalHandler, useUpdateModelList, useUpdateModelProviders, } from '../hooks' @@ -74,6 +72,7 @@ const AgentModelTrigger: FC = ({ const [isPluginChecked, setIsPluginChecked] = useState(false) const [installed, setInstalled] = useState(false) const invalidateInstalledPluginList = useInvalidateInstalledPluginList() + const handleOpenModal = useModelModalHandler() useEffect(() => { (async () => { if (providerName && !modelProvider) { @@ -99,38 +98,6 @@ const AgentModelTrigger: FC = ({ if (modelId && !isPluginChecked) return null - const handleOpenModal = ( - provider: ModelProvider, - configurationMethod: ConfigurationMethodEnum, - CustomConfigurationModelFixedFields?: CustomConfigurationModelFixedFields, - ) => { - setShowModelModal({ - payload: { - currentProvider: provider, - currentConfigurationMethod: configurationMethod, - currentCustomConfigurationModelFixedFields: CustomConfigurationModelFixedFields, - }, - onSaveCallback: () => { - updateModelProviders() - - provider.supported_model_types.forEach((type) => { - updateModelList(type) - }) - - if (configurationMethod === ConfigurationMethodEnum.customizableModel - && provider.custom_configuration.status === CustomConfigurationStatusEnum.active) { - eventEmitter?.emit({ - type: UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST, - payload: provider.provider, - } as any) - - if (CustomConfigurationModelFixedFields?.__model_type) - updateModelList(CustomConfigurationModelFixedFields.__model_type) - } - }, - }) - } - return (