flow-lib-creomnia 1.0.3 → 1.0.4

package/README.md

@@ -1,12 +1,12 @@
-# Nodes flow
-
-## Components
-
-`<NodesFlow />`
-
-Props:
-
-- `nodes` - `NodeType[]`
-- `menuTabs` - `MenuTabType[]`
-- `addNewNodeCallback` - `AddNewNodeCallbackType`
-- `addButtonColor`(optional) - `string`
+# Nodes flow
+
+## Components
+
+`<NodesFlow />`
+
+Props:
+
+- `nodes` - `NodeType[]`
+- `menuTabs` - `MenuTabType[]`
+- `addNewNodeCallback` - `AddNewNodeCallbackType`
+- `addButtonColor`(optional) - `string`

package/lib/assets/icons/ChoiceNodeIcon.svg

@@ -1,16 +1,16 @@
-<svg width="376" height="132" viewBox="0 0 376 132" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_d_4646_869)">
-<path d="M63.5925 96C61.3074 96 59.1314 95.0228 57.6133 93.3149L32.7244 65.3149C30.0301 62.2838 30.0301 57.7162 32.7244 54.6851L57.6133 26.6851C59.1314 24.9772 61.3074 24 63.5925 24H312.407C314.693 24 316.869 24.9772 318.387 26.6851L343.276 54.6851C345.97 57.7162 345.97 62.2838 343.276 65.3149L318.387 93.3149C316.869 95.0228 314.693 96 312.407 96H63.5925Z"/>
-</g>
-<defs>
-<filter id="filter0_d_4646_869" x="0.703125" y="0" width="374.594" height="132" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="6"/>
-<feGaussianBlur stdDeviation="15"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4646_869"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4646_869" result="shape"/>
-</filter>
-</defs>
-</svg>
+<svg width="376" height="132" viewBox="0 0 376 132" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_4646_869)">
+<path d="M63.5925 96C61.3074 96 59.1314 95.0228 57.6133 93.3149L32.7244 65.3149C30.0301 62.2838 30.0301 57.7162 32.7244 54.6851L57.6133 26.6851C59.1314 24.9772 61.3074 24 63.5925 24H312.407C314.693 24 316.869 24.9772 318.387 26.6851L343.276 54.6851C345.97 57.7162 345.97 62.2838 343.276 65.3149L318.387 93.3149C316.869 95.0228 314.693 96 312.407 96H63.5925Z"/>
+</g>
+<defs>
+<filter id="filter0_d_4646_869" x="0.703125" y="0" width="374.594" height="132" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="6"/>
+<feGaussianBlur stdDeviation="15"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4646_869"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4646_869" result="shape"/>
+</filter>
+</defs>
+</svg>

package/lib/assets/icons/LeftArrowIcon.svg

@@ -1,3 +1,3 @@
-<svg width="15" height="22" viewBox="0 0 15 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path id="triangle 40x80" d="M1.82843 13.8284L8.17157 20.1716C10.6914 22.6914 15 20.9068 15 17.3431L15 4.65686C15 1.09324 10.6914 -0.691433 8.17158 1.82843L1.82843 8.17157C0.266331 9.73367 0.266329 12.2663 1.82843 13.8284Z" fill="#16B364"/>
-</svg>
+<svg width="15" height="22" viewBox="0 0 15 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="triangle 40x80" d="M1.82843 13.8284L8.17157 20.1716C10.6914 22.6914 15 20.9068 15 17.3431L15 4.65686C15 1.09324 10.6914 -0.691433 8.17158 1.82843L1.82843 8.17157C0.266331 9.73367 0.266329 12.2663 1.82843 13.8284Z" fill="#16B364"/>
+</svg>

package/lib/assets/icons/ParallelIcon.svg

@@ -1,5 +1,5 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="addons/parallel">
-<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M12.0007 2.66683C12.3688 2.66683 12.6673 2.36835 12.6673 2.00016C12.6673 1.63197 12.3688 1.3335 12.0007 1.3335C11.6325 1.3335 11.334 1.63197 11.334 2.00016C11.334 2.36835 11.6325 2.66683 12.0007 2.66683ZM12.6673 4.00016C12.6673 4.36835 12.3688 4.66683 12.0007 4.66683C11.6325 4.66683 11.334 4.36835 11.334 4.00016C11.334 3.63197 11.6325 3.3335 12.0007 3.3335C12.3688 3.3335 12.6673 3.63197 12.6673 4.00016ZM5.33398 6.00016C5.33398 5.63197 5.03551 5.3335 4.66732 5.3335C4.29913 5.3335 4.00065 5.63197 4.00065 6.00016V12.3907L2.47211 10.8621L1.5293 11.805L4.66737 14.943L7.80544 11.805L6.86263 10.8621L5.33398 12.3908V6.00016ZM12.6673 6.00016C12.6673 5.63197 12.3688 5.3335 12.0007 5.3335C11.6325 5.3335 11.334 5.63197 11.334 6.00016V12.3907L9.80544 10.8621L8.86263 11.805L12.0007 14.943L15.1388 11.805L14.196 10.8621L12.6673 12.3908V6.00016ZM5.33398 2.00016C5.33398 2.36835 5.03551 2.66683 4.66732 2.66683C4.29913 2.66683 4.00065 2.36835 4.00065 2.00016C4.00065 1.63197 4.29913 1.3335 4.66732 1.3335C5.03551 1.3335 5.33398 1.63197 5.33398 2.00016ZM4.66732 4.66683C5.03551 4.66683 5.33398 4.36835 5.33398 4.00016C5.33398 3.63197 5.03551 3.3335 4.66732 3.3335C4.29913 3.3335 4.00065 3.63197 4.00065 4.00016C4.00065 4.36835 4.29913 4.66683 4.66732 4.66683Z" fill="white"/>
-</g>
-</svg>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="addons/parallel">
+<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M12.0007 2.66683C12.3688 2.66683 12.6673 2.36835 12.6673 2.00016C12.6673 1.63197 12.3688 1.3335 12.0007 1.3335C11.6325 1.3335 11.334 1.63197 11.334 2.00016C11.334 2.36835 11.6325 2.66683 12.0007 2.66683ZM12.6673 4.00016C12.6673 4.36835 12.3688 4.66683 12.0007 4.66683C11.6325 4.66683 11.334 4.36835 11.334 4.00016C11.334 3.63197 11.6325 3.3335 12.0007 3.3335C12.3688 3.3335 12.6673 3.63197 12.6673 4.00016ZM5.33398 6.00016C5.33398 5.63197 5.03551 5.3335 4.66732 5.3335C4.29913 5.3335 4.00065 5.63197 4.00065 6.00016V12.3907L2.47211 10.8621L1.5293 11.805L4.66737 14.943L7.80544 11.805L6.86263 10.8621L5.33398 12.3908V6.00016ZM12.6673 6.00016C12.6673 5.63197 12.3688 5.3335 12.0007 5.3335C11.6325 5.3335 11.334 5.63197 11.334 6.00016V12.3907L9.80544 10.8621L8.86263 11.805L12.0007 14.943L15.1388 11.805L14.196 10.8621L12.6673 12.3908V6.00016ZM5.33398 2.00016C5.33398 2.36835 5.03551 2.66683 4.66732 2.66683C4.29913 2.66683 4.00065 2.36835 4.00065 2.00016C4.00065 1.63197 4.29913 1.3335 4.66732 1.3335C5.03551 1.3335 5.33398 1.63197 5.33398 2.00016ZM4.66732 4.66683C5.03551 4.66683 5.33398 4.36835 5.33398 4.00016C5.33398 3.63197 5.03551 3.3335 4.66732 3.3335C4.29913 3.3335 4.00065 3.63197 4.00065 4.00016C4.00065 4.36835 4.29913 4.66683 4.66732 4.66683Z" fill="white"/>
+</g>
+</svg>

