From 8b512cdadf389883d83c4663491b47c500b2ba3c Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Wed, 15 Oct 2025 12:22:41 +0800
Subject: [PATCH] Feat: Creating a data flow from a template page #9869
 (#10573)

### What problem does this PR solve?

Feat: Creating a data flow from a template page #9869

### Type of change


- [x] New Feature (non-breaking change which adds functionality)
---
 web/src/interfaces/database/flow.ts       |  1 +
 web/src/pages/agents/agent-templates.tsx  | 15 +++++++++++++--
 web/src/pages/agents/template-sidebar.tsx |  2 +-
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/web/src/interfaces/database/flow.ts b/web/src/interfaces/database/flow.ts
index a17d21558..8b35579e2 100644
--- a/web/src/interfaces/database/flow.ts
+++ b/web/src/interfaces/database/flow.ts
@@ -46,6 +46,7 @@ export declare interface IFlow {
 export interface IFlowTemplate {
   avatar: string;
   canvas_type: string;
+  canvas_category?: string;
   create_date: string;
   create_time: number;
   description: {
diff --git a/web/src/pages/agents/agent-templates.tsx b/web/src/pages/agents/agent-templates.tsx
index 2148f0eff..3cc2a9778 100644
--- a/web/src/pages/agents/agent-templates.tsx
+++ b/web/src/pages/agents/agent-templates.tsx
@@ -12,6 +12,7 @@ import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import { useFetchAgentTemplates, useSetAgent } from '@/hooks/use-agent-request';
 import { IFlowTemplate } from '@/interfaces/database/flow';
 
+import { AgentCategory } from '@/constants/agent';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { CreateAgentDialog } from './create-agent-dialog';
@@ -48,27 +49,36 @@ export default function AgentTemplates() {
     [showCreatingModal],
   );
 
-  const { navigateToAgent } = useNavigatePage();
+  const { navigateToAgent, navigateToDataflow } = useNavigatePage();
 
   const handleOk = useCallback(
     async (payload: any) => {
       let dsl = template?.dsl;
+      const canvasCategory = template?.canvas_category;
+
       const ret = await setAgent({
         title: payload.name,
         dsl,
         avatar: template?.avatar,
+        canvas_category: canvasCategory,
       });
 
       if (ret?.code === 0) {
         hideCreatingModal();
-        navigateToAgent(ret.data.id)();
+        if (canvasCategory === AgentCategory.DataflowCanvas) {
+          navigateToDataflow(ret.data.id)();
+        } else {
+          navigateToAgent(ret.data.id)();
+        }
       }
     },
     [
       hideCreatingModal,
       navigateToAgent,
+      navigateToDataflow,
       setAgent,
       template?.avatar,
+      template?.canvas_category,
       template?.dsl,
     ],
   );
@@ -128,6 +138,7 @@ export default function AgentTemplates() {
               visible={creatingVisible}
               hideModal={hideCreatingModal}
               onOk={handleOk}
+              canvasCategory={template?.canvas_category}
             ></CreateAgentDialog>
           )}
         </main>
diff --git a/web/src/pages/agents/template-sidebar.tsx b/web/src/pages/agents/template-sidebar.tsx
index 2e1dafed6..4506de063 100644
--- a/web/src/pages/agents/template-sidebar.tsx
+++ b/web/src/pages/agents/template-sidebar.tsx
@@ -17,7 +17,7 @@ export enum MenuItemKey {
   CustomerSupport = 'Customer Support',
   Marketing = 'Marketing',
   ConsumerApp = 'Consumer App',
-  Pipeline = 'Pipeline',
+  Pipeline = 'Ingestion Pipeline',
   Other = 'Other',
 }
 const menuItems = [