@flowuent-org/diagramming-core 1.3.7 → 1.3.9

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

@@ -7,7 +7,7 @@ import {
   Chip,
   IconButton,
   Card,
-  LinearProgress,
+  CardContent,
 } from '@mui/material';
 import {
   Mouse as MouseIcon,
@@ -18,14 +18,14 @@ import {
   CheckBox as CheckBoxIcon,
   RadioButtonChecked as RadioButtonIcon,
   AccessTime as AccessTimeIcon,
-  CheckCircle as CheckCircleIcon,
-  Error as ErrorIcon,
 } 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';
 
 // ========================
@@ -252,22 +252,29 @@ export const AutomationInteractionNode: React.FC<AutomationInteractionNodeProps>
   data,
   selected,
 }) => {
+  const { t } = useTranslation();
   const { highlightText } = useSearch();
   const [isJsonOpen, setIsJsonOpen] = useState(false);
   const rootRef = useRef<any>(null);
   const portalRef = useRef<HTMLDivElement | null>(null);
+  const nodeRef = useRef<HTMLDivElement | null>(null);
   const nodeId = useNodeId();
   const setSelectedNode = useDiagram((state) => state.setSelectedNode);
   const enableJson = useDiagram((state) => state.enableNodeJsonPopover ?? true);
+  const onNodesChange = useDiagram((state) => state.onNodesChange);
+  const nodes = useDiagram((state) => state.nodes);
+  const setNodes = useDiagram((state) => state.setNodes);
 
   // Get interaction configuration
-  const interactionType = data.interactionType || data.formData?.interactionType || 'click';
-  const interactionConfig = INTERACTION_CONFIG[interactionType] || INTERACTION_CONFIG['click'];
+  const interactionTypeRaw = data.interactionType || data.formData?.interactionType || 'click';
+  const interactionType = (Object.keys(INTERACTION_CONFIG).includes(interactionTypeRaw) 
+    ? interactionTypeRaw 
+    : 'click') as InteractionType;
+  const interactionConfig = INTERACTION_CONFIG[interactionType];
   const InteractionIcon = interactionConfig.icon;
 
   // Execution state
   const status = data.status || 'Ready';
-  const executionProgress = status === 'Running' ? 50 : 0;
 
   // Status configuration - using centralized status colors
   const statusConfig = getStatusColor(status);
@@ -281,6 +288,7 @@ export const AutomationInteractionNode: React.FC<AutomationInteractionNodeProps>
 
   const handleClose = () => {
     setIsJsonOpen(false);
+    // Clean up portal
     if (rootRef.current) {
       rootRef.current.unmount();
       rootRef.current = null;
@@ -304,7 +312,6 @@ export const AutomationInteractionNode: React.FC<AutomationInteractionNodeProps>
     };
   }, [isJsonOpen]);
 
