dify

dify/web/app/components/workflow/block-selector/all-start-blocks.tsx

@@ -0,0 +1,223 @@
+'use client'
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import type {
+  RefObject,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import type { BlockEnum, OnSelectBlock } from '../types'
+import type { TriggerDefaultValue, TriggerWithProvider } from './types'
+import StartBlocks from './start-blocks'
+import TriggerPluginList from './trigger-plugin/list'
+import { ENTRY_NODE_TYPES } from './constants'
+import cn from '@/utils/classnames'
+import Link from 'next/link'
+import { RiArrowRightUpLine } from '@remixicon/react'
+import { getMarketplaceUrl } from '@/utils/var'
+import Button from '@/app/components/base/button'
+import { SearchMenu } from '@/app/components/base/icons/src/vender/line/general'
+import { BlockEnum as BlockEnumValue } from '../types'
+import FeaturedTriggers from './featured-triggers'
+import Divider from '@/app/components/base/divider'
+import { useGlobalPublicStore } from '@/context/global-public-context'
+import { useAllTriggerPlugins, useInvalidateAllTriggerPlugins } from '@/service/use-triggers'
+import { useFeaturedTriggersRecommendations } from '@/service/use-plugins'
+import { PluginCategoryEnum } from '../../plugins/types'
+import { useMarketplacePlugins } from '../../plugins/marketplace/hooks'
+import PluginList, { type ListRef } from './market-place-plugin/list'
+
+const marketplaceFooterClassName = 'system-sm-medium z-10 flex h-8 flex-none cursor-pointer items-center rounded-b-lg border-[0.5px] border-t border-components-panel-border bg-components-panel-bg-blur px-4 py-1 text-text-accent-light-mode-only shadow-lg'
+
+type AllStartBlocksProps = {
+  className?: string
+  searchText: string
+  onSelect: (type: BlockEnum, trigger?: TriggerDefaultValue) => void
+  availableBlocksTypes?: BlockEnum[]
+  tags?: string[]
+  allowUserInputSelection?: boolean // Allow user input option even when trigger node already exists (e.g. when no Start node yet or changing node type).
+}
+
+const AllStartBlocks = ({
+  className,
+  searchText,
+  onSelect,
+  availableBlocksTypes,
+  tags = [],
+  allowUserInputSelection = false,
+}: AllStartBlocksProps) => {
+  const { t } = useTranslation()
+  const [hasStartBlocksContent, setHasStartBlocksContent] = useState(false)
+  const [hasPluginContent, setHasPluginContent] = useState(false)
+  const { enable_marketplace } = useGlobalPublicStore(s => s.systemFeatures)
+  const pluginRef = useRef<ListRef>(null)
+  const wrapElemRef = useRef<HTMLDivElement>(null)
+
+  const entryNodeTypes = availableBlocksTypes?.length
+    ? availableBlocksTypes
+    : ENTRY_NODE_TYPES
+  const enableTriggerPlugin = entryNodeTypes.includes(BlockEnumValue.TriggerPlugin)
+  const { data: triggerProviders = [] } = useAllTriggerPlugins(enableTriggerPlugin)
+  const providerMap = useMemo(() => {
+    const map = new Map<string, TriggerWithProvider>()
+    triggerProviders.forEach((provider) => {
+      const keys = [
+        provider.plugin_id,
+        provider.plugin_unique_identifier,
+        provider.id,
+      ].filter(Boolean) as string[]
+      keys.forEach((key) => {
+        if (!map.has(key))
+          map.set(key, provider)
+      })
+    })
+    return map
+  }, [triggerProviders])
+  const invalidateTriggers = useInvalidateAllTriggerPlugins()
+  const trimmedSearchText = searchText.trim()
+  const hasSearchText = trimmedSearchText.length > 0
+  const hasFilter = hasSearchText || tags.length > 0
+  const {
+    plugins: featuredPlugins = [],
+    isLoading: featuredLoading,
+  } = useFeaturedTriggersRecommendations(enableTriggerPlugin && enable_marketplace && !hasFilter)
+  const {
+    queryPluginsWithDebounced: fetchPlugins,
+    plugins: marketplacePlugins = [],
+  } = useMarketplacePlugins()
+
+  const shouldShowFeatured = enableTriggerPlugin
+    && enable_marketplace
+    && !hasFilter
+  const shouldShowTriggerListTitle = hasStartBlocksContent || hasPluginContent
+  const shouldShowMarketplaceFooter = enable_marketplace && !hasFilter
+
+  const handleStartBlocksContentChange = useCallback((hasContent: boolean) => {
+    setHasStartBlocksContent(hasContent)
+  }, [])
+
+  const handlePluginContentChange = useCallback((hasContent: boolean) => {
+    setHasPluginContent(hasContent)
+  }, [])
+
+  const hasMarketplaceContent = enableTriggerPlugin && enable_marketplace && marketplacePlugins.length > 0
+  const hasAnyContent = hasStartBlocksContent || hasPluginContent || shouldShowFeatured || hasMarketplaceContent
+  const shouldShowEmptyState = hasFilter && !hasAnyContent
+
+  useEffect(() => {
+    if (!enableTriggerPlugin && hasPluginContent)
+      setHasPluginContent(false)
+  }, [enableTriggerPlugin, hasPluginContent])
+
+  useEffect(() => {
+    if (!enableTriggerPlugin || !enable_marketplace) return
+    if (hasFilter) {
+      fetchPlugins({
+        query: searchText,
+        tags,
+        category: PluginCategoryEnum.trigger,
+      })
+    }
+  }, [enableTriggerPlugin, enable_marketplace, hasFilter, fetchPlugins, searchText, tags])
+
+  return (
+    <div className={cn('min-w-[400px] max-w-[500px]', className)}>
+      <div className='flex max-h-[640px] flex-col'>
+        <div
+          ref={wrapElemRef}
+          className='flex-1 overflow-y-auto'
+          onScroll={() => pluginRef.current?.handleScroll()}
+        >
+          <div className={cn(shouldShowEmptyState && 'hidden')}>
+            {shouldShowFeatured && (
+              <>
+                <FeaturedTriggers
+                  plugins={featuredPlugins}
+                  providerMap={providerMap}
+                  onSelect={onSelect}
+                  isLoading={featuredLoading}
+                  onInstallSuccess={async () => {
+                    invalidateTriggers()
+                  }}
+                />
+                <div className='px-3'>
+                  <Divider className='!h-px' />
+                </div>
+              </>
+            )}
+            {shouldShowTriggerListTitle && (
+              <div className='px-3 pb-1 pt-2'>
+                <span className='system-xs-medium text-text-primary'>{t('workflow.tabs.allTriggers')}</span>
+              </div>
+            )}
+            <StartBlocks
+              searchText={trimmedSearchText}
+              onSelect={onSelect as OnSelectBlock}
+              availableBlocksTypes={entryNodeTypes as unknown as BlockEnum[]}
+              hideUserInput={!allowUserInputSelection}
+              onContentStateChange={handleStartBlocksContentChange}
+            />
+
+            {enableTriggerPlugin && (
+              <TriggerPluginList
+                onSelect={onSelect}
+                searchText={trimmedSearchText}
+                onContentStateChange={handlePluginContentChange}
+                tags={tags}
+              />
+            )}
+            {enableTriggerPlugin && enable_marketplace && (
+              <PluginList
+                ref={pluginRef}
+                wrapElemRef={wrapElemRef as RefObject<HTMLElement>}
+                list={marketplacePlugins}
+                searchText={trimmedSearchText}
+                tags={tags}
+                hideFindMoreFooter
+              />
+            )}
+          </div>
+
+          {shouldShowEmptyState && (
+            <div className='flex h-full flex-col items-center justify-center gap-3 py-12 text-center'>
+              <SearchMenu className='h-8 w-8 text-text-quaternary' />
+              <div className='text-sm font-medium text-text-secondary'>
+                {t('workflow.tabs.noPluginsFound')}
+              </div>
+              <Link
+                href='https://github.com/langgenius/dify-plugins/issues/new?template=plugin_request.yaml'
+                target='_blank'
+              >
+                <Button
+                  size='small'
+                  variant='secondary-accent'
+                  className='h-6 cursor-pointer px-3 text-xs'
+                >
+                  {t('workflow.tabs.requestToCommunity')}
+                </Button>
+              </Link>
+            </div>
+          )}
+        </div>
+
+        {shouldShowMarketplaceFooter && !shouldShowEmptyState && (
+          // Footer - Same as Tools tab marketplace footer
+          <Link
+            className={marketplaceFooterClassName}
+            href={getMarketplaceUrl('')}
+            target='_blank'
+          >
+            <span>{t('plugin.findMoreInMarketplace')}</span>
+            <RiArrowRightUpLine className='ml-0.5 h-3 w-3' />
+          </Link>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default AllStartBlocks

dify/web/app/components/workflow/block-selector/all-tools.tsx

@@ -0,0 +1,330 @@
+import type {
+  Dispatch,
+  RefObject,
+  SetStateAction,
+} from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import type {
+  BlockEnum,
+  ToolWithProvider,
+} from '../types'
+import type { ToolDefaultValue, 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 Button from '@/app/components/base/button'
+import { SearchMenu } from '@/app/components/base/icons/src/vender/line/general'
+import type { ListRef } from '@/app/components/workflow/block-selector/market-place-plugin/list'
+import PluginList, { type ListProps } from '@/app/components/workflow/block-selector/market-place-plugin/list'
+import type { Plugin } from '../../plugins/types'
+import { PluginCategoryEnum } from '../../plugins/types'
+import { useMarketplacePlugins } from '../../plugins/marketplace/hooks'
+import { useGlobalPublicStore } from '@/context/global-public-context'
+import RAGToolRecommendations from './rag-tool-recommendations'
+import FeaturedTools from './featured-tools'
+import Link from 'next/link'
+import Divider from '@/app/components/base/divider'
+import { RiArrowRightUpLine } from '@remixicon/react'
+import { getMarketplaceUrl } from '@/utils/var'
+import { useGetLanguage } from '@/context/i18n'
+import type { OnSelectBlock } from '@/app/components/workflow/types'
+
+const marketplaceFooterClassName = 'system-sm-medium z-10 flex h-8 flex-none cursor-pointer items-center rounded-b-lg border-[0.5px] border-t border-components-panel-border bg-components-panel-bg-blur px-4 py-1 text-text-accent-light-mode-only shadow-lg'
+
+type AllToolsProps = {
+  className?: string
+  toolContentClassName?: string
+  searchText: string
+  tags: ListProps['tags']
+  buildInTools: ToolWithProvider[]
+  customTools: ToolWithProvider[]
+  workflowTools: ToolWithProvider[]
+  mcpTools: ToolWithProvider[]
+  onSelect: (type: BlockEnum, tool: ToolDefaultValue) => void
+  canNotSelectMultiple?: boolean
+  onSelectMultiple?: (type: BlockEnum, tools: ToolDefaultValue[]) => void
+  selectedTools?: ToolValue[]
+  canChooseMCPTool?: boolean
+  onTagsChange?: Dispatch<SetStateAction<string[]>>
+  isInRAGPipeline?: boolean
+  featuredPlugins?: Plugin[]
+  featuredLoading?: boolean
+  showFeatured?: boolean
+  onFeaturedInstallSuccess?: () => Promise<void> | void
+}
+
+const DEFAULT_TAGS: AllToolsProps['tags'] = []
+
+const AllTools = ({
+  className,
+  toolContentClassName,
+  searchText,
+  tags = DEFAULT_TAGS,
+  onSelect,
+  canNotSelectMultiple,
+  onSelectMultiple,
+  buildInTools,
+  workflowTools,
+  customTools,
+  mcpTools = [],
+  selectedTools,
+  canChooseMCPTool,
+  onTagsChange,
+  isInRAGPipeline = false,
+  featuredPlugins = [],
+  featuredLoading = false,
+  showFeatured = false,
+  onFeaturedInstallSuccess,
+}: AllToolsProps) => {
+  const { t } = useTranslation()
+  const language = useGetLanguage()
+  const tabs = useToolTabs()
+  const [activeTab, setActiveTab] = useState(ToolTypeEnum.All)
+  const [activeView, setActiveView] = useState<ViewType>(ViewType.flat)
+  const trimmedSearchText = searchText.trim()
+  const hasSearchText = trimmedSearchText.length > 0
+  const hasTags = tags.length > 0
+  const hasFilter = hasSearchText || hasTags
+  const isMatchingKeywords = (text: string, keywords: string) => {
+    return text.toLowerCase().includes(keywords.toLowerCase())
+  }
+  const allProviders = useMemo(() => [...buildInTools, ...customTools, ...workflowTools, ...mcpTools], [buildInTools, customTools, workflowTools, mcpTools])
+  const providerMap = useMemo(() => {
+    const map = new Map<string, ToolWithProvider>()
+    allProviders.forEach((provider) => {
+      const key = provider.plugin_id || provider.id
+      if (key)
+        map.set(key, provider)
+    })
+    return map
+  }, [allProviders])
+  const tools = useMemo(() => {
+    let mergedTools: ToolWithProvider[] = []
+    if (activeTab === ToolTypeEnum.All)
+      mergedTools = [...buildInTools, ...customTools, ...workflowTools, ...mcpTools]
+    if (activeTab === ToolTypeEnum.BuiltIn)
+      mergedTools = buildInTools
+    if (activeTab === ToolTypeEnum.Custom)
+      mergedTools = customTools
+    if (activeTab === ToolTypeEnum.Workflow)
+      mergedTools = workflowTools
+    if (activeTab === ToolTypeEnum.MCP)
+      mergedTools = mcpTools
+
+    const normalizedSearch = trimmedSearchText.toLowerCase()
+    const getLocalizedText = (text?: Record<string, string> | null) => {
+      if (!text)
+        return ''
+
+      if (text[language])
+        return text[language]
+
+      if (text['en-US'])
+        return text['en-US']
+
+      const firstValue = Object.values(text).find(Boolean)
+      return firstValue || ''
+    }
+
+    if (!hasFilter || !normalizedSearch)
+      return mergedTools.filter(toolWithProvider => toolWithProvider.tools.length > 0)
+
+    return mergedTools.reduce<ToolWithProvider[]>((acc, toolWithProvider) => {
+      const providerLabel = getLocalizedText(toolWithProvider.label)
+      const providerMatches = [
+        toolWithProvider.name,
+        providerLabel,
+      ].some(text => isMatchingKeywords(text || '', normalizedSearch))
+
+      if (providerMatches) {
+        if (toolWithProvider.tools.length > 0)
+          acc.push(toolWithProvider)
+        return acc
+      }
+
+      const matchedTools = toolWithProvider.tools.filter((tool) => {
+        const toolLabel = getLocalizedText(tool.label)
+        return [
+          tool.name,
+          toolLabel,
+        ].some(text => isMatchingKeywords(text || '', normalizedSearch))
+      })
+
+      if (matchedTools.length > 0) {
+        acc.push({
+          ...toolWithProvider,
+          tools: matchedTools,
+        })
+      }
+
+      return acc
+    }, [])
+  }, [activeTab, buildInTools, customTools, workflowTools, mcpTools, trimmedSearchText, hasFilter, language])
+
+  const {
+    queryPluginsWithDebounced: fetchPlugins,
+    plugins: notInstalledPlugins = [],
+  } = useMarketplacePlugins()
+
+  const { enable_marketplace } = useGlobalPublicStore(s => s.systemFeatures)
+
+  useEffect(() => {
+    if (!enable_marketplace) return
+    if (hasFilter) {
+      fetchPlugins({
+        query: searchText,
+        tags,
+        category: PluginCategoryEnum.tool,
+      })
+    }
+  }, [searchText, tags, enable_marketplace, hasFilter, fetchPlugins])
+
+  const pluginRef = useRef<ListRef>(null)
+  const wrapElemRef = useRef<HTMLDivElement>(null)
+  const isSupportGroupView = [ToolTypeEnum.All, ToolTypeEnum.BuiltIn].includes(activeTab)
+
+  const isShowRAGRecommendations = isInRAGPipeline && activeTab === ToolTypeEnum.All && !hasFilter
+  const hasToolsListContent = tools.length > 0 || isShowRAGRecommendations
+  const hasPluginContent = enable_marketplace && notInstalledPlugins.length > 0
+  const shouldShowEmptyState = hasFilter && !hasToolsListContent && !hasPluginContent
+  const shouldShowFeatured = showFeatured
+    && enable_marketplace
+    && !isInRAGPipeline
+    && activeTab === ToolTypeEnum.All
+    && !hasFilter
+  const shouldShowMarketplaceFooter = enable_marketplace && !hasFilter
+
+  const handleRAGSelect = useCallback<OnSelectBlock>((type, pluginDefaultValue) => {
+    if (!pluginDefaultValue)
+      return
+    onSelect(type, pluginDefaultValue as ToolDefaultValue)
+  }, [onSelect])
+
+  return (
+    <div className={cn('min-w-[400px] max-w-[500px]', className)}>
+      <div className='flex items-center justify-between border-b border-divider-subtle px-3'>
+        <div className='flex h-8 items-center space-x-1'>
+          {
+            tabs.map(tab => (
+              <div
+                className={cn(
+                  'flex h-6 cursor-pointer items-center rounded-md px-2 hover:bg-state-base-hover',
+                  '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>
+        {isSupportGroupView && (
+          <ViewTypeSelect viewType={activeView} onChange={setActiveView} />
+        )}
+      </div>
+      <div className='flex max-h-[464px] flex-col'>
+        <div
+          ref={wrapElemRef}
+          className='flex-1 overflow-y-auto'
+          onScroll={() => pluginRef.current?.handleScroll()}
+        >
+          <div className={cn(shouldShowEmptyState && 'hidden')}>
+            {isShowRAGRecommendations && onTagsChange && (
+              <RAGToolRecommendations
+                viewType={isSupportGroupView ? activeView : ViewType.flat}
+                onSelect={handleRAGSelect}
+                onTagsChange={onTagsChange}
+              />
+            )}
+            {shouldShowFeatured && (
+              <>
+                <FeaturedTools
+                  plugins={featuredPlugins}
+                  providerMap={providerMap}
+                  onSelect={onSelect}
+                  selectedTools={selectedTools}
+                  canChooseMCPTool={canChooseMCPTool}
+                  isLoading={featuredLoading}
+                  onInstallSuccess={async () => {
+                    await onFeaturedInstallSuccess?.()
+                  }}
+                />
+                <div className='px-3'>
+                  <Divider className='!h-px' />
+                </div>
+              </>
+            )}
+            {hasToolsListContent && (
+              <>
+                <div className='px-3 pb-1 pt-2'>
+                  <span className='system-xs-medium text-text-primary'>{t('tools.allTools')}</span>
+                </div>
+                <Tools
+                  className={toolContentClassName}
+                  tools={tools}
+                  onSelect={onSelect}
+                  canNotSelectMultiple={canNotSelectMultiple}
+                  onSelectMultiple={onSelectMultiple}
+                  toolType={activeTab}
+                  viewType={isSupportGroupView ? activeView : ViewType.flat}
+                  hasSearchText={hasSearchText}
+                  selectedTools={selectedTools}
+                  canChooseMCPTool={canChooseMCPTool}
+                />
+              </>
+            )}
+            {enable_marketplace && (
+              <PluginList
+                ref={pluginRef}
+                wrapElemRef={wrapElemRef as RefObject<HTMLElement>}
+                list={notInstalledPlugins}
+                searchText={searchText}
+                toolContentClassName={toolContentClassName}
+                tags={tags}
+                hideFindMoreFooter
+              />
+            )}
+          </div>
+
+          {shouldShowEmptyState && (
+            <div className='flex h-full flex-col items-center justify-center gap-3 py-12 text-center'>
+              <SearchMenu className='h-8 w-8 text-text-quaternary' />
+              <div className='text-sm font-medium text-text-secondary'>
+                {t('workflow.tabs.noPluginsFound')}
+              </div>
+              <Link
+                href='https://github.com/langgenius/dify-plugins/issues/new?template=plugin_request.yaml'
+                target='_blank'
+              >
+                <Button
+                  size='small'
+                  variant='secondary-accent'
+                  className='h-6 cursor-pointer px-3 text-xs'
+                >
+                  {t('workflow.tabs.requestToCommunity')}
+                </Button>
+              </Link>
+            </div>
+          )}
+        </div>
+        {shouldShowMarketplaceFooter && (
+          <Link
+            className={marketplaceFooterClassName}
+            href={getMarketplaceUrl('')}
+            target='_blank'
+          >
+            <span>{t('plugin.findMoreInMarketplace')}</span>
+            <RiArrowRightUpLine className='ml-0.5 h-3 w-3' />
+          </Link>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default AllTools

dify/web/app/components/workflow/block-selector/blocks.tsx

@@ -0,0 +1,150 @@
+import {
+  memo,
+  useCallback,
+  useMemo,
+} from 'react'
+import { useStoreApi } from 'reactflow'
+import { useTranslation } from 'react-i18next'
+import { groupBy } from 'lodash-es'
+import BlockIcon from '../block-icon'
+import { BlockEnum } from '../types'
+import type { NodeDefault } from '../types'
+import { BLOCK_CLASSIFICATIONS } from './constants'
+import { useBlocks } from './hooks'
+import Tooltip from '@/app/components/base/tooltip'
+import Badge from '@/app/components/base/badge'
+
+type BlocksProps = {
+  searchText: string
+  onSelect: (type: BlockEnum) => void
+  availableBlocksTypes?: BlockEnum[]
+  blocks?: NodeDefault[]
+}
+const Blocks = ({
+  searchText,
+  onSelect,
+  availableBlocksTypes = [],
+  blocks: blocksFromProps,
+}: BlocksProps) => {
+  const { t } = useTranslation()
+  const store = useStoreApi()
+  const blocksFromHooks = useBlocks()
+
+  // Use external blocks if provided, otherwise fallback to hook-based blocks
+  const blocks = blocksFromProps || blocksFromHooks.map(block => ({
+    metaData: {
+      classification: block.classification,
+      sort: 0, // Default sort order
+      type: block.type,
+      title: block.title,
+      author: 'Dify',
+      description: block.description,
+    },
+    defaultValue: {},
+    checkValid: () => ({ isValid: true }),
+  }) as NodeDefault)
+
+  const groups = useMemo(() => {
+    return BLOCK_CLASSIFICATIONS.reduce((acc, classification) => {
+      const grouped = groupBy(blocks, 'metaData.classification')
+      const list = (grouped[classification] || []).filter((block) => {
+        // Filter out trigger types from Blocks tab
+        if (block.metaData.type === BlockEnum.TriggerWebhook
+            || block.metaData.type === BlockEnum.TriggerSchedule
+            || block.metaData.type === BlockEnum.TriggerPlugin)
+          return false
+
+        return block.metaData.title.toLowerCase().includes(searchText.toLowerCase()) && availableBlocksTypes.includes(block.metaData.type)
+      })
+
+      return {
+        ...acc,
+        [classification]: list,
+      }
+    }, {} as Record<string, typeof blocks>)
+  }, [blocks, searchText, availableBlocksTypes])
+  const isEmpty = Object.values(groups).every(list => !list.length)
+
+  const renderGroup = useCallback((classification: string) => {
+    const list = groups[classification].sort((a, b) => (a.metaData.sort || 0) - (b.metaData.sort || 0))
+    const { getNodes } = store.getState()
+    const nodes = getNodes()
+    const hasKnowledgeBaseNode = nodes.some(node => node.data.type === BlockEnum.KnowledgeBase)
+    const filteredList = list.filter((block) => {
+      if (hasKnowledgeBaseNode)
+        return block.metaData.type !== BlockEnum.KnowledgeBase
+      return true
+    })
+
+    return (
+      <div
+        key={classification}
+        className='mb-1 last-of-type:mb-0'
+      >
+        {
+          classification !== '-' && !!filteredList.length && (
+            <div className='flex h-[22px] items-start px-3 text-xs font-medium text-text-tertiary'>
+              {t(`workflow.tabs.${classification}`)}
+            </div>
+          )
+        }
+        {
+          filteredList.map(block => (
+            <Tooltip
+              key={block.metaData.type}
+              position='right'
+              popupClassName='w-[200px] rounded-xl'
+              needsDelay={false}
+              popupContent={(
+                <div>
+                  <BlockIcon
+                    size='md'
+                    className='mb-2'
+                    type={block.metaData.type}
+                  />
+                  <div className='system-md-medium mb-1 text-text-primary'>{block.metaData.title}</div>
+                  <div className='system-xs-regular text-text-tertiary'>{block.metaData.description}</div>
+                </div>
+              )}
+            >
+              <div
+                key={block.metaData.type}
+                className='flex h-8 w-full cursor-pointer items-center rounded-lg px-3 hover:bg-state-base-hover'
+                onClick={() => onSelect(block.metaData.type)}
+              >
+                <BlockIcon
+                  className='mr-2 shrink-0'
+                  type={block.metaData.type}
+                />
+                <div className='grow text-sm text-text-secondary'>{block.metaData.title}</div>
+                {
+                  block.metaData.type === BlockEnum.LoopEnd && (
+                    <Badge
+                      text={t('workflow.nodes.loop.loopNode')}
+                      className='ml-2 shrink-0'
+                    />
+                  )
+                }
+              </div>
+            </Tooltip>
+          ))
+        }
+      </div>
+    )
+  }, [groups, onSelect, t, store])
+
+  return (
+    <div className='max-h-[480px] min-w-[400px] max-w-[500px] overflow-y-auto p-1'>
+      {
+        isEmpty && (
+          <div className='flex h-[22px] items-center px-3 text-xs font-medium text-text-tertiary'>{t('workflow.tabs.noResult')}</div>
+        )
+      }
+      {
+        !isEmpty && BLOCK_CLASSIFICATIONS.map(renderGroup)
+      }
+    </div>
+  )
+}
+
+export default memo(Blocks)

dify/web/app/components/workflow/block-selector/constants.tsx

@@ -0,0 +1,155 @@
+import type { Block } from '../types'
+import { BlockEnum } from '../types'
+import { BlockClassificationEnum } from './types'
+
+export const BLOCK_CLASSIFICATIONS: string[] = [
+  BlockClassificationEnum.Default,
+  BlockClassificationEnum.QuestionUnderstand,
+  BlockClassificationEnum.Logic,
+  BlockClassificationEnum.Transform,
+  BlockClassificationEnum.Utilities,
+]
+
+export const DEFAULT_FILE_EXTENSIONS_IN_LOCAL_FILE_DATA_SOURCE = [
+  'txt',
+  'markdown',
+  'mdx',
+  'pdf',
+  'html',
+  'xlsx',
+  'xls',
+  'vtt',
+  'properties',
+  'doc',
+  'docx',
+  'csv',
+  'eml',
+  'msg',
+  'pptx',
+  'xml',
+  'epub',
+  'ppt',
+  'md',
+]
+
+export const START_BLOCKS: Block[] = [
+  {
+    classification: BlockClassificationEnum.Default,
+    type: BlockEnum.Start,
+    title: 'User Input',
+    description: 'Traditional start node for user input',
+  },
+  {
+    classification: BlockClassificationEnum.Default,
+    type: BlockEnum.TriggerSchedule,
+    title: 'Schedule Trigger',
+    description: 'Time-based workflow trigger',
+  },
+  {
+    classification: BlockClassificationEnum.Default,
+    type: BlockEnum.TriggerWebhook,
+    title: 'Webhook Trigger',
+    description: 'HTTP callback trigger',
+  },
+]
+
+export const ENTRY_NODE_TYPES = [
+  BlockEnum.Start,
+  BlockEnum.TriggerSchedule,
+  BlockEnum.TriggerWebhook,
+  BlockEnum.TriggerPlugin,
+] as const
+
+export const BLOCKS: Block[] = [
+  {
+    classification: BlockClassificationEnum.Default,
+    type: BlockEnum.LLM,
+    title: 'LLM',
+  },
+  {
+    classification: BlockClassificationEnum.Default,
+    type: BlockEnum.KnowledgeRetrieval,
+    title: 'Knowledge Retrieval',
+  },
+  {
+    classification: BlockClassificationEnum.Default,
+    type: BlockEnum.End,
+    title: 'End',
+  },
+  {
+    classification: BlockClassificationEnum.Default,
+    type: BlockEnum.Answer,
+    title: 'Direct Answer',
+  },
+  {
+    classification: BlockClassificationEnum.QuestionUnderstand,
+    type: BlockEnum.QuestionClassifier,
+    title: 'Question Classifier',
+  },
+  {
+    classification: BlockClassificationEnum.Logic,
+    type: BlockEnum.IfElse,
+    title: 'IF/ELSE',
+  },
+  {
+    classification: BlockClassificationEnum.Logic,
+    type: BlockEnum.LoopEnd,
+    title: 'Exit Loop',
+    description: '',
+  },
+  {
+    classification: BlockClassificationEnum.Logic,
+    type: BlockEnum.Iteration,
+    title: 'Iteration',
+  },
+  {
+    classification: BlockClassificationEnum.Logic,
+    type: BlockEnum.Loop,
+    title: 'Loop',
+  },
+  {
+    classification: BlockClassificationEnum.Transform,
+    type: BlockEnum.Code,
+    title: 'Code',
+  },
+  {
+    classification: BlockClassificationEnum.Transform,
+    type: BlockEnum.TemplateTransform,
+    title: 'Templating Transform',
+  },
+  {
+    classification: BlockClassificationEnum.Transform,
+    type: BlockEnum.VariableAggregator,
+    title: 'Variable Aggregator',
+  },
+  {
+    classification: BlockClassificationEnum.Transform,
+    type: BlockEnum.DocExtractor,
+    title: 'Doc Extractor',
+  },
+  {
+    classification: BlockClassificationEnum.Transform,
+    type: BlockEnum.Assigner,
+    title: 'Variable Assigner',
+  },
+  {
+    classification: BlockClassificationEnum.Transform,
+    type: BlockEnum.ParameterExtractor,
+    title: 'Parameter Extractor',
+  },
+  {
+    classification: BlockClassificationEnum.Utilities,
+    type: BlockEnum.HttpRequest,
+    title: 'HTTP Request',
+  },
+  {
+    classification: BlockClassificationEnum.Utilities,
+    type: BlockEnum.ListFilter,
+    title: 'List Filter',
+  },
+  {
+    classification: BlockClassificationEnum.Default,
+    type: BlockEnum.Agent,
+    title: 'Agent',
+  },
+]

dify/web/app/components/workflow/block-selector/data-sources.tsx

@@ -0,0 +1,126 @@
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react'
+import { BlockEnum } from '../types'
+import type {
+  OnSelectBlock,
+  ToolWithProvider,
+} from '../types'
+import type { DataSourceDefaultValue, ToolDefaultValue } from './types'
+import Tools from './tools'
+import { ViewType } from './view-type-select'
+import cn from '@/utils/classnames'
+import PluginList, { type ListRef } from '@/app/components/workflow/block-selector/market-place-plugin/list'
+import { useGlobalPublicStore } from '@/context/global-public-context'
+import { DEFAULT_FILE_EXTENSIONS_IN_LOCAL_FILE_DATA_SOURCE } from './constants'
+import { useMarketplacePlugins } from '../../plugins/marketplace/hooks'
+import { PluginCategoryEnum } from '../../plugins/types'
+import { useGetLanguage } from '@/context/i18n'
+
+type AllToolsProps = {
+  className?: string
+  toolContentClassName?: string
+  searchText: string
+  onSelect: OnSelectBlock
+  dataSources: ToolWithProvider[]
+}
+
+const DataSources = ({
+  className,
+  toolContentClassName,
+  searchText,
+  onSelect,
+  dataSources,
+}: AllToolsProps) => {
+  const language = useGetLanguage()
+  const pluginRef = useRef<ListRef>(null)
+  const wrapElemRef = useRef<HTMLDivElement>(null)
+
+  const isMatchingKeywords = (text: string, keywords: string) => {
+    return text.toLowerCase().includes(keywords.toLowerCase())
+  }
+
+  const filteredDatasources = useMemo(() => {
+    const hasFilter = searchText
+    if (!hasFilter)
+      return dataSources.filter(toolWithProvider => toolWithProvider.tools.length > 0)
+
+    return dataSources.filter((toolWithProvider) => {
+      return isMatchingKeywords(toolWithProvider.name, searchText) || toolWithProvider.tools.some((tool) => {
+        return tool.label[language].toLowerCase().includes(searchText.toLowerCase()) || tool.name.toLowerCase().includes(searchText.toLowerCase())
+      })
+    })
+  }, [searchText, dataSources, language])
+
+  const handleSelect = useCallback((_: BlockEnum, toolDefaultValue: ToolDefaultValue) => {
+    let defaultValue: DataSourceDefaultValue = {
+      plugin_id: toolDefaultValue?.provider_id,
+      provider_type: toolDefaultValue?.provider_type,
+      provider_name: toolDefaultValue?.provider_name,
+      datasource_name: toolDefaultValue?.tool_name,
+      datasource_label: toolDefaultValue?.tool_label,
+      title: toolDefaultValue?.title,
+      plugin_unique_identifier: toolDefaultValue?.plugin_unique_identifier,
+    }
+    // Update defaultValue with fileExtensions if this is the local file data source
+    if (toolDefaultValue?.provider_id === 'langgenius/file' && toolDefaultValue?.provider_name === 'file') {
+      defaultValue = {
+        ...defaultValue,
+        fileExtensions: DEFAULT_FILE_EXTENSIONS_IN_LOCAL_FILE_DATA_SOURCE,
+      }
+    }
+    onSelect(BlockEnum.DataSource, toolDefaultValue && defaultValue)
+  }, [onSelect])
+
+  const { enable_marketplace } = useGlobalPublicStore(s => s.systemFeatures)
+
+  const {
+    queryPluginsWithDebounced: fetchPlugins,
+    plugins: notInstalledPlugins = [],
+  } = useMarketplacePlugins()
+
+  useEffect(() => {
+    if (!enable_marketplace) return
+    if (searchText) {
+      fetchPlugins({
+        query: searchText,
+        category: PluginCategoryEnum.datasource,
+      })
+    }
+  }, [searchText, enable_marketplace])
+
+  return (
+    <div className={cn('w-[400px] min-w-0 max-w-full', className)}>
+      <div
+        ref={wrapElemRef}
+        className='max-h-[464px] overflow-y-auto overflow-x-hidden'
+        onScroll={pluginRef.current?.handleScroll}
+      >
+        <Tools
+          className={toolContentClassName}
+          tools={filteredDatasources}
+          onSelect={handleSelect as OnSelectBlock}
+          viewType={ViewType.flat}
+          hasSearchText={!!searchText}
+          canNotSelectMultiple
+        />
+        {/* Plugins from marketplace */}
+        {enable_marketplace && (
+          <PluginList
+            ref={pluginRef}
+            wrapElemRef={wrapElemRef}
+            list={notInstalledPlugins}
+            tags={[]}
+            searchText={searchText}
+            toolContentClassName={toolContentClassName}
+          />
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default DataSources

dify/web/app/components/workflow/block-selector/featured-tools.tsx

@@ -0,0 +1,333 @@
+'use client'
+import { useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { BlockEnum, type ToolWithProvider } from '../types'
+import type { ToolDefaultValue, ToolValue } from './types'
+import type { Plugin } from '@/app/components/plugins/types'
+import { useGetLanguage } from '@/context/i18n'
+import BlockIcon from '../block-icon'
+import Tooltip from '@/app/components/base/tooltip'
+import { RiMoreLine } from '@remixicon/react'
+import Loading from '@/app/components/base/loading'
+import Link from 'next/link'
+import { getMarketplaceUrl } from '@/utils/var'
+import { ToolTypeEnum } from './types'
+import { ViewType } from './view-type-select'
+import Tools from './tools'
+import { formatNumber } from '@/utils/format'
+import Action from '@/app/components/workflow/block-selector/market-place-plugin/action'
+import { ArrowDownDoubleLine, ArrowDownRoundFill, ArrowUpDoubleLine } from '@/app/components/base/icons/src/vender/solid/arrows'
+import InstallFromMarketplace from '@/app/components/plugins/install-plugin/install-from-marketplace'
+
+const MAX_RECOMMENDED_COUNT = 15
+const INITIAL_VISIBLE_COUNT = 5
+
+type FeaturedToolsProps = {
+  plugins: Plugin[]
+  providerMap: Map<string, ToolWithProvider>
+  onSelect: (type: BlockEnum, tool: ToolDefaultValue) => void
+  selectedTools?: ToolValue[]
+  canChooseMCPTool?: boolean
+  isLoading?: boolean
+  onInstallSuccess?: () => void
+}
+
+const STORAGE_KEY = 'workflow_tools_featured_collapsed'
+
+const FeaturedTools = ({
+  plugins,
+  providerMap,
+  onSelect,
+  selectedTools,
+  canChooseMCPTool,
+  isLoading = false,
+  onInstallSuccess,
+}: FeaturedToolsProps) => {
+  const { t } = useTranslation()
+  const language = useGetLanguage()
+  const [visibleCount, setVisibleCount] = useState(INITIAL_VISIBLE_COUNT)
+  const [isCollapsed, setIsCollapsed] = useState<boolean>(() => {
+    if (typeof window === 'undefined')
+      return false
+    const stored = window.localStorage.getItem(STORAGE_KEY)
+    return stored === 'true'
+  })
+
+  useEffect(() => {
+    if (typeof window === 'undefined')
+      return
+    const stored = window.localStorage.getItem(STORAGE_KEY)
+    if (stored !== null)
+      setIsCollapsed(stored === 'true')
+  }, [])
+
+  useEffect(() => {
+    if (typeof window === 'undefined')
+      return
+    window.localStorage.setItem(STORAGE_KEY, String(isCollapsed))
+  }, [isCollapsed])
+
+  useEffect(() => {
+    setVisibleCount(INITIAL_VISIBLE_COUNT)
+  }, [plugins])
+
+  const limitedPlugins = useMemo(
+    () => plugins.slice(0, MAX_RECOMMENDED_COUNT),
+    [plugins],
+  )
+
+  const {
+    installedProviders,
+    uninstalledPlugins,
+  } = useMemo(() => {
+    const installed: ToolWithProvider[] = []
+    const uninstalled: Plugin[] = []
+    const visitedProviderIds = new Set<string>()
+
+    limitedPlugins.forEach((plugin) => {
+      const provider = providerMap.get(plugin.plugin_id)
+      if (provider) {
+        if (!visitedProviderIds.has(provider.id)) {
+          installed.push(provider)
+          visitedProviderIds.add(provider.id)
+        }
+      }
+      else {
+        uninstalled.push(plugin)
+      }
+    })
+
+    return {
+      installedProviders: installed,
+      uninstalledPlugins: uninstalled,
+    }
+  }, [limitedPlugins, providerMap])
+
+  const totalQuota = Math.min(visibleCount, MAX_RECOMMENDED_COUNT)
+
+  const visibleInstalledProviders = useMemo(
+    () => installedProviders.slice(0, totalQuota),
+    [installedProviders, totalQuota],
+  )
+
+  const remainingSlots = Math.max(totalQuota - visibleInstalledProviders.length, 0)
+
+  const visibleUninstalledPlugins = useMemo(
+    () => (remainingSlots > 0 ? uninstalledPlugins.slice(0, remainingSlots) : []),
+    [uninstalledPlugins, remainingSlots],
+  )
+
+  const totalVisible = visibleInstalledProviders.length + visibleUninstalledPlugins.length
+  const maxAvailable = Math.min(MAX_RECOMMENDED_COUNT, installedProviders.length + uninstalledPlugins.length)
+  const hasMoreToShow = totalVisible < maxAvailable
+  const canToggleVisibility = maxAvailable > INITIAL_VISIBLE_COUNT
+  const isExpanded = canToggleVisibility && !hasMoreToShow
+  const showEmptyState = !isLoading && totalVisible === 0
+
+  return (
+    <div className='px-3 pb-3 pt-2'>
+      <button
+        type='button'
+        className='flex w-full items-center rounded-md px-0 py-1 text-left text-text-primary'
+        onClick={() => setIsCollapsed(prev => !prev)}
+      >
+        <span className='system-xs-medium text-text-primary'>{t('workflow.tabs.featuredTools')}</span>
+        <ArrowDownRoundFill className={`ml-0.5 h-4 w-4 text-text-tertiary transition-transform ${isCollapsed ? '-rotate-90' : 'rotate-0'}`} />
+      </button>
+
+      {!isCollapsed && (
+        <>
+          {isLoading && (
+            <div className='py-3'>
+              <Loading type='app' />
+            </div>
+          )}
+
+          {showEmptyState && (
+            <p className='system-xs-regular py-2 text-text-tertiary'>
+              <Link className='text-text-accent' href={getMarketplaceUrl('', { category: 'tool' })} target='_blank' rel='noopener noreferrer'>
+                {t('workflow.tabs.noFeaturedPlugins')}
+              </Link>
+            </p>
+          )}
+
+          {!showEmptyState && !isLoading && (
+            <>
+              {visibleInstalledProviders.length > 0 && (
+                <Tools
+                  className='p-0'
+                  tools={visibleInstalledProviders}
+                  onSelect={onSelect}
+                  canNotSelectMultiple
+                  toolType={ToolTypeEnum.All}
+                  viewType={ViewType.flat}
+                  hasSearchText={false}
+                  selectedTools={selectedTools}
+                  canChooseMCPTool={canChooseMCPTool}
+                />
+              )}
+
+              {visibleUninstalledPlugins.length > 0 && (
+                <div className='mt-1 flex flex-col gap-1'>
+                  {visibleUninstalledPlugins.map(plugin => (
+                    <FeaturedToolUninstalledItem
+                      key={plugin.plugin_id}
+                      plugin={plugin}
+                      language={language}
+                      onInstallSuccess={async () => {
+                        await onInstallSuccess?.()
+                      }}
+                      t={t}
+                    />
+                  ))}
+                </div>
+              )}
+            </>
+          )}
+
+          {!isLoading && totalVisible > 0 && canToggleVisibility && (
+            <div
+              className='group mt-1 flex cursor-pointer items-center gap-x-2 rounded-lg py-1 pl-3 pr-2 text-text-tertiary transition-colors hover:bg-state-base-hover hover:text-text-secondary'
+              onClick={() => {
+                setVisibleCount((count) => {
+                  if (count >= maxAvailable)
+                    return INITIAL_VISIBLE_COUNT
+
+                  return Math.min(count + INITIAL_VISIBLE_COUNT, maxAvailable)
+                })
+              }}
+            >
+              <div className='flex items-center px-1 text-text-tertiary transition-colors group-hover:text-text-secondary'>
+                <RiMoreLine className='size-4 group-hover:hidden' />
+                {isExpanded ? (
+                  <ArrowUpDoubleLine className='hidden size-4 group-hover:block' />
+                ) : (
+                  <ArrowDownDoubleLine className='hidden size-4 group-hover:block' />
+                )}
+              </div>
+              <div className='system-xs-regular'>
+                {t(isExpanded ? 'workflow.tabs.showLessFeatured' : 'workflow.tabs.showMoreFeatured')}
+              </div>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  )
+}
+
+type FeaturedToolUninstalledItemProps = {
+  plugin: Plugin
+  language: string
+  onInstallSuccess?: () => Promise<void> | void
+  t: (key: string, options?: Record<string, any>) => string
+}
+
+function FeaturedToolUninstalledItem({
+  plugin,
+  language,
+  onInstallSuccess,
+  t,
+}: FeaturedToolUninstalledItemProps) {
+  const label = plugin.label?.[language] || plugin.name
+  const description = typeof plugin.brief === 'object' ? plugin.brief[language] : plugin.brief
+  const installCountLabel = t('plugin.install', { num: formatNumber(plugin.install_count || 0) })
+  const [actionOpen, setActionOpen] = useState(false)
+  const [isActionHovered, setIsActionHovered] = useState(false)
+  const [isInstallModalOpen, setIsInstallModalOpen] = useState(false)
+
+  useEffect(() => {
+    if (!actionOpen)
+      return
+
+    const handleScroll = () => {
+      setActionOpen(false)
+      setIsActionHovered(false)
+    }
+
+    window.addEventListener('scroll', handleScroll, true)
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll, true)
+    }
+  }, [actionOpen])
+
+  return (
+    <>
+      <Tooltip
+        position='right'
+        needsDelay={false}
+        popupClassName='!p-0 !px-3 !py-2.5 !w-[224px] !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={plugin.icon} />
+            <div className='mb-1 text-sm leading-5 text-text-primary'>{label}</div>
+            <div className='text-xs leading-[18px] text-text-secondary'>{description}</div>
+          </div>
+        )}
+        disabled={!description || isActionHovered || actionOpen || isInstallModalOpen}
+      >
+        <div
+          className='group flex h-8 w-full items-center rounded-lg pl-3 pr-1 hover:bg-state-base-hover'
+        >
+          <div className='flex h-full min-w-0 items-center'>
+            <BlockIcon type={BlockEnum.Tool} toolIcon={plugin.icon} />
+            <div className='ml-2 min-w-0'>
+              <div className='system-sm-medium truncate text-text-secondary'>{label}</div>
+            </div>
+          </div>
+          <div className='ml-auto flex h-full items-center gap-1 pl-1'>
+            <span className={`system-xs-regular text-text-tertiary ${actionOpen ? 'hidden' : 'group-hover:hidden'}`}>{installCountLabel}</span>
+            <div
+              className={`system-xs-medium flex h-full items-center gap-1 text-components-button-secondary-accent-text [&_.action-btn]:h-6 [&_.action-btn]:min-h-0 [&_.action-btn]:w-6 [&_.action-btn]:rounded-lg [&_.action-btn]:p-0 ${actionOpen ? 'flex' : 'hidden group-hover:flex'}`}
+              onMouseEnter={() => setIsActionHovered(true)}
+              onMouseLeave={() => {
+                if (!actionOpen)
+                  setIsActionHovered(false)
+              }}
+            >
+              <button
+                type='button'
+                className='cursor-pointer rounded-md px-1.5 py-0.5 hover:bg-state-base-hover'
+                onClick={() => {
+                  setActionOpen(false)
+                  setIsInstallModalOpen(true)
+                  setIsActionHovered(true)
+                }}
+              >
+                {t('plugin.installAction')}
+              </button>
+              <Action
+                open={actionOpen}
+                onOpenChange={(value) => {
+                  setActionOpen(value)
+                  setIsActionHovered(value)
+                }}
+                author={plugin.org}
+                name={plugin.name}
+                version={plugin.latest_version}
+              />
+            </div>
+          </div>
+        </div>
+      </Tooltip>
+      {isInstallModalOpen && (
+        <InstallFromMarketplace
+          uniqueIdentifier={plugin.latest_package_identifier}
+          manifest={plugin}
+          onSuccess={async () => {
+            setIsInstallModalOpen(false)
+            setIsActionHovered(false)
+            await onInstallSuccess?.()
+          }}
+          onClose={() => {
+            setIsInstallModalOpen(false)
+            setIsActionHovered(false)
+          }}
+        />
+      )}
+    </>
+  )
+}
+
+export default FeaturedTools

dify/web/app/components/workflow/block-selector/featured-triggers.tsx

@@ -0,0 +1,326 @@
+'use client'
+import { useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { BlockEnum } from '../types'
+import type { TriggerDefaultValue, TriggerWithProvider } from './types'
+import type { Plugin } from '@/app/components/plugins/types'
+import { useGetLanguage } from '@/context/i18n'
+import BlockIcon from '../block-icon'
+import Tooltip from '@/app/components/base/tooltip'
+import { RiMoreLine } from '@remixicon/react'
+import Loading from '@/app/components/base/loading'
+import Link from 'next/link'
+import { getMarketplaceUrl } from '@/utils/var'
+import TriggerPluginItem from './trigger-plugin/item'
+import { formatNumber } from '@/utils/format'
+import Action from '@/app/components/workflow/block-selector/market-place-plugin/action'
+import { ArrowDownDoubleLine, ArrowDownRoundFill, ArrowUpDoubleLine } from '@/app/components/base/icons/src/vender/solid/arrows'
+import InstallFromMarketplace from '@/app/components/plugins/install-plugin/install-from-marketplace'
+
+const MAX_RECOMMENDED_COUNT = 15
+const INITIAL_VISIBLE_COUNT = 5
+
+type FeaturedTriggersProps = {
+  plugins: Plugin[]
+  providerMap: Map<string, TriggerWithProvider>
+  onSelect: (type: BlockEnum, trigger?: TriggerDefaultValue) => void
+  isLoading?: boolean
+  onInstallSuccess?: () => void | Promise<void>
+}
+
+const STORAGE_KEY = 'workflow_triggers_featured_collapsed'
+
+const FeaturedTriggers = ({
+  plugins,
+  providerMap,
+  onSelect,
+  isLoading = false,
+  onInstallSuccess,
+}: FeaturedTriggersProps) => {
+  const { t } = useTranslation()
+  const language = useGetLanguage()
+  const [visibleCount, setVisibleCount] = useState(INITIAL_VISIBLE_COUNT)
+  const [isCollapsed, setIsCollapsed] = useState<boolean>(() => {
+    if (typeof window === 'undefined')
+      return false
+    const stored = window.localStorage.getItem(STORAGE_KEY)
+    return stored === 'true'
+  })
+
+  useEffect(() => {
+    if (typeof window === 'undefined')
+      return
+    const stored = window.localStorage.getItem(STORAGE_KEY)
+    if (stored !== null)
+      setIsCollapsed(stored === 'true')
+  }, [])
+
+  useEffect(() => {
+    if (typeof window === 'undefined')
+      return
+    window.localStorage.setItem(STORAGE_KEY, String(isCollapsed))
+  }, [isCollapsed])
+
+  useEffect(() => {
+    setVisibleCount(INITIAL_VISIBLE_COUNT)
+  }, [plugins])
+
+  const limitedPlugins = useMemo(
+    () => plugins.slice(0, MAX_RECOMMENDED_COUNT),
+    [plugins],
+  )
+
+  const {
+    installedProviders,
+    uninstalledPlugins,
+  } = useMemo(() => {
+    const installed: TriggerWithProvider[] = []
+    const uninstalled: Plugin[] = []
+    const visitedProviderIds = new Set<string>()
+
+    limitedPlugins.forEach((plugin) => {
+      const provider = providerMap.get(plugin.plugin_id) || providerMap.get(plugin.latest_package_identifier)
+      if (provider) {
+        if (!visitedProviderIds.has(provider.id)) {
+          installed.push(provider)
+          visitedProviderIds.add(provider.id)
+        }
+      }
+      else {
+        uninstalled.push(plugin)
+      }
+    })
+
+    return {
+      installedProviders: installed,
+      uninstalledPlugins: uninstalled,
+    }
+  }, [limitedPlugins, providerMap])
+
+  const totalQuota = Math.min(visibleCount, MAX_RECOMMENDED_COUNT)
+
+  const visibleInstalledProviders = useMemo(
+    () => installedProviders.slice(0, totalQuota),
+    [installedProviders, totalQuota],
+  )
+
+  const remainingSlots = Math.max(totalQuota - visibleInstalledProviders.length, 0)
+
+  const visibleUninstalledPlugins = useMemo(
+    () => (remainingSlots > 0 ? uninstalledPlugins.slice(0, remainingSlots) : []),
+    [uninstalledPlugins, remainingSlots],
+  )
+
+  const totalVisible = visibleInstalledProviders.length + visibleUninstalledPlugins.length
+  const maxAvailable = Math.min(MAX_RECOMMENDED_COUNT, installedProviders.length + uninstalledPlugins.length)
+  const hasMoreToShow = totalVisible < maxAvailable
+  const canToggleVisibility = maxAvailable > INITIAL_VISIBLE_COUNT
+  const isExpanded = canToggleVisibility && !hasMoreToShow
+  const showEmptyState = !isLoading && totalVisible === 0
+
+  return (
+    <div className='px-3 pb-3 pt-2'>
+      <button
+        type='button'
+        className='flex w-full items-center rounded-md px-0 py-1 text-left text-text-primary'
+        onClick={() => setIsCollapsed(prev => !prev)}
+      >
+        <span className='system-xs-medium text-text-primary'>{t('workflow.tabs.featuredTools')}</span>
+        <ArrowDownRoundFill className={`ml-0.5 h-4 w-4 text-text-tertiary transition-transform ${isCollapsed ? '-rotate-90' : 'rotate-0'}`} />
+      </button>
+
+      {!isCollapsed && (
+        <>
+          {isLoading && (
+            <div className='py-3'>
+              <Loading type='app' />
+            </div>
+          )}
+
+          {showEmptyState && (
+            <p className='system-xs-regular py-2 text-text-tertiary'>
+              <Link className='text-text-accent' href={getMarketplaceUrl('', { category: 'trigger' })} target='_blank' rel='noopener noreferrer'>
+                {t('workflow.tabs.noFeaturedTriggers')}
+              </Link>
+            </p>
+          )}
+
+          {!showEmptyState && !isLoading && (
+            <>
+              {visibleInstalledProviders.length > 0 && (
+                <div className='mt-1'>
+                  {visibleInstalledProviders.map(provider => (
+                    <TriggerPluginItem
+                      key={provider.id}
+                      payload={provider}
+                      hasSearchText={false}
+                      onSelect={onSelect}
+                    />
+                  ))}
+                </div>
+              )}
+
+              {visibleUninstalledPlugins.length > 0 && (
+                <div className='mt-1 flex flex-col gap-1'>
+                  {visibleUninstalledPlugins.map(plugin => (
+                    <FeaturedTriggerUninstalledItem
+                      key={plugin.plugin_id}
+                      plugin={plugin}
+                      language={language}
+                      onInstallSuccess={async () => {
+                        await onInstallSuccess?.()
+                      }}
+                      t={t}
+                    />
+                  ))}
+                </div>
+              )}
+            </>
+          )}
+
+          {!isLoading && totalVisible > 0 && canToggleVisibility && (
+            <div
+              className='group mt-1 flex cursor-pointer items-center gap-x-2 rounded-lg py-1 pl-3 pr-2 text-text-tertiary transition-colors hover:bg-state-base-hover hover:text-text-secondary'
+              onClick={() => {
+                setVisibleCount((count) => {
+                  if (count >= maxAvailable)
+                    return INITIAL_VISIBLE_COUNT
+
+                  return Math.min(count + INITIAL_VISIBLE_COUNT, maxAvailable)
+                })
+              }}
+            >
+              <div className='flex items-center px-1 text-text-tertiary transition-colors group-hover:text-text-secondary'>
+                <RiMoreLine className='size-4 group-hover:hidden' />
+                {isExpanded ? (
+                  <ArrowUpDoubleLine className='hidden size-4 group-hover:block' />
+                ) : (
+                  <ArrowDownDoubleLine className='hidden size-4 group-hover:block' />
+                )}
+              </div>
+              <div className='system-xs-regular'>
+                {t(isExpanded ? 'workflow.tabs.showLessFeatured' : 'workflow.tabs.showMoreFeatured')}
+              </div>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  )
+}
+
+type FeaturedTriggerUninstalledItemProps = {
+  plugin: Plugin
+  language: string
+  onInstallSuccess?: () => Promise<void> | void
+  t: (key: string, options?: Record<string, any>) => string
+}
+
+function FeaturedTriggerUninstalledItem({
+  plugin,
+  language,
+  onInstallSuccess,
+  t,
+}: FeaturedTriggerUninstalledItemProps) {
+  const label = plugin.label?.[language] || plugin.name
+  const description = typeof plugin.brief === 'object' ? plugin.brief[language] : plugin.brief
+  const installCountLabel = t('plugin.install', { num: formatNumber(plugin.install_count || 0) })
+  const [actionOpen, setActionOpen] = useState(false)
+  const [isActionHovered, setIsActionHovered] = useState(false)
+  const [isInstallModalOpen, setIsInstallModalOpen] = useState(false)
+
+  useEffect(() => {
+    if (!actionOpen)
+      return
+
+    const handleScroll = () => {
+      setActionOpen(false)
+      setIsActionHovered(false)
+    }
+
+    window.addEventListener('scroll', handleScroll, true)
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll, true)
+    }
+  }, [actionOpen])
+
+  return (
+    <>
+      <Tooltip
+        position='right'
+        needsDelay={false}
+        popupClassName='!p-0 !px-3 !py-2.5 !w-[224px] !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.TriggerPlugin} toolIcon={plugin.icon} />
+            <div className='mb-1 text-sm leading-5 text-text-primary'>{label}</div>
+            <div className='text-xs leading-[18px] text-text-secondary'>{description}</div>
+          </div>
+        )}
+        disabled={!description || isActionHovered || actionOpen || isInstallModalOpen}
+      >
+        <div
+          className='group flex h-8 w-full items-center rounded-lg pl-3 pr-1 hover:bg-state-base-hover'
+        >
+          <div className='flex h-full min-w-0 items-center'>
+            <BlockIcon type={BlockEnum.TriggerPlugin} toolIcon={plugin.icon} />
+            <div className='ml-2 min-w-0'>
+              <div className='system-sm-medium truncate text-text-secondary'>{label}</div>
+            </div>
+          </div>
+          <div className='ml-auto flex h-full items-center gap-1 pl-1'>
+            <span className={`system-xs-regular text-text-tertiary ${actionOpen ? 'hidden' : 'group-hover:hidden'}`}>{installCountLabel}</span>
+            <div
+              className={`system-xs-medium flex h-full items-center gap-1 text-components-button-secondary-accent-text [&_.action-btn]:h-6 [&_.action-btn]:min-h-0 [&_.action-btn]:w-6 [&_.action-btn]:rounded-lg [&_.action-btn]:p-0 ${actionOpen ? 'flex' : 'hidden group-hover:flex'}`}
+              onMouseEnter={() => setIsActionHovered(true)}
+              onMouseLeave={() => {
+                if (!actionOpen)
+                  setIsActionHovered(false)
+              }}
+            >
+              <button
+                type='button'
+                className='cursor-pointer rounded-md px-1.5 py-0.5 hover:bg-state-base-hover'
+                onClick={() => {
+                  setActionOpen(false)
+                  setIsInstallModalOpen(true)
+                  setIsActionHovered(true)
+                }}
+              >
+                {t('plugin.installAction')}
+              </button>
+              <Action
+                open={actionOpen}
+                onOpenChange={(value) => {
+                  setActionOpen(value)
+                  setIsActionHovered(value)
+                }}
+                author={plugin.org}
+                name={plugin.name}
+                version={plugin.latest_version}
+              />
+            </div>
+          </div>
+        </div>
+      </Tooltip>
+      {isInstallModalOpen && (
+        <InstallFromMarketplace
+          uniqueIdentifier={plugin.latest_package_identifier}
+          manifest={plugin}
+          onSuccess={async () => {
+            setIsInstallModalOpen(false)
+            setIsActionHovered(false)
+            await onInstallSuccess?.()
+          }}
+          onClose={() => {
+            setIsInstallModalOpen(false)
+            setIsActionHovered(false)
+          }}
+        />
+      )}
+    </>
+  )
+}
+
+export default FeaturedTriggers

dify/web/app/components/workflow/block-selector/hooks.ts

@@ -0,0 +1,156 @@
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import { BLOCKS, START_BLOCKS } from './constants'
+import {
+  TabsEnum,
+  ToolTypeEnum,
+} from './types'
+
+export const useBlocks = () => {
+  const { t } = useTranslation()
+
+  return BLOCKS.map((block) => {
+    return {
+      ...block,
+      title: t(`workflow.blocks.${block.type}`),
+    }
+  })
+}
+
+export const useStartBlocks = () => {
+  const { t } = useTranslation()
+
+  return START_BLOCKS.map((block) => {
+    return {
+      ...block,
+      title: t(`workflow.blocks.${block.type}`),
+    }
+  })
+}
+
+export const useTabs = ({
+  noBlocks,
+  noSources,
+  noTools,
+  noStart = true,
+  defaultActiveTab,
+  hasUserInputNode = false,
+  forceEnableStartTab = false, // When true, Start tab remains enabled even if trigger/user input nodes already exist.
+}: {
+  noBlocks?: boolean
+  noSources?: boolean
+  noTools?: boolean
+  noStart?: boolean
+  defaultActiveTab?: TabsEnum
+  hasUserInputNode?: boolean
+  forceEnableStartTab?: boolean
+}) => {
+  const { t } = useTranslation()
+  const shouldShowStartTab = !noStart
+  const shouldDisableStartTab = !forceEnableStartTab && hasUserInputNode
+  const tabs = useMemo(() => {
+    const tabConfigs = [{
+      key: TabsEnum.Blocks,
+      name: t('workflow.tabs.blocks'),
+      show: !noBlocks,
+    }, {
+      key: TabsEnum.Sources,
+      name: t('workflow.tabs.sources'),
+      show: !noSources,
+    }, {
+      key: TabsEnum.Tools,
+      name: t('workflow.tabs.tools'),
+      show: !noTools,
+    },
+    {
+      key: TabsEnum.Start,
+      name: t('workflow.tabs.start'),
+      show: shouldShowStartTab,
+      disabled: shouldDisableStartTab,
+    }]
+
+    return tabConfigs.filter(tab => tab.show)
+  }, [t, noBlocks, noSources, noTools, shouldShowStartTab, shouldDisableStartTab])
+
+  const getValidTabKey = useCallback((targetKey?: TabsEnum) => {
+    if (!targetKey)
+      return undefined
+    const tab = tabs.find(tabItem => tabItem.key === targetKey)
+    if (!tab || tab.disabled)
+      return undefined
+    return tab.key
+  }, [tabs])
+
+  const initialTab = useMemo(() => {
+    const fallbackTab = tabs.find(tab => !tab.disabled)?.key ?? TabsEnum.Blocks
+    const preferredDefault = getValidTabKey(defaultActiveTab)
+    if (preferredDefault)
+      return preferredDefault
+
+    const preferredOrder: TabsEnum[] = []
+    if (!noBlocks)
+      preferredOrder.push(TabsEnum.Blocks)
+    if (!noTools)
+      preferredOrder.push(TabsEnum.Tools)
+    if (!noSources)
+      preferredOrder.push(TabsEnum.Sources)
+    if (!noStart)
+      preferredOrder.push(TabsEnum.Start)
+
+    for (const tabKey of preferredOrder) {
+      const validKey = getValidTabKey(tabKey)
+      if (validKey)
+        return validKey
+    }
+
+    return fallbackTab
+  }, [defaultActiveTab, noBlocks, noSources, noTools, noStart, tabs, getValidTabKey])
+  const [activeTab, setActiveTab] = useState(initialTab)
+
+  useEffect(() => {
+    const currentTab = tabs.find(tab => tab.key === activeTab)
+    if (!currentTab || currentTab.disabled)
+      setActiveTab(initialTab)
+  }, [tabs, activeTab, initialTab])
+
+  return {
+    tabs,
+    activeTab,
+    setActiveTab,
+  }
+}
+
+export const useToolTabs = (isHideMCPTools?: boolean) => {
+  const { t } = useTranslation()
+  const tabs = [
+    {
+      key: ToolTypeEnum.All,
+      name: t('workflow.tabs.allTool'),
+    },
+    {
+      key: ToolTypeEnum.BuiltIn,
+      name: t('workflow.tabs.plugin'),
+    },
+    {
+      key: ToolTypeEnum.Custom,
+      name: t('workflow.tabs.customTool'),
+    },
+    {
+      key: ToolTypeEnum.Workflow,
+      name: t('workflow.tabs.workflowTool'),
+    },
+  ]
+  if (!isHideMCPTools) {
+    tabs.push({
+      key: ToolTypeEnum.MCP,
+      name: 'MCP',
+    })
+  }
+
+  return tabs
+}

dify/web/app/components/workflow/block-selector/index-bar.tsx

@@ -0,0 +1,100 @@
+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 CUSTOM_GROUP_NAME = '@@@custom@@@'
+export const WORKFLOW_GROUP_NAME = '@@@workflow@@@'
+export const DATA_SOURCE_GROUP_NAME = '@@@data_source@@@'
+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
+
+    let letter
+
+    // transform Chinese to pinyin
+    if (/[\u4E00-\u9FA5]/.test(firstChar))
+      letter = pinyin(firstChar, { pattern: 'first', toneType: 'none' })[0].toUpperCase()
+    else
+      letter = firstChar.toUpperCase()
+
+    if (!/[A-Z]/.test(letter))
+      letter = '#'
+
+    if (!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 if (item.type === CollectionType.datasource)
+      groupName = DATA_SOURCE_GROUP_NAME
+    else
+      groupName = AGENT_GROUP_NAME
+
+    if (!acc[letter][groupName])
+      acc[letter][groupName] = []
+
+    acc[letter][groupName].push(item)
+
+    return acc
+  }, {})
+
+  const letters = Object.keys(groups).sort()
+  // move '#' to the end
+  const hashIndex = letters.indexOf('#')
+  if (hashIndex !== -1) {
+    letters.splice(hashIndex, 1)
+    letters.push('#')
+  }
+  return { letters, groups }
+}
+
+type IndexBarProps = {
+  letters: string[]
+  itemRefs: RefObject<{ [key: string]: HTMLElement | null }>
+  className?: string
+}
+
+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={classNames('index-bar sticky top-[20px] flex h-full w-6 flex-col items-center justify-center text-xs font-medium text-text-quaternary', className)}>
+      <div className={classNames('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="cursor-pointer hover:text-text-secondary" key={letter} onClick={() => handleIndexClick(letter)}>
+          {letter}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default IndexBar

dify/web/app/components/workflow/block-selector/index.tsx

@@ -0,0 +1,49 @@
+import {
+  useMemo,
+} from 'react'
+import type { NodeSelectorProps } from './main'
+import NodeSelector from './main'
+import { useHooksStore } from '@/app/components/workflow/hooks-store/store'
+import { BlockEnum } from '@/app/components/workflow/types'
+import { useStore } from '../store'
+
+const NodeSelectorWrapper = (props: NodeSelectorProps) => {
+  const availableNodesMetaData = useHooksStore(s => s.availableNodesMetaData)
+  const dataSourceList = useStore(s => s.dataSourceList)
+
+  const blocks = useMemo(() => {
+    const result = availableNodesMetaData?.nodes || []
+
+    return result.filter((block) => {
+      if (block.metaData.type === BlockEnum.Start)
+        return false
+
+      if (block.metaData.type === BlockEnum.DataSource)
+        return false
+
+      if (block.metaData.type === BlockEnum.Tool)
+        return false
+
+      if (block.metaData.type === BlockEnum.IterationStart)
+        return false
+
+      if (block.metaData.type === BlockEnum.LoopStart)
+        return false
+
+      if (block.metaData.type === BlockEnum.DataSourceEmpty)
+        return false
+
+      return true
+    })
+  }, [availableNodesMetaData?.nodes])
+
+  return (
+    <NodeSelector
+      {...props}
+      blocks={props.blocks || blocks}
+      dataSources={props.dataSources || dataSourceList || []}
+    />
+  )
+}
+
+export default NodeSelectorWrapper

dify/web/app/components/workflow/block-selector/main.tsx

@@ -0,0 +1,278 @@
+import type {
+  FC,
+  MouseEventHandler,
+} from 'react'
+import {
+  memo,
+  useCallback,
+  useMemo,
+  useState,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import useNodes from '@/app/components/workflow/store/workflow/use-nodes'
+import type {
+  OffsetOptions,
+  Placement,
+} from '@floating-ui/react'
+import type {
+  CommonNodeType,
+  NodeDefault,
+  OnSelectBlock,
+  ToolWithProvider,
+} from '../types'
+import { BlockEnum, isTriggerNode } from '../types'
+import Tabs from './tabs'
+import { TabsEnum } from './types'
+import { useTabs } from './hooks'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import Input from '@/app/components/base/input'
+import {
+  Plus02,
+} from '@/app/components/base/icons/src/vender/line/general'
+import SearchBox from '@/app/components/plugins/marketplace/search-box'
+
+export type NodeSelectorProps = {
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+  onSelect: OnSelectBlock
+  trigger?: (open: boolean) => React.ReactNode
+  placement?: Placement
+  offset?: OffsetOptions
+  triggerStyle?: React.CSSProperties
+  triggerClassName?: (open: boolean) => string
+  triggerInnerClassName?: string
+  popupClassName?: string
+  asChild?: boolean
+  availableBlocksTypes?: BlockEnum[]
+  disabled?: boolean
+  blocks?: NodeDefault[]
+  dataSources?: ToolWithProvider[]
+  noBlocks?: boolean
+  noTools?: boolean
+  showStartTab?: boolean
+  defaultActiveTab?: TabsEnum
+  forceShowStartContent?: boolean
+  ignoreNodeIds?: string[]
+  forceEnableStartTab?: boolean // Force enabling Start tab regardless of existing trigger/user input nodes (e.g., when changing Start node type).
+  allowUserInputSelection?: boolean // Override user-input availability; default logic blocks it when triggers exist.
+}
+const NodeSelector: FC<NodeSelectorProps> = ({
+  open: openFromProps,
+  onOpenChange,
+  onSelect,
+  trigger,
+  placement = 'right',
+  offset = 6,
+  triggerClassName,
+  triggerInnerClassName,
+  triggerStyle,
+  popupClassName,
+  asChild,
+  availableBlocksTypes,
+  disabled,
+  blocks = [],
+  dataSources = [],
+  noBlocks = false,
+  noTools = false,
+  showStartTab = false,
+  defaultActiveTab,
+  forceShowStartContent = false,
+  ignoreNodeIds = [],
+  forceEnableStartTab = false,
+  allowUserInputSelection,
+}) => {
+  const { t } = useTranslation()
+  const nodes = useNodes()
+  const [searchText, setSearchText] = useState('')
+  const [tags, setTags] = useState<string[]>([])
+  const [localOpen, setLocalOpen] = useState(false)
+  // Exclude nodes explicitly ignored (such as the node currently being edited) when checking canvas state.
+  const filteredNodes = useMemo(() => {
+    if (!ignoreNodeIds.length)
+      return nodes
+    const ignoreSet = new Set(ignoreNodeIds)
+    return nodes.filter(node => !ignoreSet.has(node.id))
+  }, [nodes, ignoreNodeIds])
+
+  const { hasTriggerNode, hasUserInputNode } = useMemo(() => {
+    const result = {
+      hasTriggerNode: false,
+      hasUserInputNode: false,
+    }
+    for (const node of filteredNodes) {
+      const nodeType = (node.data as CommonNodeType | undefined)?.type
+      if (!nodeType)
+        continue
+      if (nodeType === BlockEnum.Start)
+        result.hasUserInputNode = true
+      if (isTriggerNode(nodeType))
+        result.hasTriggerNode = true
+      if (result.hasTriggerNode && result.hasUserInputNode)
+        break
+    }
+    return result
+  }, [filteredNodes])
+  // Default rule: user input option is only available when no Start node nor Trigger node exists on canvas.
+  const defaultAllowUserInputSelection = !hasUserInputNode && !hasTriggerNode
+  const canSelectUserInput = allowUserInputSelection ?? defaultAllowUserInputSelection
+  const open = openFromProps === undefined ? localOpen : openFromProps
+  const handleOpenChange = useCallback((newOpen: boolean) => {
+    setLocalOpen(newOpen)
+
+    if (!newOpen)
+      setSearchText('')
+
+    if (onOpenChange)
+      onOpenChange(newOpen)
+  }, [onOpenChange])
+  const handleTrigger = useCallback<MouseEventHandler<HTMLDivElement>>((e) => {
+    if (disabled)
+      return
+    e.stopPropagation()
+    handleOpenChange(!open)
+  }, [handleOpenChange, open, disabled])
+
+  const handleSelect = useCallback<OnSelectBlock>((type, pluginDefaultValue) => {
+    handleOpenChange(false)
+    onSelect(type, pluginDefaultValue)
+  }, [handleOpenChange, onSelect])
+
+  const {
+    activeTab,
+    setActiveTab,
+    tabs,
+  } = useTabs({
+    noBlocks,
+    noSources: !dataSources.length,
+    noTools,
+    noStart: !showStartTab,
+    defaultActiveTab,
+    hasUserInputNode,
+    forceEnableStartTab,
+  })
+
+  const handleActiveTabChange = useCallback((newActiveTab: TabsEnum) => {
+    setActiveTab(newActiveTab)
+  }, [setActiveTab])
+
+  const searchPlaceholder = useMemo(() => {
+    if (activeTab === TabsEnum.Start)
+      return t('workflow.tabs.searchTrigger')
+
+    if (activeTab === TabsEnum.Blocks)
+      return t('workflow.tabs.searchBlock')
+
+    if (activeTab === TabsEnum.Tools)
+      return t('workflow.tabs.searchTool')
+
+    if (activeTab === TabsEnum.Sources)
+      return t('workflow.tabs.searchDataSource')
+    return ''
+  }, [activeTab, t])
+
+  return (
+    <PortalToFollowElem
+      placement={placement}
+      offset={offset}
+      open={open}
+      onOpenChange={handleOpenChange}
+    >
+      <PortalToFollowElemTrigger
+        asChild={asChild}
+        onClick={handleTrigger}
+        className={triggerInnerClassName}
+      >
+        {
+          trigger
+            ? trigger(open)
+            : (
+              <div
+                className={`
+                  z-10 flex h-4
+                  w-4 cursor-pointer items-center justify-center rounded-full bg-components-button-primary-bg text-text-primary-on-surface hover:bg-components-button-primary-bg-hover
+                  ${triggerClassName?.(open)}
+                `}
+                style={triggerStyle}
+              >
+                <Plus02 className='h-2.5 w-2.5' />
+              </div>
+            )
+        }
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent className='z-[1000]'>
+        <div className={`rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg ${popupClassName}`}>
+          <Tabs
+            tabs={tabs}
+            activeTab={activeTab}
+            blocks={blocks}
+            allowStartNodeSelection={canSelectUserInput}
+            onActiveTabChange={handleActiveTabChange}
+            filterElem={
+              <div className='relative m-2' onClick={e => e.stopPropagation()}>
+                {activeTab === TabsEnum.Start && (
+                  <SearchBox
+                    autoFocus
+                    search={searchText}
+                    onSearchChange={setSearchText}
+                    tags={tags}
+                    onTagsChange={setTags}
+                    placeholder={searchPlaceholder}
+                    inputClassName='grow'
+                  />
+                )}
+                {activeTab === TabsEnum.Blocks && (
+                  <Input
+                    showLeftIcon
+                    showClearIcon
+                    autoFocus
+                    value={searchText}
+                    placeholder={searchPlaceholder}
+                    onChange={e => setSearchText(e.target.value)}
+                    onClear={() => setSearchText('')}
+                  />
+                )}
+                {activeTab === TabsEnum.Sources && (
+                  <Input
+                    showLeftIcon
+                    showClearIcon
+                    autoFocus
+                    value={searchText}
+                    placeholder={searchPlaceholder}
+                    onChange={e => setSearchText(e.target.value)}
+                    onClear={() => setSearchText('')}
+                  />
+                )}
+                {activeTab === TabsEnum.Tools && (
+                  <SearchBox
+                    autoFocus
+                    search={searchText}
+                    onSearchChange={setSearchText}
+                    tags={tags}
+                    onTagsChange={setTags}
+                    placeholder={t('plugin.searchTools')!}
+                    inputClassName='grow'
+                  />
+                )}
+              </div>
+            }
+            onSelect={handleSelect}
+            searchText={searchText}
+            tags={tags}
+            availableBlocksTypes={availableBlocksTypes}
+            noBlocks={noBlocks}
+            dataSources={dataSources}
+            noTools={noTools}
+            onTagsChange={setTags}
+            forceShowStartContent={forceShowStartContent}
+          />
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+
+export default memo(NodeSelector)

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

@@ -0,0 +1,99 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useTheme } from 'next-themes'
+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 { useDownloadPlugin } from '@/service/use-plugins'
+import { downloadFile } from '@/utils/format'
+import { getMarketplaceUrl } from '@/utils/var'
+import { useQueryClient } from '@tanstack/react-query'
+
+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 { theme } = useTheme()
+  const queryClient = useQueryClient()
+  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 downloadInfo = useMemo(() => ({
+    organization: author,
+    pluginName: name,
+    version,
+  }), [author, name, version])
+  const { data: blob, isLoading } = useDownloadPlugin(downloadInfo, needDownload)
+  const handleDownload = useCallback(() => {
+    if (isLoading) return
+    queryClient.removeQueries({
+      queryKey: ['plugins', 'downloadPlugin', downloadInfo],
+      exact: true,
+    })
+    setNeedDownload(true)
+  }, [downloadInfo, isLoading, queryClient])
+
+  useEffect(() => {
+    if (!needDownload || !blob)
+      return
+    const fileName = `${author}-${name}_${version}.zip`
+    downloadFile({ data: blob, fileName })
+    setNeedDownload(false)
+    queryClient.removeQueries({
+      queryKey: ['plugins', 'downloadPlugin', downloadInfo],
+      exact: true,
+    })
+  }, [author, blob, downloadInfo, name, needDownload, queryClient, version])
+  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='h-4 w-4 text-components-button-secondary-accent-text' />
+        </ActionButton>
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent className='z-[9999]'>
+        <div className='min-w-[176px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg'>
+          <div onClick={handleDownload} className='system-md-regular cursor-pointer rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover'>{t('common.operation.download')}</div>
+          <a href={getMarketplaceUrl(`/plugins/${author}/${name}`, { theme })} target='_blank' className='system-md-regular block cursor-pointer rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover'>{t('common.operation.viewDetails')}</a>
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+export default React.memo(OperationDropdown)

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

@@ -0,0 +1,82 @@
+'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 pl-3 pr-1 hover:bg-state-base-hover'>
+      <div
+        className='relative h-6 w-6 shrink-0 rounded-md border-[0.5px] border-components-panel-border-subtle bg-contain bg-center bg-no-repeat'
+        style={{ backgroundImage: `url(${payload.icon})` }}
+      />
+      <div className='ml-2 flex w-0 grow'>
+        <div className='w-0 grow'>
+          <div className='system-sm-medium h-4 truncate leading-4 text-text-primary '>{getLocalizedText(payload.label)}</div>
+          <div className='system-xs-regular h-5 truncate leading-5 text-text-tertiary'>{getLocalizedText(payload.brief)}</div>
+          <div className='system-xs-regular flex space-x-1 text-text-tertiary'>
+            <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', 'system-xs-medium h-4 items-center space-x-1 text-components-button-secondary-accent-text group-hover/plugin:flex')}>
+          <div
+            className='cursor-pointer rounded-md px-1.5 py-0.5 hover:bg-state-base-hover'
+            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)

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

@@ -0,0 +1,140 @@
+'use client'
+import { useEffect, useImperativeHandle, useMemo, useRef } from 'react'
+import type { RefObject } 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'
+import cn from '@/utils/classnames'
+import Link from 'next/link'
+import { RiArrowRightUpLine, RiSearchLine } from '@remixicon/react'
+import { noop } from 'lodash-es'
+import { getMarketplaceUrl } from '@/utils/var'
+
+export type ListProps = {
+  wrapElemRef: React.RefObject<HTMLElement | null>
+  list: Plugin[]
+  searchText: string
+  tags: string[]
+  toolContentClassName?: string
+  disableMaxWidth?: boolean
+  hideFindMoreFooter?: boolean
+  ref?: React.Ref<ListRef>
+}
+
+export type ListRef = { handleScroll: () => void }
+
+const List = ({
+  wrapElemRef,
+  searchText,
+  tags,
+  list,
+  toolContentClassName,
+  disableMaxWidth = false,
+  hideFindMoreFooter = false,
+  ref,
+}: ListProps) => {
+  const { t } = useTranslation()
+  const noFilter = !searchText && tags.length === 0
+  const hasRes = list.length > 0
+  const urlWithSearchText = getMarketplaceUrl('', { q: searchText, tags: tags.join(',') })
+  const nextToStickyELemRef = useRef<HTMLDivElement>(null)
+
+  const { handleScroll, scrollPosition } = useStickyScroll({
+    wrapElemRef,
+    nextToStickyELemRef: nextToStickyELemRef as RefObject<HTMLElement>,
+  })
+  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()
+  }, [list])
+
+  const handleHeadClick = () => {
+    if (scrollPosition === ScrollPosition.belowTheWrap) {
+      nextToStickyELemRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' })
+      return
+    }
+    window.open(urlWithSearchText, '_blank')
+  }
+
+  if (noFilter) {
+    if (hideFindMoreFooter)
+      return null
+
+    return (
+      <Link
+        className='system-sm-medium sticky bottom-0 z-10 flex h-8 cursor-pointer items-center rounded-b-lg border-[0.5px] border-t border-components-panel-border bg-components-panel-bg-blur px-4 py-1 text-text-accent-light-mode-only shadow-lg'
+        href={getMarketplaceUrl('')}
+        target='_blank'
+      >
+        <span>{t('plugin.findMoreInMarketplace')}</span>
+        <RiArrowRightUpLine className='ml-0.5 h-3 w-3' />
+      </Link>
+    )
+  }
+
+  const maxWidthClassName = toolContentClassName || 'max-w-[100%]'
+
+  return (
+    <>
+      {hasRes && (
+        <div
+          className={cn('system-sm-medium sticky z-10 flex h-8 cursor-pointer justify-between px-4 py-1 text-text-primary', 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 h-3 w-3' />
+          </Link>
+        </div>
+      )}
+      <div className={cn('p-1', !disableMaxWidth && maxWidthClassName)} ref={nextToStickyELemRef}>
+        {list.map((item, index) => (
+          <Item
+            key={index}
+            payload={item}
+            onAction={noop}
+          />
+        ))}
+        {hasRes && (
+          <div className='mb-3 mt-2 flex items-center justify-center space-x-2'>
+            <div className="h-[2px] w-[90px] 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='system-sm-medium flex h-4 shrink-0 items-center text-text-accent-light-mode-only'
+            >
+              <RiSearchLine className='mr-0.5 h-3 w-3' />
+              <span>{t('plugin.searchInMarketplace')}</span>
+            </Link>
+            <div className="h-[2px] w-[90px] 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

dify/web/app/components/workflow/block-selector/rag-tool-recommendations/index.tsx

@@ -0,0 +1,139 @@
+'use client'
+import type { Dispatch, SetStateAction } from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import { Trans, useTranslation } from 'react-i18next'
+import type { OnSelectBlock } from '@/app/components/workflow/types'
+import type { ViewType } from '@/app/components/workflow/block-selector/view-type-select'
+import { RiMoreLine } from '@remixicon/react'
+import Loading from '@/app/components/base/loading'
+import Link from 'next/link'
+import { getMarketplaceUrl } from '@/utils/var'
+import { useRAGRecommendedPlugins } from '@/service/use-tools'
+import List from './list'
+import { getFormattedPlugin } from '@/app/components/plugins/marketplace/utils'
+import { ArrowDownRoundFill } from '@/app/components/base/icons/src/vender/solid/arrows'
+
+type RAGToolRecommendationsProps = {
+  viewType: ViewType
+  onSelect: OnSelectBlock
+  onTagsChange: Dispatch<SetStateAction<string[]>>
+}
+
+const STORAGE_KEY = 'workflow_rag_recommendations_collapsed'
+
+const RAGToolRecommendations = ({
+  viewType,
+  onSelect,
+  onTagsChange,
+}: RAGToolRecommendationsProps) => {
+  const { t } = useTranslation()
+  const [isCollapsed, setIsCollapsed] = useState<boolean>(() => {
+    if (typeof window === 'undefined')
+      return false
+    const stored = window.localStorage.getItem(STORAGE_KEY)
+    return stored === 'true'
+  })
+
+  useEffect(() => {
+    if (typeof window === 'undefined')
+      return
+    const stored = window.localStorage.getItem(STORAGE_KEY)
+    if (stored !== null)
+      setIsCollapsed(stored === 'true')
+  }, [])
+
+  useEffect(() => {
+    if (typeof window === 'undefined')
+      return
+    window.localStorage.setItem(STORAGE_KEY, String(isCollapsed))
+  }, [isCollapsed])
+
+  const {
+    data: ragRecommendedPlugins,
+    isLoading: isLoadingRAGRecommendedPlugins,
+    isFetching: isFetchingRAGRecommendedPlugins,
+  } = useRAGRecommendedPlugins()
+
+  const recommendedPlugins = useMemo(() => {
+    if (ragRecommendedPlugins)
+      return ragRecommendedPlugins.installed_recommended_plugins
+    return []
+  }, [ragRecommendedPlugins])
+
+  const unInstalledPlugins = useMemo(() => {
+    if (ragRecommendedPlugins)
+      return (ragRecommendedPlugins.uninstalled_recommended_plugins).map(getFormattedPlugin)
+    return []
+  }, [ragRecommendedPlugins])
+
+  const loadMore = useCallback(() => {
+    onTagsChange((prev) => {
+      if (prev.includes('rag'))
+        return prev
+      return [...prev, 'rag']
+    })
+  }, [onTagsChange])
+
+  return (
+    <div className='flex flex-col p-1'>
+      <button
+        type='button'
+        className='flex w-full items-center rounded-md px-3 pb-0.5 pt-1 text-left text-text-tertiary'
+        onClick={() => setIsCollapsed(prev => !prev)}
+      >
+        <span className='system-xs-medium text-text-tertiary'>{t('pipeline.ragToolSuggestions.title')}</span>
+        <ArrowDownRoundFill className={`ml-1 h-4 w-4 text-text-tertiary transition-transform ${isCollapsed ? '-rotate-90' : 'rotate-0'}`} />
+      </button>
+      {!isCollapsed && (
+        <>
+          {/* For first time loading, show loading */}
+          {isLoadingRAGRecommendedPlugins && (
+            <div className='py-2'>
+              <Loading type='app' />
+            </div>
+          )}
+          {!isFetchingRAGRecommendedPlugins && recommendedPlugins.length === 0 && unInstalledPlugins.length === 0 && (
+            <p className='system-xs-regular px-3 py-1 text-text-tertiary'>
+              <Trans
+                i18nKey='pipeline.ragToolSuggestions.noRecommendationPlugins'
+                components={{
+                  CustomLink: (
+                    <Link
+                      className='text-text-accent'
+                      target='_blank'
+                      rel='noopener noreferrer'
+                      href={getMarketplaceUrl('', { tags: 'rag' })}
+                    />
+                  ),
+                }}
+              />
+            </p>
+          )}
+          {(recommendedPlugins.length > 0 || unInstalledPlugins.length > 0) && (
+            <>
+              <List
+                tools={recommendedPlugins}
+                unInstalledPlugins={unInstalledPlugins}
+                onSelect={onSelect}
+                viewType={viewType}
+              />
+              <div
+                className='flex cursor-pointer items-center gap-x-2 py-1 pl-3 pr-2'
+                onClick={loadMore}
+              >
+                <div className='px-1'>
+                  <RiMoreLine className='size-4 text-text-tertiary' />
+                </div>
+                <div className='system-xs-regular text-text-tertiary'>
+                  {t('common.operation.more')}
+                </div>
+              </div>
+            </>
+          )}
+        </>
+      )}
+    </div>
+  )
+}
+
+export default React.memo(RAGToolRecommendations)

dify/web/app/components/workflow/block-selector/rag-tool-recommendations/list.tsx

@@ -0,0 +1,104 @@
+import { useCallback, useMemo, useRef } from 'react'
+import type { BlockEnum, ToolWithProvider } from '../../types'
+import type { ToolDefaultValue } from '../types'
+import { ViewType } from '../view-type-select'
+import { useGetLanguage } from '@/context/i18n'
+import { groupItems } from '../index-bar'
+import cn from '@/utils/classnames'
+import ToolListTreeView from '../tool/tool-list-tree-view/list'
+import ToolListFlatView from '../tool/tool-list-flat-view/list'
+import UninstalledItem from './uninstalled-item'
+import type { Plugin } from '@/app/components/plugins/types'
+import type { OnSelectBlock } from '@/app/components/workflow/types'
+
+type ListProps = {
+  onSelect: OnSelectBlock
+  tools: ToolWithProvider[]
+  viewType: ViewType
+  unInstalledPlugins: Plugin[]
+  className?: string
+}
+
+const List = ({
+  onSelect,
+  tools,
+  viewType,
+  unInstalledPlugins,
+  className,
+}: ListProps) => {
+  const language = useGetLanguage()
+  const isFlatView = viewType === ViewType.flat
+
+  const { letters, groups: withLetterAndGroupViewToolsData } = groupItems(tools, tool => tool.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 toolRefs = useRef({})
+
+  const handleSelect = useCallback((type: BlockEnum, tool: ToolDefaultValue) => {
+    onSelect(type, tool)
+  }, [onSelect])
+
+  return (
+    <div className={cn('max-w-[100%] p-1', className)}>
+      {!!tools.length && (
+        isFlatView ? (
+          <ToolListFlatView
+            toolRefs={toolRefs}
+            letters={letters}
+            payload={listViewToolData}
+            isShowLetterIndex={false}
+            hasSearchText={false}
+            onSelect={handleSelect}
+            canNotSelectMultiple
+            indexBar={null}
+          />
+        ) : (
+          <ToolListTreeView
+            payload={treeViewToolsData}
+            hasSearchText={false}
+            onSelect={handleSelect}
+            canNotSelectMultiple
+          />
+        )
+      )}
+      {
+        unInstalledPlugins.map((item) => {
+          return (
+            <UninstalledItem
+              key={item.plugin_id}
+              payload={item}
+            />
+          )
+        })
+      }
+    </div>
+  )
+}
+
+export default List

dify/web/app/components/workflow/block-selector/rag-tool-recommendations/uninstalled-item.tsx

@@ -0,0 +1,63 @@
+'use client'
+import React from 'react'
+import { useContext } from 'use-context-selector'
+import { useTranslation } from 'react-i18next'
+import type { Plugin } from '@/app/components/plugins/types'
+import InstallFromMarketplace from '@/app/components/plugins/install-plugin/install-from-marketplace'
+import I18n from '@/context/i18n'
+import { useBoolean } from 'ahooks'
+import { BlockEnum } from '../../types'
+import BlockIcon from '../../block-icon'
+
+type UninstalledItemProps = {
+  payload: Plugin
+}
+
+const UninstalledItem = ({
+  payload,
+}: UninstalledItemProps) => {
+  const { t } = useTranslation()
+  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='flex h-8 items-center rounded-lg pl-3 pr-2 hover:bg-state-base-hover'>
+      <BlockIcon
+        className='shrink-0'
+        type={BlockEnum.Tool}
+        toolIcon={payload.icon}
+      />
+      <div className='ml-2 flex w-0 grow items-center'>
+        <div className='flex w-0 grow items-center gap-x-2'>
+          <span className='system-sm-regular truncate text-text-primary'>
+            {getLocalizedText(payload.label)}
+          </span>
+          <span className='system-xs-regular text-text-quaternary'>
+            {payload.org}
+          </span>
+        </div>
+        <div
+          className='system-xs-medium cursor-pointer pl-1.5 text-components-button-secondary-accent-text'
+          onClick={showInstallModal}
+        >
+          {t('plugin.installAction')}
+        </div>
+        {isShowInstallModal && (
+          <InstallFromMarketplace
+            uniqueIdentifier={payload.latest_package_identifier}
+            manifest={payload}
+            onSuccess={hideInstallModal}
+            onClose={hideInstallModal}
+          />
+        )}
+      </div>
+    </div>
+  )
+}
+export default React.memo(UninstalledItem)

dify/web/app/components/workflow/block-selector/start-blocks.tsx

@@ -0,0 +1,139 @@
+import {
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+} from 'react'
+import useNodes from '@/app/components/workflow/store/workflow/use-nodes'
+import { useTranslation } from 'react-i18next'
+import BlockIcon from '../block-icon'
+import type { BlockEnum, CommonNodeType } from '../types'
+import { BlockEnum as BlockEnumValues } from '../types'
+// import { useNodeMetaData } from '../hooks'
+import { START_BLOCKS } from './constants'
+import type { TriggerDefaultValue } from './types'
+import Tooltip from '@/app/components/base/tooltip'
+import { useAvailableNodesMetaData } from '../../workflow-app/hooks'
+
+type StartBlocksProps = {
+  searchText: string
+  onSelect: (type: BlockEnum, triggerDefaultValue?: TriggerDefaultValue) => void
+  availableBlocksTypes?: BlockEnum[]
+  onContentStateChange?: (hasContent: boolean) => void
+  hideUserInput?: boolean
+}
+
+const StartBlocks = ({
+  searchText,
+  onSelect,
+  availableBlocksTypes = [],
+  onContentStateChange,
+  hideUserInput = false, // Allow parent to explicitly hide Start node option (e.g. when one already exists).
+}: StartBlocksProps) => {
+  const { t } = useTranslation()
+  const nodes = useNodes()
+  // const nodeMetaData = useNodeMetaData()
+  const availableNodesMetaData = useAvailableNodesMetaData()
+
+  const filteredBlocks = useMemo(() => {
+    // Check if Start node already exists in workflow
+    const hasStartNode = nodes.some(node => (node.data as CommonNodeType)?.type === BlockEnumValues.Start)
+    const normalizedSearch = searchText.toLowerCase()
+    const getDisplayName = (blockType: BlockEnum) => {
+      if (blockType === BlockEnumValues.TriggerWebhook)
+        return t('workflow.customWebhook')
+
+      return t(`workflow.blocks.${blockType}`)
+    }
+
+    return START_BLOCKS.filter((block) => {
+      // Hide User Input (Start) if it already exists in workflow or if hideUserInput is true
+      if (block.type === BlockEnumValues.Start && (hasStartNode || hideUserInput))
+        return false
+
+      // Filter by search text
+      const displayName = getDisplayName(block.type).toLowerCase()
+      if (!displayName.includes(normalizedSearch) && !block.title.toLowerCase().includes(normalizedSearch))
+        return false
+
+      // availableBlocksTypes now contains properly filtered entry node types from parent
+      return availableBlocksTypes.includes(block.type)
+    })
+  }, [searchText, availableBlocksTypes, nodes, t, hideUserInput])
+
+  const isEmpty = filteredBlocks.length === 0
+
+  useEffect(() => {
+    onContentStateChange?.(!isEmpty)
+  }, [isEmpty, onContentStateChange])
+
+  const renderBlock = useCallback((block: { type: BlockEnum; title: string; description?: string }) => (
+    <Tooltip
+      key={block.type}
+      position='right'
+      popupClassName='w-[224px] rounded-xl'
+      needsDelay={false}
+      popupContent={(
+        <div>
+          <BlockIcon
+            size='md'
+            className='mb-2'
+            type={block.type}
+          />
+          <div className='system-md-medium mb-1 text-text-primary'>
+            {block.type === BlockEnumValues.TriggerWebhook
+              ? t('workflow.customWebhook')
+              : t(`workflow.blocks.${block.type}`)
+            }
+          </div>
+          <div className='system-xs-regular text-text-secondary'>
+            {t(`workflow.blocksAbout.${block.type}`)}
+          </div>
+          {(block.type === BlockEnumValues.TriggerWebhook || block.type === BlockEnumValues.TriggerSchedule) && (
+            <div className='system-xs-regular mb-1 mt-1 text-text-tertiary'>
+              {t('tools.author')} {t('workflow.difyTeam')}
+            </div>
+          )}
+        </div>
+      )}
+    >
+      <div
+        className='flex h-8 w-full cursor-pointer items-center rounded-lg px-3 hover:bg-state-base-hover'
+        onClick={() => onSelect(block.type)}
+      >
+        <BlockIcon
+          className='mr-2 shrink-0'
+          type={block.type}
+        />
+        <div className='flex w-0 grow items-center justify-between text-sm text-text-secondary'>
+          <span className='truncate'>{t(`workflow.blocks.${block.type}`)}</span>
+          {block.type === BlockEnumValues.Start && (
+            <span className='system-xs-regular ml-2 shrink-0 text-text-quaternary'>{t('workflow.blocks.originalStartNode')}</span>
+          )}
+        </div>
+      </div>
+    </Tooltip>
+  ), [availableNodesMetaData, onSelect, t])
+
+  if (isEmpty)
+    return null
+
+  return (
+    <div className='p-1'>
+      <div className='mb-1'>
+        {filteredBlocks.map((block, index) => (
+          <div key={block.type}>
+            {renderBlock(block)}
+            {block.type === BlockEnumValues.Start && index < filteredBlocks.length - 1 && (
+              <div className='my-1 px-3'>
+                <div className='border-t border-divider-subtle' />
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default memo(StartBlocks)

dify/web/app/components/workflow/block-selector/tabs.tsx

@@ -0,0 +1,242 @@
+import type { Dispatch, FC, SetStateAction } from 'react'
+import { memo, useEffect, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useAllBuiltInTools, useAllCustomTools, useAllMCPTools, useAllWorkflowTools, useInvalidateAllBuiltInTools } from '@/service/use-tools'
+import type {
+  BlockEnum,
+  NodeDefault,
+  OnSelectBlock,
+  ToolWithProvider,
+} from '../types'
+import { TabsEnum } from './types'
+import Blocks from './blocks'
+import AllStartBlocks from './all-start-blocks'
+import AllTools from './all-tools'
+import DataSources from './data-sources'
+import cn from '@/utils/classnames'
+import { useFeaturedToolsRecommendations } from '@/service/use-plugins'
+import { useGlobalPublicStore } from '@/context/global-public-context'
+import { useWorkflowStore } from '../store'
+import { basePath } from '@/utils/var'
+import Tooltip from '@/app/components/base/tooltip'
+
+export type TabsProps = {
+  activeTab: TabsEnum
+  onActiveTabChange: (activeTab: TabsEnum) => void
+  searchText: string
+  tags: string[]
+  onTagsChange: Dispatch<SetStateAction<string[]>>
+  onSelect: OnSelectBlock
+  availableBlocksTypes?: BlockEnum[]
+  blocks: NodeDefault[]
+  dataSources?: ToolWithProvider[]
+  tabs: Array<{
+    key: TabsEnum
+    name: string
+    disabled?: boolean
+  }>
+  filterElem: React.ReactNode
+  noBlocks?: boolean
+  noTools?: boolean
+  forceShowStartContent?: boolean // Force show Start content even when noBlocks=true
+  allowStartNodeSelection?: boolean // Allow user input option even when trigger node already exists (e.g. change-node flow or when no Start node yet).
+}
+const Tabs: FC<TabsProps> = ({
+  activeTab,
+  onActiveTabChange,
+  tags,
+  onTagsChange,
+  searchText,
+  onSelect,
+  availableBlocksTypes,
+  blocks,
+  dataSources = [],
+  tabs = [],
+  filterElem,
+  noBlocks,
+  noTools,
+  forceShowStartContent = false,
+  allowStartNodeSelection = false,
+}) => {
+  const { t } = useTranslation()
+  const { data: buildInTools } = useAllBuiltInTools()
+  const { data: customTools } = useAllCustomTools()
+  const { data: workflowTools } = useAllWorkflowTools()
+  const { data: mcpTools } = useAllMCPTools()
+  const invalidateBuiltInTools = useInvalidateAllBuiltInTools()
+  const { enable_marketplace } = useGlobalPublicStore(s => s.systemFeatures)
+  const workflowStore = useWorkflowStore()
+  const inRAGPipeline = dataSources.length > 0
+  const {
+    plugins: featuredPlugins = [],
+    isLoading: isFeaturedLoading,
+  } = useFeaturedToolsRecommendations(enable_marketplace && !inRAGPipeline)
+
+  const normalizeToolList = useMemo(() => {
+    return (list?: ToolWithProvider[]) => {
+      if (!list)
+        return list
+      if (!basePath)
+        return list
+      let changed = false
+      const normalized = list.map((provider) => {
+        if (typeof provider.icon === 'string') {
+          const icon = provider.icon
+          const shouldPrefix = Boolean(basePath)
+            && icon.startsWith('/')
+            && !icon.startsWith(`${basePath}/`)
+
+          if (shouldPrefix) {
+            changed = true
+            return {
+              ...provider,
+              icon: `${basePath}${icon}`,
+            }
+          }
+        }
+        return provider
+      })
+      return changed ? normalized : list
+    }
+  }, [basePath])
+
+  useEffect(() => {
+    workflowStore.setState((state) => {
+      const updates: Partial<typeof state> = {}
+      const normalizedBuiltIn = normalizeToolList(buildInTools)
+      const normalizedCustom = normalizeToolList(customTools)
+      const normalizedWorkflow = normalizeToolList(workflowTools)
+      const normalizedMCP = normalizeToolList(mcpTools)
+
+      if (normalizedBuiltIn !== undefined && state.buildInTools !== normalizedBuiltIn)
+        updates.buildInTools = normalizedBuiltIn
+      if (normalizedCustom !== undefined && state.customTools !== normalizedCustom)
+        updates.customTools = normalizedCustom
+      if (normalizedWorkflow !== undefined && state.workflowTools !== normalizedWorkflow)
+        updates.workflowTools = normalizedWorkflow
+      if (normalizedMCP !== undefined && state.mcpTools !== normalizedMCP)
+        updates.mcpTools = normalizedMCP
+      if (!Object.keys(updates).length)
+        return state
+      return {
+        ...state,
+        ...updates,
+      }
+    })
+  }, [workflowStore, normalizeToolList, buildInTools, customTools, workflowTools, mcpTools])
+
+  return (
+    <div onClick={e => e.stopPropagation()}>
+      {
+        !noBlocks && (
+          <div className='relative flex bg-background-section-burn pl-1 pt-1'>
+            {
+              tabs.map((tab) => {
+                const commonProps = {
+                  'className': cn(
+                    'system-sm-medium relative mr-0.5 flex h-8 items-center rounded-t-lg px-3',
+                    tab.disabled
+                      ? 'cursor-not-allowed text-text-disabled opacity-60'
+                      : activeTab === tab.key
+                        ? 'sm-no-bottom cursor-default bg-components-panel-bg text-text-accent'
+                        : 'cursor-pointer text-text-tertiary',
+                  ),
+                  'aria-disabled': tab.disabled,
+                  'onClick': () => {
+                    if (tab.disabled || activeTab === tab.key)
+                      return
+                    onActiveTabChange(tab.key)
+                  },
+                } as const
+                if (tab.disabled) {
+                  return (
+                    <Tooltip
+                      key={tab.key}
+                      position='top'
+                      popupClassName='max-w-[200px]'
+                      popupContent={t('workflow.tabs.startDisabledTip')}
+                    >
+                      <div {...commonProps}>
+                        {tab.name}
+                      </div>
+                    </Tooltip>
+                  )
+                }
+                return (
+                  <div
+                    key={tab.key}
+                    {...commonProps}
+                  >
+                    {tab.name}
+                  </div>
+                )
+              })
+            }
+          </div>
+        )
+      }
+      {filterElem}
+      {
+        activeTab === TabsEnum.Start && (!noBlocks || forceShowStartContent) && (
+          <div className='border-t border-divider-subtle'>
+            <AllStartBlocks
+              allowUserInputSelection={allowStartNodeSelection}
+              searchText={searchText}
+              onSelect={onSelect}
+              availableBlocksTypes={availableBlocksTypes}
+              tags={tags}
+            />
+          </div>
+        )
+      }
+      {
+        activeTab === TabsEnum.Blocks && !noBlocks && (
+          <div className='border-t border-divider-subtle'>
+            <Blocks
+              searchText={searchText}
+              onSelect={onSelect}
+              availableBlocksTypes={availableBlocksTypes}
+              blocks={blocks}
+            />
+          </div>
+        )
+      }
+      {
+        activeTab === TabsEnum.Sources && !!dataSources.length && (
+          <div className='border-t border-divider-subtle'>
+            <DataSources
+              searchText={searchText}
+              onSelect={onSelect}
+              dataSources={dataSources}
+            />
+          </div>
+        )
+      }
+      {
+        activeTab === TabsEnum.Tools && !noTools && (
+          <AllTools
+            searchText={searchText}
+            onSelect={onSelect}
+            tags={tags}
+            canNotSelectMultiple
+            buildInTools={buildInTools || []}
+            customTools={customTools || []}
+            workflowTools={workflowTools || []}
+            mcpTools={mcpTools || []}
+            canChooseMCPTool
+            onTagsChange={onTagsChange}
+            isInRAGPipeline={inRAGPipeline}
+            featuredPlugins={featuredPlugins}
+            featuredLoading={isFeaturedLoading}
+            showFeatured={enable_marketplace && !inRAGPipeline}
+            onFeaturedInstallSuccess={async () => {
+              invalidateBuiltInTools()
+            }}
+          />
+        )
+      }
+    </div>
+  )
+}
+
+export default memo(Tabs)

dify/web/app/components/workflow/block-selector/tool-picker.tsx

@@ -0,0 +1,218 @@
+'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, OnSelectBlock } 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'
+import {
+  createCustomCollection,
+} from '@/service/tools'
+import type { CustomCollectionBackend } from '@/app/components/tools/types'
+import Toast from '@/app/components/base/toast'
+import {
+  useAllBuiltInTools,
+  useAllCustomTools,
+  useAllMCPTools,
+  useAllWorkflowTools,
+  useInvalidateAllBuiltInTools,
+  useInvalidateAllCustomTools,
+  useInvalidateAllMCPTools,
+  useInvalidateAllWorkflowTools,
+} from '@/service/use-tools'
+import { useFeaturedToolsRecommendations } from '@/service/use-plugins'
+import { useGlobalPublicStore } from '@/context/global-public-context'
+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
+  onSelectMultiple: (tools: ToolDefaultValue[]) => void
+  supportAddCustomTool?: boolean
+  scope?: string
+  selectedTools?: ToolValue[]
+  canChooseMCPTool?: boolean
+}
+
+const ToolPicker: FC<Props> = ({
+  disabled,
+  trigger,
+  placement = 'right-start',
+  offset = 0,
+  isShow,
+  onShowChange,
+  onSelect,
+  onSelectMultiple,
+  supportAddCustomTool,
+  scope = 'all',
+  selectedTools,
+  panelClassName,
+  canChooseMCPTool,
+}) => {
+  const { t } = useTranslation()
+  const [searchText, setSearchText] = useState('')
+  const [tags, setTags] = useState<string[]>([])
+
+  const { enable_marketplace } = useGlobalPublicStore(s => s.systemFeatures)
+  const { data: buildInTools } = useAllBuiltInTools()
+  const { data: customTools } = useAllCustomTools()
+  const invalidateCustomTools = useInvalidateAllCustomTools()
+  const { data: workflowTools } = useAllWorkflowTools()
+  const { data: mcpTools } = useAllMCPTools()
+  const invalidateBuiltInTools = useInvalidateAllBuiltInTools()
+  const invalidateWorkflowTools = useInvalidateAllWorkflowTools()
+  const invalidateMcpTools = useInvalidateAllMCPTools()
+
+  const {
+    plugins: featuredPlugins = [],
+    isLoading: isFeaturedLoading,
+  } = useFeaturedToolsRecommendations(enable_marketplace)
+
+  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 handleSelectMultiple = (_type: BlockEnum, tools: ToolDefaultValue[]) => {
+    onSelectMultiple(tools)
+  }
+
+  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
+        dialogClassName='bg-background-overlay'
+        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 min-h-20 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-sm', panelClassName)}>
+          <div className='p-2 pb-1'>
+            <SearchBox
+              search={searchText}
+              onSearchChange={setSearchText}
+              tags={tags}
+              onTagsChange={setTags}
+              placeholder={t('plugin.searchTools')!}
+              supportAddCustomTool={supportAddCustomTool}
+              onAddedCustomTool={handleAddedCustomTool}
+              onShowAddCustomCollectionModal={showEditCustomCollectionModal}
+              inputClassName='grow'
+            />
+          </div>
+          <AllTools
+            className='mt-1'
+            toolContentClassName='max-w-[100%]'
+            tags={tags}
+            searchText={searchText}
+            onSelect={handleSelect as OnSelectBlock}
+            onSelectMultiple={handleSelectMultiple}
+            buildInTools={builtinToolList || []}
+            customTools={customToolList || []}
+            workflowTools={workflowToolList || []}
+            mcpTools={mcpTools || []}
+            selectedTools={selectedTools}
+            canChooseMCPTool={canChooseMCPTool}
+            onTagsChange={setTags}
+            featuredPlugins={featuredPlugins}
+            featuredLoading={isFeaturedLoading}
+            showFeatured={scope === 'all' && enable_marketplace}
+            onFeaturedInstallSuccess={async () => {
+              invalidateBuiltInTools()
+              invalidateCustomTools()
+              invalidateWorkflowTools()
+              invalidateMcpTools()
+            }}
+          />
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+
+export default React.memo(ToolPicker)

dify/web/app/components/workflow/block-selector/tool/action-item.tsx

@@ -0,0 +1,98 @@
+'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 { basePath } from '@/utils/var'
+
+const normalizeProviderIcon = (icon: ToolWithProvider['icon']) => {
+  if (typeof icon === 'string' && basePath && icon.startsWith('/') && !icon.startsWith(`${basePath}/`))
+    return `${basePath}${icon}`
+  return icon
+}
+
+type Props = {
+  provider: ToolWithProvider
+  payload: Tool
+  disabled?: boolean
+  isAdded?: boolean
+  onSelect: (type: BlockEnum, tool: ToolDefaultValue) => void
+}
+
+const ToolItem: FC<Props> = ({
+  provider,
+  payload,
+  onSelect,
+  disabled,
+  isAdded,
+}) => {
+  const { t } = useTranslation()
+
+  const language = useGetLanguage()
+
+  return (
+    <Tooltip
+      key={payload.name}
+      position='right'
+      needsDelay={false}
+      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 leading-[18px] text-text-secondary'>{payload.description[language]}</div>
+        </div>
+      )}
+    >
+      <div
+        key={payload.name}
+        className='flex cursor-pointer items-center justify-between rounded-lg pl-[21px] pr-1 hover:bg-state-base-hover'
+        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,
+            plugin_id: provider.plugin_id,
+            plugin_unique_identifier: provider.plugin_unique_identifier,
+            provider_icon: normalizeProviderIcon(provider.icon),
+            tool_name: payload.name,
+            tool_label: payload.label[language],
+            tool_description: payload.description[language],
+            title: payload.label[language],
+            is_team_authorization: provider.is_team_authorization,
+            paramSchemas: payload.parameters,
+            params,
+            meta: provider.meta,
+          })
+        }}
+      >
+        <div className={cn('system-sm-medium h-8 truncate border-l-2 border-divider-subtle pl-4 leading-8 text-text-secondary')}>
+          <span className={cn(disabled && 'opacity-30')}>{payload.label[language]}</span>
+        </div>
+        {isAdded && (
+          <div className='system-xs-regular mr-4 text-text-tertiary'>{t('tools.addToolModal.added')}</div>
+        )}
+      </div>
+    </Tooltip >
+  )
+}
+export default React.memo(ToolItem)

dify/web/app/components/workflow/block-selector/tool/tool-list-flat-view/list.tsx

@@ -0,0 +1,77 @@
+'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
+  indexBar: React.ReactNode
+  hasSearchText: boolean
+  onSelect: (type: BlockEnum, tool: ToolDefaultValue) => void
+  canNotSelectMultiple?: boolean
+  onSelectMultiple?: (type: BlockEnum, tools: ToolDefaultValue[]) => void
+  letters: string[]
+  toolRefs: any
+  selectedTools?: ToolValue[]
+  canChooseMCPTool?: boolean
+}
+
+const ToolViewFlatView: FC<Props> = ({
+  letters,
+  payload,
+  isShowLetterIndex,
+  indexBar,
+  hasSearchText,
+  onSelect,
+  canNotSelectMultiple,
+  onSelectMultiple,
+  toolRefs,
+  selectedTools,
+  canChooseMCPTool,
+}) => {
+  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 className='flex w-full'>
+      <div className='mr-1 grow'>
+        {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}
+              hasSearchText={hasSearchText}
+              onSelect={onSelect}
+              canNotSelectMultiple={canNotSelectMultiple}
+              onSelectMultiple={onSelectMultiple}
+              selectedTools={selectedTools}
+              canChooseMCPTool={canChooseMCPTool}
+            />
+          </div>
+        ))}
+      </div>
+      {isShowLetterIndex && indexBar}
+    </div>
+  )
+}
+
+export default React.memo(ToolViewFlatView)

dify/web/app/components/workflow/block-selector/tool/tool-list-tree-view/item.tsx

@@ -0,0 +1,55 @@
+'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
+  canNotSelectMultiple?: boolean
+  onSelectMultiple?: (type: BlockEnum, tools: ToolDefaultValue[]) => void
+  selectedTools?: ToolValue[]
+  canChooseMCPTool?: boolean
+}
+
+const Item: FC<Props> = ({
+  groupName,
+  toolList,
+  hasSearchText,
+  onSelect,
+  canNotSelectMultiple,
+  onSelectMultiple,
+  selectedTools,
+  canChooseMCPTool,
+}) => {
+  return (
+    <div>
+      <div className='flex h-[22px] items-center px-3 text-xs font-medium text-text-tertiary'>
+        {groupName}
+      </div>
+      <div>
+        {toolList.map((tool: ToolWithProvider) => (
+          <Tool
+            key={tool.id}
+            payload={tool}
+            viewType={ViewType.tree}
+            hasSearchText={hasSearchText}
+            onSelect={onSelect}
+            canNotSelectMultiple={canNotSelectMultiple}
+            onSelectMultiple={onSelectMultiple}
+            selectedTools={selectedTools}
+            canChooseMCPTool={canChooseMCPTool}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default React.memo(Item)

dify/web/app/components/workflow/block-selector/tool/tool-list-tree-view/list.tsx

@@ -0,0 +1,65 @@
+'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
+  canNotSelectMultiple?: boolean
+  onSelectMultiple?: (type: BlockEnum, tools: ToolDefaultValue[]) => void
+  selectedTools?: ToolValue[]
+  canChooseMCPTool?: boolean
+}
+
+const ToolListTreeView: FC<Props> = ({
+  payload,
+  hasSearchText,
+  onSelect,
+  canNotSelectMultiple,
+  onSelectMultiple,
+  selectedTools,
+  canChooseMCPTool,
+}) => {
+  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}
+          canNotSelectMultiple={canNotSelectMultiple}
+          onSelectMultiple={onSelectMultiple}
+          selectedTools={selectedTools}
+          canChooseMCPTool={canChooseMCPTool}
+        />
+      ))}
+    </div>
+  )
+}
+
+export default React.memo(ToolListTreeView)

dify/web/app/components/workflow/block-selector/tool/tool.tsx

@@ -0,0 +1,231 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback, useEffect, useMemo, useRef } 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 ActionItem from './action-item'
+import BlockIcon from '../../block-icon'
+import { useTranslation } from 'react-i18next'
+import { useHover } from 'ahooks'
+import McpToolNotSupportTooltip from '../../nodes/_base/components/mcp-tool-not-support-tooltip'
+import { Mcp } from '@/app/components/base/icons/src/vender/other'
+import { basePath } from '@/utils/var'
+
+const normalizeProviderIcon = (icon: ToolWithProvider['icon']) => {
+  if (typeof icon === 'string' && basePath && icon.startsWith('/') && !icon.startsWith(`${basePath}/`))
+    return `${basePath}${icon}`
+  return icon
+}
+
+type Props = {
+  className?: string
+  payload: ToolWithProvider
+  viewType: ViewType
+  hasSearchText: boolean
+  onSelect: (type: BlockEnum, tool: ToolDefaultValue) => void
+  canNotSelectMultiple?: boolean
+  onSelectMultiple?: (type: BlockEnum, tools: ToolDefaultValue[]) => void
+  selectedTools?: ToolValue[]
+  canChooseMCPTool?: boolean
+  isShowLetterIndex?: boolean
+}
+
+const Tool: FC<Props> = ({
+  className,
+  payload,
+  viewType,
+  hasSearchText,
+  onSelect,
+  canNotSelectMultiple,
+  onSelectMultiple,
+  selectedTools,
+  canChooseMCPTool,
+}) => {
+  const { t } = useTranslation()
+  const language = useGetLanguage()
+  const isFlatView = viewType === ViewType.flat
+  const notShowProvider = payload.type === CollectionType.workflow
+  const actions = payload.tools
+  const hasAction = !notShowProvider
+  const [isFold, setFold] = React.useState<boolean>(true)
+  const ref = useRef(null)
+  const isHovering = useHover(ref)
+  const isMCPTool = payload.type === CollectionType.mcp
+  const isShowCanNotChooseMCPTip = !canChooseMCPTool && isMCPTool
+  const getIsDisabled = useCallback((tool: ToolType) => {
+    if (!selectedTools || !selectedTools.length) return false
+    return selectedTools.some(selectedTool => (selectedTool.provider_name === payload.name || selectedTool.provider_name === payload.id) && selectedTool.tool_name === tool.name)
+  }, [payload.id, payload.name, selectedTools])
+
+  const totalToolsNum = actions.length
+  const selectedToolsNum = actions.filter(action => getIsDisabled(action)).length
+  const isAllSelected = selectedToolsNum === totalToolsNum
+
+  const notShowProviderSelectInfo = useMemo(() => {
+    if (isAllSelected) {
+      return (
+        <span className='system-xs-regular text-text-tertiary'>
+          {t('tools.addToolModal.added')}
+        </span>
+      )
+    }
+  }, [isAllSelected, t])
+  const selectedInfo = useMemo(() => {
+    if (isHovering && !isAllSelected) {
+      return (
+        <span className='system-xs-regular text-components-button-secondary-accent-text'
+          onClick={() => {
+            onSelectMultiple?.(BlockEnum.Tool, actions.filter(action => !getIsDisabled(action)).map((tool) => {
+              const params: Record<string, string> = {}
+              if (tool.parameters) {
+                tool.parameters.forEach((item) => {
+                  params[item.name] = ''
+                })
+              }
+              return {
+                provider_id: payload.id,
+                provider_type: payload.type,
+                provider_name: payload.name,
+                plugin_id: payload.plugin_id,
+                plugin_unique_identifier: payload.plugin_unique_identifier,
+                provider_icon: normalizeProviderIcon(payload.icon),
+                tool_name: tool.name,
+                tool_label: tool.label[language],
+                tool_description: tool.description[language],
+                title: tool.label[language],
+                is_team_authorization: payload.is_team_authorization,
+                paramSchemas: tool.parameters,
+                params,
+              }
+            }))
+          }}
+        >
+          {t('workflow.tabs.addAll')}
+        </span>
+      )
+    }
+
+    if (selectedToolsNum === 0)
+      return <></>
+
+    return (
+      <span className='system-xs-regular text-text-tertiary'>
+        {isAllSelected
+          ? t('workflow.tabs.allAdded')
+          : `${selectedToolsNum} / ${totalToolsNum}`
+        }
+      </span>
+    )
+  }, [actions, getIsDisabled, isAllSelected, isHovering, language, onSelectMultiple, payload.id, payload.is_team_authorization, payload.name, payload.type, selectedToolsNum, t, totalToolsNum])
+
+  useEffect(() => {
+    if (hasSearchText && isFold) {
+      setFold(false)
+      return
+    }
+    if (!hasSearchText && !isFold)
+      setFold(true)
+  }, [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')}
+      ref={ref}
+    >
+      <div className={cn(className)}>
+        <div
+          className='group/item flex w-full cursor-pointer select-none items-center justify-between rounded-lg pl-3 pr-1 hover:bg-state-base-hover'
+          onClick={() => {
+            if (hasAction) {
+              setFold(!isFold)
+              return
+            }
+
+            const tool = actions[0]
+            const params: Record<string, string> = {}
+            if (tool.parameters) {
+              tool.parameters.forEach((item) => {
+                params[item.name] = ''
+              })
+            }
+            onSelect(BlockEnum.Tool, {
+              provider_id: payload.id,
+              provider_type: payload.type,
+              provider_name: payload.name,
+              plugin_id: payload.plugin_id,
+              plugin_unique_identifier: payload.plugin_unique_identifier,
+              provider_icon: normalizeProviderIcon(payload.icon),
+              tool_name: tool.name,
+              tool_label: tool.label[language],
+              tool_description: tool.description[language],
+              title: tool.label[language],
+              is_team_authorization: payload.is_team_authorization,
+              paramSchemas: tool.parameters,
+              params,
+            })
+          }}
+        >
+          <div className={cn('flex h-8 grow items-center', isShowCanNotChooseMCPTip && 'opacity-30')}>
+            <BlockIcon
+              className='shrink-0'
+              type={BlockEnum.Tool}
+              toolIcon={payload.icon}
+            />
+            <div className='ml-2 flex w-0 grow items-center text-sm text-text-primary'>
+              <span className='max-w-[250px] truncate'>{notShowProvider ? actions[0]?.label[language] : payload.label[language]}</span>
+              {isFlatView && groupName && (
+                <span className='system-xs-regular ml-2 shrink-0 text-text-quaternary'>{groupName}</span>
+              )}
+              {isMCPTool && <Mcp className='ml-2 size-3.5 shrink-0 text-text-quaternary' />}
+            </div>
+          </div>
+
+          <div className='ml-2 flex items-center'>
+            {!isShowCanNotChooseMCPTip && !canNotSelectMultiple && (notShowProvider ? notShowProviderSelectInfo : selectedInfo)}
+            {isShowCanNotChooseMCPTip && <McpToolNotSupportTooltip />}
+            {hasAction && (
+              <FoldIcon className={cn('h-4 w-4 shrink-0 text-text-tertiary group-hover/item:text-text-tertiary', isFold && 'text-text-quaternary')} />
+            )}
+          </div>
+        </div>
+
+        {!notShowProvider && hasAction && !isFold && (
+          actions.map(action => (
+            <ActionItem
+              key={action.name}
+              provider={payload}
+              payload={action}
+              onSelect={onSelect}
+              disabled={getIsDisabled(action) || isShowCanNotChooseMCPTip}
+              isAdded={getIsDisabled(action)}
+            />
+          ))
+        )}
+      </div>
+    </div>
+  )
+}
+export default React.memo(Tool)

dify/web/app/components/workflow/block-selector/tools.tsx

@@ -0,0 +1,131 @@
+import { memo, useMemo, useRef } from 'react'
+import type { BlockEnum, ToolWithProvider } from '../types'
+import IndexBar, { groupItems } from './index-bar'
+import type { ToolDefaultValue, ToolValue } from './types'
+import type { ToolTypeEnum } from './types'
+import { ViewType } from './view-type-select'
+import Empty from '@/app/components/tools/provider/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 = {
+  onSelect: (type: BlockEnum, tool: ToolDefaultValue) => void
+  canNotSelectMultiple?: boolean
+  onSelectMultiple?: (type: BlockEnum, tools: ToolDefaultValue[]) => void
+  tools: ToolWithProvider[]
+  viewType: ViewType
+  hasSearchText: boolean
+  toolType?: ToolTypeEnum
+  isAgent?: boolean
+  className?: string
+  indexBarClassName?: string
+  selectedTools?: ToolValue[]
+  canChooseMCPTool?: boolean
+}
+const Tools = ({
+  onSelect,
+  canNotSelectMultiple,
+  onSelectMultiple,
+  tools,
+  viewType,
+  hasSearchText,
+  toolType,
+  isAgent,
+  className,
+  indexBarClassName,
+  selectedTools,
+  canChooseMCPTool,
+}: ToolsProps) => {
+  // const tools: any = []
+  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.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 toolRefs = useRef({})
+
+  return (
+    <div className={classNames('max-w-[100%] p-1', className)}>
+      {!tools.length && !hasSearchText && (
+        <div className='py-10'>
+          <Empty type={toolType!} isAgent={isAgent} />
+        </div>
+      )}
+      {!!tools.length && (
+        isFlatView ? (
+          <ToolListFlatView
+            toolRefs={toolRefs}
+            letters={letters}
+            payload={listViewToolData}
+            isShowLetterIndex={isShowLetterIndex}
+            hasSearchText={hasSearchText}
+            onSelect={onSelect}
+            canNotSelectMultiple={canNotSelectMultiple}
+            onSelectMultiple={onSelectMultiple}
+            selectedTools={selectedTools}
+            canChooseMCPTool={canChooseMCPTool}
+            indexBar={<IndexBar letters={letters} itemRefs={toolRefs} className={indexBarClassName} />}
+          />
+        ) : (
+          <ToolListTreeView
+            payload={treeViewToolsData}
+            hasSearchText={hasSearchText}
+            onSelect={onSelect}
+            canNotSelectMultiple={canNotSelectMultiple}
+            onSelectMultiple={onSelectMultiple}
+            selectedTools={selectedTools}
+            canChooseMCPTool={canChooseMCPTool}
+          />
+        )
+      )}
+    </div>
+  )
+}
+
+export default memo(Tools)

dify/web/app/components/workflow/block-selector/trigger-plugin/action-item.tsx

@@ -0,0 +1,90 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import type { TriggerWithProvider } from '../types'
+import type { Event } from '@/app/components/tools/types'
+import { BlockEnum } from '../../types'
+import type { TriggerDefaultValue } from '../types'
+import Tooltip from '@/app/components/base/tooltip'
+import { useGetLanguage } from '@/context/i18n'
+import BlockIcon from '../../block-icon'
+import cn from '@/utils/classnames'
+import { useTranslation } from 'react-i18next'
+
+type Props = {
+  provider: TriggerWithProvider
+  payload: Event
+  disabled?: boolean
+  isAdded?: boolean
+  onSelect: (type: BlockEnum, trigger?: TriggerDefaultValue) => void
+}
+
+const TriggerPluginActionItem: FC<Props> = ({
+  provider,
+  payload,
+  onSelect,
+  disabled,
+  isAdded,
+}) => {
+  const { t } = useTranslation()
+  const language = useGetLanguage()
+
+  return (
+    <Tooltip
+      key={payload.name}
+      position='right'
+      needsDelay={false}
+      popupClassName='!p-0 !px-3 !py-2.5 !w-[224px] !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.TriggerPlugin}
+            toolIcon={provider.icon}
+          />
+          <div className='mb-1 text-sm leading-5 text-text-primary'>{payload.label[language]}</div>
+          <div className='text-xs leading-[18px] text-text-secondary'>{payload.description[language]}</div>
+        </div>
+      )}
+    >
+      <div
+        key={payload.name}
+        className='flex cursor-pointer items-center justify-between rounded-lg pl-[21px] pr-1 hover:bg-state-base-hover'
+        onClick={() => {
+          if (disabled) return
+          const params: Record<string, string> = {}
+          if (payload.parameters) {
+            payload.parameters.forEach((item: any) => {
+              params[item.name] = ''
+            })
+          }
+          onSelect(BlockEnum.TriggerPlugin, {
+            plugin_id: provider.plugin_id,
+            provider_id: provider.name,
+            provider_type: provider.type as string,
+            provider_name: provider.name,
+            event_name: payload.name,
+            event_label: payload.label[language],
+            event_description: payload.description[language],
+            plugin_unique_identifier: provider.plugin_unique_identifier,
+            title: payload.label[language],
+            is_team_authorization: provider.is_team_authorization,
+            output_schema: payload.output_schema || {},
+            paramSchemas: payload.parameters,
+            params,
+            meta: provider.meta,
+          })
+        }}
+      >
+        <div className={cn('system-sm-medium h-8 truncate border-l-2 border-divider-subtle pl-4 leading-8 text-text-secondary')}>
+          <span className={cn(disabled && 'opacity-30')}>{payload.label[language]}</span>
+        </div>
+        {isAdded && (
+          <div className='system-xs-regular mr-4 text-text-tertiary'>{t('tools.addToolModal.added')}</div>
+        )}
+      </div>
+    </Tooltip >
+  )
+}
+export default React.memo(TriggerPluginActionItem)

dify/web/app/components/workflow/block-selector/trigger-plugin/item.tsx

@@ -0,0 +1,133 @@
+'use client'
+import { useGetLanguage } from '@/context/i18n'
+import cn from '@/utils/classnames'
+import { RiArrowDownSLine, RiArrowRightSLine } from '@remixicon/react'
+import type { FC } from 'react'
+import React, { useEffect, useMemo, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import { CollectionType } from '@/app/components/tools/types'
+import BlockIcon from '@/app/components/workflow/block-icon'
+import { BlockEnum } from '@/app/components/workflow/types'
+import type { TriggerDefaultValue, TriggerWithProvider } from '@/app/components/workflow/block-selector/types'
+import TriggerPluginActionItem from './action-item'
+
+type Props = {
+  className?: string
+  payload: TriggerWithProvider
+  hasSearchText: boolean
+  onSelect: (type: BlockEnum, trigger?: TriggerDefaultValue) => void
+}
+
+const TriggerPluginItem: FC<Props> = ({
+  className,
+  payload,
+  hasSearchText,
+  onSelect,
+}) => {
+  const { t } = useTranslation()
+  const language = useGetLanguage()
+  const notShowProvider = payload.type === CollectionType.workflow
+  const actions = payload.events
+  const hasAction = !notShowProvider
+  const [isFold, setFold] = React.useState<boolean>(true)
+  const ref = useRef(null)
+
+  useEffect(() => {
+    if (hasSearchText && isFold) {
+      setFold(false)
+      return
+    }
+    if (!hasSearchText && !isFold)
+      setFold(true)
+  }, [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.author, payload.type, t])
+
+  return (
+    <div
+      key={payload.id}
+      className={cn('mb-1 last-of-type:mb-0')}
+      ref={ref}
+    >
+      <div className={cn(className)}>
+        <div
+          className='group/item flex w-full cursor-pointer select-none items-center justify-between rounded-lg pl-3 pr-1 hover:bg-state-base-hover'
+          onClick={() => {
+            if (hasAction) {
+              setFold(!isFold)
+              return
+            }
+
+            const event = actions[0]
+            const params: Record<string, string> = {}
+            if (event.parameters) {
+              event.parameters.forEach((item: any) => {
+                params[item.name] = ''
+              })
+            }
+            onSelect(BlockEnum.TriggerPlugin, {
+              plugin_id: payload.plugin_id,
+              provider_id: payload.name,
+              provider_type: payload.type,
+              provider_name: payload.name,
+              event_name: event.name,
+              event_label: event.label[language],
+              event_description: event.description[language],
+              title: event.label[language],
+              plugin_unique_identifier: payload.plugin_unique_identifier,
+              is_team_authorization: payload.is_team_authorization,
+              output_schema: event.output_schema || {},
+              paramSchemas: event.parameters,
+              params,
+            })
+          }}
+        >
+          <div className='flex h-8 grow items-center'>
+            <BlockIcon
+              className='shrink-0'
+              type={BlockEnum.TriggerPlugin}
+              toolIcon={payload.icon}
+            />
+            <div className='ml-2 flex min-w-0 flex-1 items-center text-sm text-text-primary'>
+              <span className='max-w-[200px] truncate'>{notShowProvider ? actions[0]?.label[language] : payload.label[language]}</span>
+              <span className='system-xs-regular ml-2 truncate text-text-quaternary'>{groupName}</span>
+            </div>
+          </div>
+
+          <div className='ml-2 flex items-center'>
+            {hasAction && (
+              <FoldIcon className={cn('h-4 w-4 shrink-0 text-text-tertiary group-hover/item:text-text-tertiary', isFold && 'text-text-quaternary')} />
+            )}
+          </div>
+        </div>
+
+        {!notShowProvider && hasAction && !isFold && (
+          actions.map(action => (
+            <TriggerPluginActionItem
+              key={action.name}
+              provider={payload}
+              payload={action}
+              onSelect={onSelect}
+              disabled={false}
+              isAdded={false}
+            />
+          ))
+        )}
+      </div>
+    </div>
+  )
+}
+export default React.memo(TriggerPluginItem)

dify/web/app/components/workflow/block-selector/trigger-plugin/list.tsx

@@ -0,0 +1,105 @@
+'use client'
+import { memo, useEffect, useMemo } from 'react'
+import { useAllTriggerPlugins } from '@/service/use-triggers'
+import TriggerPluginItem from './item'
+import type { BlockEnum } from '../../types'
+import type { TriggerDefaultValue, TriggerWithProvider } from '../types'
+import { useGetLanguage } from '@/context/i18n'
+
+type TriggerPluginListProps = {
+  onSelect: (type: BlockEnum, trigger?: TriggerDefaultValue) => void
+  searchText: string
+  onContentStateChange?: (hasContent: boolean) => void
+  tags?: string[]
+}
+
+const TriggerPluginList = ({
+  onSelect,
+  searchText,
+  onContentStateChange,
+}: TriggerPluginListProps) => {
+  const { data: triggerPluginsData } = useAllTriggerPlugins()
+  const language = useGetLanguage()
+
+  const normalizedSearch = searchText.trim().toLowerCase()
+  const triggerPlugins = useMemo(() => {
+    const plugins = triggerPluginsData || []
+    const getLocalizedText = (text?: Record<string, string> | null) => {
+      if (!text)
+        return ''
+
+      if (text[language])
+        return text[language]
+
+      if (text['en-US'])
+        return text['en-US']
+
+      const firstValue = Object.values(text).find(Boolean)
+      return (typeof firstValue === 'string') ? firstValue : ''
+    }
+    const getSearchableTexts = (name: string, label?: Record<string, string> | null) => {
+      const localized = getLocalizedText(label)
+      const values = [localized, name].filter(Boolean)
+      return values.length > 0 ? values : ['']
+    }
+    const isMatchingKeywords = (value: string) => value.toLowerCase().includes(normalizedSearch)
+
+    if (!normalizedSearch)
+      return plugins.filter(triggerWithProvider => triggerWithProvider.events.length > 0)
+
+    return plugins.reduce<TriggerWithProvider[]>((acc, triggerWithProvider) => {
+      if (triggerWithProvider.events.length === 0)
+        return acc
+
+      const providerMatches = getSearchableTexts(
+        triggerWithProvider.name,
+        triggerWithProvider.label,
+      ).some(text => isMatchingKeywords(text))
+
+      if (providerMatches) {
+        acc.push(triggerWithProvider)
+        return acc
+      }
+
+      const matchedEvents = triggerWithProvider.events.filter((event) => {
+        return getSearchableTexts(
+          event.name,
+          event.label,
+        ).some(text => isMatchingKeywords(text))
+      })
+
+      if (matchedEvents.length > 0) {
+        acc.push({
+          ...triggerWithProvider,
+          events: matchedEvents,
+        })
+      }
+
+      return acc
+    }, [])
+  }, [triggerPluginsData, normalizedSearch, language])
+
+  const hasContent = triggerPlugins.length > 0
+
+  useEffect(() => {
+    onContentStateChange?.(hasContent)
+  }, [hasContent, onContentStateChange])
+
+  if (!hasContent)
+    return null
+
+  return (
+    <div className="p-1">
+      {triggerPlugins.map(plugin => (
+        <TriggerPluginItem
+          key={plugin.id}
+          payload={plugin}
+          onSelect={onSelect}
+          hasSearchText={!!searchText}
+        />
+      ))}
+    </div>
+  )
+}
+
+export default memo(TriggerPluginList)

dify/web/app/components/workflow/block-selector/types.ts

@@ -0,0 +1,338 @@
+import type { TypeWithI18N } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import type { ParametersSchema, PluginMeta, PluginTriggerSubscriptionConstructor, SupportedCreationMethods, TriggerEvent } from '../../plugins/types'
+import type { Collection, Event } from '../../tools/types'
+
+export enum TabsEnum {
+  Start = 'start',
+  Blocks = 'blocks',
+  Tools = 'tools',
+  Sources = 'sources',
+}
+
+export enum ToolTypeEnum {
+  All = 'all',
+  BuiltIn = 'built-in',
+  Custom = 'custom',
+  Workflow = 'workflow',
+  MCP = 'mcp',
+}
+
+export enum BlockClassificationEnum {
+  Default = '-',
+  QuestionUnderstand = 'question-understand',
+  Logic = 'logic',
+  Transform = 'transform',
+  Utilities = 'utilities',
+}
+
+type PluginCommonDefaultValue = {
+  provider_id: string
+  provider_type: string
+  provider_name: string
+}
+
+export type TriggerDefaultValue = PluginCommonDefaultValue & {
+  plugin_id?: string
+  event_name: string
+  event_label: string
+  event_description: string
+  title: string
+  plugin_unique_identifier: string
+  is_team_authorization: boolean
+  params: Record<string, any>
+  paramSchemas: Record<string, any>[]
+  output_schema: Record<string, any>
+  subscription_id?: string
+  meta?: PluginMeta
+}
+
+export type ToolDefaultValue = PluginCommonDefaultValue & {
+  tool_name: string
+  tool_label: string
+  tool_description: string
+  title: string
+  is_team_authorization: boolean
+  params: Record<string, any>
+  paramSchemas: Record<string, any>[]
+  output_schema?: Record<string, any>
+  credential_id?: string
+  meta?: PluginMeta
+  plugin_id?: string
+  provider_icon?: Collection['icon']
+  plugin_unique_identifier?: string
+}
+
+export type DataSourceDefaultValue = Omit<PluginCommonDefaultValue, 'provider_id'> & {
+  plugin_id: string
+  provider_type: string
+  provider_name: string
+  datasource_name: string
+  datasource_label: string
+  title: string
+  fileExtensions?: string[]
+  plugin_unique_identifier?: string
+}
+
+export type PluginDefaultValue = ToolDefaultValue | DataSourceDefaultValue | TriggerDefaultValue
+
+export type ToolValue = {
+  provider_name: string
+  provider_show_name?: string
+  tool_name: string
+  tool_label: string
+  tool_description?: string
+  settings?: Record<string, any>
+  parameters?: Record<string, any>
+  enabled?: boolean
+  extra?: Record<string, any>
+  credential_id?: string
+}
+
+export type DataSourceItem = {
+  plugin_id: string
+  plugin_unique_identifier: string
+  provider: string
+  declaration: {
+    credentials_schema: any[]
+    provider_type: string
+    identity: {
+      author: string
+      description: TypeWithI18N
+      icon: string | { background: string; content: string }
+      label: TypeWithI18N
+      name: string
+      tags: string[]
+    }
+    datasources: {
+      description: TypeWithI18N
+      identity: {
+        author: string
+        icon?: string | { background: string; content: string }
+        label: TypeWithI18N
+        name: string
+        provider: string
+      }
+      parameters: any[]
+      output_schema?: {
+        type: string
+        properties: Record<string, any>
+      }
+    }[]
+  }
+  is_authorized: boolean
+}
+
+// Backend API types - exact match with Python definitions
+export type TriggerParameter = {
+  multiple: boolean
+  name: string
+  label: TypeWithI18N
+  description?: TypeWithI18N
+  type: 'string' | 'number' | 'boolean' | 'select' | 'file' | 'files'
+  | 'model-selector' | 'app-selector' | 'object' | 'array' | 'dynamic-select'
+  auto_generate?: {
+    type: string
+    value?: any
+  } | null
+  template?: {
+    type: string
+    value?: any
+  } | null
+  scope?: string | null
+  required?: boolean
+  default?: any
+  min?: number | null
+  max?: number | null
+  precision?: number | null
+  options?: Array<{
+    value: string
+    label: TypeWithI18N
+    icon?: string | null
+  }> | null
+}
+
+export type TriggerCredentialField = {
+  type: 'secret-input' | 'text-input' | 'select' | 'boolean'
+  | 'app-selector' | 'model-selector' | 'tools-selector'
+  name: string
+  scope?: string | null
+  required: boolean
+  default?: string | number | boolean | Array<any> | null
+  options?: Array<{
+    value: string
+    label: TypeWithI18N
+  }> | null
+  label: TypeWithI18N
+  help?: TypeWithI18N
+  url?: string | null
+  placeholder?: TypeWithI18N
+}
+
+export type TriggerSubscriptionSchema = {
+  parameters_schema: TriggerParameter[]
+  properties_schema: TriggerCredentialField[]
+}
+
+export type TriggerIdentity = {
+  author: string
+  name: string
+  label: TypeWithI18N
+  provider: string
+}
+
+export type TriggerDescription = {
+  human: TypeWithI18N
+  llm: TypeWithI18N
+}
+
+export type TriggerApiEntity = {
+  name: string
+  identity: TriggerIdentity
+  description: TypeWithI18N
+  parameters: TriggerParameter[]
+  output_schema?: Record<string, any>
+}
+
+export type TriggerProviderApiEntity = {
+  author: string
+  name: string
+  label: TypeWithI18N
+  description: TypeWithI18N
+  icon?: string
+  icon_dark?: string
+  tags: string[]
+  plugin_id?: string
+  plugin_unique_identifier: string
+  supported_creation_methods: SupportedCreationMethods[]
+  credentials_schema?: TriggerCredentialField[]
+  subscription_constructor?: PluginTriggerSubscriptionConstructor | null
+  subscription_schema: ParametersSchema[]
+  events: TriggerEvent[]
+}
+
+// Frontend types - compatible with ToolWithProvider
+export type TriggerWithProvider = Collection & {
+  events: Event[]
+  meta: PluginMeta
+  plugin_unique_identifier: string
+  credentials_schema?: TriggerCredentialField[]
+  subscription_constructor?: PluginTriggerSubscriptionConstructor | null
+  subscription_schema?: ParametersSchema[]
+  supported_creation_methods: SupportedCreationMethods[]
+}
+
+// ===== API Service Types =====
+
+// Trigger subscription instance types
+
+export enum TriggerCredentialTypeEnum {
+  ApiKey = 'api-key',
+  Oauth2 = 'oauth2',
+  Unauthorized = 'unauthorized',
+}
+
+type TriggerSubscriptionStructure = {
+  id: string
+  name: string
+  provider: string
+  credential_type: TriggerCredentialTypeEnum
+  credentials: TriggerSubCredentials
+  endpoint: string
+  parameters: TriggerSubParameters
+  properties: TriggerSubProperties
+  workflows_in_use: number
+}
+
+export type TriggerSubscription = TriggerSubscriptionStructure
+
+export type TriggerSubCredentials = {
+  access_tokens: string
+}
+
+export type TriggerSubParameters = {
+  repository: string
+  webhook_secret?: string
+}
+
+export type TriggerSubProperties = {
+  active: boolean
+  events: string[]
+  external_id: string
+  repository: string
+  webhook_secret?: string
+}
+
+export type TriggerSubscriptionBuilder = TriggerSubscriptionStructure
+
+// OAuth configuration types
+export type TriggerOAuthConfig = {
+  configured: boolean
+  custom_configured: boolean
+  custom_enabled: boolean
+  redirect_uri: string
+  oauth_client_schema: ParametersSchema[]
+  params: {
+    client_id: string
+    client_secret: string
+    [key: string]: any
+  }
+  system_configured: boolean
+}
+
+export type TriggerOAuthClientParams = {
+  client_id: string
+  client_secret: string
+  authorization_url?: string
+  token_url?: string
+  scope?: string
+}
+
+export type TriggerOAuthResponse = {
+  authorization_url: string
+  subscription_builder: TriggerSubscriptionBuilder
+}
+
+export type TriggerLogEntity = {
+  id: string
+  endpoint: string
+  request: LogRequest
+  response: LogResponse
+  created_at: string
+}
+
+export type LogRequest = {
+  method: string
+  url: string
+  headers: LogRequestHeaders
+  data: string
+}
+
+export type LogRequestHeaders = {
+  'Host': string
+  'User-Agent': string
+  'Content-Length': string
+  'Accept': string
+  'Content-Type': string
+  'X-Forwarded-For': string
+  'X-Forwarded-Host': string
+  'X-Forwarded-Proto': string
+  'X-Github-Delivery': string
+  'X-Github-Event': string
+  'X-Github-Hook-Id': string
+  'X-Github-Hook-Installation-Target-Id': string
+  'X-Github-Hook-Installation-Target-Type': string
+  'Accept-Encoding': string
+  [key: string]: string
+}
+
+export type LogResponse = {
+  status_code: number
+  headers: LogResponseHeaders
+  data: string
+}
+
+export type LogResponseHeaders = {
+  'Content-Type': string
+  'Content-Length': string
+  [key: string]: string
+}

dify/web/app/components/workflow/block-selector/use-check-vertical-scrollbar.ts

@@ -0,0 +1,31 @@
+import { useEffect, useState } from 'react'
+
+const useCheckVerticalScrollbar = (ref: React.RefObject<HTMLElement>) => {
+  const [hasVerticalScrollbar, setHasVerticalScrollbar] = useState(false)
+
+  useEffect(() => {
+    const elem = ref.current
+    if (!elem) return
+
+    const checkScrollbar = () => {
+      setHasVerticalScrollbar(elem.scrollHeight > elem.clientHeight)
+    }
+
+    checkScrollbar()
+
+    const resizeObserver = new ResizeObserver(checkScrollbar)
+    resizeObserver.observe(elem)
+
+    const mutationObserver = new MutationObserver(checkScrollbar)
+    mutationObserver.observe(elem, { childList: true, subtree: true, characterData: true })
+
+    return () => {
+      resizeObserver.disconnect()
+      mutationObserver.disconnect()
+    }
+  }, [ref])
+
+  return hasVerticalScrollbar
+}
+
+export default useCheckVerticalScrollbar

dify/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 | null>
+  nextToStickyELemRef: React.RefObject<HTMLElement | null>
+}
+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
+
+    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

dify/web/app/components/workflow/block-selector/utils.ts

@@ -0,0 +1,37 @@
+import type { Tool } from '@/app/components/tools/types'
+import type { DataSourceItem } from './types'
+
+export const transformDataSourceToTool = (dataSourceItem: DataSourceItem) => {
+  return {
+    id: dataSourceItem.plugin_id,
+    provider: dataSourceItem.provider,
+    name: dataSourceItem.provider,
+    author: dataSourceItem.declaration.identity.author,
+    description: dataSourceItem.declaration.identity.description,
+    icon: dataSourceItem.declaration.identity.icon,
+    label: dataSourceItem.declaration.identity.label,
+    type: dataSourceItem.declaration.provider_type,
+    team_credentials: {},
+    allow_delete: true,
+    is_team_authorization: dataSourceItem.is_authorized,
+    is_authorized: dataSourceItem.is_authorized,
+    labels: dataSourceItem.declaration.identity.tags || [],
+    plugin_id: dataSourceItem.plugin_id,
+    plugin_unique_identifier: dataSourceItem.plugin_unique_identifier,
+    tools: dataSourceItem.declaration.datasources.map((datasource) => {
+      return {
+        name: datasource.identity.name,
+        author: datasource.identity.author,
+        label: datasource.identity.label,
+        description: datasource.description,
+        parameters: datasource.parameters,
+        labels: [],
+        output_schema: datasource.output_schema,
+      } as Tool
+    }),
+    credentialsSchema: dataSourceItem.declaration.credentials_schema || [],
+    meta: {
+      version: '',
+    },
+  }
+}

dify/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('rounded-lg p-[3px]',
+            viewType === ViewType.flat
+              ? 'bg-components-segmented-control-item-active-bg text-text-accent-light-mode-only shadow-xs'
+              : 'cursor-pointer text-text-tertiary',
+          )
+        }
+        onClick={handleChange(ViewType.flat)}
+      >
+        <RiSortAlphabetAsc className='h-4 w-4' />
+      </div>
+      <div
+        className={
+          cn('rounded-lg p-[3px]',
+            viewType === ViewType.tree
+              ? 'bg-components-segmented-control-item-active-bg text-text-accent-light-mode-only shadow-xs'
+              : 'cursor-pointer text-text-tertiary',
+          )
+        }
+        onClick={handleChange(ViewType.tree)}
+      >
+        <RiNodeTree className='h-4 w-4 ' />
+      </div>
+    </div>
+  )
+}
+export default React.memo(ViewTypeSelect)