flow-lib-creomnia 1.0.2 → 1.0.4

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/ConnectionWithButton/index.js

@@ -23,7 +23,7 @@ exports.nodeHeightByType = {
     [enums_1.NodeTypeEnum.HubNode]: config_1.Config.HUB_NODE_HEIGHT,
     [enums_1.NodeTypeEnum.ParallelNode]: 0,
 };
-const ConnectionWithButton = ({ parentId, menuTabs, startPoint, endPoint, addNewNodeCallback, node, connectionIndex, curveType, isProcessed, childNodeId }) => {
+const ConnectionWithButton = ({ parentId, menuTabs, startPoint, endPoint, addNewNodeCallback, node, connectionIndex, curveType, isProcessed, childNodeId, emptyMenuItemsComponent, searchPlaceholder }) => {
     const popperRef = (0, react_1.useRef)();
     const [anchorEl, setAnchorEl] = (0, react_1.useState)(false);
     const [styles, setStyles] = (0, react_1.useState)({});
@@ -55,7 +55,8 @@ const ConnectionWithButton = ({ parentId, menuTabs, startPoint, endPoint, addNew
         const left = rect?.left || 0;
         const top = rect?.top || 0;
         const style = {
-            transform: `translate(${left - 292}px, ${top - 128}px)`,
+            transform: `translate(${left - 400}px, ${top - 228}px)`,
+            overflow: 'visible',
         };
         setStyles(style);
         setAnchorEl(true);
@@ -78,6 +79,6 @@ const ConnectionWithButton = ({ parentId, menuTabs, startPoint, endPoint, addNew
         onClick: handleClick,
         innerRef: popperRef
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(AddButton_1.AddButton, { ...buttonProps }), (0, jsx_runtime_1.jsx)(AnimatedConnectionLine, { style: props }), (0, jsx_runtime_1.jsx)(material_1.ClickAwayListener, { onClickAway: () => isOpen && handleClose(), mouseEvent: "onMouseDown", touchEvent: "onTouchStart", children: (0, jsx_runtime_1.jsx)(styled_1.StyledPopper, { placement: 'left', open: isOpen, sx: styles, modifiers: [{ name: 'arrow', enabled: true }], children: (0, jsx_runtime_1.jsx)(NodesMenu_1.default, { addNewNodeCallback: addNewNodeCallback, data: { parentId, connectionIndex }, menuTabs: menuTabs, onCloseMenu: handleClose }) }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(AddButton_1.AddButton, { ...buttonProps }), (0, jsx_runtime_1.jsx)(AnimatedConnectionLine, { style: props }), (0, jsx_runtime_1.jsx)(material_1.ClickAwayListener, { onClickAway: () => isOpen && handleClose(), mouseEvent: "onMouseDown", touchEvent: "onTouchStart", children: (0, jsx_runtime_1.jsx)(styled_1.StyledPopper, { placement: 'left', open: isOpen, sx: styles, modifiers: [{ name: 'arrow', enabled: true }], children: (0, jsx_runtime_1.jsx)(NodesMenu_1.default, { addNewNodeCallback: addNewNodeCallback, data: { parentId, connectionIndex }, menuTabs: menuTabs, onCloseMenu: handleClose, emptyMenuItemsComponent: emptyMenuItemsComponent, searchPlaceholder: searchPlaceholder }) }) })] }));
 };
 exports.default = (0, react_1.memo)(ConnectionWithButton);

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { MenuTabType, PointType } from '../../common/types';
 import { AddNewNodeCallbackType } from '../../flow/types';
 import { BaseDrawableNodeType, NodeType } from '../../node/types';
@@ -17,6 +18,8 @@ export type ConnectionPropsType = {
     node: NodeType;
     curveType?: ConnectionCurveEnum;
     isProcessed: boolean;
+    emptyMenuItemsComponent?: JSX.Element;
+    searchPlaceholder?: string;
 };
 export type ConnectionDrawerType = {
     type: string;

package/lib/modules/flow/components/FlowSandbox/index.d.ts

@@ -13,6 +13,8 @@ type PropsType = {
     failedNodeId?: string;
     failedNodeColor?: string;
     onRedirect?: (flowId: string) => void;
+    emptyMenuItemsComponent?: JSX.Element;
+    searchPlaceholder?: string;
 };
 declare const FlowSandbox: FC<PropsType>;
 export default FlowSandbox;

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

@@ -13,7 +13,7 @@ const Space_1 = __importDefault(require("../Space"));
 const react_zoom_pan_pinch_1 = require("react-zoom-pan-pinch");
 const components_1 = require("../../../common/components");
 const FlowPosition_1 = require("../../context/FlowPosition");
-const FlowSandbox = ({ nodeDrawers, connectionDrawers, containerRef, permissions, processedNodeIds, failedNodeId, failedNodeColor, onRedirect, onUpdateNodePosition }) => {
+const FlowSandbox = ({ nodeDrawers, connectionDrawers, containerRef, permissions, processedNodeIds, failedNodeId, failedNodeColor, onRedirect, onUpdateNodePosition, emptyMenuItemsComponent, searchPlaceholder }) => {
     const sandboxWidth = containerRef?.current?.offsetWidth || 0;
     const [maxWidth, setMaxWidth] = (0, react_1.useState)(sandboxWidth);
     const [minWidth, setMinWidth] = (0, react_1.useState)(0);
@@ -29,7 +29,7 @@ const FlowSandbox = ({ nodeDrawers, connectionDrawers, containerRef, permissions
         const Connection = permissions.canCreate
             ? connection_1.moduleConnection.connections.connectionWithButton
             : connection_1.moduleConnection.connections.baseConnection;
-        return ((0, jsx_runtime_1.jsx)(Connection, { ...connectionDrawer.connectionData, startPoint: {
+        return ((0, jsx_runtime_1.jsx)(Connection, { ...connectionDrawer.connectionData, emptyMenuItemsComponent: emptyMenuItemsComponent, searchPlaceholder: searchPlaceholder, startPoint: {
                 x: connectionDrawer.connectionData.startPoint.x - minWidth,
                 y: connectionDrawer.connectionData.startPoint.y,
             }, endPoint: {

package/lib/modules/flow/components/NodesFlow/index.js

@@ -16,7 +16,7 @@ const FlowPosition_1 = require("../../context/FlowPosition");
 const react_dnd_html5_backend_1 = require("react-dnd-html5-backend");
 const react_dnd_1 = require("react-dnd");
 const colors_1 = require("../../../../config/colors");
-const NodesFlow = ({ theme, nodes, menuTabs, addNewNodeCallback, permissions, drawerProps, processedNodeIds, failedNodeId, failedNodeColor, onRedirect, onUpdateNodePosition }) => {
+const NodesFlow = ({ theme, nodes, menuTabs, addNewNodeCallback, permissions, drawerProps, processedNodeIds, failedNodeId, failedNodeColor, onRedirect, onUpdateNodePosition, emptyMenuItemsComponent, searchPlaceholder, }) => {
     const nodeDrawers = (0, react_1.useMemo)(() => {
         const { startNodeList, nodeListWithEndNode } = nodeServices_1.nodeServices.createListOfStartNodesAndEndNodes(nodes);
         const nodeListWithExpandCoefficients = expandCoefficientServices_1.expandCoefficientServices.calculateNodeExpandCoefficient(nodeListWithEndNode);
@@ -31,6 +31,6 @@ const NodesFlow = ({ theme, nodes, menuTabs, addNewNodeCallback, permissions, dr
         addNewNodeCallback,
     }), [nodeDrawers, menuTabs, addNewNodeCallback, processedNodeIds]);
     const containerRef = (0, react_1.useRef)(null);
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: permissions.canRead && ((0, jsx_runtime_1.jsx)(ThemeContext_1.ThemeContextProvider, { themContextValue: theme, children: (0, jsx_runtime_1.jsx)(react_dnd_1.DndProvider, { backend: react_dnd_html5_backend_1.HTML5Backend, children: (0, jsx_runtime_1.jsx)(material_1.Box, { ref: containerRef, style: { height: "100%", width: "100%", background: theme?.palette.background.default || colors_1.Colors.DIRTY_WHITE }, children: (0, jsx_runtime_1.jsx)(SettingsContext_1.NodeSettingsProvider, { permissions: permissions, drawerProps: drawerProps, children: (0, jsx_runtime_1.jsx)(FlowPosition_1.FlowPositionProvider, { children: (0, jsx_runtime_1.jsx)(FlowSandbox_1.default, { permissions: permissions, connectionDrawers: connectionDrawers, nodeDrawers: nodeDrawers, containerRef: containerRef, processedNodeIds: processedNodeIds, failedNodeId: failedNodeId, failedNodeColor: failedNodeColor, onRedirect: onRedirect, onUpdateNodePosition: onUpdateNodePosition }) }) }) }) }) })) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: permissions.canRead && ((0, jsx_runtime_1.jsx)(ThemeContext_1.ThemeContextProvider, { themContextValue: theme, children: (0, jsx_runtime_1.jsx)(react_dnd_1.DndProvider, { backend: react_dnd_html5_backend_1.HTML5Backend, children: (0, jsx_runtime_1.jsx)(material_1.Box, { ref: containerRef, style: { height: "100%", width: "100%", background: theme?.palette.background.default || colors_1.Colors.DIRTY_WHITE }, children: (0, jsx_runtime_1.jsx)(SettingsContext_1.NodeSettingsProvider, { permissions: permissions, drawerProps: drawerProps, children: (0, jsx_runtime_1.jsx)(FlowPosition_1.FlowPositionProvider, { children: (0, jsx_runtime_1.jsx)(FlowSandbox_1.default, { permissions: permissions, connectionDrawers: connectionDrawers, nodeDrawers: nodeDrawers, containerRef: containerRef, processedNodeIds: processedNodeIds, failedNodeId: failedNodeId, failedNodeColor: failedNodeColor, onRedirect: onRedirect, onUpdateNodePosition: onUpdateNodePosition, emptyMenuItemsComponent: emptyMenuItemsComponent, searchPlaceholder: searchPlaceholder }) }) }) }) }) })) }));
 };
 exports.default = NodesFlow;

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

@@ -1,9 +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[];
@@ -17,6 +20,8 @@ export type NodeFlowPropsType = {
     onRedirect?: (flowId: string) => void;
     onUpdateNodePosition: UpdateNodePosition;
     theme: Theme;
+    emptyMenuItemsComponent?: JSX.Element;
+    searchPlaceholder?: string;
 };
 export type IDrawerProps = {
     isOpen: boolean;

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/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/NodesMenu/index.d.ts

@@ -9,6 +9,8 @@ type PropsType = {
         connectionIndex: number;
     };
     addNewNodeCallback?: AddNewNodeCallbackType;
+    emptyMenuItemsComponent?: JSX.Element;
+    searchPlaceholder?: string;
 };
 declare const NodesMenu: FC<PropsType>;
 export default NodesMenu;

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

@@ -7,22 +7,33 @@ 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, }) => {
+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 handleChange = (_, newValue) => {
         setValue(newValue);
+        setSearchQuery("");
+    };
+    const handleSearchChange = (event) => {
+        setSearchQuery(event.target.value);
     };
     const tab = (0, react_1.useMemo)(() => menuTabs.reduce((tabContentByTabName, tab) => ({
         ...tabContentByTabName,
         [tab.name]: tab.menuItems,
     }), {}), [menuTabs]);
-    const onMenuItemClick = (nodeId) => {
+    const onMenuItemClick = (nodeId, nodeType) => {
         addNewNodeCallback?.({
             ...data,
             menuItemId: nodeId,
+            nodeType,
         });
         onCloseMenu();
     };
-    return ((0, jsx_runtime_1.jsxs)(styled_1.MenuContainer, { 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.ContentContainer, { children: tab[value].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))) })] }));
+    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, 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.d.ts

@@ -125,3 +125,6 @@ export declare const Close: import("@emotion/styled").StyledComponent<{
 }, "color" | "fontSize" | "shapeRendering" | "children" | "viewBox" | "sx" | keyof import("@mui/material/OverridableComponent").CommonProps | "htmlColor" | "inheritViewBox" | "titleAccess"> & import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, {}, {}>;
 export declare const MenuItem: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const IconWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledTextField: import("@emotion/styled").StyledComponent<{
+    variant?: import("@mui/material").TextFieldVariants | undefined;
+} & Omit<import("@mui/material").StandardTextFieldProps | import("@mui/material").FilledTextFieldProps | import("@mui/material").OutlinedTextFieldProps, "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, {}, {}>;

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

@@ -3,14 +3,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.IconWrapper = exports.MenuItem = exports.Close = exports.ContentContainer = exports.StyledTab = exports.StyledTabs = exports.TabContainer = exports.MenuContainer = void 0;
+exports.StyledTextField = exports.IconWrapper = exports.MenuItem = exports.Close = exports.ContentContainer = exports.StyledTab = exports.StyledTabs = exports.TabContainer = exports.MenuContainer = void 0;
 const system_1 = require("@mui/system");
 const material_1 = require("@mui/material");
 const Close_1 = __importDefault(require("@mui/icons-material/Close"));
 exports.MenuContainer = (0, system_1.styled)(material_1.Box)(({ theme }) => ({
-    width: "292px",
-    height: "306px",
-    borderRadius: "16px",
+    width: "400px",
+    height: "515px",
+    borderRadius: "4px",
     background: theme.palette.background.paper,
     color: theme.palette.text.primary,
     paddingBottom: "6px",
@@ -32,7 +32,7 @@ exports.StyledTab = (0, system_1.styled)(material_1.Tab) `
   min-height: 40px;
 `;
 exports.ContentContainer = (0, system_1.styled)("div") `
-  height: 100%;
+  height: calc(100% - 120px);
   overflow-y: scroll;
 `;
 exports.Close = (0, system_1.styled)(Close_1.default) `
@@ -67,3 +67,14 @@ exports.IconWrapper = (0, system_1.styled)("div") `
   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;
+  }
+`;

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/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,6 +1,6 @@
 {
   "name": "flow-lib-creomnia",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",