@flowuent-org/diagramming-core 1.0.8 → 1.1.1

package/packages/diagrams/src/lib/components/automation/AutomationSheetsNode.tsx

@@ -18,13 +18,16 @@ import {
     Error as ErrorIcon,
     ArrowForwardIos as ArrowForwardIcon,
     WhatsApp as WhatsAppIcon,
-    Phone as PhoneIcon
+    Phone as PhoneIcon,
+    Lightbulb as LightbulbIcon
 } from '@mui/icons-material';
 import { RiCloseLine } from 'react-icons/ri';
 import ReactJson from 'react-json-view';
 import { getIconByName } from '../../utils/iconMapper';
 import { useTranslation } from 'react-i18next';
 import { useDiagram } from '../../contexts/DiagramProvider';
+import { AISuggestion } from './AISuggestionsModal';
+import { AISuggestionsPanel } from './AISuggestionsPanel';
 
 interface AutomationSheetsNodeProps {
     data: {
@@ -83,7 +86,10 @@ interface AutomationSheetsNodeProps {
                 };
             };
         };
-        formData?: any;
+        formData?: {
+            aiSuggestionsCount?: number; // Number of AI suggestions available
+            [key: string]: any;
+        };
         // Optional per-output-method statuses supplied by engine
         outputStatuses?: {
             googleSheets?: 'not-set' | 'configured' | 'running' | 'connected' | 'failed';
@@ -97,6 +103,7 @@ interface AutomationSheetsNodeProps {
 export const AutomationSheetsNode: React.FC<AutomationSheetsNodeProps> = ({ data, selected }) => {
     const { t } = useTranslation();
     const [isJsonOpen, setIsJsonOpen] = useState(false);
+    const [showSuggestions, setShowSuggestions] = useState(false);
     const rootRef = useRef<any>(null);
     const portalRef = useRef<HTMLDivElement | null>(null);
     const nodeRef = useRef<HTMLDivElement | null>(null);
@@ -694,23 +701,30 @@ Data: ${JSON.stringify(data, null, 2)}
 
     return (
         <Box
-            ref={nodeRef}
             sx={{
-                width: '380px',
-                minHeight: '280px',
-                backgroundColor: '#181C25', // Darker background like in image
-                border: selected ? '2px solid #3b82f6' : '1px solid #1e293b',
-                borderRadius: '12px',
-                padding: '0',
-                color: '#ffffff',
                 position: 'relative',
-                boxShadow: selected ? '0 0 0 2px rgba(59, 130, 246, 0.5)' : '0 4px 8px rgba(0, 0, 0, 0.3)',
-                transition: 'all 0.2s ease',
-                cursor: 'pointer',
-                overflow: 'hidden',
+                width: '380px',
+                overflow: 'visible',
             }}
-            onClick={handleJsonClick}
         >
+            <Box
+                ref={nodeRef}
+                sx={{
+                    width: '380px',
+                    minHeight: '280px',
+                    backgroundColor: '#181C25', // Darker background like in image
+                    border: selected ? '2px solid #3b82f6' : '1px solid #1e293b',
+                    borderRadius: '12px',
+                    padding: '0',
+                    color: '#ffffff',
+                    position: 'relative',
+                    boxShadow: selected ? '0 0 0 2px rgba(59, 130, 246, 0.5)' : '0 4px 8px rgba(0, 0, 0, 0.3)',
+                    transition: 'all 0.2s ease',
+                    cursor: 'pointer',
+                    overflow: 'hidden',
+                }}
+                onClick={handleJsonClick}
+            >
             {/* Header */}
             <Box sx={{
                 display: 'flex',
@@ -825,6 +839,99 @@ Data: ${JSON.stringify(data, null, 2)}
                     opacity: 0, // Hidden but functional
                 }}
             />
+            </Box>
+
+            {/* AI Suggestions Button - Positioned below the node box */}
+            {data.formData?.aiSuggestionsCount !== undefined && data.formData.aiSuggestionsCount > 0 && (
+                <Box
+                    sx={{
+                        position: 'absolute',
+                        top: '100%',
+                        left: '50%',
+                        transform: 'translateX(-50%)',
+                        marginTop: '12px',
+                        zIndex: 10,
+                        whiteSpace: 'nowrap',
+                    }}
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        // Toggle AI Suggestions panel
+                        setShowSuggestions(!showSuggestions);
+                    }}
+                >
+                    <Button
+                        variant="contained"
+                        startIcon={<LightbulbIcon sx={{ fontSize: '12px' }} />}
+                        sx={{
+                            backgroundColor: '#2563EB',
+                            color: '#ffffff',
+                            borderRadius: '20px',
+                            textTransform: 'none',
+                            fontSize: '10px',
+                            fontWeight: 400,
+                            padding: '8px 16px',
+                            whiteSpace: 'nowrap',
+                            display: 'inline-flex',
+                            alignItems: 'center',
+                            boxShadow: '0 2px 8px rgba(0, 0, 0, 0.3)',
+                            '&:hover': {
+                                backgroundColor: '#2563eb',
+                            },
+                            '& .MuiButton-startIcon': {
+                                marginRight: '8px',
+                            }
+                        }}
+                    >
+                        AI Suggestions
+                        <Box
+                            component="span"
+                            sx={{
+                                marginLeft: '8px',
+                                backgroundColor: '#FFFFFF26',
+                                color: '#ffffff',
+                                fontSize: '10px',
+                                fontWeight: 400,
+                                minWidth: '18px',
+                                height: '18px',
+                                borderRadius: '9px',
+                                display: 'inline-flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                padding: '0 6px',
+                                border: '1px solid rgba(255, 255, 255, 0.2)',
+                            }}
+                        >
+                            {data.formData.aiSuggestionsCount}
+                        </Box>
+                    </Button>
+                </Box>
+            )}
+
+            {/* AI Suggestions Panel - Rendered on canvas below the button */}
+            {showSuggestions && data.formData?.aiSuggestionsCount !== undefined && data.formData.aiSuggestionsCount > 0 && nodeId && (
+                <AISuggestionsPanel
+                    suggestions={data.formData?.aiSuggestions || [
+                        {
+                            id: '1',
+                            title: 'Add Citation Extraction',
+                            description: 'Automatically extract and format citations from article content.',
+                            tags: ['classification', 'enhancement'],
+                        },
+                        {
+                            id: '2',
+                            title: 'Generate Bullet Summary',
+                            description: 'Create a concise bullet-point summary of the article\'s main points.',
+                            tags: ['classification', 'enhancement'],
+                        },
+                    ]}
+                    parentNodeId={nodeId}
+                    onSuggestionClick={(suggestion) => {
+                        console.log('Suggestion clicked:', suggestion);
+                        // Handle suggestion selection here
+                    }}
+                    onClose={() => setShowSuggestions(false)}
+                />
+            )}
         </Box>
     );
 };

