@flowuent-org/diagramming-core 1.0.8 → 1.1.1

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

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef } from 'react';
-import { Handle, Position } from '@xyflow/react';
+import { Handle, Position, useReactFlow, useNodeId } from '@xyflow/react';
 import { Box, Typography, Chip, Button } from '@mui/material';
+import { AccessTime as AccessTimeIcon, CheckCircle as CheckCircleIcon, Link as LinkIcon } from '@mui/icons-material';
 import { getIconByName } from '../../utils/iconMapper';
 import { useTranslation } from 'react-i18next';
 
@@ -14,11 +15,19 @@ interface AutomationAISuggestionNodeProps {
         iconName?: string;
         formData?: {
             pointers?: string[];
+            mappings?: Array<{
+                from: string;
+                to: string;
+            }>;
             mapping?: {
                 from: string;
                 to: string;
             };
             badgeText?: string;
+            benefits?: string[];
+            lastRun?: string;
+            edgeId?: string; // ID of the edge connecting this node
+            isConfirmed?: boolean; // Whether "Add this" button has been clicked
         };
     };
     selected?: boolean;
@@ -27,9 +36,59 @@ interface AutomationAISuggestionNodeProps {
 export const AutomationAISuggestionNode: React.FC<AutomationAISuggestionNodeProps> = ({ data, selected }) => {
     const { t } = useTranslation();
     const nodeRef = useRef<HTMLDivElement | null>(null);
+    const { setEdges, getEdges, setNodes } = useReactFlow();
+    const nodeId = useNodeId();
 
     const IconComponent = getIconByName(data.iconName || 'Lightbulb');
 
+    // Handle "Add this" button click - convert dotted edge to solid
+    const handleAddThis = () => {
+        if (!data.formData?.edgeId || data.formData?.isConfirmed || !nodeId) return;
+
+        const edges = getEdges();
+        const edge = edges.find(e => e.id === data.formData?.edgeId);
+        
+        if (edge) {
+            // Update edge to solid line (remove strokeDasharray)
+            setEdges((prevEdges) =>
+                prevEdges.map((e) =>
+                    e.id === edge.id
+                        ? {
+                              ...e,
+                              style: {
+                                  ...e.style,
+                                  strokeDasharray: undefined, // Remove dotted line
+                              },
+                              data: {
+                                  ...e.data,
+                                  isSuggested: false, // Mark as confirmed
+                              },
+                          }
+                        : e
+                )
+            );
+
+            // Update node to mark as confirmed and change background from transparent to opaque
+            setNodes((prevNodes) =>
+                prevNodes.map((n) =>
+                    n.id === nodeId
+                        ? {
+                              ...n,
+                              data: {
+                                  ...n.data,
+                                  backgroundColor: 'rgba(24, 28, 37, 0.99)', // Change from 0.65 to 0.99 opacity
+                                  formData: {
+                                      ...(n.data.formData || {}),
+                                      isConfirmed: true,
+                                  },
+                              },
+                          }
+                        : n
+                )
+            );
+        }
+    };
+
     // Debug logging for node dimensions
     useEffect(() => {
         if (nodeRef.current) {
@@ -65,7 +124,7 @@ export const AutomationAISuggestionNode: React.FC<AutomationAISuggestionNodeProp
             sx={{
                 width: '336px',
                 minHeight: '150px',
-                backgroundColor: '#181C25',
+                backgroundColor: data.backgroundColor || 'rgba(24, 28, 37, 0.65)',
                 border: selected ? '2px solid #3b82f6' : '1px solid #1e293b',
                 borderRadius: '12px',
                 color: '#ffffff',
@@ -76,133 +135,137 @@ export const AutomationAISuggestionNode: React.FC<AutomationAISuggestionNodeProp
                 overflow: 'hidden',
             }}
         >
-            {/* Suggested badge / label strip */}
-            <Box sx={{
-                backgroundColor: 'rgba(30, 58, 138, 0.8)', // #1E3A8A with 0.8 opacity
-                padding: '8px 16px',
-                borderRadius: '12px 12px 0 0',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'space-between'
-            }}>
-                <Typography variant="body2" sx={{ color: '#ffffff', fontSize: '12px', fontWeight: 500 }}>
-                    {data.formData?.badgeText || t('automation.aiSuggestionNode.badgeSuggested')}
-                </Typography>
-                <Chip
-                    label={t('automation.aiSuggestionNode.badgeAI')}
-                    size="small"
-                    sx={{
-                        bgcolor: 'rgba(147, 197, 253, 0.15)',
-                        color: '#93C5FD',
-                        height: '20px',
-                        fontSize: '11px',
-                        borderRadius: '10px'
-                    }}
-                />
-            </Box>
-
             {/* Main content */}
             <Box sx={{ padding: '16px' }}>
-                {/* Title */}
-                <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',
-                            }}
-                        >
-                            <IconComponent sx={{ color: 'white', fontSize: '18px' }} />
-                        </Box>
-                        <Typography variant="h6" sx={{ fontWeight: 600, fontSize: '16px' }}>
-                            {data.label}
-                        </Typography>
+                {/* Title with Icon */}
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, mb: 1.5 }}>
+                    <Box
+                        sx={{
+                            width: '32px',
+                            height: '32px',
+                            backgroundColor: '#0ea5e9',
+                            borderRadius: '50%',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                        }}
+                    >
+                        <IconComponent sx={{ color: 'white', fontSize: '18px' }} />
                     </Box>
+                    <Typography variant="h6" sx={{ fontWeight: 600, fontSize: '16px', color: '#ffffff' }}>
+                        {data.label}
+                    </Typography>
                 </Box>
 
-                {/* Description box */}
-                <Box sx={{
-                    backgroundColor: '#1F2937',
-                    borderRadius: '8px',
-                    padding: '12px',
-                    mb: 2,
-                    border: '1px solid #374151'
-                }}>
-                    <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,
-                            m: 0
-                        }}>
-                            {data.description}
-                        </Typography>
-                    </Box>
-                </Box>
-
-                {/* Mapping / pointers section */}
-                <Box sx={{
-                    backgroundColor: '#1F2937',
-                    borderRadius: '8px',
-                    padding: '12px',
-                    mb: 2,
-                    border: '1px solid #374151'
-                }}>
-                    {/* Simple 2-column mapping like Data Mapping */}
-                    {data.formData?.mapping ? (
-                        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 1 }}>
-                            <Typography variant="body2" sx={{ color: '#9CA3AF', fontSize: '11px' }}>
-                                {data.formData.mapping.from}
-                            </Typography>
-                            <Typography variant="body2" sx={{ color: '#9CA3AF', fontSize: '11px' }}>
-                                → {data.formData.mapping.to}
-                            </Typography>
-                        </Box>
-                    ) : null}
-
-                    {(data.formData?.pointers || []).map((p, i) => (
-                        <Box key={i} sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.5 }}>
-                            <Box sx={{ color: '#93C5FD', fontSize: '14px' }}>•</Box>
-                            <Typography variant="body2" sx={{ color: '#E5E7EB', fontSize: '11px' }}>{p}</Typography>
-                        </Box>
-                    ))}
-                </Box>
-
-                {/* Add this button */}
+                {/* Suggested Node Button */}
                 <Button
