feat: enhance visual editor UI

frontend/src/components/visual-editor/v2/AdvancedLink/AdvancedLinkFactory.tsx

@@ -1,18 +1,18 @@
 /*
- * Copyright © 2024 Hexastack. All rights reserved.
+ * Copyright © 2025 Hexastack. All rights reserved.
  *
  * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
  * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
  * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
  */
 
+
 import { css, keyframes } from "@emotion/react";
 import styled from "@emotion/styled";
 import {
   DefaultLinkFactory,
   DefaultLinkWidget,
 } from "@projectstorm/react-diagrams";
-import React from "react";
 
 import { AdvancedLinkModel } from "./AdvancedLinkModel";
 

frontend/src/components/visual-editor/v2/BackgroundLayerWidget.tsx

@@ -0,0 +1,62 @@
+/*
+ * Copyright © 2025 Hexastack. All rights reserved.
+ *
+ * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
+ * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
+ * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
+ */
+
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { CanvasModel } from "@projectstorm/react-canvas-core";
+import * as React from "react";
+import { CSSProperties } from "react";
+
+export interface BackgroundLayerWidgetProps {
+  model: CanvasModel;
+}
+
+namespace S {
+  const shared = css`
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    position: absolute;
+    pointer-events: none;
+    transform-origin: 0 0;
+    width: 200%;
+    height: 200%;
+    overflow: visible;
+    background-color: #f2f4f7;
+    background-image: radial-gradient(
+      circle,
+      rgba(0, 0, 0, 0.075) 8%,
+      transparent 10%
+    );
+    background-size: 16px 16px;
+  `;
+
+  export const DivLayer = styled.div`
+    ${shared}
+  `;
+}
+
+export class BackgroundLayerWidget extends React.Component<
+  React.PropsWithChildren<BackgroundLayerWidgetProps>
+> {
+  constructor(props: BackgroundLayerWidgetProps) {
+    super(props);
+    this.state = {};
+  }
+
+  getTransformStyle(): CSSProperties {
+    return {
+      backgroundPosition: `${this.props.model.getOffsetX()}px ${this.props.model.getOffsetY()}px`,
+    };
+  }
+
+  render() {
+    return <S.DivLayer style={this.getTransformStyle()} />;
+  }
+}

frontend/src/components/visual-editor/v2/CustomCanvasWidget.tsx

@@ -1,11 +1,12 @@
 /*
- * Copyright © 2024 Hexastack. All rights reserved.
+ * Copyright © 2025 Hexastack. All rights reserved.
  *
  * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
  * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
  * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
  */
 