package/lib/assets/icons/RightArrowIcon.svg

@@ -1,3 +1,3 @@
-<svg width="15" height="22" viewBox="0 0 15 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path id="triangle 16x32" d="M13.1716 13.8284L6.82843 20.1716C4.30857 22.6914 -5.32687e-07 20.9068 -8.44229e-07 17.3431L-1.9533e-06 4.65686C-2.26484e-06 1.09324 4.30856 -0.691433 6.82842 1.82843L13.1716 8.17157C14.7337 9.73367 14.7337 12.2663 13.1716 13.8284Z" fill="#F04438"/>
-</svg>
+<svg width="15" height="22" viewBox="0 0 15 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="triangle 16x32" d="M13.1716 13.8284L6.82843 20.1716C4.30857 22.6914 -5.32687e-07 20.9068 -8.44229e-07 17.3431L-1.9533e-06 4.65686C-2.26484e-06 1.09324 4.30856 -0.691433 6.82842 1.82843L13.1716 8.17157C14.7337 9.73367 14.7337 12.2663 13.1716 13.8284Z" fill="#F04438"/>
+</svg>

package/lib/assets/icons/flowIcon.svg

@@ -1,7 +1,7 @@
-<svg width="14" height="20" viewBox="0 0 14 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5 2C5 0.895431 5.89543 0 7 0C8.10457 0 9 0.895431 9 2C9 3.10457 8.10457 4 7 4C5.89543 4 5 3.10457 5 2Z" fill="#6C737F"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0 9C0 7.34315 1.34315 6 3 6H11C12.6569 6 14 7.34315 14 9V11C14 12.6569 12.6569 14 11 14H3C1.34315 14 0 12.6569 0 11V9ZM3 8C2.44772 8 2 8.44772 2 9V11C2 11.5523 2.44772 12 3 12H11C11.5523 12 12 11.5523 12 11V9C12 8.44772 11.5523 8 11 8H3Z" fill="#6C737F"/>
-<path d="M5 18C5 16.8954 5.89543 16 7 16C8.10457 16 9 16.8954 9 18C9 19.1046 8.10457 20 7 20C5.89543 20 5 19.1046 5 18Z" fill="#6C737F"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M6 7V3H8V7H6Z" fill="#6C737F"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M6 18V13H8V18H6Z" fill="#6C737F"/>
-</svg>
+<svg width="14" height="20" viewBox="0 0 14 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 2C5 0.895431 5.89543 0 7 0C8.10457 0 9 0.895431 9 2C9 3.10457 8.10457 4 7 4C5.89543 4 5 3.10457 5 2Z" fill="#6C737F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 9C0 7.34315 1.34315 6 3 6H11C12.6569 6 14 7.34315 14 9V11C14 12.6569 12.6569 14 11 14H3C1.34315 14 0 12.6569 0 11V9ZM3 8C2.44772 8 2 8.44772 2 9V11C2 11.5523 2.44772 12 3 12H11C11.5523 12 12 11.5523 12 11V9C12 8.44772 11.5523 8 11 8H3Z" fill="#6C737F"/>
+<path d="M5 18C5 16.8954 5.89543 16 7 16C8.10457 16 9 16.8954 9 18C9 19.1046 8.10457 20 7 20C5.89543 20 5 19.1046 5 18Z" fill="#6C737F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 7V3H8V7H6Z" fill="#6C737F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 18V13H8V18H6Z" fill="#6C737F"/>
+</svg>

package/lib/modules/common/components/ZoomToolbar/styled.js

@@ -3,11 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Container = void 0;
 const system_1 = require("@mui/system");
 const material_1 = require("@mui/material");
-exports.Container = (0, system_1.styled)(material_1.Box) `
-  width: 100%;
-  border-radius: 8px;
-  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
-  border: 2px solid;
-  border-color: ${props => `${props.theme.palette?.background?.paper}`};
-  background: ${props => `${props.theme.palette?.background?.paper}`};
+exports.Container = (0, system_1.styled)(material_1.Box) `
+  width: 100%;
+  border-radius: 8px;
+  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
+  border: 2px solid;
+  border-color: ${props => `${props.theme.palette?.background?.paper}`};
+  background: ${props => `${props.theme.palette?.background?.paper}`};
 `;

package/lib/modules/common/types/index.d.ts

@@ -1,8 +1,10 @@
 /// <reference types="react" />
+import { NodeMenuItemType } from "../../node/enums";
 export type MenuItemType = {
     name: string;
     value: string;
     icon: JSX.Element;
+    type: NodeMenuItemType;
 };
 export type MenuTabType = {
     name: string;

package/lib/modules/connection/components/AddButton/styled.js

@@ -9,33 +9,33 @@ const Add_1 = __importDefault(require("@mui/icons-material/Add"));
 const config_1 = require("../../../../config");
 const colors_1 = require("../../../../config/colors");
 const material_1 = require("@mui/material");
-const createAddButton = ({ background = colors_1.Colors.WHITE, x, y, }) => (0, system_1.styled)(Add_1.default) `
-  height: ${config_1.Config.ADD_BUTTON_WIDTH}px;
-  width: ${config_1.Config.ADD_BUTTON_WIDTH}px;
-  position: absolute;
-  top: ${y}px;
-  left: ${x}px;
-  font-size: ${config_1.Config.ADD_BUTTON_WIDTH}px;
-  background: ${background};
-  color: ${colors_1.Colors.NAVY_BLUE};
-  border-radius: 50%;
-  cursor: pointer;
-  z-index: 1000;
-  :hover {
-    background: ${colors_1.Colors.BLUE};
-    color: ${colors_1.Colors.WHITE};
-    box-shadow: 0 0 1px 3px ${colors_1.Colors.DEEP_BLUE};
-  }
+const createAddButton = ({ background = colors_1.Colors.WHITE, x, y, }) => (0, system_1.styled)(Add_1.default) `
+  height: ${config_1.Config.ADD_BUTTON_WIDTH}px;
+  width: ${config_1.Config.ADD_BUTTON_WIDTH}px;
+  position: absolute;
+  top: ${y}px;
+  left: ${x}px;
+  font-size: ${config_1.Config.ADD_BUTTON_WIDTH}px;
+  background: ${background};
+  color: ${colors_1.Colors.NAVY_BLUE};
+  border-radius: 50%;
+  cursor: pointer;
+  z-index: 1000;
+  :hover {
+    background: ${colors_1.Colors.BLUE};
+    color: ${colors_1.Colors.WHITE};
+    box-shadow: 0 0 1px 3px ${colors_1.Colors.DEEP_BLUE};
+  }
 `;
 exports.createAddButton = createAddButton;
