@flowuent-org/diagramming-core 1.3.7 → 1.3.9

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

@@ -7,10 +7,10 @@ import {
   Chip,
   IconButton,
   Card,
+  CardContent,
   Button,
   CircularProgress,
   Tooltip,
-  LinearProgress,
 } from '@mui/material';
 import {
   Description as DocsIcon,
@@ -20,16 +20,15 @@ import {
   TableChart as SheetsIcon,
   CalendarMonth as CalendarIcon,
   AccessTime as AccessTimeIcon,
-  CheckCircle as CheckCircleIcon,
-  Error as ErrorIcon,
-  LinkOff as LinkOffIcon,
 } from '@mui/icons-material';
 import { FcGoogle } from 'react-icons/fc';
 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';
 
 // ========================
@@ -219,13 +218,18 @@ export const AutomationGoogleServicesNode: React.FC<AutomationGoogleServicesNode
   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 service configuration
   const serviceType = data.serviceType || 'docs';
@@ -240,7 +244,6 @@ export const AutomationGoogleServicesNode: React.FC<AutomationGoogleServicesNode
 
   // Execution state
   const status = data.status || 'Ready';
-  const executionProgress = status === 'Running' ? 50 : 0;
 
   // Status configuration - using centralized status colors
   const statusConfig = getStatusColor(status, 'ready');
@@ -254,6 +257,7 @@ export const AutomationGoogleServicesNode: React.FC<AutomationGoogleServicesNode
 
   const handleClose = () => {
     setIsJsonOpen(false);
+    // Clean up portal
     if (rootRef.current) {
       rootRef.current.unmount();
       rootRef.current = null;
@@ -277,7 +281,6 @@ export const AutomationGoogleServicesNode: React.FC<AutomationGoogleServicesNode
     };
   }, [isJsonOpen]);
 
-  // JSON popover portal
   useEffect(() => {
     if (isJsonOpen) {
       const portalRoot = document.createElement('div');
@@ -301,74 +304,56 @@ export const AutomationGoogleServicesNode: React.FC<AutomationGoogleServicesNode
             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',
+              },
+            },
           }}
         >
-          <Box
-            sx={{
-              p: 2,
-              borderBottom: '1px solid #333',
-              display: 'flex',
-              justifyContent: 'space-between',
-              alignItems: 'center',
-            }}
-          >
-            <Typography variant="subtitle1" sx={{ fontWeight: 600 }}>
-              {serviceConfig.label} Configuration
-            </Typography>
-            <IconButton size="small" onClick={handleClose} sx={{ color: '#fff' }}>
+          <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>
-          </Box>
-          <Box sx={{ p: 2 }}>
-            <ReactJson
-              src={data}
-              theme="monokai"
-              collapsed={1}
-              displayDataTypes={false}
-              enableClipboard={false}
-              style={{
-                backgroundColor: 'transparent',
-                fontSize: '12px',
-              }}
-            />
-          </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>
       );
-    }
-    return () => {
+    } else {
+      // Clean up when closing
       if (rootRef.current) {
         rootRef.current.unmount();
         rootRef.current = null;
       }
-      if (portalRef.current && portalRef.current.parentNode) {
+      if (portalRef.current) {
         document.body.removeChild(portalRef.current);
         portalRef.current = null;
       }
-    };
+    }
   }, [isJsonOpen, data]);
 
-  // Render status badge
-  const renderStatusBadge = () => (
-    <Chip
-      size="small"
-      label={
-        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
-          {(status === 'Completed' || status === 'success') && <CheckCircleIcon sx={{ fontSize: 12 }} />}
-          {(status === 'Failed' || status === 'error') && <ErrorIcon sx={{ fontSize: 12 }} />}
-          <span>{statusConfig.label}</span>
-        </Box>
-      }
-      sx={{
-        height: 20,
-        fontSize: '10px',
-        fontWeight: 600,
-        color: statusConfig.color,
-        bgcolor: statusConfig.bgColor,
-        border: `1px solid ${statusConfig.color}20`,
-        '& .MuiChip-label': { px: 1 },
-      }}
-    />
-  );
 
   // Render Google Auth Button
   const renderGoogleAuthButton = () => {
@@ -437,234 +422,349 @@ export const AutomationGoogleServicesNode: React.FC<AutomationGoogleServicesNode
     );
   };
 
