@flowuent-org/diagramming-core 1.3.10 → 1.4.1

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

@@ -1,773 +0,0 @@
-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>
-  );
-};