@flowuent-org/diagramming-core 1.3.8 → 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.8",
+  "version": "1.3.10",
   "license": "MIT",
   "publishConfig": {
     "access": "public"

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

@@ -336,11 +336,13 @@ export const AutomationApiNode: React.FC<AutomationApiNodeProps> = ({ data, sele
                             sx={{
                                 width: '32px',
                                 height: '32px',
+                                minWidth: '32px',
                                 backgroundColor: '#1E3A8A',
                                 borderRadius: '50%',
                                 display: 'flex',
                                 alignItems: 'center',
                                 justifyContent: 'center',
+                                flexShrink: 0,
                             }}                       
                         >
                             <ApiNodeIcon/>

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/AutomationFormattingNode.tsx

@@ -338,9 +338,25 @@ export const AutomationFormattingNode: React.FC<AutomationFormattingNodeProps> =
                 {/* Title Section */}
                 <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
                     <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
-                        
-                                <FormattingNodeIcon  />
-                           
+                        <Box
+                            sx={{
+                                width: '32px',
+                                height: '32px',
+                                minWidth: '32px',
+                                backgroundColor: '#1E3A8A',
+                                borderRadius: '50%',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                flexShrink: 0,
+                            }}
+                        >
+                            {isArticleAnalyzer ? (
+                                <ArticleAnalyzerIcon size={18} color="#FFFFFF" />
+                            ) : (
+                                <FormattingNodeIcon size={18} color="#FFFFFF" />
+                            )}
+                        </Box>
                         <Typography variant="h6" sx={{ fontWeight: 600, fontSize: '16px' }}>
                             {highlightText(data.label)}
                         </Typography>

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)',
               },
             },
           }),
@@ -485,7 +485,7 @@ export const AutomationGoogleServicesNode: React.FC<AutomationGoogleServicesNode
       >
         {/* Top Header Section */}
         <Box sx={{
-          backgroundColor: `${serviceConfig.color}15`,
+          backgroundColor: "rgba(67, 93, 132, 0.1)",
           padding: '8px 16px',
           borderRadius: '12px 12px 0 0'
         }}>
@@ -507,11 +507,13 @@ export const AutomationGoogleServicesNode: React.FC<AutomationGoogleServicesNode
                 sx={{
                   width: '32px',
                   height: '32px',
+                  minWidth: '32px',
                   backgroundColor: '#1E3A8A',
                   borderRadius: '50%',
                   display: 'flex',
                   alignItems: 'center',
                   justifyContent: 'center',
+                  flexShrink: 0,
                 }}
               >
                 <ServiceIcon sx={{ color: 'white', fontSize: '18px' }} />

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)',
               },
             },
           }),
@@ -425,7 +425,7 @@ export const AutomationInteractionNode: React.FC<AutomationInteractionNodeProps>
       >
         {/* Top Header Section */}
         <Box sx={{
-          backgroundColor: `${interactionConfig.color}15`,
+          backgroundColor: "rgba(67, 93, 132, 0.1)",
           padding: '8px 16px',
           borderRadius: '12px 12px 0 0'
         }}>
@@ -447,11 +447,13 @@ export const AutomationInteractionNode: React.FC<AutomationInteractionNodeProps>
                 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' }} />

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/AutomationNavigationNode.tsx

@@ -295,9 +295,21 @@ export const AutomationNavigationNode: React.FC<AutomationNavigationNodeProps> =
                     {/* 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: '#8b5cf6',
+                                    borderRadius: '50%',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    flexShrink: 0,
+                                }}
+                            >
                                 <NavigationIcon />
-                            
+                            </Box>
                             <Typography variant="h6" sx={{ fontWeight: 600, fontSize: '16px' }}>
                                 {highlightText(data.label)}
                             </Typography>

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

@@ -746,6 +746,21 @@ Data: ${JSON.stringify(data, null, 2)}
                 }}
                 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.description || 'Export data to Google Sheets'}
+                </Typography>
+            </Box>
+
             {/* Header */}
             <Box sx={{
                 display: 'flex',
@@ -759,11 +774,13 @@ Data: ${JSON.stringify(data, null, 2)}
                         sx={{
                             width: '32px',
                             height: '32px',
+                            minWidth: '32px',
                             backgroundColor: '#1E3A8A',
                             borderRadius: '50%',
                             display: 'flex',
                             alignItems: 'center',
                             justifyContent: 'center',
+                            flexShrink: 0,
                         }}
                     >
                         <IconComponent sx={{ color: 'white', fontSize: '18px' }} />

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 || '')}
     >
