@flowuent-org/diagramming-core 1.0.8 → 1.1.1

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

@@ -1,13 +1,15 @@
 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 { AccessTime as AccessTimeIcon, Visibility as VisibilityIcon, Save as SaveIcon, Send as SendIcon } from '@mui/icons-material';
+import { Box, Typography, Chip, IconButton, Card, CardContent, Button } from '@mui/material';
+import { AccessTime as AccessTimeIcon, Visibility as VisibilityIcon, Save as SaveIcon, Send as SendIcon, 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 AutomationEndNodeProps {
     data: {
@@ -26,7 +28,10 @@ interface AutomationEndNodeProps {
         textColor: string;
         borderColor: string;
         iconName?: string; // Add iconName to the interface
-        formData?: any; // Include formData for configuration
+        formData?: {
+            aiSuggestionsCount?: number; // Number of AI suggestions available
+            [key: string]: any;
+        }; // Include formData for configuration
     };
     selected?: boolean;
 }
@@ -34,6 +39,7 @@ interface AutomationEndNodeProps {
 export const AutomationEndNode: React.FC<AutomationEndNodeProps> = ({ 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);
@@ -194,35 +200,42 @@ export const AutomationEndNode: React.FC<AutomationEndNodeProps> = ({ 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)",
@@ -334,6 +347,99 @@ export const AutomationEndNode: React.FC<AutomationEndNodeProps> = ({ 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>
     );
 };

package/packages/diagrams/src/lib/components/automation/AutomationFormattingNode.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 {
     Psychology as PsychologyIcon,
     AccessTime as AccessTimeIcon,
@@ -9,13 +9,16 @@ import {
     FilterList as FilterIcon,
     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 AutomationFormattingNodeProps {
     data: {
@@ -51,6 +54,7 @@ interface AutomationFormattingNodeProps {
                 label: string;
                 iconColor: string;
             }>;
+            aiSuggestionsCount?: number; // Number of AI suggestions available
             [key: string]: any;
         }; // Include formData for configuration
     };
@@ -60,6 +64,7 @@ interface AutomationFormattingNodeProps {
 export const AutomationFormattingNode: React.FC<AutomationFormattingNodeProps> = ({ 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);
@@ -269,35 +274,42 @@ export const AutomationFormattingNode: React.FC<AutomationFormattingNodeProps> =
 
     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)",
@@ -573,6 +585,99 @@ export const AutomationFormattingNode: React.FC<AutomationFormattingNodeProps> =
                     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>
     );
 };

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

@@ -1,8 +1,10 @@
-import React, { useEffect, useRef } from 'react';
-import { Handle, Position } from '@xyflow/react';
-import { Box, Typography } from '@mui/material';
-import { Description as DescriptionIcon } from '@mui/icons-material';
+import React, { useEffect, useRef, useState } from 'react';
+import { Handle, Position, useNodeId } from '@xyflow/react';
+import { Box, Typography, Button } from '@mui/material';
+import { Description as DescriptionIcon, Lightbulb as LightbulbIcon } from '@mui/icons-material';
 import { getIconByName } from '../../utils/iconMapper';
+import { AISuggestion } from './AISuggestionsModal';
+import { AISuggestionsPanel } from './AISuggestionsPanel';
 
 interface AutomationNoteNodeProps {
     data: {
@@ -13,13 +15,18 @@ interface AutomationNoteNodeProps {
         borderColor?: string;
         iconName?: string;
         noteType?: 'info' | 'warning' | 'note' | 'purpose';
-        formData?: any;
+        formData?: {
+            aiSuggestionsCount?: number; // Number of AI suggestions available
+            [key: string]: any;
+        };
     };
     selected?: boolean;
 }
 
 export const AutomationNoteNode: React.FC<AutomationNoteNodeProps> = ({ data, selected }) => {
     const nodeRef = useRef<HTMLDivElement | null>(null);
+    const [showSuggestions, setShowSuggestions] = useState(false);
+    const nodeId = useNodeId();
 
     // Get the icon component based on the iconName, default to DescriptionIcon
     const IconComponent = getIconByName(data.iconName || 'Description');
@@ -63,22 +70,29 @@ export const AutomationNoteNode: React.FC<AutomationNoteNodeProps> = ({ data, se
 
     return (
         <Box
-            ref={nodeRef}
             sx={{
-                width: '336px',
-                minHeight: '150px',
-                backgroundColor: colors.backgroundColor,
-                border: selected ? `2px solid ${colors.borderColor}` : `1px solid ${colors.borderColor}`,
-                borderRadius: '12px',
-                padding: '0',
-                color: colors.textColor,
                 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',
+                width: '336px',
+                overflow: 'visible',
             }}
         >
+            <Box
+                ref={nodeRef}
+                sx={{
+                    width: '336px',
+                    minHeight: '150px',
+                    backgroundColor: colors.backgroundColor,
+                    border: selected ? `2px solid ${colors.borderColor}` : `1px solid ${colors.borderColor}`,
+                    borderRadius: '12px',
+                    padding: '0',
+                    color: colors.textColor,
+                    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',
+                }}
+            >
             {/* Header */}
             <Box sx={{
                 display: 'flex',
@@ -163,6 +177,99 @@ export const AutomationNoteNode: React.FC<AutomationNoteNodeProps> = ({ data, se
                     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>
     );
 };