@flowuent-org/diagramming-core 1.0.5

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

@@ -0,0 +1,557 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { createRoot } from 'react-dom/client';
+import { Handle, Position, useNodeId } from '@xyflow/react';
+import { Box, Typography, Chip, IconButton, Card, CardContent } from '@mui/material';
+import {
+    Psychology as PsychologyIcon,
+    AccessTime as AccessTimeIcon,
+    Visibility as VisibilityIcon,
+    FilterList as FilterIcon,
+    Send as SendIcon,
+    Settings as SettingsIcon,
+    Storage as StorageIcon
+} from '@mui/icons-material';
+import { RiCloseLine, RiUser2Line } 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';
+
+interface AutomationFormattingNodeProps {
+    data: {
+        label: string;
+        description: string;
+        status: 'Ready' | 'Running' | 'Completed' | 'Error';
+        inputVariable: string;
+        formattingType: 'basic' | 'ai-powered';
+        aiConfig?: {
+            apiUrl: string;
+            model: string;
+            instruction: string;
+            temperature: number;
+        };
+        outputFormat: string;
+        outputVariable: string;
+        lastRun: string;
+        backgroundColor: string;
+        textColor: string;
+        borderColor: string;
+        iconName?: string; // Add iconName to the interface
+        formData?: {
+            schemaMatch?: {
+                matched: number;
+                partial: number;
+                ignored: number;
+            };
+            aiReasoning?: {
+                text: string;
+            };
+            configurationCards?: Array<{
+                icon: string;
+                label: string;
+                iconColor: string;
+            }>;
+            [key: string]: any;
+        }; // Include formData for configuration
+    };
+    selected?: boolean;
+}
+
+export const AutomationFormattingNode: React.FC<AutomationFormattingNodeProps> = ({ data, selected }) => {
+    const { t } = useTranslation();
+    const [isJsonOpen, setIsJsonOpen] = useState(false);
+    const rootRef = useRef<any>(null);
+    const portalRef = useRef<HTMLDivElement | null>(null);
+    const nodeRef = useRef<HTMLDivElement | null>(null);
+    const nodeId = useNodeId();
+    const setSelectedNode = useDiagram((state) => state.setSelectedNode);
+    const enableJson = useDiagram((state) => state.enableNodeJsonPopover ?? true);
+
+    // Get the icon component based on the iconName
+    const IconComponent = getIconByName(data.iconName);
+
+    const handleJsonClick = () => {
+        if (nodeId) setSelectedNode(nodeId);
+        if (!enableJson) return;
+        setIsJsonOpen(!isJsonOpen);
+    };
+
+    const handleClose = () => {
+        setIsJsonOpen(false);
+        // Clean up portal
+        if (rootRef.current) {
+            rootRef.current.unmount();
+            rootRef.current = null;
+        }
+        if (portalRef.current) {
+            document.body.removeChild(portalRef.current);
+            portalRef.current = null;
+        }
+    };
+
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (isJsonOpen && !(event.target as Element).closest('#automation-json-popover')) {
+                handleClose();
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isJsonOpen]);
+
+    // Debug logging for node dimensions
+    useEffect(() => {
+        if (nodeRef.current) {
+            const rect = nodeRef.current.getBoundingClientRect();
+            const computedStyle = window.getComputedStyle(nodeRef.current);
+            // Debug information available but not logged
+        }
+    }, [data.label]);
+
+    useEffect(() => {
+        if (isJsonOpen) {
+            const portalRoot = document.createElement('div');
+            document.body.appendChild(portalRoot);
+            portalRef.current = portalRoot;
+
+            const root = createRoot(portalRoot);
+            rootRef.current = root;
+
+            root.render(
+                <Card
+                    id="automation-json-popover"
+                    sx={{
+                        position: 'fixed',
+                        top: 0,
+                        right: 0,
+                        zIndex: 9999,
+                        width: '400px',
+                        height: '100vh',
+                        overflow: 'auto',
+                        bgcolor: '#242424',
+                        color: '#fff',
+                        border: '1px solid #333',
+                        '&::-webkit-scrollbar': {
+                            width: '6px',
+                        },
+                        '&::-webkit-scrollbar-track': {
+                            background: 'transparent',
+                        },
+                        '&::-webkit-scrollbar-thumb': {
+                            background: '#444',
+                            borderRadius: '3px',
+                            '&:hover': {
+                                background: '#666',
+                            },
+                        },
+                    }}
+                >
+                    <CardContent sx={{ bgcolor: '#242424', color: '#fff' }}>
+                        <IconButton
+                            aria-label="close"
+                            onClick={handleClose}
+                            sx={{
+                                color: '#999',
+                                '&:hover': {
+                                    color: '#fff',
+                                    bgcolor: 'rgba(255, 255, 255, 0.1)',
+                                },
+                            }}
+                        >
+                            <RiCloseLine />
+                        </IconButton>
+                        {/* Show execution result prominently if available */}
+                        {data.formData?.executionResult && (
+                            <Box sx={{ mb: 2 }}>
+                                <Typography variant="h6" sx={{ color: '#fff', mb: 1 }}>
+                                    {t('automation.common.executionResult')}
+                                </Typography>
+                                <Box sx={{
+                                    bgcolor: data.formData.executionResult.success ? '#1e3a8a' : '#dc2626',
+                                    p: 1,
+                                    borderRadius: 1,
+                                    mb: 1
+                                }}>
+                                    <Typography variant="body2" sx={{ color: '#fff' }}>
+                                        {t('automation.common.status')}: {data.formData.executionResult.success ? t('automation.common.success') : t('automation.common.failed')}
+                                    </Typography>
+                                    <Typography variant="body2" sx={{ color: '#fff' }}>
+                                        {t('automation.common.timestamp')}: {new Date(data.formData.executionResult.timestamp).toLocaleString()}
+                                    </Typography>
+                                    {data.formData.executionResult.error && (
+                                        <Typography variant="body2" sx={{ color: '#fff' }}>
+                                            {t('automation.common.error')}: {data.formData.executionResult.error}
+                                        </Typography>
+                                    )}
+                                </Box>
+                                <Typography variant="h6" sx={{ color: '#fff', mb: 1 }}>
+                                    {t('automation.formattingNode.formattedData')}
+                                </Typography>
+                                <ReactJson
+                                    theme={'monokai'}
+                                    src={data.formData.executionResult.data}
+                                    collapsed={false}
+                                />
+                            </Box>
+                        )}
+
+                        {/* Show full node data */}
+                        <Typography variant="h6" sx={{ color: '#fff', mb: 1 }}>
+                            {t('automation.common.fullNodeData')}
+                        </Typography>
+                        <ReactJson theme={'monokai'} src={data.formData || data} collapsed={false} />
+                    </CardContent>
+                </Card>
+            );
+        } else {
+            // Clean up when closing
+            if (rootRef.current) {
+                rootRef.current.unmount();
+                rootRef.current = null;
+            }
+            if (portalRef.current) {
+                document.body.removeChild(portalRef.current);
+                portalRef.current = null;
+            }
+        }
+    }, [isJsonOpen, data]);
+
+    // Card component for consistent styling
+    const ProcessCard = ({ icon, label, description, iconColor }: {
+        icon: React.ReactNode;
+        label: string;
+        description: string;
+        iconColor: string;
+    }) => (
+        <Box sx={{
+            backgroundColor: '#1e293b',
+            borderRadius: '8px',
+            padding: '12px',
+            mb: 1,
+            border: '1px solid #334155',
+            display: 'flex',
+            alignItems: 'center',
+            gap: 2,
+        }}>
+            <Box
+                sx={{
+                    width: '24px',
+                    height: '24px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    flexShrink: 0,
+                }}
+            >
+                {icon}
+            </Box>
+            <Box sx={{ flex: 1 }}>
+                <Typography variant="body2" sx={{
+                    color: iconColor,
+                    fontSize: '12px',
+                    fontWeight: 600,
+                    mb: 0.5
+                }}>
+                    {label}:
+                </Typography>
+                <Typography variant="body2" sx={{
+                    color: '#ffffff',
+                    fontSize: '11px',
+                    lineHeight: 1.3
+                }}>
+                    {description}
+                </Typography>
+            </Box>
+        </Box>
+    );
+
+    return (
+        <Box
+            ref={nodeRef}
+            sx={{
+                width: '336px',
+                minHeight: '150px',
+                backgroundColor: '#181C25', // New background color from image
+                border: selected ? '2px solid #3b82f6' : '1px solid #1e293b',
+                borderRadius: '12px',
+                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}
+        >
+            {/* Top Header Section */}
+            <Box sx={{
+                backgroundColor: "rgba(67, 93, 132, 0.1)",
+                padding: '8px 16px',
+                borderRadius: '12px 12px 0 0'
+            }}>
+                <Typography variant="body2" sx={{
+                    color: '#ffffff',
+                    fontSize: '12px',
+                    fontWeight: 500
+                }}>
+                    {data.formData?.description || t('automation.formattingNode.headerDescription')}
+                </Typography>
+            </Box>
+
+            {/* Main Content */}
+            <Box sx={{ padding: '16px' }}>
+                {/* Title Section */}
+                <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
+                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
+                        <Box
+                            sx={{
+                                width: '32px',
+                                height: '32px',
+                                backgroundColor: '#8b5cf6', // Purple like in image
+                                borderRadius: '50%',
+                                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>
+                    <Chip
+                        label={data.status}
+                        size="small"
+                        sx={{
+                            backgroundColor: 'rgba(16, 185, 129, 0.1)',
+                            color: '#86EFAC',
+                            fontWeight: 500,
+                            fontSize: '12px',
+                            height: '24px',
+                            borderRadius: '12px',
+                        }}
+                    />
+                </Box>
+
+                {/* Description Box */}
+                <Box sx={{
+                    backgroundColor: '#1F2937',
+                    borderRadius: '8px',
+                    padding: '12px',
+                    mb: 2,
+                    border: '1px solid #374151'
+                }}>
+                    {/* Inner text boundary box */}
+                    <Box sx={{
+                        backgroundColor: 'transparent',
+                        borderRadius: '4px',
+                        padding: '8px',
+                        border: '1px solid #4B5563', // Light grey border for inner box
+                        minHeight: '40px',
+                        display: 'flex',
+                        alignItems: 'center'
+                    }}>
+                        <Typography variant="body2" sx={{
+                            color: '#9CA3AF',
+                            fontSize: '12px',
+                            lineHeight: 1.4,
+                            margin: 0
+                        }}>
+                            {data.description}
+                        </Typography>
+                    </Box>
+                </Box>
+
+                {/* AI Reasoning Section */}
+                <Box sx={{
+                    backgroundColor: '#1F2937',
+                    borderRadius: '8px',
+                    padding: '12px',
+                    mb: 2,
+                    border: '1px solid #374151'
+                }}>
+                    {/* AI Reasoning Header */}
+                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}>
+                        <Box sx={{ color: '#34D399', fontSize: '16px' }}>
+                            🧠
+                        </Box>
+                        <Typography variant="body2" sx={{
+                            color: '#34D399',
+                            fontSize: '12px',
+                            fontWeight: 600
+                        }}>
+                            {t('automation.formattingNode.aiReasoning')}
+                        </Typography>
+                    </Box>
+
+                    {/* AI Reasoning Description */}
+                    <Box sx={{
+                        backgroundColor: 'transparent',
+                        borderRadius: '4px',
+                        padding: '8px',
+                        border: '1px solid #4B5563',
+                        minHeight: '40px',
+                        display: 'flex',
+                        alignItems: 'center'
+                    }}>
+                        <Typography variant="body2" sx={{
+                            color: '#9CA3AF',
+                            fontSize: '12px',
+                            lineHeight: 1.4,
+                            margin: 0
+                        }}>
+                            {data.formData?.aiReasoning?.text || t('automation.formattingNode.aiReasoningDefault')}
+                        </Typography>
+                    </Box>
+                </Box>
+
+                {(data.formData?.executionResult || data.formData?.schemaMatch) && (
+                    <>
+                        {/* Schema Row */}
+                        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
+                            <Typography variant="body2" sx={{ color: '#9CA3AF', fontSize: '11px' }}>
+                                {t('automation.common.schema')}
+                            </Typography>
+                            <Typography variant="body2" sx={{ color: '#34D399', fontSize: '11px', fontWeight: 500 }}>
+                                HeadlineSchema
+                            </Typography>
+                        </Box>
+
+                        {/* Content Data Boxes */}
+                        <Box sx={{ display: 'flex', gap: 1, mb: 2 }}>
+                            {/* Matched Box */}
+                            <Box sx={{
+                                flex: 1,
+                                backgroundColor: '#1A3038',
+                                borderRadius: '6px',
+                                padding: '8px',
+                                textAlign: 'center',
+                                border: '1px solid #374151'
+                            }}>
+                                <Typography variant="h6" sx={{
+                                    color: '#5EEAD4',
+                                    fontSize: '16px',
+                                    fontWeight: 600,
+                                    mb: 0.5
+                                }}>
+                                    {data.formData?.schemaMatch?.matched ?? 0}
+                                </Typography>
+                                <Typography variant="body2" sx={{ color: '#9CA3AF', fontSize: '10px' }}>
+                                    {t('automation.common.matched')}
+                                </Typography>
+                            </Box>
+
+                            {/* Partial Box */}
+                            <Box sx={{
+                                flex: 1,
+                                backgroundColor: '#312B2F',
+                                borderRadius: '6px',
+                                padding: '8px',
+                                textAlign: 'center',
+                                border: '1px solid #374151'
+                            }}>
+                                <Typography variant="h6" sx={{
+                                    color: '#FBBF24',
+                                    fontSize: '16px',
+                                    fontWeight: 600,
+                                    mb: 0.5
+                                }}>
+                                    {data.formData?.schemaMatch?.partial ?? 0}
+                                </Typography>
+                                <Typography variant="body2" sx={{ color: '#9CA3AF', fontSize: '10px' }}>
+                                    {t('automation.common.partial')}
+                                </Typography>
+                            </Box>
+
+                            {/* Ignored Box */}
+                            <Box sx={{
+                                flex: 1,
+                                backgroundColor: '#252932',
+                                borderRadius: '6px',
+                                padding: '8px',
+                                textAlign: 'center',
+                                border: '1px solid #374151'
+                            }}>
+                                <Typography variant="h6" sx={{
+                                    color: '#9CA3AF',
+                                    fontSize: '16px',
+                                    fontWeight: 600,
+                                    mb: 0.5
+                                }}>
+                                    {data.formData?.schemaMatch?.ignored ?? 0}
+                                </Typography>
+                                <Typography variant="body2" sx={{ color: '#9CA3AF', fontSize: '10px' }}>
+                                    {t('automation.common.ignored')}
+                                </Typography>
+                            </Box>
+                        </Box>
+                    </>
+                )}
+
+                {/* Configuration Cards */}
+                {data.formData?.configurationCards?.map((card: any, index: number) => (
+                    <Box key={index} sx={{
+                        backgroundColor: '#1F2937',
+                        borderRadius: '6px',
+                        padding: '8px 12px',
+                        mb: 1,
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 1,
+                        border: '1px solid #374151'
+                    }}>
+                        <Box sx={{ color: card.iconColor || '#ffffff', fontSize: '16px' }}>
+                            {card.icon}
+                        </Box>
+                        <Typography variant="body2" sx={{
+                            color: '#ffffff',
+                            fontSize: '11px',
+                            fontWeight: 500
+                        }}>
+                            {card.label}
+                        </Typography>
+                    </Box>
+                ))}
+
+                {/* Last Run Info */}
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, mt: 1 }}>
+                    <AccessTimeIcon sx={{ fontSize: '14px', color: '#9CA3AF' }} />
+                    <Typography variant="body2" sx={{ color: '#9CA3AF', fontSize: '11px' }}>
+                        {t('automation.common.lastRan')}: {data.lastRun}
+                    </Typography>
+                </Box>
+            </Box>
+
+            {/* Handles - Hidden but functional */}
+            <Handle
+                type="target"
+                position={Position.Left}
+                id="left"
+                style={{
+                    background: '#3b82f6',
+                    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: '#3b82f6',
+                    width: '12px',
+                    height: '12px',
+                    border: '2px solid white',
+                    right: '-8px',
+                    opacity: 0, // Hidden but functional
+                }}
+            />
+        </Box>
+    );
+};