-  // ========================
-  // Render
-  // ========================
+  // Get service details for display
+  const getServiceDetails = (): string => {
+    if (serviceType === 'docs' && data.parameters?.documentTitle) {
+      return data.parameters.documentTitle;
+    }
+    if (serviceType === 'slides' && data.parameters?.presentationTitle) {
+      return data.parameters.presentationTitle;
+    }
+    if (serviceType === 'meet' && data.parameters?.meetingTitle) {
+      return data.parameters.meetingTitle;
+    }
+    if (serviceType === 'gmail' && data.parameters?.subject) {
+      return data.parameters.subject;
+    }
+    if (serviceType === 'sheets' && data.parameters?.sheetName) {
+      return data.parameters.sheetName;
+    }
+    if (serviceType === 'calendar' && data.parameters?.eventTitle) {
+      return data.parameters.eventTitle;
+    }
+    return serviceConfig.description;
+  };
+
   return (
     <Box
       sx={{
-        bgcolor: '#1E1E2E',
-        borderRadius: 2,
-        border: selected ? `2px solid ${serviceConfig.color}` : '1px solid #374151',
-        minWidth: 280,
-        maxWidth: 320,
-        overflow: 'hidden',
-        boxShadow: selected
-          ? `0 0 20px ${serviceConfig.color}30`
-          : '0 4px 12px rgba(0, 0, 0, 0.3)',
-        transition: 'all 0.2s ease',
+        position: 'relative',
+        width: '336px',
+        overflow: 'visible',
       }}
-      onClick={() => setSelectedNode(nodeId || '')}
     >
-      {/* Input Handle */}
-      <Handle
-        type="target"
-        position={Position.Left}
-        style={{
-          background: serviceConfig.color,
-          width: 10,
-          height: 10,
-          border: '2px solid #1E1E2E',
-        }}
-      />
-
-      {/* Header */}
       <Box
+        ref={nodeRef}
         sx={{
-          bgcolor: `${serviceConfig.color}15`,
-          borderBottom: `1px solid ${serviceConfig.color}30`,
-          px: 2,
-          py: 1.5,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
+          width: '336px',
+          minHeight: '150px',
+          backgroundColor: '#181C25',
+          border: selected ? `2px solid ${serviceConfig.color}` : '1px solid #1e293b',
+          borderRadius: '12px',
+          color: '#ffffff',
+          position: 'relative',
+          boxShadow: selected ? `0 0 0 2px ${serviceConfig.color}50` : '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 ${serviceConfig.color}40, 0 0 40px ${serviceConfig.color}20`,
+                borderColor: `${serviceConfig.color}60`,
+              },
+              '50%': {
+                boxShadow: `0 0 30px ${serviceConfig.color}60, 0 0 60px ${serviceConfig.color}30`,
+                borderColor: `${serviceConfig.color}90`,
+              },
+            },
+          }),
         }}
+        onClick={handleJsonClick}
       >
