@flowuent-org/diagramming-core 1.3.9 → 1.3.10

package/apps/diagramming/src/AutomationDiagramData.ts

@@ -749,6 +749,52 @@ export const automationDefaultNodes = [
     measured: { width: 300, height: 200 },
   },
   // =====================================
+  // Email Node
+  // =====================================
+  {
+    id: 'email-node',
+    type: 'AutomationEmailNode',
+    position: { x: 2200, y: 450 },
+    data: {
+      label: 'Send Email',
+      description: 'Send an email notification',
+      operationType: 'send-email',
+      status: 'Ready',
+      parameters: {
+        to: ['recipient@example.com'],
+        cc: [],
+        bcc: [],
+        subject: 'Workflow Notification',
+        body: 'Your workflow has completed successfully!',
+        htmlBody: '',
+        attachments: [],
+        emailAccessToken: '',
+        emailTokenExpiresAt: undefined,
+        emailProvider: 'smtp',
+        emailAddress: '',
+      },
+      emailAuth: {
+        provider: 'smtp',
+        isAuthenticated: false,
+        isLoading: false,
+        email: '',
+      },
+      formData: {
+        nodeId: 'email-node',
+        title: 'Send Email',
+        type: 'email',
+        operationType: 'send-email',
+        to: ['recipient@example.com'],
+        subject: 'Workflow Notification',
+        body: 'Your workflow has completed successfully!',
+      },
+      lastRun: 'Never',
+    },
+    width: 300,
+    height: 200,
+    measured: { width: 300, height: 200 },
+  },
+  // =====================================
   // Interaction Node
   // =====================================
   {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowuent-org/diagramming-core",
-  "version": "1.3.9",
+  "version": "1.3.10",
   "license": "MIT",
   "publishConfig": {
     "access": "public"

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

@@ -0,0 +1,773 @@
+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,
+  Button,
+  CircularProgress,
+  Tooltip,
+  LinearProgress,
+} from '@mui/material';
+import {
+  Email as EmailIcon,
+  Send as SendIcon,
+  AttachFile as AttachFileIcon,
+  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';
+
+// ========================
+// Types
+// ========================
+
+export type EmailOperationType =
+  | 'send-email'
+  | 'send-with-attachment'
+  | 'send-template'
+  | 'send-bulk'
+  | 'reply-to-email'
+  | 'forward-email';
+
+export interface EmailTokenData {
+  accessToken: string;
+  expiresAt?: number;
+  email?: string;
+  provider?: 'smtp' | 'gmail' | 'outlook' | 'sendgrid' | 'mailgun';
+}
+
+export interface AutomationEmailNodeData {
+  label: string;
+  description: string;
+  operationType?: EmailOperationType;
+  status: 'Ready' | 'Running' | 'Completed' | 'Failed' | 'Need to Config' | 'authenticated';
+  parameters?: {
+    // Email operations
+    to?: string[];
+    cc?: string[];
+    bcc?: string[];
+    subject?: string;
+    body?: string;
+    htmlBody?: string;
+    attachments?: Array<{
+      filename: string;
+      content: string;
+      contentType?: string;
+    }>;
+    
+    // Template operations
+    templateId?: string;
+    templateVariables?: Record<string, any>;
+    
+    // Bulk operations
+    recipients?: Array<{
+      email: string;
+      variables?: Record<string, any>;
+    }>;
+    
+    // Reply/Forward operations
+    replyTo?: string;
+    inReplyTo?: string;
+    forwardTo?: string[];
+    
+    // Token data
+    emailAccessToken?: string;
+    emailTokenExpiresAt?: number;
+    emailProvider?: string;
+    emailAddress?: string;
+
+    [key: string]: any;
+  };
+  emailAuth?: {
+    provider?: string;
+    isAuthenticated?: boolean;
+    isLoading?: boolean;
+    email?: string;
+  };
+  formData?: {
+    nodeId?: string;
+    title?: string;
+    type?: string;
+    operationType?: string;
+    [key: string]: any;
+  };
+  lastRun?: string;
+  duration?: string;
+  executionResult?: {
+    success: boolean;
+    data?: any;
+    error?: string;
+  };
+  onEmailLogin?: () => void;
+  onEmailDisconnect?: () => void;
+}
+
+export interface AutomationEmailNodeProps {
+  data: AutomationEmailNodeData;
+  selected?: boolean;
+}
+
+// ========================
+// Operation Configuration
+// ========================
+
+const OPERATION_CONFIG: Record<
+  EmailOperationType,
+  {
+    icon: React.ElementType;
+    label: string;
+    color: string;
+    description: string;
+  }
+> = {
+  'send-email': {
+    icon: SendIcon,
+    label: 'Send Email',
+    color: '#4285F4',
+    description: 'Send a simple email',
+  },
+  'send-with-attachment': {
+    icon: AttachFileIcon,
+    label: 'Send with Attachment',
+    color: '#34A853',
+    description: 'Send an email with file attachments',
+  },
+  'send-template': {
+    icon: EmailIcon,
+    label: 'Send Template',
+    color: '#FBBC04',
+    description: 'Send an email using a template',
+  },
+  'send-bulk': {
+    icon: EmailIcon,
+    label: 'Send Bulk',
+    color: '#EA4335',
+    description: 'Send bulk emails to multiple recipients',
+  },
+  'reply-to-email': {
+    icon: EmailIcon,
+    label: 'Reply to Email',
+    color: '#4285F4',
+    description: 'Reply to an existing email',
+  },
+  'forward-email': {
+    icon: EmailIcon,
+    label: 'Forward Email',
+    color: '#34A853',
+    description: 'Forward an email to recipients',
+  },
+};
+
+// ========================
+// Helper Functions
+// ========================
+
+const isTokenExpired = (expiresAt?: number): boolean => {
+  if (!expiresAt) return false;
+  return Date.now() > expiresAt;
+};
+
+const getTimeUntilExpiry = (expiresAt?: number): string => {
+  if (!expiresAt) return 'No expiry';
+  const diff = expiresAt - Date.now();
+  if (diff <= 0) return 'Expired';
+  const minutes = Math.floor(diff / 60000);
+  if (minutes < 60) return `${minutes}m`;
+  const hours = Math.floor(minutes / 60);
+  return `${hours}h ${minutes % 60}m`;
+};
+
+// ========================
+// Main Component
+// ========================
+
+export const AutomationEmailNode: React.FC<AutomationEmailNodeProps> = ({
+  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 operation configuration
+  const operationTypeRaw = data.operationType || data.formData?.operationType || 'send-email';
+  const operationType = (Object.keys(OPERATION_CONFIG).includes(operationTypeRaw) ? operationTypeRaw : 'send-email') as EmailOperationType;
+  const operationConfig = OPERATION_CONFIG[operationType];
+  const OperationIcon = operationConfig.icon;
+
+  // Auth state
+  const isAuthenticated = data.emailAuth?.isAuthenticated || !!data.parameters?.emailAccessToken;
+  const isAuthLoading = data.emailAuth?.isLoading || false;
+  const emailAddress = data.emailAuth?.email || data.parameters?.emailAddress;
+  const tokenExpired = isTokenExpired(data.parameters?.emailTokenExpiresAt);
+
+  // Execution state
+  const status = data.status || 'Ready';
+  const executionProgress = status === 'Running' ? 50 : 0;
+
+  // Status configuration - using centralized status colors
+  const statusConfig = getStatusColor(status, status === 'authenticated' ? 'authenticated' : 'ready');
+
+  // 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;
+    }
+  };
+
+  // Render email auth button
+  const renderEmailAuthButton = () => {
+    if (isAuthenticated && !tokenExpired) {
+      return (
+        <Button
+          onClick={data.onEmailDisconnect}
+          disabled={isAuthLoading}
+          fullWidth
+          sx={{
+            backgroundColor: '#4285F4',
+            borderRadius: '8px',
+            padding: '8px 12px',
+            gap: '8px',
+            color: '#FFFFFF',
+            textTransform: 'none',
+            fontSize: '13px',
+            fontWeight: 500,
+            '&:hover': {
+              backgroundColor: '#357ae8',
+            },
+          }}
+        >
+          <EmailIcon sx={{ fontSize: 18 }} />
+          {emailAddress ? emailAddress : 'Connected'}
+        </Button>
+      );
+    }
+
+    return (
+      <Button
+        onClick={data.onEmailLogin}
+        disabled={isAuthLoading}
+        fullWidth
+        sx={{
+          backgroundColor: '#171C29',
+          border: '1px solid #374151',
+          borderRadius: '8px',
+          padding: '8px 12px',
+          gap: '8px',
+          color: '#B2BCD8',
+          textTransform: 'none',
+          fontSize: '13px',
+          fontWeight: 500,
+          '&:hover': {
+            backgroundColor: '#1F2937',
+            borderColor: '#4285F4',
+          },
+          '&:disabled': {
+            opacity: 0.6,
+          },
+        }}
+      >
+        {isAuthLoading ? (
+          <>
+            <CircularProgress size={16} sx={{ color: '#B2BCD8' }} />
+            Connecting...
+          </>
+        ) : (
+          <>
+            <EmailIcon sx={{ fontSize: 18 }} />
+            Connect Email
+          </>
+        )}
+      </Button>
+    );
+  };
+
+  // Render status badge
+  const renderStatusBadge = () => {
+    return (
+      <Chip
+        label={status}
+        size="small"
+        sx={{
+          backgroundColor: statusConfig.bgColor,
+          color: statusConfig.color,
+          fontWeight: 500,
+          fontSize: '11px',
+          height: '22px',
+          borderRadius: '11px',
+        }}
+      />
+    );
+  };
+
+  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 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.emailNode.executionData')}
+                </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]);
+
+  // ========================
+  // Render
+  // ========================
+  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',
+          ...(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
+          }}>
+            {highlightText(data.description || operationConfig.description)}
+          </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: '#0ea5e9',
+                  borderRadius: '50%',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}
+              >
+                <EmailIcon sx={{ fontSize: 18, color: '#FFFFFF' }} />
+              </Box>
+              <Typography variant="h6" sx={{ fontWeight: 600, fontSize: '16px' }}>
+                {highlightText(data.label || operationConfig.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
+              }}>
+                {data.description || operationConfig.description}
+              </Typography>
+            </Box>
+          </Box>
+
+          {/* Email Auth Button */}
+          {renderEmailAuthButton()}
+
+          {/* Operation-specific Parameters Display */}
+          {(operationType === 'send-email' && (data.parameters?.to || data.parameters?.subject)) && (
+            <Box sx={{ mt: 2, mb: 1 }}>
+              {data.parameters?.to && (
+                <Typography variant="caption" sx={{ color: '#9CA3AF', fontSize: '11px', display: 'block' }}>
+                  To: {data.parameters.to.join(', ')}
+                </Typography>
+              )}
+              {data.parameters?.subject && (
+                <Typography variant="caption" sx={{ color: '#9CA3AF', fontSize: '11px', display: 'block', mt: 0.5 }}>
+                  Subject: {data.parameters.subject}
+                </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 || 'Never'}
+            </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, 'Email 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/AutomationGoogleServicesNode.tsx

@@ -463,7 +463,7 @@ export const AutomationGoogleServicesNode: React.FC<AutomationGoogleServicesNode
           borderRadius: '12px',
           color: '#ffffff',
           position: 'relative',
-          boxShadow: selected ? `0 0 0 2px ${serviceConfig.color}50` : '0 4px 8px rgba(0, 0, 0, 0.3)',
+          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',
@@ -471,12 +471,12 @@ export const AutomationGoogleServicesNode: React.FC<AutomationGoogleServicesNode
             animation: 'pulse-glow 2s ease-in-out infinite',
             '@keyframes pulse-glow': {
               '0%, 100%': {
-                boxShadow: `0 0 20px ${serviceConfig.color}40, 0 0 40px ${serviceConfig.color}20`,
-                borderColor: `${serviceConfig.color}60`,
+                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 ${serviceConfig.color}60, 0 0 60px ${serviceConfig.color}30`,
-                borderColor: `${serviceConfig.color}90`,
+                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)',
               },
             },
           }),

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

@@ -403,7 +403,7 @@ export const AutomationInteractionNode: React.FC<AutomationInteractionNodeProps>
           borderRadius: '12px',
           color: '#ffffff',
           position: 'relative',
-          boxShadow: selected ? `0 0 0 2px ${interactionConfig.color}50` : '0 4px 8px rgba(0, 0, 0, 0.3)',
+          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',
@@ -411,12 +411,12 @@ export const AutomationInteractionNode: React.FC<AutomationInteractionNodeProps>
             animation: 'pulse-glow 2s ease-in-out infinite',
             '@keyframes pulse-glow': {
               '0%, 100%': {
-                boxShadow: `0 0 20px ${interactionConfig.color}40, 0 0 40px ${interactionConfig.color}20`,
-                borderColor: `${interactionConfig.color}60`,
+                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 ${interactionConfig.color}60, 0 0 60px ${interactionConfig.color}30`,
-                borderColor: `${interactionConfig.color}90`,
+                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)',
               },
             },
           }),

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

