feat: support toggle set tool when the texts changes

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

@@ -131,6 +131,7 @@ const AllTools = ({
           tools={tools}
           onSelect={onSelect}
           viewType={activeView}
+          hasSearchText={!!searchText}
         />
         {/* Plugins from marketplace */}
         <PluginList

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

@@ -1,6 +1,6 @@
 'use client'
 import type { FC } from 'react'
-import React from 'react'
+import React, { useEffect } from 'react'
 import type { ToolWithProvider } from '../../../types'
 import type { BlockEnum } from '../../../types'
 import type { ToolDefaultValue } from '../../types'
@@ -10,14 +10,26 @@ import { ViewType } from '../../view-type-select'
 type Props = {
   payload: ToolWithProvider[]
   isShowLetterIndex: boolean
+  hasSearchText: boolean
   onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void
 }
 
 const ToolViewFlatView: FC<Props> = ({
   payload,
   isShowLetterIndex,
+  hasSearchText,
   onSelect,
 }) => {
+  const [fold, setFold] = React.useState<boolean>(true)
+  useEffect(() => {
+    if (hasSearchText && fold) {
+      setFold(false)
+      return
+    }
+    if (!hasSearchText && !fold)
+      setFold(true)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [hasSearchText])
   return (
     <div>
       {payload.map(tool => (
@@ -26,6 +38,8 @@ const ToolViewFlatView: FC<Props> = ({
           payload={tool}
           viewType={ViewType.flat}
           isShowLetterIndex={isShowLetterIndex}
+          isFold={fold}
+          onFoldChange={setFold}
           onSelect={onSelect}
         />
       ))}

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

@@ -1,6 +1,6 @@
 'use client'
 import type { FC } from 'react'
-import React from 'react'
+import React, { useEffect } from 'react'
 import type { ToolWithProvider } from '../../../types'
 import Tool from '../tool'
 import type { BlockEnum } from '../../../types'
@@ -10,14 +10,26 @@ import type { ToolDefaultValue } from '../../types'
 type Props = {
   groupName: string
   toolList: ToolWithProvider[]
+  hasSearchText: boolean
   onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void
 }
 
 const Item: FC<Props> = ({
   groupName,
   toolList,
+  hasSearchText,
   onSelect,
 }) => {
+  const [fold, setFold] = React.useState<boolean>(true)
+  useEffect(() => {
+    if (hasSearchText && fold) {
+      setFold(false)
+      return
+    }
+    if (!hasSearchText && !fold)
+      setFold(true)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [hasSearchText])
   return (
     <div>
       <div className='flex items-center px-3 h-[22px] text-xs font-medium text-gray-500'>
@@ -30,6 +42,8 @@ const Item: FC<Props> = ({
             payload={tool}
             viewType={ViewType.tree}
             isShowLetterIndex={false}
+            isFold={fold}
+            onFoldChange={setFold}
             onSelect={onSelect}
           />
         ))}

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

@@ -10,11 +10,13 @@ import { CUSTOM_GROUP_NAME, WORKFLOW_GROUP_NAME } from '../../index-bar'
 
 type Props = {
   payload: Record<string, ToolWithProvider[]>
+  hasSearchText: boolean
   onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void
 }
 
 const ToolListTreeView: FC<Props> = ({
   payload,
+  hasSearchText,
   onSelect,
 }) => {
   const { t } = useTranslation()
@@ -37,6 +39,7 @@ const ToolListTreeView: FC<Props> = ({
           key={groupName}
           groupName={getI18nGroupName(groupName)}
           toolList={payload[groupName]}
+          hasSearchText={hasSearchText}
           onSelect={onSelect}
         />
       ))}

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

@@ -11,8 +11,6 @@ import type { ToolDefaultValue } from '../types'
 import { ViewType } from '../view-type-select'
 import ActonItem from './action-item'
 import BlockIcon from '../../block-icon'
-
-import { useBoolean } from 'ahooks'
 import { useTranslation } from 'react-i18next'
 
 type Props = {
@@ -20,6 +18,8 @@ type Props = {
   payload: ToolWithProvider
   viewType: ViewType
   isShowLetterIndex: boolean
+  isFold: boolean
+  onFoldChange: (fold: boolean) => void
   onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void
 }
 
@@ -28,6 +28,8 @@ const Tool: FC<Props> = ({
   payload,
   viewType,
   isShowLetterIndex,
+  isFold,
+  onFoldChange,
   onSelect,
 }) => {
   const { t } = useTranslation()
@@ -35,10 +37,8 @@ const Tool: FC<Props> = ({
   const isFlatView = viewType === ViewType.flat
   const actions = payload.tools
   const hasAction = true // Now always support actions
-  const [isFold, {
+
-    toggle: toggleFold,
+  const FoldIcon = isFold ? RiArrowRightSLine : RiArrowDownSLine
-  }] = useBoolean(false)
-  const FoldIcon = isFold ? RiArrowDownSLine : RiArrowRightSLine
 
   const groupName = useMemo(() => {
     if (payload.type === CollectionType.builtIn)
@@ -63,7 +63,7 @@ const Tool: FC<Props> = ({
           className='flex items-center justify-between pl-3 pr-1 w-full rounded-lg hover:bg-gray-50 cursor-pointer select-none'
           onClick={() => {
             if (hasAction)
-              toggleFold()
+              onFoldChange(!isFold)
 
             // Now always support actions
             // if (payload.parameters) {
@@ -101,7 +101,7 @@ const Tool: FC<Props> = ({
           </div>
         </div>
 
-        {hasAction && isFold && (
+        {hasAction && !isFold && (
           actions.map(action => (
             <ActonItem
               key={action.name}

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

@@ -18,12 +18,14 @@ type ToolsProps = {
   onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void
   tools: ToolWithProvider[]
   viewType: ViewType
+  hasSearchText: boolean
 }
 const Blocks = ({
   showWorkflowEmpty,
   onSelect,
   tools,
   viewType,
+  hasSearchText,
 }: ToolsProps) => {
   const { t } = useTranslation()
   const language = useGetLanguage()
@@ -89,11 +91,13 @@ const Blocks = ({
           <ToolListFlatView
             payload={listViewToolData}
             isShowLetterIndex={isShowLetterIndex}
+            hasSearchText={hasSearchText}
             onSelect={onSelect}
           />
         ) : (
           <ToolListTreeView
             payload={treeViewToolsData}
+            hasSearchText={hasSearchText}
             onSelect={onSelect}
           />
         )