fix

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

@@ -37,6 +37,7 @@ type NodeSelectorProps = {
   popupClassName?: string
   asChild?: boolean
   availableBlocksTypes?: BlockEnum[]
+  disabled?: boolean
 }
 const NodeSelector: FC<NodeSelectorProps> = ({
   open: openFromProps,
@@ -50,6 +51,7 @@ const NodeSelector: FC<NodeSelectorProps> = ({
   popupClassName,
   asChild,
   availableBlocksTypes,
+  disabled,
 }) => {
   const { t } = useTranslation()
   const [searchText, setSearchText] = useState('')
@@ -62,9 +64,11 @@ const NodeSelector: FC<NodeSelectorProps> = ({
       onOpenChange(newOpen)
   }, [onOpenChange])
   const handleTrigger = useCallback<MouseEventHandler<HTMLDivElement>>((e) => {
+    if (disabled)
+      return
     e.stopPropagation()
     handleOpenChange(!open)
-  }, [handleOpenChange, open])
+  }, [handleOpenChange, open, disabled])
   const handleSelect = useCallback<OnSelectBlock>((type, toolDefaultValue) => {
     handleOpenChange(false)
     onSelect(type, toolDefaultValue)

web/app/components/workflow/nodes/_base/components/next-step/add.tsx

@@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next'
 import {
   useNodesExtraData,
   useNodesInteractions,
+  useNodesReadOnly,
 } from '@/app/components/workflow/hooks'
 import BlockSelector from '@/app/components/workflow/block-selector'
 import { Plus } from '@/app/components/base/icons/src/vender/line/general'
@@ -29,6 +30,7 @@ const Add = ({
   const { t } = useTranslation()
   const { handleNodeAdd } = useNodesInteractions()
   const nodesExtraData = useNodesExtraData()
+  const { nodesReadOnly } = useNodesReadOnly()
   const availableNextNodes = nodesExtraData[nodeType].availableNextNodes
 
   const handleSelect = useCallback<OnSelectBlock>((type, toolDefaultValue) => {
@@ -51,6 +53,7 @@ const Add = ({
           relative flex items-center px-2 w-[328px] h-9 rounded-lg border border-dashed border-gray-200 bg-gray-50 
           hover:bg-gray-100 text-xs text-gray-500 cursor-pointer
           ${open && '!bg-gray-100'}
+          ${nodesReadOnly && '!cursor-not-allowed'}
         `}
       >
         {
@@ -69,10 +72,11 @@ const Add = ({
         {t('workflow.panel.selectNextStep')}
       </div>
     )
-  }, [branchName, t])
+  }, [branchName, t, nodesReadOnly])
 
   return (
     <BlockSelector
+      disabled={nodesReadOnly}
       onSelect={handleSelect}
       placement='top'
       offset={0}

web/app/components/workflow/nodes/_base/components/next-step/item.tsx

@@ -14,6 +14,7 @@ import BlockSelector from '@/app/components/workflow/block-selector'
 import {
   useNodesExtraData,
   useNodesInteractions,
+  useNodesReadOnly,
 } from '@/app/components/workflow/hooks'
 import Button from '@/app/components/base/button'
 import { useStore } from '@/app/components/workflow/store'
@@ -33,6 +34,7 @@ const Item = ({
 }: ItemProps) => {
   const { t } = useTranslation()
   const { handleNodeChange } = useNodesInteractions()
+  const { nodesReadOnly } = useNodesReadOnly()
   const nodesExtraData = useNodesExtraData()
   const toolsets = useStore(s => s.toolsets)
   const toolIcon = useMemo(() => {
@@ -77,17 +79,21 @@ const Item = ({
         className='shrink-0 mr-1.5'
       />
       <div className='grow'>{data.title}</div>
-      <BlockSelector
-        onSelect={handleSelect}
-        placement='top-end'
-        offset={{
-          mainAxis: 6,
-          crossAxis: 8,
-        }}
-        trigger={renderTrigger}
-        popupClassName='!w-[328px]'
-        availableBlocksTypes={intersection(availablePrevNodes, availableNextNodes)}
-      />
+      {
+        !nodesReadOnly && (
+          <BlockSelector
+            onSelect={handleSelect}
+            placement='top-end'
+            offset={{
+              mainAxis: 6,
+              crossAxis: 8,
+            }}
+            trigger={renderTrigger}
+            popupClassName='!w-[328px]'
+            availableBlocksTypes={intersection(availablePrevNodes, availableNextNodes)}
+          />
+        )
+      }
     </div>
   )
 }

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

@@ -1,6 +1,7 @@
 import {
   memo,
   useCallback,
+  useMemo,
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import { intersection } from 'lodash-es'
@@ -30,6 +31,15 @@ const ChangeBlock = ({
   const availablePrevNodes = nodesExtraData[nodeType].availablePrevNodes
   const availableNextNodes = nodesExtraData[nodeType].availableNextNodes
 
+  const availableNodes = useMemo(() => {
+    if (availableNextNodes.length && availableNextNodes.length)
+      return intersection(availablePrevNodes, availableNextNodes)
+    else if (availablePrevNodes.length)
+      return availablePrevNodes
+    else
+      return availableNextNodes
+  }, [availablePrevNodes, availableNextNodes])
+
   const handleSelect = useCallback<OnSelectBlock>((type, toolDefaultValue) => {
     handleNodeChange(nodeId, type, sourceHandle, toolDefaultValue)
   }, [handleNodeChange, nodeId, sourceHandle])
@@ -51,7 +61,7 @@ const ChangeBlock = ({
       }}
       onSelect={handleSelect}
       trigger={renderTrigger}
-      availableBlocksTypes={intersection(availablePrevNodes, availableNextNodes)}
+      availableBlocksTypes={availableNodes}
     />
   )
 }

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

@@ -15,6 +15,7 @@ import { useStore } from '@/app/components/workflow/store'
 import {
   useNodesExtraData,
   useNodesInteractions,
+  useNodesReadOnly,
 } from '@/app/components/workflow/hooks'
 import { DotsHorizontal } from '@/app/components/base/icons/src/vender/line/general'
 import {
@@ -53,6 +54,7 @@ const PanelOperator = ({
   const language = getLanguage(locale)
   const edges = useEdges()
   const { handleNodeDelete } = useNodesInteractions()
+  const { nodesReadOnly } = useNodesReadOnly()
   const nodesExtraData = useNodesExtraData()
   const toolsets = useStore(s => s.toolsets)
   const toolsMap = useStore(s => s.toolsMap)
@@ -126,7 +128,7 @@ const PanelOperator = ({
         <div className='w-[240px] border-[0.5px] border-gray-200 rounded-2xl shadow-xl bg-white'>
           <div className='p-1'>
             {
-              data.type !== BlockEnum.Start && (
+              data.type !== BlockEnum.Start && !nodesReadOnly && (
                 <ChangeBlock
                   nodeId={id}
                   nodeType={data.type}
@@ -139,7 +141,7 @@ const PanelOperator = ({
             </div>
           </div>
           {
-            data.type !== BlockEnum.Start && (
+            data.type !== BlockEnum.Start && !nodesReadOnly && (
               <>
                 <div className='h-[1px] bg-gray-100'></div>
                 <div className='p-1'>