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/assets/svg/nothing.svg

@@ -0,0 +1,24 @@
+<svg t="1719996320698" class="icon" viewBox="0 0 1360 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9096"
+    width="200" height="200">
+    <path
+        d="M730.78129 627.125563l-285.334817-365.196461 394.19469-168.345082c12.583161-4.919343 25.075702-1.527585 33.050215 8.673578l115.78579 146.104475 13.489355-12.181845-113.9734-145.8844c-12.751454-16.311504-35.134463-21.826346-54.630595-13.165714l-398.05249 169.71732c-1.022705 0.776738-2.045411 1.592314-3.068116 2.381997-3.055171 2.394943-5.307712 5.799646-4.971126 10.460076-0.440152 3.624779-0.090619 8.285209 2.304324 11.340379l295.678382 378.478685 237.552465-101.8045 2.446726-19.988066-234.471403 99.409558z"
+        fill="#6F72AF" p-id="9097"></path>
+    <path
+        d="M721.408647 650.880809L638.258812 426.688243c-8.233426-23.146802 3.184627-48.494362 25.76182-59.549937l362.866245-153.729456c11.806422-5.929102 23.729355-5.398331 36.001821-0.194185 12.272465 5.191201 21.269684 14.60268 25.373451 26.163135l77.091277 205.913325c2.744475 7.715601-0.194185 16.570417-8.93249 20.117522L721.421593 650.880809z m324.935525-423.089355c-3.624779-0.440152-7.495525 0.932086-11.353325 2.291378L672.137547 383.83818a29.29598 29.29598 0 0 0-16.402123 35.79469l76.068571 206.703009 415.516157-176.772693-75.486018-203.867914a26.098407 26.098407 0 0 0-15.599494-15.754842c-2.615019-1.242781-6.239798-1.682933-9.877522-2.136031z"
+        fill="#6F72AF" p-id="9098"></path>
+    <path
+        d="M169.031201 650.388875c-7.974513-10.214109-7.210721-23.949431-0.41426-34.176486l262.537547-343.137092 285.334817 365.19646-46.190038 60.740936 28.609861-7.560253 40.636359-53.103009-295.691328-378.465739c-5.57957-7.145992-14.667408-8.259317-21.8134-2.679748l-3.055171 2.381998-264.81598 346.554741c-13.139823 16.82933-13.204551 39.872566-0.440152 56.18407l110.775828 141.806524 20.881315-4.815778-116.355398-148.93957z"
+        fill="#6F72AF" p-id="9099"></path>
+    <path
+        d="M440.747206 1021.281416c-2.84804 0.582554-6.252743-1.682933-8.867762-2.925714l-178.300278-125.184324c-10.227054-6.79646-17.191808-17.787307-19.26311-30.953021-2.071302-13.165714 1.307509-25.671201 8.893653-34.87555l242.860177-317.880152c15.40531-20.246979 43.549128-24.169507 64.016182-10.589532l193.537295 136.278735-291.08268 380.213401c-3.288192 4.207332-8.155752 6.369254-11.793477 5.929103z m-3.44354-17.010569z m85.7778-495.792061a27.392971 27.392971 0 0 0-22.577193 11.055576l-242.860177 317.880151a21.101391 21.101391 0 0 0-4.479191 21.58038c0.91914 7.495525 4.686321 14.408496 11.508673 18.939469l174.662553 124.744172 277.955803-363.384071-177.510594-124.148673c-5.009962-4.310898-11.262705-6.006776-16.699874-6.667004z"
+        fill="#6F72AF" p-id="9100"></path>
+    <path
+        d="M754.730721 2.589128l-6.47282 19.418457c-2.589128 6.472819-7.767383 11.651075-14.240202 14.240203l-19.418458 6.472819c-1.294564 0-2.589128 1.294564-1.294563 2.589128 0 1.294564 1.294564 1.294564 1.294563 1.294563l19.418458 6.47282c6.472819 2.589128 11.651075 7.767383 14.240202 14.240202l6.47282 19.418457c0 1.294564 1.294564 2.589128 2.589127 1.294564 1.294564 0 1.294564-1.294564 1.294564-1.294564l6.472819-19.418457c2.589128-6.472819 7.767383-11.651075 14.240203-14.240202l19.418457-6.47282c1.294564 0 2.589128-1.294564 1.294564-2.589127 0-1.294564-1.294564-1.294564-1.294564-1.294564l-19.418457-6.472819c-6.472819-2.589128-11.651075-7.767383-14.240203-14.240203L758.614412 2.589128c0-1.294564-1.294564-2.589128-2.589128-1.294564 0 0-1.294564 0-1.294563 1.294564zM147.580278 818.164349l-11.651074 33.65866c-1.294564 5.178255-5.178255 7.767383-10.356511 10.356511l-33.65866 11.651074c-1.294564 0-1.294564 1.294564-1.294564 2.589128 0 0 0 1.294564 1.294564 1.294564l33.65866 11.651074c5.178255 1.294564 7.767383 5.178255 10.356511 10.356511l11.651074 33.65866c0 1.294564 1.294564 1.294564 2.589128 1.294564 0 0 1.294564 0 1.294564-1.294564l11.651074-33.65866c1.294564-5.178255 5.178255-7.767383 10.356511-10.356511l33.65866-11.651074c1.294564 0 1.294564-1.294564 1.294564-2.589128 0 0 0-1.294564-1.294564-1.294564l-33.65866-11.651074c-5.178255-1.294564-7.767383-5.178255-10.356511-10.356511l-11.651074-33.65866c-1.294564-1.294564-2.589128-2.589128-3.883692 0 0-1.294564 0-1.294564 0 0zM691.297092 960.566372l-5.178255 12.945638c-1.294564 5.178255-5.178255 7.767383-10.356511 10.356511l-14.240202 5.178255c-1.294564 0-1.294564 1.294564-1.294564 2.589128 0 0 0 1.294564 1.294564 1.294564l14.240202 5.178255c5.178255 1.294564 7.767383 5.178255 10.356511 10.356511l5.178255 14.240202c0 1.294564 1.294564 1.294564 2.589128 1.294564 0 0 1.294564 0 1.294564-1.294564l5.178255-14.240202c1.294564-5.178255 5.178255-7.767383 10.356511-10.356511l14.240202-5.178255c1.294564 0 1.294564-1.294564 1.294564-2.589128 0 0 0-1.294564-1.294564-1.294564l-15.534766-5.178255c-5.178255-1.294564-7.767383-5.178255-10.356511-10.356511l-5.178255-14.240202s-1.294564 0-2.589128 1.294564c0-1.294564 0-1.294564 0 0zM49.193426 249.850822l-7.767383 20.713021c-2.589128 7.767383-9.061947 14.240202-16.82933 16.82933l-20.713021 7.767383c-1.294564 0-2.589128 2.589128-1.294564 3.883692 0 1.294564 1.294564 1.294564 1.294564 1.294564l20.713021 7.767383c7.767383 2.589128 14.240202 9.061947 16.82933 16.82933l7.767383 22.007585c0 1.294564 2.589128 2.589128 3.883692 1.294564 1.294564 0 1.294564-1.294564 1.294563-1.294564l7.767383-20.713022c2.589128-9.061947 9.061947-15.534766 16.82933-18.123893l22.007586-7.767383c1.294564 0 2.589128-2.589128 1.294564-3.883692 0-1.294564-1.294564-1.294564-1.294564-1.294564l-20.713022-6.472819c-9.061947-3.883692-15.534766-10.356511-18.123894-18.123894l-7.767383-22.007585c0-1.294564-2.589128-2.589128-3.883691-1.294564 0 0-1.294564 1.294564-1.294564 2.589128zM1175.46397 3.883692l-14.240203 40.131479c-2.589128 7.767383-9.061947 14.240202-16.82933 16.82933l-40.131479 14.240202c-1.294564 0-2.589128 2.589128-1.294564 3.883691 0 1.294564 1.294564 1.294564 1.294564 1.294564l40.131479 14.240203c7.767383 2.589128 14.240202 9.061947 16.82933 16.82933l14.240203 40.131479c0 1.294564 2.589128 2.589128 3.883691 1.294564 1.294564 0 1.294564-1.294564 1.294564-1.294564l14.240202-40.131479c2.589128-7.767383 9.061947-14.240202 16.82933-16.82933l41.426043-14.240203c1.294564 0 2.589128-2.589128 1.294564-3.883691 0-1.294564-1.294564-1.294564-1.294564-1.294564l-40.131479-14.240202c-9.061947-2.589128-15.534766-9.061947-18.123894-16.82933L1180.642225 2.589128c0-1.294564-2.589128-2.589128-3.883691-1.294564-1.294564 0-1.294564 1.294564-1.294564 2.589128z"
+        fill="#DBE0F4" p-id="9101"></path>
+    <path
+        d="M438.857143 1021.410872l-6.472819-16.82933L880.303413 816.869785l269.26928-372.834387 15.534766 10.356511-273.152971 378.012642z"
+        fill="#6F72AF" p-id="9102"></path>
+    <path
+        d="M1244.075853 844.055626c-29.774968-11.651075-45.309735-45.309735-34.953223-75.084703 11.651075-29.774968 45.309735-45.309735 75.084702-34.953224 29.774968 11.651075 45.309735 45.309735 34.953224 75.084703-11.651075 29.774968-45.309735 45.309735-75.084703 34.953224zM1189.704172 815.575221c-16.82933-15.534766-15.534766-33.65866-11.651075-46.604298 5.178255-15.534766 15.534766-27.185841 22.007586-29.774969l2.589127 2.589128c-5.178255 6.472819-7.767383 12.945638-10.35651 19.418458-6.472819 18.123894-6.472819 36.247788 0 53.077117-1.294564 1.294564-1.294564 1.294564-2.589128 1.294564z m-37.542352-2.589127l-2.589127-1.294564c-11.651075-20.713021-5.178255-45.309735 3.883691-62.139065 7.767383-14.240202 15.534766-19.418458 18.123894-19.418457 1.294564 0 2.589128 0 3.883692-1.294564 2.589128 0 5.178255 1.294564 7.767383 1.294564-9.061947 9.061947-18.123894 20.713021-22.007586 33.65866-6.472819 18.123894-3.883692 37.542351 6.47282 53.077117l-15.534767-3.883691z m-37.542351-60.844501c1.294564-3.883692 12.945638-14.240202 28.480405-19.418458-1.294564 2.589128-2.589128 5.178255-5.178256 7.767383-7.767383 14.240202-12.945638 32.364096-12.945638 50.48799-10.356511-15.534766-12.945638-32.364096-10.356511-38.836915z m221.370417-50.48799c3.883692 1.294564 5.178255 5.178255 3.883692 9.061947-1.294564 3.883692-5.178255 5.178255-9.061947 3.883691-3.883692-1.294564-5.178255-5.178255-3.883692-9.061946 1.294564-3.883692 5.178255-5.178255 9.061947-3.883692zM1215.595449 686.118837c-3.883692-1.294564-5.178255-5.178255-3.883692-9.061947 1.294564-3.883692 5.178255-5.178255 9.061947-3.883692 3.883692 1.294564 5.178255 5.178255 3.883692 9.061947-2.589128 3.883692-6.472819 5.178255-9.061947 3.883692z m102.270543 47.898862l5.178256-5.178255 2.589127 1.294564c12.945638 5.178255 27.185841-1.294564 31.069533-14.240203 5.178255-12.945638-1.294564-27.185841-14.240203-32.364096-12.945638-5.178255-27.185841 1.294564-31.069532 14.240203-2.589128 5.178255-2.589128 11.651075 0 16.829329l-6.472819 6.47282c-3.883692-2.589128-9.061947-5.178255-12.945638-6.47282-15.534766-6.472819-32.364096-6.472819-47.898863-1.294563l-9.061947-16.82933c2.589128-2.589128 5.178255-5.178255 6.47282-9.061947 5.178255-12.945638-1.294564-27.185841-14.240203-32.364096-12.945638-5.178255-27.185841 1.294564-31.069532 14.240202-5.178255 12.945638 1.294564 27.185841 14.240202 32.364096 2.589128 1.294564 6.472819 1.294564 9.061947 1.294564l7.767383 16.82933c-3.883692 2.589128-7.767383 3.883692-10.35651 7.767383-2.589128-2.589128-5.178255-3.883692-9.061947-6.472819 0 0-1.294564 0-1.294564-1.294564-5.178255-3.883692-11.651075-6.472819-18.123894-9.061947-36.247788-12.945638-77.673831 9.061947-89.324905 27.185841-2.589128-1.294564-5.178255-2.589128-7.767383-1.294564-7.767383 1.294564-15.534766 3.883692-22.007585 5.178255-5.178255 1.294564-7.767383 6.472819-6.47282 11.651075 1.294564 2.589128 2.589128 5.178255 5.178256 6.472819 1.294564 0 3.883692 1.294564 5.178255 0 7.767383-1.294564 14.240202-3.883692 22.007585-5.178255 0 22.007585 15.534766 53.077118 41.426043 68.611883h1.294564c2.589128 1.294564 5.178255 2.589128 7.767383 2.589128 14.240202 5.178255 28.480405 6.472819 42.720607 5.178255h2.589128c3.883692 0 6.472819-1.294564 10.356511-2.589127 9.061947 12.945638 20.713021 23.302149 36.247787 29.774968 38.836915 14.240202 84.14665-5.178255 98.386852-45.309734 10.356511-27.185841 2.589128-58.255373-18.123894-78.968395z m-291.276864 20.713022c-14.240202 2.589128-29.774968 6.472819-44.015171 9.061947-5.178255 1.294564-7.767383 5.178255-7.767383 10.35651 0 3.883692 2.589128 6.472819 5.178255 6.472819h5.178256c14.240202-2.589128 28.480405-5.178255 44.01517-7.767383 5.178255-1.294564 7.767383-5.178255 6.47282-10.35651 0-5.178255-5.178255-9.061947-9.061947-7.767383z m-176.060683 23.302149c-15.534766 1.294564-29.774968 1.294564-44.015171 0-5.178255 0-9.061947 3.883692-9.061947 9.061947 0 3.883692 2.589128 7.767383 6.47282 9.061947 1.294564 0 2.589128 1.294564 2.589127 1.294563h45.309735c5.178255 0 9.061947-3.883692 9.061947-9.061946-1.294564-6.472819-5.178255-10.356511-10.356511-10.356511z m88.030341-7.767383c-14.240202 2.589128-29.774968 3.883692-44.01517 5.178255-5.178255 0-9.061947 5.178255-7.767383 10.356511 0 3.883692 2.589128 6.472819 5.178255 7.767383h3.883692c14.240202-1.294564 29.774968-2.589128 44.01517-5.178255 5.178255-1.294564 7.767383-5.178255 7.767383-10.356511 1.294564-5.178255-3.883692-9.061947-9.061947-7.767383zM763.792668 776.738306c-15.534766-1.294564-29.774968-3.883692-42.720607-6.472819-5.178255-1.294564-10.356511 2.589128-10.356511 6.472819-1.294564 5.178255 1.294564 9.061947 5.178255 10.356511h1.294564c14.240202 2.589128 29.774968 5.178255 45.309735 6.472819 5.178255 0 9.061947-3.883692 10.35651-7.767383-1.294564-3.883692-5.178255-9.061947-9.061946-9.061947z"
+        fill="#6F72AF" p-id="9103"></path>
+</svg>

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);
+});