-const createPlaceholder = (isOver, canDrop) => (0, system_1.styled)(material_1.Box)(() => `
-  width: ${config_1.Config.NODE_WIDTH}px;
-  height: ${config_1.Config.NODE_HEIGHT}px;
-  position: absolute;
-  border-radius: 8px;
-  background-color: rgba(99, 102, 241, 0.12);
-  border: dashed #2970FF 2px;
-  opacity: ${isOver ? 1 : 0};
-  z-index:  ${canDrop ? 1000 : 0};
+const createPlaceholder = (isOver, canDrop) => (0, system_1.styled)(material_1.Box)(() => `
+  width: ${config_1.Config.NODE_WIDTH}px;
+  height: ${config_1.Config.NODE_HEIGHT}px;
+  position: absolute;
+  border-radius: 8px;
+  background-color: rgba(99, 102, 241, 0.12);
+  border: dashed #2970FF 2px;
+  opacity: ${isOver ? 1 : 0};
+  z-index:  ${canDrop ? 1000 : 0};
   `);
 exports.createPlaceholder = createPlaceholder;

package/lib/modules/connection/components/BaseConnection/styled.js

@@ -7,22 +7,22 @@ exports.createConnectionLine = void 0;
 const styled_1 = __importDefault(require("@emotion/styled"));
 const config_1 = require("../../../../config");
 const createConnectionLine = ({ width, height, x, y, border }) => {
-    return (0, styled_1.default)("div") `
-  width: ${width}px;
-  height: ${height}px;
-  border-top: ${border.top ? config_1.Config.CONNECTION_WIDTH : 0}px solid;
-  border-left: ${border.left ? config_1.Config.CONNECTION_WIDTH : 0}px solid;
-  border-right: ${border.right ? config_1.Config.CONNECTION_WIDTH : 0}px solid;
-  border-bottom: ${border.bottom ? config_1.Config.CONNECTION_WIDTH : 0}px solid;
-  border-top-left-radius: ${border.left && border.top ? 8 : 0}px;
-  border-top-right-radius: ${border.right && border.top ? 8 : 0}px;
-  border-bottom-left-radius: ${border.left && border.bottom ? 8 : 0}px;
-  border-bottom-right-radius: ${border.right && border.bottom ? 8 : 0}px;
-  position: absolute;
-  top: ${y}px;
-  left: ${x}px;
-  display: flex;
-  align-items: center;
+    return (0, styled_1.default)("div") `
+  width: ${width}px;
+  height: ${height}px;
+  border-top: ${border.top ? config_1.Config.CONNECTION_WIDTH : 0}px solid;
+  border-left: ${border.left ? config_1.Config.CONNECTION_WIDTH : 0}px solid;
+  border-right: ${border.right ? config_1.Config.CONNECTION_WIDTH : 0}px solid;
+  border-bottom: ${border.bottom ? config_1.Config.CONNECTION_WIDTH : 0}px solid;
+  border-top-left-radius: ${border.left && border.top ? 8 : 0}px;
+  border-top-right-radius: ${border.right && border.top ? 8 : 0}px;
+  border-bottom-left-radius: ${border.left && border.bottom ? 8 : 0}px;
+  border-bottom-right-radius: ${border.right && border.bottom ? 8 : 0}px;
+  position: absolute;
+  top: ${y}px;
+  left: ${x}px;
+  display: flex;
+  align-items: center;
 `;
 };
 exports.createConnectionLine = createConnectionLine;

package/lib/modules/connection/components/ConnectionWithButton/styled.js

