@flowuent-org/diagramming-core 1.4.3 → 1.4.5

package/apps/diagramming/src/AutomationDiagramData.ts

@@ -113,15 +113,13 @@ export const automationDefaultNodes = [
         // Configuration cards for dynamic display
         configurationCards: [
           {
-            icon: '⚙️',
+            type: 'model',
             label: 'GPT-5 Thinking mini · v1',
-            iconColor: '#ffffff',
-          },
-          {
-            icon: '🗄️',
-            label: 'KB: CNN_Homepage_Titles (18 items)',
-            iconColor: '#10b981',
           },
+          // {
+          //   type: 'knowledgeBase',
+          //   label: 'KB: CNN_Homepage_Titles (18 items)',
+          // },
         ],
         // AI Suggestions count and data
         aiSuggestionsCount: 2,
@@ -244,20 +242,18 @@ export const automationDefaultNodes = [
           ignored: 0,
         },
         // AI Reasoning data
-        aiReasoning: {
-          text: 'Analyzed the selected headline for key components and promises',
-        },
+        // aiReasoning: {
+        //   text: 'Analyzed the selected headline for key components and promises',
+        // },
         // Configuration cards for dynamic display
         configurationCards: [
           {
-            icon: '🧠',
+            type: 'model',
             label: 'GPT-5 Thinking mini · v1',
-            iconColor: '#ffffff',
           },
           {
-            icon: '📚',
+            type: 'knowledgeBase',
             label: 'KB: CNN_Articles (18 items)',
-            iconColor: '#10b981',
           },
         ],
         // AI Suggestions count
@@ -463,6 +459,125 @@ export const automationDefaultNodes = [
     measured: { width: 300, height: 200 },
   },
   // =====================================
+  // Gmail Integration Node
+  // =====================================
+  {
+    id: 'gmail-node',
+    type: 'AutomationGmailNode',
+    position: { x: 1500, y: 700 },
+    data: {
+      label: 'Send Gmail',
+      description: 'Send an email via Gmail',
+      headerText: 'Gmail integration',
+      serviceType: 'gmail',
+      operationType: 'send-email',
+      status: 'Need to Config',
+      parameters: {
+        to: 'team@example.com',
+        subject: 'Workflow Update',
+        message: 'Your automation workflow completed successfully.',
+      },
+      formData: {
+        nodeId: 'gmail-node',
+        title: 'Send Gmail',
+        type: 'gmail',
+        operationType: 'send-email',
+      },
+      lastRun: 'Never',
+    },
+    width: 300,
+    height: 200,
+    measured: { width: 300, height: 200 },
+  },
+  // =====================================
+  // Google Docs Integration Node
+  // =====================================
+  {
+    id: 'google-docs-node',
+    type: 'AutomationGoogleDocsNode',
+    position: { x: 1850, y: 700 },
+    data: {
+      label: 'Create Google Doc',
+      description: 'Create or update a Google Document',
+      headerText: 'Google Docs integration',
+      serviceType: 'docs',
+      operationType: 'create-document',
+      status: 'Need to Config',
+      parameters: {
+        documentTitle: 'Workflow Report',
+      },
+      formData: {
+        nodeId: 'google-docs-node',
+        title: 'Create Google Doc',
+        type: 'google-docs',
+        operationType: 'create-document',
+      },
+      lastRun: 'Never',
+    },
+    width: 300,
+    height: 200,
+    measured: { width: 300, height: 200 },
+  },
+  // =====================================
+  // Google Slides Integration Node
+  // =====================================
+  {
+    id: 'google-slides-node',
+    type: 'AutomationGoogleSlidesNode',
+    position: { x: 2200, y: 700 },
+    data: {
+      label: 'Create Presentation',
+      description: 'Create or update a Google Slides deck',
+      headerText: 'Google Slides integration',
+      serviceType: 'slides',
+      operationType: 'create-presentation',
+      status: 'Need to Config',
+      parameters: {
+        presentationTitle: 'Workflow Summary Deck',
+      },
+      formData: {
+        nodeId: 'google-slides-node',
+        title: 'Create Presentation',
+        type: 'google-slides',
+        operationType: 'create-presentation',
+      },
+      lastRun: 'Never',
+    },
+    width: 300,
+    height: 200,
+    measured: { width: 300, height: 200 },
+  },
+  // =====================================
+  // Google Meet Integration Node
+  // =====================================
+  {
+    id: 'google-meet-node',
+    type: 'AutomationGoogleMeetNode',
+    position: { x: 2550, y: 700 },
+    data: {
+      label: 'Schedule Meet',
+      description: 'Create or schedule a Google Meet session',
+      headerText: 'Google Meet integration',
+      serviceType: 'meet',
+      operationType: 'schedule-meeting',
+      status: 'Need to Config',
+      parameters: {
+        meetingTitle: 'Workflow Review Meeting',
+        meetingLink: '',
+      },
+      formData: {
+        nodeId: 'google-meet-node',
+        title: 'Schedule Meet',
+        type: 'google-meet',
+        operationType: 'schedule-meeting',
+      },
+      lastRun: 'Never',
+    },
+    width: 300,
+    height: 200,
+    measured: { width: 300, height: 200 },
+  },
+  // =====================================
   // Interaction Node
   // =====================================
   {
@@ -852,6 +967,85 @@ export const automationDefaultEdges = [
     },
   },
   // =====================================
+  // Google Nodes Edges
+  // =====================================
+  {
+    id: 'edge-telegram-to-gmail',
+    source: 'telegram-node',
+    target: 'gmail-node',
+    sourceHandle: 'right',
+    targetHandle: 'left',
+    data: {
+      label: 'Email Report',
+      type: 'flow',
+    },
+    style: {
+      stroke: '#EA4335',
+      strokeWidth: 2,
+    },
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+      color: '#EA4335',
+    },
+  },
+  {
+    id: 'edge-gmail-to-docs',
+    source: 'gmail-node',
+    target: 'google-docs-node',
+    sourceHandle: 'right',
+    targetHandle: 'left',
+    data: {
+      label: 'Create Doc',
+      type: 'flow',
+    },
+    style: {
+      stroke: '#4285F4',
+      strokeWidth: 2,
+    },
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+      color: '#4285F4',
+    },
+  },
+  {
+    id: 'edge-docs-to-slides',
+    source: 'google-docs-node',
+    target: 'google-slides-node',
+    sourceHandle: 'right',
+    targetHandle: 'left',
+    data: {
+      label: 'Build Deck',
+      type: 'flow',
+    },
+    style: {
+      stroke: '#FBBC04',
+      strokeWidth: 2,
+    },
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+      color: '#FBBC04',
+    },
+  },
+  {
+    id: 'edge-slides-to-meet',
+    source: 'google-slides-node',
+    target: 'google-meet-node',
+    sourceHandle: 'right',
+    targetHandle: 'left',
+    data: {
+      label: 'Schedule Meet',
+      type: 'flow',
+    },
+    style: {
+      stroke: '#00897B',
+      strokeWidth: 2,
+    },
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+      color: '#00897B',
+    },
+  },
+  // =====================================
   // Monitoring Node Edge
   // =====================================
   {

package/apps/diagramming/src/main.tsx

@@ -453,9 +453,7 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
             onChange={onChange}
             availableFunctions={[]}
             id={8}
-          >
-            {/* {automationChildren} */}
-          </DiagrammingPage>
+          />
         }
       />
     </Routes>