-        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
-          <Box
-            sx={{
-              bgcolor: serviceConfig.color,
-              borderRadius: 1,
-              p: 0.75,
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-            }}
-          >
-            <ServiceIcon sx={{ fontSize: 18, color: '#fff' }} />
-          </Box>
-          <Box>
-            <Typography
-              variant="subtitle2"
-              sx={{ color: '#fff', fontWeight: 600, fontSize: 13 }}
-            >
-              {highlightText(data.label || serviceConfig.label)}
-            </Typography>
-            <Typography
-              variant="caption"
-              sx={{ color: '#9CA3AF', fontSize: 10 }}
-            >
-              {data.description || serviceConfig.description}
-            </Typography>
-          </Box>
+        {/* 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 || serviceConfig.description)}
+          </Typography>
         </Box>
-        {renderStatusBadge()}
-      </Box>
 
-      {/* Content */}
-      <Box sx={{ px: 2, py: 1.5 }}>
-        {/* Google Auth Button - Show on all Google nodes */}
-        <Box sx={{ mb: 1.5 }}>
-          {renderGoogleAuthButton()}
-          {!isAuthenticated && (
-            <Typography
-              variant="caption"
-              sx={{
-                color: '#6B7280',
-                fontSize: 10,
-                display: 'block',
-                textAlign: 'center',
-                mt: 0.5,
-              }}
-            >
-              Click to authenticate with Google
-            </Typography>
-          )}
-        </Box>
-
-        {/* Progress Bar (when running) */}
-        {status === 'Running' && (
-          <Box sx={{ mb: 1.5 }}>
-            <LinearProgress
-              variant="determinate"
-              value={executionProgress}
+        {/* Main Content */}
+        <Box sx={{ padding: '16px' }}>
+          {/* Title Section */}
+          <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
+              <Box
+                sx={{
+                  width: '32px',
+                  height: '32px',
+                  minWidth: '32px',
+                  backgroundColor: '#1E3A8A',
+                  borderRadius: '50%',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  flexShrink: 0,
+                }}
+              >
+                <ServiceIcon sx={{ color: 'white', fontSize: '18px' }} />
+              </Box>
+              <Typography variant="h6" sx={{ fontWeight: 600, fontSize: '16px' }}>
+                {highlightText(data.label || serviceConfig.label)}
+              </Typography>
+            </Box>
+            <Chip
+              label={status}
+              size="small"
               sx={{
-                height: 4,
-                borderRadius: 2,
-                bgcolor: 'rgba(59, 130, 246, 0.1)',
-                '& .MuiLinearProgress-bar': {
-                  bgcolor: serviceConfig.color,
-                },
+                backgroundColor: statusConfig.bgColor,
+                color: statusConfig.color,
+                fontWeight: 500,
+                fontSize: '12px',
+                height: '24px',
+                borderRadius: '12px',
               }}
             />
           </Box>
-        )}
 
-        {/* Token Expiry Info */}
-        {isAuthenticated && (
-          <Box sx={{ mb: 1.5 }}>
-            <Tooltip title={`Token expires in ${getTimeUntilExpiry(data.parameters?.googleTokenExpiresAt)}`}>
-              <Chip
-                size="small"
-                label={getTimeUntilExpiry(data.parameters?.googleTokenExpiresAt)}
-                sx={{
-                  height: 18,
-                  fontSize: '9px',
-                  backgroundColor: tokenExpired ? '#EF4444' : '#3B82F6',
-                  color: '#FFFFFF',
-                  fontWeight: 500,
-                }}
-              />
-            </Tooltip>
+          {/* Google Auth Button */}
+          <Box sx={{ mb: 2 }}>
+            {renderGoogleAuthButton()}
           </Box>
-        )}
 
