Feat: Bring the parser operator when creating a new data flow #9869 (#10309)

### What problem does this PR solve?

Feat: Bring the parser operator when creating a new data flow #9869
### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/agents/hooks/use-create-agent.ts

@@ -2,7 +2,11 @@ import { useSetModalState } from '@/hooks/common-hooks';
 import { EmptyDsl, useSetAgent } from '@/hooks/use-agent-request';
 import { DSL } from '@/interfaces/database/agent';
 import { AgentCategory } from '@/pages/agent/constant';
-import { BeginId, Operator } from '@/pages/data-flow/constant';
+import {
+  BeginId,
+  Operator,
+  initialParserValues,
+} from '@/pages/data-flow/constant';
 import { useCallback } from 'react';
 import { FlowType } from '../constant';
 import { FormSchemaType } from '../create-agent-form';
@@ -24,8 +28,37 @@ export const DataflowEmptyDsl = {
         sourcePosition: 'left',
         targetPosition: 'right',
       },
+      {
+        data: {
+          form: initialParserValues,
+          label: 'Parser',
+          name: 'Parser_0',
+        },
+        dragging: false,
+        id: 'Parser:HipSignsRhyme',
+        measured: {
+          height: 57,
+          width: 200,
+        },
+        position: {
+          x: 316.99524094206413,
+          y: 195.39629819663406,
+        },
+        selected: true,
+        sourcePosition: 'right',
+        targetPosition: 'left',
+        type: 'parserNode',
+      },
+    ],
+    edges: [
+      {
+        id: 'xy-edge__Filestart-Parser:HipSignsRhymeend',
+        source: BeginId,
+        sourceHandle: 'start',
+        target: 'Parser:HipSignsRhyme',
+        targetHandle: 'end',
+      },
     ],
-    edges: [],
   },
   components: {
     [Operator.Begin]: {

web/src/pages/agents/index.tsx

@@ -79,21 +79,21 @@ export default function Agents() {
                 onClick={showCreatingModal}
               >
                 <Clipboard />
-                Create from Blank
+                {t('flow.createFromBlank')}
               </DropdownMenuItem>
               <DropdownMenuItem
                 justifyBetween={false}
                 onClick={navigateToAgentTemplates}
               >
                 <ClipboardPlus />
-                Create from Template
+                {t('flow.createFromTemplate')}
               </DropdownMenuItem>
               <DropdownMenuItem
                 justifyBetween={false}
                 onClick={handleImportJson}
               >
                 <FileInput />
-                Import json file
+                {t('flow.importJsonFile')}
               </DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>

web/src/pages/data-flow/constant.tsx

@@ -268,11 +268,6 @@ export const initialParserValues = {
       fileFormat: FileType.PowerPoint,
       output_format: PptOutputFormat.Json,
     },
-    {
-      fileFormat: FileType.Audio,
-      llm_id: '',
-      output_format: AudioOutputFormat.Text,
-    },
   ],
 };
 

web/src/pages/data-flow/hooks/use-run-dataflow.ts

@@ -1,3 +1,4 @@
+import message from '@/components/ui/message';
 import { useSendMessageBySSE } from '@/hooks/use-send-message';
 import api from '@/utils/api';
 import { get } from 'lodash';
@@ -38,6 +39,8 @@ export function useRunDataflow(
         }
 
         return msgId;
+      } else {
+        message.error(get(res, 'data.message', ''));
       }
     },
     [hideRunOrChatDrawer, id, saveGraph, send, setMessageId],

web/src/pages/data-flow/index.tsx

@@ -68,7 +68,8 @@ export default function DataFlow() {
   const { handleExportJson } = useHandleExportOrImportJsonFile();
   const { saveGraph, loading } = useSaveGraph();
   const { flowDetail: agentDetail } = useFetchDataOnMount();
-  const { handleRun } = useSaveGraphBeforeOpeningDebugDrawer(showChatDrawer);
+  const { handleRun, loading: running } =
+    useSaveGraphBeforeOpeningDebugDrawer(showChatDrawer);
 
   const {
     visible: versionDialogVisible,
@@ -136,14 +137,18 @@ export default function DataFlow() {
           >
             <LaptopMinimalCheck /> {t('flow.save')}
           </ButtonLoading>
-          <Button
+          <ButtonLoading
             variant={'secondary'}
             onClick={handleRunAgent}
             disabled={isParsing}
+            loading={running}
           >
-            <CirclePlay className={isParsing ? 'animate-spin' : ''} />
-            {isParsing ? t('dataflow.running') : t('flow.run')}
-          </Button>
+            {running || (
+              <CirclePlay className={isParsing ? 'animate-spin' : ''} />
+            )}
+
+            {isParsing || running ? t('dataflow.running') : t('flow.run')}
+          </ButtonLoading>
           <Button variant={'secondary'} onClick={showVersionDialog}>
             <History />
             {t('flow.historyversion')}

web/src/pages/data-flow/utils.ts

@@ -14,6 +14,7 @@ import {
   NodeHandleId,
   Operator,
 } from './constant';
+import { ExtractorFormSchemaType } from './form/extractor-form';
 import { HierarchicalMergerFormSchemaType } from './form/hierarchical-merger-form';
 import { ParserFormSchemaType } from './form/parser-form';
 import { SplitterFormSchemaType } from './form/splitter-form';
@@ -143,6 +144,10 @@ function transformHierarchicalMergerParams(
   return { ...params, hierarchy: Number(params.hierarchy), levels };
 }
 
+function transformExtractorParams(params: ExtractorFormSchemaType) {
+  return { ...params, prompts: [{ content: params.prompts, role: 'user' }] };
+}
+
 // construct a dsl based on the node information of the graph
 export const buildDslComponentsByGraph = (
   nodes: RAGFlowNodeType[],
@@ -174,6 +179,9 @@ export const buildDslComponentsByGraph = (
         case Operator.HierarchicalMerger:
           params = transformHierarchicalMergerParams(params);
           break;
+        case Operator.Extractor:
+          params = transformExtractorParams(params);
+          break;
 
         default:
           break;