-                    variant="outlined"
-                    fullWidth
+                    variant="contained"
                     sx={{
-                        backgroundColor: 'rgba(37, 99, 235, 0.15)', // #2563EB with 0.15 opacity
-                        borderColor: '#2563EB',
-                        color: '#93C5FD',
+                        backgroundColor: '#4B5563', // Dark grey background
+                        color: '#ffffff',
+                        borderRadius: '20px', // Pill-shaped
                         textTransform: 'none',
-                        fontSize: '13px',
-                        fontWeight: 600,
+                        fontSize: '11px',
+                        fontWeight: 400,
+                        padding: '6px 14px',
+                        mb: 1.5,
+                        minWidth: 'auto',
                         '&:hover': {
-                            backgroundColor: 'rgba(37, 99, 235, 0.2)',
-                            borderColor: '#2563EB'
+                            backgroundColor: '#6B7280',
                         }
                     }}
                 >
-                    {t('automation.aiSuggestionNode.addThis')}
+                    {data.formData?.badgeText || 'Suggested Node'}
                 </Button>
 
-                {/* Last spacer */}
-                <Box sx={{ mt: 1 }} />
+                {/* Description */}
+                <Typography variant="body2" sx={{
+                    color: '#9CA3AF',
+                    fontSize: '12px',
+                    lineHeight: 1.4,
+                    mb: 2
+                }}>
+                    {data.description}
+                </Typography>
+
+                {/* Data Mapping Section */}
+                {(data.formData?.mappings && data.formData.mappings.length > 0) || data.formData?.mapping ? (
+                    <Box sx={{ mb: 2 }}>
+                        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, mb: 1 }}>
+                            <LinkIcon sx={{ fontSize: '14px', color: '#93C5FD' }} />
+                            <Typography variant="body2" sx={{ color: '#93C5FD', fontSize: '12px', fontWeight: 500 }}>
+                                Data Mapping
+                            </Typography>
+                        </Box>
+                        {(data.formData?.mappings || (data.formData?.mapping ? [data.formData.mapping] : [])).map((mapping, index) => (
+                            <Box key={index} sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.5 }}>
+                                <Typography variant="body2" sx={{ color: '#9CA3AF', fontSize: '11px' }}>
+                                    {mapping.from}
+                                </Typography>
+                                <Typography variant="body2" sx={{ color: '#93C5FD', fontSize: '11px' }}>
+                                    →
+                                </Typography>
+                                <Typography variant="body2" sx={{ color: '#93C5FD', fontSize: '11px' }}>
+                                    {mapping.to}
+                                </Typography>
+                            </Box>
+                        ))}
+                    </Box>
+                ) : null}
+
+                {/* Benefits Section */}
+                {(data.formData?.benefits && data.formData.benefits.length > 0) || (data.formData?.pointers && data.formData.pointers.length > 0) ? (
+                    <Box sx={{ mb: 2 }}>
+                        <Typography variant="body2" sx={{ color: '#93C5FD', fontSize: '12px', fontWeight: 500, mb: 1 }}>
+                            Benefits
+                        </Typography>
+                        {(data.formData?.benefits || data.formData?.pointers || []).map((benefit, index) => (
+                            <Box key={index} sx={{ display: 'flex', alignItems: 'flex-start', gap: 1, mb: 0.5 }}>
+                                <Typography variant="body2" sx={{ color: '#9CA3AF', fontSize: '11px', mt: 0.25 }}>•</Typography>
+                                <Typography variant="body2" sx={{ color: '#9CA3AF', fontSize: '11px', lineHeight: 1.4 }}>
+                                    {benefit}
+                                </Typography>
+                            </Box>
+                        ))}
+                    </Box>
+                ) : null}
+
+                {/* Last Ran and Add This Button Row */}
+                <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mt: 2 }}>
+                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+                        <AccessTimeIcon sx={{ fontSize: '14px', color: '#9CA3AF' }} />
+                        <Typography variant="body2" sx={{ color: '#9CA3AF', fontSize: '11px' }}>
+                            Last ran: {data.formData?.lastRun || 'Never'}
+                        </Typography>
+                    </Box>
+                    <Button
+                        variant="outlined"
+                        startIcon={<CheckCircleIcon sx={{ fontSize: '16px' }} />}
+                        onClick={handleAddThis}
+                        disabled={data.formData?.isConfirmed}
+                        sx={{
+                            backgroundColor: 'transparent',
+                            borderColor: '#2563EB',
+                            color: '#93C5FD',
+                            textTransform: 'none',
+                            fontSize: '12px',
+                            fontWeight: 500,
+                            borderRadius: '20px',
+                            padding: '6px 16px',
+                            '&:hover': {
+                                backgroundColor: 'rgba(37, 99, 235, 0.1)',
+                                borderColor: '#2563EB'
+                            },
+                            '&:disabled': {
+                                borderColor: '#10b981',
+                                color: '#10b981',
+                                opacity: 0.7
+                            }
+                        }}
+                    >
+                        {data.formData?.isConfirmed ? 'Added' : 'Add this'}
+                    </Button>
+                </Box>
             </Box>
 
             {/* Handles - Hidden but functional */}

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useRef } from 'react';
 import { createRoot } from 'react-dom/client';
 import { Handle, Position, useNodeId } from '@xyflow/react';
