From 768bfa8a7e579d456bf5251f7b1e3ed425e854b1 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Fri, 6 Feb 2026 14:41:47 +0800
Subject: [PATCH] chore: hover show tool icon

---
 .../plugins/tool-block/component.tsx          | 28 +++++++++++++---
 .../tool-block/tool-group-block-component.tsx | 32 +++++++++++++++++--
 2 files changed, 53 insertions(+), 7 deletions(-)

diff --git a/web/app/components/workflow/skill/editor/skill-editor/plugins/tool-block/component.tsx b/web/app/components/workflow/skill/editor/skill-editor/plugins/tool-block/component.tsx
index 18b0f82e30..3074269f4c 100644
--- a/web/app/components/workflow/skill/editor/skill-editor/plugins/tool-block/component.tsx
+++ b/web/app/components/workflow/skill/editor/skill-editor/plugins/tool-block/component.tsx
@@ -4,7 +4,7 @@ import type { ToolValue } from '@/app/components/workflow/block-selector/types'
 import type { ToolWithProvider } from '@/app/components/workflow/types'
 import type { AppAssetTreeView } from '@/types/app-asset'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
-import { RiAlertFill } from '@remixicon/react'
+import { RiAlertFill, RiEqualizer2Line } from '@remixicon/react'
 import * as React from 'react'
 import { useEffect, useMemo, useState } from 'react'
 import { createPortal } from 'react-dom'
@@ -358,11 +358,31 @@ const ToolBlockComponent = ({
         />
       )
     })()
+    const hoverIcon = (
+      <RiEqualizer2Line
+        className={cn(
+          'hidden size-[14px]',
+          needAuthorization ? 'text-text-warning' : 'text-text-accent',
+          isInteractive && 'group-hover:block',
+        )}
+      />
+    )
+    const normalIcon = (
+      <span className={cn('flex items-center justify-center', isInteractive && 'group-hover:hidden')}>
+        {iconNode}
+      </span>
+    )
+    const iconContent = (
+      <span className="flex size-4 items-center justify-center">
+        {normalIcon}
+        {isInteractive && hoverIcon}
+      </span>
+    )
     if (!needAuthorization)
-      return iconNode
+      return iconContent
     return (
       <span className="flex size-4 items-center justify-center rounded-[5px] border border-components-panel-border-subtle bg-background-default-dodge">
-        {iconNode}
+        {iconContent}
       </span>
     )
   }
@@ -521,7 +541,7 @@ const ToolBlockComponent = ({
       <span
         ref={ref}
         className={cn(
-          'inline-flex items-center gap-[2px] rounded-[5px] border py-px pl-px pr-[3px] shadow-xs',
+          'group inline-flex items-center gap-[2px] rounded-[5px] border py-px pl-px pr-[3px] shadow-xs',
           isInteractive ? 'cursor-pointer' : 'cursor-default',
           needAuthorization ? 'border-state-warning-active bg-state-warning-hover' : 'border-state-accent-hover-alt bg-state-accent-hover',
           isSelected && 'border-text-accent',
diff --git a/web/app/components/workflow/skill/editor/skill-editor/plugins/tool-block/tool-group-block-component.tsx b/web/app/components/workflow/skill/editor/skill-editor/plugins/tool-block/tool-group-block-component.tsx
index 710a0a78e8..ed8a937f71 100644
--- a/web/app/components/workflow/skill/editor/skill-editor/plugins/tool-block/tool-group-block-component.tsx
+++ b/web/app/components/workflow/skill/editor/skill-editor/plugins/tool-block/tool-group-block-component.tsx
@@ -3,6 +3,7 @@ import type { PluginDetail } from '@/app/components/plugins/types'
 import type { ToolParameter } from '@/app/components/tools/types'
 import type { ToolValue } from '@/app/components/workflow/block-selector/types'
 import type { ToolWithProvider } from '@/app/components/workflow/types'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
 import { RiAlertFill, RiCloseLine, RiEqualizer2Line } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
@@ -105,6 +106,7 @@ const ToolGroupBlockComponent = ({
   nodeKey,
   tools,
 }: ToolGroupBlockComponentProps) => {
+  const [editor] = useLexicalComposerContext()
   const [ref, isSelected] = useSelectOrDelete(nodeKey, DELETE_TOOL_BLOCK_COMMAND)
   const { t } = useTranslation()
   const authBadgeLabel = t('skillEditor.authorizationBadge', { ns: 'workflow' })
@@ -113,6 +115,7 @@ const ToolGroupBlockComponent = ({
   const toolBlockContext = useToolBlockContext()
   const isUsingExternalMetadata = Boolean(toolBlockContext?.onMetadataChange)
   const useModal = Boolean(toolBlockContext?.useModal)
+  const isInteractive = editor.isEditable()
   const [isSettingOpen, setIsSettingOpen] = useState(false)
   const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null)
   const [expandedToolId, setExpandedToolId] = useState<string | null>(null)
@@ -535,11 +538,31 @@ const ToolGroupBlockComponent = ({
         />
       )
     })()
+    const hoverIcon = (
+      <RiEqualizer2Line
+        className={cn(
+          'hidden size-[14px]',
+          needAuthorization ? 'text-text-warning' : 'text-text-accent',
+          isInteractive && 'group-hover:block',
+        )}
+      />
+    )
+    const normalIcon = (
+      <span className={cn('flex items-center justify-center', isInteractive && 'group-hover:hidden')}>
+        {iconNode}
+      </span>
+    )
+    const iconContent = (
+      <span className="flex size-4 items-center justify-center">
+        {normalIcon}
+        {isInteractive && hoverIcon}
+      </span>
+    )
     if (!needAuthorization)
-      return iconNode
+      return iconContent
     return (
       <span className="flex size-4 items-center justify-center rounded-[5px] border border-components-panel-border-subtle bg-background-default-dodge">
-        {iconNode}
+        {iconContent}
       </span>
     )
   }
@@ -779,12 +802,15 @@ const ToolGroupBlockComponent = ({
       <span
         ref={ref}
         className={cn(
-          'inline-flex cursor-pointer items-center gap-[2px] rounded-[5px] border px-px py-[1px] shadow-xs',
+          'inline-flex items-center gap-[2px] rounded-[5px] border px-px py-[1px] shadow-xs',
+          isInteractive ? 'group cursor-pointer' : 'cursor-default',
           needAuthorization ? 'border-state-warning-active bg-state-warning-hover' : 'border-state-accent-hover-alt bg-state-accent-hover',
           isSelected && 'border-text-accent',
         )}
         title={providerLabel}
         onMouseDown={() => {
+          if (!isInteractive)
+            return
           if (!toolItems.length)
             return
           setIsSettingOpen(true)