node control

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

@@ -19,7 +19,8 @@ const Tools = ({
   isCustom,
   onSelect,
 }: ToolsProps) => {
-  const toolsets = useStore(state => state.toolsets).filter(toolset => toolset.type === (isCustom ? 'api' : 'builtin'))
+  const totalToolsets = useStore(state => state.toolsets)
+  const toolsets = totalToolsets.filter(toolset => toolset.type === (isCustom ? 'api' : 'builtin'))
   const setToolsets = useStore(state => state.setToolsets)
   const toolsMap = useStore(state => state.toolsMap)
   const setToolsMap = useStore(state => state.setToolsMap)

web/app/components/workflow/nodes/_base/components/node-control.tsx

 import type { FC } from 'react'
-import { memo } from 'react'
-import { useWorkflow } from '../../../hooks'
 import {
-  DotsHorizontal,
-  Loading02,
-} from '@/app/components/base/icons/src/vender/line/general'
+  memo,
+  useCallback,
+  useState,
+} from 'react'
+import { useWorkflow } from '../../../hooks'
+import type { Node } from '../../../types'
+import { canRunBySingle } from '../../../utils'
+import PanelOperator from './panel-operator'
+import { Loading02 } from '@/app/components/base/icons/src/vender/line/general'
 import {
   Play,
   Stop,
 } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
 
