diff --git a/web/app/components/workflow/block-selector/index.tsx b/web/app/components/workflow/block-selector/index.tsx index dd4177245f6438..a62226a15d1866 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 = ({ const handleOpenChange = useCallback((newOpen: boolean) => { setLocalOpen(newOpen) + if (!newOpen) + setSearchText('') + if (onOpenChange) onOpenChange(newOpen) }, [onOpenChange]) @@ -80,6 +85,19 @@ const NodeSelector: FC = ({ 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 ( = ({ setSearchText(e.target.value)} autoFocus /> @@ -137,6 +155,8 @@ const NodeSelector: FC = ({ void searchText: string onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void availableBlocksTypes?: BlockEnum[] noBlocks?: boolean } const Tabs: FC = ({ + activeTab, + onActiveTabChange, searchText, onSelect, availableBlocksTypes, noBlocks, }) => { const tabs = useTabs() - const [activeTab, setActiveTab] = useState(noBlocks ? TabsEnum.Tools : TabsEnum.Blocks) return (
e.stopPropagation()}> @@ -41,7 +41,7 @@ const Tabs: FC = ({ ? '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}
diff --git a/web/i18n/en-US/workflow.ts b/web/i18n/en-US/workflow.ts index 233ba40450b034..7ab32072bd537f 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 648c7c6891b9e0..30c128bd46f2f2 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': '内置',