feat: Show empty workflow dialog when entering app builder with no nodes (#9379)

## Summary

Prompts users to load a template or return to graph when entering
builder mode on an empty workflow

## Screenshots (if applicable)

<img width="627" height="275" alt="image"
src="https://github.com/user-attachments/assets/c1a35dc3-4e8f-4abd-95b9-2f92524e8ebf"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9379-feat-Show-empty-workflow-dialog-when-entering-app-builder-with-no-nodes-3196d73d36508123b643ec893cd86cac)
by [Unito](https://www.unito.io)

src/components/builder/BuilderDialog.vue

@@ -13,6 +13,7 @@
         </h2>
       </div>
       <Button
+        v-if="showClose"
         variant="muted-textonly"
         class="-mr-1"
         :aria-label="$t('g.close')"
@@ -37,6 +38,10 @@
 <script setup lang="ts">
 import Button from '@/components/ui/button/Button.vue'
 
+const { showClose = true } = defineProps<{
+  showClose?: boolean
+}>()
+
 defineEmits<{
   close: []
 }>()

src/components/builder/EmptyWorkflowDialogContent.vue

@@ -0,0 +1,40 @@
+<template>
+  <BuilderDialog :show-close="false">
+    <template #title>
+      {{ $t('builderToolbar.emptyWorkflowTitle') }}
+    </template>
+
+    <div class="flex flex-col gap-2">
+      <p class="m-0 text-sm text-muted-foreground">
+        {{ $t('builderToolbar.emptyWorkflowExplanation') }}
+      </p>
+      <p class="m-0 text-sm text-muted-foreground">
+        {{ $t('builderToolbar.emptyWorkflowPrompt') }}
+      </p>
+    </div>
+
+    <template #footer>
+      <Button
+        variant="muted-textonly"
+        size="lg"
+        @click="$emit('backToWorkflow')"
+      >
+        {{ $t('builderToolbar.backToWorkflow') }}
+      </Button>
+      <Button variant="secondary" size="lg" @click="$emit('loadTemplate')">
+        {{ $t('builderToolbar.loadTemplate') }}
+      </Button>
+    </template>
+  </BuilderDialog>
+</template>
+
+<script setup lang="ts">
+import Button from '@/components/ui/button/Button.vue'
+
+import BuilderDialog from './BuilderDialog.vue'
+
+defineEmits<{
+  backToWorkflow: []
+  loadTemplate: []
+}>()
+</script>

src/components/builder/useEmptyWorkflowDialog.ts

@@ -0,0 +1,44 @@
+import { useWorkflowTemplateSelectorDialog } from '@/composables/useWorkflowTemplateSelectorDialog'
+import { app } from '@/scripts/app'
+import { useDialogService } from '@/services/dialogService'
+import { useDialogStore } from '@/stores/dialogStore'
+
+import EmptyWorkflowDialogContent from './EmptyWorkflowDialogContent.vue'
+
+const DIALOG_KEY = 'builder-empty-workflow'
+
+export function useEmptyWorkflowDialog() {
+  const dialogService = useDialogService()
+  const dialogStore = useDialogStore()
+  const templateSelectorDialog = useWorkflowTemplateSelectorDialog()
+
+  function show(options: {
+    onEnterBuilder: () => void
+    onDismiss: () => void
+  }) {
+    dialogService.showLayoutDialog({
+      key: DIALOG_KEY,
+      component: EmptyWorkflowDialogContent,
+      props: {
+        onBackToWorkflow: () => {
+          closeDialog()
+          options.onDismiss()
+        },
+        onLoadTemplate: () => {
+          closeDialog()
+          templateSelectorDialog.show('appbuilder', {
+            afterClose: () => {
+              if (app.rootGraph?.nodes?.length) options.onEnterBuilder()
+            }
+          })
+        }
+      }
+    })
+  }
+
+  function closeDialog() {
+    dialogStore.closeDialog({ key: DIALOG_KEY })
+  }
+
+  return { show }
+}