From 89b470d0d5700888b94a462e3affdc29f389c273 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Wed, 13 Nov 2024 15:04:23 +0800
Subject: [PATCH] fix: toggle tool

---
 .../tool/tool-list-flat-view/list.tsx         | 15 ++------------
 .../tool/tool-list-tree-view/item.tsx         | 15 ++------------
 .../workflow/block-selector/tool/tool.tsx     | 20 +++++++++++++------
 3 files changed, 18 insertions(+), 32 deletions(-)

diff --git a/web/app/components/workflow/block-selector/tool/tool-list-flat-view/list.tsx b/web/app/components/workflow/block-selector/tool/tool-list-flat-view/list.tsx
index 9c624373d4..8e07eb5650 100644
--- a/web/app/components/workflow/block-selector/tool/tool-list-flat-view/list.tsx
+++ b/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, { useEffect } from 'react'
+import React from 'react'
 import type { ToolWithProvider } from '../../../types'
 import type { BlockEnum } from '../../../types'
 import type { ToolDefaultValue } from '../../types'
@@ -20,16 +20,6 @@ const ToolViewFlatView: FC<Props> = ({
   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 => (
@@ -38,8 +28,7 @@ const ToolViewFlatView: FC<Props> = ({
           payload={tool}
           viewType={ViewType.flat}
           isShowLetterIndex={isShowLetterIndex}
-          isFold={fold}
-          onFoldChange={setFold}
+          hasSearchText={hasSearchText}
           onSelect={onSelect}
         />
       ))}
diff --git a/web/app/components/workflow/block-selector/tool/tool-list-tree-view/item.tsx b/web/app/components/workflow/block-selector/tool/tool-list-tree-view/item.tsx
index f74602c901..bf90c72aad 100644
--- a/web/app/components/workflow/block-selector/tool/tool-list-tree-view/item.tsx
+++ b/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, { useEffect } from 'react'
+import React from 'react'
 import type { ToolWithProvider } from '../../../types'
 import Tool from '../tool'
 import type { BlockEnum } from '../../../types'
@@ -20,16 +20,6 @@ const Item: FC<Props> = ({
   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'>
@@ -42,8 +32,7 @@ const Item: FC<Props> = ({
             payload={tool}
             viewType={ViewType.tree}
             isShowLetterIndex={false}
-            isFold={fold}
-            onFoldChange={setFold}
+            hasSearchText={hasSearchText}
             onSelect={onSelect}
           />
         ))}
diff --git a/web/app/components/workflow/block-selector/tool/tool.tsx b/web/app/components/workflow/block-selector/tool/tool.tsx
index 658bccd630..a604f4f211 100644
--- a/web/app/components/workflow/block-selector/tool/tool.tsx
+++ b/web/app/components/workflow/block-selector/tool/tool.tsx
@@ -1,6 +1,6 @@
 'use client'
 import type { FC } from 'react'
-import React, { useMemo } from 'react'
+import React, { useEffect, useMemo } from 'react'
 import cn from '@/utils/classnames'
 import { RiArrowDownSLine, RiArrowRightSLine } from '@remixicon/react'
 import { useGetLanguage } from '@/context/i18n'
@@ -18,8 +18,7 @@ type Props = {
   payload: ToolWithProvider
   viewType: ViewType
   isShowLetterIndex: boolean
-  isFold: boolean
-  onFoldChange: (fold: boolean) => void
+  hasSearchText: boolean
   onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void
 }
 
@@ -28,8 +27,7 @@ const Tool: FC<Props> = ({
   payload,
   viewType,
   isShowLetterIndex,
-  isFold,
-  onFoldChange,
+  hasSearchText,
   onSelect,
 }) => {
   const { t } = useTranslation()
@@ -37,6 +35,16 @@ const Tool: FC<Props> = ({
   const isFlatView = viewType === ViewType.flat
   const actions = payload.tools
   const hasAction = true // Now always support actions
+  const [isFold, setFold] = React.useState<boolean>(true)
+  useEffect(() => {
+    if (hasSearchText && isFold) {
+      setFold(false)
+      return
+    }
+    if (!hasSearchText && !isFold)
+      setFold(true)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [hasSearchText])
 
   const FoldIcon = isFold ? RiArrowRightSLine : RiArrowDownSLine
 
@@ -63,7 +71,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)
-              onFoldChange(!isFold)
+              setFold(!isFold)
 
             // Now always support actions
             // if (payload.parameters) {