-import { Box, Typography, Chip, IconButton, Card, CardContent } from '@mui/material';
+import { Box, Typography, Chip, IconButton, Card, CardContent, Button } from '@mui/material';
 import {
     AccessTime as AccessTimeIcon,
     Visibility as VisibilityIcon,
@@ -9,13 +9,16 @@ import {
     Psychology as PsychologyIcon,
     Send as SendIcon,
     Settings as SettingsIcon,
-    Storage as StorageIcon
+    Storage as StorageIcon,
+    Lightbulb as LightbulbIcon
 } from '@mui/icons-material';
 import { RiCloseLine, RiUser2Line } from 'react-icons/ri';
 import ReactJson from 'react-json-view';
 import { getIconByName } from '../../utils/iconMapper';
 import { useTranslation } from 'react-i18next';
 import { useDiagram } from '../../contexts/DiagramProvider';
+import { AISuggestion } from './AISuggestionsModal';
+import { AISuggestionsPanel } from './AISuggestionsPanel';
 
 interface AutomationApiNodeProps {
     data: {
@@ -45,6 +48,8 @@ interface AutomationApiNodeProps {
                 label: string;
                 iconColor: string;
             }>;
+            aiSuggestionsCount?: number; // Number of AI suggestions available
+            aiSuggestions?: AISuggestion[]; // AI suggestions data
             [key: string]: any;
         }; // Include formData for configuration
     };
@@ -54,6 +59,7 @@ interface AutomationApiNodeProps {
 export const AutomationApiNode: React.FC<AutomationApiNodeProps> = ({ data, selected }) => {
     const { t } = useTranslation();
     const [isJsonOpen, setIsJsonOpen] = useState(false);
+    const [showSuggestions, setShowSuggestions] = useState(false);
     const rootRef = useRef<any>(null);
     const portalRef = useRef<HTMLDivElement | null>(null);
     const nodeRef = useRef<HTMLDivElement | null>(null);
@@ -265,35 +271,42 @@ export const AutomationApiNode: React.FC<AutomationApiNodeProps> = ({ data, sele
 
     return (
         <Box
-            ref={nodeRef}
             sx={{
-                width: '336px',
-                minHeight: '150px',
-                backgroundColor: '#181C25', // New background color from image
-                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',
-                ...(data.status === 'Running' && {
-                    animation: 'pulse-glow 2s ease-in-out infinite',
-                    '@keyframes pulse-glow': {
-                        '0%, 100%': {
-                            boxShadow: '0 0 20px rgba(251, 191, 36, 0.4), 0 0 40px rgba(251, 191, 36, 0.2)',
-                            borderColor: 'rgba(251, 191, 36, 0.6)',
-                        },
-                        '50%': {
-                            boxShadow: '0 0 30px rgba(251, 191, 36, 0.6), 0 0 60px rgba(251, 191, 36, 0.3)',
-                            borderColor: 'rgba(251, 191, 36, 0.9)',
-                        },
-                    },
-                }),
+                width: '336px',
+                overflow: 'visible',
             }}
-            onClick={handleJsonClick}
         >
+            <Box
+                ref={nodeRef}
+                sx={{
+                    width: '336px',
+                    minHeight: '150px',
+                    backgroundColor: '#181C25', // New background color from image
+                    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',
+                    ...(data.status === 'Running' && {
+                        animation: 'pulse-glow 2s ease-in-out infinite',
+                        '@keyframes pulse-glow': {
+                            '0%, 100%': {
+                                boxShadow: '0 0 20px rgba(251, 191, 36, 0.4), 0 0 40px rgba(251, 191, 36, 0.2)',
+                                borderColor: 'rgba(251, 191, 36, 0.6)',
+                            },
+                            '50%': {
+                                boxShadow: '0 0 30px rgba(251, 191, 36, 0.6), 0 0 60px rgba(251, 191, 36, 0.3)',
+                                borderColor: 'rgba(251, 191, 36, 0.9)',
+                            },
+                        },
+                    }),
+                }}
+                onClick={handleJsonClick}
+            >
             {/* Top Header Section */}
             <Box sx={{
                 backgroundColor: "rgba(67, 93, 132, 0.1)",
@@ -535,6 +548,99 @@ export const AutomationApiNode: React.FC<AutomationApiNodeProps> = ({ data, sele
                     opacity: 0, // Hidden but functional
                 }}
             />
+            </Box>
+
+            {/* AI Suggestions Button - Positioned below the node box */}
+            {data.formData?.aiSuggestionsCount !== undefined && data.formData.aiSuggestionsCount > 0 && (
+                <Box
+                    sx={{
+                        position: 'absolute',
+                        top: '100%',
+                        left: '50%',
+                        transform: 'translateX(-50%)',
+                        marginTop: '12px',
+                        zIndex: 10,
+                        whiteSpace: 'nowrap',
+                    }}
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        // Toggle AI Suggestions panel
+                        setShowSuggestions(!showSuggestions);
+                    }}
+                >
+                    <Button
+                        variant="contained"
+                        startIcon={<LightbulbIcon sx={{ fontSize: '12px' }} />}
+                        sx={{
+                            backgroundColor: '#2563EB',
+                            color: '#ffffff',
+                            borderRadius: '20px',
+                            textTransform: 'none',
+                            fontSize: '10px',
+                            fontWeight: 400,
+                            padding: '8px 16px',
+                            whiteSpace: 'nowrap',
+                            display: 'inline-flex',
+                            alignItems: 'center',
+                            boxShadow: '0 2px 8px rgba(0, 0, 0, 0.3)',
+                            '&:hover': {
+                                backgroundColor: '#2563eb',
+                            },
+                            '& .MuiButton-startIcon': {
+                                marginRight: '8px',
+                            }
+                        }}
+                    >
+                        AI Suggestions
+                        <Box
+                            component="span"
+                            sx={{
+                                marginLeft: '8px',
+                                backgroundColor: '#FFFFFF26',
+                                color: '#ffffff',
+                                fontSize: '10px',
+                                fontWeight: 400,
+                                minWidth: '18px',
+                                height: '18px',
+                                borderRadius: '9px',
+                                display: 'inline-flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                padding: '0 6px',
+                                border: '1px solid rgba(255, 255, 255, 0.2)',
+                            }}
+                        >
+                            {data.formData.aiSuggestionsCount}
+                        </Box>
+                    </Button>
+                </Box>
+            )}
+
+            {/* AI Suggestions Panel - Rendered on canvas below the button */}
+            {showSuggestions && data.formData?.aiSuggestionsCount !== undefined && data.formData.aiSuggestionsCount > 0 && nodeId && (
+                <AISuggestionsPanel
+                    suggestions={data.formData?.aiSuggestions || [
+                        {
+                            id: '1',
+                            title: 'Add Citation Extraction',
+                            description: 'Automatically extract and format citations from article content.',
+                            tags: ['classification', 'enhancement'],
+                        },
+                        {
+                            id: '2',
+                            title: 'Generate Bullet Summary',
+                            description: 'Create a concise bullet-point summary of the article\'s main points.',
+                            tags: ['classification', 'enhancement'],
+                        },
+                    ]}
+                    parentNodeId={nodeId}
+                    onSuggestionClick={(suggestion) => {
+                        console.log('Suggestion clicked:', suggestion);
+                        // Handle suggestion selection here
+                    }}
+                    onClose={() => setShowSuggestions(false)}
+                />
+            )}
         </Box>
     );
 };