@flowuent-org/diagramming-core 1.4.3 → 1.4.5

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/components/automation/googleServiceNodeConfig.ts

@@ -0,0 +1,158 @@
+import React from 'react';
+import {
+  Send as SendIcon,
+  Email as EmailIcon,
+  Search as SearchIcon,
+  Description as DescriptionIcon,
+  Edit as EditIcon,
+  Slideshow as SlideshowIcon,
+  VideoCall as VideoCallIcon,
+  Event as EventIcon,
+  Link as LinkIcon,
+} from '@mui/icons-material';
+import { SiGmail, SiGoogledocs, SiGoogleslides, SiGooglemeet } from 'react-icons/si';
+
+export type GoogleServiceType = 'gmail' | 'docs' | 'slides' | 'meet';
+
+export interface GoogleOperationConfig {
+  icon: React.ElementType;
+  label: string;
+  color: string;
+  description: string;
+}
+
+export interface GoogleServiceConfig {
+  serviceType: GoogleServiceType;
+  serviceLabel: string;
+  brandColor: string;
+  iconBgColor: string;
+  BrandIcon: React.ComponentType<{ size?: number }>;
+  scopes: string[];
+  defaultOperation: string;
+  operations: Record<string, GoogleOperationConfig>;
+}
+
+export const GOOGLE_SERVICE_CONFIGS: Record<GoogleServiceType, GoogleServiceConfig> = {
+  gmail: {
+    serviceType: 'gmail',
+    serviceLabel: 'Gmail',
+    brandColor: '#EA4335',
+    iconBgColor: '#B31412',
+    BrandIcon: SiGmail,
+    scopes: [
+      'https://www.googleapis.com/auth/gmail.send',
+      'https://www.googleapis.com/auth/gmail.readonly',
+    ],
+    defaultOperation: 'send-email',
+    operations: {
+      'send-email': {
+        icon: SendIcon,
+        label: 'Send Email',
+        color: '#EA4335',
+        description: 'Send an email via Gmail',
+      },
+      'read-email': {
+        icon: EmailIcon,
+        label: 'Read Email',
+        color: '#4285F4',
+        description: 'Read messages from inbox',
+      },
+      'search-emails': {
+        icon: SearchIcon,
+        label: 'Search Emails',
+        color: '#34A853',
+        description: 'Search emails by query',
+      },
+    },
+  },
+  docs: {
+    serviceType: 'docs',
+    serviceLabel: 'Google Docs',
+    brandColor: '#4285F4',
+    iconBgColor: '#1967D2',
+    BrandIcon: SiGoogledocs,
+    scopes: ['https://www.googleapis.com/auth/documents'],
+    defaultOperation: 'create-document',
+    operations: {
+      'create-document': {
+        icon: DescriptionIcon,
+        label: 'Create Document',
+        color: '#4285F4',
+        description: 'Create a new Google Doc',
+      },
+      'read-document': {
+        icon: DescriptionIcon,
+        label: 'Read Document',
+        color: '#34A853',
+        description: 'Read content from a document',
+      },
+      'update-document': {
+        icon: EditIcon,
+        label: 'Update Document',
+        color: '#FBBC04',
+        description: 'Update document content',
+      },
+    },
+  },
+  slides: {
+    serviceType: 'slides',
+    serviceLabel: 'Google Slides',
+    brandColor: '#FBBC04',
+    iconBgColor: '#F29900',
+    BrandIcon: SiGoogleslides,
+    scopes: ['https://www.googleapis.com/auth/presentations'],
+    defaultOperation: 'create-presentation',
+    operations: {
+      'create-presentation': {
+        icon: SlideshowIcon,
+        label: 'Create Presentation',
+        color: '#FBBC04',
+        description: 'Create a new Google Slides deck',
+      },
+      'read-presentation': {
+        icon: SlideshowIcon,
+        label: 'Read Presentation',
+        color: '#4285F4',
+        description: 'Read slides from a presentation',
+      },
+      'update-slides': {
+        icon: EditIcon,
+        label: 'Update Slides',
+        color: '#EA4335',
+        description: 'Update slide content',
+      },
+    },
+  },
+  meet: {
+    serviceType: 'meet',
+    serviceLabel: 'Google Meet',
+    brandColor: '#00897B',
+    iconBgColor: '#00796B',
+    BrandIcon: SiGooglemeet,
+    scopes: [
+      'https://www.googleapis.com/auth/calendar',
+      'https://www.googleapis.com/auth/calendar.events',
+    ],
+    defaultOperation: 'create-meeting',
+    operations: {
+      'create-meeting': {
+        icon: VideoCallIcon,
+        label: 'Create Meeting',
+        color: '#00897B',
+        description: 'Create an instant Google Meet link',
+      },
+      'schedule-meeting': {
+        icon: EventIcon,
+        label: 'Schedule Meeting',
+        color: '#4285F4',
+        description: 'Schedule a calendar event with Meet',
+      },
+      'get-meeting-link': {
+        icon: LinkIcon,
+        label: 'Get Meeting Link',
+        color: '#34A853',
+        description: 'Retrieve an existing Meet link',
+      },
+    },
+  },
+};

package/packages/diagrams/src/lib/components/automation/index.ts

@@ -25,6 +25,20 @@ export type {
   AutomationTelegramNodeData,
   AutomationTelegramNodeProps,
 } from './AutomationTelegramNode';
