@flowuent-org/diagramming-core 1.1.8 → 1.2.0

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

@@ -0,0 +1,504 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { createRoot } from 'react-dom/client';
+import {
+    Box,
+    Card,
+    CardContent,
+    IconButton,
+    TextField,
+    Typography,
+    CircularProgress,
+    Alert,
+} from '@mui/material';
+import { RiCloseLine, RiSendPlaneFill } from 'react-icons/ri';
+import { IconMessage } from '@tabler/icons-react';
+import {
+    getNodeAIAssistantEndpoint,
+    getNodeAIAssistantHeaders,
+} from '../../utils/nodeAIAssistantConfig';
+
+interface Message {
+    id: string;
+    role: 'user' | 'assistant';
+    content: string;
+    timestamp: string;
+}
+
+interface NodeAIAssistantPopupProps {
+    nodeId: string;
+    nodeType: string;
+    position: { x: number; y: number };
+    onClose: () => void;
+    apiEndpoint?: string;
+    apiHeaders?: Record<string, string>;
+}
+
+export const NodeAIAssistantPopup: React.FC<NodeAIAssistantPopupProps> = ({
+    nodeId,
+    nodeType,
+    position,
+    onClose,
+    apiEndpoint,
+    apiHeaders,
+}) => {
+    // Use provided endpoint/headers or fall back to global configuration
+    const effectiveEndpoint = apiEndpoint || getNodeAIAssistantEndpoint();
+    const effectiveHeaders = apiHeaders || getNodeAIAssistantHeaders();
+    const [messages, setMessages] = useState<Message[]>([
+        {
+            id: '1',
+            role: 'assistant',
+            content: `Hello! I'm your AI assistant for this ${nodeType} node. How can I help you?`,
+            timestamp: new Date().toLocaleTimeString(),
+        },
+    ]);
+    const [inputValue, setInputValue] = useState('');
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    const messagesEndRef = useRef<HTMLDivElement>(null);
+    const popupRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+    }, [messages]);
+
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            const target = event.target as Element;
+            if (
+                popupRef.current &&
+                !popupRef.current.contains(target) &&
+                !target.closest('[data-node-ai-assistant-button]')
+            ) {
+                onClose();
+            }
+        };
+
+        setTimeout(() => {
+            document.addEventListener('mousedown', handleClickOutside);
+        }, 0);
+
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [onClose]);
+
+    const handleSend = async () => {
+        if (!inputValue.trim() || isLoading) return;
+
+        const userMessage: Message = {
+            id: Date.now().toString(),
+            role: 'user',
+            content: inputValue,
+            timestamp: new Date().toLocaleTimeString(),
+        };
+
+        setMessages((prev) => [...prev, userMessage]);
+        const currentInput = inputValue;
+        setInputValue('');
+        setError(null);
+        setIsLoading(true);
+
+        // Add a loading message placeholder
+        const loadingMessageId = (Date.now() + 1).toString();
+        const loadingMessage: Message = {
+            id: loadingMessageId,
+            role: 'assistant',
+            content: '...',
+            timestamp: new Date().toLocaleTimeString(),
+        };
+        setMessages((prev) => [...prev, loadingMessage]);
+
+        try {
+            if (effectiveEndpoint) {
+                // Send to backend API
+                const response = await fetch(effectiveEndpoint, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        ...effectiveHeaders,
+                    },
+                    body: JSON.stringify({
+                        nodeId,
+                        nodeType,
+                        message: currentInput,
+                        conversationHistory: messages.map((msg) => ({
+                            role: msg.role,
+                            content: msg.content,
+                        })),
+                    }),
+                });
+
+                if (!response.ok) {
+                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+                }
+
+                const data = await response.json();
+                
+                // Remove loading message and add actual response
+                setMessages((prev) => {
+                    const filtered = prev.filter((msg) => msg.id !== loadingMessageId);
+                    return [
+                        ...filtered,
+                        {
+                            id: Date.now().toString(),
+                            role: 'assistant',
+                            content: data.message || data.content || data.response || 'No response from AI',
+                            timestamp: new Date().toLocaleTimeString(),
+                        },
+                    ];
+                });
+            } else {
+                // Fallback: Simulate AI response if no API endpoint provided
+                setTimeout(() => {
+                    setMessages((prev) => {
+                        const filtered = prev.filter((msg) => msg.id !== loadingMessageId);
+                        return [
+                            ...filtered,
+                            {
+                                id: Date.now().toString(),
+                                role: 'assistant',
+                                content: `I understand you're asking about: "${currentInput}". This is specific to your ${nodeType} node (ID: ${nodeId}). Please configure an API endpoint to get real AI responses.`,
+                                timestamp: new Date().toLocaleTimeString(),
+                            },
+                        ];
+                    });
+                    setIsLoading(false);
+                }, 500);
+                return;
+            }
+        } catch (err) {
+            // Remove loading message and show error
+            setMessages((prev) => {
+                const filtered = prev.filter((msg) => msg.id !== loadingMessageId);
+                return [
+                    ...filtered,
+                    {
+                        id: Date.now().toString(),
+                        role: 'assistant',
+                        content: `Sorry, I encountered an error: ${err instanceof Error ? err.message : 'Unknown error'}. Please check your API endpoint configuration.`,
+                        timestamp: new Date().toLocaleTimeString(),
+                    },
+                ];
+            });
+            setError(err instanceof Error ? err.message : 'Failed to get AI response');
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleKeyPress = (e: React.KeyboardEvent) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            handleSend();
+        }
+    };
+
+    return (
+        <>
+            {/* Backdrop */}
+            <Box
+                data-backdrop
+                onClick={onClose}
+                sx={{
+                    position: 'fixed',
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    bgcolor: 'rgba(0, 0, 0, 0.3)',
+                    zIndex: 9998,
+                }}
+            />
+            {/* Popup */}
+            <Card
+                ref={popupRef}
+                id="node-ai-assistant-popup"
+                sx={{
+                    position: 'fixed',
+                    left: `${position.x}px`,
+                    top: `${position.y}px`,
+                    zIndex: 9999,
+                    width: '420px',
+                    height: '600px',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    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)',
+                    overflow: 'hidden',
+                }}
+            >
+                {/* Header */}
+                <Box
+                    sx={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
+                        p: 2,
+                        borderBottom: '1px solid #374151',
+                        bgcolor: '#111827',
+                    }}
+                >
+                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
+                        <IconMessage size={20} style={{ color: '#3b82f6' }} />
+                        <Typography
+                            variant="h6"
+                            sx={{ color: '#fff', fontSize: '16px', fontWeight: 600 }}
+                        >
+                            Node AI Assistant
+                        </Typography>
+                        <Typography
+                            variant="caption"
+                            sx={{ color: '#9CA3AF', fontSize: '11px', ml: 1 }}
+                        >
+                            {nodeType}
+                        </Typography>
+                    </Box>
+                    <IconButton
+                        aria-label="close"
+                        onClick={onClose}
+                        sx={{
+                            color: '#9CA3AF',
+                            '&:hover': {
+                                color: '#fff',
+                                bgcolor: 'rgba(255, 255, 255, 0.1)',
+                            },
+                        }}
+                    >
+                        <RiCloseLine />
+                    </IconButton>
+                </Box>
+
+                {/* Messages */}
+                <CardContent
+                    sx={{
+                        flex: 1,
+                        overflow: 'auto',
+                        p: 2,
+                        bgcolor: '#1F2937',
+                        '&::-webkit-scrollbar': {
+                            width: '6px',
+                        },
+                        '&::-webkit-scrollbar-track': {
+                            background: 'transparent',
+                        },
+                        '&::-webkit-scrollbar-thumb': {
+                            background: '#4B5563',
+                            borderRadius: '3px',
+                            '&:hover': {
+                                background: '#6B7280',
+                            },
+                        },
+                    }}
+                >
+                    {error && (
+                        <Alert
+                            severity="error"
+                            sx={{
+                                mb: 2,
+                                bgcolor: '#7F1D1D',
+                                color: '#FCA5A5',
+                                '& .MuiAlert-icon': {
+                                    color: '#FCA5A5',
+                                },
+                            }}
+                            onClose={() => setError(null)}
+                        >
+                            {error}
+                        </Alert>
+                    )}
+                    {messages.map((message) => (
+                        <Box
+                            key={message.id}
+                            sx={{
+                                display: 'flex',
+                                justifyContent: message.role === 'user' ? 'flex-end' : 'flex-start',
+                                mb: 2,
+                            }}
+                        >
+                            <Box
+                                sx={{
+                                    maxWidth: '80%',
+                                    p: 1.5,
+                                    borderRadius: '8px',
+                                    bgcolor:
+                                        message.role === 'user' ? '#2563EB' : '#111827',
+                                    border:
+                                        message.role === 'assistant'
+                                            ? '1px solid #374151'
+                                            : 'none',
+                                    display: 'flex',
+                                    alignItems: message.content === '...' ? 'center' : 'flex-start',
+                                    gap: 1,
+                                }}
+                            >
+                                {message.content === '...' && isLoading ? (
+                                    <CircularProgress size={16} sx={{ color: '#3b82f6' }} />
+                                ) : (
+                                    <Typography
+                                        variant="body2"
+                                        sx={{
+                                            color: '#fff',
+                                            fontSize: '13px',
+                                            lineHeight: 1.5,
+                                            whiteSpace: 'pre-wrap',
+                                            wordBreak: 'break-word',
+                                        }}
+                                    >
+                                        {message.content}
+                                    </Typography>
+                                )}
+                                {message.content !== '...' && (
+                                    <Typography
+                                        variant="caption"
+                                        sx={{
+                                            color: 'rgba(255, 255, 255, 0.5)',
+                                            fontSize: '10px',
+                                            display: 'block',
+                                            mt: 0.5,
+                                            alignSelf: 'flex-end',
+                                        }}
+                                    >
+                                        {message.timestamp}
+                                    </Typography>
+                                )}
+                            </Box>
+                        </Box>
+                    ))}
+                    <div ref={messagesEndRef} />
+                </CardContent>
+
+                {/* Input */}
+                <Box
+                    sx={{
+                        p: 2,
+                        borderTop: '1px solid #374151',
+                        bgcolor: '#111827',
+                    }}
+                >
+                    <Box sx={{ display: 'flex', gap: 1 }}>
+                        <TextField
+                            fullWidth
+                            placeholder="Ask your Node AI Assistant..."
+                            value={inputValue}
+                            onChange={(e) => setInputValue(e.target.value)}
+                            onKeyPress={handleKeyPress}
+                            multiline
+                            maxRows={3}
+                            sx={{
+                                '& .MuiOutlinedInput-root': {
+                                    bgcolor: '#1F2937',
+                                    color: '#fff',
+                                    borderRadius: '8px',
+                                    '& fieldset': {
+                                        borderColor: '#374151',
+                                    },
+                                    '&:hover fieldset': {
+                                        borderColor: '#4B5563',
+                                    },
+                                    '&.Mui-focused fieldset': {
+                                        borderColor: '#3b82f6',
+                                    },
+                                },
+                                '& .MuiInputBase-input': {
+                                    color: '#fff',
+                                    fontSize: '13px',
+                                    '&::placeholder': {
+                                        color: '#9CA3AF',
+                                        opacity: 1,
+                                    },
+                                },
+                            }}
+                        />
+                        <IconButton
+                            onClick={handleSend}
+                            disabled={!inputValue.trim() || isLoading}
+                            sx={{
+                                bgcolor: '#2563EB',
+                                color: '#fff',
+                                '&:hover': {
+                                    bgcolor: '#1d4ed8',
+                                },
+                                '&:disabled': {
+                                    bgcolor: '#374151',
+                                    color: '#6B7280',
+                                },
+                            }}
+                        >
+                            {isLoading ? (
+                                <CircularProgress size={20} sx={{ color: '#fff' }} />
+                            ) : (
+                                <RiSendPlaneFill />
+                            )}
+                        </IconButton>
+                    </Box>
+                </Box>
+            </Card>
+        </>
+    );
+};
+
+/**
+ * Show Node AI Assistant Popup at a specific position
+ * @param nodeId - The ID of the node
+ * @param nodeType - The type of the node (e.g., 'Start Node', 'API Node')
+ * @param buttonElement - The button element that triggered the popup (for positioning)
+ * @param apiEndpoint - Optional API endpoint (overrides global config)
+ * @param apiHeaders - Optional API headers (overrides global config)
+ */
+export const showNodeAIAssistantPopup = (
+    nodeId: string,
+    nodeType: string,
+    buttonElement: HTMLElement,
+    apiEndpoint?: string,
+    apiHeaders?: Record<string, string>
+): (() => void) => {
+    const portalRoot = document.createElement('div');
+    document.body.appendChild(portalRoot);
+
+    const root = createRoot(portalRoot);
+
+    // Calculate position relative to button
+    const rect = buttonElement.getBoundingClientRect();
+    const position = {
+        x: rect.right + 12, // Position to the right of the button
+        y: rect.top - 50, // Align with button
+    };
+
+    // Adjust if popup would go off screen
+    const popupWidth = 420;
+    const popupHeight = 600;
+    if (position.x + popupWidth > window.innerWidth) {
+        position.x = rect.left - popupWidth - 12; // Position to the left instead
+    }
+    if (position.y + popupHeight > window.innerHeight) {
+        position.y = window.innerHeight - popupHeight - 20;
+    }
+    if (position.y < 0) {
+        position.y = 20;
+    }
+
+    const handleClose = () => {
+        root.unmount();
+        if (portalRoot.parentNode) {
+            document.body.removeChild(portalRoot);
+        }
+    };
+
+    root.render(
+        <NodeAIAssistantPopup
+            nodeId={nodeId}
+            nodeType={nodeType}
+            position={position}
+            onClose={handleClose}
+            apiEndpoint={apiEndpoint}
+            apiHeaders={apiHeaders}
+        />
+    );
+
+    return handleClose;
+};
+

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

