Merge branch 'feat/plugins' into dev/plugin-deploy

web/app/components/base/badge.tsx

@@ -20,7 +20,7 @@ const Badge = ({
   return (
     <div
       className={cn(
-        'inline-flex items-center px-[5px] h-5 rounded-[5px] border border-divider-deep leading-3 text-text-tertiary',
+        'relative inline-flex items-center px-[5px] h-5 rounded-[5px] border border-divider-deep leading-3 text-text-tertiary',
         uppercase ? 'system-2xs-medium-uppercase' : 'system-xs-medium',
         className,
       )}

web/app/components/base/install-button/index.tsx

@@ -17,7 +17,7 @@ const InstallButton = ({ loading, onInstall, t }: InstallButtonProps) => {
         {loading ? t('workflow.nodes.agent.pluginInstaller.installing') : t('workflow.nodes.agent.pluginInstaller.install')}
       </div>
       {loading
-        ? <RiLoader2Line className='w-3.5 h-3.5 text-text-quaternary' />
+        ? <RiLoader2Line className='w-3.5 h-3.5 text-text-quaternary animate-spin' />
         : <RiInstallLine className='w-3.5 h-3.5 text-text-secondary' />
       }
     </Button>

web/app/components/base/qrcode/style.module.css

@@ -41,6 +41,7 @@
   gap: 4px;
 }
 .qrcodeform {
+  z-index: 50;
   border: 0.5px solid #eaecf0;
   display: flex;
   flex-direction: column;

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)
+        }
+      },
+    })
+  }
+}

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 {

web/app/components/header/account-setting/model-provider-page/model-parameter-modal/agent-model-trigger.tsx

@@ -2,27 +2,25 @@ 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 { useInstallPackageFromMarketPlace } from '@/service/use-plugins'
+import { useInvalidateInstalledPluginList } from '@/service/use-plugins'
 import ConfigurationButton from './configuration-button'
 import { PluginType } from '@/app/components/plugins/types'
 import {
+  useModelModalHandler,
   useUpdateModelList,
   useUpdateModelProviders,
 } from '../hooks'
 import ModelIcon from '../model-icon'
 import ModelDisplay from './model-display'
-import InstallButton from '@/app/components/base/install-button'
+import { InstallPluginButton } from '@/app/components/workflow/nodes/_base/components/install-plugin-button'
 import StatusIndicators from './status-indicators'
 import cn from '@/utils/classnames'
 import { useProviderContext } from '@/context/provider-context'
@@ -72,10 +70,9 @@ const AgentModelTrigger: FC<AgentModelTriggerProps> = ({
   }, [modelProviders, providerName])
   const [pluginInfo, setPluginInfo] = useState<PluginInfoFromMarketPlace | null>(null)
   const [isPluginChecked, setIsPluginChecked] = useState(false)
-  const [loading, setLoading] = useState(false)
   const [installed, setInstalled] = useState(false)
-  const { mutateAsync: installPackageFromMarketPlace } = useInstallPackageFromMarketPlace()
-
+  const invalidateInstalledPluginList = useInvalidateInstalledPluginList()
+  const handleOpenModal = useModelModalHandler()
   useEffect(() => {
     (async () => {
       if (providerName && !modelProvider) {
@@ -101,66 +98,6 @@ const AgentModelTrigger: FC<AgentModelTriggerProps> = ({
   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)
-        }
-      },
-    })
-  }
-
-  const handleInstall = async (pluginInfo: PluginInfoFromMarketPlace) => {
-    setLoading(true)
-    try {
-      const { all_installed } = await installPackageFromMarketPlace(pluginInfo.latest_package_identifier)
-      if (all_installed) {
-        [
-          ModelTypeEnum.textGeneration,
-          ModelTypeEnum.textEmbedding,
-          ModelTypeEnum.rerank,
-          ModelTypeEnum.moderation,
-          ModelTypeEnum.speech2text,
-          ModelTypeEnum.tts,
-        ].forEach((type: ModelTypeEnum) => {
-          if (scope?.includes(type))
-            updateModelList(type)
-        })
-        updateModelProviders()
-        setInstalled(true)
-      }
-    }
-    catch (error) {
-      console.error('Installation failed:', error)
-    }
-    finally {
-      setLoading(false)
-    }
-  }
-
   return (
     <div
       className={cn(
@@ -193,13 +130,27 @@ const AgentModelTrigger: FC<AgentModelTriggerProps> = ({
             t={t}
           />
           {!installed && !modelProvider && pluginInfo && (
-            <InstallButton
-              loading={loading}
-              onInstall={(e) => {
-                e.stopPropagation()
-                handleInstall(pluginInfo)
+            <InstallPluginButton
+              onClick={e => e.stopPropagation()}
+              size={'small'}
+              uniqueIdentifier={pluginInfo.latest_package_identifier}
+              onSuccess={() => {
+                [
+                  ModelTypeEnum.textGeneration,
+                  ModelTypeEnum.textEmbedding,
+                  ModelTypeEnum.rerank,
+                  ModelTypeEnum.moderation,
+                  ModelTypeEnum.speech2text,
+                  ModelTypeEnum.tts,
+                ].forEach((type: ModelTypeEnum) => {
+                  if (scope?.includes(type))
+                    updateModelList(type)
+                },
+                )
+                updateModelProviders()
+                invalidateInstalledPluginList()
+                setInstalled(true)
               }}
-              t={t}
             />
           )}
           {modelProvider && !disabled && !needsConfiguration && (

web/app/components/header/plugins-nav/downloading-icon.module.css

@@ -0,0 +1,44 @@
+@keyframes realistic-blink {
+  0% { fill: #37ff37; opacity: 0.4; }
+  15% { fill: #37ff37; opacity: 0.9; }
+  25% { fill: #37ff37; opacity: 0.3; }
+  38% { fill: #ff4444; opacity: 0.8; }
+  42% { fill: #ff4444; opacity: 0.3; }
+  58% { fill: #37ff37; opacity: 0.9; }
+  65% { fill: #37ff37; opacity: 0.4; }
+  79% { fill: #ff4444; opacity: 0.8; }
+  84% { fill: #ff4444; opacity: 0.3; }
+  92% { fill: #37ff37; opacity: 0.8; }
+  100% { fill: #37ff37; opacity: 0.4; }
+}
+
+@keyframes drop {
+  0% { 
+    transform: translateY(-4px); 
+    opacity: 0;
+  }
+  5% { 
+    transform: translateY(-4px); 
+    opacity: 1;
+  }
+  65% { 
+    transform: translateY(2px);
+    opacity: 1;
+  }
+  80% {
+    transform: translateY(2px);
+    opacity: 0;
+  }
+  100% { 
+    transform: translateY(2px);
+    opacity: 0;
+  }
+}
+
+#downloadingIconLight {
+  animation: realistic-blink 3s infinite ease-in-out;
+}
+
+#downloadingIconArrow {
+  animation: drop 1.2s cubic-bezier(0.4, 0, 1, 1) infinite;
+}

web/app/components/header/plugins-nav/downloading-icon.tsx

@@ -0,0 +1,17 @@
+import s from './downloading-icon.module.css'
+
+const DownloadingIcon = () => {
+  return (
+    <div className="inline-flex text-components-button-secondary-text">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="install-icon">
+        <g id="install-line">
+          <path d="M8 2V4H5L4.999 14H18.999L19 4H16V2H20C20.5523 2 21 2.44772 21 3V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V3C3 2.44772 3.44772 2 4 2H8ZM18.999 16H4.999L5 20H19L18.999 16Z" fill="currentColor"/>
+          <path id={s.downloadingIconLight} d="M17 19V17H15V19H17Z"/>
+          <path id={s.downloadingIconArrow} d="M13 2V7H16L12 11L8 7H11V2H13Z" fill="currentColor"/>
+        </g>
+      </svg>
+    </div>
+  )
+}
+
+export default DownloadingIcon

web/app/components/header/plugins-nav/index.tsx

@@ -5,6 +5,9 @@ import Link from 'next/link'
 import classNames from '@/utils/classnames'
 import { Group } from '@/app/components/base/icons/src/vender/other'
 import { useSelectedLayoutSegment } from 'next/navigation'
+import DownloadingIcon from './downloading-icon'
+import { usePluginTaskStatus } from '@/app/components/plugins/plugin-page/plugin-tasks/hooks'
+import Indicator from '@/app/components/header/indicator'
 
 type PluginsNavProps = {
   className?: string
@@ -16,17 +19,43 @@ const PluginsNav = ({
   const { t } = useTranslation()
   const selectedSegment = useSelectedLayoutSegment()
   const activated = selectedSegment === 'plugins'
+  const {
+    isInstalling,
+    isInstallingWithError,
+    isFailed,
+  } = usePluginTaskStatus()
 
   return (
     <Link href="/plugins" className={classNames(
       className, 'group',
     )}>
-      <div className={`flex flex-row h-8 p-1.5 gap-0.5 items-center justify-center 
-        rounded-xl system-sm-medium-uppercase ${activated
-      ? 'border border-components-main-nav-nav-button-border bg-components-main-nav-nav-button-bg-active shadow-md text-components-main-nav-nav-button-text'
-      : 'text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary'}`}>
+      <div
+        className={classNames(
+          'relative flex flex-row h-8 p-1.5 gap-0.5 border border-transparent items-center justify-center rounded-xl system-sm-medium-uppercase',
+          activated && 'border-components-main-nav-nav-button-border bg-components-main-nav-nav-button-bg-active shadow-md text-components-main-nav-nav-button-text',
+          !activated && 'text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
+          (isInstallingWithError || isFailed) && !activated && 'border-components-panel-border-subtle',
+        )}
+      >
+        {
+          (isFailed || isInstallingWithError) && !activated && (
+            <Indicator
+              color='red'
+              className='absolute top-[-1px] left-[-1px]'
+            />
+          )
+        }
         <div className='flex mr-0.5 w-5 h-5 justify-center items-center'>
-          <Group className='w-4 h-4' />
+          {
+            (!(isInstalling || isInstallingWithError) || activated) && (
+              <Group className='w-4 h-4' />
+            )
+          }
+          {
+            (isInstalling || isInstallingWithError) && !activated && (
+              <DownloadingIcon />
+            )
+          }
         </div>
         <span className='px-0.5'>{t('common.menus.plugins')}</span>
       </div>

web/app/components/plugins/plugin-detail-panel/index.tsx

@@ -9,6 +9,7 @@ import AgentStrategyList from './agent-strategy-list'
 import Drawer from '@/app/components/base/drawer'
 import type { PluginDetail } from '@/app/components/plugins/types'
 import cn from '@/utils/classnames'
+import ToolSelector from '@/app/components/plugins/plugin-detail-panel/tool-selector'
 
 type Props = {
   detail?: PluginDetail
@@ -27,6 +28,16 @@ const PluginDetailPanel: FC<Props> = ({
     onUpdate()
   }
 
+  const [value, setValue] = React.useState({
+    provider_name: 'langgenius/google/google',
+    tool_name: 'google_search',
+  })
+
+  const testHandle = (item: any) => {
+    console.log(item)
+    setValue(item)
+  }
+
   if (!detail)
     return null
 
@@ -52,6 +63,17 @@ const PluginDetailPanel: FC<Props> = ({
             {!!detail.declaration.agent_strategy && <AgentStrategyList detail={detail} />}
             {!!detail.declaration.endpoint && <EndpointList detail={detail} />}
             {!!detail.declaration.model && <ModelList detail={detail} />}
+            {false && (
+              <div className='px-4'>
+                <ToolSelector
+                  scope={'all'}
+                  value={value}
+                  onSelect={item => testHandle(item)}
+                  onDelete={() => testHandle(null)}
+                  supportEnableSwitch
+                />
+              </div>
+            )}
           </div>
         </>
       )}

web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx

@@ -32,7 +32,7 @@ import {
   useInvalidateAllBuiltInTools,
   useUpdateProviderCredentials,
 } from '@/service/use-tools'
-import { useInstallPackageFromMarketPlace } from '@/service/use-plugins'
+import { useInvalidateInstalledPluginList } from '@/service/use-plugins'
 import { usePluginInstalledCheck } from '@/app/components/plugins/plugin-detail-panel/tool-selector/hooks'
 import { CollectionType } from '@/app/components/tools/types'
 import type { ToolDefaultValue } from '@/app/components/workflow/block-selector/types'
@@ -94,6 +94,7 @@ const ToolSelector: FC<Props> = ({
   const { data: customTools } = useAllCustomTools()
   const { data: workflowTools } = useAllWorkflowTools()
   const invalidateAllBuiltinTools = useInvalidateAllBuiltInTools()
+  const invalidateInstalledPluginList = useInvalidateInstalledPluginList()
 
   // plugin info check
   const { inMarketPlace, manifest } = usePluginInstalledCheck(value?.provider_name)
@@ -171,22 +172,15 @@ const ToolSelector: FC<Props> = ({
   })
 
   // install from marketplace
-  const { mutateAsync: installPackageFromMarketPlace, isPending } = useInstallPackageFromMarketPlace()
+
   const manifestIcon = useMemo(() => {
     if (!manifest)
       return ''
     return `${MARKETPLACE_API_PREFIX}/plugins/${(manifest as any).plugin_id}/icon`
   }, [manifest])
   const handleInstall = async () => {
-    if (!manifest)
-      return
-    try {
-      await installPackageFromMarketPlace(manifest.latest_package_identifier)
-      invalidateAllBuiltinTools()
-    }
-    catch (e: any) {
-      Toast.notify({ type: 'error', message: `${e.message || e}` })
-    }
+    invalidateAllBuiltinTools()
+    invalidateInstalledPluginList()
   }
 
   return (
@@ -223,7 +217,7 @@ const ToolSelector: FC<Props> = ({
               noAuth={currentProvider && !currentProvider.is_team_authorization}
               onAuth={() => setShowSettingAuth(true)}
               uninstalled={!currentProvider && inMarketPlace}
-              isInstalling={isPending}
+              installInfo={manifest?.latest_package_identifier}
               onInstall={() => handleInstall()}
               isError={!currentProvider && !inMarketPlace}
               errorTip={<div className='space-y-1 max-w-[240px] text-xs'>

web/app/components/plugins/plugin-detail-panel/tool-selector/tool-item.tsx

@@ -5,8 +5,6 @@ import {
   RiDeleteBinLine,
   RiEqualizer2Line,
   RiErrorWarningFill,
-  RiInstallLine,
-  RiLoader2Line,
 } from '@remixicon/react'
 import { Group } from '@/app/components/base/icons/src/vender/other'
 import AppIcon from '@/app/components/base/app-icon'
@@ -15,6 +13,7 @@ import Button from '@/app/components/base/button'
 import Indicator from '@/app/components/header/indicator'
 import ActionButton from '@/app/components/base/action-button'
 import Tooltip from '@/app/components/base/tooltip'
+import { InstallPluginButton } from '@/app/components/workflow/nodes/_base/components/install-plugin-button'
 import cn from '@/utils/classnames'
 
 type Props = {
@@ -30,7 +29,7 @@ type Props = {
   isError?: boolean
   errorTip?: any
   uninstalled?: boolean
-  isInstalling?: boolean
+  installInfo?: string
   onInstall?: () => void
   open: boolean
 }
@@ -47,7 +46,7 @@ const ToolItem = ({
   noAuth,
   onAuth,
   uninstalled,
-  isInstalling,
+  installInfo,
   onInstall,
   isError,
   errorTip,
@@ -115,20 +114,15 @@ const ToolItem = ({
           <Indicator className='ml-2' color='orange' />
         </Button>
       )}
-      {!isError && uninstalled && (
-        <Button
-          className={cn('flex items-center')}
-          size='small'
-          variant='secondary'
-          disabled={isInstalling}
-          onClick={(e) => {
-            e.stopPropagation()
+      {!isError && uninstalled && installInfo && (
+        <InstallPluginButton
+          onClick={e => e.stopPropagation()}
+          size={'small'}
+          uniqueIdentifier={installInfo}
+          onSuccess={() => {
             onInstall?.()
           }}
-        >
-          {!isInstalling ? t('workflow.nodes.agent.pluginInstaller.install') : t('workflow.nodes.agent.pluginInstaller.installing')}
-          {!isInstalling ? <RiInstallLine className='size-4 ml-1' /> : <RiLoader2Line className='size-4 ml-1 animate-spin' />}
-        </Button>
+        />
       )}
       {isError && (
         <Tooltip

web/app/components/plugins/plugin-item/index.tsx

@@ -21,7 +21,7 @@ import Action from './action'
 import cn from '@/utils/classnames'
 import { API_PREFIX, MARKETPLACE_URL_PREFIX } from '@/config'
 import { useInvalidateInstalledPluginList } from '@/service/use-plugins'
-import { useInvalidateAllToolProviders } from '@/service/use-tools'
+import { useInvalidateAllBuiltInTools, useInvalidateAllToolProviders } from '@/service/use-tools'
 import { useCategories } from '../hooks'
 import { useProviderContext } from '@/context/provider-context'
 import { useRenderI18nObject } from '@/hooks/use-i18n'
@@ -41,6 +41,7 @@ const PluginItem: FC<Props> = ({
   const setCurrentPluginID = usePluginPageContext(v => v.setCurrentPluginID)
   const invalidateInstalledPluginList = useInvalidateInstalledPluginList()
   const invalidateAllToolProviders = useInvalidateAllToolProviders()
+  const invalidateAllBuiltinTools = useInvalidateAllBuiltInTools()
   const { refreshModelProviders } = useProviderContext()
 
   const {
@@ -62,8 +63,10 @@ const PluginItem: FC<Props> = ({
     invalidateInstalledPluginList()
     if (PluginType.model.includes(category))
       refreshModelProviders()
-    if (PluginType.tool.includes(category))
+    if (PluginType.tool.includes(category)) {
       invalidateAllToolProviders()
+      invalidateAllBuiltinTools()
+    }
   }
   const getValueFromI18nObject = useRenderI18nObject()
   const title = getValueFromI18nObject(label)

web/app/components/plugins/plugin-page/plugin-tasks/hooks.ts

@@ -64,14 +64,16 @@ export const usePluginTaskStatus = () => {
   const timerRef = useRef<NodeJS.Timeout | null>(null)
 
   useEffect(() => {
-    if (isSuccess && opacity > 0) {
+    if (isSuccess) {
       if (timerRef.current) {
         clearTimeout(timerRef.current)
         timerRef.current = null
       }
-      timerRef.current = setTimeout(() => {
-        setOpacity(v => v - 0.1)
-      }, 200)
+      if (opacity > 0) {
+        timerRef.current = setTimeout(() => {
+          setOpacity(v => v - 0.1)
+        }, 200)
+      }
     }
 
     if (!isSuccess)

web/app/components/workflow/block-selector/market-place-plugin/list.tsx

@@ -15,14 +15,16 @@ type Props = {
   list: Plugin[]
   searchText: string
   tags: string[]
+  disableMaxWidth?: boolean
 }
 
-const List = ({
+const List = forwardRef<{ handleScroll: () => void }, Props>(({
   wrapElemRef,
   searchText,
   tags,
   list,
-}: Props, ref: any) => {
+  disableMaxWidth = false,
+}, ref) => {
   const { t } = useTranslation()
   const hasFilter = !searchText
   const hasRes = list.length > 0
@@ -95,7 +97,7 @@ const List = ({
           </Link>
         </div>
       )}
-      <div className={cn('p-1', maxWidthClassName)} ref={nextToStickyELemRef}>
+      <div className={cn('p-1', !disableMaxWidth && maxWidthClassName)} ref={nextToStickyELemRef}>
         {list.map((item, index) => (
           <Item
             key={index}
@@ -103,7 +105,7 @@ const List = ({
             onAction={() => { }}
           />
         ))}
-        <div className='mt-2 mb-3 flex items-center space-x-2'>
+        <div className='mt-2 mb-3 flex items-center justify-center space-x-2'>
           <div className="w-[90px] h-[2px] bg-gradient-to-l from-[rgba(16,24,40,0.08)] to-[rgba(255,255,255,0.01)]"></div>
           <Link
             href={urlWithSearchText}
@@ -118,5 +120,8 @@ const List = ({
       </div>
     </>
   )
-}
-export default forwardRef(List)
+})
+
+List.displayName = 'List'
+
+export default List

web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx

@@ -1,24 +1,25 @@
 import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
 import type { ReactNode } from 'react'
-import { memo, useMemo, useState } from 'react'
+import { memo, useEffect, useMemo, useRef, useState } from 'react'
 import type { Strategy } from './agent-strategy'
 import classNames from '@/utils/classnames'
-import { RiArrowDownSLine, RiArrowRightUpLine, RiErrorWarningFill } from '@remixicon/react'
+import { RiArrowDownSLine, RiErrorWarningFill } from '@remixicon/react'
 import Tooltip from '@/app/components/base/tooltip'
 import Link from 'next/link'
 import { InstallPluginButton } from './install-plugin-button'
 import ViewTypeSelect, { ViewType } from '../../../block-selector/view-type-select'
 import SearchInput from '@/app/components/base/search-input'
-import { MARKETPLACE_URL_PREFIX } from '@/config'
 import Tools from '../../../block-selector/tools'
 import { useTranslation } from 'react-i18next'
 import { useStrategyProviders } from '@/service/use-strategy'
-import type { StrategyPluginDetail } from '@/app/components/plugins/types'
+import { PluginType, type StrategyPluginDetail } from '@/app/components/plugins/types'
 import type { ToolWithProvider } from '../../../types'
 import { CollectionType } from '@/app/components/tools/types'
 import useGetIcon from '@/app/components/plugins/install-plugin/base/use-get-icon'
 import { useStrategyInfo } from '../../agent/use-config'
 import { SwitchPluginVersion } from './switch-plugin-version'
+import PluginList from '@/app/components/workflow/block-selector/market-place-plugin/list'
+import { useMarketplacePlugins } from '@/app/components/plugins/marketplace/hooks'
 
 const NotFoundWarn = (props: {
   title: ReactNode,
@@ -119,6 +120,25 @@ export const AgentStrategySelector = memo((props: AgentStrategySelectorProps) =>
   )?.icon as string | undefined
   const { t } = useTranslation()
 
+  const wrapElemRef = useRef<HTMLDivElement>(null)
+
+  const {
+    queryPluginsWithDebounced: fetchPlugins,
+    plugins: notInstalledPlugins = [],
+  } = useMarketplacePlugins()
+
+  useEffect(() => {
+    if (query) {
+      fetchPlugins({
+        query,
+        category: PluginType.agent,
+      })
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [query])
+
+  const pluginRef = useRef(null)
+
   return <PortalToFollowElem open={open} onOpenChange={setOpen} placement='bottom'>
     <PortalToFollowElemTrigger className='w-full'>
       <div
@@ -172,8 +192,7 @@ export const AgentStrategySelector = memo((props: AgentStrategySelectorProps) =>
           <SearchInput placeholder={t('workflow.nodes.agent.strategy.searchPlaceholder')} value={query} onChange={setQuery} className={'w-full'} />
           <ViewTypeSelect viewType={viewType} onChange={setViewType} />
         </header>
-        <main className="md:h-[300px] xl:h-[400px] 2xl:h-[564px] relative overflow-hidden">
-          {/* TODO: fix when in list view show workflow as group label */}
+        <main className="md:max-h-[300px] xl:max-h-[400px] 2xl:max-h-[564px] relative overflow-hidden flex flex-col w-full" ref={wrapElemRef}>
           <Tools
             tools={filteredTools}
             viewType={viewType}
@@ -186,18 +205,16 @@ export const AgentStrategySelector = memo((props: AgentStrategySelectorProps) =>
                 plugin_unique_identifier: tool!.provider_id,
               })
               setOpen(false)
-            }}
-            hasSearchText={false}
-            showWorkflowEmpty={false}
-            className='max-w-none'
-            indexBarClassName='top-0 xl:top-36'
+            } }
+            className='max-w-none max-h-full h-full overflow-y-auto'
+            indexBarClassName='top-0 xl:top-36' showWorkflowEmpty={false} hasSearchText={false} />
+          <PluginList
+            wrapElemRef={wrapElemRef}
+            list={notInstalledPlugins as any} ref={pluginRef}
+            searchText={query}
+            tags={[]}
+            disableMaxWidth
           />
-          <div className='absolute bottom-0 px-4 py-2 flex items-center justify-center border-t border-divider-subtle text-text-accent-light-mode-only bg-components-panel-bg text-xs'>
-            Find more in
-            <Link href={MARKETPLACE_URL_PREFIX} className='flex ml-1'>
-              Marketplace <RiArrowRightUpLine className='size-3' />
-            </Link>
-          </div>
         </main>
       </div>
     </PortalToFollowElemContent>

web/app/components/workflow/nodes/_base/components/install-plugin-button.tsx

@@ -38,6 +38,6 @@ export const InstallPluginButton = (props: InstallPluginButtonProps) => {
     className={classNames('flex items-center', className)}
   >
     {!isLoading ? t('workflow.nodes.agent.pluginInstaller.install') : t('workflow.nodes.agent.pluginInstaller.installing')}
-    {!isLoading ? <RiInstallLine className='size-4 ml-1' /> : <RiLoader2Line className='size-4 ml-1 animate-spin' />}
+    {!isLoading ? <RiInstallLine className='size-3.5 ml-1' /> : <RiLoader2Line className='size-3.5 ml-1 animate-spin' />}
   </Button>
 }