fix: agent app tool update (#20490)

web/app/components/app/configuration/config/agent/agent-tools/index.tsx

 'use client'
 import type { FC } from 'react'
-import React, { useMemo, useState } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import copy from 'copy-to-clipboard'
 import ToolPicker from '@/app/components/workflow/block-selector/tool-picker'
 import type { ToolDefaultValue } from '@/app/components/workflow/block-selector/types'
 import { canFindTool } from '@/utils'
+import { useMittContextSelector } from '@/context/mitt-context'
 
 type AgentToolWithMoreInfo = AgentTool & { icon: any; collection?: Collection } | null
 const AgentTools: FC = () => {
   const [isShowChooseTool, setIsShowChooseTool] = useState(false)
   const { modelConfig, setModelConfig, collectionList } = useContext(ConfigContext)
   const formattingChangedDispatcher = useFormattingChangedDispatcher()
-
   const [currentTool, setCurrentTool] = useState<AgentToolWithMoreInfo>(null)
   const currentCollection = useMemo(() => {
     if (!currentTool) return null
       collection,
     }
   })
+  const useSubscribe = useMittContextSelector(s => s.useSubscribe)
+  const handleUpdateToolsWhenInstallToolSuccess = useCallback((installedPluginNames: string[]) => {
+    const newModelConfig = produce(modelConfig, (draft) => {
+      draft.agentConfig.tools.forEach((item: any) => {
+        if (item.isDeleted && installedPluginNames.includes(item.provider_id))
+          item.isDeleted = false
+      })
+    })
+    setModelConfig(newModelConfig)
+  }, [modelConfig, setModelConfig])
+  useSubscribe('plugin:install:success', handleUpdateToolsWhenInstallToolSuccess as any)
 
   const handleToolSettingChange = (value: Record<string, any>) => {
     const newModelConfig = produce(modelConfig, (draft) => {
                   disabled={false}
                   supportAddCustomTool
                   onSelect={handleSelectTool}
-                  selectedTools={tools}
+                  selectedTools={tools as any}
                 />
               </>
             )}

web/app/components/app/configuration/index.tsx

 } from '@/utils'
 import PluginDependency from '@/app/components/workflow/plugin-dependency'
 import { supportFunctionCall } from '@/utils/tool-call'
+import { MittProvider } from '@/context/mitt-context'
 
 type PublishConfig = {
   modelConfig: ModelConfig
     }}
     >
       <FeaturesProvider features={featuresData}>
-        <>
+        <MittProvider>
           <div className="flex h-full flex-col">
             <div className='relative flex h-[200px] grow pt-14'>
               {/* Header */}
             />
           )}
           <PluginDependency />
-        </>
+        </MittProvider>
       </FeaturesProvider>
     </ConfigContext.Provider>
   )

web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx

 import { useInstallOrUpdate } from '@/service/use-plugins'
 import useRefreshPluginList from '../../hooks/use-refresh-plugin-list'
 import { useCanInstallPluginFromMarketplace } from '@/app/components/plugins/plugin-page/use-permission'
+import { useMittContextSelector } from '@/context/mitt-context'
 const i18nPrefix = 'plugin.installModal'
 
 type Props = {
   isHideButton,
 }) => {
   const { t } = useTranslation()
+  const emit = useMittContextSelector(s => s.emit)
   const [selectedPlugins, setSelectedPlugins] = React.useState<Plugin[]>([])
   const [selectedIndexes, setSelectedIndexes] = React.useState<number[]>([])
   const selectedPluginsNum = selectedPlugins.length
         })
       }))
       const hasInstallSuccess = res.some(r => r.success)
-      if (hasInstallSuccess)
+      if (hasInstallSuccess) {
         refreshPluginList(undefined, true)
+        emit('plugin:install:success', selectedPlugins.map((p) => {
+          return `${p.plugin_id}/${p.name}`
+        }))
+      }
     },
   })
   const handleInstall = () => {

web/context/mitt-context.tsx

+import { createContext, useContext, useContextSelector } from 'use-context-selector'
+import { useMitt } from '@/hooks/use-mitt'
+import { noop } from 'lodash-es'
+
+type ContextValueType = ReturnType<typeof useMitt>
+export const MittContext = createContext<ContextValueType>({
+  emit: noop,
+  useSubscribe: noop,
+})
+
+export const MittProvider = ({ children }: { children: React.ReactNode }) => {
+  const mitt = useMitt()
+
+  return (
+    <MittContext.Provider value={mitt}>
+      {children}
+    </MittContext.Provider>
+  )
+}
+
+export const useMittContext = () => {
+  return useContext(MittContext)
+}
+
+export function useMittContextSelector<T>(selector: (value: ContextValueType) => T): T {
+  return useContextSelector(MittContext, selector)
+}