Introduce Plugins (#13836)

Signed-off-by: yihong0618 <zouzou0208@gmail.com> Signed-off-by: -LAN- <laipz8200@outlook.com> Signed-off-by: xhe <xw897002528@gmail.com> Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: takatost <takatost@gmail.com> Co-authored-by: kurokobo <kuro664@gmail.com> Co-authored-by: Novice Lee <novicelee@NoviPro.local> Co-authored-by: zxhlyh <jasonapring2015@outlook.com> Co-authored-by: AkaraChen <akarachen@outlook.com> Co-authored-by: Yi <yxiaoisme@gmail.com> Co-authored-by: Joel <iamjoel007@gmail.com> Co-authored-by: JzoNg <jzongcode@gmail.com> Co-authored-by: twwu <twwu@dify.ai> Co-authored-by: Hiroshi Fujita <fujita-h@users.noreply.github.com> Co-authored-by: AkaraChen <85140972+AkaraChen@users.noreply.github.com> Co-authored-by: NFish <douxc512@gmail.com> Co-authored-by: Wu Tianwei <30284043+WTW0313@users.noreply.github.com> Co-authored-by: 非法操作 <hjlarry@163.com> Co-authored-by: Novice <857526207@qq.com> Co-authored-by: Hiroki Nagai <82458324+nagaihiroki-git@users.noreply.github.com> Co-authored-by: Gen Sato <52241300+halogen22@users.noreply.github.com> Co-authored-by: eux <euxuuu@gmail.com> Co-authored-by: huangzhuo1949 <167434202+huangzhuo1949@users.noreply.github.com> Co-authored-by: huangzhuo <huangzhuo1@xiaomi.com> Co-authored-by: lotsik <lotsik@mail.ru> Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com> Co-authored-by: nite-knite <nkCoding@gmail.com> Co-authored-by: Jyong <76649700+JohnJyong@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: gakkiyomi <gakkiyomi@aliyun.com> Co-authored-by: CN-P5 <heibai2006@gmail.com> Co-authored-by: CN-P5 <heibai2006@qq.com> Co-authored-by: Chuehnone <1897025+chuehnone@users.noreply.github.com> Co-authored-by: yihong <zouzou0208@gmail.com> Co-authored-by: Kevin9703 <51311316+Kevin9703@users.noreply.github.com> Co-authored-by: -LAN- <laipz8200@outlook.com> Co-authored-by: Boris Feld <lothiraldan@gmail.com> Co-authored-by: mbo <himabo@gmail.com> Co-authored-by: mabo <mabo@aeyes.ai> Co-authored-by: Warren Chen <warren.chen830@gmail.com> Co-authored-by: JzoNgKVO <27049666+JzoNgKVO@users.noreply.github.com> Co-authored-by: jiandanfeng <chenjh3@wangsu.com> Co-authored-by: zhu-an <70234959+xhdd123321@users.noreply.github.com> Co-authored-by: zhaoqingyu.1075 <zhaoqingyu.1075@bytedance.com> Co-authored-by: 海狸大師 <86974027+yenslife@users.noreply.github.com> Co-authored-by: Xu Song <xusong.vip@gmail.com> Co-authored-by: rayshaw001 <396301947@163.com> Co-authored-by: Ding Jiatong <dingjiatong@gmail.com> Co-authored-by: Bowen Liang <liangbowen@gf.com.cn> Co-authored-by: JasonVV <jasonwangiii@outlook.com> Co-authored-by: le0zh <newlight@qq.com> Co-authored-by: zhuxinliang <zhuxinliang@didiglobal.com> Co-authored-by: k-zaku <zaku99@outlook.jp> Co-authored-by: luckylhb90 <luckylhb90@gmail.com> Co-authored-by: hobo.l <hobo.l@binance.com> Co-authored-by: jiangbo721 <365065261@qq.com> Co-authored-by: 刘江波 <jiangbo721@163.com> Co-authored-by: Shun Miyazawa <34241526+miya@users.noreply.github.com> Co-authored-by: EricPan <30651140+Egfly@users.noreply.github.com> Co-authored-by: crazywoola <427733928@qq.com> Co-authored-by: sino <sino2322@gmail.com> Co-authored-by: Jhvcc <37662342+Jhvcc@users.noreply.github.com> Co-authored-by: lowell <lowell.hu@zkteco.in> Co-authored-by: Boris Polonsky <BorisPolonsky@users.noreply.github.com> Co-authored-by: Ademílson Tonato <ademilsonft@outlook.com> Co-authored-by: Ademílson Tonato <ademilson.tonato@refurbed.com> Co-authored-by: IWAI, Masaharu <iwaim.sub@gmail.com> Co-authored-by: Yueh-Po Peng (Yabi) <94939112+y10ab1@users.noreply.github.com> Co-authored-by: Jason <ggbbddjm@gmail.com> Co-authored-by: Xin Zhang <sjhpzx@gmail.com> Co-authored-by: yjc980121 <3898524+yjc980121@users.noreply.github.com> Co-authored-by: heyszt <36215648+hieheihei@users.noreply.github.com> Co-authored-by: Abdullah AlOsaimi <osaimiacc@gmail.com> Co-authored-by: Abdullah AlOsaimi <189027247+osaimi@users.noreply.github.com> Co-authored-by: Yingchun Lai <laiyingchun@apache.org> Co-authored-by: Hash Brown <hi@xzd.me> Co-authored-by: zuodongxu <192560071+zuodongxu@users.noreply.github.com> Co-authored-by: Masashi Tomooka <tmokmss@users.noreply.github.com> Co-authored-by: aplio <ryo.091219@gmail.com> Co-authored-by: Obada Khalili <54270856+obadakhalili@users.noreply.github.com> Co-authored-by: Nam Vu <zuzoovn@gmail.com> Co-authored-by: Kei YAMAZAKI <1715090+kei-yamazaki@users.noreply.github.com> Co-authored-by: TechnoHouse <13776377+deephbz@users.noreply.github.com> Co-authored-by: Riddhimaan-Senapati <114703025+Riddhimaan-Senapati@users.noreply.github.com> Co-authored-by: MaFee921 <31881301+2284730142@users.noreply.github.com> Co-authored-by: te-chan <t-nakanome@sakura-is.co.jp> Co-authored-by: HQidea <HQidea@users.noreply.github.com> Co-authored-by: Joshbly <36315710+Joshbly@users.noreply.github.com> Co-authored-by: xhe <xw897002528@gmail.com> Co-authored-by: weiwenyan-dev <154779315+weiwenyan-dev@users.noreply.github.com> Co-authored-by: ex_wenyan.wei <ex_wenyan.wei@tcl.com> Co-authored-by: engchina <12236799+engchina@users.noreply.github.com> Co-authored-by: engchina <atjapan2015@gmail.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: 呆萌闷油瓶 <253605712@qq.com> Co-authored-by: Kemal <kemalmeler@outlook.com> Co-authored-by: Lazy_Frog <4590648+lazyFrogLOL@users.noreply.github.com> Co-authored-by: Yi Xiao <54782454+YIXIAO0@users.noreply.github.com> Co-authored-by: Steven sun <98230804+Tuyohai@users.noreply.github.com> Co-authored-by: steven <sunzwj@digitalchina.com> Co-authored-by: Kalo Chin <91766386+fdb02983rhy@users.noreply.github.com> Co-authored-by: Katy Tao <34019945+KatyTao@users.noreply.github.com> Co-authored-by: depy <42985524+h4ckdepy@users.noreply.github.com> Co-authored-by: 胡春东 <gycm520@gmail.com> Co-authored-by: Junjie.M <118170653@qq.com> Co-authored-by: MuYu <mr.muzea@gmail.com> Co-authored-by: Naoki Takashima <39912547+takatea@users.noreply.github.com> Co-authored-by: Summer-Gu <37869445+gubinjie@users.noreply.github.com> Co-authored-by: Fei He <droxer.he@gmail.com> Co-authored-by: ybalbert001 <120714773+ybalbert001@users.noreply.github.com> Co-authored-by: Yuanbo Li <ybalbert@amazon.com> Co-authored-by: douxc <7553076+douxc@users.noreply.github.com> Co-authored-by: liuzhenghua <1090179900@qq.com> Co-authored-by: Wu Jiayang <62842862+Wu-Jiayang@users.noreply.github.com> Co-authored-by: Your Name <you@example.com> Co-authored-by: kimjion <45935338+kimjion@users.noreply.github.com> Co-authored-by: AugNSo <song.tiankai@icloud.com> Co-authored-by: llinvokerl <38915183+llinvokerl@users.noreply.github.com> Co-authored-by: liusurong.lsr <liusurong.lsr@alibaba-inc.com> Co-authored-by: Vasu Negi <vasu-negi@users.noreply.github.com> Co-authored-by: Hundredwz <1808096180@qq.com> Co-authored-by: Xiyuan Chen <52963600+GareArc@users.noreply.github.com>
2025-12-15 13:56:53 +08:00 · 2025-02-17 17:05:13 +08:00
parent 222df44d21
commit 403e2d58b9
3272 changed files with 66339 additions and 281594 deletions
--- a/web/app/components/workflow/block-selector/all-tools.tsx
+++ b/web/app/components/workflow/block-selector/all-tools.tsx
@@ -1,35 +1,61 @@
 import {
+  useEffect,
  useMemo,
+  useRef,
  useState,
 } from 'react'
 import type {
  OnSelectBlock,
  ToolWithProvider,
 } from '../types'
-import { useStore } from '../store'
+import type { ToolValue } from './types'
 import { ToolTypeEnum } from './types'
 import Tools from './tools'
 import { useToolTabs } from './hooks'
+import ViewTypeSelect, { ViewType } from './view-type-select'
 import cn from '@/utils/classnames'
+import { useGetLanguage } from '@/context/i18n'
+import PluginList from '@/app/components/workflow/block-selector/market-place-plugin/list'
+import ActionButton from '../../base/action-button'
+import { RiAddLine } from '@remixicon/react'
+import { PluginType } from '../../plugins/types'
+import { useMarketplacePlugins } from '../../plugins/marketplace/hooks'

 type AllToolsProps = {
+  className?: string
+  toolContentClassName?: string
  searchText: string
+  tags: string[]
+  buildInTools: ToolWithProvider[]
+  customTools: ToolWithProvider[]
+  workflowTools: ToolWithProvider[]
  onSelect: OnSelectBlock
+  supportAddCustomTool?: boolean
+  onAddedCustomTool?: () => void
+  onShowAddCustomCollectionModal?: () => void
+  selectedTools?: ToolValue[]
 }
 const AllTools = ({
+  className,
+  toolContentClassName,
  searchText,
+  tags = [],
  onSelect,
+  buildInTools,
+  workflowTools,
+  customTools,
+  supportAddCustomTool,
+  onShowAddCustomCollectionModal,
+  selectedTools,
 }: AllToolsProps) => {
+  const language = useGetLanguage()
  const tabs = useToolTabs()
  const [activeTab, setActiveTab] = useState(ToolTypeEnum.All)
-  const buildInTools = useStore(s => s.buildInTools)
-  const customTools = useStore(s => s.customTools)
-  const workflowTools = useStore(s => s.workflowTools)
-
+  const [activeView, setActiveView] = useState<ViewType>(ViewType.flat)
+  const hasFilter = searchText || tags.length > 0
  const isMatchingKeywords = (text: string, keywords: string) => {
    return text.toLowerCase().includes(keywords.toLowerCase())
  }
-
  const tools = useMemo(() => {
    let mergedTools: ToolWithProvider[] = []
    if (activeTab === ToolTypeEnum.All)
@@ -41,39 +67,91 @@ const AllTools = ({
    if (activeTab === ToolTypeEnum.Workflow)
      mergedTools = workflowTools

+    if (!hasFilter)
+      return mergedTools.filter(toolWithProvider => toolWithProvider.tools.length > 0)
+
    return mergedTools.filter((toolWithProvider) => {
-      return isMatchingKeywords(toolWithProvider.name, searchText)
-        || toolWithProvider.tools.some((tool) => {
-          return Object.values(tool.label).some((label) => {
-            return isMatchingKeywords(label, searchText)
-          })
-        })
+      return isMatchingKeywords(toolWithProvider.name, searchText) || toolWithProvider.tools.some((tool) => {
+        return tool.label[language].toLowerCase().includes(searchText.toLowerCase()) || tool.name.toLowerCase().includes(searchText.toLowerCase())
+      })
    })
-  }, [activeTab, buildInTools, customTools, workflowTools, searchText])
+  }, [activeTab, buildInTools, customTools, workflowTools, searchText, language, hasFilter])
+
+  const {
+    queryPluginsWithDebounced: fetchPlugins,
+    plugins: notInstalledPlugins = [],
+  } = useMarketplacePlugins()
+
+  useEffect(() => {
+    if (searchText || tags.length > 0) {
+      fetchPlugins({
+        query: searchText,
+        tags,
+        category: PluginType.tool,
+      })
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchText, tags])
+
+  const pluginRef = useRef(null)
+  const wrapElemRef = useRef<HTMLDivElement>(null)
+
  return (
-    <div>
-      <div className='flex items-center px-3 h-8 space-x-1 bg-background-default-hover border-b-[0.5px] border-divider-subtle shadow-xs'>
-        {
-          tabs.map(tab => (
-            <div
-              className={cn(
-                'flex items-center px-2 h-6 rounded-md hover:bg-state-base-hover-alt cursor-pointer',
-                'system-xs-medium text-text-tertiary',
-                activeTab === tab.key && 'system-xs-semibold bg-state-base-hover-alt text-text-primary',
-              )}
-              key={tab.key}
-              onClick={() => setActiveTab(tab.key)}
+    <div className={cn(className)}>
+      <div className='flex items-center justify-between px-3 bg-background-default-hover border-b-[0.5px] border-divider-subtle shadow-xs'>
+        <div className='flex items-center h-8 space-x-1'>
+          {
+            tabs.map(tab => (
+              <div
+                className={cn(
+                  'flex items-center px-2 h-6 rounded-md hover:bg-state-base-hover cursor-pointer',
+                  'text-xs font-medium text-text-secondary',
+                  activeTab === tab.key && 'bg-state-base-hover-alt',
+                )}
+                key={tab.key}
+                onClick={() => setActiveTab(tab.key)}
+              >
+                {tab.name}
+              </div>
+            ))
+          }
+        </div>
+        <ViewTypeSelect viewType={activeView} onChange={setActiveView} />
+        {supportAddCustomTool && (
+          <div className='flex items-center'>
+            <div className='mr-1.5 w-px h-3.5  bg-divider-regular'></div>
+            <ActionButton
+              className='bg-components-button-primary-bg hover:bg-components-button-primary-bg text-components-button-primary-text hover:text-components-button-primary-text'
+              onClick={onShowAddCustomCollectionModal}
            >
-              {tab.name}
-            </div>
-          ))
-        }
+              <RiAddLine className='w-4 h-4' />
+            </ActionButton>
+          </div>
+        )}
+      </div>
+      <div
+        ref={wrapElemRef}
+        className='max-h-[464px] overflow-y-auto'
+        onScroll={(pluginRef.current as any)?.handleScroll}
+      >
+        <Tools
+          className={toolContentClassName}
+          showWorkflowEmpty={activeTab === ToolTypeEnum.Workflow}
+          tools={tools}
+          onSelect={onSelect}
+          viewType={activeView}
+          hasSearchText={!!searchText}
+          selectedTools={selectedTools}
+        />
+        {/* Plugins from marketplace */}
+        <PluginList
+          wrapElemRef={wrapElemRef}
+          list={notInstalledPlugins as any} ref={pluginRef}
+          searchText={searchText}
+          toolContentClassName={toolContentClassName}
+          tags={tags}
+        />
      </div>
-      <Tools
-        showWorkflowEmpty={activeTab === ToolTypeEnum.Workflow}
-        tools={tools}
-        onSelect={onSelect}
-      />
    </div>
  )
 }
--- a/web/app/components/workflow/block-selector/constants.tsx
+++ b/web/app/components/workflow/block-selector/constants.tsx
@@ -84,6 +84,11 @@ export const BLOCKS: Block[] = [
    type: BlockEnum.ListFilter,
    title: 'List Filter',
  },
+  {
+    classification: BlockClassificationEnum.Default,
+    type: BlockEnum.Agent,
+    title: 'Agent',
+  },
 ]

 export const BLOCK_CLASSIFICATIONS: string[] = [
--- a/web/app/components/workflow/block-selector/hooks.ts
+++ b/web/app/components/workflow/block-selector/hooks.ts
@@ -41,7 +41,7 @@ export const useToolTabs = () => {
    },
    {
      key: ToolTypeEnum.BuiltIn,
-      name: t('workflow.tabs.builtInTool'),
+      name: t('workflow.tabs.plugin'),
    },
    {
      key: ToolTypeEnum.Custom,
--- a/web/app/components/workflow/block-selector/index-bar.tsx
+++ b/web/app/components/workflow/block-selector/index-bar.tsx
@@ -1,8 +1,29 @@
 import { pinyin } from 'pinyin-pro'
 import type { FC, RefObject } from 'react'
+import type { ToolWithProvider } from '../types'
+import { CollectionType } from '../../tools/types'
+import classNames from '@/utils/classnames'

-export const groupItems = (items: Array<any>, getFirstChar: (item: string) => string) => {
-  const groups = items.reduce((acc, item) => {
+export const CUSTOM_GROUP_NAME = '@@@custom@@@'
+export const WORKFLOW_GROUP_NAME = '@@@workflow@@@'
+export const AGENT_GROUP_NAME = '@@@agent@@@'
+/*
+{
+  A: {
+    'google': [ // plugin organize name
+      ...tools
+    ],
+    'custom': [ // custom tools
+      ...tools
+    ],
+    'workflow': [ // workflow as tools
+      ...tools
+    ]
+  }
+}
+*/
+export const groupItems = (items: ToolWithProvider[], getFirstChar: (item: ToolWithProvider) => string) => {
+  const groups = items.reduce((acc: Record<string, Record<string, ToolWithProvider[]>>, item) => {
    const firstChar = getFirstChar(item)
    if (!firstChar || firstChar.length === 0)
      return acc
@@ -19,9 +40,23 @@ export const groupItems = (items: Array<any>, getFirstChar: (item: string) => st
      letter = '#'

    if (!acc[letter])
-      acc[letter] = []
+      acc[letter] = {}
+
+    let groupName: string = ''
+    if (item.type === CollectionType.builtIn)
+      groupName = item.author
+    else if (item.type === CollectionType.custom)
+      groupName = CUSTOM_GROUP_NAME
+    else if (item.type === CollectionType.workflow)
+      groupName = WORKFLOW_GROUP_NAME
+    else
+      groupName = AGENT_GROUP_NAME
+
+    if (!acc[letter][groupName])
+      acc[letter][groupName] = []
+
+    acc[letter][groupName].push(item)

-    acc[letter].push(item)
    return acc
  }, {})

@@ -38,16 +73,18 @@ export const groupItems = (items: Array<any>, getFirstChar: (item: string) => st
 type IndexBarProps = {
  letters: string[]
  itemRefs: RefObject<{ [key: string]: HTMLElement | null }>
+  className?: string
 }

-const IndexBar: FC<IndexBarProps> = ({ letters, itemRefs }) => {
+const IndexBar: FC<IndexBarProps> = ({ letters, itemRefs, className }) => {
  const handleIndexClick = (letter: string) => {
    const element = itemRefs.current?.[letter]
    if (element)
      element.scrollIntoView({ behavior: 'smooth' })
  }
  return (
-    <div className="index-bar fixed right-4 top-36 flex flex-col items-center text-xs font-medium text-text-quaternary">
+    <div className={classNames('index-bar absolute right-0 top-36 flex flex-col items-center w-6 justify-center text-xs font-medium text-text-quaternary', className)}>
+      <div className='absolute left-0 top-0 h-full w-px bg-[linear-gradient(270deg,rgba(255,255,255,0)_0%,rgba(16,24,40,0.08)_30%,rgba(16,24,40,0.08)_50%,rgba(16,24,40,0.08)_70.5%,rgba(255,255,255,0)_100%)]'></div>
      {letters.map(letter => (
        <div className="hover:text-text-secondary cursor-pointer" key={letter} onClick={() => handleIndexClick(letter)}>
          {letter}
--- a/web/app/components/workflow/block-selector/index.tsx
+++ b/web/app/components/workflow/block-selector/index.tsx
@@ -22,6 +22,8 @@ import {
  PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import Input from '@/app/components/base/input'
+import SearchBox from '@/app/components/plugins/marketplace/search-box'
+
 import {
  Plus02,
 } from '@/app/components/base/icons/src/vender/line/general'
@@ -61,6 +63,7 @@ const NodeSelector: FC<NodeSelectorProps> = ({
 }) => {
  const { t } = useTranslation()
  const [searchText, setSearchText] = useState('')
+  const [tags, setTags] = useState<string[]>([])
  const [localOpen, setLocalOpen] = useState(false)
  const open = openFromProps === undefined ? localOpen : openFromProps
  const handleOpenChange = useCallback((newOpen: boolean) => {
@@ -126,25 +129,37 @@ const NodeSelector: FC<NodeSelectorProps> = ({
        }
      </PortalToFollowElemTrigger>
      <PortalToFollowElemContent className='z-[1000]'>
-        <div className={
-          classNames(`rounded-lg border-[0.5px] backdrop-blur-[5px]
-          border-components-panel-border bg-components-panel-bg-blur shadow-lg`, popupClassName)}>
-          <div className='p-2 pb-1' onClick={e => e.stopPropagation()}>
-            <Input
-              showLeftIcon
-              showClearIcon
-              autoFocus
-              value={searchText}
-              placeholder={searchPlaceholder}
-              onChange={e => setSearchText(e.target.value)}
-              onClear={() => setSearchText('')}
-            />
+        <div className={`rounded-lg border-[0.5px] border-gray-200 bg-white shadow-lg ${popupClassName}`}>
+          <div className='px-2 pt-2' onClick={e => e.stopPropagation()}>
+            {activeTab === TabsEnum.Blocks && (
+              <Input
+                showLeftIcon
+                showClearIcon
+                autoFocus
+                value={searchText}
+                placeholder={searchPlaceholder}
+                onChange={e => setSearchText(e.target.value)}
+                onClear={() => setSearchText('')}
+              />
+            )}
+            {activeTab === TabsEnum.Tools && (
+              <SearchBox
+                search={searchText}
+                onSearchChange={setSearchText}
+                tags={tags}
+                onTagsChange={setTags}
+                size='small'
+                placeholder={t('plugin.searchTools')!}
+              />
+            )}
+
          </div>
          <Tabs
            activeTab={activeTab}
            onActiveTabChange={handleActiveTabChange}
            onSelect={handleSelect}
            searchText={searchText}
+            tags={tags}
            availableBlocksTypes={availableBlocksTypes}
            noBlocks={noBlocks}
          />
--- a/web/app/components/workflow/block-selector/market-place-plugin/action.tsx
+++ b/web/app/components/workflow/block-selector/market-place-plugin/action.tsx
@@ -0,0 +1,87 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { RiMoreFill } from '@remixicon/react'
+import ActionButton from '@/app/components/base/action-button'
+// import Button from '@/app/components/base/button'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import cn from '@/utils/classnames'
+import { MARKETPLACE_URL_PREFIX } from '@/config'
+import { useDownloadPlugin } from '@/service/use-plugins'
+import { downloadFile } from '@/utils/format'
+
+type Props = {
+  open: boolean
+  onOpenChange: (v: boolean) => void
+  author: string
+  name: string
+  version: string
+}
+
+const OperationDropdown: FC<Props> = ({
+  open,
+  onOpenChange,
+  author,
+  name,
+  version,
+}) => {
+  const { t } = useTranslation()
+  const openRef = useRef(open)
+  const setOpen = useCallback((v: boolean) => {
+    onOpenChange(v)
+    openRef.current = v
+  }, [onOpenChange])
+
+  const handleTrigger = useCallback(() => {
+    setOpen(!openRef.current)
+  }, [setOpen])
+
+  const [needDownload, setNeedDownload] = useState(false)
+  const { data: blob, isLoading } = useDownloadPlugin({
+    organization: author,
+    pluginName: name,
+    version,
+  }, needDownload)
+  const handleDownload = useCallback(() => {
+    if (isLoading) return
+    setNeedDownload(true)
+  }, [isLoading])
+
+  useEffect(() => {
+    if (blob) {
+      const fileName = `${author}-${name}_${version}.zip`
+      downloadFile({ data: blob, fileName })
+      setNeedDownload(false)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [blob])
+  return (
+    <PortalToFollowElem
+      open={open}
+      onOpenChange={setOpen}
+      placement='bottom-end'
+      offset={{
+        mainAxis: 0,
+        crossAxis: 0,
+      }}
+    >
+      <PortalToFollowElemTrigger onClick={handleTrigger}>
+        <ActionButton className={cn(open && 'bg-state-base-hover')}>
+          <RiMoreFill className='w-4 h-4 text-components-button-secondary-accent-text' />
+        </ActionButton>
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent className='z-[9999]'>
+        <div className='w-[112px] p-1 bg-components-panel-bg-blur rounded-xl border-[0.5px] border-components-panel-border shadow-lg'>
+          <div onClick={handleDownload} className='px-3 py-1.5 rounded-lg text-text-secondary system-md-regular cursor-pointer hover:bg-state-base-hover'>{t('common.operation.download')}</div>
+          <a href={`${MARKETPLACE_URL_PREFIX}/plugins/${author}/${name}`} target='_blank' className='block px-3 py-1.5 rounded-lg text-text-secondary system-md-regular cursor-pointer hover:bg-state-base-hover'>{t('common.operation.viewDetails')}</a>
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+export default React.memo(OperationDropdown)
--- a/web/app/components/workflow/block-selector/market-place-plugin/item.tsx
+++ b/web/app/components/workflow/block-selector/market-place-plugin/item.tsx
@@ -0,0 +1,77 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { useContext } from 'use-context-selector'
+import { useTranslation } from 'react-i18next'
+import Action from './action'
+import type { Plugin } from '@/app/components/plugins/types.ts'
+import InstallFromMarketplace from '@/app/components/plugins/install-plugin/install-from-marketplace'
+import I18n from '@/context/i18n'
+import cn from '@/utils/classnames'
+
+import { formatNumber } from '@/utils/format'
+import { useBoolean } from 'ahooks'
+
+enum ActionType {
+  install = 'install',
+  download = 'download',
+  // viewDetail = 'viewDetail', // wait for marketplace api
+}
+type Props = {
+  payload: Plugin
+  onAction: (type: ActionType) => void
+}
+
+const Item: FC<Props> = ({
+  payload,
+}) => {
+  const { t } = useTranslation()
+  const [open, setOpen] = React.useState(false)
+  const { locale } = useContext(I18n)
+  const getLocalizedText = (obj: Record<string, string> | undefined) =>
+    obj?.[locale] || obj?.['en-US'] || obj?.en_US || ''
+  const [isShowInstallModal, {
+    setTrue: showInstallModal,
+    setFalse: hideInstallModal,
+  }] = useBoolean(false)
+
+  return (
+    <div className='group/plugin flex rounded-lg py-1 pr-1 pl-3 hover:bg-state-base-hover'>
+      <div
+        className='shrink-0 relative w-6 h-6 border-[0.5px] border-components-panel-border-subtle rounded-md bg-center bg-no-repeat bg-contain'
+        style={{ backgroundImage: `url(${payload.icon})` }}
+      />
+      <div className='ml-2 w-0 grow flex'>
+        <div className='w-0 grow'>
+          <div className='h-4 leading-4 text-text-primary system-sm-medium truncate '>{getLocalizedText(payload.label)}</div>
+          <div className='h-5 leading-5 text-text-tertiary system-xs-regular truncate'>{getLocalizedText(payload.brief)}</div>
+          <div className='flex text-text-tertiary system-xs-regular space-x-1'>
+            <div>{payload.org}</div>
+            <div>·</div>
+            <div>{t('plugin.install', { num: formatNumber(payload.install_count || 0) })}</div>
+          </div>
+        </div>
+        {/* Action */}
+        <div className={cn(!open ? 'hidden' : 'flex', 'group-hover/plugin:flex  items-center space-x-1 h-4 text-components-button-secondary-accent-text system-xs-medium')}>
+          <div className='px-1.5 cursor-pointer' onClick={showInstallModal}>{t('plugin.installAction')}</div>
+          <Action
+            open={open}
+            onOpenChange={setOpen}
+            author={payload.org}
+            name={payload.name}
+            version={payload.latest_version}
+          />
+        </div>
+        {isShowInstallModal && (
+          <InstallFromMarketplace
+            uniqueIdentifier={payload.latest_package_identifier}
+            manifest={payload}
+            onSuccess={hideInstallModal}
+            onClose={hideInstallModal}
+          />
+        )}
+      </div>
+    </div>
+  )
+}
+export default React.memo(Item)
--- a/web/app/components/workflow/block-selector/market-place-plugin/list.tsx
+++ b/web/app/components/workflow/block-selector/market-place-plugin/list.tsx
@@ -0,0 +1,129 @@
+'use client'
+import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import useStickyScroll, { ScrollPosition } from '../use-sticky-scroll'
+import Item from './item'
+import type { Plugin } from '@/app/components/plugins/types.ts'
+import cn from '@/utils/classnames'
+import Link from 'next/link'
+import { marketplaceUrlPrefix } from '@/config'
+import { RiArrowRightUpLine, RiSearchLine } from '@remixicon/react'
+// import { RiArrowRightUpLine } from '@remixicon/react'
+
+type Props = {
+  wrapElemRef: React.RefObject<HTMLElement>
+  list: Plugin[]
+  searchText: string
+  tags: string[]
+  toolContentClassName?: string
+  disableMaxWidth?: boolean
+}
+
+const List = forwardRef<{ handleScroll: () => void }, Props>(({
+  wrapElemRef,
+  searchText,
+  tags,
+  list,
+  toolContentClassName,
+  disableMaxWidth = false,
+}, ref) => {
+  const { t } = useTranslation()
+  const hasFilter = !searchText
+  const hasRes = list.length > 0
+  const urlWithSearchText = `${marketplaceUrlPrefix}/?q=${searchText}&tags=${tags.join(',')}`
+  const nextToStickyELemRef = useRef<HTMLDivElement>(null)
+
+  const { handleScroll, scrollPosition } = useStickyScroll({
+    wrapElemRef,
+    nextToStickyELemRef,
+  })
+  const stickyClassName = useMemo(() => {
+    switch (scrollPosition) {
+      case ScrollPosition.aboveTheWrap:
+        return 'top-0 h-9 pt-3 pb-2 shadow-xs bg-components-panel-bg-blur cursor-pointer'
+      case ScrollPosition.showing:
+        return 'bottom-0 pt-3 pb-1'
+      case ScrollPosition.belowTheWrap:
+        return 'bottom-0 items-center rounded-b-xl border-t border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg rounded-b-lg cursor-pointer'
+    }
+  }, [scrollPosition])
+
+  useImperativeHandle(ref, () => ({
+    handleScroll,
+  }))
+
+  useEffect(() => {
+    handleScroll()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [list])
+
+  const handleHeadClick = () => {
+    if (scrollPosition === ScrollPosition.belowTheWrap) {
+      nextToStickyELemRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' })
+      return
+    }
+    window.open(urlWithSearchText, '_blank')
+  }
+
+  if (hasFilter) {
+    return (
+      <Link
+        className='sticky bottom-0 z-10 flex h-8 px-4 py-1 system-sm-medium items-center border-t border-[0.5px] border-components-panel-border bg-components-panel-bg-blur rounded-b-lg shadow-lg text-text-accent-light-mode-only cursor-pointer'
+        href={`${marketplaceUrlPrefix}/`}
+        target='_blank'
+      >
+        <span>{t('plugin.findMoreInMarketplace')}</span>
+        <RiArrowRightUpLine className='ml-0.5 w-3 h-3' />
+      </Link>
+    )
+  }
+
+  const maxWidthClassName = toolContentClassName || 'max-w-[300px]'
+
+  return (
+    <>
+      {hasRes && (
+        <div
+          className={cn('sticky z-10 flex justify-between h-8 px-4 py-1 text-text-primary system-sm-medium cursor-pointer', stickyClassName, !disableMaxWidth && maxWidthClassName)}
+          onClick={handleHeadClick}
+        >
+          <span>{t('plugin.fromMarketplace')}</span>
+          <Link
+            href={urlWithSearchText}
+            target='_blank'
+            className='flex items-center text-text-accent-light-mode-only'
+            onClick={e => e.stopPropagation()}
+          >
+            <span>{t('plugin.searchInMarketplace')}</span>
+            <RiArrowRightUpLine className='ml-0.5 w-3 h-3' />
+          </Link>
+        </div>
+      )}
+      <div className={cn('p-1', !disableMaxWidth && maxWidthClassName)} ref={nextToStickyELemRef}>
+        {list.map((item, index) => (
+          <Item
+            key={index}
+            payload={item}
+            onAction={() => { }}
+          />
+        ))}
+        <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}
+            target='_blank'
+            className='shrink-0 flex items-center h-4 system-sm-medium text-text-accent-light-mode-only'
+          >
+            <RiSearchLine className='mr-0.5 w-3 h-3' />
+            <span>{t('plugin.searchInMarketplace')}</span>
+          </Link>
+          <div className="w-[90px] h-[2px] bg-gradient-to-l from-[rgba(255,255,255,0.01)] to-[rgba(16,24,40,0.08)]"></div>
+        </div>
+      </div>
+    </>
+  )
+})
+
+List.displayName = 'List'
+
+export default List
--- a/web/app/components/workflow/block-selector/tabs.tsx
+++ b/web/app/components/workflow/block-selector/tabs.tsx
@@ -1,5 +1,6 @@
 import type { FC } from 'react'
 import { memo } from 'react'
+import { useAllBuiltInTools, useAllCustomTools, useAllWorkflowTools } from '@/service/use-tools'
 import type { BlockEnum } from '../types'
 import { useTabs } from './hooks'
 import type { ToolDefaultValue } from './types'
@@ -12,6 +13,7 @@ export type TabsProps = {
  activeTab: TabsEnum
  onActiveTabChange: (activeTab: TabsEnum) => void
  searchText: string
+  tags: string[]
  onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void
  availableBlocksTypes?: BlockEnum[]
  noBlocks?: boolean
@@ -19,12 +21,16 @@ export type TabsProps = {
 const Tabs: FC<TabsProps> = ({
  activeTab,
  onActiveTabChange,
+  tags,
  searchText,
  onSelect,
  availableBlocksTypes,
  noBlocks,
 }) => {
  const tabs = useTabs()
+  const { data: buildInTools } = useAllBuiltInTools()
+  const { data: customTools } = useAllCustomTools()
+  const { data: workflowTools } = useAllWorkflowTools()

  return (
    <div onClick={e => e.stopPropagation()}>
@@ -62,8 +68,13 @@ const Tabs: FC<TabsProps> = ({
      {
        activeTab === TabsEnum.Tools && (
          <AllTools
+            className='w-[315px]'
            searchText={searchText}
            onSelect={onSelect}
+            tags={tags}
+            buildInTools={buildInTools || []}
+            customTools={customTools || []}
+            workflowTools={workflowTools || []}
          />
        )
      }
--- a/web/app/components/workflow/block-selector/tool-picker.tsx
+++ b/web/app/components/workflow/block-selector/tool-picker.tsx
@@ -0,0 +1,176 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { useMemo, useState } from 'react'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import type {
+  OffsetOptions,
+  Placement,
+} from '@floating-ui/react'
+import AllTools from '@/app/components/workflow/block-selector/all-tools'
+import type { ToolDefaultValue, ToolValue } from './types'
+import type { BlockEnum } from '@/app/components/workflow/types'
+import SearchBox from '@/app/components/plugins/marketplace/search-box'
+import { useTranslation } from 'react-i18next'
+import { useBoolean } from 'ahooks'
+import EditCustomToolModal from '@/app/components/tools/edit-custom-collection-modal/modal'
+import {
+  createCustomCollection,
+} from '@/service/tools'
+import type { CustomCollectionBackend } from '@/app/components/tools/types'
+import Toast from '@/app/components/base/toast'
+import { useAllBuiltInTools, useAllCustomTools, useAllWorkflowTools, useInvalidateAllCustomTools } from '@/service/use-tools'
+import cn from '@/utils/classnames'
+
+type Props = {
+  panelClassName?: string
+  disabled: boolean
+  trigger: React.ReactNode
+  placement?: Placement
+  offset?: OffsetOptions
+  isShow: boolean
+  onShowChange: (isShow: boolean) => void
+  onSelect: (tool: ToolDefaultValue) => void
+  supportAddCustomTool?: boolean
+  scope?: string
+  selectedTools?: ToolValue[]
+}
+
+const ToolPicker: FC<Props> = ({
+  disabled,
+  trigger,
+  placement = 'right-start',
+  offset = 0,
+  isShow,
+  onShowChange,
+  onSelect,
+  supportAddCustomTool,
+  scope = 'all',
+  selectedTools,
+  panelClassName,
+}) => {
+  const { t } = useTranslation()
+  const [searchText, setSearchText] = useState('')
+  const [tags, setTags] = useState<string[]>([])
+
+  const { data: buildInTools } = useAllBuiltInTools()
+  const { data: customTools } = useAllCustomTools()
+  const invalidateCustomTools = useInvalidateAllCustomTools()
+  const { data: workflowTools } = useAllWorkflowTools()
+
+  const { builtinToolList, customToolList, workflowToolList } = useMemo(() => {
+    if (scope === 'plugins') {
+      return {
+        builtinToolList: buildInTools,
+        customToolList: [],
+        workflowToolList: [],
+      }
+    }
+    if (scope === 'custom') {
+      return {
+        builtinToolList: [],
+        customToolList: customTools,
+        workflowToolList: [],
+      }
+    }
+    if (scope === 'workflow') {
+      return {
+        builtinToolList: [],
+        customToolList: [],
+        workflowToolList: workflowTools,
+      }
+    }
+    return {
+      builtinToolList: buildInTools,
+      customToolList: customTools,
+      workflowToolList: workflowTools,
+    }
+  }, [scope, buildInTools, customTools, workflowTools])
+
+  const handleAddedCustomTool = invalidateCustomTools
+
+  const handleTriggerClick = () => {
+    if (disabled) return
+    onShowChange(true)
+  }
+
+  const handleSelect = (_type: BlockEnum, tool?: ToolDefaultValue) => {
+    onSelect(tool!)
+  }
+
+  const [isShowEditCollectionToolModal, {
+    setFalse: hideEditCustomCollectionModal,
+    setTrue: showEditCustomCollectionModal,
+  }] = useBoolean(false)
+
+  const doCreateCustomToolCollection = async (data: CustomCollectionBackend) => {
+    await createCustomCollection(data)
+    Toast.notify({
+      type: 'success',
+      message: t('common.api.actionSuccess'),
+    })
+    hideEditCustomCollectionModal()
+    handleAddedCustomTool()
+  }
+
+  if (isShowEditCollectionToolModal) {
+    return (
+      <EditCustomToolModal
+        positionLeft
+        payload={null}
+        onHide={hideEditCustomCollectionModal}
+        onAdd={doCreateCustomToolCollection}
+      />
+    )
+  }
+
+  return (
+    <PortalToFollowElem
+      placement={placement}
+      offset={offset}
+      open={isShow}
+      onOpenChange={onShowChange}
+    >
+      <PortalToFollowElemTrigger
+        onClick={handleTriggerClick}
+      >
+        {trigger}
+      </PortalToFollowElemTrigger>
+
+      <PortalToFollowElemContent className='z-[1000]'>
+        <div className={cn('relative w-[356px] min-h-20 rounded-xl backdrop-blur-sm bg-components-panel-bg-blur border-[0.5px] border-components-panel-border shadow-lg', panelClassName)}>
+          <div className='p-2 pb-1'>
+            <SearchBox
+              search={searchText}
+              onSearchChange={setSearchText}
+              tags={tags}
+              onTagsChange={setTags}
+              size='small'
+              placeholder={t('plugin.searchTools')!}
+            />
+          </div>
+          <AllTools
+            className='mt-1'
+            toolContentClassName='max-w-[360px]'
+            tags={tags}
+            searchText={searchText}
+            onSelect={handleSelect}
+            buildInTools={builtinToolList || []}
+            customTools={customToolList || []}
+            workflowTools={workflowToolList || []}
+            supportAddCustomTool={supportAddCustomTool}
+            onAddedCustomTool={handleAddedCustomTool}
+            onShowAddCustomCollectionModal={showEditCustomCollectionModal}
+            selectedTools={selectedTools}
+          />
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+
+export default React.memo(ToolPicker)
--- a/web/app/components/workflow/block-selector/tool/action-item.tsx
+++ b/web/app/components/workflow/block-selector/tool/action-item.tsx
@@ -0,0 +1,89 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import type { ToolWithProvider } from '../../types'
+import { BlockEnum } from '../../types'
+import type { ToolDefaultValue } from '../types'
+import Tooltip from '@/app/components/base/tooltip'
+import type { Tool } from '@/app/components/tools/types'
+import { useGetLanguage } from '@/context/i18n'
+import BlockIcon from '../../block-icon'
+import cn from '@/utils/classnames'
+import { useTranslation } from 'react-i18next'
+import { RiCheckLine } from '@remixicon/react'
+import Badge from '@/app/components/base/badge'
+
+type Props = {
+  provider: ToolWithProvider
+  payload: Tool
+  disabled?: boolean
+  onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void
+}
+
+const ToolItem: FC<Props> = ({
+  provider,
+  payload,
+  onSelect,
+  disabled,
+}) => {
+  const { t } = useTranslation()
+
+  const language = useGetLanguage()
+
+  return (
+    <Tooltip
+      key={payload.name}
+      position='right'
+      popupClassName='!p-0 !px-3 !py-2.5 !w-[200px] !leading-[18px] !text-xs !text-gray-700 !border-[0.5px] !border-black/5 !rounded-xl !shadow-lg'
+      popupContent={(
+        <div>
+          <BlockIcon
+            size='md'
+            className='mb-2'
+            type={BlockEnum.Tool}
+            toolIcon={provider.icon}
+          />
+          <div className='mb-1 text-sm leading-5 text-text-primary'>{payload.label[language]}</div>
+          <div className='text-xs text-text-secondary leading-[18px]'>{payload.description[language]}</div>
+        </div>
+      )}
+    >
+      <div
+        key={payload.name}
+        className='flex justify-between items-center pr-1 rounded-lg pl-[21px] hover:bg-state-base-hover cursor-pointer'
+        onClick={() => {
+          if (disabled) return
+          const params: Record<string, string> = {}
+          if (payload.parameters) {
+            payload.parameters.forEach((item) => {
+              params[item.name] = ''
+            })
+          }
+          onSelect(BlockEnum.Tool, {
+            provider_id: provider.id,
+            provider_type: provider.type,
+            provider_name: provider.name,
+            tool_name: payload.name,
+            tool_label: payload.label[language],
+            title: payload.label[language],
+            is_team_authorization: provider.is_team_authorization,
+            output_schema: payload.output_schema,
+            paramSchemas: payload.parameters,
+            params,
+          })
+        }}
+      >
+        <div className={cn('h-8 leading-8 border-l-2 border-divider-subtle pl-4 truncate text-text-secondary system-sm-medium', disabled && 'opacity-30')}>{payload.label[language]}</div>
+        {disabled && <Badge
+          className='flex items-center h-5 text-text-tertiary space-x-0.5'
+          uppercase
+        >
+          <RiCheckLine className='w-3 h-3 ' />
+          <div>{t('tools.addToolModal.added')}</div>
+        </Badge>
+        }
+      </div>
+    </Tooltip >
+  )
+}
+export default React.memo(ToolItem)
--- a/web/app/components/workflow/block-selector/tool/tool-list-flat-view/list.tsx
+++ b/web/app/components/workflow/block-selector/tool/tool-list-flat-view/list.tsx
@@ -0,0 +1,64 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import type { ToolWithProvider } from '../../../types'
+import type { BlockEnum } from '../../../types'
+import type { ToolDefaultValue, ToolValue } from '../../types'
+import Tool from '../tool'
+import { ViewType } from '../../view-type-select'
+import { useMemo } from 'react'
+
+type Props = {
+  payload: ToolWithProvider[]
+  isShowLetterIndex: boolean
+  hasSearchText: boolean
+  onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void
+  letters: string[]
+  toolRefs: any
+  selectedTools?: ToolValue[]
+}
+
+const ToolViewFlatView: FC<Props> = ({
+  letters,
+  payload,
+  isShowLetterIndex,
+  hasSearchText,
+  onSelect,
+  toolRefs,
+  selectedTools,
+}) => {
+  const firstLetterToolIds = useMemo(() => {
+    const res: Record<string, string> = {}
+    letters.forEach((letter) => {
+      const firstToolId = payload.find(tool => tool.letter === letter)?.id
+      if (firstToolId)
+        res[firstToolId] = letter
+    })
+    return res
+  }, [payload, letters])
+  return (
+    <div>
+      {payload.map(tool => (
+        <div
+          key={tool.id}
+          ref={(el) => {
+            const letter = firstLetterToolIds[tool.id]
+            if (letter)
+              toolRefs.current[letter] = el
+          }}
+        >
+          <Tool
+            payload={tool}
+            viewType={ViewType.flat}
+            isShowLetterIndex={isShowLetterIndex}
+            hasSearchText={hasSearchText}
+            onSelect={onSelect}
+            selectedTools={selectedTools}
+          />
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default React.memo(ToolViewFlatView)
--- a/web/app/components/workflow/block-selector/tool/tool-list-tree-view/item.tsx
+++ b/web/app/components/workflow/block-selector/tool/tool-list-tree-view/item.tsx
@@ -0,0 +1,47 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import type { ToolWithProvider } from '../../../types'
+import Tool from '../tool'
+import type { BlockEnum } from '../../../types'
+import { ViewType } from '../../view-type-select'
+import type { ToolDefaultValue, ToolValue } from '../../types'
+
+type Props = {
+  groupName: string
+  toolList: ToolWithProvider[]
+  hasSearchText: boolean
+  onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void
+  selectedTools?: ToolValue[]
+}
+
+const Item: FC<Props> = ({
+  groupName,
+  toolList,
+  hasSearchText,
+  onSelect,
+  selectedTools,
+}) => {
+  return (
+    <div>
+      <div className='flex items-center px-3 h-[22px] text-xs font-medium text-text-tertiary'>
+        {groupName}
+      </div>
+      <div>
+        {toolList.map((tool: ToolWithProvider) => (
+          <Tool
+            key={tool.id}
+            payload={tool}
+            viewType={ViewType.tree}
+            isShowLetterIndex={false}
+            hasSearchText={hasSearchText}
+            onSelect={onSelect}
+            selectedTools={selectedTools}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default React.memo(Item)
--- a/web/app/components/workflow/block-selector/tool/tool-list-tree-view/list.tsx
+++ b/web/app/components/workflow/block-selector/tool/tool-list-tree-view/list.tsx
@@ -0,0 +1,56 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback } from 'react'
+import type { ToolWithProvider } from '../../../types'
+import type { BlockEnum } from '../../../types'
+import type { ToolDefaultValue, ToolValue } from '../../types'
+import Item from './item'
+import { useTranslation } from 'react-i18next'
+import { AGENT_GROUP_NAME, CUSTOM_GROUP_NAME, WORKFLOW_GROUP_NAME } from '../../index-bar'
+
+type Props = {
+  payload: Record<string, ToolWithProvider[]>
+  hasSearchText: boolean
+  onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void
+  selectedTools?: ToolValue[]
+}
+
+const ToolListTreeView: FC<Props> = ({
+  payload,
+  hasSearchText,
+  onSelect,
+  selectedTools,
+}) => {
+  const { t } = useTranslation()
+  const getI18nGroupName = useCallback((name: string) => {
+    if (name === CUSTOM_GROUP_NAME)
+      return t('workflow.tabs.customTool')
+
+    if (name === WORKFLOW_GROUP_NAME)
+      return t('workflow.tabs.workflowTool')
+
+    if (name === AGENT_GROUP_NAME)
+      return t('workflow.tabs.agent')
+
+    return name
+  }, [t])
+
+  if (!payload) return null
+
+  return (
+    <div>
+      {Object.keys(payload).map(groupName => (
+        <Item
+          key={groupName}
+          groupName={getI18nGroupName(groupName)}
+          toolList={payload[groupName]}
+          hasSearchText={hasSearchText}
+          onSelect={onSelect}
+          selectedTools={selectedTools}
+        />
+      ))}
+    </div>
+  )
+}
+
+export default React.memo(ToolListTreeView)
--- a/web/app/components/workflow/block-selector/tool/tool.tsx
+++ b/web/app/components/workflow/block-selector/tool/tool.tsx
@@ -0,0 +1,134 @@
+'use client'
+import type { FC } from 'react'
+import React, { useEffect, useMemo } from 'react'
+import cn from '@/utils/classnames'
+import { RiArrowDownSLine, RiArrowRightSLine } from '@remixicon/react'
+import { useGetLanguage } from '@/context/i18n'
+import type { Tool as ToolType } from '../../../tools/types'
+import { CollectionType } from '../../../tools/types'
+import type { ToolWithProvider } from '../../types'
+import { BlockEnum } from '../../types'
+import type { ToolDefaultValue, ToolValue } from '../types'
+import { ViewType } from '../view-type-select'
+import ActonItem from './action-item'
+import BlockIcon from '../../block-icon'
+import { useTranslation } from 'react-i18next'
+
+type Props = {
+  className?: string
+  payload: ToolWithProvider
+  viewType: ViewType
+  isShowLetterIndex: boolean
+  hasSearchText: boolean
+  onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void
+  selectedTools?: ToolValue[]
+}
+
+const Tool: FC<Props> = ({
+  className,
+  payload,
+  viewType,
+  isShowLetterIndex,
+  hasSearchText,
+  onSelect,
+  selectedTools,
+}) => {
+  const { t } = useTranslation()
+  const language = useGetLanguage()
+  const isFlatView = viewType === ViewType.flat
+  const actions = payload.tools
+  const hasAction = true // Now always support actions
+  const [isFold, setFold] = React.useState<boolean>(true)
+  const getIsDisabled = (tool: ToolType) => {
+    if (!selectedTools || !selectedTools.length) return false
+    return selectedTools.some(selectedTool => selectedTool.provider_name === payload.name && selectedTool.tool_name === tool.name)
+  }
+  useEffect(() => {
+    if (hasSearchText && isFold) {
+      setFold(false)
+      return
+    }
+    if (!hasSearchText && !isFold)
+      setFold(true)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [hasSearchText])
+
+  const FoldIcon = isFold ? RiArrowRightSLine : RiArrowDownSLine
+
+  const groupName = useMemo(() => {
+    if (payload.type === CollectionType.builtIn)
+      return payload.author
+
+    if (payload.type === CollectionType.custom)
+      return t('workflow.tabs.customTool')
+
+    if (payload.type === CollectionType.workflow)
+      return t('workflow.tabs.workflowTool')
+
+    return ''
+  }, [payload.author, payload.type, t])
+
+  return (
+    <div
+      key={payload.id}
+      className={cn('mb-1 last-of-type:mb-0', isShowLetterIndex && 'mr-6')}
+    >
+      <div className={cn(className)}>
+        <div
+          className='flex items-center justify-between pl-3 pr-1 w-full rounded-lg hover:bg-state-base-hover cursor-pointer select-none'
+          onClick={() => {
+            if (hasAction)
+              setFold(!isFold)
+
+            // Now always support actions
+            // if (payload.parameters) {
+            //   payload.parameters.forEach((item) => {
+            //     params[item.name] = ''
+            //   })
+            // }
+            // onSelect(BlockEnum.Tool, {
+            //   provider_id: payload.id,
+            //   provider_type: payload.type,
+            //   provider_name: payload.name,
+            //   tool_name: payload.name,
+            //   tool_label: payload.label[language],
+            //   title: payload.label[language],
+            //   params: {},
+            // })
+          }}
+        >
+          <div className='flex grow items-center h-8'>
+            <BlockIcon
+              className='shrink-0'
+              type={BlockEnum.Tool}
+              toolIcon={payload.icon}
+            />
+            <div className='ml-2 text-sm text-text-primary flex-1 w-0 grow truncate'>{payload.label[language]}</div>
+          </div>
+
+          <div className='flex items-center'>
+            {isFlatView && (
+              <div className='text-text-tertiary system-xs-regular'>{groupName}</div>
+            )}
+            {hasAction && (
+              <FoldIcon className={cn('w-4 h-4 text-text-quaternary shrink-0', isFold && 'text-text-tertiary')} />
+            )}
+          </div>
+        </div>
+
+        {hasAction && !isFold && (
+          actions.map(action => (
+            <ActonItem
+              key={action.name}
+              provider={payload}
+              payload={action}
+              onSelect={onSelect}
+              disabled={getIsDisabled(action)}
+            />
+          ))
+        )}
+      </div>
+    </div>
+  )
+}
+export default React.memo(Tool)
--- a/web/app/components/workflow/block-selector/tools.tsx
+++ b/web/app/components/workflow/block-selector/tools.tsx
@@ -1,103 +1,93 @@
 import {
  memo,
-  useCallback,
+  useMemo,
  useRef,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import BlockIcon from '../block-icon'
-import { BlockEnum } from '../types'
-import type { ToolWithProvider } from '../types'
+import type { BlockEnum, ToolWithProvider } from '../types'
 import IndexBar, { groupItems } from './index-bar'
-import type { ToolDefaultValue } from './types'
-import Tooltip from '@/app/components/base/tooltip'
+import type { ToolDefaultValue, ToolValue } from './types'
+import { ViewType } from './view-type-select'
 import Empty from '@/app/components/tools/add-tool-modal/empty'
 import { useGetLanguage } from '@/context/i18n'
+import ToolListTreeView from './tool/tool-list-tree-view/list'
+import ToolListFlatView from './tool/tool-list-flat-view/list'
+import classNames from '@/utils/classnames'

 type ToolsProps = {
  showWorkflowEmpty: boolean
  onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void
  tools: ToolWithProvider[]
+  viewType: ViewType
+  hasSearchText: boolean
+  className?: string
+  indexBarClassName?: string
+  selectedTools?: ToolValue[]
 }
 const Blocks = ({
  showWorkflowEmpty,
  onSelect,
  tools,
+  viewType,
+  hasSearchText,
+  className,
+  indexBarClassName,
+  selectedTools,
 }: ToolsProps) => {
  const { t } = useTranslation()
  const language = useGetLanguage()
+  const isFlatView = viewType === ViewType.flat
+  const isShowLetterIndex = isFlatView && tools.length > 10
+
+  /*
+  treeViewToolsData:
+  {
+    A: {
+      'google': [ // plugin organize name
+        ...tools
+      ],
+      'custom': [ // custom tools
+        ...tools
+      ],
+      'workflow': [ // workflow as tools
+        ...tools
+      ]
+    }
+  }
+  */
+  const { letters, groups: withLetterAndGroupViewToolsData } = groupItems(tools, tool => (tool as any).label[language][0])
+  const treeViewToolsData = useMemo(() => {
+    const result: Record<string, ToolWithProvider[]> = {}
+    Object.keys(withLetterAndGroupViewToolsData).forEach((letter) => {
+      Object.keys(withLetterAndGroupViewToolsData[letter]).forEach((groupName) => {
+        if (!result[groupName])
+          result[groupName] = []
+        result[groupName].push(...withLetterAndGroupViewToolsData[letter][groupName])
+      })
+    })
+    return result
+  }, [withLetterAndGroupViewToolsData])
+
+  const listViewToolData = useMemo(() => {
+    const result: ToolWithProvider[] = []
+    letters.forEach((letter) => {
+      Object.keys(withLetterAndGroupViewToolsData[letter]).forEach((groupName) => {
+        result.push(...withLetterAndGroupViewToolsData[letter][groupName].map((item) => {
+          return {
+            ...item,
+            letter,
+          }
+        }))
+      })
+    })
+
+    return result
+  }, [withLetterAndGroupViewToolsData, letters])

-  const { letters, groups: groupedTools } = groupItems(tools, tool => tool.label[language][0])
  const toolRefs = useRef({})

-  const renderGroup = useCallback((toolWithProvider: ToolWithProvider) => {
-    const list = toolWithProvider.tools
-
-    return (
-      <div
-        key={toolWithProvider.id}
-        className='mb-1 last-of-type:mb-0'
-      >
-        <div className='flex items-start px-3 h-[22px] text-xs font-medium text-gray-500'>
-          {toolWithProvider.label[language]}
-        </div>
-        {
-          list.map(tool => (
-            <Tooltip
-              key={tool.name}
-              position='right'
-              popupClassName='w-[200px]'
-              popupContent={(
-                <div>
-                  <BlockIcon
-                    size='md'
-                    className='mb-2'
-                    type={BlockEnum.Tool}
-                    toolIcon={toolWithProvider.icon}
-                  />
-                  <div className='mb-1 system-md-medium text-text-primary'>{tool.label[language]}</div>
-                  <div className='system-xs-regular text-text-tertiary'>{tool.description[language]}</div>
-                </div>
-              )}
-            >
-              <div
-                className='flex items-center px-3 w-full h-8 rounded-lg hover:bg-state-base-hover cursor-pointer'
-                onClick={() => onSelect(BlockEnum.Tool, {
-                  provider_id: toolWithProvider.id,
-                  provider_type: toolWithProvider.type,
-                  provider_name: toolWithProvider.name,
-                  tool_name: tool.name,
-                  tool_label: tool.label[language],
-                  title: tool.label[language],
-                })}
-              >
-                <BlockIcon
-                  className='mr-2 shrink-0'
-                  type={BlockEnum.Tool}
-                  toolIcon={toolWithProvider.icon}
-                />
-                <div className='text-sm text-text-secondary flex-1 min-w-0 truncate'>{tool.label[language]}</div>
-              </div>
-            </Tooltip>
-          ))
-        }
-      </div>
-    )
-  }, [onSelect, language])
-
-  const renderLetterGroup = (letter) => {
-    const tools = groupedTools[letter]
-    return (
-      <div
-        key={letter}
-        ref={el => (toolRefs.current[letter] = el)}
-      >
-        {tools.map(renderGroup)}
-      </div>
-    )
-  }
-
  return (
-    <div className='p-1 max-w-[320px] max-h-[464px] overflow-y-auto'>
+    <div className={classNames('p-1 max-w-[320px]', className)}>
      {
        !tools.length && !showWorkflowEmpty && (
          <div className='flex items-center px-3 h-[22px] text-xs font-medium text-text-tertiary'>{t('workflow.tabs.noResult')}</div>
@@ -108,8 +98,28 @@ const Blocks = ({
          <Empty />
        </div>
      )}
-      {!!tools.length && letters.map(renderLetterGroup)}
-      {tools.length > 10 && <IndexBar letters={letters} itemRefs={toolRefs} />}
+      {!!tools.length && (
+        isFlatView ? (
+          <ToolListFlatView
+            toolRefs={toolRefs}
+            letters={letters}
+            payload={listViewToolData}
+            isShowLetterIndex={isShowLetterIndex}
+            hasSearchText={hasSearchText}
+            onSelect={onSelect}
+            selectedTools={selectedTools}
+          />
+        ) : (
+          <ToolListTreeView
+            payload={treeViewToolsData}
+            hasSearchText={hasSearchText}
+            onSelect={onSelect}
+            selectedTools={selectedTools}
+          />
+        )
+      )}
+
+      {isShowLetterIndex && <IndexBar letters={letters} itemRefs={toolRefs} className={indexBarClassName} />}
    </div>
  )
 }
--- a/web/app/components/workflow/block-selector/types.ts
+++ b/web/app/components/workflow/block-selector/types.ts
@@ -25,4 +25,18 @@ export type ToolDefaultValue = {
  tool_name: string
  tool_label: string
  title: string
+  is_team_authorization: boolean
+  params: Record<string, any>
+  paramSchemas: Record<string, any>[]
+  output_schema: Record<string, any>
+}
+
+export type ToolValue = {
+  provider_name: string
+  tool_name: string
+  tool_label: string
+  settings?: Record<string, any>
+  parameters?: Record<string, any>
+  enabled?: boolean
+  extra?: Record<string, any>
 }
--- a/web/app/components/workflow/block-selector/use-sticky-scroll.ts
+++ b/web/app/components/workflow/block-selector/use-sticky-scroll.ts
@@ -0,0 +1,45 @@
+import React from 'react'
+import { useThrottleFn } from 'ahooks'
+
+export enum ScrollPosition {
+  belowTheWrap = 'belowTheWrap',
+  showing = 'showing',
+  aboveTheWrap = 'aboveTheWrap',
+}
+
+type Params = {
+  wrapElemRef: React.RefObject<HTMLElement>
+  nextToStickyELemRef: React.RefObject<HTMLElement>
+}
+const useStickyScroll = ({
+  wrapElemRef,
+  nextToStickyELemRef,
+}: Params) => {
+  const [scrollPosition, setScrollPosition] = React.useState<ScrollPosition>(ScrollPosition.belowTheWrap)
+  const { run: handleScroll } = useThrottleFn(() => {
+    const wrapDom = wrapElemRef.current
+    const stickyDOM = nextToStickyELemRef.current
+    if (!wrapDom || !stickyDOM)
+      return
+    const { height: wrapHeight, top: wrapTop } = wrapDom.getBoundingClientRect()
+    const { top: nextToStickyTop } = stickyDOM.getBoundingClientRect()
+    let scrollPositionNew = ScrollPosition.belowTheWrap
+
+    if (nextToStickyTop - wrapTop >= wrapHeight)
+      scrollPositionNew = ScrollPosition.belowTheWrap
+    else if (nextToStickyTop <= wrapTop)
+      scrollPositionNew = ScrollPosition.aboveTheWrap
+    else
+      scrollPositionNew = ScrollPosition.showing
+
+    if (scrollPosition !== scrollPositionNew)
+      setScrollPosition(scrollPositionNew)
+  }, { wait: 100 })
+
+  return {
+    handleScroll,
+    scrollPosition,
+  }
+}
+
+export default useStickyScroll
--- a/web/app/components/workflow/block-selector/view-type-select.tsx
+++ b/web/app/components/workflow/block-selector/view-type-select.tsx
@@ -0,0 +1,58 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback } from 'react'
+import { RiNodeTree, RiSortAlphabetAsc } from '@remixicon/react'
+import cn from '@/utils/classnames'
+
+export enum ViewType {
+  flat = 'flat',
+  tree = 'tree',
+}
+
+type Props = {
+  viewType: ViewType
+  onChange: (viewType: ViewType) => void
+}
+
+const ViewTypeSelect: FC<Props> = ({
+  viewType,
+  onChange,
+}) => {
+  const handleChange = useCallback((nextViewType: ViewType) => {
+    return () => {
+      if (nextViewType === viewType)
+        return
+      onChange(nextViewType)
+    }
+  }, [viewType, onChange])
+
+  return (
+    <div className='flex items-center rounded-lg bg-components-segmented-control-bg-normal p-px'>
+      <div
+        className={
+          cn('p-[3px] rounded-lg',
+            viewType === ViewType.flat
+              ? 'bg-components-segmented-control-item-active-bg shadow-xs text-text-accent-light-mode-only'
+              : 'text-text-tertiary cursor-pointer',
+          )
+        }
+        onClick={handleChange(ViewType.flat)}
+      >
+        <RiSortAlphabetAsc className='w-4 h-4' />
+      </div>
+      <div
+        className={
+          cn('p-[3px] rounded-lg',
+            viewType === ViewType.tree
+              ? 'bg-components-segmented-control-item-active-bg shadow-xs text-text-accent-light-mode-only'
+              : 'text-text-tertiary cursor-pointer',
+          )
+        }
+        onClick={handleChange(ViewType.tree)}
+      >
+        <RiNodeTree className='w-4 h-4 ' />
+      </div>
+    </div>
+  )
+}
+export default React.memo(ViewTypeSelect)