@@ -0,0 +1,146 @@
+import React from 'react';
+import { Box, IconButton, Tooltip } from '@mui/material';
+import {
+    IconLayoutGrid,
+    IconMessage,
+    IconPlus,
+    IconCopy,
+    IconTrash,
+} from '@tabler/icons-react';
+
+interface NodeActionButtonsProps {
+    selected?: boolean;
+    onLayout?: () => void;
+    onOpenAIAssistant?: (buttonElement: HTMLElement) => void;
+    onAddToGroup?: () => void;
+    onDuplicate?: () => void;
+    onDelete?: () => void;
+}
+
+export const NodeActionButtons: React.FC<NodeActionButtonsProps> = ({
+    selected,
+    onLayout,
+    onOpenAIAssistant,
+    onAddToGroup,
+    onDuplicate,
+    onDelete,
+}) => {
+    if (!selected) return null;
+
+    return (
+        <Box
+            sx={{
+                position: 'absolute',
+                left: '100%',
+                top: '50%',
+                transform: 'translateY(-50%)',
+                marginLeft: '12px',
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 0.5,
+                backgroundColor: 'rgba(15, 15, 35, 0.95)',
+                borderRadius: '12px',
+                border: '1px solid rgba(255, 255, 255, 0.1)',
+                p: 0.5,
+                zIndex: 1000,
+                boxShadow: '0 4px 20px rgba(0, 0, 0, 0.3)',
+            }}
+            onClick={(e) => e.stopPropagation()}
+        >
+            <Tooltip title="Layout" placement="right">
+                <IconButton
+                    size="small"
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        onLayout?.();
+                    }}
+                    sx={{
+                        color: 'rgba(255, 255, 255, 0.6)',
+                        '&:hover': {
+                            backgroundColor: 'rgba(255, 255, 255, 0.1)',
+                            color: '#fff',
+                        },
+                    }}
+                >
+                    <IconLayoutGrid size={18} />
+                </IconButton>
+            </Tooltip>
+            <Tooltip title="Node AI Assistant" placement="right">
+                <IconButton
+                    size="small"
+                    data-node-ai-assistant-button
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        onOpenAIAssistant?.(e.currentTarget);
+                    }}
+                    sx={{
+                        color: 'rgba(255, 255, 255, 0.6)',
+                        '&:hover': {
+                            backgroundColor: 'rgba(255, 255, 255, 0.1)',
+                            color: '#fff',
+                        },
+                    }}
+                >
+                    <IconMessage size={18} />
+                </IconButton>
+            </Tooltip>
+            <Tooltip title="Add to Group" placement="right">
+                <IconButton
+                    size="small"
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        onAddToGroup?.();
+                    }}
+                    sx={{
+                        color: 'rgba(255, 255, 255, 0.6)',
+                        '&:hover': {
+                            backgroundColor: 'rgba(255, 255, 255, 0.1)',
+                            color: '#fff',
+                        },
+                    }}
+                >
+                    <IconPlus size={18} />
+                </IconButton>
+            </Tooltip>
+            <Tooltip title="Duplicate" placement="right">
+                <IconButton
+                    size="small"
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        onDuplicate?.();
+                    }}
+                    sx={{
+                        color: 'rgba(255, 255, 255, 0.6)',
+                        '&:hover': {
+                            backgroundColor: 'rgba(255, 255, 255, 0.1)',
+                            color: '#fff',
+                        },
+                    }}
+                >
+                    <IconCopy size={18} />
+                </IconButton>
+            </Tooltip>
+            <Tooltip title="Delete" placement="right">
+                <IconButton
+                    size="small"
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        onDelete?.();
+                    }}
+                    sx={{
+                        color: 'rgba(255, 255, 255, 0.6)',
+                        '&:hover': {
+                            backgroundColor: 'rgba(239, 68, 68, 0.2)',
+                            color: '#EF4444',
+                        },
+                    }}
+                >
+                    <IconTrash size={18} />
+                </IconButton>
+            </Tooltip>
+        </Box>
+    );
+};
+
+export default NodeActionButtons;
+