package/packages/diagrams/src/lib/components/automation/index.ts

@@ -6,3 +6,6 @@ export { AutomationEndNode } from './AutomationEndNode';
 export { AutomationNoteNode } from './AutomationNoteNode';
 export { AutomationExecutionPanel } from './AutomationExecutionPanel';
 export { AutomationAISuggestionNode } from './AutomationAISuggestionNode';
+export { AISuggestionsModal, showAISuggestionsModal } from './AISuggestionsModal';
+export { AISuggestionsPanel } from './AISuggestionsPanel';
+export type { AISuggestion } from './AISuggestionsModal';

package/packages/diagrams/src/lib/contexts/onWorkflowNodeDelete.ts

@@ -1,65 +1,65 @@
-import { DiagramState } from './diagramStoreTypes';
-import { ICardNode } from '@flowuent-labs/diagrams';
-
-// Helper function to handle node deletion and edge updates
-export const onWorkflowNodeDelete = (
-  node: ICardNode, // The node to be deleted
-  draft: DiagramState, // The current diagram state (edges and nodes)
-) => {
-  const { edges, nodes: allNodes } = draft;
-
-  if (node.data.branchRoot) {
-    // Find all nodes with the same branchRoot value
-    const nodesToDelete = allNodes.filter(
-      (n) => n.data.branchRoot === node.data.branchRoot,
-    );
-
-    // Remove the edges connected to these nodes
-    const nodeIdsToDelete = new Set(nodesToDelete.map((n) => n.id));
-    console.log('nodeIdsToDelete', nodeIdsToDelete);
-    // Get the previous node of the root and the next node of the final node
-    const branchRootNode = allNodes.find((n) => n.id === node.data.branchRoot);
-    const finalNode = allNodes.find((n) => n.id === node.data.finalNodeId);
-
-    if (branchRootNode && finalNode) {
-      const previousEdge = edges.find(
-        (edge) => edge.target === branchRootNode.id,
-      );
-      const nextEdge = edges.find((edge) => edge.source === finalNode.id);
-
-      // Find the next node (if exists)
-      const nextNode =
-        nextEdge && allNodes.find((n) => n.id === nextEdge.target);
-      // If there's a previous edge and a next node, update the previous edge's target to the next node's id
-      if (previousEdge && nextNode) {
-        previousEdge.target = nextNode.id;
-      }
-    }
-
-    // Remove the nodes that are part of the branch
-    draft.nodes = allNodes.filter((n) => !nodeIdsToDelete.has(n.id));
-  } else {
-    // Find the previous edge and next edge
-    const previousEdge = edges.find((edge) => edge.target === node.id);
-    const nextEdge = edges.find((edge) => edge.source === node.id);
-
-    // Find the next node (if exists)
-    const nextNode = nextEdge && allNodes.find((n) => n.id === nextEdge.target);
-
-    // If there's a previous edge and a next node, update the previous edge's target to the next node's id
-    if (previousEdge && nextNode) {
-      previousEdge.target = nextNode.id;
-    }
-
-    // If there's a next edge, remove it
-    if (nextEdge) {
-      const nextEdgeIndex = edges.findIndex((edge) => edge.id === nextEdge.id);
-      if (nextEdgeIndex !== -1) {
-        edges.splice(nextEdgeIndex, 1); // Remove the next edge from the edges array
-      }
-    }
-
-    // Remove the node from the nodes array
-    draft.nodes = allNodes.filter((n) => n.id !== node.id);
-  }
-};
+import { DiagramState } from './diagramStoreTypes';
+import { ICardNode } from '@flowuent-labs/diagrams';
+
+// Helper function to handle node deletion and edge updates
+export const onWorkflowNodeDelete = (
+  node: ICardNode, // The node to be deleted
+  draft: DiagramState, // The current diagram state (edges and nodes)
+) => {
+  const { edges, nodes: allNodes } = draft;
+
+  if (node.data.branchRoot) {
+    // Find all nodes with the same branchRoot value
+    const nodesToDelete = allNodes.filter(
+      (n) => n.data.branchRoot === node.data.branchRoot,
+    );
+
+    // Remove the edges connected to these nodes
+    const nodeIdsToDelete = new Set(nodesToDelete.map((n) => n.id));
+    console.log('nodeIdsToDelete', nodeIdsToDelete);
+    // Get the previous node of the root and the next node of the final node
+    const branchRootNode = allNodes.find((n) => n.id === node.data.branchRoot);
+    const finalNode = allNodes.find((n) => n.id === node.data.finalNodeId);
+
+    if (branchRootNode && finalNode) {
+      const previousEdge = edges.find(
+        (edge) => edge.target === branchRootNode.id,
+      );
+      const nextEdge = edges.find((edge) => edge.source === finalNode.id);
+
+      // Find the next node (if exists)
+      const nextNode =
+        nextEdge && allNodes.find((n) => n.id === nextEdge.target);
+      // If there's a previous edge and a next node, update the previous edge's target to the next node's id
+      if (previousEdge && nextNode) {
+        previousEdge.target = nextNode.id;
+      }
+    }
+
+    // Remove the nodes that are part of the branch
+    draft.nodes = allNodes.filter((n) => !nodeIdsToDelete.has(n.id));
+  } else {
+    // Find the previous edge and next edge
+    const previousEdge = edges.find((edge) => edge.target === node.id);
+    const nextEdge = edges.find((edge) => edge.source === node.id);
+
+    // Find the next node (if exists)
+    const nextNode = nextEdge && allNodes.find((n) => n.id === nextEdge.target);
+
+    // If there's a previous edge and a next node, update the previous edge's target to the next node's id
+    if (previousEdge && nextNode) {
+      previousEdge.target = nextNode.id;
+    }
+
+    // If there's a next edge, remove it
+    if (nextEdge) {
+      const nextEdgeIndex = edges.findIndex((edge) => edge.id === nextEdge.id);
+      if (nextEdgeIndex !== -1) {
+        edges.splice(nextEdgeIndex, 1); // Remove the next edge from the edges array
+      }
+    }
+
+    // Remove the node from the nodes array
+    draft.nodes = allNodes.filter((n) => n.id !== node.id);
+  }
+};