-  // JSON popover portal
   useEffect(() => {
     if (isJsonOpen) {
       const portalRoot = document.createElement('div');
@@ -328,265 +335,352 @@ export const AutomationInteractionNode: React.FC<AutomationInteractionNodeProps>
             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 }}>
-              Interaction 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' && <CheckCircleIcon sx={{ fontSize: 12 }} />}
-          {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
-  // ========================
   return (
     <Box
       sx={{
-        bgcolor: '#1E1E2E',
-        borderRadius: 2,
-        border: selected ? `2px solid ${interactionConfig.color}` : '1px solid #374151',
-        minWidth: 280,
-        maxWidth: 320,
-        overflow: 'hidden',
-        boxShadow: selected
-          ? `0 0 20px ${interactionConfig.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: interactionConfig.color,
-          width: 10,
-          height: 10,
-          border: '2px solid #1E1E2E',
-        }}
-      />
-
-      {/* Header */}
       <Box
+        ref={nodeRef}
         sx={{
-          bgcolor: `${interactionConfig.color}15`,
-          borderBottom: `1px solid ${interactionConfig.color}30`,
-          px: 2,
-          py: 1.5,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
+          width: '336px',
+          minHeight: '150px',
+          backgroundColor: '#181C25',
+          border: selected ? `2px solid ${interactionConfig.color}` : '1px solid #1e293b',
+          borderRadius: '12px',
+          color: '#ffffff',
+          position: 'relative',
+          boxShadow: selected ? `0 0 0 2px ${interactionConfig.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 ${interactionConfig.color}40, 0 0 40px ${interactionConfig.color}20`,
+                borderColor: `${interactionConfig.color}60`,
+              },
+              '50%': {
+                boxShadow: `0 0 30px ${interactionConfig.color}60, 0 0 60px ${interactionConfig.color}30`,
+                borderColor: `${interactionConfig.color}90`,
+              },
+            },
+          }),
         }}
+        onClick={handleJsonClick}
       >
-        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
-          <Box
-            sx={{
-              bgcolor: interactionConfig.color,
-              borderRadius: 1,
-              p: 0.75,
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-            }}
-          >
-            <InteractionIcon sx={{ fontSize: 18, color: '#fff' }} />
-          </Box>
-          <Box>
-            <Typography
-              variant="subtitle2"
-              sx={{ color: '#fff', fontWeight: 600, fontSize: 13 }}
-            >
-              {highlightText(data.label || interactionConfig.label)}
-            </Typography>
-            <Typography
-              variant="caption"
-              sx={{ color: '#9CA3AF', fontSize: 10 }}
-            >
-              {data.description || interactionConfig.description}
-            </Typography>
-          </Box>
-        </Box>
-        {renderStatusBadge()}
-      </Box>
-
-      {/* Content */}
-      <Box sx={{ px: 2, py: 1.5 }}>
-        {/* Progress Bar (when running) */}
-        {status === 'Running' && (
-          <Box sx={{ mb: 1.5 }}>
-            <LinearProgress
-              variant="determinate"
-              value={executionProgress}
-              sx={{
-                height: 4,
-                borderRadius: 2,
-                bgcolor: 'rgba(59, 130, 246, 0.1)',
-                '& .MuiLinearProgress-bar': {
-                  bgcolor: interactionConfig.color,
-                },
-              }}
-            />
-          </Box>
-        )}
-
-        {/* Interaction Details */}
-        <Box
-          sx={{
-            bgcolor: '#1F2937',
-            borderRadius: 1,
-            p: 1.5,
-            mb: 1.5,
-            border: '1px solid #374151',
-          }}
-        >
-          <Typography
-            variant="caption"
-            sx={{
-              color: '#9CA3AF',
-              fontSize: 10,
-              display: 'block',
-              mb: 0.5,
-            }}
-          >
-            {interactionConfig.label}
-          </Typography>
-          <Typography
-            variant="body2"
-            sx={{
-              color: '#fff',
-              fontSize: 11,
-              fontWeight: 500,
-              wordBreak: 'break-word',
-            }}
-          >
-            {getInteractionDetails(data)}
+        {/* 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 || interactionConfig.description)}
           </Typography>
         </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"
+        {/* Main Content */}
+        <Box sx={{ padding: '16px' }}>
+          {/* Title Section */}
+          <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
+              <Box
+                sx={{
+                  width: '32px',
+                  height: '32px',
+                  minWidth: '32px',
+                  backgroundColor: '#1E3A8A',
+                  borderRadius: '50%',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  flexShrink: 0,
+                }}
+              >
+                <InteractionIcon sx={{ color: 'white', fontSize: '18px' }} />
+              </Box>
+              <Typography variant="h6" sx={{ fontWeight: 600, fontSize: '16px' }}>
+                {highlightText(data.label || interactionConfig.label)}
+              </Typography>
+            </Box>
+            <Chip
+              label={status}
+              size="small"
               sx={{
-                color: data.executionResult.success ? '#10B981' : '#EF4444',
-                fontSize: 10,
+                backgroundColor: statusConfig.bgColor,
+                color: statusConfig.color,
+                fontWeight: 500,
+                fontSize: '12px',
+                height: '24px',
+                borderRadius: '12px',
               }}
-            >
-              {data.executionResult.success
-                ? '✓ Interaction completed'
-                : `✗ ${data.executionResult.error || 'Interaction failed'}`}
-            </Typography>
+            />
           </Box>
-        )}
 
-        {/* Last Run Info */}
-        {data.lastRun && (
-          <Box
-            sx={{
+          {/* 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',
-              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>
+              alignItems: 'center'
+            }}>
+              <Typography variant="body2" sx={{
+                color: '#9CA3AF',
+                fontSize: '12px',
+                lineHeight: 1.4,
+                margin: 0
+              }}>
+                {getInteractionDetails(data)}
+              </Typography>
+            </Box>
           </Box>
-        )}
-      </Box>
 
-      {/* Node Action Buttons */}
-      <NodeActionButtons selected={selected} />
+          {/* Last Run Info */}
+          {data.lastRun && (
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, mt: 1 }}>
+              <AccessTimeIcon sx={{ fontSize: '14px', color: '#9CA3AF' }} />
+              <Typography variant="body2" sx={{ color: '#9CA3AF', fontSize: '11px' }}>
+                {t('automation.common.lastRan')}: {data.lastRun}
+                {data.duration && ` · ${data.duration}`}
+              </Typography>
+            </Box>
+          )}
+        </Box>
+
+        {/* Connection Handles - Bidirectional (source + target at each position) */}
+        {/* Top - Source */}
+        <Handle
+          type="source"
+          position={Position.Top}
+          id="top-source"
+          className="connection-handle"
+          style={{
+            background: selected ? '#10B981' : '#1a1a2e',
+            width: '14px',
+            height: '14px',
+            border: '3px solid #10B981',
+            top: '-8px',
+            opacity: selected ? 1 : 0,
+            transition: 'all 0.2s ease-in-out',
+            cursor: 'crosshair',
+            zIndex: 10,
+          }}
+        />
+        {/* Top - Target (hidden but functional) */}
+        <Handle
+          type="target"
+          position={Position.Top}
+          id="top-target"
+          style={{
+            background: 'transparent',
+            width: '14px',
+            height: '14px',
+            border: 'none',
+            top: '-8px',
+            opacity: 0,
+            pointerEvents: selected ? 'all' : 'none',
+          }}
+        />
+        {/* Bottom - Source */}
+        <Handle
+          type="source"
+          position={Position.Bottom}
+          id="bottom-source"
+          className="connection-handle"
+          style={{
+            background: selected ? '#10B981' : '#1a1a2e',
+            width: '14px',
+            height: '14px',
+            border: '3px solid #10B981',
+            bottom: '-8px',
+            opacity: selected ? 1 : 0,
+            transition: 'all 0.2s ease-in-out',
+            cursor: 'crosshair',
+            zIndex: 10,
+          }}
+        />
+        {/* Bottom - Target (hidden but functional) */}
+        <Handle
+          type="target"
+          position={Position.Bottom}
+          id="bottom-target"
+          style={{
+            background: 'transparent',
+            width: '14px',
+            height: '14px',
+            border: 'none',
+            bottom: '-8px',
+            opacity: 0,
+            pointerEvents: selected ? 'all' : 'none',
+          }}
+        />
+        {/* Left - Source */}
+        <Handle
+          type="source"
+          position={Position.Left}
+          id="left-source"
+          className="connection-handle"
+          style={{
+            background: selected ? '#10B981' : '#1a1a2e',
+            width: '14px',
+            height: '14px',
+            border: '3px solid #10B981',
+            left: '-8px',
+            opacity: selected ? 1 : 0,
+            transition: 'all 0.2s ease-in-out',
+            cursor: 'crosshair',
+            zIndex: 10,
+          }}
+        />
+        {/* Left - Target (hidden but functional) */}
+        <Handle
+          type="target"
+          position={Position.Left}
+          id="left-target"
+          style={{
+            background: 'transparent',
+            width: '14px',
+            height: '14px',
+            border: 'none',
+            left: '-8px',
+            opacity: 0,
+            pointerEvents: selected ? 'all' : 'none',
+          }}
+        />
+        {/* Right - Source */}
+        <Handle
+          type="source"
+          position={Position.Right}
+          id="right-source"
+          className="connection-handle"
+          style={{
+            background: selected ? '#10B981' : '#1a1a2e',
+            width: '14px',
+            height: '14px',
+            border: '3px solid #10B981',
+            right: '-8px',
+            opacity: selected ? 1 : 0,
+            transition: 'all 0.2s ease-in-out',
+            cursor: 'crosshair',
+            zIndex: 10,
+          }}
+        />
+        {/* Right - Target (hidden but functional) */}
+        <Handle
+          type="target"
+          position={Position.Right}
+          id="right-target"
+          style={{
+            background: 'transparent',
+            width: '14px',
+            height: '14px',
+            border: 'none',
+            right: '-8px',
+            opacity: 0,
+            pointerEvents: selected ? 'all' : 'none',
+          }}
+        />
+      </Box>
 
-      {/* Output Handle */}
-      <Handle
-        type="source"
-        position={Position.Right}
-        style={{
-          background: interactionConfig.color,
-          width: 10,
-          height: 10,
-          border: '2px solid #1E1E2E',
+      {/* Node Action Buttons - Shows when selected */}
+      <NodeActionButtons
+        selected={selected}
+        onOpenAIAssistant={(buttonElement) => {
+          if (nodeId) {
+            showNodeAIAssistantPopup(nodeId, 'Interaction Node', buttonElement);
+          }
+        }}
+        onDelete={() => {
+          if (nodeId && onNodesChange) {
+            onNodesChange([{ id: nodeId, type: 'remove' }]);
+          }
+        }}
+        onDuplicate={() => {
+          if (nodeId) {
+            const currentNode = nodes.find(n => n.id === nodeId);
+            if (currentNode) {
+              const newNode = {
+                ...currentNode,
+                id: `${currentNode.id}-copy-${Date.now()}`,
+                position: {
+                  x: currentNode.position.x + 50,
+                  y: currentNode.position.y + 50,
+                },
+                selected: false,
+              };
+              setNodes([...nodes, newNode]);
+            }
+          }
         }}
       />
     </Box>