flow-lib-creomnia 1.0.15 → 1.0.16-dev.2

package/lib/modules/common/components/HorizontalDrawer/index.js

@@ -26,22 +26,37 @@ const HorizontalDrawer = ({ Content, HeaderContent, open, onClose }) => {
             return "40%";
         return "35%";
     };
-    const handleDrag = (event) => {
-        const maxWidthPercent = 90;
-        const minWidthPercent = 30;
-        const newWidthPercent = ((window.innerWidth - event.clientX) * 100) / window.innerWidth;
-        if (newWidthPercent < minWidthPercent || newWidthPercent > maxWidthPercent) {
-            return;
-        }
-        setDrawerWidth(`${newWidthPercent}%`);
-    };
     const DraggerElement = () => {
         return ((0, jsx_runtime_1.jsx)(material_1.Box, { onMouseDown: (e) => {
                 e.preventDefault();
-                window.addEventListener("mousemove", handleDrag);
-                window.addEventListener("mouseup", () => {
-                    window.removeEventListener("mousemove", handleDrag);
-                });
+                // Capture the drawer paper + its positioned host (canvas
+                // Box) at drag start. We can't rely on `event.target` during
+                // mousemove because the cursor is over the canvas, not the
+                // drawer; closing over `host` here keeps the math correct
+                // both in the main editor (host = NodesFlow Box ≈ viewport)
+                // and inside a modal (host = the same canvas Box, just
+                // rendered inside a smaller window).
+                const dragger = e.currentTarget;
+                const drawerEl = dragger.closest(".MuiDrawer-paper");
+                const host = drawerEl?.parentElement;
+                const onMove = (ev) => {
+                    const rect = host?.getBoundingClientRect();
+                    const hostRight = rect?.right ?? window.innerWidth;
+                    const hostWidth = rect?.width ?? window.innerWidth;
+                    const maxWidthPercent = 90;
+                    const minWidthPercent = 30;
+                    const newWidthPercent = ((hostRight - ev.clientX) * 100) / hostWidth;
+                    if (newWidthPercent < minWidthPercent || newWidthPercent > maxWidthPercent) {
+                        return;
+                    }
+                    setDrawerWidth(`${newWidthPercent}%`);
+                };
+                const onUp = () => {
+                    window.removeEventListener("mousemove", onMove);
+                    window.removeEventListener("mouseup", onUp);
+                };
+                window.addEventListener("mousemove", onMove);
+                window.addEventListener("mouseup", onUp);
             }, sx: {
                 display: "flex",
                 alignItems: "center",
@@ -55,10 +70,18 @@ const HorizontalDrawer = ({ Content, HeaderContent, open, onClose }) => {
     };
     return ((0, jsx_runtime_1.jsx)(material_1.Drawer, { variant: "persistent", open: open, anchor: "right", sx: {
             flexShrink: 0,
+            // Anchor paper to its positioned ancestor (the NodesFlow Box,
+            // which sets `position: relative`) rather than the viewport.
+            // The top offset is read from `--drawer-top-offset` so the
+            // main flow editor can leave room for the app header (66px,
+            // default), while a host like `ToolFlowConfigModal` can set
+            // it to `0` and have the drawer fill the entire canvas.
             "& .MuiDrawer-paper": {
+                position: "absolute",
                 width: drawerWidth || getDefaultWidth(),
-                height: "calc(100% - 66px)",
-                marginTop: "66px",
+                height: "calc(100% - var(--drawer-top-offset, 66px))",
+                marginTop: "var(--drawer-top-offset, 66px)",
+                right: 0,
                 borderTopLeftRadius: "16px",
                 boxShadow: "0px 9px 46px 0px #00000014",
                 border: "none",

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

@@ -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, emptyMenuItemsComponent: emptyMenuItemsComponent, searchPlaceholder: searchPlaceholder }) }) }) }) }) })) }));
+    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: { position: "relative", 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/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?.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" }) })] }) })] }));
+    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)(styled_1.ContentRow, { children: [(0, jsx_runtime_1.jsx)(styled_1.ArrowImg, { src: LeftArrowIcon_svg_1.default, alt: "leftArrow" }), (0, jsx_runtime_1.jsx)(styled_1.NameGreed, { children: (0, jsx_runtime_1.jsx)(styled_1.NameText, { children: nodeData?.name || nodeData?.nodeType }) }), (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.d.ts

@@ -1,20 +1,7 @@
 import { FC } from "react";
 export declare const Container: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ContentRow: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const createChoiceNodeImg: () => FC<any>;
-export declare const NameGreed: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
-    children?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").GridClasses> | undefined;
-    columns?: import("@mui/system").ResponsiveStyleValue<number> | undefined;
-    columnSpacing?: import("@mui/system").ResponsiveStyleValue<import("@mui/material").GridSpacing> | undefined;
-    container?: boolean | undefined;
-    direction?: import("@mui/system").ResponsiveStyleValue<import("@mui/material").GridDirection> | undefined;
-    item?: boolean | undefined;
-    rowSpacing?: import("@mui/system").ResponsiveStyleValue<import("@mui/material").GridSpacing> | undefined;
-    spacing?: import("@mui/system").ResponsiveStyleValue<import("@mui/material").GridSpacing> | undefined;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    wrap?: import("@mui/material").GridWrap | undefined;
-    zeroMinWidth?: boolean | undefined;
-} & import("@mui/material").RegularBreakpoints & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "item" | "columns" | "container" | "direction" | "children" | "wrap" | "spacing" | ("flex" | "height" | "width" | "left" | "top" | "alignContent" | "alignItems" | "alignSelf" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "bottom" | "boxShadow" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gap" | "gridArea" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumn" | "gridRow" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "margin" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "overflow" | "padding" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "visibility" | "whiteSpace" | "zIndex" | "p" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "sx" | "columnSpacing" | "rowSpacing" | keyof import("@mui/material/OverridableComponent").CommonProps | "zeroMinWidth" | keyof import("@mui/material").RegularBreakpoints> & import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, {}, {}>;
+export declare const NameGreed: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const NameText: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const ArrowImg: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;

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

@@ -1,22 +1,26 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ArrowImg = exports.NameGreed = exports.createChoiceNodeImg = exports.Container = void 0;
+exports.ArrowImg = exports.NameText = exports.NameGreed = exports.createChoiceNodeImg = exports.ContentRow = exports.Container = void 0;
 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') `
-  width: 376px;
-  max-width: 376px;
+  min-width: 300px;
   height: ${config_1.Config.NODE_HEIGHT}px;
   cursor: pointer;
   display: flex;
-  flex-direction: row;
   align-items: center;
-  box-sizing: border-box;
-  padding: 0 32px;
+  position: relative;
   z-index: 1000;
 `;
+exports.ContentRow = (0, system_1.styled)('div') `
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: nowrap;
+`;
 const createChoiceNodeImg = () => (0, system_1.styled)(react_svg_1.ReactSVG) `
   top: -23px;
   position: absolute;
@@ -28,22 +32,26 @@ const createChoiceNodeImg = () => (0, system_1.styled)(react_svg_1.ReactSVG) `
   }
 `;
 exports.createChoiceNodeImg = createChoiceNodeImg;
-exports.NameGreed = (0, system_1.styled)(material_1.Grid) `
-  display: block;
+exports.NameGreed = (0, system_1.styled)('div') `
+  display: flex;
+  justify-content: center;
+  align-items: center;
   min-width: 0;
-  width: 100%;
-  padding: 0 12px;
-  line-height: ${config_1.Config.NODE_HEIGHT}px;
-  text-align: center;
+  flex: 1 1 auto;
+`;
+exports.NameText = (0, system_1.styled)('span') `
+  display: block;
+  max-width: 80%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   font-size: 16px;
   font-weight: 700;
+  line-height: 1.2;
+  text-align: left;
   color: ${props => `${props.theme.palette.text.primary}`};
   font-family: Inter, 'circular', serif;;
 `;
 exports.ArrowImg = (0, system_1.styled)('img') `
-  margin-top: 5px;
   flex-shrink: 0;
 `;

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

@@ -47,9 +47,9 @@ const NodeSettingsProvider = ({ children, permissions: { canUpdate, canDelete },
             setInternalNodeBase(null);
         }, config_1.Config.CLEAR_NODE_DELAY);
     };
-    const onSaveNode = async () => {
-        const result = await node?.settings?.footer?.onSave?.(node?.id);
-        if (result !== true)
+    const onSaveNode = () => {
+        const result = node?.settings?.footer?.onSave?.(node?.id);
+        if (result === false)
             return;
         handleClose();
     };

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

@@ -8,5 +8,6 @@ export declare enum NodeTypeEnum {
 }
 export declare enum NodeMenuItemType {
     EXTENSION = "extension",
-    AI_AGENT = "ai-agent"
+    AI_AGENT = "ai-agent",
+    S2S_AGENT = "s2s-agent"
 }

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

@@ -14,4 +14,5 @@ var NodeMenuItemType;
 (function (NodeMenuItemType) {
     NodeMenuItemType["EXTENSION"] = "extension";
     NodeMenuItemType["AI_AGENT"] = "ai-agent";
+    NodeMenuItemType["S2S_AGENT"] = "s2s-agent";
 })(NodeMenuItemType || (exports.NodeMenuItemType = NodeMenuItemType = {}));

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

@@ -5,7 +5,7 @@ export type NodesFooterType = {
     saveText?: string;
     cancelText?: string;
     deleteText?: string;
-    onSave?: (nodeId: string) => void | boolean | Promise<void | boolean>;
+    onSave?: (nodeId: string) => void | false;
     onCancel?: (nodeId: string) => void;
     onDelete?: (nodeId: string) => void;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flow-lib-creomnia",
-  "version": "1.0.15",
+  "version": "1.0.16-dev.2",
   "description": "",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",