package/packages/diagrams/src/lib/organisms/CustomEdge/useCreateBendPoint.tsx

@@ -1,121 +1,121 @@
-import { Edge } from '@xyflow/react';
-import {
-  closestPoint,
-  DiagramStore,
-  EdgeTypes,
-  HistoryEvent,
-  ICardNode,
-  useCustomReactFlow,
-  useDiagram,
-} from '@flowuent-labs/diagrams';
-import React, { useCallback } from 'react';
-import { v4 as uuidv4 } from 'uuid';
-import addToHistory from '../../utils/addToHistory';
-
-export const useCreateBendPoint = (
-  currentEdge: Edge,
-  sourceNode: ICardNode,
-  targetNode: ICardNode,
-  pathRef: React.RefObject<SVGPathElement>,
-) => {
-  const { setEdges, getEdge, screenToFlowPosition, addNodes } =
-    useCustomReactFlow();
-  const store = useDiagram<DiagramStore>();
-  const { diagramType, nodes, edges, setStore } = store;
-
-  return useCallback(
-    (evt: React.MouseEvent<SVGPathElement, MouseEvent>) => {
-      if (diagramType === 'workflow') {
-        return;
-      }
-      evt.preventDefault();
-      evt.stopPropagation();
-      if (!pathRef.current) return;
-
-      const position = screenToFlowPosition({
-        x: evt.clientX,
-        y: evt.clientY,
-      });
-      const cpoint = closestPoint(pathRef.current, [position.x, position.y]);
-      if (!currentEdge || !sourceNode || !targetNode)
-        throw new Error(
-          'Invalid Edge found with source, target or curr edge missing',
-        );
-
-      const nodesAndEdgesBefore = {
-        nodes: [...nodes],
-        edges: [...edges],
-      };
-      const nodeId = uuidv4();
-      const newBendPoint: ICardNode = {
-        id: nodeId,
-        position: { x: cpoint[0], y: cpoint[1] },
-        data: { nodeId: nodeId },
-        type: 'bendPoint',
-      };
-      const newEdge: Edge = {
-        id: uuidv4(),
-        source: newBendPoint.id,
-        target: currentEdge.target,
-        type:
-          currentEdge.type === EdgeTypes.Default ||
-            currentEdge.type === EdgeTypes.Bend2Target
-            ? EdgeTypes.Bend2Target
-            : EdgeTypes.Bend2Bend,
-      };
-      newEdge.markerEnd =
-        newEdge.type === EdgeTypes.Bend2Target
-          ? currentEdge.markerEnd
-          : undefined;
-      currentEdge.target = newBendPoint.id;
-      currentEdge.type =
-        currentEdge.type === EdgeTypes.Default ||
-          currentEdge.type === EdgeTypes.Source2Bend
-          ? EdgeTypes.Source2Bend
-          : EdgeTypes.Bend2Bend;
-      delete currentEdge.markerEnd;
-      currentEdge.markerStart =
-        currentEdge.type === EdgeTypes.Source2Bend
-          ? currentEdge.markerStart
-          : undefined;
-
-      const newEdges = [
-        ...edges.filter((e) => e.id !== currentEdge.id),
-        currentEdge,
-        newEdge,
-      ];
-      const newNodes = [...nodes, newBendPoint];
-      const nodesAndEdgesAfter = {
-        nodes: newNodes,
-        edges: newEdges,
-      };
-
-      const event: HistoryEvent = {
-        forward: {
-          t: 'complex-change',
-          type: 'complex',
-          nodesAndEdges: nodesAndEdgesAfter,
-        },
-        backward: {
-          t: 'complex-change',
-          type: 'complex',
-          nodesAndEdges: nodesAndEdgesBefore,
-        },
-        title: 'Bend point created in the middle of ' + currentEdge.id,
-      };
-      setStore({
-        ...addToHistory(store, [event]),
-        ...nodesAndEdgesAfter,
-      });
-    },
-    [
-      pathRef.current,
-      currentEdge.id,
-      getEdge,
-      setEdges,
-      addNodes,
-      sourceNode,
-      targetNode,
-    ],
-  );
-};
+import { Edge } from '@xyflow/react';
+import {
+  closestPoint,
+  DiagramStore,
+  EdgeTypes,
+  HistoryEvent,
+  ICardNode,
+  useCustomReactFlow,
+  useDiagram,
+} from '@flowuent-labs/diagrams';
+import React, { useCallback } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import addToHistory from '../../utils/addToHistory';
+
+export const useCreateBendPoint = (
+  currentEdge: Edge,
+  sourceNode: ICardNode,
+  targetNode: ICardNode,
+  pathRef: React.RefObject<SVGPathElement>,
+) => {
+  const { setEdges, getEdge, screenToFlowPosition, addNodes } =
+    useCustomReactFlow();
+  const store = useDiagram<DiagramStore>();
+  const { diagramType, nodes, edges, setStore } = store;
+
+  return useCallback(
+    (evt: React.MouseEvent<SVGPathElement, MouseEvent>) => {
+      if (diagramType === 'workflow') {
+        return;
+      }
+      evt.preventDefault();
+      evt.stopPropagation();
+      if (!pathRef.current) return;
+
+      const position = screenToFlowPosition({
+        x: evt.clientX,
+        y: evt.clientY,
+      });
+      const cpoint = closestPoint(pathRef.current, [position.x, position.y]);
+      if (!currentEdge || !sourceNode || !targetNode)
+        throw new Error(
+          'Invalid Edge found with source, target or curr edge missing',
+        );
+
+      const nodesAndEdgesBefore = {
+        nodes: [...nodes],
+        edges: [...edges],
+      };
+      const nodeId = uuidv4();
+      const newBendPoint: ICardNode = {
+        id: nodeId,
+        position: { x: cpoint[0], y: cpoint[1] },
+        data: { nodeId: nodeId },
+        type: 'bendPoint',
+      };
+      const newEdge: Edge = {
+        id: uuidv4(),
+        source: newBendPoint.id,
+        target: currentEdge.target,
+        type:
+          currentEdge.type === EdgeTypes.Default ||
+            currentEdge.type === EdgeTypes.Bend2Target
+            ? EdgeTypes.Bend2Target
+            : EdgeTypes.Bend2Bend,
+      };
+      newEdge.markerEnd =
+        newEdge.type === EdgeTypes.Bend2Target
+          ? currentEdge.markerEnd
+          : undefined;
+      currentEdge.target = newBendPoint.id;
+      currentEdge.type =
+        currentEdge.type === EdgeTypes.Default ||
+          currentEdge.type === EdgeTypes.Source2Bend
+          ? EdgeTypes.Source2Bend
+          : EdgeTypes.Bend2Bend;
+      delete currentEdge.markerEnd;
+      currentEdge.markerStart =
+        currentEdge.type === EdgeTypes.Source2Bend
+          ? currentEdge.markerStart
+          : undefined;
+
+      const newEdges = [
+        ...edges.filter((e) => e.id !== currentEdge.id),
+        currentEdge,
+        newEdge,
+      ];
+      const newNodes = [...nodes, newBendPoint];
+      const nodesAndEdgesAfter = {
+        nodes: newNodes,
+        edges: newEdges,
+      };
+
+      const event: HistoryEvent = {
+        forward: {
+          t: 'complex-change',
+          type: 'complex',
+          nodesAndEdges: nodesAndEdgesAfter,
+        },
+        backward: {
+          t: 'complex-change',
+          type: 'complex',
+          nodesAndEdges: nodesAndEdgesBefore,
+        },
+        title: 'Bend point created in the middle of ' + currentEdge.id,
+      };
+      setStore({
+        ...addToHistory(store, [event]),
+        ...nodesAndEdgesAfter,
+      });
+    },
+    [
+      pathRef.current,
+      currentEdge.id,
+      getEdge,
+      setEdges,
+      addNodes,
+      sourceNode,
+      targetNode,
+    ],
+  );
+};

