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)
2025-08-12 15:48:59 +08:00 · 2024-07-02 11:43:57 +08:00 · 2024-07-02 11:43:57 +08:00 · 04487d1bce
commit 04487d1bce
parent 68b9a857c2
5 changed files with 86 additions and 109 deletions
--- a/web/src/pages/flow/canvas/index.tsx
+++ b/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)',
          },
        }}
      >
--- a/web/src/pages/flow/canvas/node/index.less
+++ b/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;
--- a/web/src/pages/flow/flow-drawer/index.tsx
+++ b/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);
--- a/web/src/pages/flow/headhunter_zh.json
+++ b/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是kkk@ragflow.com。说话不要重复。不要总是您好。",
@ -418,7 +361,7 @@
      },
      "data": {
        "label": "Generate",
-        "name": "SharpYaksShout",
+        "name": "SharpEggsLove",
        "form": {
          "llm_id": "deepseek-chat",
          "prompt": "你是AGI方向的猎头，当你提出加微信时对方表示拒绝。你需要耐心礼貌的回应候选人，表示对于保护隐私信息给予理解，也可以询问他对该职位的看法和顾虑。并在恰当的时机再次询问微信联系方式。也可以鼓励候选人主动与你取得联系。你的微信号是weixin_kevin，E-mail是kkk@ragflow.com。说话不要重复。不要总是您好。",
@ -439,7 +382,7 @@
      },
      "data": {
        "label": "Message",
-        "name": "ShaggyKeysStare",
+        "name": "MetalWolvesBeam",
        "form": {
          "messages": [
            "好的，祝您生活愉快，工作顺利。",
--- a/web/src/pages/flow/utils.ts
+++ b/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 =