@flowuent-org/diagramming-core 1.0.8 → 1.1.1

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

@@ -0,0 +1,269 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { Box, Typography, Card, CardContent, IconButton, Chip } from '@mui/material';
+import { Close as CloseIcon, Lightbulb as LightbulbIcon, Star as StarIcon } from '@mui/icons-material';
+import { RiCloseLine } from 'react-icons/ri';
+
+export interface AISuggestion {
+  id: string;
+  title: string;
+  description: string;
+  tags: string[];
+  onClick?: () => void;
+}
+
+interface AISuggestionsModalProps {
+  suggestions: AISuggestion[];
+  onClose: () => void;
+  onSuggestionClick?: (suggestion: AISuggestion) => void;
+}
+
+export const AISuggestionsModal: React.FC<AISuggestionsModalProps> = ({
+  suggestions,
+  onClose,
+  onSuggestionClick,
+}) => {
+  const handleSuggestionClick = (suggestion: AISuggestion) => {
+    if (onSuggestionClick) {
+      onSuggestionClick(suggestion);
+    }
+    onClose();
+  };
+
+  return (
+    <>
+      {/* Backdrop */}
+      <Box
+        data-backdrop
+        onClick={onClose}
+        sx={{
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          bgcolor: 'rgba(0, 0, 0, 0.5)',
+          zIndex: 9999,
+        }}
+      />
+      {/* Modal */}
+      <Card
+        id="ai-suggestions-modal"
+        sx={{
+          position: 'fixed',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          zIndex: 10000,
+          width: '480px',
+          maxHeight: '80vh',
+          overflow: 'auto',
+          bgcolor: '#1F2937',
+          color: '#fff',
+          border: '1px solid #374151',
+          borderRadius: '12px',
+          boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.2)',
+          '&::-webkit-scrollbar': {
+            width: '6px',
+          },
+          '&::-webkit-scrollbar-track': {
+            background: 'transparent',
+          },
+          '&::-webkit-scrollbar-thumb': {
+            background: '#4B5563',
+            borderRadius: '3px',
+            '&:hover': {
+              background: '#6B7280',
+            },
+          },
+        }}
+      >
+      <CardContent sx={{ bgcolor: '#1F2937', color: '#fff', p: 0 }}>
+        {/* Header */}
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            p: 3,
+            borderBottom: '1px solid #374151',
+          }}
+        >
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
+            <StarIcon sx={{ color: '#3b82f6', fontSize: '20px' }} />
+            <Typography variant="h6" sx={{ color: '#fff', fontSize: '18px', fontWeight: 600 }}>
+              AI Suggestions
+            </Typography>
+          </Box>
+          <IconButton
+            aria-label="close"
+            onClick={onClose}
+            sx={{
+              color: '#9CA3AF',
+              '&:hover': {
+                color: '#fff',
+                bgcolor: 'rgba(255, 255, 255, 0.1)',
+              },
+            }}
+          >
+            <RiCloseLine />
+          </IconButton>
+        </Box>
+
+        {/* Suggestions List */}
+        <Box sx={{ p: 2 }}>
+          {suggestions.map((suggestion) => (
+            <Card
+              key={suggestion.id}
+              onClick={() => handleSuggestionClick(suggestion)}
+              sx={{
+                mb: 2,
+                bgcolor: '#111827',
+                border: '1px solid #374151',
+                borderRadius: '8px',
+                cursor: 'pointer',
+                transition: 'all 0.2s ease',
+                '&:hover': {
+                  bgcolor: '#1F2937',
+                  borderColor: '#4B5563',
+                  transform: 'translateY(-2px)',
+                  boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3)',
+                },
+                '&:last-child': {
+                  mb: 0,
+                },
+              }}
+            >
+              <CardContent sx={{ p: 2.5 }}>
+                <Box sx={{ display: 'flex', gap: 2, mb: 2 }}>
+                  <Box
+                    sx={{
+                      width: '40px',
+                      height: '40px',
+                      minWidth: '40px',
+                      borderRadius: '8px',
+                      bgcolor: '#1F2937',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                    }}
+                  >
+                    <LightbulbIcon sx={{ color: '#3b82f6', fontSize: '20px' }} />
+                  </Box>
+                  <Box sx={{ flex: 1 }}>
+                    <Typography
+                      variant="h6"
+                      sx={{
+                        color: '#fff',
+                        fontSize: '16px',
+                        fontWeight: 600,
+                        mb: 1,
+                      }}
+                    >
+                      {suggestion.title}
+                    </Typography>
+                    <Typography
+                      variant="body2"
+                      sx={{
+                        color: '#9CA3AF',
+                        fontSize: '13px',
+                        lineHeight: 1.5,
+                      }}
+                    >
+                      {suggestion.description}
+                    </Typography>
+                  </Box>
+                </Box>
+
+                {/* Tags */}
+                <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
+                  {suggestion.tags.map((tag, index) => (
+                    <Chip
+                      key={index}
+                      label={tag}
+                      size="small"
+                      sx={{
+                        bgcolor: '#1F2937',
+                        color: '#9CA3AF',
+                        fontSize: '11px',
+                        height: '24px',
+                        borderRadius: '12px',
+                        border: '1px solid #374151',
+                        '& .MuiChip-label': {
+                          px: 1.5,
+                        },
+                      }}
+                    />
+                  ))}
+                </Box>
+              </CardContent>
+            </Card>
+          ))}
+        </Box>
+
+        {/* Footer */}
+        <Box
+          sx={{
+            p: 2,
+            borderTop: '1px solid #374151',
+            textAlign: 'center',
+          }}
+        >
+          <Typography
+            variant="body2"
+            sx={{
+              color: '#6B7280',
+              fontSize: '12px',
+            }}
+          >
+            Click to add a suggestion to your workflow
+          </Typography>
+        </Box>
+      </CardContent>
+    </Card>
+    </>
+  );
+};
+
+/**
+ * Show AI Suggestions Modal using portal
+ */
+export const showAISuggestionsModal = (
+  suggestions: AISuggestion[],
+  onSuggestionClick?: (suggestion: AISuggestion) => void
+): (() => void) => {
+  const portalRoot = document.createElement('div');
+  document.body.appendChild(portalRoot);
+
+  const root = createRoot(portalRoot);
+
+  const handleClose = () => {
+    root.unmount();
+    if (portalRoot.parentNode) {
+      document.body.removeChild(portalRoot);
+    }
+  };
+
+  // Handle click outside - backdrop handles this, but keep for safety
+  const handleClickOutside = (event: MouseEvent) => {
+    const target = event.target as Element;
+    if (!target.closest('#ai-suggestions-modal') && !target.closest('[data-backdrop]')) {
+      handleClose();
+    }
+  };
+
+  setTimeout(() => {
+    document.addEventListener('mousedown', handleClickOutside);
+  }, 0);
+
+  root.render(
+    <AISuggestionsModal
+      suggestions={suggestions}
+      onClose={handleClose}
+      onSuggestionClick={onSuggestionClick}
+    />
+  );
+
+  return handleClose;
+};
+

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

