@flowuent-org/diagramming-core 1.1.8 → 1.2.0

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

@@ -1,275 +1,420 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { Handle, Position, useNodeId } from '@xyflow/react';
-import { Box, Typography, Button } from '@mui/material';
-import { Description as DescriptionIcon, Lightbulb as LightbulbIcon } from '@mui/icons-material';
-import { getIconByName } from '../../utils/iconMapper';
-import { AISuggestion } from './AISuggestionsModal';
-import { AISuggestionsPanel } from './AISuggestionsPanel';
-
-interface AutomationNoteNodeProps {
-    data: {
-        label: string;
-        description: string;
-        backgroundColor?: string;
-        textColor?: string;
-        borderColor?: string;
-        iconName?: string;
-        noteType?: 'info' | 'warning' | 'note' | 'purpose';
-        formData?: {
-            aiSuggestionsCount?: number; // Number of AI suggestions available
-            [key: string]: any;
-        };
-    };
-    selected?: boolean;
-}
-
-export const AutomationNoteNode: React.FC<AutomationNoteNodeProps> = ({ data, selected }) => {
-    const nodeRef = useRef<HTMLDivElement | null>(null);
-    const [showSuggestions, setShowSuggestions] = useState(false);
-    const nodeId = useNodeId();
-
-    // Get the icon component based on the iconName, default to DescriptionIcon
-    const IconComponent = getIconByName(data.iconName || 'Description');
-
-    // Use consistent colors with other automation nodes
-    const colors = {
-        backgroundColor: '#181C25', // Default automation node background
-        textColor: '#ffffff',
-        borderColor: '#1e293b',
-        iconBg: '#3b82f6' // Default blue for icon background
-    };
-
-    // Debug logging for node dimensions
-    useEffect(() => {
-        if (nodeRef.current) {
-            const rect = nodeRef.current.getBoundingClientRect();
-            const computedStyle = window.getComputedStyle(nodeRef.current);
-            console.log('AutomationNoteNode Debug:', {
-                nodeId: data.label,
-                actualDimensions: {
-                    width: rect.width,
-                    height: rect.height,
-                    left: rect.left,
-                    top: rect.top
-                },
-                computedStyle: {
-                    width: computedStyle.width,
-                    height: computedStyle.height,
-                    padding: computedStyle.padding,
-                    border: computedStyle.border,
-                    boxShadow: computedStyle.boxShadow,
-                    margin: computedStyle.margin
-                },
-                handlePositions: {
-                    left: '-8px',
-                    right: '-8px'
-                }
-            });
-        }
-    }, [data.label]);
-
-    return (
-        <Box
-            sx={{
-                position: 'relative',
-                width: '336px',
-                overflow: 'visible',
-            }}
-        >
-            <Box
-                ref={nodeRef}
-                sx={{
-                    width: '336px',
-                    minHeight: '150px',
-                    backgroundColor: colors.backgroundColor,
-                    border: selected ? `2px solid ${colors.borderColor}` : `1px solid ${colors.borderColor}`,
-                    borderRadius: '12px',
-                    padding: '0',
-                    color: colors.textColor,
-                    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',
-                }}
-            >
-            {/* Header */}
-            <Box sx={{
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-                p: 2,
-                borderBottom: '1px solid rgba(255, 255, 255, 0.1)'
-            }}>
-                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
-                    <Box
-                        sx={{
-                            width: '32px',
-                            height: '32px',
-                            backgroundColor: colors.iconBg,
-                            borderRadius: '6px',
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                        }}
-                    >
-                        <IconComponent sx={{ color: 'white', fontSize: '18px' }} />
-                    </Box>
-                    <Typography variant="h6" sx={{ fontWeight: 600, fontSize: '16px' }}>
-                        {data.label}
-                    </Typography>
-                </Box>
-            </Box>
-
-            {/* Content */}
-            <Box sx={{ p: 2 }}>
-                <Typography variant="body2" sx={{
-                    color: colors.textColor,
-                    fontSize: '14px',
-                    lineHeight: 1.5,
-                    opacity: 0.9
-                }}>
-                    {data.description}
-                </Typography>
-            </Box>
-
-            {/* Note Type Indicator */}
-            <Box sx={{
-                position: 'absolute',
-                top: '8px',
-                right: '8px',
-                px: 1,
-                py: 0.5,
-                backgroundColor: 'rgba(255, 255, 255, 0.2)',
-                borderRadius: '4px',
-                fontSize: '10px',
-                fontWeight: 500,
-                textTransform: 'uppercase',
-                letterSpacing: '0.5px'
-            }}>
-                {data.noteType || 'note'}
-            </Box>
-
-            {/* Handles - Hidden but functional */}
-            <Handle
-                type="target"
-                position={Position.Left}
-                id="left"
-                style={{
-                    background: colors.borderColor,
-                    width: '12px',
-                    height: '12px',
-                    border: '2px solid white',
-                    left: '-8px',
-                    opacity: 0, // Hidden but functional
-                }}
-            />
-            <Handle
-                type="source"
-                position={Position.Right}
-                id="right"
-                style={{
-                    background: colors.borderColor,
-                    width: '12px',
-                    height: '12px',
-                    border: '2px solid white',
-                    right: '-8px',
-                    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>
-    );
-};
+import React, { useEffect, useRef, useState } from 'react';
+import { Handle, Position, useNodeId } from '@xyflow/react';
+import { Box, Typography, Button } from '@mui/material';
+import { Description as DescriptionIcon, Lightbulb as LightbulbIcon } from '@mui/icons-material';
+import { getIconByName } from '../../utils/iconMapper';
+import { AISuggestion } from './AISuggestionsModal';
+import { AISuggestionsPanel } from './AISuggestionsPanel';
+import { NodeActionButtons } from './NodeActionButtons';
+import { showNodeAIAssistantPopup } from './NodeAIAssistantPopup';
+import { useDiagram } from '../../contexts/DiagramProvider';
+
+interface AutomationNoteNodeProps {
+    data: {
+        label: string;
+        description: string;
+        backgroundColor?: string;
+        textColor?: string;
+        borderColor?: string;
+        iconName?: string;
+        noteType?: 'info' | 'warning' | 'note' | 'purpose';
+        formData?: {
+            aiSuggestionsCount?: number; // Number of AI suggestions available
+            [key: string]: any;
+        };
+    };
+    selected?: boolean;
+}
+
+export const AutomationNoteNode: React.FC<AutomationNoteNodeProps> = ({ data, selected }) => {
+    const nodeRef = useRef<HTMLDivElement | null>(null);
+    const [showSuggestions, setShowSuggestions] = useState(false);
+    const nodeId = useNodeId();
+    const onNodesChange = useDiagram((state) => state.onNodesChange);
+    const nodes = useDiagram((state) => state.nodes);
+    const setNodes = useDiagram((state) => state.setNodes);
+
+    // Get the icon component based on the iconName, default to DescriptionIcon
+    const IconComponent = getIconByName(data.iconName || 'Description');
+
+    // Use consistent colors with other automation nodes
+    const colors = {
+        backgroundColor: '#181C25', // Default automation node background
+        textColor: '#ffffff',
+        borderColor: '#1e293b',
+        iconBg: '#3b82f6' // Default blue for icon background
+    };
+
+    // Debug logging for node dimensions
+    useEffect(() => {
+        if (nodeRef.current) {
+            const rect = nodeRef.current.getBoundingClientRect();
+            const computedStyle = window.getComputedStyle(nodeRef.current);
+            console.log('AutomationNoteNode Debug:', {
+                nodeId: data.label,
+                actualDimensions: {
+                    width: rect.width,
+                    height: rect.height,
+                    left: rect.left,
+                    top: rect.top
+                },
+                computedStyle: {
+                    width: computedStyle.width,
+                    height: computedStyle.height,
+                    padding: computedStyle.padding,
+                    border: computedStyle.border,
+                    boxShadow: computedStyle.boxShadow,
+                    margin: computedStyle.margin
+                },
+                handlePositions: {
+                    left: '-8px',
+                    right: '-8px'
+                }
+            });
+        }
+    }, [data.label]);
+
+    return (
+        <Box
+            sx={{
+                position: 'relative',
+                width: '336px',
+                overflow: 'visible',
+            }}
+        >
+            <Box
+                ref={nodeRef}
+                sx={{
+                    width: '336px',
+                    minHeight: '150px',
+                    backgroundColor: colors.backgroundColor,
+                    border: selected ? `2px solid ${colors.borderColor}` : `1px solid ${colors.borderColor}`,
+                    borderRadius: '12px',
+                    padding: '0',
+                    color: colors.textColor,
+                    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',
+                }}
+            >
+            {/* Header */}
+            <Box sx={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                p: 2,
+                borderBottom: '1px solid rgba(255, 255, 255, 0.1)'
+            }}>
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
+                    <Box
+                        sx={{
+                            width: '32px',
+                            height: '32px',
+                            backgroundColor: colors.iconBg,
+                            borderRadius: '6px',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                        }}
+                    >
+                        <IconComponent sx={{ color: 'white', fontSize: '18px' }} />
+                    </Box>
+                    <Typography variant="h6" sx={{ fontWeight: 600, fontSize: '16px' }}>
+                        {data.label}
+                    </Typography>
+                </Box>
+            </Box>
+
+            {/* Content */}
+            <Box sx={{ p: 2 }}>
+                <Typography variant="body2" sx={{
+                    color: colors.textColor,
+                    fontSize: '14px',
+                    lineHeight: 1.5,
+                    opacity: 0.9
+                }}>
+                    {data.description}
+                </Typography>
+            </Box>
+
+            {/* Note Type Indicator */}
+            <Box sx={{
+                position: 'absolute',
+                top: '8px',
+                right: '8px',
+                px: 1,
+                py: 0.5,
+                backgroundColor: 'rgba(255, 255, 255, 0.2)',
+                borderRadius: '4px',
+                fontSize: '10px',
+                fontWeight: 500,
+                textTransform: 'uppercase',
+                letterSpacing: '0.5px'
+            }}>
+                {data.noteType || 'note'}
+            </Box>
+
+            {/* Connection Handles - Bidirectional (source + target at each position) */}
+            {/* Top - Source */}
+            <Handle
+                type="source"
+                position={Position.Top}
+                id="top-source"
+                className="connection-handle"
+                style={{
+                    background: selected ? '#10B981' : '#1a1a2e',
+                    width: '14px',
+                    height: '14px',
+                    border: '3px solid #10B981',
+                    top: '-8px',
+                    opacity: selected ? 1 : 0,
+                    transition: 'all 0.2s ease-in-out',
+                    cursor: 'crosshair',
+                    zIndex: 10,
+                }}
+            />
+            {/* Top - Target (hidden but functional) */}
+            <Handle
+                type="target"
+                position={Position.Top}
+                id="top-target"
+                style={{
+                    background: 'transparent',
+                    width: '14px',
+                    height: '14px',
+                    border: 'none',
+                    top: '-8px',
+                    opacity: 0,
+                    pointerEvents: selected ? 'all' : 'none',
+                }}
+            />
+            {/* Bottom - Source */}
+            <Handle
+                type="source"
+                position={Position.Bottom}
+                id="bottom-source"
+                className="connection-handle"
+                style={{
+                    background: selected ? '#10B981' : '#1a1a2e',
+                    width: '14px',
+                    height: '14px',
+                    border: '3px solid #10B981',
+                    bottom: '-8px',
+                    opacity: selected ? 1 : 0,
+                    transition: 'all 0.2s ease-in-out',
+                    cursor: 'crosshair',
+                    zIndex: 10,
+                }}
+            />
+            {/* Bottom - Target (hidden but functional) */}
+            <Handle
+                type="target"
+                position={Position.Bottom}
+                id="bottom-target"
+                style={{
+                    background: 'transparent',
+                    width: '14px',
+                    height: '14px',
+                    border: 'none',
+                    bottom: '-8px',
+                    opacity: 0,
+                    pointerEvents: selected ? 'all' : 'none',
+                }}
+            />
+            {/* Left - Source */}
+            <Handle
+                type="source"
+                position={Position.Left}
+                id="left-source"
+                className="connection-handle"
+                style={{
+                    background: selected ? '#10B981' : '#1a1a2e',
+                    width: '14px',
+                    height: '14px',
+                    border: '3px solid #10B981',
+                    left: '-8px',
+                    opacity: selected ? 1 : 0,
+                    transition: 'all 0.2s ease-in-out',
+                    cursor: 'crosshair',
+                    zIndex: 10,
+                }}
+            />
+            {/* Left - Target (hidden but functional) */}
+            <Handle
+                type="target"
+                position={Position.Left}
+                id="left-target"
+                style={{
+                    background: 'transparent',
+                    width: '14px',
+                    height: '14px',
+                    border: 'none',
+                    left: '-8px',
+                    opacity: 0,
+                    pointerEvents: selected ? 'all' : 'none',
+                }}
+            />
+            {/* Right - Source */}
+            <Handle
+                type="source"
+                position={Position.Right}
+                id="right-source"
+                className="connection-handle"
+                style={{
+                    background: selected ? '#10B981' : '#1a1a2e',
+                    width: '14px',
+                    height: '14px',
+                    border: '3px solid #10B981',
+                    right: '-8px',
+                    opacity: selected ? 1 : 0,
+                    transition: 'all 0.2s ease-in-out',
+                    cursor: 'crosshair',
+                    zIndex: 10,
+                }}
+            />
+            {/* Right - Target (hidden but functional) */}
+            <Handle
+                type="target"
+                position={Position.Right}
+                id="right-target"
+                style={{
+                    background: 'transparent',
+                    width: '14px',
+                    height: '14px',
+                    border: 'none',
+                    right: '-8px',
+                    opacity: 0,
+                    pointerEvents: selected ? 'all' : 'none',
+                }}
+            />
+
+            </Box>
+
+            {/* Node Action Buttons - Shows when selected */}
+            <NodeActionButtons
+                selected={selected}
+                onOpenAIAssistant={(buttonElement) => {
+                    if (nodeId) {
+                        showNodeAIAssistantPopup(nodeId, 'Note Node', buttonElement);
+                    }
+                }}
+                onDelete={() => {
+                    if (nodeId && onNodesChange) {
+                        onNodesChange([{ id: nodeId, type: 'remove' }]);
+                    }
+                }}
+                onDuplicate={() => {
+                    if (nodeId) {
+                        const currentNode = nodes.find(n => n.id === nodeId);
+                        if (currentNode) {
+                            const newNode = {
+                                ...currentNode,
+                                id: `${currentNode.id}-copy-${Date.now()}`,
+                                position: {
+                                    x: currentNode.position.x + 50,
+                                    y: currentNode.position.y + 50,
+                                },
+                                selected: false,
+                            };
+                            setNodes([...nodes, newNode]);
+                        }
+                    }
+                }}
+            />
+
+            {/* 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>
+    );
+};