@@ -10,46 +10,46 @@ const config_1 = require("../../../../config");
 const colors_1 = require("../../../../config/colors");
 const material_1 = require("@mui/material");
 const createConnectionLine = ({ width, height, x, y, border, }) => {
-    return (0, system_1.styled)("div") `
-  width: ${width}px;
-  height: ${height}px;
-  border-top: ${border.top ? config_1.Config.CONNECTION_WIDTH : 0}px solid;
-  border-left: ${border.left ? config_1.Config.CONNECTION_WIDTH : 0}px solid;
-  border-right: ${border.right ? config_1.Config.CONNECTION_WIDTH : 0}px solid;
-  border-bottom: ${border.bottom ? config_1.Config.CONNECTION_WIDTH : 0}px solid;
-  border-top-left-radius: ${border.left && border.top ? 8 : 0}px;
-  border-top-right-radius: ${border.right && border.top ? 8 : 0}px;
-  border-bottom-left-radius: ${border.left && border.bottom ? 8 : 0}px;
-  border-bottom-right-radius: ${border.right && border.bottom ? 8 : 0}px;
-  position: absolute;
-  top: ${y}px;
-  left: ${x}px;
-  display: flex;
-  align-items: center;
+    return (0, system_1.styled)("div") `
+  width: ${width}px;
+  height: ${height}px;
+  border-top: ${border.top ? config_1.Config.CONNECTION_WIDTH : 0}px solid;
+  border-left: ${border.left ? config_1.Config.CONNECTION_WIDTH : 0}px solid;
+  border-right: ${border.right ? config_1.Config.CONNECTION_WIDTH : 0}px solid;
+  border-bottom: ${border.bottom ? config_1.Config.CONNECTION_WIDTH : 0}px solid;
+  border-top-left-radius: ${border.left && border.top ? 8 : 0}px;
+  border-top-right-radius: ${border.right && border.top ? 8 : 0}px;
+  border-bottom-left-radius: ${border.left && border.bottom ? 8 : 0}px;
+  border-bottom-right-radius: ${border.right && border.bottom ? 8 : 0}px;
+  position: absolute;
+  top: ${y}px;
+  left: ${x}px;
+  display: flex;
+  align-items: center;
 `;
 };
 exports.createConnectionLine = createConnectionLine;
-const createAddButton = ({ background = colors_1.Colors.WHITE, x, y, }) => (0, system_1.styled)(Add_1.default) `
-  height: ${config_1.Config.ADD_BUTTON_WIDTH}px;
-  width: ${config_1.Config.ADD_BUTTON_WIDTH}px;
-  position: absolute;
-  top: ${y}px;
-  left: ${x}px;
-  font-size: ${config_1.Config.ADD_BUTTON_WIDTH}px;
-  background: ${background};
-  color: ${colors_1.Colors.NAVY_BLUE};
-  border-radius: 50%;
-  cursor: pointer;
-  z-index: 1000;
-  :hover {
-    background: ${colors_1.Colors.BLUE};
-    color: ${colors_1.Colors.WHITE};
-    box-shadow: 0 0 1px 3px ${colors_1.Colors.DEEP_BLUE};
-  }
+const createAddButton = ({ background = colors_1.Colors.WHITE, x, y, }) => (0, system_1.styled)(Add_1.default) `
+  height: ${config_1.Config.ADD_BUTTON_WIDTH}px;
+  width: ${config_1.Config.ADD_BUTTON_WIDTH}px;
+  position: absolute;
+  top: ${y}px;
+  left: ${x}px;
+  font-size: ${config_1.Config.ADD_BUTTON_WIDTH}px;
+  background: ${background};
+  color: ${colors_1.Colors.NAVY_BLUE};
+  border-radius: 50%;
+  cursor: pointer;
+  z-index: 1000;
+  :hover {
+    background: ${colors_1.Colors.BLUE};
+    color: ${colors_1.Colors.WHITE};
+    box-shadow: 0 0 1px 3px ${colors_1.Colors.DEEP_BLUE};
+  }
 `;
 exports.createAddButton = createAddButton;
-exports.StyledPopper = (0, system_1.styled)(material_1.Popper) `
-  z-index: 1000;
-  overflow: hidden;
-  border-radius: 16px;
+exports.StyledPopper = (0, system_1.styled)(material_1.Popper) `
+  z-index: 1000;
+  overflow: hidden;
+  border-radius: 16px;
 `;

package/lib/modules/flow/components/FlowSandbox/styled.js

@@ -3,30 +3,30 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ZoomToolbarContainer = exports.ConnectionWrapper = exports.NodeWrapper = exports.createFlowContainer = void 0;
 const system_1 = require("@mui/system");
 const config_1 = require("../../../../config");
-const createFlowContainer = ({ scaleValue, width, }) => (0, system_1.styled)('div') `
-    transform: scale(${scaleValue});
-    min-width: ${width}px;
-    min-height: fit-content;
-    background-color: blue;
+const createFlowContainer = ({ scaleValue, width, }) => (0, system_1.styled)('div') `
+    transform: scale(${scaleValue});
+    min-width: ${width}px;
+    min-height: fit-content;
+    background-color: blue;
   `;
 exports.createFlowContainer = createFlowContainer;
-exports.NodeWrapper = (0, system_1.styled)('div') `
-  width: 0;
-  height: ${config_1.Config.NODE_HEIGHT}px;
-  position: absolute;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 2;
+exports.NodeWrapper = (0, system_1.styled)('div') `
+  width: 0;
+  height: ${config_1.Config.NODE_HEIGHT}px;
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 2;
 `;
-exports.ConnectionWrapper = (0, system_1.styled)('div') `
-  z-index: 1;
+exports.ConnectionWrapper = (0, system_1.styled)('div') `
+  z-index: 1;
 `;
-exports.ZoomToolbarContainer = (0, system_1.styled)('div') `
-  cursor: default;
-  position: fixed;
-  z-index: 1000;
-  padding: 24px;
-  bottom: 0;
-  left: 0;
+exports.ZoomToolbarContainer = (0, system_1.styled)('div') `
+  cursor: default;
+  position: fixed;
+  z-index: 1000;
+  padding: 24px;
+  bottom: 0;
+  left: 0;
 `;

package/lib/modules/flow/components/Space/styled.js

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SpaceContainer = void 0;
 const system_1 = require("@mui/system");
-exports.SpaceContainer = (0, system_1.styled)('div') `
-  width: 100%;
-  height: 100%;
-  cursor: grab;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
+exports.SpaceContainer = (0, system_1.styled)('div') `
+  width: 100%;
+  height: 100%;
+  cursor: grab;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 `;

package/lib/modules/flow/types/index.d.ts

@@ -1,10 +1,12 @@
 /// <reference types="react" />
 import { MenuTabType, Theme, UpdateNodePosition } from "../../common/types";
+import { NodeMenuItemType } from "../../node/enums";
 import { NodeType } from "../../node/types";
 export type AddNewNodeCallbackType = (params: {
     menuItemId: string;
     parentId: string | undefined;
     connectionIndex: number;
+    nodeType: NodeMenuItemType;
 }) => void;
 export type NodeFlowPropsType = {
     nodes: NodeType[];

package/lib/modules/node/components/BaseNode/index.js

@@ -45,7 +45,7 @@ const BaseNode = ({ nodeData, isProcessed, isFailed, failedNodeColor, onRedirect
         }
     };
     const component = (0, react_1.useRef)();
-    return ((0, jsx_runtime_1.jsx)(DragWrapper_1.DragWrapper, { onUpdatePosition: onUpdatePosition, nodeId: nodeData?.id || '', children: (0, jsx_runtime_1.jsx)(material_1.Box, { ref: component, children: (0, jsx_runtime_1.jsxs)(AnimatedContainer, { onClick: onNodeClick, style: props, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [(0, jsx_runtime_1.jsxs)(styled_1.IconWrapper, { children: [(0, jsx_runtime_1.jsx)(styled_1.IconBorder, {}), nodeData?.icon] }), (0, jsx_runtime_1.jsxs)(styled_1.ContentContainer, { children: [(0, jsx_runtime_1.jsxs)(styled_1.NameOfExtension, { children: ["Type: ", nodeData?.extensionName || 'unknown'] }), (0, jsx_runtime_1.jsx)(styled_1.Name, { children: nodeData?.name })] }), nodeData?.childFlowId &&
+    return ((0, jsx_runtime_1.jsx)(DragWrapper_1.DragWrapper, { onUpdatePosition: onUpdatePosition, nodeId: nodeData?.id || '', children: (0, jsx_runtime_1.jsx)(material_1.Box, { ref: component, children: (0, jsx_runtime_1.jsxs)(AnimatedContainer, { onClick: onNodeClick, style: props, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [(0, jsx_runtime_1.jsxs)(styled_1.IconWrapper, { children: [(0, jsx_runtime_1.jsx)(styled_1.IconBorder, {}), nodeData?.icon] }), (0, jsx_runtime_1.jsxs)(styled_1.ContentContainer, { children: [(0, jsx_runtime_1.jsxs)(styled_1.NameOfExtension, { children: ["Type: ", nodeData?.nodeType || 'unknown'] }), (0, jsx_runtime_1.jsx)(styled_1.Name, { children: nodeData?.name })] }), nodeData?.childFlowId &&
                         (0, jsx_runtime_1.jsx)(styled_1.ChildFlowWrapper, { onClick: redirectToParentFlow, children: (0, jsx_runtime_1.jsx)("img", { src: flowIcon_svg_1.default }) })] }) }) }));
 };
 exports.default = BaseNode;

package/lib/modules/node/components/BaseNode/styled.js

@@ -5,94 +5,94 @@ const system_1 = require("@mui/system");
 const material_1 = require("@mui/material");
 const config_1 = require("../../../../config");
 const colors_1 = require("../../../../config/colors");
-exports.Container = (0, system_1.styled)(material_1.Paper)(() => `
-  width: ${config_1.Config.NODE_WIDTH}px;
-  height: ${config_1.Config.NODE_HEIGHT}px;
-  border-radius: 8px;
-  box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.08);
-  border: 2px solid ${colors_1.Colors.WHITE};
-  cursor: pointer;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  position: relative;
-  z-index: 0;
+exports.Container = (0, system_1.styled)(material_1.Paper)(() => `
+  width: ${config_1.Config.NODE_WIDTH}px;
+  height: ${config_1.Config.NODE_HEIGHT}px;
+  border-radius: 8px;
+  box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.08);
+  border: 2px solid ${colors_1.Colors.WHITE};
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  position: relative;
+  z-index: 0;
   `);
-exports.IconBorder = (0, system_1.styled)('div') `
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  border-radius: 6px;
-  border: 1px solid rgba(17, 25, 39, 0.12);
+exports.IconBorder = (0, system_1.styled)('div') `
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-radius: 6px;
+  border: 1px solid rgba(17, 25, 39, 0.12);
 `;
-exports.IconWrapper = (0, system_1.styled)('div') `
-  width: 56px;
-  min-width: 56px;
-  max-width: 56px;
-  height: 56px;
-  background: ${props => `${props.theme.palette?.background?.default}`};
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 6px;
-  object-fit: contain;
-  margin-left: 8px;
-  overflow: hidden;
-  position: relative;
+exports.IconWrapper = (0, system_1.styled)('div') `
+  width: 56px;
+  min-width: 56px;
+  max-width: 56px;
+  height: 56px;
+  background: ${props => `${props.theme.palette?.background?.default}`};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 6px;
+  object-fit: contain;
+  margin-left: 8px;
+  overflow: hidden;
+  position: relative;
 `;
-exports.Name = (0, system_1.styled)('div') `
-  //font-size: 16px;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  width: 240px;
-  text-align: left;
-  font-family: Inter, 'circular', serif;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 700;
-  line-height: 150%;
+exports.Name = (0, system_1.styled)('div') `
+  //font-size: 16px;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  width: 240px;
+  text-align: left;
+  font-family: Inter, 'circular', serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 150%;
 `;
-exports.NameOfExtension = (0, system_1.styled)('div') `
-  text-align: left;
-  font-size: 12px;
-  color: ${colors_1.Colors.GRAY};
-  width: 240px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-family: Inter, 'circular', serif;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 14px; /* 116.667% */
-  letter-spacing: 0.15px;
+exports.NameOfExtension = (0, system_1.styled)('div') `
+  text-align: left;
+  font-size: 12px;
+  color: ${colors_1.Colors.GRAY};
+  width: 240px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-family: Inter, 'circular', serif;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 14px; /* 116.667% */
+  letter-spacing: 0.15px;
 `;
-exports.ContentContainer = (0, system_1.styled)('div') `
-  margin-left: 16px;
-  height: 62px;
-  align-items: center;
-  justify-content: center;
-  display: flex;
-  width: min-content;
-  flex-direction: column;
-  gap: 5px
+exports.ContentContainer = (0, system_1.styled)('div') `
+  margin-left: 16px;
+  height: 62px;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  width: min-content;
+  flex-direction: column;
+  gap: 5px
 `;
-exports.ChildFlowWrapper = (0, system_1.styled)('div') `
-  width: min-content;
-  height: min-content;
-  position: absolute;
-  z-index: 10;
-  top: 10px;
-  right: 10px;
+exports.ChildFlowWrapper = (0, system_1.styled)('div') `
+  width: min-content;
+  height: min-content;
+  position: absolute;
+  z-index: 10;
+  top: 10px;
+  right: 10px;
 `;
-exports.NodeMenu = (0, system_1.styled)('div') `
-  position: absolute;
-  top: -2px;
-  right: 0;
-  width: 40px;
-  height: calc(100% + 4px);
-  background-color: #D8DBDC;
-  margin-right: -2px;
-  border-radius: 0 8px 8px 0;
+exports.NodeMenu = (0, system_1.styled)('div') `
+  position: absolute;
+  top: -2px;
+  right: 0;
+  width: 40px;
+  height: calc(100% + 4px);
+  background-color: #D8DBDC;
+  margin-right: -2px;
+  border-radius: 0 8px 8px 0;
 `;

package/lib/modules/node/components/ChoiseNode/index.js

@@ -40,6 +40,6 @@ const ChoiceNode = ({ nodeData, isProcessed, isFailed, failedNodeColor }) => {
     });
     const ChoiceNodeImg = (0, react_1.useMemo)(() => (0, styled_1.createChoiceNodeImg)(), [color, node?.id, nodeData?.id]);
     const AnimatedChoiceNodeImg = (0, web_1.animated)(ChoiceNodeImg);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(AnimatedChoiceNodeImg, { src: ChoiceNodeIcon_svg_1.default, style: props }), (0, jsx_runtime_1.jsx)(styled_1.Container, { onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onClick: onNodeClick, children: (0, jsx_runtime_1.jsxs)(material_1.Grid, { container: true, children: [(0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, children: (0, jsx_runtime_1.jsx)(styled_1.ArrowImg, { src: LeftArrowIcon_svg_1.default, alt: "leftArrow" }) }), (0, jsx_runtime_1.jsx)(styled_1.NameGreed, { flexGrow: 1, item: true, children: nodeData?.name || nodeData?.extensionName }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, children: (0, jsx_runtime_1.jsx)(styled_1.ArrowImg, { src: RightArrowIcon_svg_1.default, alt: "RightArrow" }) })] }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(AnimatedChoiceNodeImg, { src: ChoiceNodeIcon_svg_1.default, style: props }), (0, jsx_runtime_1.jsx)(styled_1.Container, { onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onClick: onNodeClick, children: (0, jsx_runtime_1.jsxs)(material_1.Grid, { container: true, children: [(0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, children: (0, jsx_runtime_1.jsx)(styled_1.ArrowImg, { src: LeftArrowIcon_svg_1.default, alt: "leftArrow" }) }), (0, jsx_runtime_1.jsx)(styled_1.NameGreed, { flexGrow: 1, item: true, children: nodeData?.name || nodeData?.nodeType }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, children: (0, jsx_runtime_1.jsx)(styled_1.ArrowImg, { src: RightArrowIcon_svg_1.default, alt: "RightArrow" }) })] }) })] }));
 };
 exports.default = ChoiceNode;

package/lib/modules/node/components/ChoiseNode/styled.js

@@ -5,35 +5,35 @@ const config_1 = require("../../../../config");
 const material_1 = require("@mui/material");
 const system_1 = require("@mui/system");
 const react_svg_1 = require("react-svg");
-exports.Container = (0, system_1.styled)('div') `
-  min-width: 300px;
-  height: ${config_1.Config.NODE_HEIGHT}px;
-  cursor: pointer;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  z-index: 1000;
+exports.Container = (0, system_1.styled)('div') `
+  min-width: 300px;
+  height: ${config_1.Config.NODE_HEIGHT}px;
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  z-index: 1000;
 `;
-const createChoiceNodeImg = () => (0, system_1.styled)(react_svg_1.ReactSVG) `
-  top: -23px;
-  position: absolute;
-  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.1));
-  svg {
-    fill: ${props => `${props.theme.palette?.background?.paper}`};
-    stroke-width: 2;
-    stroke-linecap: round;
-  }
+const createChoiceNodeImg = () => (0, system_1.styled)(react_svg_1.ReactSVG) `
+  top: -23px;
+  position: absolute;
+  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.1));
+  svg {
+    fill: ${props => `${props.theme.palette?.background?.paper}`};
+    stroke-width: 2;
+    stroke-linecap: round;
+  }
 `;
 exports.createChoiceNodeImg = createChoiceNodeImg;