@@ -457,11 +468,26 @@ export const AutomationSlackNode: React.FC<AutomationSlackNodeProps> = ({
         }}
       />
 
+      {/* 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.description || operationConfig.description}
+        </Typography>
+      </Box>
+
       {/* Header */}
       <Box
         sx={{
-          bgcolor: `${operationConfig.color}15`,
-          borderBottom: `1px solid ${operationConfig.color}30`,
+          bgcolor: "rgba(67, 93, 132, 0.1)",
+          borderBottom: `1px solid rgba(67, 93, 132, 0.2)`,
           px: 2,
           py: 1.5,
           display: 'flex',
@@ -474,11 +500,13 @@ export const AutomationSlackNode: React.FC<AutomationSlackNodeProps> = ({
             sx={{
               width: '32px',
               height: '32px',
+              minWidth: '32px',
               backgroundColor: '#1E3A8A',
               borderRadius: '50%',
               display: 'flex',
               alignItems: 'center',
               justifyContent: 'center',
+              flexShrink: 0,
             }}
           >
             <OperationIcon sx={{ fontSize: 18, color: '#fff' }} />
@@ -490,12 +518,6 @@ export const AutomationSlackNode: React.FC<AutomationSlackNodeProps> = ({
             >
               {highlightText(data.label || operationConfig.label)}
             </Typography>
-            <Typography
-              variant="caption"
-              sx={{ color: '#9CA3AF', fontSize: 10 }}
-            >
-              {data.description || operationConfig.description}
-            </Typography>
           </Box>
         </Box>
         {renderStatusBadge()}

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 || '')}
     >
@@ -450,11 +461,26 @@ export const AutomationTelegramNode: React.FC<AutomationTelegramNodeProps> = ({
         }}
       />
 
+      {/* 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.description || operationConfig.description}
+        </Typography>
+      </Box>
+
       {/* Header */}
       <Box
         sx={{
-          bgcolor: `${operationConfig.color}15`,
-          borderBottom: `1px solid ${operationConfig.color}30`,
+          bgcolor: "rgba(67, 93, 132, 0.1)",
+          borderBottom: `1px solid rgba(67, 93, 132, 0.2)`,
           px: 2,
           py: 1.5,
           display: 'flex',
@@ -467,11 +493,13 @@ export const AutomationTelegramNode: React.FC<AutomationTelegramNodeProps> = ({
             sx={{
               width: '32px',
               height: '32px',
+              minWidth: '32px',
               backgroundColor: '#1E3A8A',
               borderRadius: '50%',
               display: 'flex',
               alignItems: 'center',
               justifyContent: 'center',
+              flexShrink: 0,
             }}
           >
             <OperationIcon sx={{ fontSize: 18, color: '#fff' }} />
@@ -483,12 +511,6 @@ export const AutomationTelegramNode: React.FC<AutomationTelegramNodeProps> = ({
             >
               {highlightText(data.label || operationConfig.label)}
             </Typography>
-            <Typography
-              variant="caption"
-              sx={{ color: '#9CA3AF', fontSize: 10 }}
-            >
-              {data.description || operationConfig.description}
-            </Typography>
           </Box>
         </Box>
         {renderStatusBadge()}

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,
 };

package/packages/molecules/src/lib/SvgIcons/icons.tsx

@@ -67,9 +67,9 @@ export const ArticleAnalyzerIcon: React.FC<SvgIconProps> = ({ size = 15, color =
 export const StartNodeIcon: React.FC<SvgIconProps> = ({ size, color, style }) => (
   <svg width="35" height="35" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M0 14C0 6.26801 6.26801 0 14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14Z" fill="#1E3A8A"/>
-<g clip-path="url(#clip0_8650_35616)">
-<path d="M14.0007 20.6663C17.6825 20.6663 20.6673 17.6816 20.6673 13.9997C20.6673 10.3178 17.6825 7.33301 14.0007 7.33301C10.3188 7.33301 7.33398 10.3178 7.33398 13.9997C7.33398 17.6816 10.3188 20.6663 14.0007 20.6663Z" stroke="#86EFAC" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M12.666 11.333L16.666 13.9997L12.666 16.6663V11.333Z" stroke="#86EFAC" stroke-linecap="round" stroke-linejoin="round"/>
+<g clipPath="url(#clip0_8650_35616)">
+<path d="M14.0007 20.6663C17.6825 20.6663 20.6673 17.6816 20.6673 13.9997C20.6673 10.3178 17.6825 7.33301 14.0007 7.33301C10.3188 7.33301 7.33398 10.3178 7.33398 13.9997C7.33398 17.6816 10.3188 20.6663 14.0007 20.6663Z" stroke="#86EFAC" strokeLinecap="round" strokeLinejoin="round"/>
+<path d="M12.666 11.333L16.666 13.9997L12.666 16.6663V11.333Z" stroke="#86EFAC" strokeLinecap="round" strokeLinejoin="round"/>
 </g>
 <defs>
 <clipPath id="clip0_8650_35616">
@@ -85,10 +85,10 @@ export const StartNodeIcon: React.FC<SvgIconProps> = ({ size, color, style }) =>
   export const NavigationIcon: React.FC<SvgIconProps> = ({ size, color, style }) => (
     <svg width="35" height="35" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path d="M0 14C0 6.26801 6.26801 0 14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14Z" fill="#1E3A8A"/>
-  <g clip-path="url(#clip0_8650_35642)">
-  <path d="M14.0007 20.6663C17.6825 20.6663 20.6673 17.6816 20.6673 13.9997C20.6673 10.3178 17.6825 7.33301 14.0007 7.33301C10.3188 7.33301 7.33398 10.3178 7.33398 13.9997C7.33398 17.6816 10.3188 20.6663 14.0007 20.6663Z" stroke="#93C5FD" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M14.0007 7.33301C12.2888 9.13044 11.334 11.5175 11.334 13.9997C11.334 16.4818 12.2888 18.8689 14.0007 20.6663C15.7125 18.8689 16.6673 16.4818 16.6673 13.9997C16.6673 11.5175 15.7125 9.13044 14.0007 7.33301Z" stroke="#93C5FD" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M7.33398 14H20.6673" stroke="#93C5FD" stroke-linecap="round" stroke-linejoin="round"/>
+  <g clipPath="url(#clip0_8650_35642)">
+  <path d="M14.0007 20.6663C17.6825 20.6663 20.6673 17.6816 20.6673 13.9997C20.6673 10.3178 17.6825 7.33301 14.0007 7.33301C10.3188 7.33301 7.33398 10.3178 7.33398 13.9997C7.33398 17.6816 10.3188 20.6663 14.0007 20.6663Z" stroke="#93C5FD" strokeLinecap="round" strokeLinejoin="round"/>
+  <path d="M14.0007 7.33301C12.2888 9.13044 11.334 11.5175 11.334 13.9997C11.334 16.4818 12.2888 18.8689 14.0007 20.6663C15.7125 18.8689 16.6673 16.4818 16.6673 13.9997C16.6673 11.5175 15.7125 9.13044 14.0007 7.33301Z" stroke="#93C5FD" strokeLinecap="round" strokeLinejoin="round"/>
+  <path d="M7.33398 14H20.6673" stroke="#93C5FD" strokeLinecap="round" strokeLinejoin="round"/>
   </g>
   <defs>
   <clipPath id="clip0_8650_35642">
@@ -269,7 +269,7 @@ export const EntityIcon: React.FC<SvgIconProps> = ({ size, color = '#86EFAC', st
 export const EndNodeIcon: React.FC<SvgIconProps> = ({ size,  color , style }) => (
   <svg width="35" height="35" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M0 14C0 6.26801 6.26801 0 14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14Z" fill="#1E3A8A"/>
-<path d="M18.6667 8H9.33333C8.59695 8 8 8.59695 8 9.33333V18.6667C8 19.403 8.59695 20 9.33333 20H18.6667C19.403 20 20 19.403 20 18.6667V9.33333C20 8.59695 19.403 8 18.6667 8Z" stroke="#FCA5A5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.6667 8H9.33333C8.59695 8 8 8.59695 8 9.33333V18.6667C8 19.403 8.59695 20 9.33333 20H18.6667C19.403 20 20 19.403 20 18.6667V9.33333C20 8.59695 19.403 8 18.6667 8Z" stroke="#FCA5A5" strokeLinecap="round" strokeLinejoin="round"/>
 </svg>
 
 );
@@ -277,16 +277,16 @@ export const EndNodeIcon: React.FC<SvgIconProps> = ({ size,  color , style }) =>
   export const FormattingNodeIcon: React.FC<SvgIconProps> = ({ size,  color , style }) => (
     <svg width="35" height="35" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path d="M0 14C0 6.26801 6.26801 0 14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14Z" fill="#1E3A8A"/>
-  <path d="M15.9993 7.33301H9.99935C9.64573 7.33301 9.30659 7.47348 9.05654 7.72353C8.80649 7.97358 8.66602 8.31272 8.66602 8.66634V19.333C8.66602 19.6866 8.80649 20.0258 9.05654 20.2758C9.30659 20.5259 9.64573 20.6663 9.99935 20.6663H17.9993C18.353 20.6663 18.6921 20.5259 18.9422 20.2758C19.1922 20.0258 19.3327 19.6866 19.3327 19.333V10.6663L15.9993 7.33301Z" stroke="#D8B4FE" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M15.334 7.33301V9.99967C15.334 10.3533 15.4745 10.6924 15.7245 10.9425C15.9746 11.1925 16.3137 11.333 16.6673 11.333H19.334" stroke="#D8B4FE" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M12.6673 12H11.334" stroke="#D8B4FE" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M16.6673 14.667H11.334" stroke="#D8B4FE" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M16.6673 17.333H11.334" stroke="#D8B4FE" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M15.9993 7.33301H9.99935C9.64573 7.33301 9.30659 7.47348 9.05654 7.72353C8.80649 7.97358 8.66602 8.31272 8.66602 8.66634V19.333C8.66602 19.6866 8.80649 20.0258 9.05654 20.2758C9.30659 20.5259 9.64573 20.6663 9.99935 20.6663H17.9993C18.353 20.6663 18.6921 20.5259 18.9422 20.2758C19.1922 20.0258 19.3327 19.6866 19.3327 19.333V10.6663L15.9993 7.33301Z" stroke="#D8B4FE" strokeLinecap="round" strokeLinejoin="round"/>
+  <path d="M15.334 7.33301V9.99967C15.334 10.3533 15.4745 10.6924 15.7245 10.9425C15.9746 11.1925 16.3137 11.333 16.6673 11.333H19.334" stroke="#D8B4FE" strokeLinecap="round" strokeLinejoin="round"/>
+  <path d="M12.6673 12H11.334" stroke="#D8B4FE" strokeLinecap="round" strokeLinejoin="round"/>
+  <path d="M16.6673 14.667H11.334" stroke="#D8B4FE" strokeLinecap="round" strokeLinejoin="round"/>
+  <path d="M16.6673 17.333H11.334" stroke="#D8B4FE" strokeLinecap="round" strokeLinejoin="round"/>
   </svg>
   );
 
   export const ApiNodeIcon: React.FC<SvgIconProps> = ({ size,  color , style }) => (
     <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3.89167 3.92167L2.66667 2.68583M10.4242 3.92167L11.6492 2.68583M2.66583 11.7525L3.89083 10.5158M7.1575 2.27417V0.625M2.2575 7.21917H0.625M12.1875 12.155L15.3658 10.9C15.4425 10.8693 15.5083 10.8164 15.5546 10.748C15.6009 10.6796 15.6256 10.5988 15.6256 10.5162C15.6256 10.4337 15.6009 10.3529 15.5546 10.2845C15.5083 10.2161 15.4425 10.1632 15.3658 10.1325L7.72833 7.12C7.65398 7.09123 7.57285 7.08475 7.49488 7.10138C7.4169 7.118 7.34547 7.157 7.28931 7.21359C7.23316 7.27019 7.19472 7.34193 7.17871 7.42003C7.1627 7.49813 7.16981 7.57921 7.19917 7.65333L10.1842 15.3625C10.3192 15.7125 10.8092 15.7125 10.9442 15.3625L12.1875 12.155Z" stroke="#FCFAFF" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3.89167 3.92167L2.66667 2.68583M10.4242 3.92167L11.6492 2.68583M2.66583 11.7525L3.89083 10.5158M7.1575 2.27417V0.625M2.2575 7.21917H0.625M12.1875 12.155L15.3658 10.9C15.4425 10.8693 15.5083 10.8164 15.5546 10.748C15.6009 10.6796 15.6256 10.5988 15.6256 10.5162C15.6256 10.4337 15.6009 10.3529 15.5546 10.2845C15.5083 10.2161 15.4425 10.1632 15.3658 10.1325L7.72833 7.12C7.65398 7.09123 7.57285 7.08475 7.49488 7.10138C7.4169 7.118 7.34547 7.157 7.28931 7.21359C7.23316 7.27019 7.19472 7.34193 7.17871 7.42003C7.1627 7.49813 7.16981 7.57921 7.19917 7.65333L10.1842 15.3625C10.3192 15.7125 10.8092 15.7125 10.9442 15.3625L12.1875 12.155Z" stroke="#FCFAFF" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round"/>
 </svg>
 );