@@ -190,24 +190,22 @@ export const AutomationMonitoringNode: React.FC<AutomationMonitoringNodeProps> =
       sx={{
         bgcolor: '#1E1E2E',
         borderRadius: 2,
-        border: selected ? `2px solid ${monitoringColor}` : '1px solid #374151',
+        border: selected ? '2px solid rgba(59, 130, 246, 0.5)' : '1px solid #374151',
         minWidth: 280,
         maxWidth: 320,
         overflow: 'hidden',
-        boxShadow: selected
-          ? `0 0 20px ${monitoringColor}30`
-          : '0 4px 12px rgba(0, 0, 0, 0.3)',
+        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',
         ...(status === 'Running' && {
           animation: 'pulse-glow 2s ease-in-out infinite',
           '@keyframes pulse-glow': {
             '0%, 100%': {
-              boxShadow: `0 0 20px ${monitoringColor}40, 0 0 40px ${monitoringColor}20`,
-              borderColor: `${monitoringColor}60`,
+              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 ${monitoringColor}60, 0 0 60px ${monitoringColor}30`,
-              borderColor: `${monitoringColor}90`,
+              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)',
             },
           },
         }),

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

@@ -434,14 +434,25 @@ export const AutomationSlackNode: React.FC<AutomationSlackNodeProps> = ({
       sx={{
         bgcolor: '#1E1E2E',
         borderRadius: 2,
-        border: selected ? `2px solid ${operationConfig.color}` : '1px solid #374151',
+        border: selected ? '2px solid rgba(59, 130, 246, 0.5)' : '1px solid #374151',
         minWidth: 280,
         maxWidth: 320,
         overflow: 'hidden',
-        boxShadow: selected
-          ? `0 0 20px ${operationConfig.color}30`
-          : '0 4px 12px rgba(0, 0, 0, 0.3)',
+        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',
+        ...(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={() => setSelectedNode(nodeId || '')}
     >

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

@@ -427,14 +427,25 @@ export const AutomationTelegramNode: React.FC<AutomationTelegramNodeProps> = ({
       sx={{
         bgcolor: '#1E1E2E',
         borderRadius: 2,
-        border: selected ? `2px solid ${operationConfig.color}` : '1px solid #374151',
+        border: selected ? '2px solid rgba(59, 130, 246, 0.5)' : '1px solid #374151',
         minWidth: 280,
         maxWidth: 320,
         overflow: 'hidden',
-        boxShadow: selected
-          ? `0 0 20px ${operationConfig.color}30`
-          : '0 4px 12px rgba(0, 0, 0, 0.3)',
+        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',
+        ...(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={() => setSelectedNode(nodeId || '')}
     >

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

@@ -43,6 +43,14 @@ export type {
   AutomationInteractionNodeData,
   AutomationInteractionNodeProps,
 } from './AutomationInteractionNode';
+// Email Node
+export { AutomationEmailNode } from './AutomationEmailNode';
+export type {
+  EmailOperationType,
+  EmailTokenData,
+  AutomationEmailNodeData,
+  AutomationEmailNodeProps,
+} from './AutomationEmailNode';
 // Monitoring Node
 export { AutomationMonitoringNode } from './AutomationMonitoringNode';
 export type {

package/packages/diagrams/src/lib/types/node-types.ts

@@ -16,6 +16,7 @@ import {
   AutomationSlackNode,
   AutomationTelegramNode,
   AutomationInteractionNode,
+  AutomationEmailNode,
   AutomationMonitoringNode,
 } from '../components/automation';
 
@@ -46,6 +47,8 @@ export default {
   AutomationTelegramNode,
   // Interaction Node
   AutomationInteractionNode,
+  // Email Node
+  AutomationEmailNode,
   // Monitoring Node
   AutomationMonitoringNode,
 };