From 8946d7fbf433fef748b22a274bf39ae5066f08ee Mon Sep 17 00:00:00 2001
From: yyh <92089059+lyzno1@users.noreply.github.com>
Date: Wed, 29 Jul 2026 11:07:30 +0800
Subject: [PATCH] refactor(web): remove workflow node useBoolean usage (#39729)

---
 oxlint-suppressions.json                      |  5 --
 .../_base/components/__tests__/field.spec.tsx | 34 +-------
 .../components/code-generator-button.tsx      | 14 ++-
 .../code-editor/editor-support-vars.tsx       |  9 +-
 .../workflow/nodes/_base/components/field.tsx |  6 +-
 .../nodes/_base/components/selector.tsx       | 16 ++--
 .../components/switch-plugin-version.tsx      | 12 ++-
 .../object-child-tree-panel/show/field.tsx    |  6 +-
 .../nodes/_base/hooks/use-output-var-list.ts  | 23 ++---
 .../nodes/http/hooks/use-key-value-list.ts    |  5 +-
 .../workflow/nodes/http/use-config.ts         | 14 ++-
 .../workflow/nodes/human-input/panel.tsx      | 13 ++-
 .../components/add-dataset.tsx                | 13 ++-
 .../components/dataset-item.tsx               | 14 ++-
 .../llm/components/prompt-generator-btn.tsx   | 14 ++-
 .../nodes/llm/components/structure-output.tsx | 15 ++--
 .../extract-parameter/__tests__/list.spec.tsx | 87 -------------------
 .../components/extract-parameter/list.tsx     | 24 +++--
 .../components/extract-parameter/update.tsx   | 11 ++-
 .../nodes/start/components/var-item.tsx       | 15 ++--
 .../workflow/nodes/start/use-config.ts        | 23 ++---
 .../tool-form/__tests__/item.spec.tsx         | 71 +--------------
 .../nodes/tool/components/tool-form/item.tsx  | 13 ++-
 .../workflow/nodes/tool/hooks/use-config.ts   | 11 ++-
 .../components/trigger-form/item.tsx          | 13 ++-
 .../__tests__/use-config.spec.tsx             | 24 -----
 .../components/var-group-item.tsx             | 10 +--
 .../nodes/variable-assigner/use-config.ts     | 37 ++------
 28 files changed, 149 insertions(+), 403 deletions(-)
 delete mode 100644 web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/__tests__/list.spec.tsx

diff --git a/oxlint-suppressions.json b/oxlint-suppressions.json
index 87eb09c5b33..e6fab131196 100644
--- a/oxlint-suppressions.json
+++ b/oxlint-suppressions.json
@@ -5022,11 +5022,6 @@
       "count": 3
     }
   },
