@flowuent-org/diagramming-core 1.3.10 → 1.4.1

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

@@ -1,269 +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;
-};
-
+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;
+};
+