init

web/app/components/workflow/constants.ts

@@ -159,6 +159,7 @@ export const X_OFFSET = 64
 export const NODE_WIDTH_X_OFFSET = NODE_WIDTH + X_OFFSET
 export const Y_OFFSET = 39
 export const TREE_DEEPTH = 20
+export const START_INITIAL_POSITION = { x: 80, y: 282 }
 
 export const RETRIEVAL_OUTPUT_STRUCT = `{
   "content": "",

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

@@ -86,9 +86,12 @@ export const useWorkflow = () => {
       edges,
     } = store.getState()
     const nodes = getNodes()
-    const currentNode = nodes.find(node => node.id === nodeId)!
+    const currentNode = nodes.find(node => node.id === nodeId)
     const list: Node[] = []
 
+    if (!currentNode)
+      return list
+
     const traverse = (root: Node, callback: (node: Node) => void) => {
       const incomers = getIncomers(root, nodes, edges)
 

web/app/components/workflow/index.tsx

@@ -38,6 +38,7 @@ import {
   initialEdges,
   initialNodes,
 } from './utils'
+import { START_INITIAL_POSITION } from './constants'
 import {
   fetchWorkflowDraft,
   syncWorkflowDraft,
@@ -168,11 +169,11 @@ const WorkflowWrap: FC<WorkflowProps> = ({
     return {
       id: `${Date.now()}`,
       type: 'custom',
-      data: nodesInitialData.start,
-      position: {
-        x: 100,
-        y: 200,
+      data: {
+        ...nodesInitialData.start,
+        selected: true,
       },
+      position: START_INITIAL_POSITION,
     }
   }, [nodesInitialData])
 
@@ -214,6 +215,7 @@ const WorkflowWrap: FC<WorkflowProps> = ({
   if (error && error.json && !error.bodyUsed && appDetail) {
     error.json().then((err: any) => {
       if (err.code === 'draft_workflow_not_exist') {
+        useStore.setState({ notInitialWorkflow: true })
         syncWorkflowDraft({
           url: `/apps/${appDetail.id}/workflows/draft`,
           params: {

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

 import type { MouseEvent } from 'react'
 import {
   useCallback,
+  useEffect,
   useState,
 } from 'react'
 import type { NodeProps } from 'reactflow'
@@ -15,6 +16,7 @@ import type { Node } from '../../../types'
 import BlockSelector from '../../../block-selector'
 import type { ToolDefaultValue } from '../../../block-selector/types'
 import { useNodesInteractions } from '../../../hooks'
+import { useStore } from '../../../store'
 
 type NodeHandleProps = {
   handleId: string
@@ -87,10 +89,12 @@ export const NodeTargetHandle = ({
 
 export const NodeSourceHandle = ({
   id,
+  data,
   handleId,
   handleClassName,
   nodeSelectorClassName,
 }: NodeHandleProps) => {
+  const notInitialWorkflow = useStore(s => s.notInitialWorkflow)
   const [open, setOpen] = useState(false)
   const { handleNodeAddNext } = useNodesInteractions()
   const edges = useEdges()
@@ -108,6 +112,11 @@ export const NodeSourceHandle = ({
     handleNodeAddNext(id, type, handleId, toolDefaultValue)
   }, [handleNodeAddNext, id, handleId])
 
+  useEffect(() => {
+    if (notInitialWorkflow && data.type === BlockEnum.Start)
+      setOpen(true)
+  }, [notInitialWorkflow, data.type])
+
   return (
     <>
       <Handle

web/app/components/workflow/store.ts

@@ -37,6 +37,7 @@ type State = {
     edges: Edge[]
     viewport: Viewport
   }
+  notInitialWorkflow: boolean
 }
 
 type Action = {
@@ -56,6 +57,7 @@ type Action = {
   setShowInputsPanel: (showInputsPanel: boolean) => void
   setInputs: (inputs: Record<string, string>) => void
   setBackupDraft: (backupDraft?: State['backupDraft']) => void
+  setNotInitialWorkflow: (notInitialWorkflow: boolean) => void
 }
 
 export const useStore = create<State & Action>(set => ({
@@ -91,4 +93,6 @@ export const useStore = create<State & Action>(set => ({
   setInputs: inputs => set(() => ({ inputs })),
   backupDraft: undefined,
   setBackupDraft: backupDraft => set(() => ({ backupDraft })),
+  notInitialWorkflow: false,
+  setNotInitialWorkflow: notInitialWorkflow => set(() => ({ notInitialWorkflow })),
 }))