-exports.NameGreed = (0, system_1.styled)(material_1.Grid) `
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 16px;
-  font-weight: 700;
-  color: ${props => `${props.theme.palette.text.primary}`};
-  font-family: Inter, 'circular', serif;;
+exports.NameGreed = (0, system_1.styled)(material_1.Grid) `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 16px;
+  font-weight: 700;
+  color: ${props => `${props.theme.palette.text.primary}`};
+  font-family: Inter, 'circular', serif;;
 `;
-exports.ArrowImg = (0, system_1.styled)('img') `
-  margin-top: 5px;
+exports.ArrowImg = (0, system_1.styled)('img') `
+  margin-top: 5px;
 `;

package/lib/modules/node/components/EndNode/styled.js

@@ -8,15 +8,15 @@ const system_1 = require("@mui/system");
 const Stop_1 = __importDefault(require("@mui/icons-material/Stop"));
 const config_1 = require("../../../../config");
 const colors_1 = require("../../../../config/colors");
-exports.IconContainer = (0, system_1.styled)('div') `
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: ${colors_1.Colors.NAVY_BLUE};
-  height: ${config_1.Config.EDGE_NODE_HEIGHT}px;
-  min-width: ${config_1.Config.EDGE_NODE_HEIGHT}px;
-  border-radius: 100%;
+exports.IconContainer = (0, system_1.styled)('div') `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: ${colors_1.Colors.NAVY_BLUE};
+  height: ${config_1.Config.EDGE_NODE_HEIGHT}px;
+  min-width: ${config_1.Config.EDGE_NODE_HEIGHT}px;
+  border-radius: 100%;
 `;
-exports.Icon = (0, system_1.styled)(Stop_1.default) `
-  color: ${colors_1.Colors.WHITE};
+exports.Icon = (0, system_1.styled)(Stop_1.default) `
+  color: ${colors_1.Colors.WHITE};
 `;

package/lib/modules/node/components/HubNode/styled.js

@@ -4,9 +4,9 @@ exports.NodeHubStyledComponent = void 0;
 const system_1 = require("@mui/system");
 const config_1 = require("../../../../config");
 const colors_1 = require("../../../../config/colors");