package/packages/diagrams/src/lib/components/automation/index.ts

@@ -1,11 +1,20 @@
-export { AutomationStartNode } from './AutomationStartNode';
-export { AutomationApiNode } from './AutomationApiNode';
-export { AutomationFormattingNode } from './AutomationFormattingNode';
-export { AutomationSheetsNode } from './AutomationSheetsNode';
-export { AutomationEndNode } from './AutomationEndNode';
-export { AutomationNoteNode } from './AutomationNoteNode';
-export { AutomationExecutionPanel } from './AutomationExecutionPanel';
-export { AutomationAISuggestionNode } from './AutomationAISuggestionNode';
-export { AISuggestionsModal, showAISuggestionsModal } from './AISuggestionsModal';
-export { AISuggestionsPanel } from './AISuggestionsPanel';
-export type { AISuggestion } from './AISuggestionsModal';
+export { AutomationStartNode } from './AutomationStartNode';
+export { AutomationApiNode } from './AutomationApiNode';
+export { AutomationFormattingNode } from './AutomationFormattingNode';
+export { AutomationSheetsNode } from './AutomationSheetsNode';
+export { AutomationEndNode } from './AutomationEndNode';
+export { AutomationNoteNode } from './AutomationNoteNode';
+export { AutomationExecutionPanel } from './AutomationExecutionPanel';
+export { AutomationAISuggestionNode } from './AutomationAISuggestionNode';
+export { AISuggestionsModal, showAISuggestionsModal } from './AISuggestionsModal';
+export { AISuggestionsPanel } from './AISuggestionsPanel';
+export { NodeActionButtons } from './NodeActionButtons';
+export { NodeAIAssistantPopup, showNodeAIAssistantPopup } from './NodeAIAssistantPopup';
+export type { AISuggestion } from './AISuggestionsModal';
+export {
+    setNodeAIAssistantEndpoint,
+    setNodeAIAssistantHeaders,
+    getNodeAIAssistantEndpoint,
+    getNodeAIAssistantHeaders,
+    configureNodeAIAssistant,
+} from '../../utils/nodeAIAssistantConfig';