@flowuent-org/diagramming-core 1.4.3 → 1.4.4

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

package/package.json

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

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

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

@@ -0,0 +1,132 @@
+import React from 'react';
+import { Box, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import {
+  AutomationAIReasoning,
+  AutomationConfigurationCard,
+  AutomationConfigurationCardType,
+} from '../../types/automation-node-data-types';
+
+const CONFIGURATION_CARD_ICONS: Record<
+  AutomationConfigurationCardType,
+  { icon: string; defaultColor: string }
+> = {
+  model: { icon: '⚙️', defaultColor: '#ffffff' },
+  knowledgeBase: { icon: '🗄️', defaultColor: '#10b981' },
+};
+
+interface AutomationAIReasoningSectionProps {
+  aiReasoning?: AutomationAIReasoning;
+}
+
+export const AutomationAIReasoningSection: React.FC<
+  AutomationAIReasoningSectionProps
+> = ({ aiReasoning }) => {
+  const { t } = useTranslation();
+  const text = aiReasoning?.text?.trim();
+
+  if (!text) {
+    return null;
+  }
+
+  return (
+    <Box
+      sx={{
+        backgroundColor: '#1F2937',
+        borderRadius: '8px',
+        padding: '12px',
+        mb: 2,
+        border: '1px solid #374151',
+      }}
+    >
+      <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>
+
+      <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,
+          }}
+        >
+          {text}
+        </Typography>
+      </Box>
+    </Box>
+  );
+};
+
+interface AutomationConfigurationCardsSectionProps {
+  configurationCards?: AutomationConfigurationCard[];
+}
+
+export const AutomationConfigurationCardsSection: React.FC<
+  AutomationConfigurationCardsSectionProps
+> = ({ configurationCards }) => {
+  const configuredCards = (configurationCards ?? []).filter(
+    (card) => card.type && card.label?.trim(),
+  );
+
+  if (configuredCards.length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      {configuredCards.map((card, index) => {
+        const iconConfig = CONFIGURATION_CARD_ICONS[card.type];
+
+        return (
+          <Box
+            key={`${card.type}-${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 || iconConfig.defaultColor,
+                fontSize: '16px',
+              }}
+            >
+              {iconConfig.icon}
+            </Box>
+            <Typography
+              variant="body2"
+              sx={{ color: '#ffffff', fontSize: '11px', fontWeight: 500 }}
+            >
+              {card.label}
+            </Typography>
+          </Box>
+        );
+      })}
+    </>
+  );
+};

package/packages/diagrams/src/lib/types/automation-node-data-types.ts

@@ -1,4 +1,16 @@
 // Automation Node Data Types
+export type AutomationConfigurationCardType = 'model' | 'knowledgeBase';
+
+export interface AutomationConfigurationCard {
+  type: AutomationConfigurationCardType;
+  label: string;
+  iconColor?: string;
+}
+
+export interface AutomationAIReasoning {
+  text: string;
+}
+
 export interface AutomationNodeFormData {
   nodeId: string;
   title: string;
@@ -26,6 +38,13 @@ export interface AutomationNodeFormData {
       value: string | number | boolean;
     }>;
   };
+  aiReasoning?: AutomationAIReasoning;
+  configurationCards?: AutomationConfigurationCard[];
+  schemaMatch?: {
+    matched: number;
+    partial: number;
+    ignored: number;
+  };
   // Execution result storage
   executionResult?: {
     success: boolean;