feat: implement workflow onboarding modal system (#24551)

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

@@ -0,0 +1,63 @@
+import { useCallback, useEffect } from 'react'
+import { useStoreApi } from 'reactflow'
+import { useWorkflowStore } from '@/app/components/workflow/store'
+import { BlockEnum } from '@/app/components/workflow/types'
+
+export const useAutoOnboarding = () => {
+  const store = useStoreApi()
+  const workflowStore = useWorkflowStore()
+
+  const checkAndShowOnboarding = useCallback(() => {
+    const { getNodes } = store.getState()
+    const {
+      showOnboarding,
+      hasShownOnboarding,
+      notInitialWorkflow,
+      setShowOnboarding,
+      setHasShownOnboarding,
+    } = workflowStore.getState()
+
+    // Skip if already showing onboarding or it's the initial workflow creation
+    if (showOnboarding || notInitialWorkflow)
+      return
+
+    const nodes = getNodes()
+    const startNodeTypes = [
+      BlockEnum.Start,
+      BlockEnum.TriggerSchedule,
+      BlockEnum.TriggerWebhook,
+      BlockEnum.TriggerPlugin,
+    ]
+
+    // Check if canvas is empty (no nodes or no start nodes)
+    const hasStartNode = nodes.some(node => startNodeTypes.includes(node.data.type))
+    const isEmpty = nodes.length === 0 || !hasStartNode
+
+    // Show onboarding if canvas is empty and we haven't shown it before in this session
+    if (isEmpty && !hasShownOnboarding) {
+      setShowOnboarding(true)
+      setHasShownOnboarding(true)
+    }
+  }, [store, workflowStore])
+
+  const handleOnboardingClose = useCallback(() => {
+    const { setShowOnboarding, setHasShownOnboarding } = workflowStore.getState()
+    setShowOnboarding(false)
+    setHasShownOnboarding(true)
+  }, [workflowStore])
+
+  // Check on mount and when nodes change
+  useEffect(() => {
+    // Small delay to ensure the workflow data is loaded
+    const timer = setTimeout(() => {
+      checkAndShowOnboarding()
+    }, 500)
+
+    return () => clearTimeout(timer)
+  }, [checkAndShowOnboarding])
+
+  return {
+    checkAndShowOnboarding,
+    handleOnboardingClose,
+  }
+}

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

@@ -57,13 +57,17 @@ export const useWorkflowInit = () => {
       if (error && error.json && !error.bodyUsed && appDetail) {
         error.json().then((err: any) => {
           if (err.code === 'draft_workflow_not_exist') {
-            workflowStore.setState({ notInitialWorkflow: true })
+            workflowStore.setState({
+              notInitialWorkflow: true,
+              showOnboarding: true,
+              hasShownOnboarding: false,
+            })
             syncWorkflowDraft({
               url: `/apps/${appDetail.id}/workflows/draft`,
               params: {
                 graph: {
-                  nodes: nodesTemplate,
-                  edges: edgesTemplate,
+                  nodes: [],
+                  edges: [],
                 },
                 features: {
                   retriever_resource: { enabled: true },
@@ -83,7 +87,6 @@ export const useWorkflowInit = () => {
 
   useEffect(() => {
     handleGetInitialWorkflowData()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   const handleFetchPreloadData = useCallback(async () => {