From dfe69a9c13cbd1fc06183e829ca95e189aa8d3c8 Mon Sep 17 00:00:00 2001 From: JzoNg Date: Thu, 9 Jan 2025 16:39:41 +0800 Subject: [PATCH 1/3] keep panel show after tool selecting --- .../plugins/plugin-detail-panel/tool-selector/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx index d00b65f16d..1be8498788 100644 --- a/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx +++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx @@ -119,7 +119,7 @@ const ToolSelector: FC = ({ }, } onSelect(toolValue) - setIsShowChooseTool(false) + // setIsShowChooseTool(false) } const handleDescriptionChange = (e: React.ChangeEvent) => { From 3bdaf2dcaecb3c2b61dcc69202df7440cae3fc03 Mon Sep 17 00:00:00 2001 From: Yi Date: Thu, 9 Jan 2025 16:48:02 +0800 Subject: [PATCH 2/3] chore: avoid unnecessary loading for the model selector in agent node --- .../agent-model-trigger.tsx | 87 ++++++++++++------- 1 file changed, 58 insertions(+), 29 deletions(-) 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 52b73924cc..4ee772e692 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 @@ -67,42 +67,71 @@ const AgentModelTrigger: FC = ({ } }, [modelProviders, providerName]) const [pluginInfo, setPluginInfo] = useState(null) - const [isPluginChecked, setIsPluginChecked] = useState(false) + const [isPluginChecked, setIsPluginChecked] = useState(!!modelProvider) const [installed, setInstalled] = useState(false) const [inModelList, setInModelList] = useState(false) const invalidateInstalledPluginList = useInvalidateInstalledPluginList() const handleOpenModal = useModelModalHandler() + const checkPluginInfo = useMemo(async () => { + if (!providerName || !modelId) + return null + + const parts = providerName.split('/') + try { + const pluginInfo = await fetchPluginInfoFromMarketPlace({ + org: parts[0], + name: parts[1], + }) + if (pluginInfo.data.plugin.category === PluginType.model) + return pluginInfo.data.plugin + } + catch (error) { + // pass + } + return null + }, [providerName, modelId]) + + const checkModelList = useMemo(async () => { + if (!modelId || !currentProvider) + return false + + try { + const modelsData = await fetchModelProviderModelList( + `/workspaces/current/model-providers/${currentProvider?.provider}/models`, + ) + return !!modelsData.data.find(item => item.model === modelId) + } + catch (error) { + // pass + } + return false + }, [modelId, currentProvider]) + useEffect(() => { - (async () => { - if (modelId && currentProvider) { - try { - const modelsData = await fetchModelProviderModelList(`/workspaces/current/model-providers/${currentProvider?.provider}/models`) - if (modelId && modelsData.data.find(item => item.model === modelId)) - setInModelList(true) - } - catch (error) { - // pass + let isSubscribed = true + + const initializeChecks = async () => { + if (!isPluginChecked) { + const [pluginResult, modelListResult] = await Promise.all([ + checkPluginInfo, + checkModelList, + ]) + + if (isSubscribed) { + if (pluginResult) + setPluginInfo(pluginResult) + setInModelList(modelListResult) + setIsPluginChecked(true) } } - if (providerName) { - const parts = providerName.split('/') - const org = parts[0] - const name = parts[1] - try { - const pluginInfo = await fetchPluginInfoFromMarketPlace({ org, name }) - if (pluginInfo.data.plugin.category === PluginType.model) - setPluginInfo(pluginInfo.data.plugin) - } - catch (error) { - // pass - } - setIsPluginChecked(true) - } - else { - setIsPluginChecked(true) - } - })() - }, [providerName, modelId, currentProvider]) + } + + initializeChecks() + + return () => { + isSubscribed = false + } + }, [checkPluginInfo, checkModelList, isPluginChecked, modelId, currentProvider]) if (modelId && !isPluginChecked) return From 6b0325d01dbdfe8769fc1f22bcda500c04fa3537 Mon Sep 17 00:00:00 2001 From: Yi Date: Thu, 9 Jan 2025 17:15:55 +0800 Subject: [PATCH 3/3] fix: revert prev commit bc it causes corner issues --- .../agent-model-trigger.tsx | 83 ++++++------------- 1 file changed, 26 insertions(+), 57 deletions(-) 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 4ee772e692..c78b4a98c6 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 @@ -67,71 +67,40 @@ const AgentModelTrigger: FC = ({ } }, [modelProviders, providerName]) const [pluginInfo, setPluginInfo] = useState(null) - const [isPluginChecked, setIsPluginChecked] = useState(!!modelProvider) + const [isPluginChecked, setIsPluginChecked] = useState(false) const [installed, setInstalled] = useState(false) const [inModelList, setInModelList] = useState(false) const invalidateInstalledPluginList = useInvalidateInstalledPluginList() const handleOpenModal = useModelModalHandler() - const checkPluginInfo = useMemo(async () => { - if (!providerName || !modelId) - return null - - const parts = providerName.split('/') - try { - const pluginInfo = await fetchPluginInfoFromMarketPlace({ - org: parts[0], - name: parts[1], - }) - if (pluginInfo.data.plugin.category === PluginType.model) - return pluginInfo.data.plugin - } - catch (error) { - // pass - } - return null - }, [providerName, modelId]) - - const checkModelList = useMemo(async () => { - if (!modelId || !currentProvider) - return false - - try { - const modelsData = await fetchModelProviderModelList( - `/workspaces/current/model-providers/${currentProvider?.provider}/models`, - ) - return !!modelsData.data.find(item => item.model === modelId) - } - catch (error) { - // pass - } - return false - }, [modelId, currentProvider]) useEffect(() => { - let isSubscribed = true - - const initializeChecks = async () => { - if (!isPluginChecked) { - const [pluginResult, modelListResult] = await Promise.all([ - checkPluginInfo, - checkModelList, - ]) - - if (isSubscribed) { - if (pluginResult) - setPluginInfo(pluginResult) - setInModelList(modelListResult) - setIsPluginChecked(true) + (async () => { + if (modelId && currentProvider) { + try { + const modelsData = await fetchModelProviderModelList(`/workspaces/current/model-providers/${currentProvider?.provider}/models`) + if (modelId && modelsData.data.find(item => item.model === modelId)) + setInModelList(true) + } + catch (error) { + // pass } } - } - - initializeChecks() - - return () => { - isSubscribed = false - } - }, [checkPluginInfo, checkModelList, isPluginChecked, modelId, currentProvider]) + if (providerName) { + const parts = providerName.split('/') + const org = parts[0] + const name = parts[1] + try { + const pluginInfo = await fetchPluginInfoFromMarketPlace({ org, name }) + if (pluginInfo.data.plugin.category === PluginType.model) + setPluginInfo(pluginInfo.data.plugin) + } + catch (error) { + // pass + } + } + setIsPluginChecked(true) + })() + }, [providerName, modelId, currentProvider]) if (modelId && !isPluginChecked) return