fix: workflow search blocks (#7097)

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

@@ -5,6 +5,7 @@ import type {
 import {
  memo,
  useCallback,
+ useMemo,
  useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -17,6 +18,7 @@ import {
 } from '@remixicon/react'
 import type { BlockEnum, OnSelectBlock } from '../types'
 import Tabs from './tabs'
+import { TabsEnum } from './types'
 import {
  PortalToFollowElem,
  PortalToFollowElemContent,
@@ -66,6 +68,9 @@ const NodeSelector: FC<NodeSelectorProps> = ({
  const handleOpenChange = useCallback((newOpen: boolean) => {
  setLocalOpen(newOpen)
 
+ if (!newOpen)
+ setSearchText('')
+
  if (onOpenChange)
  onOpenChange(newOpen)
  }, [onOpenChange])
@@ -80,6 +85,19 @@ const NodeSelector: FC<NodeSelectorProps> = ({
  onSelect(type, toolDefaultValue)
  }, [handleOpenChange, onSelect])
 
+ const [activeTab, setActiveTab] = useState(noBlocks ? TabsEnum.Tools : TabsEnum.Blocks)
+ const handleActiveTabChange = useCallback((newActiveTab: TabsEnum) => {
+ setActiveTab(newActiveTab)
+ }, [])
+ const searchPlaceholder = useMemo(() => {
+ if (activeTab === TabsEnum.Blocks)
+ return t('workflow.tabs.searchBlock')
+
+ if (activeTab === TabsEnum.Tools)
+ return t('workflow.tabs.searchTool')
+ return ''
+ }, [activeTab, t])
+
  return (
  <PortalToFollowElem
  placement={placement}
@@ -120,7 +138,7 @@ const NodeSelector: FC<NodeSelectorProps> = ({
  <input
  value={searchText}
  className='grow px-0.5 py-[7px] text-[13px] text-gray-700 bg-transparent appearance-none outline-none caret-primary-600 placeholder:text-gray-400'
- placeholder={t('workflow.tabs.searchBlock') || ''}
+ placeholder={searchPlaceholder}
  onChange={e => setSearchText(e.target.value)}
  autoFocus
  />
@@ -137,6 +155,8 @@ const NodeSelector: FC<NodeSelectorProps> = ({
  </div>
  </div>
  <Tabs
+ activeTab={activeTab}
+ onActiveTabChange={handleActiveTabChange}
  onSelect={handleSelect}
  searchText={searchText}
  availableBlocksTypes={availableBlocksTypes}

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

@@ -1,8 +1,5 @@
 import type { FC } from 'react'
-import {
- memo,
- useState,
-} from 'react'
+import { memo } from 'react'
 import type { BlockEnum } from '../types'
 import { useTabs } from './hooks'
 import type { ToolDefaultValue } from './types'
@@ -12,19 +9,22 @@ import AllTools from './all-tools'
 import cn from '@/utils/classnames'
 
 export type TabsProps = {
+ activeTab: TabsEnum
+ onActiveTabChange: (activeTab: TabsEnum) => void
  searchText: string
  onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void
  availableBlocksTypes?: BlockEnum[]
  noBlocks?: boolean
 }
 const Tabs: FC<TabsProps> = ({
+ activeTab,
+ onActiveTabChange,
  searchText,
  onSelect,
  availableBlocksTypes,
  noBlocks,
 }) => {
  const tabs = useTabs()
- const [activeTab, setActiveTab] = useState(noBlocks ? TabsEnum.Tools : TabsEnum.Blocks)
 
  return (
  <div onClick={e => e.stopPropagation()}>
@@ -41,7 +41,7 @@ const Tabs: FC<TabsProps> = ({
  ? 'text-gray-700 after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-full after:bg-primary-600'
  : 'text-gray-500',
  )}
- onClick={() => setActiveTab(tab.key)}
+ onClick={() => onActiveTabChange(tab.key)}
  >
  {tab.name}
  </div>

web/i18n/en-US/workflow.ts

@@ -149,6 +149,7 @@ const translation = {
  tabs: {
  'searchBlock': 'Search block',
  'blocks': 'Blocks',
+ 'searchTool': 'Search tool',
  'tools': 'Tools',
  'allTool': 'All',
  'builtInTool': 'Built-in',

web/i18n/zh-Hans/workflow.ts

@@ -149,6 +149,7 @@ const translation = {
  tabs: {
  'searchBlock': '搜索节点',
  'blocks': '节点',
+ 'searchTool': '搜索工具',
  'tools': '工具',
  'allTool': '全部',
  'builtInTool': '内置',