-exports.NodeHubStyledComponent = (0, system_1.styled)('div') `
-  min-width: 50px;
-  min-height: ${config_1.Config.HUB_NODE_HEIGHT}px;
-  background: ${colors_1.Colors.NAVY_BLUE};
-  border-radius: 5px;
+exports.NodeHubStyledComponent = (0, system_1.styled)('div') `
+  min-width: 50px;
+  min-height: ${config_1.Config.HUB_NODE_HEIGHT}px;
+  background: ${colors_1.Colors.NAVY_BLUE};
+  border-radius: 5px;
 `;

package/lib/modules/node/components/NodesMenu/index.js

@@ -7,12 +7,12 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const styled_1 = require("./styled");
 const Grid_1 = __importDefault(require("@mui/material/Grid"));
-const NodesMenu = ({ addNewNodeCallback, menuTabs, data, onCloseMenu, emptyMenuItemsComponent, searchPlaceholder }) => {
+const NodesMenu = ({ addNewNodeCallback, menuTabs, data, onCloseMenu, emptyMenuItemsComponent, searchPlaceholder, }) => {
     const [value, setValue] = (0, react_1.useState)(menuTabs?.[0].name);
-    const [searchQuery, setSearchQuery] = (0, react_1.useState)('');
+    const [searchQuery, setSearchQuery] = (0, react_1.useState)("");
     const handleChange = (_, newValue) => {
         setValue(newValue);
-        setSearchQuery('');
+        setSearchQuery("");
     };
     const handleSearchChange = (event) => {
         setSearchQuery(event.target.value);
@@ -21,16 +21,19 @@ const NodesMenu = ({ addNewNodeCallback, menuTabs, data, onCloseMenu, emptyMenuI
         ...tabContentByTabName,
         [tab.name]: tab.menuItems,
     }), {}), [menuTabs]);
-    const onMenuItemClick = (nodeId) => {
+    const onMenuItemClick = (nodeId, nodeType) => {
         addNewNodeCallback?.({
             ...data,
             menuItemId: nodeId,
+            nodeType,
         });
         onCloseMenu();
     };
     const filteredItems = (0, react_1.useMemo)(() => {
         return tab[value].filter((menuItem) => menuItem.name.toLowerCase().includes(searchQuery.toLowerCase()));
     }, [searchQuery, value]);
-    return ((0, jsx_runtime_1.jsxs)(styled_1.MenuContainer, { children: [(0, jsx_runtime_1.jsxs)(Grid_1.default, { direction: 'column', p: '0 0 10px 0', children: [(0, jsx_runtime_1.jsxs)(Grid_1.default, { alignItems: 'center', container: true, p: '8px 8px 0 0', children: [(0, jsx_runtime_1.jsx)(Grid_1.default, { flexGrow: 1, item: true, children: (0, jsx_runtime_1.jsx)(styled_1.StyledTabs, { value: value, onChange: handleChange, textColor: 'primary', indicatorColor: 'primary', children: menuTabs.map((tab) => ((0, jsx_runtime_1.jsx)(styled_1.StyledTab, { value: tab.name, label: tab.name }, tab.name))) }) }), (0, jsx_runtime_1.jsx)(Grid_1.default, { item: true, children: (0, jsx_runtime_1.jsx)(styled_1.Close, { onClick: onCloseMenu }) })] }), (0, jsx_runtime_1.jsx)(styled_1.StyledTextField, { fullWidth: true, variant: "outlined", size: "small", placeholder: searchPlaceholder ? searchPlaceholder : "", value: searchQuery, onChange: handleSearchChange })] }), (0, jsx_runtime_1.jsx)(styled_1.ContentContainer, { children: filteredItems?.length > 0 ? (filteredItems.map((menuItem) => ((0, jsx_runtime_1.jsxs)(styled_1.MenuItem, { onClick: () => onMenuItemClick(menuItem.value), children: [(0, jsx_runtime_1.jsx)(styled_1.IconWrapper, { children: menuItem.icon }), menuItem.name] }, menuItem.value)))) : (emptyMenuItemsComponent && emptyMenuItemsComponent) })] }));
+    return ((0, jsx_runtime_1.jsxs)(styled_1.MenuContainer, { children: [(0, jsx_runtime_1.jsxs)(Grid_1.default, { direction: "column", p: "0 0 10px 0", children: [(0, jsx_runtime_1.jsxs)(Grid_1.default, { alignItems: "center", container: true, p: "8px 8px 0 0", children: [(0, jsx_runtime_1.jsx)(Grid_1.default, { flexGrow: 1, item: true, children: (0, jsx_runtime_1.jsx)(styled_1.StyledTabs, { value: value, onChange: handleChange, textColor: "primary", indicatorColor: "primary", children: menuTabs.map((tab) => ((0, jsx_runtime_1.jsx)(styled_1.StyledTab, { value: tab.name, label: tab.name }, tab.name))) }) }), (0, jsx_runtime_1.jsx)(Grid_1.default, { item: true, children: (0, jsx_runtime_1.jsx)(styled_1.Close, { onClick: onCloseMenu }) })] }), (0, jsx_runtime_1.jsx)(styled_1.StyledTextField, { fullWidth: true, variant: "outlined", size: "small", placeholder: searchPlaceholder ? searchPlaceholder : "", value: searchQuery, onChange: handleSearchChange })] }), (0, jsx_runtime_1.jsx)(styled_1.ContentContainer, { children: filteredItems?.length > 0
+                    ? filteredItems.map((menuItem) => ((0, jsx_runtime_1.jsxs)(styled_1.MenuItem, { onClick: () => onMenuItemClick(menuItem.value, menuItem.type), children: [(0, jsx_runtime_1.jsx)(styled_1.IconWrapper, { children: menuItem.icon }), menuItem.name] }, menuItem.value)))
+                    : emptyMenuItemsComponent && emptyMenuItemsComponent })] }));
 };
 exports.default = NodesMenu;

package/lib/modules/node/components/NodesMenu/styled.js

@@ -18,63 +18,63 @@ exports.MenuContainer = (0, system_1.styled)(material_1.Box)(({ theme }) => ({
     overflow: "hidden",
     colorScheme: theme.palette.mode,
 }));
-exports.TabContainer = (0, system_1.styled)("div") `
-  margin-top: 4px;
-  overflow-x: scroll;
+exports.TabContainer = (0, system_1.styled)("div") `
+  margin-top: 4px;
+  overflow-x: scroll;
 `;
-exports.StyledTabs = (0, system_1.styled)(material_1.Tabs) `
-  display: flex;
-  align-items: flex-start;
-  width: max-content;
-  min-height: 40px;
+exports.StyledTabs = (0, system_1.styled)(material_1.Tabs) `
+  display: flex;
+  align-items: flex-start;
+  width: max-content;
+  min-height: 40px;
 `;
-exports.StyledTab = (0, system_1.styled)(material_1.Tab) `
-  min-height: 40px;
+exports.StyledTab = (0, system_1.styled)(material_1.Tab) `
+  min-height: 40px;
 `;
-exports.ContentContainer = (0, system_1.styled)("div") `
-  height: calc(100% - 120px);
-  overflow-y: scroll;
+exports.ContentContainer = (0, system_1.styled)("div") `
+  height: calc(100% - 120px);
+  overflow-y: scroll;
 `;
-exports.Close = (0, system_1.styled)(Close_1.default) `
-  cursor: pointer;
-  font-size: 24px;
-  display: flex;
-  margin: 8px;
+exports.Close = (0, system_1.styled)(Close_1.default) `
+  cursor: pointer;
+  font-size: 24px;
+  display: flex;
+  margin: 8px;
 `;
