@flowuent-org/diagramming-core 1.4.0 → 1.4.2

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

@@ -0,0 +1,84 @@
+import React from 'react';
+import { Typography, Chip } from '@mui/material';
+import { SubWorkflowNodeIcon } from '../../icons';
+import {
+  AutomationNodeCard,
+  AutomationNodeCardData,
+} from './AutomationNodeCard';
+
+export interface AutomationWorkflowNodeData extends AutomationNodeCardData {
+  parameters?: {
+    workflowId?: string;
+    workflowName?: string;
+    inputMapping?: Record<string, string>;
+    waitForCompletion?: boolean;
+    [key: string]: unknown;
+  };
+}
+
+export interface AutomationWorkflowNodeProps {
+  data: AutomationWorkflowNodeData;
+  selected?: boolean;
+}
+
+export const AutomationWorkflowNode: React.FC<AutomationWorkflowNodeProps> = ({
+  data,
+  selected,
+}) => {
+  const workflowId =
+    data.parameters?.workflowId ??
+    (data.formData?.workflowId as string | undefined) ??
+    '';
+  const workflowName =
+    data.parameters?.workflowName ??
+    (data.formData?.workflowName as string | undefined) ??
+    '';
+  const waitForCompletion =
+    data.parameters?.waitForCompletion ??
+    (data.formData?.waitForCompletion as boolean | undefined) ??
+    true;
+
+  return (
+    <AutomationNodeCard
+      data={data}
+      selected={selected}
+      icon={<SubWorkflowNodeIcon />}
+      aiAssistantTitle="Workflow Node"
+      descriptionContent={
+        <>
+          {workflowName && (
+            <Typography variant="body2" sx={{ color: '#A5B4FC', fontSize: '12px', fontWeight: 600, mb: 0.75 }}>
+              {workflowName}
+            </Typography>
+          )}
+          <Typography
+            variant="body2"
+            sx={{
+              color: '#9CA3AF',
+              fontSize: '12px',
+              lineHeight: 1.4,
+              fontFamily: 'monospace',
+              mb: 1,
+              wordBreak: 'break-all',
+            }}
+          >
+            {workflowId || 'No workflow selected'}
+          </Typography>
+          <Chip
+            size="small"
+            label={waitForCompletion ? 'Wait for completion' : 'Fire and forget'}
+            sx={{
+              height: 20,
+              fontSize: '10px',
+              fontWeight: 600,
+              color: '#A5B4FC',
+              bgcolor: 'rgba(165, 180, 252, 0.12)',
+            }}
+          />
+        </>
+      }
+    />
+  );
+};
+
+export default AutomationWorkflowNode;

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;
+};
+