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/less/mixins.less

@@ -5,7 +5,7 @@
 
 .chunkText() {
   em {
-    color: red;
+    color: var(--accent-primary);
     font-style: normal;
   }
   table {

web/src/locales/en.ts

@@ -1583,6 +1583,9 @@ This delimiter is used to split the input text into several text pieces echo of
         'Write your SQL query here. You can use variables, raw SQL, or mix both using variable syntax.',
       frameworkPrompts: 'Framework',
       release: 'Publish',
+      createFromBlank: 'Create from Blank',
+      createFromTemplate: 'Create from Template',
+      importJsonFile: 'Import json file',
     },
     llmTools: {
       bad_calculator: {

web/src/locales/zh.ts

@@ -1494,6 +1494,9 @@ General：实体和关系提取提示来自 GitHub - microsoft/graphrag：基于
         '在此处编写您的 SQL 查询。您可以使用变量、原始 SQL，或使用变量语法混合使用两者。',
       frameworkPrompts: '框架',
       release: '发布',
+      createFromBlank: '从空白创建',
+      createFromTemplate: '从模板创建',
+      importJsonFile: '导入 JSON 文件',
     },
     footer: {
       profile: 'All rights reserved @ React',

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' : ''} />
+            {running || (
-            {isParsing ? t('dataflow.running') : t('flow.run')}
+              <CirclePlay className={isParsing ? 'animate-spin' : ''} />
-          </Button>
+            )}
+
+            {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;