package/packages/diagrams/src/lib/organisms/WorkFlowNode/NodeActionButtons.tsx

@@ -1,45 +1,45 @@
-import React from 'react';
-import { Button } from '@mui/material';
-import { WorkflowNodeActionButtons } from '../../molecules/WorkflowNodeActionButtons';
-import { ICardNode } from '../../types/card-node';
-import { useNodeType } from '@flowuent-labs/diagrams';
-
-interface NodeActionButtonsProps {
-  addButtonVisible: boolean;
-  addNewCaseNode: () => void;
-  nextNodes: ICardNode[];
-}
-
-const NodeActionButtons = React.memo(
-  ({ addButtonVisible, addNewCaseNode, nextNodes }: NodeActionButtonsProps) => {
-    const type = useNodeType();
-
-    return (
-      <>
-        {addButtonVisible && (
-          <WorkflowNodeActionButtons
-            direction={'bottom'}
-            variant={'addParallelCol'}
-          />
-        )}
-
-        {type === 'switch' && (
-          <Button onClick={addNewCaseNode}>
-            Add new case
-          </Button>
-        )}
-
-        {nextNodes &&
-          (nextNodes.length < 2 || type === 'emptyNode' ? (
-            <WorkflowNodeActionButtons
-              addInMiddle={nextNodes.length === 1}
-              direction={'bottom'}
-              isReplacing={type === 'emptyNode'}
-            />
-          ) : null)}
-      </>
-    );
-  },
-);
-
-export default NodeActionButtons;
+import React from 'react';
+import { Button } from '@mui/material';
+import { WorkflowNodeActionButtons } from '../../molecules/WorkflowNodeActionButtons';
+import { ICardNode } from '../../types/card-node';
+import { useNodeType } from '@flowuent-labs/diagrams';
+
+interface NodeActionButtonsProps {
+  addButtonVisible: boolean;
+  addNewCaseNode: () => void;
+  nextNodes: ICardNode[];
+}
+
+const NodeActionButtons = React.memo(
+  ({ addButtonVisible, addNewCaseNode, nextNodes }: NodeActionButtonsProps) => {
+    const type = useNodeType();
+
+    return (
+      <>
+        {addButtonVisible && (
+          <WorkflowNodeActionButtons
+            direction={'bottom'}
+            variant={'addParallelCol'}
+          />
+        )}
+
+        {type === 'switch' && (
+          <Button onClick={addNewCaseNode}>
+            Add new case
+          </Button>
+        )}
+
+        {nextNodes &&
+          (nextNodes.length < 2 || type === 'emptyNode' ? (
+            <WorkflowNodeActionButtons
+              addInMiddle={nextNodes.length === 1}
+              direction={'bottom'}
+              isReplacing={type === 'emptyNode'}
+            />
+          ) : null)}
+      </>
+    );
+  },
+);
+
+export default NodeActionButtons;