backup draft

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

@@ -61,8 +61,8 @@ const NodeSelector: FC<NodeSelectorProps> = ({
   }, [onOpenChange])
   const handleTrigger = useCallback<MouseEventHandler<HTMLDivElement>>((e) => {
     e.stopPropagation()
-    setLocalOpen(v => !v)
-  }, [])
+    handleOpenChange(!open)
+  }, [handleOpenChange, open])
   const handleSelect = useCallback<OnSelectBlock>((type, toolDefaultValue) => {
     handleOpenChange(false)
     onSelect(type, toolDefaultValue)

web/app/components/workflow/custom-edge.tsx

-import { memo } from 'react'
+import {
+  memo,
+  useCallback,
+  useState,
+} from 'react'
 import type { EdgeProps } from 'reactflow'
 import {
   BaseEdge,
@@ -29,6 +33,10 @@ const CustomEdge = ({
     targetY,
     targetPosition: Position.Left,
   })
+  const [open, setOpen] = useState(false)
+  const handleOpenChange = useCallback((v: boolean) => {
+    setOpen(v)
+  }, [])
 
   return (
     <>
@@ -41,10 +49,12 @@ const CustomEdge = ({
         }}
       />
       <EdgeLabelRenderer>
-        {
-          data?._hovering && (
         <div
-              className='nopan nodrag'
+          className={`
+            nopan nodrag
+            ${data?._hovering ? 'block' : 'hidden'}
+            ${open && '!block'}
+          `}
           style={{
             position: 'absolute',
             transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`,
@@ -52,12 +62,12 @@ const CustomEdge = ({
           }}
         >
           <BlockSelector
+            open={open}
+            onOpenChange={handleOpenChange}
             asChild
             onSelect={() => {}}
           />
         </div>
-          )
-        }
       </EdgeLabelRenderer>
     </>
   )

web/app/components/workflow/hooks/use-workflow-run.ts

@@ -22,6 +22,23 @@ export const useWorkflowRun = () => {
   const reactflow = useReactFlow()
   const workflowContainerRef = useRef<HTMLDivElement>(null)
 
+  const handleBackupDraft = useCallback(() => {
+    const {
+      getNodes,
+      getEdges,
+      getViewport,
+    } = reactflow
+    const {
+      setBackupDraft,
+    } = useStore.getState()
+
+    setBackupDraft({
+      nodes: getNodes(),
+      edges: getEdges(),
+      viewport: getViewport(),
+    })
+  }, [reactflow])
+
   const handleLoadBackupDraft = useCallback(() => {
     const {
       setNodes,
@@ -55,9 +72,10 @@ export const useWorkflowRun = () => {
       handleLoadBackupDraft()
     }
     else {
+      handleBackupDraft()
       const newNodes = produce(getNodes(), (draft) => {
         draft.forEach((node) => {
-          node.data._runningStatus = shouldClear ? undefined : NodeRunningStatus.Waiting
+          node.data._runningStatus = NodeRunningStatus.Waiting
         })
       })
       setNodes(newNodes)
@@ -68,7 +86,7 @@ export const useWorkflowRun = () => {
       })
       setEdges(newEdges)
     }
-  }, [store, handleLoadBackupDraft])
+  }, [store, handleLoadBackupDraft, handleBackupDraft])
 
   const handleRun = useCallback((params: any, callback?: IOtherOptions) => {
     const {
@@ -77,8 +95,6 @@ export const useWorkflowRun = () => {
       edges,
       setEdges,
     } = store.getState()
-    const { getViewport } = reactflow
-    const { setBackupDraft } = useStore.getState()
     const appDetail = useAppStore.getState().appDetail
     const workflowContainer = document.getElementById('workflow-container')
 
@@ -87,12 +103,6 @@ export const useWorkflowRun = () => {
       clientHeight,
     } = workflowContainer!
 
-    setBackupDraft({
-      nodes: getNodes(),
-      edges,
-      viewport: getViewport(),
-    })
-
     let url = ''
     if (appDetail?.mode === 'advanced-chat')
       url = `/apps/${appDetail.id}/advanced-chat/workflows/draft/run`
@@ -164,6 +174,7 @@ export const useWorkflowRun = () => {
   }, [store, reactflow])
 
   return {
+    handleBackupDraft,
     handleRunSetting,
     handleRun,
     workflowContainerRef,