From 925f0d2e09adc9f5856e3733e9e65152f9aa2b0b Mon Sep 17 00:00:00 2001
From: zxhlyh <jasonapring2015@outlook.com>
Date: Thu, 8 Aug 2024 15:33:02 +0800
Subject: [PATCH] fix: workflow search blocks (#7097)

---
 .../workflow/block-selector/index.tsx         | 22 ++++++++++++++++++-
 .../workflow/block-selector/tabs.tsx          | 12 +++++-----
 web/i18n/en-US/workflow.ts                    |  1 +
 web/i18n/zh-Hans/workflow.ts                  |  1 +
 4 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/web/app/components/workflow/block-selector/index.tsx b/web/app/components/workflow/block-selector/index.tsx
index dd4177245f643..a62226a15d186 100644
--- a/web/app/components/workflow/block-selector/index.tsx
+++ b/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}
diff --git a/web/app/components/workflow/block-selector/tabs.tsx b/web/app/components/workflow/block-selector/tabs.tsx
index 5c4be8e3d1a1c..8c410b5641a9f 100644
--- a/web/app/components/workflow/block-selector/tabs.tsx
+++ b/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>
diff --git a/web/i18n/en-US/workflow.ts b/web/i18n/en-US/workflow.ts
index 233ba40450b03..7ab32072bd537 100644
--- a/web/i18n/en-US/workflow.ts
+++ b/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',
diff --git a/web/i18n/zh-Hans/workflow.ts b/web/i18n/zh-Hans/workflow.ts
index 648c7c6891b9e..30c128bd46f2f 100644
--- a/web/i18n/zh-Hans/workflow.ts
+++ b/web/i18n/zh-Hans/workflow.ts
@@ -149,6 +149,7 @@ const translation = {
   tabs: {
     'searchBlock': '搜索节点',
     'blocks': '节点',
+    'searchTool': '搜索工具',
     'tools': '工具',
     'allTool': '全部',
     'builtInTool': '内置',