@flowuent-org/diagramming-core 1.2.0 → 1.2.2

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

@@ -0,0 +1,584 @@
+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 {
+    AccessTime as AccessTimeIcon,
+    Navigation as NavigationIcon,
+    OpenInBrowser as OpenInBrowserIcon,
+    TouchApp as TouchAppIcon,
+    Search as SearchIcon,
+} 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 { NodeActionButtons } from './NodeActionButtons';
+import { showNodeAIAssistantPopup } from './NodeAIAssistantPopup';
+import { useSearch } from '../../contexts/SearchContext';
+
+interface AutomationNavigationNodeProps {
+    data: {
+        label: string;
+        description: string;
+        status: 'Ready' | 'Running' | 'Completed' | 'Error';
+        navigationType: 'navigate' | 'click' | 'scroll' | 'wait' | 'extract';
+        url?: string;
+        selector?: string;
+        action?: string;
+        waitTime?: number;
+        scrollDirection?: 'up' | 'down' | 'to-element';
+        extractSelector?: string;
+        lastRun: string;
+        backgroundColor: string;
+        textColor: string;
+        borderColor: string;
+        iconName?: string;
+        formData?: {
+            navigationType?: 'navigate' | 'click' | 'scroll' | 'wait' | 'extract';
+            url?: string;
+            selector?: string;
+            action?: string;
+            waitTime?: number;
+            scrollDirection?: 'up' | 'down' | 'to-element';
+            extractSelector?: string;
+            outputVariable?: string;
+            timeout?: number;
+            retryCount?: number;
+            [key: string]: any;
+        };
+    };
+    selected?: boolean;
+}
+
+export const AutomationNavigationNode: React.FC<AutomationNavigationNodeProps> = ({ data, selected }) => {
+    const { t } = useTranslation();
+    const { highlightText } = useSearch();
+    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);
+    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
+    const IconComponent = getIconByName(data.iconName) || NavigationIcon;
+
+    const handleJsonClick = () => {
+        if (nodeId) setSelectedNode(nodeId);
+        if (!enableJson) return;
+        setIsJsonOpen(!isJsonOpen);
+    };
+
+    const handleClose = () => {
+        setIsJsonOpen(false);
+        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]);
+
+    useEffect(() => {
+        if (nodeRef.current) {
+            const rect = nodeRef.current.getBoundingClientRect();
+            const computedStyle = window.getComputedStyle(nodeRef.current);
+        }
+    }, [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>
+                        {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>
+                            </Box>
+                        )}
+                        <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 {
+            if (rootRef.current) {
+                rootRef.current.unmount();
+                rootRef.current = null;
+            }
+            if (portalRef.current) {
+                document.body.removeChild(portalRef.current);
+                portalRef.current = null;
+            }
+        }
+    }, [isJsonOpen, data]);
+
+    const getNavigationIcon = () => {
+        const navType = data.formData?.navigationType || data.navigationType || 'navigate';
+        switch (navType) {
+            case 'navigate':
+                return <OpenInBrowserIcon sx={{ fontSize: '18px' }} />;
+            case 'click':
+                return <TouchAppIcon sx={{ fontSize: '18px' }} />;
+            case 'scroll':
+                return <NavigationIcon sx={{ fontSize: '18px' }} />;
+            case 'wait':
+                return <AccessTimeIcon sx={{ fontSize: '18px' }} />;
+            case 'extract':
+                return <SearchIcon sx={{ fontSize: '18px' }} />;
+            default:
+                return <NavigationIcon sx={{ fontSize: '18px' }} />;
+        }
+    };
+
+    const getNavigationTypeLabel = () => {
+        const navType = data.formData?.navigationType || data.navigationType || 'navigate';
+        switch (navType) {
+            case 'navigate':
+                return 'Navigate to URL';
+            case 'click':
+                return 'Click Element';
+            case 'scroll':
+                return 'Scroll Page';
+            case 'wait':
+                return 'Wait';
+            case 'extract':
+                return 'Extract Data';
+            default:
+                return 'Navigation';
+        }
+    };
+
+    const getNavigationDetails = () => {
+        const navType = data.formData?.navigationType || data.navigationType || 'navigate';
+        const formData = data.formData || {};
+        
+        switch (navType) {
+            case 'navigate':
+                return formData.url || data.url || 'No URL specified';
+            case 'click':
+                return formData.selector || data.selector || 'No selector specified';
+            case 'scroll':
+                return formData.scrollDirection || data.scrollDirection || 'down';
+            case 'wait':
+                return `${formData.waitTime || data.waitTime || 1000}ms`;
+            case 'extract':
+                return formData.extractSelector || data.extractSelector || 'No selector specified';
+            default:
+                return 'No details';
+        }
+    };
+
+    return (
+        <Box
+            sx={{
+                position: 'relative',
+                width: '336px',
+                overflow: 'visible',
+            }}
+        >
+            <Box
+                ref={nodeRef}
+                sx={{
+                    width: '336px',
+                    minHeight: '150px',
+                    backgroundColor: '#181C25',
+                    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',
+                    ...(data.status === 'Running' && {
+                        animation: 'pulse-glow 2s ease-in-out infinite',
+                        '@keyframes pulse-glow': {
+                            '0%, 100%': {
+                                boxShadow: '0 0 20px rgba(59, 130, 246, 0.4), 0 0 40px rgba(59, 130, 246, 0.2)',
+                                borderColor: 'rgba(59, 130, 246, 0.6)',
+                            },
+                            '50%': {
+                                boxShadow: '0 0 30px rgba(59, 130, 246, 0.6), 0 0 60px rgba(59, 130, 246, 0.3)',
+                                borderColor: 'rgba(59, 130, 246, 0.9)',
+                            },
+                        },
+                    }),
+                }}
+                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 || data.description || 'Web navigation action'}
+                    </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',
+                                    borderRadius: '50%',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                }}
+                            >
+                                {getNavigationIcon()}
+                            </Box>
+                            <Typography variant="h6" sx={{ fontWeight: 600, fontSize: '16px' }}>
+                                {highlightText(data.label)}
+                            </Typography>
+                        </Box>
+                        <Chip
+                            label={data.status || 'Ready'}
+                            size="small"
+                            sx={{
+                                backgroundColor: data.status === 'Completed'
+                                    ? 'rgba(37, 99, 235, 0.1)'
+                                    : data.status === 'Running'
+                                        ? 'rgba(251, 191, 36, 0.1)'
+                                        : data.status === 'Error'
+                                            ? 'rgba(239, 68, 68, 0.1)'
+                                            : 'rgba(16, 185, 129, 0.1)',
+                                color: data.status === 'Completed'
+                                    ? '#93C5FD'
+                                    : data.status === 'Running'
+                                        ? '#FCD34D'
+                                        : data.status === 'Error'
+                                            ? '#FCA5A5'
+                                            : '#86EFAC',
+                                fontWeight: 500,
+                                fontSize: '12px',
+                                height: '24px',
+                                borderRadius: '12px',
+                            }}
+                        />
+                    </Box>
+
+                    {/* Navigation Type */}
+                    <Box sx={{
+                        backgroundColor: '#1F2937',
+                        borderRadius: '8px',
+                        padding: '12px',
+                        mb: 2,
+                        border: '1px solid #374151'
+                    }}>
+                        <Typography variant="body2" sx={{
+                            color: '#9CA3AF',
+                            fontSize: '11px',
+                            mb: 0.5
+                        }}>
+                            {getNavigationTypeLabel()}
+                        </Typography>
+                        <Typography variant="body2" sx={{
+                            color: '#ffffff',
+                            fontSize: '12px',
+                            fontWeight: 500
+                        }}>
+                            {getNavigationDetails()}
+                        </Typography>
+                    </Box>
+
+                    {/* Description Box */}
+                    <Box sx={{
+                        backgroundColor: '#1F2937',
+                        borderRadius: '8px',
+                        padding: '12px',
+                        mb: 2,
+                        border: '1px solid #374151'
+                    }}>
+                        <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
+                            }}>
+                                {highlightText(data.description)}
+                            </Typography>
+                        </Box>
+                    </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>
+
+                {/* Connection Handles */}
+                <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,
+                    }}
+                />
+                <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',
+                    }}
+                />
+                <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,
+                    }}
+                />
+                <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',
+                    }}
+                />
+                <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,
+                    }}
+                />
+                <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',
+                    }}
+                />
+                <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,
+                    }}
+                />
+                <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 */}
+            <NodeActionButtons
+                selected={selected}
+                onOpenAIAssistant={(buttonElement) => {
+                    if (nodeId) {
+                        showNodeAIAssistantPopup(nodeId, 'Navigation 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]);
+                        }
+                    }
+                }}
+            />
+        </Box>
+    );
+};
+

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

