feat: create blank canvas #918 (#1356)

### What problem does this PR solve?

feat: create blank canvas #918

### Type of change


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

web/src/hooks/flow-hooks.ts

@@ -5,6 +5,44 @@ import flowService from '@/services/flow-service';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { message } from 'antd';
 import { useParams } from 'umi';
+import { v4 as uuid } from 'uuid';
+
+export const EmptyDsl = {
+  graph: {
+    nodes: [
+      {
+        id: 'Begin',
+        type: 'beginNode',
+        position: {
+          x: 50,
+          y: 200,
+        },
+        data: {
+          label: 'Begin',
+          name: 'begin',
+        },
+        sourcePosition: 'left',
+        targetPosition: 'right',
+      },
+    ],
+    edges: [],
+  },
+  components: {
+    begin: {
+      obj: {
+        component_name: 'Begin',
+        params: {},
+      },
+      downstream: ['Answer:China'], // other edge target is downstream, edge source is current node id
+      upstream: [], // edge source is upstream, edge target is current node id
+    },
+  },
+  messages: [],
+  reference: [],
+  history: [],
+  path: [],
+  answer: [],
+};
 
 export const useFetchFlowTemplates = (): ResponseType<IFlowTemplate[]> => {
   const { data } = useQuery({
@@ -12,6 +50,14 @@ export const useFetchFlowTemplates = (): ResponseType<IFlowTemplate[]> => {
     initialData: [],
     queryFn: async () => {
       const { data } = await flowService.listTemplates();
+      if (Array.isArray(data?.data)) {
+        data.data.unshift({
+          id: uuid(),
+          title: 'Blank',
+          description: 'Create from nothing',
+          dsl: EmptyDsl,
+        });
+      }
 
       return data;
     },

web/src/pages/flow/hooks.ts

@@ -253,7 +253,7 @@ export const useValidateConnection = () => {
   // restricted lines cannot be connected successfully.
   const isValidConnection = useCallback(
     (connection: Connection) => {
-      // limit there to be only one line between two nodes
+      // limit the connection between two nodes to only one connection line in one direction
       const hasLine = edges.some(
         (x) => x.source === connection.source && x.target === connection.target,
       );

web/src/pages/flow/interpreter.json

@@ -0,0 +1,75 @@
+{
+  "edges": [
+    {
+      "id": "c87c7805-8cf0-4cd4-b45b-152031811020",
+      "label": "",
+      "source": "begin",
+      "target": "answer:0"
+    },
+    {
+      "id": "e30320bb-601b-4885-acb3-79becdc49f08",
+      "label": "",
+      "source": "generate:0",
+      "target": "answer:0"
+    },
+    {
+      "id": "83927e42-739a-402a-9f75-a88d4fab37ed",
+      "label": "",
+      "source": "answer:0",
+      "target": "generate:0"
+    }
+  ],
+  "nodes": [
+    {
+      "id": "begin",
+      "type": "beginNode",
+      "position": {
+        "x": 0,
+        "y": 0
+      },
+      "data": {
+        "label": "Begin",
+        "name": "FruityPianosSend",
+        "form": {
+          "prologue": "Hi there! Please enter the text you want to translate in format like: 'text you want to translate' => target language. For an example: 您好！ => English"
+        }
+      },
+      "sourcePosition": "left",
+      "targetPosition": "right"
+    },
+    {
+      "id": "answer:0",
+      "type": "ragNode",
+      "position": {
+        "x": 0,
+        "y": 0
+      },
+      "data": {
+        "label": "Answer",
+        "name": "YummyBoatsFlow",
+        "form": {}
+      },
+      "sourcePosition": "left",
+      "targetPosition": "right"
+    },
+    {
+      "id": "generate:0",
+      "type": "ragNode",
+      "position": {
+        "x": 0,
+        "y": 0
+      },
+      "data": {
+        "label": "Generate",
+        "name": "SwiftTramsDrop",
+        "form": {
+          "llm_id": "deepseek-chat",
+          "prompt": "You are an professional interpreter.\n- Role: an professional interpreter.\n- Input format: content need to be translated => target language. \n- Answer format: => translated content in target language. \n- Examples:\n  - user: 您好！ => English. assistant: => How are you doing!\n  - user: You look good today. => Japanese. assistant: => 今日は調子がいいですね 。\n",
+          "temperature": 0.5
+        }
+      },
+      "sourcePosition": "left",
+      "targetPosition": "right"
+    }
+  ]
+}

web/src/pages/flow/list/create-flow-modal.tsx

@@ -1,8 +1,8 @@
+import { ReactComponent as NothingIcon } from '@/assets/svg/nothing.svg';
 import { IModalManagerChildrenProps } from '@/components/modal-manager';
 import { useTranslate } from '@/hooks/commonHooks';
 import { useFetchFlowTemplates } from '@/hooks/flow-hooks';
 import { useSelectItem } from '@/hooks/logicHooks';
-import { UserOutlined } from '@ant-design/icons';
 import {
   Avatar,
   Card,
@@ -79,7 +79,7 @@ const CreateFlowModal = ({
           <Input />
         </Form.Item>
       </Form>
-      <Title level={5}>Choose from templates</Title>
+      <Title level={5}>Create from templates</Title>
       <Flex vertical gap={16}>
         {list?.map((x) => (
           <Card
@@ -90,7 +90,11 @@ const CreateFlowModal = ({
             onClick={handleItemClick(x.id)}
           >
             <Space size={'middle'}>
-              <Avatar size={40} icon={<UserOutlined />} src={x.avatar} />
+              {x.avatar ? (
+                <Avatar size={40} icon={<NothingIcon />} src={x.avatar} />
+              ) : (
+                <NothingIcon width={40} height={30} />
+              )}
               <b>{x.title}</b>
             </Space>
             <p>{x.description}</p>

web/src/pages/flow/list/hooks.ts

@@ -11,6 +11,8 @@ import { useNavigate } from 'umi';
 // import dslJson from '../../../../../dls.json';
 // import customerServiceBase from '../../../../../graph/test/dsl_examples/customer_service.json';
 // import customerService from '../customer_service.json';
+// import interpreterBase from '../../../../../graph/test/dsl_examples/interpreter.json';
+// import interpreter from '../interpreter.json';
 
 export const useFetchDataOnMount = () => {
   const { data, loading } = useFetchFlowList();
@@ -41,7 +43,7 @@ export const useSaveFlow = () => {
         title,
         dsl,
         // dsl: dslJson,
-        // dsl: { ...customerServiceBase, graph: customerService },
+        // dsl: { ...interpreterBase, graph: interpreter },
       });
 
       if (ret?.retcode === 0) {

web/src/pages/flow/message-form/index.tsx

@@ -54,7 +54,8 @@ const MessageForm = ({ onValuesChange, form }: IOperatorForm) => {
                   ]}
                   noStyle
                 >
-                  <Input
+                  <Input.TextArea
+                    rows={4}
                     placeholder={t('messagePlaceholder')}
                     style={{ width: '80%' }}
                   />

web/src/pages/flow/utils.test.ts

@@ -2,6 +2,7 @@ import fs from 'fs';
 import path from 'path';
 import customer_service from '../../../../graph/test/dsl_examples/customer_service.json';
 import headhunter_zh from '../../../../graph/test/dsl_examples/headhunter_zh.json';
+import interpreter from '../../../../graph/test/dsl_examples/interpreter.json';
 import { dsl } from './mock';
 import { buildNodesAndEdgesFromDSLComponents } from './utils';
 
@@ -68,3 +69,21 @@ test('build nodes and edges from customer_service dsl', () => {
   }
   expect(nodes.length).toEqual(12);
 });
+
+test('build nodes and edges from interpreter dsl', () => {
+  const { edges, nodes } = buildNodesAndEdgesFromDSLComponents(
+    interpreter.components,
+  );
+  console.info('node length', nodes.length);
+  console.info('edge length', edges.length);
+  try {
+    fs.writeFileSync(
+      path.join(__dirname, 'interpreter.json'),
+      JSON.stringify({ edges, nodes }, null, 4),
+    );
+    console.log('JSON data is saved.');
+  } catch (error) {
+    console.warn(error);
+  }
+  expect(nodes.length).toEqual(12);
+});