-exports.MenuItem = (0, system_1.styled)("div") `
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  margin: 4px;
-  border-radius: 12px;
-  cursor: pointer;
-  font-family: Inter;
-  font-size: 0.875rem;
-  font-weight: 600;
-  line-height: 24px;
-  :hover {
-    background: ${props => `${props.theme.palette?.background?.default}`};;
-  }
+exports.MenuItem = (0, system_1.styled)("div") `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  margin: 4px;
+  border-radius: 12px;
+  cursor: pointer;
+  font-family: Inter;
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 24px;
+  :hover {
+    background: ${props => `${props.theme.palette?.background?.default}`};;
+  }
 `;
-exports.IconWrapper = (0, system_1.styled)("div") `
-  width: 24px;
-  height: 24px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 6px;
-  object-fit: contain;
-  overflow: hidden;
+exports.IconWrapper = (0, system_1.styled)("div") `
+  width: 24px;
+  height: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 6px;
+  object-fit: contain;
+  overflow: hidden;
 `;
-exports.StyledTextField = (0, system_1.styled)(material_1.TextField) `
-  width: calc(100% - 32px);
-  margin: 10px 16px 0;
-  .MuiOutlinedInput-notchedOutline {
-    border-color: rgb(216, 219, 220)!important;
-  }
-  .MuiInputBase-input {
-    padding-top: 5px;
-    padding-bottom: 5px;
-  }
+exports.StyledTextField = (0, system_1.styled)(material_1.TextField) `
+  width: calc(100% - 32px);
+  margin: 10px 16px 0;
+  .MuiOutlinedInput-notchedOutline {
+    border-color: rgb(216, 219, 220)!important;
+  }
+  .MuiInputBase-input {
+    padding-top: 5px;
+    padding-bottom: 5px;
+  }
 `;

package/lib/modules/node/components/ParallelNode/styled.js

@@ -4,13 +4,13 @@ exports.Container = void 0;
 const system_1 = require("@mui/system");
 const config_1 = require("../../../../config");
 const colors_1 = require("../../../../config/colors");
-exports.Container = (0, system_1.styled)('div') `
-  height: ${config_1.Config.PARALLEL_NODE_HEIGHT}px;
-  min-width: ${config_1.Config.PARALLEL_NODE_HEIGHT}px;
-  border-radius: 32px;
-  background-color: ${colors_1.Colors.NAVY_BLUE};
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
+exports.Container = (0, system_1.styled)('div') `
+  height: ${config_1.Config.PARALLEL_NODE_HEIGHT}px;
+  min-width: ${config_1.Config.PARALLEL_NODE_HEIGHT}px;
+  border-radius: 32px;
+  background-color: ${colors_1.Colors.NAVY_BLUE};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
 `;

package/lib/modules/node/components/StartNode/styled.js

@@ -8,15 +8,15 @@ const system_1 = require("@mui/system");
 const PlayArrow_1 = __importDefault(require("@mui/icons-material/PlayArrow"));
 const config_1 = require("../../../../config");
 const colors_1 = require("../../../../config/colors");
-exports.IconContainer = (0, system_1.styled)('div') `
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: ${colors_1.Colors.GREEN};
-  height: ${config_1.Config.EDGE_NODE_HEIGHT}px;
-  min-width: ${config_1.Config.EDGE_NODE_HEIGHT}px;
-  border-radius: 100%;
+exports.IconContainer = (0, system_1.styled)('div') `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: ${colors_1.Colors.GREEN};
+  height: ${config_1.Config.EDGE_NODE_HEIGHT}px;
+  min-width: ${config_1.Config.EDGE_NODE_HEIGHT}px;
+  border-radius: 100%;
 `;
-exports.Icon = (0, system_1.styled)(PlayArrow_1.default) `
-  color: ${colors_1.Colors.WHITE};
+exports.Icon = (0, system_1.styled)(PlayArrow_1.default) `
+  color: ${colors_1.Colors.WHITE};
 `;

package/lib/modules/node/contexts/SettingsContext/index.js

@@ -42,6 +42,6 @@ const NodeSettingsProvider = ({ children, permissions: { canUpdate, canDelete },
         node?.settings?.footer?.onDelete?.(node?.id);
         handleClose();
     };
-    return ((0, jsx_runtime_1.jsxs)(SettingsContext.Provider, { value: { node, setNode }, children: [children, canUpdate && ((0, jsx_runtime_1.jsx)(components_1.HorizontalDrawer, { open: isOpen, onClose: handleClose, HeaderContent: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(styled_1.IconWrapper, { children: [(0, jsx_runtime_1.jsx)(styled_1.IconBorder, {}), node?.icon] }), (0, jsx_runtime_1.jsx)(styled_1.NameContainer, { children: node?.extensionName })] }), Content: (0, jsx_runtime_1.jsxs)(styled_1.SettingsContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, { display: 'flex', flexDirection: 'column', flexGrow: 1, children: node?.settings?.settingsForm }), node?.settings?.customFooter ?? ((0, jsx_runtime_1.jsxs)(styled_1.DefaultFooterContainer, { children: [!isNodeWithoutSave && ((0, jsx_runtime_1.jsx)(material_2.Button, { onClick: onSaveNode, variant: "contained", children: node?.settings?.footer?.saveText || "Save" })), (0, jsx_runtime_1.jsx)(material_1.Box, { flexGrow: 1, children: (0, jsx_runtime_1.jsx)(material_2.Button, { variant: "outlined", onClick: onCancel, children: node?.settings?.footer?.cancelText || "Cancel " }) }), canDelete && ((0, jsx_runtime_1.jsx)(material_2.Button, { onClick: onDeleteNode, color: "error", variant: "text", children: node?.settings?.footer?.deleteText || "Delete node" }))] }))] }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(SettingsContext.Provider, { value: { node, setNode }, children: [children, canUpdate && ((0, jsx_runtime_1.jsx)(components_1.HorizontalDrawer, { open: isOpen, onClose: handleClose, HeaderContent: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(styled_1.IconWrapper, { children: [(0, jsx_runtime_1.jsx)(styled_1.IconBorder, {}), node?.icon] }), (0, jsx_runtime_1.jsx)(styled_1.NameContainer, { children: node?.nodeType || 'unknown' })] }), Content: (0, jsx_runtime_1.jsxs)(styled_1.SettingsContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, { display: 'flex', flexDirection: 'column', flexGrow: 1, children: node?.settings?.settingsForm }), node?.settings?.customFooter ?? ((0, jsx_runtime_1.jsxs)(styled_1.DefaultFooterContainer, { children: [!isNodeWithoutSave && ((0, jsx_runtime_1.jsx)(material_2.Button, { onClick: onSaveNode, variant: "contained", children: node?.settings?.footer?.saveText || "Save" })), (0, jsx_runtime_1.jsx)(material_1.Box, { flexGrow: 1, children: (0, jsx_runtime_1.jsx)(material_2.Button, { variant: "outlined", onClick: onCancel, children: node?.settings?.footer?.cancelText || "Cancel " }) }), canDelete && ((0, jsx_runtime_1.jsx)(material_2.Button, { onClick: onDeleteNode, color: "error", variant: "text", children: node?.settings?.footer?.deleteText || "Delete node" }))] }))] }) }))] }));
 };
 exports.NodeSettingsProvider = NodeSettingsProvider;

package/lib/modules/node/contexts/SettingsContext/styled.js

@@ -3,38 +3,38 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NameContainer = exports.IconWrapper = exports.IconBorder = exports.DefaultFooterContainer = exports.SettingsContent = void 0;
 const material_1 = require("@mui/material");
 const system_1 = require("@mui/system");