-  "web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/__tests__/list.spec.tsx": {
-    "no-unused-vars": {
-      "count": 1
-    }
-  },
   "web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/item.tsx": {
     "jsx_a11y/click-events-have-key-events": {
       "count": 2
diff --git a/web/app/components/workflow/nodes/_base/components/__tests__/field.spec.tsx b/web/app/components/workflow/nodes/_base/components/__tests__/field.spec.tsx
index a40d03603de..94af7cf6a39 100644
--- a/web/app/components/workflow/nodes/_base/components/__tests__/field.spec.tsx
+++ b/web/app/components/workflow/nodes/_base/components/__tests__/field.spec.tsx
@@ -2,28 +2,8 @@ import { fireEvent, render, screen } from '@testing-library/react'
 import Field from '../field'
 
 describe('Field', () => {
-  it('should render subtitle styling, tooltip, operations, warning dot and required marker', () => {
-    const { container } = render(
-      <Field
-        title="Knowledge"
-        tooltip="tooltip text"
-        operations={<button type="button">operation</button>}
-        required
-        warningDot
-        isSubTitle
-      />,
-    )
-
-    expect(screen.getByText('Knowledge')).toBeInTheDocument()
-    expect(screen.getByLabelText('tooltip text')).toBeInTheDocument()
-    expect(screen.getByRole('button', { name: 'operation' })).toBeInTheDocument()
-    expect(screen.getByText('*')).toBeInTheDocument()
-    expect(container.querySelector('.system-xs-medium-uppercase')).not.toBeNull()
-    expect(container.querySelector('.bg-text-warning-secondary')).not.toBeNull()
-  })
-
   it('should toggle folded children when supportFold is enabled', () => {
-    const { container } = render(
+    render(
       <Field title="Foldable" supportFold>
         <div>folded content</div>
       </Field>,
@@ -33,20 +13,8 @@ describe('Field', () => {
 
     fireEvent.click(screen.getByText('Foldable').closest('.cursor-pointer')!)
     expect(screen.getByText('folded content')).toBeInTheDocument()
-    expect(container.querySelector('svg')).toHaveStyle({ transform: 'rotate(0deg)' })
 
     fireEvent.click(screen.getByText('Foldable').closest('.cursor-pointer')!)
     expect(screen.queryByText('folded content')).not.toBeInTheDocument()
   })
-
-  it('should render inline children without folding support', () => {
-    const { container } = render(
-      <Field title="Inline" inline>
-        <div>always visible</div>
-      </Field>,
-    )
-
-    expect(screen.getByText('always visible')).toBeInTheDocument()
-    expect(container.firstChild).toHaveClass('flex')
-  })
 })
diff --git a/web/app/components/workflow/nodes/_base/components/code-generator-button.tsx b/web/app/components/workflow/nodes/_base/components/code-generator-button.tsx
index e7bda2fc5da..1a935d2242e 100644
--- a/web/app/components/workflow/nodes/_base/components/code-generator-button.tsx
+++ b/web/app/components/workflow/nodes/_base/components/code-generator-button.tsx
@@ -3,9 +3,8 @@ import type { FC } from 'react'
 import type { CodeLanguage } from '../../code/types'
 import type { GenRes } from '@/service/debug'
 import { cn } from '@langgenius/dify-ui/cn'
-import { useBoolean } from 'ahooks'
 import * as React from 'react'
-import { useCallback } from 'react'
+import { useCallback, useState } from 'react'
 import { GetCodeGeneratorResModal } from '@/app/components/app/configuration/config/code-generator/get-code-generator-res'
 import { ActionButton } from '@/app/components/base/action-button'
 import { Generator } from '@/app/components/base/icons/src/vender/other'
@@ -27,20 +26,19 @@ const CodeGenerateBtn: FC<Props> = ({
   codeLanguages,
   onGenerated,
 }) => {
-  const [showAutomatic, { setTrue: showAutomaticTrue, setFalse: showAutomaticFalse }] =
-    useBoolean(false)
+  const [showAutomatic, setShowAutomatic] = useState(false)
   const handleAutomaticRes = useCallback(
     (res: GenRes) => {
       onGenerated?.(res.modified)
-      showAutomaticFalse()
+      setShowAutomatic(false)
     },
-    [onGenerated, showAutomaticFalse],
+    [onGenerated],
   )
   const configsMap = useHooksStore((s) => s.configsMap)
 
   return (
     <div className={cn(className)}>
-      <ActionButton className="hover:bg-[#155EFF]/8" onClick={showAutomaticTrue}>
+      <ActionButton className="hover:bg-[#155EFF]/8" onClick={() => setShowAutomatic(true)}>
         <Generator className="size-4 text-primary-600" />
       </ActionButton>
       {showAutomatic && (
@@ -48,7 +46,7 @@ const CodeGenerateBtn: FC<Props> = ({
           mode={AppModeEnum.CHAT}
           isShow={showAutomatic}
           codeLanguages={codeLanguages}
-          onClose={showAutomaticFalse}
+          onClose={() => setShowAutomatic(false)}
           onFinished={handleAutomaticRes}
           flowId={configsMap?.flowId || ''}
           nodeId={nodeId}
diff --git a/web/app/components/workflow/nodes/_base/components/editor/code-editor/editor-support-vars.tsx b/web/app/components/workflow/nodes/_base/components/editor/code-editor/editor-support-vars.tsx
index f2174f15b1b..4606e7f4cbd 100644
--- a/web/app/components/workflow/nodes/_base/components/editor/code-editor/editor-support-vars.tsx
+++ b/web/app/components/workflow/nodes/_base/components/editor/code-editor/editor-support-vars.tsx
@@ -3,7 +3,6 @@ import type { FC } from 'react'
 import type { Props as EditorProps } from '.'
 import type { NodeOutPutVar, Variable } from '@/app/components/workflow/types'
 import { cn } from '@langgenius/dify-ui/cn'
-import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
@@ -29,7 +28,7 @@ const CodeEditor: FC<Props> = ({ availableVars, varList, onAddVar, ...editorProp
   const monacoRef = useRef(null)
 
   const popupRef = useRef<HTMLDivElement>(null)
-  const [isShowVarPicker, { setTrue: showVarPicker, setFalse: hideVarPicker }] = useBoolean(false)
+  const [isShowVarPicker, setIsShowVarPicker] = useState(false)
 
   const [popupPosition, setPopupPosition] = useState({ x: 0, y: 0 })
 
@@ -48,9 +47,9 @@ const CodeEditor: FC<Props> = ({ availableVars, varList, onAddVar, ...editorProp
       const popupY = editorRect.top + cursorCoords.top + 20 // Adjust the vertical position as needed
 
       setPopupPosition({ x: popupX, y: popupY })
-      showVarPicker()
+      setIsShowVarPicker(true)
     } else {
-      hideVarPicker()
+      setIsShowVarPicker(false)
     }
   }
 
@@ -137,7 +136,7 @@ const CodeEditor: FC<Props> = ({ availableVars, varList, onAddVar, ...editorProp
       },
     ])
 
-    hideVarPicker()
+    setIsShowVarPicker(false)
   }
 
   return (
diff --git a/web/app/components/workflow/nodes/_base/components/field.tsx b/web/app/components/workflow/nodes/_base/components/field.tsx
index 8325c388936..7c399b6ccaf 100644
--- a/web/app/components/workflow/nodes/_base/components/field.tsx
+++ b/web/app/components/workflow/nodes/_base/components/field.tsx
@@ -2,8 +2,8 @@
 import type { FC, ReactNode } from 'react'
 import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowDownSLine } from '@remixicon/react'
-import { useBoolean } from 'ahooks'
 import * as React from 'react'
+import { useState } from 'react'
 import { Infotip } from '@/app/components/base/infotip'
 
 type Props = Readonly<{
@@ -40,7 +40,7 @@ const Field: FC<Props> = ({
   required,
   warningDot,
 }) => {
-  const [fold, { toggle: toggleFold }] = useBoolean(true)
+  const [fold, setFold] = useState(true)
   const tooltipLabel = tooltip
     ? getTextFromNode(tooltip) || getTextFromNode(title) || 'Help'
     : undefined
@@ -48,7 +48,7 @@ const Field: FC<Props> = ({
   return (
     <div className={cn(className, inline && 'flex w-full items-center justify-between')}>
       <div
-        onClick={() => supportFold && toggleFold()}
+        onClick={() => supportFold && setFold((isFolded) => !isFolded)}
         className={cn('flex items-center justify-between', supportFold && 'cursor-pointer')}
       >
         <div className="flex h-6 items-center">
diff --git a/web/app/components/workflow/nodes/_base/components/selector.tsx b/web/app/components/workflow/nodes/_base/components/selector.tsx
index f072eff6073..c762462cb0f 100644
--- a/web/app/components/workflow/nodes/_base/components/selector.tsx
+++ b/web/app/components/workflow/nodes/_base/components/selector.tsx
@@ -1,8 +1,9 @@
 'use client'
 import type { FC } from 'react'
 import { cn } from '@langgenius/dify-ui/cn'
-import { useBoolean, useClickAway } from 'ahooks'
+import { useClickAway } from 'ahooks'
 import * as React from 'react'
+import { useState } from 'react'
 import { ChevronSelectorVertical } from '@/app/components/base/icons/src/vender/line/arrows'
 import { Check } from '@/app/components/base/icons/src/vender/line/general'
 
@@ -49,10 +50,10 @@ const TypeSelector: FC<Props> = ({
   const item = allOptions
     ? allOptions.find((item) => item.value === value)
     : list.find((item) => item.value === value)
-  const [showOption, { setFalse: setHide, toggle: toggleShow }] = useBoolean(false)
+  const [showOption, setShowOption] = useState(false)
   const ref = React.useRef(null)
   useClickAway(() => {
-    setHide()
+    setShowOption(false)
   }, ref)
   return (
     <div
@@ -60,12 +61,15 @@ const TypeSelector: FC<Props> = ({
       ref={ref}
     >
       {trigger ? (
-        <div onClick={toggleShow} className={cn(!readonly && 'cursor-pointer')}>
+        <div
+          onClick={() => setShowOption((isShown) => !isShown)}
+          className={cn(!readonly && 'cursor-pointer')}
+        >
           {trigger}
         </div>
       ) : (
         <div
-          onClick={toggleShow}
+          onClick={() => setShowOption((isShown) => !isShown)}
           className={cn(
             showOption && 'bg-state-base-hover',
             'flex h-5 cursor-pointer items-center rounded-md pr-0.5 pl-1 text-xs font-semibold text-text-secondary hover:bg-state-base-hover',
@@ -96,7 +100,7 @@ const TypeSelector: FC<Props> = ({
             <div
               key={item.value}
               onClick={() => {
-                setHide()
+                setShowOption(false)
                 onChange(item.value)
               }}
               className={cn(
diff --git a/web/app/components/workflow/nodes/_base/components/switch-plugin-version.tsx b/web/app/components/workflow/nodes/_base/components/switch-plugin-version.tsx
index 55d0c028753..64857e8cb64 100644
--- a/web/app/components/workflow/nodes/_base/components/switch-plugin-version.tsx
+++ b/web/app/components/workflow/nodes/_base/components/switch-plugin-version.tsx
@@ -3,7 +3,6 @@
 import type { FC, ReactNode } from 'react'
 import { cn } from '@langgenius/dify-ui/cn'
 import { Popover, PopoverContent, PopoverTrigger } from '@langgenius/dify-ui/popover'
-import { useBoolean } from 'ahooks'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Badge from '@/app/components/base/badge'
@@ -29,8 +28,7 @@ export const SwitchPluginVersion: FC<SwitchPluginVersionProps> = (props) => {
 
   const [pluginId] = uniqueIdentifier?.split(':') || ['']
   const [isShow, setIsShow] = useState(false)
-  const [isShowUpdateModal, { setTrue: showUpdateModal, setFalse: hideUpdateModal }] =
-    useBoolean(false)
+  const [isShowUpdateModal, setIsShowUpdateModal] = useState(false)
   const [target, setTarget] = useState<{
     version: string
     pluginUniqueIden: string
@@ -43,10 +41,10 @@ export const SwitchPluginVersion: FC<SwitchPluginVersionProps> = (props) => {
   const pluginDetail = pluginDetails.data?.plugins.at(0)
 
   const handleUpdatedFromMarketplace = useCallback(() => {
-    hideUpdateModal()
+    setIsShowUpdateModal(false)
     pluginDetails.refetch()
     onChange?.(target!.version)
-  }, [hideUpdateModal, onChange, pluginDetails, target])
+  }, [onChange, pluginDetails, target])
   const { getIconUrl } = useGetIcon()
   const icon = pluginDetail?.declaration.icon
     ? getIconUrl(pluginDetail.declaration.icon)
@@ -77,7 +75,7 @@ export const SwitchPluginVersion: FC<SwitchPluginVersionProps> = (props) => {
     >
       {isShowUpdateModal && pluginDetail && (
         <PluginMutationModel
-          onCancel={hideUpdateModal}
+          onCancel={() => setIsShowUpdateModal(false)}
           plugin={pluginManifestToCardPluginProps({
             ...pluginDetail.declaration,
             icon: icon!,
@@ -123,7 +121,7 @@ export const SwitchPluginVersion: FC<SwitchPluginVersionProps> = (props) => {
               pluginUniqueIden: state.unique_identifier,
               version: state.version,
             })
-            showUpdateModal()
+            setIsShowUpdateModal(true)
           }}
           trigger={
             <Badge
diff --git a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show/field.tsx b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show/field.tsx
index 12f45b4e6cf..854d4245953 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show/field.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show/field.tsx
@@ -3,8 +3,8 @@ import type { FC } from 'react'
 import type { Field as FieldType } from '../../../../../llm/types'
 import { cn } from '@langgenius/dify-ui/cn'
 import { RiArrowDropDownLine } from '@remixicon/react'
-import { useBoolean } from 'ahooks'
 import * as React from 'react'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Type } from '../../../../../llm/types'
 import { getFieldType } from '../../../../../llm/utils'
@@ -23,7 +23,7 @@ const Field: FC<Props> = ({ name, payload, depth = 1, required, rootClassName })
   const isRoot = depth === 1
   const hasChildren = payload.type === Type.object && payload.properties
   const hasEnum = payload.enum && payload.enum.length > 0
-  const [fold, { toggle: toggleFold }] = useBoolean(false)
+  const [fold, setFold] = useState(false)
   return (
     <div>
       <div className={cn('flex pr-2')}>
@@ -36,7 +36,7 @@ const Field: FC<Props> = ({ name, payload, depth = 1, required, rootClassName })
                   'absolute top-[50%] left-[-18px] h-4 w-4 translate-y-[-50%] cursor-pointer bg-components-panel-bg text-text-tertiary',
                   fold && 'rotate-270 text-text-accent',
                 )}
-                onClick={toggleFold}
+                onClick={() => setFold((isFolded) => !isFolded)}
               />
             )}
             <div
diff --git a/web/app/components/workflow/nodes/_base/hooks/use-output-var-list.ts b/web/app/components/workflow/nodes/_base/hooks/use-output-var-list.ts
index 20727d2bdec..a0739807c52 100644
--- a/web/app/components/workflow/nodes/_base/hooks/use-output-var-list.ts
+++ b/web/app/components/workflow/nodes/_base/hooks/use-output-var-list.ts
@@ -1,6 +1,6 @@
 import type { CodeNodeType, OutputVar } from '../../code/types'
 import type { ValueSelector } from '@/app/components/workflow/types'
-import { useBoolean, useDebounceFn } from 'ahooks'
+import { useDebounceFn } from 'ahooks'
 import { produce } from 'immer'
 import { useCallback, useRef, useState } from 'react'
 import { ErrorHandleTypeEnum } from '@/app/components/workflow/nodes/_base/components/error-handle/types'
@@ -116,10 +116,7 @@ function useOutputVarList<T>({
     onOutputKeyOrdersChange([...outputKeyOrders, newKey])
   }, [generateNewKey, inputs, setInputs, onOutputKeyOrdersChange, outputKeyOrders, varKey])
 
-  const [
-    isShowRemoveVarConfirm,
-    { setTrue: showRemoveVarConfirm, setFalse: hideRemoveVarConfirm },
-  ] = useBoolean(false)
+  const [isShowRemoveVarConfirm, setIsShowRemoveVarConfirm] = useState(false)
   const [removedVar, setRemovedVar] = useState<ValueSelector>([])
   const removeVarInNode = useCallback(() => {
     const varId = nodesWithInspectVars
@@ -129,21 +126,14 @@ function useOutputVarList<T>({
       })?.id
     if (varId) deleteInspectVar(id, varId)
     removeUsedVarInNodes(removedVar)
-    hideRemoveVarConfirm()
-  }, [
-    deleteInspectVar,
-    hideRemoveVarConfirm,
-    id,
-    nodesWithInspectVars,
-    removeUsedVarInNodes,
-    removedVar,
-  ])
+    setIsShowRemoveVarConfirm(false)
+  }, [deleteInspectVar, id, nodesWithInspectVars, removeUsedVarInNodes, removedVar])
   const handleRemoveVariable = useCallback(
     (index: number) => {
       const key = outputKeyOrders[index]!
 
       if (isVarUsedInNodes([id, key])) {
-        showRemoveVarConfirm()
+        setIsShowRemoveVarConfirm(true)
         setRemovedVar([id, key])
         return
       }
@@ -180,7 +170,6 @@ function useOutputVarList<T>({
       onOutputKeyOrdersChange,
       nodesWithInspectVars,
       deleteInspectVar,
-      showRemoveVarConfirm,
       varKey,
     ],
   )
@@ -190,7 +179,7 @@ function useOutputVarList<T>({
     handleAddVariable,
     handleRemoveVariable,
     isShowRemoveVarConfirm,
-    hideRemoveVarConfirm,
+    hideRemoveVarConfirm: () => setIsShowRemoveVarConfirm(false),
     onRemoveVarConfirm: removeVarInNode,
   }
 }
diff --git a/web/app/components/workflow/nodes/http/hooks/use-key-value-list.ts b/web/app/components/workflow/nodes/http/hooks/use-key-value-list.ts
index 1f270666326..0563f041745 100644
--- a/web/app/components/workflow/nodes/http/hooks/use-key-value-list.ts
+++ b/web/app/components/workflow/nodes/http/hooks/use-key-value-list.ts
@@ -1,5 +1,4 @@
 import type { KeyValue } from '../types'
-import { useBoolean } from 'ahooks'
 import { uniqueId } from 'es-toolkit/compat'
 import { useCallback, useEffect, useState } from 'react'
 
@@ -63,14 +62,14 @@ const useKeyValueList = (value: string, onChange: (value: string) => void, noFil
     ])
   }, [list, setList])
 
-  const [isKeyValueEdit, { toggle: toggleIsKeyValueEdit }] = useBoolean(true)
+  const [isKeyValueEdit, setIsKeyValueEdit] = useState(true)
 
   return {
     list: list.length === 0 ? [{ id: uniqueId(UNIQUE_ID_PREFIX), key: '', value: '' }] : list, // no item can not add new item
     setList,
     addItem,
     isKeyValueEdit,
-    toggleIsKeyValueEdit,
+    toggleIsKeyValueEdit: () => setIsKeyValueEdit((isEditing) => !isEditing),
   }
 }
 
diff --git a/web/app/components/workflow/nodes/http/use-config.ts b/web/app/components/workflow/nodes/http/use-config.ts
index 7718f5ead61..dc87c7ce2b4 100644
--- a/web/app/components/workflow/nodes/http/use-config.ts
+++ b/web/app/components/workflow/nodes/http/use-config.ts
@@ -1,6 +1,5 @@
 import type { Var } from '../../types'
 import type { Authorization, Body, HttpNodeType, Method, Timeout } from './types'
-import { useBoolean } from 'ahooks'
 import { produce } from 'immer'
 import { useCallback, useEffect, useState } from 'react'
 import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
@@ -113,8 +112,7 @@ const useConfig = (id: string, payload: HttpNodeType) => {
   )
 
   // authorization
-  const [isShowAuthorization, { setTrue: showAuthorization, setFalse: hideAuthorization }] =
-    useBoolean(false)
+  const [isShowAuthorization, setIsShowAuthorization] = useState(false)
 
   const setAuthorization = useCallback(
     (authorization: Authorization) => {
@@ -141,7 +139,7 @@ const useConfig = (id: string, payload: HttpNodeType) => {
   }, [])
 
   // curl import panel
-  const [isShowCurlPanel, { setTrue: showCurlPanel, setFalse: hideCurlPanel }] = useBoolean(false)
+  const [isShowCurlPanel, setIsShowCurlPanel] = useState(false)
 
   const handleCurlImport = useCallback(
     (newNode: HttpNodeType) => {
@@ -194,14 +192,14 @@ const useConfig = (id: string, payload: HttpNodeType) => {
     handleSSLVerifyChange,
     // authorization
     isShowAuthorization,
-    showAuthorization,
-    hideAuthorization,
+    showAuthorization: () => setIsShowAuthorization(true),
+    hideAuthorization: () => setIsShowAuthorization(false),
     setAuthorization,
     setTimeout,
     // curl import
     isShowCurlPanel,
-    showCurlPanel,
-    hideCurlPanel,
+    showCurlPanel: () => setIsShowCurlPanel(true),
+    hideCurlPanel: () => setIsShowCurlPanel(false),
     handleCurlImport,
   }
 }
diff --git a/web/app/components/workflow/nodes/human-input/panel.tsx b/web/app/components/workflow/nodes/human-input/panel.tsx
index 79426136eef..d1565d004a6 100644
--- a/web/app/components/workflow/nodes/human-input/panel.tsx
+++ b/web/app/components/workflow/nodes/human-input/panel.tsx
@@ -11,10 +11,9 @@ import {
   RiExpandDiagonalLine,
   RiEyeLine,
 } from '@remixicon/react'
-import { useBoolean } from 'ahooks'
 import copy from 'copy-to-clipboard'
 import * as React from 'react'
-import { useCallback } from 'react'
+import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import Divider from '@/app/components/base/divider'
@@ -70,10 +69,10 @@ const Panel: FC<NodePanelProps<HumanInputNodeType>> = ({ id, data }) => {
     },
   })
 
-  const [isExpandFormContent, { toggle: toggleExpandFormContent }] = useBoolean(false)
+  const [isExpandFormContent, setIsExpandFormContent] = useState(false)
   const nodePanelWidth = useStore((state) => state.nodePanelWidth)
 
-  const [isPreview, { toggle: togglePreview, setFalse: hidePreview }] = useBoolean(false)
+  const [isPreview, setIsPreview] = useState(false)
 
   const onAddUseAction = useCallback(() => {
     const index = inputs.user_actions.length + 1
@@ -131,7 +130,7 @@ const Panel: FC<NodePanelProps<HumanInputNodeType>> = ({ id, data }) => {
                   'flex items-center space-x-1 px-2',
                   isPreview && 'bg-state-accent-active text-text-accent',
                 )}
-                onClick={togglePreview}
+                onClick={() => setIsPreview((isPreview) => !isPreview)}
               >
                 <RiEyeLine className="size-3.5" />
                 <div className="system-xs-medium">
@@ -160,7 +159,7 @@ const Panel: FC<NodePanelProps<HumanInputNodeType>> = ({ id, data }) => {
                     'flex size-6 cursor-pointer items-center justify-center rounded-md border-none bg-transparent p-0 text-text-secondary hover:bg-components-button-ghost-bg-hover',
                     isExpandFormContent && 'bg-state-accent-active text-text-accent',
                   )}
-                  onClick={toggleExpandFormContent}
+                  onClick={() => setIsExpandFormContent((isExpanded) => !isExpanded)}
                 >
                   {isExpandFormContent ? (
                     <RiCollapseDiagonalLine className="size-4" aria-hidden />
@@ -263,7 +262,7 @@ const Panel: FC<NodePanelProps<HumanInputNodeType>> = ({ id, data }) => {
           content={inputs.form_content}
           formInputs={inputs.inputs}
           userActions={inputs.user_actions}
-          onClose={hidePreview}
+          onClose={() => setIsPreview(false)}
         />
       )}
     </div>
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/add-dataset.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/add-dataset.tsx
index 12ff51482e7..96329581225 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/add-dataset.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/add-dataset.tsx
@@ -1,9 +1,8 @@
 'use client'
 import type { FC } from 'react'
 import type { DataSet } from '@/models/datasets'
-import { useBoolean } from 'ahooks'
 import * as React from 'react'
-import { useCallback } from 'react'
+import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import SelectDataset from '@/app/components/app/configuration/dataset-config/select-dataset'
 
@@ -15,14 +14,14 @@ type Props = Readonly<{
 
 const AddDataset: FC<Props> = ({ selectedIds, modal, onChange }) => {
   const { t } = useTranslation()
-  const [isShowModal, { setTrue: showModal, setFalse: hideModal }] = useBoolean(false)
+  const [isShowModal, setIsShowModal] = useState(false)
 
   const handleSelect = useCallback(
     (datasets: DataSet[]) => {
       onChange(datasets)
-      hideModal()
+      setIsShowModal(false)
     },
-    [onChange, hideModal],
+    [onChange],
   )
   return (
     <div>
@@ -30,14 +29,14 @@ const AddDataset: FC<Props> = ({ selectedIds, modal, onChange }) => {
         type="button"
         aria-label={`${t(($) => $['operation.add'], { ns: 'common' })} ${t(($) => $['nodes.knowledgeRetrieval.knowledge'], { ns: 'workflow' })}`}
         className="cursor-pointer rounded-md border-none bg-transparent p-1 outline-hidden select-none hover:bg-state-base-hover focus-visible:ring-2 focus-visible:ring-state-accent-solid"
-        onClick={showModal}
+        onClick={() => setIsShowModal(true)}
       >
         <span aria-hidden="true" className="i-ri-add-line size-4 text-text-tertiary" />
       </button>
       <SelectDataset
         isShow={isShowModal}
         modal={modal}
-        onClose={hideModal}
+        onClose={() => setIsShowModal(false)}
         selectedIds={selectedIds}
         onSelect={handleSelect}
       />
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-item.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-item.tsx
index f487ca5d96c..adfea0433b7 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-item.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-item.tsx
@@ -11,7 +11,6 @@ import {
   DrawerViewport,
 } from '@langgenius/dify-ui/drawer'
 import { RiDeleteBinLine, RiEditLine } from '@remixicon/react'
-import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -53,15 +52,14 @@ const DatasetItem: FC<Props> = ({
   const { formatIndexingTechniqueAndMethod } = useKnowledge()
   const [isDeleteHovered, setIsDeleteHovered] = useState(false)
 
-  const [isShowSettingsModal, { setTrue: showSettingsModal, setFalse: hideSettingsModal }] =
-    useBoolean(false)
+  const [isShowSettingsModal, setIsShowSettingsModal] = useState(false)
 
   const handleSave = useCallback(
     (newDataset: DataSet) => {
       onChange(newDataset)
-      hideSettingsModal()
+      setIsShowSettingsModal(false)
     },
-    [hideSettingsModal, onChange],
+    [onChange],
   )
 
   const handleRemove = useCallback(
@@ -104,7 +102,7 @@ const DatasetItem: FC<Props> = ({
               aria-label={t(($) => $['operation.edit'], { ns: 'common' })}
               onClick={(e) => {
                 e.stopPropagation()
-                showSettingsModal()
+                setIsShowSettingsModal(true)
               }}
             >
               <RiEditLine className="size-4 shrink-0 text-text-tertiary" />
@@ -150,7 +148,7 @@ const DatasetItem: FC<Props> = ({
           modal
           swipeDirection="right"
           onOpenChange={(open) => {
-            if (!open) hideSettingsModal()
+            if (!open) setIsShowSettingsModal(false)
           }}
         >
           <DrawerPortal>
@@ -173,7 +171,7 @@ const DatasetItem: FC<Props> = ({
                   <SettingsModal
                     currentDataset={payload}
                     height={settingsModalHeight}
-                    onCancel={hideSettingsModal}
+                    onCancel={() => setIsShowSettingsModal(false)}
                     onSave={handleSave}
                   />
                 </DrawerContent>
diff --git a/web/app/components/workflow/nodes/llm/components/prompt-generator-btn.tsx b/web/app/components/workflow/nodes/llm/components/prompt-generator-btn.tsx
index 44da08a14e7..4068921793e 100644
--- a/web/app/components/workflow/nodes/llm/components/prompt-generator-btn.tsx
+++ b/web/app/components/workflow/nodes/llm/components/prompt-generator-btn.tsx
@@ -3,9 +3,8 @@ import type { FC } from 'react'
 import type { ModelConfig } from '@/app/components/workflow/types'
 import type { GenRes } from '@/service/debug'
 import { cn } from '@langgenius/dify-ui/cn'
-import { useBoolean } from 'ahooks'
 import * as React from 'react'
-import { useCallback } from 'react'
+import { useCallback, useState } from 'react'
 import GetAutomaticResModal from '@/app/components/app/configuration/config/automatic/get-automatic-res'
 import { ActionButton } from '@/app/components/base/action-button'
 import { Generator } from '@/app/components/base/icons/src/vender/other'
@@ -28,26 +27,25 @@ const PromptGeneratorBtn: FC<Props> = ({
   editorId,
   currentPrompt,
 }) => {
-  const [showAutomatic, { setTrue: showAutomaticTrue, setFalse: showAutomaticFalse }] =
-    useBoolean(false)
+  const [showAutomatic, setShowAutomatic] = useState(false)
   const handleAutomaticRes = useCallback(
     (res: GenRes) => {
       onGenerated?.(res.modified)
-      showAutomaticFalse()
+      setShowAutomatic(false)
     },
-    [onGenerated, showAutomaticFalse],
+    [onGenerated],
   )
   const configsMap = useHooksStore((s) => s.configsMap)
   return (
     <div className={cn(className)}>
-      <ActionButton className="hover:bg-[#155EFF]/8" onClick={showAutomaticTrue}>
+      <ActionButton className="hover:bg-[#155EFF]/8" onClick={() => setShowAutomatic(true)}>
         <Generator className="size-4 text-primary-600" />
       </ActionButton>
       {showAutomatic && (
         <GetAutomaticResModal
           mode={AppModeEnum.CHAT}
           isShow={showAutomatic}
-          onClose={showAutomaticFalse}
+          onClose={() => setShowAutomatic(false)}
           onFinished={handleAutomaticRes}
           flowId={configsMap?.flowId || ''}
           nodeId={nodeId}
diff --git a/web/app/components/workflow/nodes/llm/components/structure-output.tsx b/web/app/components/workflow/nodes/llm/components/structure-output.tsx
index 62698ad1218..62b5f543bb8 100644
--- a/web/app/components/workflow/nodes/llm/components/structure-output.tsx
+++ b/web/app/components/workflow/nodes/llm/components/structure-output.tsx
@@ -2,7 +2,7 @@
 import type { SchemaRoot, StructuredOutput } from '../types'
 import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
-import { useBoolean } from 'ahooks'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ShowPanel from '@/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show'
 import { Type } from '../types'
@@ -16,7 +16,7 @@ type Props = Readonly<{
 
 export function StructureOutput({ className, value, onChange }: Props) {
   const { t } = useTranslation()
-  const [showConfig, { setTrue: showConfigModal, setFalse: hideConfigModal }] = useBoolean(false)
+  const [showConfig, setShowConfig] = useState(false)
 
   function handleChange(value: SchemaRoot) {
     onChange({
@@ -31,7 +31,12 @@ export function StructureOutput({ className, value, onChange }: Props) {
           <div className="code-sm-semibold text-text-secondary">structured_output</div>
           <div className="ml-2 system-xs-regular text-text-tertiary">object</div>
         </div>
-        <Button size="small" variant="secondary" className="flex" onClick={showConfigModal}>
+        <Button
+          size="small"
+          variant="secondary"
+          className="flex"
+          onClick={() => setShowConfig(true)}
+        >
           <i className="mr-1 i-ri-edit-line size-3.5" aria-hidden="true" />
           <div className="system-xs-medium text-components-button-secondary-text">
             {t(($) => $['structOutput.configure'], { ns: 'app' })}
@@ -46,7 +51,7 @@ export function StructureOutput({ className, value, onChange }: Props) {
         <button
           type="button"
           className="mt-1.5 flex h-10 w-full cursor-pointer items-center justify-center rounded-[10px] bg-background-section system-xs-regular text-text-tertiary"
-          onClick={showConfigModal}
+          onClick={() => setShowConfig(true)}
         >
           {t(($) => $['structOutput.notConfiguredTip'], { ns: 'app' })}
         </button>
@@ -64,7 +69,7 @@ export function StructureOutput({ className, value, onChange }: Props) {
             }) as any
           } // wait for types change
           onSave={handleChange as any} // wait for types change
-          onClose={hideConfigModal}
+          onClose={() => setShowConfig(false)}
         />
       )}
     </div>
diff --git a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/__tests__/list.spec.tsx b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/__tests__/list.spec.tsx
deleted file mode 100644
index 42888c11b06..00000000000
--- a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/__tests__/list.spec.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import { fireEvent, render, screen, waitFor, within } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { ParamType } from '../../../types'
-import List from '../list'
-
-const createParam = (
-  overrides: Partial<{
-    name: string
-    type: ParamType
-    description: string
-    required: boolean
-  }> = {},
-) => ({
-  name: 'city',
-  type: ParamType.string,
-  description: 'City name',
-  required: false,
-  ...overrides,
-})
-
-describe('parameter-extractor/extract-parameter/list', () => {
-  it('renders the empty placeholder when no parameter is configured', () => {
-    render(<List readonly={false} list={[]} onChange={vi.fn()} />)
-
-    expect(
-      screen.getByText('workflow.nodes.parameterExtractor.extractParametersNotSet'),
-    ).toBeInTheDocument()
-  })
-
-  // TODO: Fix this test.
-  // This test only failed in the merge queue, and I don't know why.
-  it.skip('edits and deletes parameters through the real item and modal flow', async () => {
-    const user = userEvent.setup()
-    const handleChange = vi.fn()
-    const { rerender } = render(
-      <List readonly={false} list={[createParam()]} onChange={handleChange} />,
-    )
-
-    const cityLabel = screen.getByText('city')
-    const cityRow = cityLabel.closest('.group.relative')
-    if (!cityRow) throw new Error('Failed to locate city row')
-    const editAndDeleteButtons = cityRow.querySelectorAll('.cursor-pointer.rounded-md.p-1')
-    fireEvent.click(editAndDeleteButtons[0] as HTMLElement)
-
-    await screen.findByRole('dialog')
-    const dialog = screen.getAllByRole('dialog').at(-1)!
-    fireEvent.change(
-      within(dialog).getByPlaceholderText(
-        'workflow.nodes.parameterExtractor.addExtractParameterContent.namePlaceholder',
-      ),
-      { target: { value: 'cityname' } },
-    )
-    fireEvent.change(
-      within(dialog).getByPlaceholderText(
-        'workflow.nodes.parameterExtractor.addExtractParameterContent.descriptionPlaceholder',
-      ),
-      { target: { value: 'Updated city description' } },
-    )
-    fireEvent.click(within(dialog).getByRole('button', { name: 'common.operation.save' }))
-
-    await waitFor(() => {
-      expect(handleChange).toHaveBeenCalled()
-      expect(handleChange.mock.lastCall?.[0]).toEqual([
-        {
-          name: 'cityname',
-          type: ParamType.string,
-          description: 'Updated city description',
-          required: false,
-        },
-      ])
-    })
-
-    handleChange.mockClear()
-
-    rerender(
-      <List readonly={false} list={[createParam({ name: 'budget' })]} onChange={handleChange} />,
-    )
-
-    const budgetLabel = screen.getByText('budget')
-    const budgetRow = budgetLabel.closest('.group.relative')
-    if (!budgetRow) throw new Error('Failed to locate budget row')
-    const deleteButtons = budgetRow.querySelectorAll('.cursor-pointer.rounded-md.p-1')
-    fireEvent.click(deleteButtons[1] as HTMLElement)
-
-    expect(handleChange).toHaveBeenCalledWith([])
-  })
-})
diff --git a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/list.tsx b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/list.tsx
index 8c1b5cd4422..9c5ab7decf5 100644
--- a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/list.tsx
+++ b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/list.tsx
@@ -2,7 +2,6 @@
 import type { FC } from 'react'
 import type { Param } from '../../types'
 import type { MoreInfo } from '@/app/components/workflow/types'
-import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -20,7 +19,7 @@ type Props = Readonly<{
 
 const List: FC<Props> = ({ list, onChange }) => {
   const { t } = useTranslation()
-  const [isShowEditModal, { setTrue: showEditModal, setFalse: hideEditModal }] = useBoolean(false)
+  const [isShowEditModal, setIsShowEditModal] = useState(false)
 
   const handleItemChange = useCallback(
     (index: number) => {
@@ -31,23 +30,20 @@ const List: FC<Props> = ({ list, onChange }) => {
           return item
         })
         onChange(newList, moreInfo)
-        hideEditModal()
+        setIsShowEditModal(false)
       }
     },
-    [hideEditModal, list, onChange],
+    [list, onChange],
   )
 
   const [currEditItemIndex, setCurrEditItemIndex] = useState<number>(-1)
 
-  const handleItemEdit = useCallback(
-    (index: number) => {
-      return () => {
-        setCurrEditItemIndex(index)
-        showEditModal()
-      }
-    },
-    [showEditModal],
-  )
+  const handleItemEdit = useCallback((index: number) => {
+    return () => {
+      setCurrEditItemIndex(index)
+      setIsShowEditModal(true)
+    }
+  }, [])
 
   const handleItemDelete = useCallback(
     (index: number) => {
@@ -81,7 +77,7 @@ const List: FC<Props> = ({ list, onChange }) => {
           type="edit"
           payload={list[currEditItemIndex]}
           onSave={handleItemChange(currEditItemIndex)}
-          onCancel={hideEditModal}
+          onCancel={() => setIsShowEditModal(false)}
         />
       )}
     </div>
diff --git a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx
index c8f7486a751..482bdd53747 100644
--- a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx
+++ b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx
@@ -15,7 +15,6 @@ import {
 import { Switch } from '@langgenius/dify-ui/switch'
 import { Textarea } from '@langgenius/dify-ui/textarea'
 import { toast } from '@langgenius/dify-ui/toast'
-import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -92,18 +91,18 @@ const AddExtractParameter: FC<Props> = ({ type, payload, onSave, onCancel }) =>
     [param.name, t],
   )
 
-  const [isShowModal, { setTrue: doShowModal, setFalse: doHideModal }] = useBoolean(!isAdd)
+  const [isShowModal, setIsShowModal] = useState(!isAdd)
 
   const hideModal = useCallback(() => {
-    doHideModal()
+    setIsShowModal(false)
     onCancel?.()
-  }, [onCancel, doHideModal])
+  }, [onCancel])
 
   const showAddModal = useCallback(() => {
     if (isAdd) setParam(DEFAULT_PARAM)
 
-    doShowModal()
-  }, [isAdd, doShowModal])
+    setIsShowModal(true)
+  }, [isAdd])
 
   const checkValid = useCallback(() => {
     let errMessage = ''
diff --git a/web/app/components/workflow/nodes/start/components/var-item.tsx b/web/app/components/workflow/nodes/start/components/var-item.tsx
index 5f24420c15e..25e9beb4a2b 100644
--- a/web/app/components/workflow/nodes/start/components/var-item.tsx
+++ b/web/app/components/workflow/nodes/start/components/var-item.tsx
@@ -3,10 +3,10 @@ import type { FC } from 'react'
 import type { InputVar, MoreInfo } from '@/app/components/workflow/types'
 import { cn } from '@langgenius/dify-ui/cn'
 import { RiDeleteBinLine } from '@remixicon/react'
-import { useBoolean, useHover } from 'ahooks'
+import { useHover } from 'ahooks'
 import { noop } from 'es-toolkit/function'
 import * as React from 'react'
-import { useCallback, useRef } from 'react'
+import { useCallback, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ConfigVarModal from '@/app/components/app/configuration/config-var/config-modal'
 import Badge from '@/app/components/base/badge'
@@ -41,16 +41,15 @@ const VarItem: FC<Props> = ({
 
   const ref = useRef(null)
   const isHovering = useHover(ref)
-  const [isShowEditVarModal, { setTrue: showEditVarModal, setFalse: hideEditVarModal }] =
-    useBoolean(false)
+  const [isShowEditVarModal, setIsShowEditVarModal] = useState(false)
 
   const handlePayloadChange = useCallback(
     (payload: InputVar, moreInfo?: MoreInfo) => {
       const isValid = onChange(payload, moreInfo)
       if (!isValid) return
-      hideEditVarModal()
+      setIsShowEditVarModal(false)
     },
-    [onChange, hideEditVarModal],
+    [onChange],
   )
   return (
     <div
@@ -107,7 +106,7 @@ const VarItem: FC<Props> = ({
                     type="button"
                     aria-label={t(($) => $['operation.edit'], { ns: 'common' })}
                     className="mr-1 cursor-pointer rounded-md border-none bg-transparent p-1 hover:bg-state-base-hover focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
-                    onClick={showEditVarModal}
+                    onClick={() => setIsShowEditVarModal(true)}
                   >
                     <Edit03 className="size-4 text-text-tertiary" aria-hidden="true" />
                   </button>
@@ -133,7 +132,7 @@ const VarItem: FC<Props> = ({
           isShow
           supportFile
           payload={payload}
-          onClose={hideEditVarModal}
+          onClose={() => setIsShowEditVarModal(false)}
           onConfirm={handlePayloadChange}
           varKeys={varKeys}
         />
diff --git a/web/app/components/workflow/nodes/start/use-config.ts b/web/app/components/workflow/nodes/start/use-config.ts
index 1abbc48db7d..6e1a9d127b2 100644
--- a/web/app/components/workflow/nodes/start/use-config.ts
+++ b/web/app/components/workflow/nodes/start/use-config.ts
@@ -1,7 +1,6 @@
 import type { StartNodeType } from './types'
 import type { InputVar, MoreInfo, ValueSelector } from '@/app/components/workflow/types'
 import { toast } from '@langgenius/dify-ui/toast'
-import { useBoolean } from 'ahooks'
 import { produce } from 'immer'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -22,13 +21,8 @@ const useConfig = (id: string, payload: StartNodeType) => {
   const { deleteNodeInspectorVars, renameInspectVarName, nodesWithInspectVars, deleteInspectVar } =
     useInspectVarsCrud()
 
-  const [isShowAddVarModal, { setTrue: showAddVarModal, setFalse: hideAddVarModal }] =
-    useBoolean(false)
-
-  const [
-    isShowRemoveVarConfirm,
-    { setTrue: showRemoveVarConfirm, setFalse: hideRemoveVarConfirm },
-  ] = useBoolean(false)
+  const [isShowAddVarModal, setIsShowAddVarModal] = useState(false)
+  const [isShowRemoveVarConfirm, setIsShowRemoveVarConfirm] = useState(false)
   const [removedVar, setRemovedVar] = useState<ValueSelector>([])
   const [removedIndex, setRemoveIndex] = useState(0)
   const handleVarListChange = useCallback(
@@ -42,7 +36,7 @@ const useConfig = (id: string, payload: StartNodeType) => {
         if (varId) deleteInspectVar(id, varId)
 
         if (isVarUsedInNodes([id, moreInfo?.payload?.payload?.beforeKey || ''])) {
-          showRemoveVarConfirm()
+          setIsShowRemoveVarConfirm(true)
           setRemovedVar([id, moreInfo?.payload?.payload?.beforeKey || ''])
           setRemoveIndex(moreInfo?.index as number)
           return
@@ -76,7 +70,6 @@ const useConfig = (id: string, payload: StartNodeType) => {
       nodesWithInspectVars,
       renameInspectVarName,
       setInputs,
-      showRemoveVarConfirm,
     ],
   )
 
@@ -86,8 +79,8 @@ const useConfig = (id: string, payload: StartNodeType) => {
     })
     setInputs(newInputs)
     removeUsedVarInNodes(removedVar)
-    hideRemoveVarConfirm()
-  }, [hideRemoveVarConfirm, inputs, removeUsedVarInNodes, removedIndex, removedVar, setInputs])
+    setIsShowRemoveVarConfirm(false)
+  }, [inputs, removeUsedVarInNodes, removedIndex, removedVar, setInputs])
 
   const handleAddVariable = useCallback(
     (payload: InputVar) => {
@@ -124,12 +117,12 @@ const useConfig = (id: string, payload: StartNodeType) => {
     isChatMode,
     inputs,
     isShowAddVarModal,
-    showAddVarModal,
-    hideAddVarModal,
+    showAddVarModal: () => setIsShowAddVarModal(true),
+    hideAddVarModal: () => setIsShowAddVarModal(false),
     handleVarListChange,
     handleAddVariable,
     isShowRemoveVarConfirm,
-    hideRemoveVarConfirm,
+    hideRemoveVarConfirm: () => setIsShowRemoveVarConfirm(false),
     onRemoveVarConfirm: removeVarInNode,
   }
 }
diff --git a/web/app/components/workflow/nodes/tool/components/tool-form/__tests__/item.spec.tsx b/web/app/components/workflow/nodes/tool/components/tool-form/__tests__/item.spec.tsx
index eab2a87e540..fabcb93af5c 100644
--- a/web/app/components/workflow/nodes/tool/components/tool-form/__tests__/item.spec.tsx
+++ b/web/app/components/workflow/nodes/tool/components/tool-form/__tests__/item.spec.tsx
@@ -1,9 +1,7 @@
-import type { ToolVarInputs } from '../../../types'
 import type { CredentialFormSchema } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import type { SchemaRoot } from '@/app/components/workflow/nodes/llm/types'
 import { fireEvent, render, screen, within } from '@testing-library/react'
 import { FormTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
-import { VarType } from '../../../types'
 import ToolFormItem from '../item'
 
 type MockSchemaModalProps = {
@@ -13,22 +11,12 @@ type MockSchemaModalProps = {
   schema: SchemaRoot
 }
 
-type MockFormInputItemProps = {
-  readOnly: boolean
-  nodeId: string
+type MockFormInputItemProps = Readonly<{
   schema: CredentialFormSchema
-  value: ToolVarInputs
-  onChange: (value: ToolVarInputs) => void
-  inPanel?: boolean
-  showManageInputField?: boolean
-  onManageInputField?: () => void
-  extraParams?: Record<string, unknown>
-  providerType?: 'tool' | 'trigger'
-}
+}>
 
 const mockUseLanguage = vi.fn()
 const mockSchemaModal = vi.fn<(props: MockSchemaModalProps) => void>()
-const mockFormInputItem = vi.fn<(props: MockFormInputItemProps) => void>()
 
 vi.mock('@/app/components/header/account-setting/model-provider-page/hooks', () => ({
   useLanguage: () => mockUseLanguage(),
@@ -52,14 +40,7 @@ vi.mock(
 )
 
 vi.mock('@/app/components/workflow/nodes/_base/components/form-input-item', () => ({
-  default: (props: MockFormInputItemProps) => {
-    mockFormInputItem(props)
-    return (
-      <div data-testid="form-input-item" data-provider-type={props.providerType}>
-        {props.schema.variable}
-      </div>
-    )
-  },
+  default: ({ schema }: MockFormInputItemProps) => <div>{schema.variable}</div>,
 }))
 
 const createSchema = (overrides: Partial<CredentialFormSchema> = {}): CredentialFormSchema => ({
@@ -85,50 +66,6 @@ describe('tool/tool-form/item', () => {
     mockUseLanguage.mockReturnValue('en_US')
   })
 
-  // Text input fields render their descriptions inline above the input.
-  it('should render text input labels and forward props to form input item', () => {
-    const handleChange = vi.fn()
-    const handleManageInputField = vi.fn()
-    const value: ToolVarInputs = {
-      api_key: {
-        type: VarType.constant,
-        value: 'secret',
-      },
-    }
-
-    render(
-      <ToolFormItem
-        readOnly
-        nodeId="tool-node"
-        schema={createSchema()}
-        value={value}
-        onChange={handleChange}
-        inPanel
-        showManageInputField
-        onManageInputField={handleManageInputField}
-        extraParams={{ mode: 'panel' }}
-      />,
-    )
-
-    expect(screen.getByText('API Key'))!.toBeInTheDocument()
-    expect(screen.getByText('*'))!.toBeInTheDocument()
-    expect(screen.getByText('Enter API key'))!.toBeInTheDocument()
-    expect(screen.queryByRole('button', { name: 'JSON Schema' })).not.toBeInTheDocument()
-    expect(screen.getByTestId('form-input-item'))!.toHaveAttribute('data-provider-type', 'tool')
-    expect(mockFormInputItem.mock.calls[0]![0]).toMatchObject({
-      readOnly: true,
-      nodeId: 'tool-node',
-      schema: expect.objectContaining({ variable: 'api_key' }),
-      value,
-      onChange: handleChange,
-      inPanel: true,
-      showManageInputField: true,
-      onManageInputField: handleManageInputField,
-      extraParams: { mode: 'panel' },
-      providerType: 'tool',
-    })
-  })
-
   // URL fragments inside descriptions should be rendered as external links.
   it('should render URLs in descriptions as external links', () => {
     render(
@@ -197,8 +134,6 @@ describe('tool/tool-form/item', () => {
     const schemaModal = screen.getByTestId('schema-modal')
     expect(schemaModal)!.toBeInTheDocument()
     expect(within(schemaModal).getByText('tool_config'))!.toBeInTheDocument()
-    expect(mockFormInputItem.mock.calls[0]![0].providerType).toBe('trigger')
-
     fireEvent.click(screen.getByRole('button', { name: 'close-schema' }))
     expect(screen.queryByTestId('schema-modal')).not.toBeInTheDocument()
   })
diff --git a/web/app/components/workflow/nodes/tool/components/tool-form/item.tsx b/web/app/components/workflow/nodes/tool/components/tool-form/item.tsx
index 94abfb14f55..4a185d0e431 100644
--- a/web/app/components/workflow/nodes/tool/components/tool-form/item.tsx
+++ b/web/app/components/workflow/nodes/tool/components/tool-form/item.tsx
@@ -5,7 +5,7 @@ import type { CredentialFormSchema } from '@/app/components/header/account-setti
 import type { Tool } from '@/app/components/tools/types'
 import type { ToolWithProvider } from '@/app/components/workflow/types'
 import { Button } from '@langgenius/dify-ui/button'
-import { useBoolean } from 'ahooks'
+import { useState } from 'react'
 import { Infotip } from '@/app/components/base/infotip'
 import { FormTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
@@ -81,7 +81,7 @@ const ToolFormItem: FC<Props> = ({
   const { name, label, type, required, tooltip, input_schema } = schema
   const showSchemaButton = type === FormTypeEnum.object || type === FormTypeEnum.array
   const showDescription = type === FormTypeEnum.textInput || type === FormTypeEnum.secretInput
-  const [isShowSchema, { setTrue: showSchema, setFalse: hideSchema }] = useBoolean(false)
+  const [isShowSchema, setIsShowSchema] = useState(false)
   return (
     <div className="space-y-0.5 py-1">
       <div>
@@ -107,7 +107,7 @@ const ToolFormItem: FC<Props> = ({
               <Button
                 variant="ghost"
                 size="small"
-                onClick={showSchema}
+                onClick={() => setIsShowSchema(true)}
                 className="px-1 system-xs-regular text-text-tertiary"
               >
                 <span aria-hidden className="mr-1 i-ri-braces-line size-3.5" />
@@ -138,7 +138,12 @@ const ToolFormItem: FC<Props> = ({
       />
 
       {isShowSchema && (
-        <SchemaModal isShow onClose={hideSchema} rootName={name} schema={input_schema!} />
+        <SchemaModal
+          isShow
+          onClose={() => setIsShowSchema(false)}
+          rootName={name}
+          schema={input_schema!}
+        />
       )}
     </div>
   )
diff --git a/web/app/components/workflow/nodes/tool/hooks/use-config.ts b/web/app/components/workflow/nodes/tool/hooks/use-config.ts
index ebc9660c626..b3a0ee380b9 100644
--- a/web/app/components/workflow/nodes/tool/hooks/use-config.ts
+++ b/web/app/components/workflow/nodes/tool/hooks/use-config.ts
@@ -1,7 +1,6 @@
 import type { ToolNodeType, ToolVarInputs } from '../types'
 import type { InputVar } from '@/app/components/workflow/types'
 import { toast } from '@langgenius/dify-ui/toast'
-import { useBoolean } from 'ahooks'
 import { capitalize } from 'es-toolkit/string'
 import { produce } from 'immer'
 import { useCallback, useEffect, useMemo, useState } from 'react'
@@ -43,7 +42,7 @@ const useConfig = (id: string, payload: ToolNodeType) => {
 
   // Auth
   const isShowAuthBtn = isToolAuthorizationRequired(provider_type, currCollection)
-  const [showSetAuth, { setTrue: showSetAuthModal, setFalse: hideSetAuthModal }] = useBoolean(false)
+  const [showSetAuth, setShowSetAuth] = useState(false)
 
   const invalidToolsByType = useInvalidToolsByType(provider_type)
   const handleSaveAuth = useCallback(
@@ -52,9 +51,9 @@ const useConfig = (id: string, payload: ToolNodeType) => {
 
       toast.success(t(($) => $['api.actionSuccess'], { ns: 'common' }))
       invalidToolsByType()
-      hideSetAuthModal()
+      setShowSetAuth(false)
     },
-    [currCollection?.name, hideSetAuthModal, t, invalidToolsByType],
+    [currCollection?.name, t, invalidToolsByType],
   )
 
   const currTool = useMemo(() => {
@@ -233,8 +232,8 @@ const useConfig = (id: string, payload: ToolNodeType) => {
     currCollection,
     isShowAuthBtn,
     showSetAuth,
-    showSetAuthModal,
-    hideSetAuthModal,
+    showSetAuthModal: () => setShowSetAuth(true),
+    hideSetAuthModal: () => setShowSetAuth(false),
     handleSaveAuth,
     isLoading,
     outputSchema,
diff --git a/web/app/components/workflow/nodes/trigger-plugin/components/trigger-form/item.tsx b/web/app/components/workflow/nodes/trigger-plugin/components/trigger-form/item.tsx
index 1fbaecd4484..62f82f0a848 100644
--- a/web/app/components/workflow/nodes/trigger-plugin/components/trigger-form/item.tsx
+++ b/web/app/components/workflow/nodes/trigger-plugin/components/trigger-form/item.tsx
@@ -5,7 +5,7 @@ import type { Event } from '@/app/components/tools/types'
 import type { TriggerWithProvider } from '@/app/components/workflow/block-selector/types'
 import type { PluginTriggerVarInputs } from '@/app/components/workflow/nodes/trigger-plugin/types'
 import { Button } from '@langgenius/dify-ui/button'
-import { useBoolean } from 'ahooks'
+import { useState } from 'react'
 import { Infotip } from '@/app/components/base/infotip'
 import { FormTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
@@ -41,7 +41,7 @@ const TriggerFormItem: FC<Props> = ({
   const { name, label, type, required, tooltip, input_schema } = schema
   const showSchemaButton = type === FormTypeEnum.object || type === FormTypeEnum.array
   const showDescription = type === FormTypeEnum.textInput || type === FormTypeEnum.secretInput
-  const [isShowSchema, { setTrue: showSchema, setFalse: hideSchema }] = useBoolean(false)
+  const [isShowSchema, setIsShowSchema] = useState(false)
   return (
     <div className="space-y-0.5 py-1">
       <div>
@@ -67,7 +67,7 @@ const TriggerFormItem: FC<Props> = ({
               <Button
                 variant="ghost"
                 size="small"
-                onClick={showSchema}
+                onClick={() => setIsShowSchema(true)}
                 className="px-1 system-xs-regular text-text-tertiary"
               >
                 <span aria-hidden className="mr-1 i-ri-braces-line size-3.5" />
@@ -97,7 +97,12 @@ const TriggerFormItem: FC<Props> = ({
       />
 
       {isShowSchema && (
-        <SchemaModal isShow onClose={hideSchema} rootName={name} schema={input_schema!} />
+        <SchemaModal
+          isShow
+          onClose={() => setIsShowSchema(false)}
+          rootName={name}
+          schema={input_schema!}
+        />
       )}
     </div>
   )
diff --git a/web/app/components/workflow/nodes/variable-assigner/__tests__/use-config.spec.tsx b/web/app/components/workflow/nodes/variable-assigner/__tests__/use-config.spec.tsx
index c795ba8bcaf..f2fd1a14ead 100644
--- a/web/app/components/workflow/nodes/variable-assigner/__tests__/use-config.spec.tsx
+++ b/web/app/components/workflow/nodes/variable-assigner/__tests__/use-config.spec.tsx
@@ -21,20 +21,6 @@ vi.mock('uuid', () => ({
 }))
 
 vi.mock('ahooks', () => ({
-  useBoolean: (initialValue: boolean) => {
-    let current = initialValue
-    return [
-      current,
-      {
-        setTrue: () => {
-          current = true
-        },
-        setFalse: () => {
-          current = false
-        },
-      },
-    ] as const
-  },
   useDebounceFn: (fn: (...args: unknown[]) => void) => ({
     run: fn,
   }),
@@ -114,16 +100,6 @@ describe('useConfig', () => {
     mockIsVarUsedInNodes.mockReturnValue(false)
   })
 
-  it('should expose read-only state, group mode and typed variable filters', () => {
-    const { result } = renderHook(() => useConfig('assigner-node', createPayload()))
-
-    expect(result.current.readOnly).toBe(false)
-    expect(result.current.isEnableGroup).toBe(true)
-    expect(result.current.filterVar(VarType.string)({ type: VarType.any } as never)).toBe(true)
-    expect(result.current.filterVar(VarType.number)({ type: VarType.string } as never)).toBe(false)
-    expect(result.current.getAvailableVars).toBe(mockGetAvailableVars)
-  })
-
   it('should update root and grouped variable payloads', () => {
     const { result } = renderHook(() => useConfig('assigner-node', createPayload()))
 
diff --git a/web/app/components/workflow/nodes/variable-assigner/components/var-group-item.tsx b/web/app/components/workflow/nodes/variable-assigner/components/var-group-item.tsx
index 88ace4a2ac0..bdf9498693f 100644
--- a/web/app/components/workflow/nodes/variable-assigner/components/var-group-item.tsx
+++ b/web/app/components/workflow/nodes/variable-assigner/components/var-group-item.tsx
@@ -4,10 +4,9 @@ import type { VarGroupItem as VarGroupItemType } from '../types'
 import type { NodeOutPutVar, ValueSelector, Var } from '@/app/components/workflow/types'
 import { toast } from '@langgenius/dify-ui/toast'
 import { RiDeleteBinLine } from '@remixicon/react'
-import { useBoolean } from 'ahooks'
 import { produce } from 'immer'
 import * as React from 'react'
-import { useCallback } from 'react'
+import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Folder } from '@/app/components/base/icons/src/vender/line/files'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
@@ -92,8 +91,7 @@ const VarGroupItem: FC<Props> = ({
     [payload.output_type],
   )
 
-  const [isEditGroupName, { setTrue: setEditGroupName, setFalse: setNotEditGroupName }] =
-    useBoolean(false)
+  const [isEditGroupName, setIsEditGroupName] = useState(false)
 
   const handleGroupNameChange = useCallback(
     (e: ChangeEvent<any>) => {
@@ -122,7 +120,7 @@ const VarGroupItem: FC<Props> = ({
               {!isEditGroupName ? (
                 <div
                   className="flex h-6 cursor-text items-center rounded-lg px-1 system-sm-semibold text-text-secondary hover:bg-gray-100"
-                  onClick={setEditGroupName}
+                  onClick={() => setIsEditGroupName(true)}
                 >
                   {payload.group_name}
                 </div>
@@ -137,7 +135,7 @@ const VarGroupItem: FC<Props> = ({
                   autoFocus
                   value={payload.group_name}
                   onChange={handleGroupNameChange}
-                  onBlur={setNotEditGroupName}
+                  onBlur={() => setIsEditGroupName(false)}
                   maxLength={30}
                 />
               )}
diff --git a/web/app/components/workflow/nodes/variable-assigner/use-config.ts b/web/app/components/workflow/nodes/variable-assigner/use-config.ts
index 749c477aa0f..db551867ba2 100644
--- a/web/app/components/workflow/nodes/variable-assigner/use-config.ts
+++ b/web/app/components/workflow/nodes/variable-assigner/use-config.ts
@@ -1,6 +1,6 @@
 import type { ValueSelector } from '../../types'
 import type { VarGroupItem, VariableAssignerNodeType } from './types'
-import { useBoolean, useDebounceFn } from 'ahooks'
+import { useDebounceFn } from 'ahooks'
 import { useCallback, useRef, useState } from 'react'
 import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
 import useInspectVarsCrud from '../../hooks/use-inspect-vars-crud'
@@ -43,10 +43,7 @@ const useConfig = (id: string, payload: VariableAssignerNodeType) => {
 
   const getAvailableVars = useGetAvailableVars()
 
-  const [
-    isShowRemoveVarConfirm,
-    { setTrue: showRemoveVarConfirm, setFalse: hideRemoveVarConfirm },
-  ] = useBoolean(false)
+  const [isShowRemoveVarConfirm, setIsShowRemoveVarConfirm] = useState(false)
 
   const [removedVars, setRemovedVars] = useState<ValueSelector[]>([])
   const [removeType, setRemoveType] = useState<'group' | 'enableChanged'>('group')
@@ -60,7 +57,7 @@ const useConfig = (id: string, payload: VariableAssignerNodeType) => {
 
         const groupName = groups[index]!.group_name
         if (isVarUsedInNodes([id, groupName, 'output'])) {
-          showRemoveVarConfirm()
+          setIsShowRemoveVarConfirm(true)
           setRemovedVars([[id, groupName, 'output']])
           setRemoveType('group')
           setRemovedGroupIndex(index)
@@ -69,7 +66,7 @@ const useConfig = (id: string, payload: VariableAssignerNodeType) => {
         setInputs(removeGroupByIndex(inputs, index))
       }
     },
-    [id, inputs, isVarUsedInNodes, setInputs, showRemoveVarConfirm],
+    [id, inputs, isVarUsedInNodes, setInputs],
   )
 
   const handleGroupEnabledChange = useCallback(
@@ -86,7 +83,7 @@ const useConfig = (id: string, payload: VariableAssignerNodeType) => {
             (item, index) => index > 0 && isVarUsedInNodes([id, item.group_name, 'output']),
           )
           if (useVars.length > 0) {
-            showRemoveVarConfirm()
+            setIsShowRemoveVarConfirm(true)
             setRemovedVars(useVars.map((item) => [id, item.group_name, 'output']))
             setRemoveType('enableChanged')
             return
@@ -99,15 +96,7 @@ const useConfig = (id: string, payload: VariableAssignerNodeType) => {
       setInputs(toggleGroupEnabled({ inputs, enabled }))
       deleteNodeInspectorVars(id)
     },
-    [
-      deleteNodeInspectorVars,
-      handleOutVarRenameChange,
-      id,
-      inputs,
-      isVarUsedInNodes,
-      setInputs,
-      showRemoveVarConfirm,
-    ],
+    [deleteNodeInspectorVars, handleOutVarRenameChange, id, inputs, isVarUsedInNodes, setInputs],
   )
 
   const handleAddGroup = useCallback(() => {
@@ -148,22 +137,14 @@ const useConfig = (id: string, payload: VariableAssignerNodeType) => {
     removedVars.forEach((v) => {
       removeUsedVarInNodes(v)
     })
-    hideRemoveVarConfirm()
+    setIsShowRemoveVarConfirm(false)
     if (removeType === 'group') {
       if (removedGroupIndex >= 0) setInputs(removeGroupByIndex(inputs, removedGroupIndex))
     } else {
       // removeType === 'enableChanged' to enabled
       setInputs(toggleGroupEnabled({ inputs, enabled: false }))
     }
-  }, [
-    removedVars,
-    hideRemoveVarConfirm,
-    removeType,
-    removeUsedVarInNodes,
-    inputs,
-    setInputs,
-    removedGroupIndex,
-  ])
+  }, [removedVars, removeType, removeUsedVarInNodes, inputs, setInputs, removedGroupIndex])
 
   return {
     readOnly,
@@ -176,7 +157,7 @@ const useConfig = (id: string, payload: VariableAssignerNodeType) => {
     handleGroupRemoved,
     handleVarGroupNameChange,
     isShowRemoveVarConfirm,
-    hideRemoveVarConfirm,
+    hideRemoveVarConfirm: () => setIsShowRemoveVarConfirm(false),
     onRemoveVarConfirm,
     getAvailableVars,
     filterVar: filterVarByType,