+
 import styled from "@emotion/styled";
 import {
   CanvasEngine,
@@ -14,6 +15,8 @@ import {
 } from "@projectstorm/react-diagrams";
 import * as React from "react";
 
+import { BackgroundLayerWidget } from "./BackgroundLayerWidget";
+
 export interface DiagramProps {
   engine: CanvasEngine;
   className?: string;
@@ -115,6 +118,7 @@ export class CustomCanvasWidget extends React.Component<DiagramProps> {
             this.props.engine.getActionEventBus().fireAction({ event });
           }}
         >
+          <BackgroundLayerWidget model={model} />;
           {model.getLayers().map((layer) => {
             return (
               <TransformLayerWidget layer={layer} key={layer.getID()}>

frontend/src/components/visual-editor/v2/CustomDiagramNodes/NodeWidget.tsx

@@ -1,11 +1,12 @@
 /*
- * Copyright © 2024 Hexastack. All rights reserved.
+ * Copyright © 2025 Hexastack. All rights reserved.
  *
  * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
  * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
  * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
  */
 
+
 import BrokenImageOutlinedIcon from "@mui/icons-material/BrokenImageOutlined";
 import ChatBubbleOutlineOutlinedIcon from "@mui/icons-material/ChatBubbleOutlineOutlined";
 import ExtensionOutlinedIcon from "@mui/icons-material/ExtensionOutlined";
@@ -76,7 +77,7 @@ class NodeAbstractWidget extends React.Component<
           >
             <IconContainer
               style={{
-                borderWidth: "3px",
+                borderWidth: "1px",
                 borderColor: this.props.color,
                 borderStyle: "solid",
               }}
@@ -117,7 +118,7 @@ class NodeAbstractWidget extends React.Component<
               >
                 <IconContainer
                   style={{
-                    borderWidth: "3px",
+                    borderWidth: "1px",
                     borderColor: this.props.color,
                     borderStyle: "solid",
                   }}
@@ -263,12 +264,12 @@ class NodeWidget extends React.Component<
           this.props.node.isSelected() ? "selected" : "",
         )}
         style={{
-          border: `6px solid ${this.config.color}`,
+          border: `1px solid ${this.config.color}`,
         }}
       >
         {this.props.node.starts_conversation ? (
           <div className="start-point-container">
-            <div className="start-point" />
+            <PlayArrowRoundedIcon className="start-point" />
           </div>
         ) : null}
         <div

frontend/src/styles/visual-editor.css

@@ -18,20 +18,14 @@
 .diagram-container {
   width: 100%;
   height: 100%;
-  background: #e8eff2;
-  background-image: linear-gradient(to right, #fff9 1px, transparent 1px),
-    linear-gradient(to bottom, #fff9 1px, transparent 1px);
-  background-size: 20px 20px;
-  background-position: -1px -1px;
-  background-attachment: fixed;
   z-index: 2;
 }
 
 .start-point-container {
   top: -11px;
   left: -11px;
-  width: 22px;
+  width: 20px;
-  height: 22px;
+  height: 20px;
   transform: scale(140%);
   border: 1px solid #fff;
   position: absolute;
@@ -40,12 +34,12 @@
 }
 
 .start-point {
-  margin: 5px 7px;
+  color: #FFF;
-  width: 0;
+  position: absolute;
-  height: 0;
+  top: 50%;
-  border-top: 5px solid transparent;
+  left: 50%;
-  border-bottom: 5px solid transparent;
+  transform: translate(-50%, -50%);
-  border-left: 9px solid #fff;
+  font-size: 18px;
 }
 
 .node {
@@ -58,7 +52,7 @@
   z-index: -1;
 }
 .node:has(.selected) {
-  outline: 6px solid #1dc7fc;
+  outline: 2px solid #1dc7fc;
   z-index: 0;
   cursor: grab;
   transform: scale(1.02);
@@ -76,7 +70,8 @@
   min-height: 130px;
   background-color: #fff;
   padding: 0px;
-  border-radius: 17.5px;
+  border-radius: 12px;
+  box-shadow: 0 0 8px #c4c4c4;
 }
 
 .custom-node-header {
@@ -116,7 +111,7 @@
   justify-content: flex-start;
   align-items: center;
   gap: 15px;
-  padding: 20px 24px 24px;
+  padding: 16px 28px;
   position: relative;
 }
 
@@ -127,7 +122,7 @@
   justify-items: flex-start;
   align-items: center;
   gap: 8px;
-  border-radius: 10px 10px 0 0px;
+  border-radius: 12px 12px 0 0;
   width: auto;
   margin-top: -1px;
   margin-left: -1px;
@@ -186,6 +181,9 @@
 .circle-porter {
   top: 50%;
   margin-top: 5px;
+  border-radius: 100%;
+  box-shadow: 0 0 8px #0003;
+  transition: all .4s ease 0s;
 }
 .circle-out-porters {
   position: absolute;
@@ -196,9 +194,20 @@
 .circle-porter-in {
   position: absolute;
   top: 50%;
-  transform: translateY(-50%);
+  transform: translateY(-50%) scale(.75);
   left: -12px;
 }
 .circle-porter-out {
-  right: -30px;
+  transform: scale(.75);
+  right: -12px;
+}
+
+.circle-porter-out:hover {
+  cursor: grab;
+  transform: scale(1.1);
+}
+
+.circle-porter-in:hover {
+  cursor: grab;
+  transform: translateY(-50%) scale(1.1);
 }

widget/src/UiChatWidget.css

@@ -3,5 +3,5 @@
   right: 25px !important;
   bottom: 25px !important;
   z-index: 999 !important;
-  box-shadow: 0 0 8px #0003 !important;
+  box-shadow: 0 0 8px #c4c4c4 !important;
 }