fix(web): fix the issue where the detail drawer content does not update after editing custom tools (#18082)

- Use the useMemo hook to compute currentProvider based on currentProviderId and filteredCollectionList
- This allows the detail drawer content to automatically update when filteredCollectionList changes

web/app/components/tools/provider-list.tsx

@@ -53,7 +53,10 @@ const ProviderList = () => {
     })
   }, [activeTab, tagFilterValue, keywords, collectionList])
 
-  const [currentProvider, setCurrentProvider] = useState<Collection | undefined>()
+  const [currentProviderId, setCurrentProviderId] = useState<string | undefined>()
+  const currentProvider = useMemo<Collection | undefined>(() => {
+    return filteredCollectionList.find(collection => collection.id === currentProviderId)
+  }, [currentProviderId, filteredCollectionList])
   const { data: pluginList } = useInstalledPluginList()
   const invalidateInstalledPluginList = useInvalidateInstalledPluginList()
   const currentPluginDetail = useMemo(() => {
@@ -70,14 +73,14 @@ const ProviderList = () => {
         >
           <div className={cn(
             'sticky top-0 z-20 flex flex-wrap items-center justify-between gap-y-2 bg-background-body px-12 pb-2 pt-4 leading-[56px]',
-            currentProvider && 'pr-6',
+            currentProviderId && 'pr-6',
           )}>
             <TabSliderNew
               value={activeTab}
               onChange={(state) => {
                 setActiveTab(state)
                 if (state !== activeTab)
-                  setCurrentProvider(undefined)
+                  setCurrentProviderId(undefined)
               }}
               options={options}
             />
@@ -102,12 +105,12 @@ const ProviderList = () => {
               {filteredCollectionList.map(collection => (
                 <div
                   key={collection.id}
-                  onClick={() => setCurrentProvider(collection)}
+                  onClick={() => setCurrentProviderId(collection.id)}
                 >
                   <Card
                     className={cn(
                       'cursor-pointer border-[1.5px] border-transparent',
-                      currentProvider?.id === collection.id && 'border-components-option-card-option-selected-border',
+                      currentProviderId === collection.id && 'border-components-option-card-option-selected-border',
                     )}
                     hideCornerMark
                     payload={{
@@ -146,14 +149,14 @@ const ProviderList = () => {
       {currentProvider && !currentProvider.plugin_id && (
         <ProviderDetail
           collection={currentProvider}
-          onHide={() => setCurrentProvider(undefined)}
+          onHide={() => setCurrentProviderId(undefined)}
           onRefreshData={refetch}
         />
       )}
       <PluginDetailPanel
         detail={currentPluginDetail}
         onUpdate={() => invalidateInstalledPluginList()}
-        onHide={() => setCurrentProvider(undefined)}
+        onHide={() => setCurrentProviderId(undefined)}
       />
     </>
   )