@flowuent-org/diagramming-core 1.2.1 → 1.2.2

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

@@ -1,145 +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;
-    onAddNote?: () => void;
-    onAddToGroup?: () => void;
-    onDuplicate?: () => void;
-    onDelete?: () => void;
-}
-
-export const NodeActionButtons: React.FC<NodeActionButtonsProps> = ({
-    selected,
-    onLayout,
-    onAddNote,
-    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="Add Note" placement="right">
-                <IconButton
-                    size="small"
-                    onClick={(e) => {
-                        e.stopPropagation();
-                        onAddNote?.();
-                    }}
-                    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;
-
+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,12 +1,21 @@
-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 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 { AutomationNavigationNode } from './AutomationNavigationNode';
+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';

package/packages/diagrams/src/lib/contexts/SearchContext.tsx

@@ -0,0 +1,78 @@
+import React, { createContext, useContext, useState, ReactNode } from 'react';
+
+interface SearchContextType {
+  searchQuery: string;
+  setSearchQuery: (query: string) => void;
+  highlightText: (text: string) => React.ReactNode;
+}
+
+const SearchContext = createContext<SearchContextType | undefined>(undefined);
+
+export const SearchProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const highlightText = (text: string): React.ReactNode => {
+    if (!searchQuery.trim() || !text) {
+      return text;
+    }
+
+    const searchLower = searchQuery.toLowerCase();
+    const textLower = String(text).toLowerCase();
+    const parts: React.ReactNode[] = [];
+    let lastIndex = 0;
+    let index = textLower.indexOf(searchLower, lastIndex);
+
+    // Highlight all occurrences
+    while (index !== -1) {
+      // Add text before match
+      if (index > lastIndex) {
+        parts.push(String(text).substring(lastIndex, index));
+      }
+
+      // Add highlighted match
+      parts.push(
+        <mark
+          key={index}
+          style={{
+            backgroundColor: '#FFD700',
+            color: '#000',
+            padding: '2px 4px',
+            borderRadius: '3px',
+            fontWeight: 'bold',
+          }}
+        >
+          {String(text).substring(index, index + searchQuery.length)}
+        </mark>
+      );
+
+      lastIndex = index + searchQuery.length;
+      index = textLower.indexOf(searchLower, lastIndex);
+    }
+
+    // Add remaining text
+    if (lastIndex < String(text).length) {
+      parts.push(String(text).substring(lastIndex));
+    }
+
+    return parts.length > 0 ? <>{parts}</> : text;
+  };
+
+  return (
+    <SearchContext.Provider value={{ searchQuery, setSearchQuery, highlightText }}>
+      {children}
+    </SearchContext.Provider>
+  );
+};
+
+export const useSearch = () => {
+  const context = useContext(SearchContext);
+  if (!context) {
+    return {
+      searchQuery: '',
+      setSearchQuery: () => {},
+      highlightText: (text: string) => text,
+    };
+  }
+  return context;
+};
+

package/packages/diagrams/src/lib/templates/DiagramContainer.tsx

@@ -1,76 +1,79 @@
-import React from 'react';
-import { ReactFlowProps, ReactFlowProvider } from '@xyflow/react';
-import '@xyflow/react/dist/style.css';
-import { DiagramContent } from './DiagramContent';
-
-interface DiagramContainerProps
-  extends Omit<ReactFlowProps, 'nodes' | 'edges' | 'onChange'> {
-  showAutomationExecutionPanel?: boolean;
-}
-
-// Default arrow marker definitions for edges
-const EdgeMarkerDefinitions = () => (
-  <svg style={{ position: 'absolute', width: 0, height: 0 }}>
-    <defs>
-      {/* Arrow marker - Green */}
-      <marker
-        id="arrow"
-        viewBox="0 0 10 10"
-        refX="8"
-        refY="5"
-        markerWidth="6"
-        markerHeight="6"
-        orient="auto-start-reverse"
-      >
-        <path d="M 0 0 L 10 5 L 0 10 z" fill="#10B981" />
-      </marker>
-      
-      {/* Arrow marker - Blue */}
-      <marker
-        id="arrow-blue"
-        viewBox="0 0 10 10"
-        refX="8"
-        refY="5"
-        markerWidth="6"
-        markerHeight="6"
-        orient="auto-start-reverse"
-      >
-        <path d="M 0 0 L 10 5 L 0 10 z" fill="#4858E9" />
-      </marker>
-      
-      {/* Arrow marker - White */}
-      <marker
-        id="arrow-white"
-        viewBox="0 0 10 10"
-        refX="8"
-        refY="5"
-        markerWidth="6"
-        markerHeight="6"
-        orient="auto-start-reverse"
-      >
-        <path d="M 0 0 L 10 5 L 0 10 z" fill="#ffffff" />
-      </marker>
-      
-      {/* Circle marker */}
-      <marker
-        id="circle"
-        viewBox="0 0 10 10"
-        refX="5"
-        refY="5"
-        markerWidth="5"
-        markerHeight="5"
-      >
-        <circle cx="5" cy="5" r="4" fill="#10B981" />
-      </marker>
-    </defs>
-  </svg>
-);
-
-export const DiagramContainer: React.FC<DiagramContainerProps> = (props) => {
-  return (
-    <ReactFlowProvider>
-      <EdgeMarkerDefinitions />
-      <DiagramContent {...props} />
-    </ReactFlowProvider>
-  );
-};
+import React from 'react';
+import { ReactFlowProps, ReactFlowProvider } from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import { DiagramContent } from './DiagramContent';
+import { SearchProvider } from '../contexts/SearchContext';
+
+interface DiagramContainerProps
+  extends Omit<ReactFlowProps, 'nodes' | 'edges' | 'onChange'> {
+  showAutomationExecutionPanel?: boolean;
+}
+
+// Default arrow marker definitions for edges
+const EdgeMarkerDefinitions = () => (
+  <svg style={{ position: 'absolute', width: 0, height: 0 }}>
+    <defs>
+      {/* Arrow marker - Green */}
+      <marker
+        id="arrow"
+        viewBox="0 0 10 10"
+        refX="8"
+        refY="5"
+        markerWidth="6"
+        markerHeight="6"
+        orient="auto-start-reverse"
+      >
+        <path d="M 0 0 L 10 5 L 0 10 z" fill="#10B981" />
+      </marker>
+      
+      {/* Arrow marker - Blue */}
+      <marker
+        id="arrow-blue"
+        viewBox="0 0 10 10"
+        refX="8"
+        refY="5"
+        markerWidth="6"
+        markerHeight="6"
+        orient="auto-start-reverse"
+      >
+        <path d="M 0 0 L 10 5 L 0 10 z" fill="#4858E9" />
+      </marker>
+      
+      {/* Arrow marker - White */}
+      <marker
+        id="arrow-white"
+        viewBox="0 0 10 10"
+        refX="8"
+        refY="5"
+        markerWidth="6"
+        markerHeight="6"
+        orient="auto-start-reverse"
+      >
+        <path d="M 0 0 L 10 5 L 0 10 z" fill="#ffffff" />
+      </marker>
+      
+      {/* Circle marker */}
+      <marker
+        id="circle"
+        viewBox="0 0 10 10"
+        refX="5"
+        refY="5"
+        markerWidth="5"
+        markerHeight="5"
+      >
+        <circle cx="5" cy="5" r="4" fill="#10B981" />
+      </marker>
+    </defs>
+  </svg>
+);
+
+export const DiagramContainer: React.FC<DiagramContainerProps> = (props) => {
+  return (
+    <ReactFlowProvider>
+      <SearchProvider>
+        <EdgeMarkerDefinitions />
+        <DiagramContent {...props} />
+      </SearchProvider>
+    </ReactFlowProvider>
+  );
+};