@@ -0,0 +1,227 @@
+import React from 'react';
+import { useReactFlow, Node, Edge, MarkerType } from '@xyflow/react';
+import { Box, Typography, Card, CardContent, Chip } from '@mui/material';
+import { Lightbulb as LightbulbIcon, Star as StarIcon } from '@mui/icons-material';
+import { AISuggestion } from './AISuggestionsModal';
+
+interface AISuggestionsPanelProps {
+  suggestions: AISuggestion[];
+  parentNodeId: string;
+  onSuggestionClick?: (suggestion: AISuggestion) => void;
+  onClose?: () => void;
+}
+
+export const AISuggestionsPanel: React.FC<AISuggestionsPanelProps> = ({
+  suggestions,
+  parentNodeId,
+  onSuggestionClick,
+  onClose,
+}) => {
+  const { getNodes, setNodes, setEdges, getNode } = useReactFlow();
+
+  const handleSuggestionClick = (suggestion: AISuggestion) => {
+    const nodes = getNodes();
+    const parentNode = getNode(parentNodeId);
+    if (!parentNode) return;
+
+    // Calculate position for new node - below the parent node
+    // Node height + button height (~40px) + panel height (~400px) + spacing
+    const nodeHeight = parentNode.height || 150;
+    const panelHeight = suggestions.length * 180 + 100; // Approximate height per suggestion + padding
+    const newNodeY = parentNode.position.y + nodeHeight + 40 + panelHeight + 40;
+
+    // Create new AI Suggestion node
+    const newNodeId = `ai-suggestion-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    
+    // Add example mappings and benefits based on suggestion type
+    const isCitationExtraction = suggestion.title.toLowerCase().includes('citation');
+    const formData: any = {
+      badgeText: 'Suggested Node',
+      pointers: suggestion.tags,
+      lastRun: 'Never',
+    };
+
+    // Add example mapping for citation extraction
+    if (isCitationExtraction) {
+      formData.mapping = { from: 'references', to: 'source_text' };
+      formData.benefits = [
+        'Ensures proper attribution',
+        'Creates standardized reference format',
+        'Enables source verification',
+      ];
+    }
+
+    const newNode: Node = {
+      id: newNodeId,
+      type: 'AutomationAISuggestionNode',
+      position: {
+        x: parentNode.position.x,
+        y: newNodeY,
+      },
+      data: {
+        label: suggestion.title,
+        description: suggestion.description,
+        iconName: 'Lightbulb',
+        formData,
+        backgroundColor: 'rgba(24, 28, 37, 0.65)', // Transparent background
+        textColor: '#ffffff',
+        borderColor: '#1e293b',
+      },
+      width: 336,
+      height: 150,
+      measured: { width: 336, height: 150 },
+    };
+
+    // Add the new node
+    setNodes([...nodes, newNode]);
+
+    // Create edge from parent to new node with dotted line (unconfirmed)
+    const edgeId = `edge-${parentNodeId}-${newNodeId}`;
+    const newEdge: Edge = {
+      id: edgeId,
+      source: parentNodeId,
+      target: newNodeId,
+      sourceHandle: 'right',
+      targetHandle: 'left',
+      data: {
+        label: '',
+        type: 'flow',
+        isSuggested: true, // Flag to indicate this is a suggested/unconfirmed connection
+      },
+      style: {
+        stroke: '#ffffff',
+        strokeWidth: 2,
+        strokeDasharray: '5,5', // Dotted line
+      },
+      markerEnd: {
+        type: MarkerType.ArrowClosed,
+        color: '#ffffff',
+      },
+    };
+
+    setEdges((prevEdges) => [...prevEdges, newEdge]);
+
+    // Store edge ID in node data for later reference
+    formData.edgeId = edgeId;
+
+    // Call callback if provided
+    if (onSuggestionClick) {
+      onSuggestionClick(suggestion);
+    }
+
+    // Close the panel
+    if (onClose) {
+      onClose();
+    }
+  };
+
+  return (
+    <Box
+      sx={{
+        position: 'absolute',
+        top: '100%',
+        left: '50%',
+        transform: 'translateX(-50%)',
+        marginTop: '64px', // Below the button (12px) + button height (~40px) + spacing (12px)
+        zIndex: 1000,
+        minWidth: '250px',
+        pointerEvents: 'auto',
+       
+      }}
+    >
+      <Card
+        sx={{
+          bgcolor: '#181C25',
+          borderRadius: '12px',
+          boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.5)',
+          padding: '10px',
+        }}
+      >
+        {/* Header */}
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '10px',
+            pb: '10px',
+          }}
+        >
+          <StarIcon sx={{ color: '#2563EB', fontSize: '12px'  }} />
+          <Typography sx={{ color: '#E5E7EB', fontSize: '12px', fontWeight: 500 }}>
+            AI Suggestions
+          </Typography>
+        </Box>
+
+        {/* Suggestions List */}
+        <Box sx={{ }}>
+          {suggestions.map((suggestion) => (
+            <Card key={suggestion.id} onClick={() => handleSuggestionClick(suggestion)} sx={{ mb: 1, bgcolor: '#2563EB1A', border: '1px solid #2563EB', borderRadius: '8px', cursor: 'pointer', transition: 'all 0.2s ease', '&:last-child': { mb: 0, } }} >
+              <CardContent>
+                <Box sx={{ display: 'flex' }}>
+                  
+                  
+                  <Box sx={{ flex: 1 }}>
+                    <Box sx={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+                  <LightbulbIcon sx={{ color: '#3b82f6', fontSize: '20px' }} />
+                    <Typography
+                      sx={{
+                        color: '#E5E7EB',
+                        fontSize: '12px',
+                        fontWeight: 500,
+                        mb: 1,
+                      }}
+                    >
+                      {suggestion.title}
+                    </Typography>
+                    </Box>
+                    <Typography
+                      sx={{
+                        color: '#9CA3AF',
+                        fontSize: '10px',
+                        lineHeight: '16px',
+                        mb: '10px',
+                      }}
+                    >
+                      {suggestion.description}
+                    </Typography>
+                  </Box>
+                </Box>
+
+                {/* Tags */}
+                <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
+                  {suggestion.tags.map((tag, index) => (
+                    <Chip
+                      key={index}
+                      label={tag}
+                      sx={{
+                        bgcolor: '#2D3748',
+                        color: '#A5B4FC',
+                        fontSize: '10px',
+                        fontWeight: 400,
+                        height: '24px',
+                        borderRadius: '5px',
+                      }}
+                    />
+                  ))}
+                </Box>
+              </CardContent>
+            </Card>
+          ))}
+        </Box>
+
+        {/* Footer */}
+        <Box sx={{ pt: '10px' }}>
+          <Typography
+            sx={{
+              color: '#9CA3AF',
+              fontSize: '10px',
+            }}
+          >
+            Click to add a suggestion to your workflow
+          </Typography>
+        </Box>
+      </Card>
+    </Box>
+  );
+};
+