package/apps/workflow/locales/en/translation.json

@@ -649,9 +649,13 @@
     "formattingNode": {
       "headerDescription": "AI-powered content analysis",
       "aiReasoning": "AI Reasoning",
-      "aiReasoningDefault": "Analyzed the selected headline for key components and promises",
       "formattedData": "Formatted Data"
     },
+    "googleAuth": {
+      "connectGoogle": "Connect Google",
+      "connecting": "Connecting...",
+      "signOut": "Sign out"
+    },
     "endNode": {
       "headerDescription": "Workflow completion and results display",
       "finalOutput": "Final Output"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowuent-org/diagramming-core",
-  "version": "1.4.3",
+  "version": "1.4.5",
   "license": "MIT",
   "publishConfig": {
     "access": "public"

package/packages/diagrams/locales/en/translation.json

@@ -649,9 +649,13 @@
     "formattingNode": {
       "headerDescription": "AI-powered content analysis",
       "aiReasoning": "AI Reasoning",
-      "aiReasoningDefault": "Analyzed the selected headline for key components and promises",
       "formattedData": "Formatted Data"
     },
+    "googleAuth": {
+      "connectGoogle": "Connect Google",
+      "connecting": "Connecting...",
+      "signOut": "Sign out"
+    },
     "endNode": {
       "headerDescription": "Workflow completion and results display",
       "finalOutput": "Final Output"

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

@@ -24,6 +24,8 @@ import { useSearch } from '../../contexts/SearchContext';
 import { getStatusColor } from './statusColors';
 import { ApiNodeIcon } from '../../icons';
 import { AutomationNodeHeaderSection } from './AutomationNodeHeader';
+import { AutomationConfigurationCardsSection } from './AutomationNodeConfigDisplay';
+import { AutomationConfigurationCard } from '../../types/automation-node-data-types';
 
 interface AutomationApiNodeProps {
     data: {
@@ -49,11 +51,7 @@ interface AutomationApiNodeProps {
                 partial: number;
                 ignored: number;
             };
-            configurationCards?: Array<{
-                icon: string;
-                label: string;
-                iconColor: string;
-            }>;
+            configurationCards?: AutomationConfigurationCard[];
             aiSuggestionsCount?: number; // Number of AI suggestions available
             aiSuggestions?: AISuggestion[]; // AI suggestions data
             [key: string]: any;
@@ -476,30 +474,9 @@ export const AutomationApiNode: React.FC<AutomationApiNodeProps> = ({ data, sele
                     </>
                 )}
 
-                {/* Configuration Cards */}
-                {data.formData?.configurationCards?.map((card: any, index: number) => (
-                    <Box key={index} sx={{
-                        backgroundColor: '#1F2937',
-                        borderRadius: '6px',
-                        padding: '8px 12px',
-                        mb: 1,
-                        display: 'flex',
-                        alignItems: 'center',
-                        gap: 1,
-                        border: '1px solid #374151'
-                    }}>
-                        <Box sx={{ color: card.iconColor || '#ffffff', fontSize: '16px' }}>
-                            {card.icon}
-                        </Box>
-                        <Typography variant="body2" sx={{
-                            color: '#ffffff',
-                            fontSize: '11px',
-                            fontWeight: 500
-                        }}>
-                            {card.label}
-                        </Typography>
-                    </Box>
-                ))}
+                <AutomationConfigurationCardsSection
+                    configurationCards={data.formData?.configurationCards}
+                />
 
                 {/* Last Run Info */}
                 <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, mt: 1 }}>

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

@@ -24,6 +24,11 @@ import { useSearch } from '../../contexts/SearchContext';
 import { getStatusColor } from './statusColors';
 import { ArticleAnalyzerIcon, FormattingNodeIcon } from '../../icons';
 import { AutomationNodeHeaderSection } from './AutomationNodeHeader';
+import {
+    AutomationAIReasoningSection,
+    AutomationConfigurationCardsSection,
+} from './AutomationNodeConfigDisplay';
+import { AutomationConfigurationCard, AutomationAIReasoning } from '../../types/automation-node-data-types';
 
 interface AutomationFormattingNodeProps {
     data: {
@@ -52,14 +57,8 @@ interface AutomationFormattingNodeProps {
                 partial: number;
                 ignored: number;
             };
-            aiReasoning?: {
-                text: string;
-            };
-            configurationCards?: Array<{
-                icon: string;
-                label: string;
-                iconColor: string;
-            }>;
+            aiReasoning?: AutomationAIReasoning;
+            configurationCards?: AutomationConfigurationCard[];
             aiSuggestionsCount?: number; // Number of AI suggestions available
             [key: string]: any;
         }; // Include formData for configuration
@@ -394,48 +393,7 @@ export const AutomationFormattingNode: React.FC<AutomationFormattingNodeProps> =
                     </Box>
                 </Box>
 
-                {/* AI Reasoning Section */}
-                <Box sx={{
-                    backgroundColor: '#1F2937',
-                    borderRadius: '8px',
-                    padding: '12px',
-                    mb: 2,
-                    border: '1px solid #374151'
-                }}>
-                    {/* AI Reasoning Header */}
-                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}>
-                        <Box sx={{ color: '#34D399', fontSize: '16px' }}>
-                            🧠
-                        </Box>
-                        <Typography variant="body2" sx={{
-                            color: '#34D399',
-                            fontSize: '12px',
-                            fontWeight: 600
-                        }}>
-                            {t('automation.formattingNode.aiReasoning')}
-                        </Typography>
-                    </Box>
-
-                    {/* AI Reasoning Description */}
-                    <Box sx={{
-                        backgroundColor: 'transparent',
-                        borderRadius: '4px',
-                        padding: '8px',
-                        border: '1px solid #4B5563',
-                        minHeight: '40px',
-                        display: 'flex',
-                        alignItems: 'center'
-                    }}>
-                        <Typography variant="body2" sx={{
-                            color: '#9CA3AF',
-                            fontSize: '12px',
-                            lineHeight: 1.4,
-                            margin: 0
-                        }}>
-                            {data.formData?.aiReasoning?.text || t('automation.formattingNode.aiReasoningDefault')}
-                        </Typography>
-                    </Box>
-                </Box>
+                <AutomationAIReasoningSection aiReasoning={data.formData?.aiReasoning} />
 
                 {data.status === 'Completed' && (data.formData?.executionResult || data.formData?.schemaMatch) && (
                     <>
@@ -520,30 +478,9 @@ export const AutomationFormattingNode: React.FC<AutomationFormattingNodeProps> =
                     </>
                 )}
 
-                {/* Configuration Cards */}
-                {data.formData?.configurationCards?.map((card: any, index: number) => (
-                    <Box key={index} sx={{
-                        backgroundColor: '#1F2937',
-                        borderRadius: '6px',
-                        padding: '8px 12px',
-                        mb: 1,
-                        display: 'flex',
-                        alignItems: 'center',
-                        gap: 1,
-                        border: '1px solid #374151'
-                    }}>
-                        <Box sx={{ color: card.iconColor || '#ffffff', fontSize: '16px' }}>
-                            {card.icon}
-                        </Box>
-                        <Typography variant="body2" sx={{
-                            color: '#ffffff',
-                            fontSize: '11px',
-                            fontWeight: 500
-                        }}>
-                            {card.label}
-                        </Typography>
-                    </Box>
-                ))}
+                <AutomationConfigurationCardsSection
+                    configurationCards={data.formData?.configurationCards}
+                />
 
                 {/* Last Run Info */}
                 <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, mt: 1 }}>