@flowuent-org/diagramming-core 1.4.0 → 1.4.2

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

@@ -0,0 +1,683 @@
+import React, { useState, useEffect, 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 {
+  Mouse as MouseIcon,
+  Keyboard as KeyboardIcon,
+  TouchApp as TouchAppIcon,
+  Input as InputIcon,
+  SelectAll as SelectAllIcon,
+  CheckBox as CheckBoxIcon,
+  RadioButtonChecked as RadioButtonIcon,
+  AccessTime as AccessTimeIcon,
+} from '@mui/icons-material';
+import { RiCloseLine } from 'react-icons/ri';
+import ReactJson from 'react-json-view';
+import { useTranslation } from 'react-i18next';
+import { useDiagram } from '../../contexts/DiagramProvider';
+import { useSearch } from '../../contexts/SearchContext';
+import { NodeActionButtons } from './NodeActionButtons';
+import { showNodeAIAssistantPopup } from './NodeAIAssistantPopup';
+import { getStatusColor } from './statusColors';
+import { AutomationNodeHeaderSection } from './AutomationNodeHeader';
+
+// ========================
+// Types
+// ========================
+
+export type InteractionType =
+  | 'click'
+  | 'type'
+  | 'select'
+  | 'check'
+  | 'radio'
+  | 'upload'
+  | 'scroll'
+  | 'hover'
+  | 'double-click'
+  | 'right-click'
+  | 'drag-drop'
+  | 'wait';
+
+export interface AutomationInteractionNodeData {
+  label: string;
+  description: string;
+  headerText?: string;
+  interactionType?: InteractionType;
+  status: 'Ready' | 'Running' | 'Completed' | 'Error';
+  parameters?: {
+    // Common interaction properties
+    selector?: string;
+    xpath?: string;
+    text?: string;
+    value?: string;
+    index?: number;
+    
+    // Type interaction
+    inputValue?: string;
+    clearBeforeType?: boolean;
+    typeDelay?: number;
+    
+    // Select interaction
+    optionValue?: string;
+    optionText?: string;
+    selectBy?: 'value' | 'text' | 'index';
+    
+    // Check/Radio interaction
+    checked?: boolean;
+    
+    // Upload interaction
+    filePath?: string;
+    fileType?: string;
+    
+    // Scroll interaction
+    scrollDirection?: 'up' | 'down' | 'left' | 'right' | 'to-element';
+    scrollAmount?: number;
+    
+    // Wait interaction
+    waitTime?: number;
+    waitForSelector?: string;
+    waitForText?: string;
+    waitTimeout?: number;
+    
+    // Drag and drop
+    dragSelector?: string;
+    dropSelector?: string;
+    
+    // Hover
+    hoverDuration?: number;
+    
+    // Timing
+    delay?: number;
+    timeout?: number;
+    retryCount?: number;
+
+    [key: string]: any;
+  };
+  formData?: {
+    nodeId?: string;
+    title?: string;
+    type?: string;
+    interactionType?: string;
+    [key: string]: any;
+  };
+  lastRun?: string;
+  duration?: string;
+  executionResult?: {
+    success: boolean;
+    data?: any;
+    error?: string;
+  };
+}
+
+export interface AutomationInteractionNodeProps {
+  data: AutomationInteractionNodeData;
+  selected?: boolean;
+}
+
+// ========================
+// Interaction Configuration
+// ========================
+
+const INTERACTION_CONFIG: Record<
+  InteractionType,
+  {
+    icon: React.ElementType;
+    label: string;
+    color: string;
+    description: string;
+  }
+> = {
+  'click': {
+    icon: MouseIcon,
+    label: 'Click',
+    color: '#8b5cf6',
+    description: 'Click on an element',
+  },
+  'type': {
+    icon: KeyboardIcon,
+    label: 'Type',
+    color: '#3b82f6',
+    description: 'Type text into an input field',
+  },
+  'select': {
+    icon: SelectAllIcon,
+    label: 'Select',
+    color: '#10b981',
+    description: 'Select an option from dropdown',
+  },
+  'check': {
+    icon: CheckBoxIcon,
+    label: 'Check',
+    color: '#f59e0b',
+    description: 'Check or uncheck a checkbox',
+  },
+  'radio': {
+    icon: RadioButtonIcon,
+    label: 'Radio',
+    color: '#ef4444',
+    description: 'Select a radio button',
+  },
+  'upload': {
+    icon: InputIcon,
+    label: 'Upload',
+    color: '#06b6d4',
+    description: 'Upload a file',
+  },
+  'scroll': {
+    icon: TouchAppIcon,
+    label: 'Scroll',
+    color: '#6366f1',
+    description: 'Scroll the page',
+  },
+  'hover': {
+    icon: MouseIcon,
+    label: 'Hover',
+    color: '#8b5cf6',
+    description: 'Hover over an element',
+  },
+  'double-click': {
+    icon: MouseIcon,
+    label: 'Double Click',
+    color: '#8b5cf6',
+    description: 'Double click on an element',
+  },
+  'right-click': {
+    icon: MouseIcon,
+    label: 'Right Click',
+    color: '#8b5cf6',
+    description: 'Right click on an element',
+  },
+  'drag-drop': {
+    icon: TouchAppIcon,
+    label: 'Drag & Drop',
+    color: '#ec4899',
+    description: 'Drag and drop an element',
+  },
+  'wait': {
+    icon: AccessTimeIcon,
+    label: 'Wait',
+    color: '#6b7280',
+    description: 'Wait for condition or time',
+  },
+};
+
+// ========================
+// Helper Functions
+// ========================
+
+const getInteractionDetails = (data: AutomationInteractionNodeData): string => {
+  const interactionType = data.interactionType || data.formData?.interactionType || 'click';
+  const params = data.parameters || data.formData || {};
+  
+  switch (interactionType) {
+    case 'click':
+    case 'double-click':
+    case 'right-click':
+    case 'hover':
+      return params.selector || params.xpath || params.text || 'No selector specified';
+    case 'type':
+      return params.inputValue || params.value || 'No value specified';
+    case 'select':
+      return `${params.optionText || params.optionValue || 'No option'} from ${params.selector || 'dropdown'}`;
+    case 'check':
+    case 'radio':
+      return `${params.checked ? 'Check' : 'Uncheck'} ${params.selector || 'element'}`;
+    case 'upload':
+      return params.filePath || params.fileName || 'No file specified';
+    case 'scroll':
+      return `${params.scrollDirection || 'down'} ${params.scrollAmount || ''}`.trim();
+    case 'wait':
+      return params.waitForSelector 
+        ? `Wait for: ${params.waitForSelector}`
+        : `${params.waitTime || 1000}ms`;
+    case 'drag-drop':
+      return `${params.dragSelector || 'source'} → ${params.dropSelector || 'target'}`;
+    default:
+      return 'No details';
+  }
+};
+
+// ========================
+// Main Component
+// ========================
+
+export const AutomationInteractionNode: React.FC<AutomationInteractionNodeProps> = ({
+  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 interaction configuration
+  const interactionTypeRaw = data.interactionType || data.formData?.interactionType || 'click';
+  const interactionType = (Object.keys(INTERACTION_CONFIG).includes(interactionTypeRaw) 
+    ? interactionTypeRaw 
+    : 'click') as InteractionType;
+  const interactionConfig = INTERACTION_CONFIG[interactionType];
+  const InteractionIcon = interactionConfig.icon;
+
+  // Execution state
+  const status = data.status || 'Ready';
+
+  // Status configuration - using centralized status colors
+  const statusConfig = getStatusColor(status);
+
+  // Handle JSON view
+  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;
+    }
+  };
+
+  // Click outside handler
+  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 (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 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]);
+
+  return (
+    <Box
+      sx={{
+        position: 'relative',
+        width: '336px',
+        overflow: 'visible',
+      }}
+    >
+      <Box
+        ref={nodeRef}
+        sx={{
+          width: '336px',
+          minHeight: '150px',
+          backgroundColor: '#181C25',
+          border: selected ? `2px solid ${interactionConfig.color}` : '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',
+          ...(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 */}
+        <AutomationNodeHeaderSection data={data} highlightText={highlightText} />
+
+        {/* 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',
+                  minWidth: '32px',
+                  backgroundColor: '#1E3A8A',
+                  borderRadius: '50%',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  flexShrink: 0,
+                }}
+              >
+                <InteractionIcon sx={{ color: 'white', fontSize: '18px' }} />
+              </Box>
+              <Typography variant="h6" sx={{ fontWeight: 600, fontSize: '16px' }}>
+                {highlightText(data.label || interactionConfig.label)}
+              </Typography>
+            </Box>
+            <Chip
+              label={status}
+              size="small"
+              sx={{
+                backgroundColor: statusConfig.bgColor,
+                color: statusConfig.color,
+                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',
+              minHeight: '40px',
+              display: 'flex',
+              alignItems: 'center'
+            }}>
+              <Typography variant="body2" sx={{
+                color: '#9CA3AF',
+                fontSize: '12px',
+                lineHeight: 1.4,
+                margin: 0
+              }}>
+                {getInteractionDetails(data)}
+              </Typography>
+            </Box>
+          </Box>
+
+          {/* Last Run Info */}
+          {data.lastRun && (
+            <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}
+                {data.duration && ` · ${data.duration}`}
+              </Typography>
+            </Box>
+          )}
+        </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, 'Interaction 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>
+  );
+};
+
+export default AutomationInteractionNode;
+
+
+