@flowuent-org/diagramming-core 1.3.10 → 1.4.0

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

@@ -1,504 +0,0 @@
-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

@@ -1,146 +0,0 @@
-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;
-