-type NodeControlProps = {
-  isRunning?: boolean
-  nodeId: string
-}
+type NodeControlProps = Pick<Node, 'id' | 'data'>
 const NodeControl: FC<NodeControlProps> = ({
-  isRunning,
-  nodeId,
+  id,
+  data,
 }) => {
+  const [open, setOpen] = useState(false)
   const { handleNodeDataUpdate } = useWorkflow()
 
+  const handleOpenChange = useCallback((newOpen: boolean) => {
+    setOpen(newOpen)
+  }, [])
+
   return (
-    <div className='flex items-center px-0.5 h-6 bg-white rounded-lg border-[0.5px] border-gray-100 shadow-xs text-gray-500'>
-      {
-        isRunning && (
-          <div className='flex items-center px-1 h-5 rounded-md bg-primary-50 text-xs font-medium text-primary-600'>
-            <Loading02 className='mr-1 w-3 h-3 animate-spin' />
-            RUNNING
-          </div>
-        )
-      }
+    <div
+      className={`
+      hidden group-hover:flex pb-1 absolute right-0 -top-7 h-7
+      ${data.selected && '!flex'}
+      ${open && '!flex'}
+      `}
+    >
       <div
-        className='flex items-center justify-center w-5 h-5 rounded-md cursor-pointer hover:bg-black/5'
-        onClick={() => {
-          handleNodeDataUpdate({
-            id: nodeId,
-            data: { _isSingleRun: !isRunning },
-          })
-        }}
+        className='flex items-center px-0.5 h-6 bg-white rounded-lg border-[0.5px] border-gray-100 shadow-xs text-gray-500'
+        onClick={e => e.stopPropagation()}
       >
         {
-          isRunning
-            ? <Stop className='w-3 h-3' />
-            : <Play className='w-3 h-3' />
+          data._isSingleRun && (
+            <div className='flex items-center mr-1 px-1 h-5 rounded-md bg-primary-50 text-xs font-medium text-primary-600'>
+              <Loading02 className='mr-1 w-3 h-3 animate-spin' />
+              RUNNING
+            </div>
+          )
         }
-      </div>
-      <div className='flex items-center justify-center w-5 h-5 rounded-md cursor-pointer hover:bg-black/5'>
-        <DotsHorizontal className='w-3 h-3' />
+        {
+          canRunBySingle(data.type) && (
+            <div
+              className='flex items-center justify-center w-5 h-5 rounded-md cursor-pointer hover:bg-black/5'
+              onClick={() => {
+                handleNodeDataUpdate({
+                  id,
+                  data: { _isSingleRun: !data._isSingleRun },
+                })
+              }}
+            >
+              {
+                data._isSingleRun
+                  ? <Stop className='w-3 h-3' />
+                  : <Play className='w-3 h-3' />
+              }
+            </div>
+          )
+        }
+        <PanelOperator
+          id={id}
+          data={data}
+          offset={0}
+          onOpenChange={handleOpenChange}
+          triggerClassName='!w-5 !h-5'
+        />
       </div>
     </div>
   )

web/app/components/workflow/nodes/_base/components/panel-operator/index.tsx

@@ -9,6 +9,7 @@ import produce from 'immer'
 import { useContext } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
 import { useEdges } from 'reactflow'
+import type { OffsetOptions } from '@floating-ui/react'
 import ChangeBlock from './change-block'
 import { useStore } from '@/app/components/workflow/store'
 import {
@@ -33,10 +34,19 @@ import {
 type PanelOperatorProps = {
   id: string
   data: Node['data']
+  triggerClassName?: string
+  offset?: OffsetOptions
+  onOpenChange?: (open: boolean) => void
 }
 const PanelOperator = ({
   id,
   data,
+  triggerClassName,
+  offset = {
+    mainAxis: 4,
+    crossAxis: 53,
+  },
+  onOpenChange,
 }: PanelOperatorProps) => {
   const { t } = useTranslation()
   const { locale } = useContext(I18n)
@@ -86,22 +96,27 @@ const PanelOperator = ({
     return tool?.description[language] || ''
   }, [data, nodesExtraData, toolsMap, language])
 
+  const handleOpenChange = useCallback((newOpen: boolean) => {
+    setOpen(newOpen)
+
+    if (onOpenChange)
+      onOpenChange(newOpen)
+  }, [onOpenChange])
+
   return (
     <PortalToFollowElem
       placement='bottom-end'
-      offset={{
-        mainAxis: 4,
-        crossAxis: 53,
-      }}
+      offset={offset}
       open={open}
-      onOpenChange={setOpen}
+      onOpenChange={handleOpenChange}
     >
-      <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
+      <PortalToFollowElemTrigger onClick={() => handleOpenChange(!open)}>
         <div
           className={`
             flex items-center justify-center w-6 h-6 rounded-md cursor-pointer
             hover:bg-black/5
             ${open && 'bg-black/5'}
+            ${triggerClassName}
           `}
         >
           <DotsHorizontal className='w-4 h-4 text-gray-700' />
@@ -110,10 +125,14 @@ const PanelOperator = ({
       <PortalToFollowElemContent className='z-[11]'>
         <div className='w-[240px] border-[0.5px] border-gray-200 rounded-2xl shadow-xl bg-white'>
           <div className='p-1'>
-            <ChangeBlock
-              nodeId={id}
-              sourceHandle={edge?.sourceHandle || 'source'}
-            />
+            {
+              data.type !== BlockEnum.Start && (
+                <ChangeBlock
+                  nodeId={id}
+                  sourceHandle={edge?.sourceHandle || 'source'}
+                />
+              )
+            }
             <div className='flex items-center px-3 h-8 text-sm text-gray-700 rounded-lg cursor-pointer hover:bg-gray-50'>
               {t('workflow.panel.helpLink')}
             </div>
@@ -124,7 +143,10 @@ const PanelOperator = ({
                 <div className='h-[1px] bg-gray-100'></div>
                 <div className='p-1'>
                   <div
-                    className='flex items-center px-3 h-8 text-sm text-gray-700 rounded-lg cursor-pointer hover:bg-gray-50'
+                    className={`
+                    flex items-center px-3 h-8 text-sm text-gray-700 rounded-lg cursor-pointer
+                    hover:bg-rose-50 hover:text-red-500
+                    `}
                     onClick={() => handleNodeDelete(id)}
                   >
                     {t('common.operation.delete')}

web/app/components/workflow/nodes/_base/node.tsx

@@ -8,7 +8,6 @@ import {
 } from 'react'
 import type { NodeProps } from '../../types'
 import { BlockEnum } from '../../types'
-import { canRunBySingle } from '../../utils'
 import {
   NodeSourceHandle,
   NodeTargetHandle,
@@ -59,17 +58,10 @@ const BaseNode: FC<BaseNodeProps> = ({
             />
           )
         }
-        {
-          canRunBySingle(data.type)
-          && (
-            <div className='hidden group-hover:flex pb-1 absolute right-0 -top-7 h-7'>
-              <NodeControl
-                nodeId={id}
-                isRunning={data._isSingleRun}
-              />
-            </div>
-          )
-        }
+        <NodeControl
+          id={id}
+          data={data}
+        />
         <div className='flex items-center px-3 pt-3 pb-2'>
           <BlockIcon
             className='shrink-0 mr-2'