@@ -8,6 +8,7 @@ import { AISuggestionsPanel } from './AISuggestionsPanel';
 import { NodeActionButtons } from './NodeActionButtons';
 import { showNodeAIAssistantPopup } from './NodeAIAssistantPopup';
 import { useDiagram } from '../../contexts/DiagramProvider';
+import { useSearch } from '../../contexts/SearchContext';
 
 interface AutomationNoteNodeProps {
     data: {
@@ -29,6 +30,7 @@ interface AutomationNoteNodeProps {
 export const AutomationNoteNode: React.FC<AutomationNoteNodeProps> = ({ data, selected }) => {
     const nodeRef = useRef<HTMLDivElement | null>(null);
     const [showSuggestions, setShowSuggestions] = useState(false);
+    const { highlightText } = useSearch();
     const nodeId = useNodeId();
     const onNodesChange = useDiagram((state) => state.onNodesChange);
     const nodes = useDiagram((state) => state.nodes);
@@ -122,7 +124,7 @@ export const AutomationNoteNode: React.FC<AutomationNoteNodeProps> = ({ data, se
                         <IconComponent sx={{ color: 'white', fontSize: '18px' }} />
                     </Box>
                     <Typography variant="h6" sx={{ fontWeight: 600, fontSize: '16px' }}>
-                        {data.label}
+                        {highlightText(data.label)}
                     </Typography>
                 </Box>
             </Box>

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

@@ -30,6 +30,7 @@ import { AISuggestion } from './AISuggestionsModal';
 import { AISuggestionsPanel } from './AISuggestionsPanel';
 import { NodeActionButtons } from './NodeActionButtons';
 import { showNodeAIAssistantPopup } from './NodeAIAssistantPopup';
+import { useSearch } from '../../contexts/SearchContext';
 
 interface AutomationSheetsNodeProps {
     data: {
@@ -104,6 +105,7 @@ interface AutomationSheetsNodeProps {
 
 export const AutomationSheetsNode: React.FC<AutomationSheetsNodeProps> = ({ data, selected }) => {
     const { t } = useTranslation();
+    const { highlightText } = useSearch();
     const [isJsonOpen, setIsJsonOpen] = useState(false);
     const [showSuggestions, setShowSuggestions] = useState(false);
     const rootRef = useRef<any>(null);
@@ -766,7 +768,7 @@ Data: ${JSON.stringify(data, null, 2)}
                         <IconComponent sx={{ color: 'white', fontSize: '18px' }} />
                     </Box>
                     <Typography variant="h6" sx={{ fontWeight: 600, fontSize: '16px' }}>
-                        {data.label}
+                        {highlightText(data.label)}
                     </Typography>
                 </Box>
                 <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>

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

@@ -10,6 +10,7 @@ import { useTranslation } from 'react-i18next';
 import { useDiagram } from '../../contexts/DiagramProvider';
 import { NodeActionButtons } from './NodeActionButtons';
 import { showNodeAIAssistantPopup } from './NodeAIAssistantPopup';
+import { useSearch } from '../../contexts/SearchContext';
 
 interface AutomationStartNodeProps {
     data: {
@@ -34,6 +35,7 @@ interface AutomationStartNodeProps {
 
 export const AutomationStartNode: React.FC<AutomationStartNodeProps> = ({ data, selected }) => {
     const { t } = useTranslation();
+    const { highlightText } = useSearch();
     const [isJsonOpen, setIsJsonOpen] = useState(false);
     const rootRef = useRef<any>(null);
     const portalRef = useRef<HTMLDivElement | null>(null);
@@ -247,7 +249,7 @@ export const AutomationStartNode: React.FC<AutomationStartNodeProps> = ({ data,
                     fontSize: '12px',
                     fontWeight: 500
                 }}>
-                    {data.formData?.description || t('automation.startNode.headerDescription')}
+                    {highlightText(data.formData?.description || t('automation.startNode.headerDescription'))}
                 </Typography>
             </Box>
 
@@ -270,7 +272,7 @@ export const AutomationStartNode: React.FC<AutomationStartNodeProps> = ({ data,
                             <IconComponent sx={{ color: 'white', fontSize: '18px' }} />
                         </Box>
                         <Typography variant="h6" sx={{ fontWeight: 600, fontSize: '16px' }}>
-                            {data.label}
+                            {highlightText(data.label)}
                         </Typography>
                     </Box>
                     <Chip

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

@@ -4,6 +4,7 @@ export { AutomationFormattingNode } from './AutomationFormattingNode';
 export { AutomationSheetsNode } from './AutomationSheetsNode';
 export { AutomationEndNode } from './AutomationEndNode';
 export { AutomationNoteNode } from './AutomationNoteNode';
+export { AutomationNavigationNode } from './AutomationNavigationNode';
 export { AutomationExecutionPanel } from './AutomationExecutionPanel';
 export { AutomationAISuggestionNode } from './AutomationAISuggestionNode';
 export { AISuggestionsModal, showAISuggestionsModal } from './AISuggestionsModal';