-exports.SettingsContent = (0, system_1.styled)(material_1.Box) `
-  display: flex;
-  flex-direction: column;
-  height: 100%;
+exports.SettingsContent = (0, system_1.styled)(material_1.Box) `
+  display: flex;
+  flex-direction: column;
+  height: 100%;
 `;
-exports.DefaultFooterContainer = (0, system_1.styled)(material_1.Box) `
-  display: flex;
-  align-items: center;
-  gap: 24px;
-  margin-top: 20px;
+exports.DefaultFooterContainer = (0, system_1.styled)(material_1.Box) `
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  margin-top: 20px;
 `;
-exports.IconBorder = (0, system_1.styled)('div') `
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  border-radius: 6px;
-  border: 1px solid rgba(17, 25, 39, 0.12);
+exports.IconBorder = (0, system_1.styled)('div') `
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-radius: 6px;
+  border: 1px solid rgba(17, 25, 39, 0.12);
 `;
-exports.IconWrapper = (0, system_1.styled)("div") `
-  width: 56px;
-  height: 56px;
-  background: #f3f3f3;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 6px;
-  object-fit: contain;
-  position: relative;
-  overflow: hidden;
+exports.IconWrapper = (0, system_1.styled)("div") `
+  width: 56px;
+  height: 56px;
+  background: #f3f3f3;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 6px;
+  object-fit: contain;
+  position: relative;
+  overflow: hidden;
 `;
-exports.NameContainer = (0, system_1.styled)("div") `
-  font-size: 18px;
-  font-weight: 700;
-  text-align: left;
+exports.NameContainer = (0, system_1.styled)("div") `
+  font-size: 18px;
+  font-weight: 700;
+  text-align: left;
 `;

package/lib/modules/node/enums/index.d.ts

@@ -6,3 +6,7 @@ export declare enum NodeTypeEnum {
     ChoiceNode = "choiceNode",
     ParallelNode = "parallelNode"
 }
+export declare enum NodeMenuItemType {
+    EXTENSION = "extension",
+    AI_AGENT = "ai-agent"
+}

package/lib/modules/node/enums/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NodeTypeEnum = void 0;
+exports.NodeMenuItemType = exports.NodeTypeEnum = void 0;
 var NodeTypeEnum;
 (function (NodeTypeEnum) {
     NodeTypeEnum["BaseNode"] = "baseNode";
@@ -10,3 +10,8 @@ var NodeTypeEnum;
     NodeTypeEnum["ChoiceNode"] = "choiceNode";
     NodeTypeEnum["ParallelNode"] = "parallelNode";
 })(NodeTypeEnum || (exports.NodeTypeEnum = NodeTypeEnum = {}));
+var NodeMenuItemType;
+(function (NodeMenuItemType) {
+    NodeMenuItemType["EXTENSION"] = "extension";
+    NodeMenuItemType["AI_AGENT"] = "ai-agent";
+})(NodeMenuItemType || (exports.NodeMenuItemType = NodeMenuItemType = {}));

package/lib/modules/node/index.js

@@ -12,8 +12,8 @@ const ParallelNode_1 = __importDefault(require("./components/ParallelNode"));
 const StartNode_1 = __importDefault(require("./components/StartNode"));
 exports.nodeModule = {
     nodes: {
-        baseNode: BaseNode_1.default,
         startNode: StartNode_1.default,
+        baseNode: BaseNode_1.default,
         endNode: EndNode_1.default,
         hubNode: HubNode_1.default,
         choiceNode: ChoiseNode_1.default,

package/lib/modules/node/services/expandCoefficientServices.d.ts

@@ -5,7 +5,7 @@ declare class ExpandCoefficientServices {
         expandCoefficient: number;
         id: string;
         name?: string | undefined;
-        extensionName?: string | undefined;
+        nodeType?: string | undefined;
         description?: string | undefined;
         icon?: JSX.Element | undefined;
         type: import("../enums").NodeTypeEnum;

package/lib/modules/node/types/index.d.ts

@@ -17,7 +17,7 @@ export type SettingsType = {
 export type NodeType = {
     id: string;
     name?: string;
-    extensionName?: string;
+    nodeType?: string;
     description?: string;
     icon?: JSX.Element;
     type: NodeTypeEnum;

package/package.json

@@ -1,65 +1,65 @@
-{
-  "name": "flow-lib-creomnia",
-  "version": "1.0.3",
-  "description": "",
-  "main": "lib/index.js",
-  "types": "lib/index.d.ts",
-  "private": false,
-  "scripts": {
-    "test": "jest --config jestconfig.json",
-    "clean": "rm -rf ./lib",
-    "copy-files": "cp -R src/assets lib/assets",
-    "build": "npm run clean && tsc && npm run copy-files",
-    "publish-package": "npm run build && npm publish"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "devDependencies": {
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@types/jest": "^29.5.2",
-    "@types/react": "^18.2.12",
-    "@types/react-dom": "^18.2.5",
-    "@types/react-svg": "^5.0.0",
-    "jest": "^29.5.0",
-    "prettier": "^2.8.8",
-    "prop-types": "^15.8.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "ts-jest": "^29.1.0",
-    "tslint": "^6.1.3",
-    "tslint-config-prettier": "^1.18.0",
-    "typescript": "^5.1.3"
-  },
-  "files": [
-    "lib/**/*"
-  ],
-  "peerDependencies": {
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.11.16",
-    "@mui/material": "^5.13.5",
-    "@mui/styled-engine-sc": "^5.12.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-svg": "^16.1.17",
-    "styled-components": "^5.3.11"
-  },
-  "dependencies": {
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.11.16",
-    "@mui/material": "^5.13.5",
-    "@mui/styled-engine-sc": "^5.12.0",
-    "@react-spring/rafz": "^9.7.3",
-    "@react-spring/web": "^9.7.3",
-    "react": "^18.2.0",
-    "react-dnd": "^16.0.1",
-    "react-dnd-html5-backend": "^16.0.1",
-    "react-dom": "^18.2.0",
-    "react-svg": "^16.1.17",
-    "react-zoom-pan-pinch": "^3.3.0",
-    "styled-components": "^5.3.11"
-  },
-  "readme": "ERROR: No README data found!"
-}
+{
+  "name": "flow-lib-creomnia",
+  "version": "1.0.4",
+  "description": "",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "private": false,
+  "scripts": {
+    "test": "jest --config jestconfig.json",
+    "clean": "rm -rf ./lib",
+    "copy-files": "cp -R src/assets lib/assets",
+    "build": "npm run clean && tsc && npm run copy-files",
+    "publish-package": "npm run build && npm publish"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@types/jest": "^29.5.2",
+    "@types/react": "^18.2.12",
+    "@types/react-dom": "^18.2.5",
+    "@types/react-svg": "^5.0.0",
+    "jest": "^29.5.0",
+    "prettier": "^2.8.8",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "ts-jest": "^29.1.0",
+    "tslint": "^6.1.3",
+    "tslint-config-prettier": "^1.18.0",
+    "typescript": "^5.1.3"
+  },
+  "files": [
+    "lib/**/*"
+  ],
+  "peerDependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.11.16",
+    "@mui/material": "^5.13.5",
+    "@mui/styled-engine-sc": "^5.12.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-svg": "^16.1.17",
+    "styled-components": "^5.3.11"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.11.16",
+    "@mui/material": "^5.13.5",
+    "@mui/styled-engine-sc": "^5.12.0",
+    "@react-spring/rafz": "^9.7.3",
+    "@react-spring/web": "^9.7.3",
+    "react": "^18.2.0",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
+    "react-dom": "^18.2.0",
+    "react-svg": "^16.1.17",
+    "react-zoom-pan-pinch": "^3.3.0",
+    "styled-components": "^5.3.11"
+  },
+  "readme": "ERROR: No README data found!"
+}