feat: customize edge arrow #918 (#1338)

### What problem does this PR solve?

feat: customize edge arrow #918

### Type of change


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

web/src/pages/flow/canvas/index.tsx

@@ -3,7 +3,6 @@ import ReactFlow, {
   Background,
   ConnectionMode,
   Controls,
-  MarkerType,
   NodeMouseHandler,
 } from 'reactflow';
 import 'reactflow/dist/style.css';
@@ -67,6 +66,26 @@ function FlowCanvas({ chatDrawerVisible, hideChatDrawer }: IProps) {
 
   return (
     <div className={styles.canvasWrapper}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        style={{ position: 'absolute', top: 10, left: 0 }}
+      >
+        <defs>
+          <marker
+            fill="rgb(157 149 225)"
+            id="logo"
+            viewBox="0 0 40 40"
+            refX="8"
+            refY="5"
+            markerUnits="strokeWidth"
+            markerWidth="20"
+            markerHeight="20"
+            orient="auto-start-reverse"
+          >
+            <path d="M 0 0 L 10 5 L 0 10 z" />
+          </marker>
+        </defs>
+      </svg>
       <ReactFlow
         connectionMode={ConnectionMode.Loose}
         nodes={nodes}
@@ -90,8 +109,17 @@ function FlowCanvas({ chatDrawerVisible, hideChatDrawer }: IProps) {
         }}
         defaultEdgeOptions={{
           type: 'buttonEdge',
-          markerEnd: {
-            type: MarkerType.ArrowClosed,
+          markerEnd: 'logo',
+          // markerEnd: {
+          //   type: MarkerType.ArrowClosed,
+          //   color: 'rgb(157 149 225)',
+          //   width: 20,
+          //   height: 20,
+          // },
+          style: {
+            // edge style
+            strokeWidth: 2,
+            stroke: 'rgb(202 197 245)',
           },
         }}
       >

web/src/pages/flow/canvas/node/index.less

@@ -16,7 +16,8 @@
   // justify-self: center;
   justify-content: center;
   .nodeName {
-    font-size: 8px;
+    font-size: 10px;
+    color: black;
   }
   label {
     display: block;
@@ -31,7 +32,7 @@
   }
   .bottomBox {
     position: absolute;
-    bottom: -26px;
+    bottom: -34px;
     background: white;
     padding: 2px 5px;
     border-radius: 5px;

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

@@ -28,13 +28,15 @@ const FormMap = {
   [Operator.RewriteQuestion]: RewriteQuestionForm,
 };
 
+const EmptyContent = () => <div>empty</div>;
+
 const FlowDrawer = ({
   visible,
   hideModal,
   node,
 }: IModalProps<any> & IProps) => {
   const operatorName: Operator = node?.data.label;
-  const OperatorForm = FormMap[operatorName];
+  const OperatorForm = FormMap[operatorName] ?? EmptyContent;
   const [form] = Form.useForm();
   const { name, handleNameBlur, handleNameChange } =
     useHandleNodeNameChange(node);

web/src/pages/flow/headhunter_zh.json

@@ -1,183 +1,126 @@
 {
   "edges": [
     {
-      "id": "01dc9019-5c4c-4410-9759-f09ad8075a23",
+      "id": "85fcec8f-7663-4221-99fa-1d41a6358cc5",
       "label": "",
       "source": "begin",
-      "target": "answer:0",
-      "markerEnd": {
-        "type": "arrow"
-      }
+      "target": "answer:0"
     },
     {
-      "id": "f0216178-c3ab-48c1-8020-c5c7d8aa3853",
+      "id": "36bf941f-b8df-46e7-87d3-5ce51b5378fb",
       "label": "",
       "source": "message:reject",
-      "target": "answer:0",
-      "markerEnd": {
-        "type": "arrow"
-      }
+      "target": "answer:0"
     },
     {
-      "id": "fd98adb0-9461-45ba-9f6e-5633b8ea57ac",
+      "id": "e5cca6d3-ffd2-4824-9471-3fe83891dd73",
       "label": "",
       "source": "answer:0",
-      "target": "categorize:0",
-      "markerEnd": {
-        "type": "arrow"
-      }
+      "target": "categorize:0"
     },
     {
-      "id": "c4ea0be6-d98c-464c-89c4-84b4199e6128",
+      "id": "8a39ca91-5b04-4970-ad64-968797eb62a2",
       "label": "",
       "source": "categorize:0",
       "target": "message:introduction",
-      "markerEnd": {
-        "type": "arrow"
-      },
       "sourceHandle": "interested"
     },
     {
-      "id": "145f4531-c5e4-4e01-9378-128b84db6029",
+      "id": "675752ca-6c81-432b-a6b1-eaca4a6c3a96",
       "label": "",
       "source": "categorize:0",
       "target": "generate:casual",
-      "markerEnd": {
-        "type": "arrow"
-      },
       "sourceHandle": "casual"
     },
     {
-      "id": "1b8f7b90-4ee8-471a-aea0-4ae1fba7092b",
+      "id": "cc1628b4-b1c3-4941-ab19-3777993e094a",
       "label": "",
       "source": "categorize:0",
       "target": "message:reject",
-      "markerEnd": {
-        "type": "arrow"
-      },
       "sourceHandle": "answer"
     },
     {
-      "id": "1e9c2335-a293-492f-a3c9-6f9bd02b7f91",
+      "id": "8a11d81f-820a-41df-a47b-daec65c5fb61",
       "label": "",
       "source": "categorize:0",
       "target": "retrieval:0",
-      "markerEnd": {
-        "type": "arrow"
-      },
       "sourceHandle": "about_job"
     },
     {
-      "id": "c2b63dca-974f-4d48-8685-269230ff41ad",
+      "id": "3afa4bbd-1151-4452-8f58-9cc03496c2e7",
       "label": "",
       "source": "message:introduction",
-      "target": "answer:1",
-      "markerEnd": {
-        "type": "arrow"
-      }
+      "target": "answer:1"
     },
     {
-      "id": "1e7a0f1f-3377-4762-a15d-975d8ac3b67a",
+      "id": "6e705ec1-d7c2-4278-8ddd-03ed05ec2973",
       "label": "",
       "source": "generate:aboutJob",
-      "target": "answer:1",
-      "markerEnd": {
-        "type": "arrow"
-      }
+      "target": "answer:1"
     },
     {
-      "id": "0d860594-9339-4283-9cc0-228f6f3e15a1",
+      "id": "9c6b9bfc-e8ff-4903-8479-67f89f159b55",
       "label": "",
       "source": "generate:casual",
-      "target": "answer:1",
-      "markerEnd": {
-        "type": "arrow"
-      }
+      "target": "answer:1"
     },
     {
-      "id": "0707e61d-95ed-4c30-95ce-83ae930f3079",
+      "id": "ddefbff1-2cca-4251-bc34-2f3cea7a5593",
       "label": "",
       "source": "generate:get_wechat",
-      "target": "answer:1",
-      "markerEnd": {
-        "type": "arrow"
-      }
+      "target": "answer:1"
     },
     {
-      "id": "a0e1cb13-8667-47ba-8b8a-11974f68b628",
+      "id": "13e14da1-3865-4539-af77-4e9627e67273",
       "label": "",
       "source": "generate:nowechat",
-      "target": "answer:1",
-      "markerEnd": {
-        "type": "arrow"
-      }
+      "target": "answer:1"
     },
     {
-      "id": "071f6b90-154a-421d-a3a1-24d68120517b",
+      "id": "de6b8407-8af3-4450-9f74-6f4e6b99da9f",
       "label": "",
       "source": "answer:1",
-      "target": "categorize:1",
-      "markerEnd": {
-        "type": "arrow"
-      }
+      "target": "categorize:1"
     },
     {
-      "id": "d0daf286-afe3-4257-ad23-62280de6a3c9",
+      "id": "36f0f440-129b-4073-8d1b-55eaf452ebd2",
       "label": "",
       "source": "categorize:1",
       "target": "retrieval:0",
-      "markerEnd": {
-        "type": "arrow"
-      },
       "sourceHandle": "about_job"
     },
     {
-      "id": "eed037f7-7a2c-4863-8daa-95299c0d7ed0",
+      "id": "72d63756-f054-488f-adfd-b3a376047fa2",
       "label": "",
       "source": "categorize:1",
       "target": "generate:casual",
-      "markerEnd": {
-        "type": "arrow"
-      },
       "sourceHandle": "casual"
     },
     {
-      "id": "e2ce8e2c-5383-4328-8c7f-6a1ea5fbe392",
+      "id": "5ee58522-246c-427a-806b-e82fccdd7dc6",
       "label": "",
       "source": "categorize:1",
       "target": "generate:get_wechat",
-      "markerEnd": {
-        "type": "arrow"
-      },
       "sourceHandle": "wechat"
     },
     {
-      "id": "b4e00364-bf13-4a5c-ba15-c10080a01faa",
+      "id": "994cbb21-9dad-40af-aee3-9d4b8199a843",
       "label": "",
       "source": "categorize:1",
       "target": "generate:nowechat",
-      "markerEnd": {
-        "type": "arrow"
-      },
       "sourceHandle": "giveup"
     },
     {
-      "id": "d562f6f1-e9e3-4bf4-bcf1-171e3bdd8bca",
+      "id": "5b864e95-f44e-428b-8a2e-323c3bed0701",
       "label": "",
       "source": "retrieval:0",
-      "target": "generate:aboutJob",
-      "markerEnd": {
-        "type": "arrow"
-      }
+      "target": "generate:aboutJob"
     },
     {
-      "id": "063838ab-7813-4981-b633-34f6d485305b",
+      "id": "e882800b-077e-445a-a544-e147f7a9911c",
       "label": "",
       "source": "relevant:0",
-      "target": "generate:aboutJob",
-      "markerEnd": {
-        "type": "arrow"
-      }
+      "target": "generate:aboutJob"
     }
   ],
   "nodes": [
@@ -190,7 +133,7 @@
       },
       "data": {
         "label": "Begin",
-        "name": "CleanDeerRoll",
+        "name": "TrueBagsAllow",
         "form": {
           "prologue": "您好！我是AGI方向的猎头，了解到您是这方面的大佬，然后冒昧的就联系到您。这边有个机会想和您分享，RAGFlow正在招聘您这个岗位的资深的工程师不知道您那边是不是感兴趣？"
         }
@@ -207,7 +150,7 @@
       },
       "data": {
         "label": "Answer",
-        "name": "TwentyTimesDrive",
+        "name": "YoungWeeksArgue",
         "form": {}
       },
       "sourcePosition": "left",
@@ -222,7 +165,7 @@
       },
       "data": {
         "label": "Categorize",
-        "name": "StupidFoxesNail",
+        "name": "FancyBooksLose",
         "form": {
           "llm_id": "deepseek-chat",
           "category_description": {
@@ -261,7 +204,7 @@
       },
       "data": {
         "label": "Message",
-        "name": "FluffyLightsCry",
+        "name": "CyanMangosStudy",
         "form": {
           "messages": [
             "我简单介绍以下：\nRAGFlow 是一款基于深度文档理解构建的开源 RAG（Retrieval-Augmented Generation）引擎。RAGFlow 可以为各种规模的企业及个人提供一套精简的 RAG 工作流程，结合大语言模型（LLM）针对用户各类不同的复杂格式数据提供可靠的问答以及有理有据的引用。https://github.com/infiniflow/ragflow\n您那边还有什么要了解的？"
@@ -280,7 +223,7 @@
       },
       "data": {
         "label": "Answer",
-        "name": "BreezyJarsNotice",
+        "name": "SwiftEyesReply",
         "form": {}
       },
       "sourcePosition": "left",
@@ -295,7 +238,7 @@
       },
       "data": {
         "label": "Categorize",
-        "name": "ItchyJobsLike",
+        "name": "KhakiEmusGive",
         "form": {
           "llm_id": "deepseek-chat",
           "category_description": {
@@ -335,7 +278,7 @@
       },
       "data": {
         "label": "Generate",
-        "name": "SocialLlamasDraw",
+        "name": "BigToesSee",
         "form": {
           "llm_id": "deepseek-chat",
           "prompt": "你是AGI方向的猎头，现在候选人的聊了和职位无关的话题，请耐心的回应候选人，并将话题往该AGI的职位上带，最好能要到候选人微信号以便后面保持联系。",
@@ -356,7 +299,7 @@
       },
       "data": {
         "label": "Retrieval",
-        "name": "ThinCamerasPunch",
+        "name": "SilentWormsOpen",
         "form": {
           "similarity_threshold": 0.2,
           "keywords_similarity_weight": 0.3,
@@ -378,7 +321,7 @@
       },
       "data": {
         "label": "Generate",
-        "name": "FiveAnimalsWorry",
+        "name": "ItchySuitsWait",
         "form": {
           "llm_id": "deepseek-chat",
           "prompt": "你是AGI方向的猎头，候选人问了有关职位或公司的问题，你根据以下职位信息回答。如果职位信息中不包含候选人的问题就回答不清楚、不知道、有待确认等。回答完后引导候选人加微信号，如：\n - 方便加一下微信吗，我把JD发您看看？\n  - 微信号多少，我把详细职位JD发您？\n      职位信息如下:\n      {input}\n      职位信息如上。",
@@ -397,7 +340,7 @@
       },
       "data": {
         "label": "Generate",
-        "name": "TastyTermsCarry",
+        "name": "PlentyCasesPoke",
         "form": {
           "llm_id": "deepseek-chat",
           "prompt": "你是AGI方向的猎头，候选人表示不反感加微信，如果对方已经报了微信号，表示感谢和信任并表示马上会加上；如果没有，则问对方微信号多少。你的微信号是weixin_kevin，E-mail是[email protected]。说话不要重复。不要总是您好。",
@@ -418,7 +361,7 @@
       },
       "data": {
         "label": "Generate",
-        "name": "SharpYaksShout",
+        "name": "SharpEggsLove",
         "form": {
           "llm_id": "deepseek-chat",
           "prompt": "你是AGI方向的猎头，当你提出加微信时对方表示拒绝。你需要耐心礼貌的回应候选人，表示对于保护隐私信息给予理解，也可以询问他对该职位的看法和顾虑。并在恰当的时机再次询问微信联系方式。也可以鼓励候选人主动与你取得联系。你的微信号是weixin_kevin，E-mail是[email protected]。说话不要重复。不要总是您好。",
@@ -439,7 +382,7 @@
       },
       "data": {
         "label": "Message",
-        "name": "ShaggyKeysStare",
+        "name": "MetalWolvesBeam",
         "form": {
           "messages": [
             "好的，祝您生活愉快，工作顺利。",

web/src/pages/flow/utils.ts

@@ -4,7 +4,7 @@ import dagre from 'dagre';
 import { humanId } from 'human-id';
 import { curry, isEmpty } from 'lodash';
 import pipe from 'lodash/fp/pipe';
-import { Edge, MarkerType, Node, Position } from 'reactflow';
+import { Edge, Node, Position } from 'reactflow';
 import { v4 as uuidv4 } from 'uuid';
 import { NodeMap, Operator, initialFormValuesMap } from './constant';
 import { ICategorizeItemResult, NodeData } from './interface';
@@ -27,9 +27,12 @@ const buildEdges = (
         // type: 'step',
         source: source,
         target: target,
-        markerEnd: {
-          type: MarkerType.Arrow,
-        },
+        // markerEnd: {
+        //   type: MarkerType.ArrowClosed,
+        //   color: 'rgb(157 149 225)',
+        //   width: 20,
+        //   height: 20,
+        // },
       };
       if (componentName === Operator.Categorize && !isUpstream) {
         const categoryDescription =