+// Google Integration Nodes
+export {
+  AutomationGmailNode,
+  AutomationGoogleDocsNode,
+  AutomationGoogleSlidesNode,
+  AutomationGoogleMeetNode,
+  AutomationGoogleServiceNode,
+} from './AutomationGoogleServiceNode';
+export type {
+  AutomationGoogleServiceNodeData,
+  AutomationGoogleServiceNodeProps,
+} from './AutomationGoogleServiceNode';
+export type { GoogleServiceType } from './googleServiceNodeConfig';
+export { GOOGLE_SERVICE_CONFIGS } from './googleServiceNodeConfig';
 // Interaction Node
 export { AutomationInteractionNode } from './AutomationInteractionNode';
 export type {

package/packages/diagrams/src/lib/services/GoogleAuthService.ts

@@ -0,0 +1,149 @@
+// Google Identity Services OAuth helper for automation nodes
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+declare const google: any;
+
+export interface GoogleAuthResult {
+  accessToken: string;
+  expiresAt?: number;
+  email?: string;
+  userName?: string;
+  userId?: string;
+  scopes: string[];
+}
+
+export class GoogleAuthService {
+  private gisLoaded = false;
+  private hasRequestedConsent = false;
+  private accessToken: string | null = null;
+  private expiresAt: number | undefined;
+  private requestedScopes = new Set<string>();
+
+  async connect(clientId: string, scopes: string[]): Promise<GoogleAuthResult> {
+    if (typeof window === 'undefined') {
+      throw new Error('Google OAuth is only available in browser environments');
+    }
+
+    await this.ensureGisLoaded();
+    const token = await this.requestAccessToken(clientId, scopes);
+    const userInfo = await this.fetchUserInfo(token);
+
+    return {
+      accessToken: token,
+      expiresAt: this.expiresAt,
+      email: userInfo.email,
+      userName: userInfo.name,
+      userId: userInfo.id,
+      scopes,
+    };
+  }
+
+  disconnect(): void {
+    if (this.accessToken && typeof google !== 'undefined') {
+      try {
+        google.accounts.oauth2.revoke(this.accessToken, () => undefined);
+      } catch {
+        // Ignore revoke failures in demo environments
+      }
+    }
+
+    this.accessToken = null;
+    this.expiresAt = undefined;
+  }
+
+  private async ensureGisLoaded(): Promise<void> {
+    if (this.gisLoaded) return;
+
+    await new Promise<void>((resolve, reject) => {
+      const existing = document.querySelector(
+        'script[src="https://accounts.google.com/gsi/client"]',
+      );
+      if (existing) {
+        this.gisLoaded = true;
+        resolve();
+        return;
+      }
+
+      const script = document.createElement('script');
+      script.src = 'https://accounts.google.com/gsi/client';
+      script.async = true;
+      script.defer = true;
+      script.onload = () => {
+        this.gisLoaded = true;
+        resolve();
+      };
+      script.onerror = () => reject(new Error('Failed to load Google Identity Services'));
+      document.head.appendChild(script);
+    });
+  }
+
+  private async requestAccessToken(
+    clientId: string,
+    scopes: string[],
+    forceConsent = false,
+  ): Promise<string> {
+    await this.ensureGisLoaded();
+
+    const token = await new Promise<string>((resolve, reject) => {
+      try {
+        const tokenClient = google.accounts.oauth2.initTokenClient({
+          client_id: clientId,
+          scope: scopes.join(' '),
+          callback: (response: {
+            access_token?: string;
+            expires_in?: number;
+            error?: string;
+            error_description?: string;
+          }) => {
+            if (response?.access_token) {
+              this.hasRequestedConsent = true;
+              scopes.forEach((scope) => this.requestedScopes.add(scope));
+              if (response.expires_in) {
+                this.expiresAt = Date.now() + response.expires_in * 1000;
+              }
+              resolve(response.access_token);
+              return;
+            }
+
+            const err = response?.error || 'unknown_error';
+            const desc = response?.error_description || 'No description';
+            reject(new Error(`OAuth token error: ${err} - ${desc}`));
+          },
+        });
+
+        tokenClient.requestAccessToken({
+          prompt: forceConsent
+            ? 'consent'
+            : this.hasRequestedConsent
+              ? ''
+              : 'consent',
+        });
+      } catch (error) {
+        reject(error);
+      }
+    });
+
+    this.accessToken = token;
+    return token;
+  }
+
+  private async fetchUserInfo(accessToken: string): Promise<{
+    email?: string;
+    name?: string;
+    id?: string;
+  }> {
+    const response = await fetch('https://www.googleapis.com/oauth2/v2/userinfo', {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    });
+
+    if (!response.ok) {
+      return {};
+    }
+
+    return response.json();
+  }
+}
+
+export const googleAuthService = new GoogleAuthService();

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

@@ -566,9 +566,6 @@ export const DiagramContent: React.FC<DiagramContentProps> = ({
               ref={setNodeRef}
               sx={{ height: '100svh', width: '100svw', position: 'relative' }}
             >
-              {/* Redo Toolbar */}
-             
-                 
               <ReactFlow
                 panOnDrag={isPannable}
                 nodesDraggable={isPannable}

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;

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

@@ -12,6 +12,10 @@ import {
   AutomationNavigationNode,
   AutomationSlackNode,
   AutomationTelegramNode,
+  AutomationGmailNode,
+  AutomationGoogleDocsNode,
+  AutomationGoogleSlidesNode,
+  AutomationGoogleMeetNode,
   AutomationInteractionNode,
   AutomationMonitoringNode,
   AutomationDecisionNode,
@@ -34,6 +38,10 @@ const nodeTypes = {
   AutomationNavigationNode,
   AutomationSlackNode,
   AutomationTelegramNode,
+  AutomationGmailNode,
+  AutomationGoogleDocsNode,
+  AutomationGoogleSlidesNode,
+  AutomationGoogleMeetNode,
   AutomationInteractionNode,
   AutomationMonitoringNode,
   AutomationDecisionNode,