-        {/* Service-specific Parameters Display */}
-        <Box sx={{ mb: 1.5 }}>
-          {serviceType === 'docs' && data.parameters?.documentTitle && (
-            <Typography variant="caption" sx={{ color: '#9CA3AF', fontSize: 10 }}>
-              Document: {data.parameters.documentTitle}
-            </Typography>
-          )}
-          {serviceType === 'slides' && data.parameters?.presentationTitle && (
-            <Typography variant="caption" sx={{ color: '#9CA3AF', fontSize: 10 }}>
-              Presentation: {data.parameters.presentationTitle}
-            </Typography>
-          )}
-          {serviceType === 'meet' && data.parameters?.meetingTitle && (
-            <Typography variant="caption" sx={{ color: '#9CA3AF', fontSize: 10 }}>
-              Meeting: {data.parameters.meetingTitle}
-            </Typography>
-          )}
-          {serviceType === 'gmail' && data.parameters?.subject && (
-            <Typography variant="caption" sx={{ color: '#9CA3AF', fontSize: 10 }}>
-              Subject: {data.parameters.subject}
-            </Typography>
-          )}
-          {serviceType === 'sheets' && data.parameters?.sheetName && (
-            <Typography variant="caption" sx={{ color: '#9CA3AF', fontSize: 10 }}>
-              Sheet: {data.parameters.sheetName}
-            </Typography>
+          {/* 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
+              }}>
+                {getServiceDetails()}
+              </Typography>
+            </Box>
+          </Box>
+
+          {/* Token Expiry Info */}
+          {isAuthenticated && (
+            <Box sx={{ mb: 2 }}>
+              <Tooltip title={`Token expires in ${getTimeUntilExpiry(data.parameters?.googleTokenExpiresAt)}`}>
+                <Chip
+                  size="small"
+                  label={getTimeUntilExpiry(data.parameters?.googleTokenExpiresAt)}
+                  sx={{
+                    height: 18,
+                    fontSize: '9px',
+                    backgroundColor: tokenExpired ? '#EF4444' : '#3B82F6',
+                    color: '#FFFFFF',
+                    fontWeight: 500,
+                  }}
+                />
+              </Tooltip>
+            </Box>
           )}
-          {serviceType === 'calendar' && data.parameters?.eventTitle && (
-            <Typography variant="caption" sx={{ color: '#9CA3AF', fontSize: 10 }}>
-              Event: {data.parameters.eventTitle}
-            </Typography>
+
+          {/* Last Run Info */}
+          {data.lastRun && (
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, mt: 1 }}>
+              <AccessTimeIcon sx={{ fontSize: '14px', color: '#9CA3AF' }} />
+              <Typography variant="body2" sx={{ color: '#9CA3AF', fontSize: '11px' }}>
+                {t('automation.common.lastRan')}: {data.lastRun}
+                {data.duration && ` · ${data.duration}`}
+              </Typography>
+            </Box>
           )}
         </Box>
 
-        {/* Execution Result */}
-        {data.executionResult && (
-          <Box
-            sx={{
-              bgcolor: data.executionResult.success
-                ? 'rgba(16, 185, 129, 0.1)'
-                : 'rgba(239, 68, 68, 0.1)',
-              borderRadius: 1,
-              p: 1,
-              mb: 1.5,
-              border: `1px solid ${
-                data.executionResult.success
-                  ? 'rgba(16, 185, 129, 0.3)'
-                  : 'rgba(239, 68, 68, 0.3)'
-              }`,
-            }}
-          >
-            <Typography
-              variant="caption"
-              sx={{
-                color: data.executionResult.success ? '#10B981' : '#EF4444',
-                fontSize: 10,
-              }}
-            >
-              {data.executionResult.success
-                ? '✓ Operation completed'
-                : `✗ ${data.executionResult.error || 'Operation failed'}`}
-            </Typography>
-          </Box>
-        )}
-
-        {/* Last Run Info */}
-        {data.lastRun && (
-          <Box
-            sx={{
-              display: 'flex',
-              alignItems: 'center',
-              gap: 0.5,
-              justifyContent: 'center',
-            }}
-          >
-            <AccessTimeIcon sx={{ fontSize: 10, color: '#6B7280' }} />
-            <Typography variant="caption" sx={{ color: '#6B7280', fontSize: 9 }}>
-              Last run: {data.lastRun}
-              {data.duration && ` · ${data.duration}`}
-            </Typography>
-          </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 */}
-      <NodeActionButtons selected={selected} />
-
-      {/* Output Handle */}
-      <Handle
-        type="source"
-        position={Position.Right}
-        style={{
-          background: serviceConfig.color,
-          width: 10,
-          height: 10,
-          border: '2px solid #1E1E2E',
+      {/* Node Action Buttons - Shows when selected */}
+      <NodeActionButtons
+        selected={selected}
+        onOpenAIAssistant={(buttonElement) => {
+          if (nodeId) {
+            showNodeAIAssistantPopup(nodeId, 'Google Services 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>