@flowuent-org/diagramming-core 1.2.2 → 1.2.3

package/apps/diagramming/src/AutomationDiagramData.ts

@@ -525,6 +525,163 @@ export const automationDefaultNodes = [
     height: 150,
     measured: { width: 336, height: 150 },
   },
+  // =====================================
+  // Google Services Nodes
+  // =====================================
+  {
+    id: 'google-docs-node',
+    type: 'AutomationGoogleDocsNode',
+    position: { x: 100, y: 450 },
+    data: {
+      label: 'Create Report',
+      description: 'Google Docs document එකක් create කරන්න',
+      serviceType: 'docs',
+      status: 'idle',
+      parameters: {
+        documentTitle: 'Automation Report',
+        operation: 'create',
+        content: 'Report content will be generated here...',
+      },
+      googleAuth: {
+        clientId: '', // Will be set from environment
+        scopes: [
+          'https://www.googleapis.com/auth/documents',
+          'https://www.googleapis.com/auth/drive',
+        ],
+      },
+      formData: {
+        nodeId: 'google-docs-node',
+        title: 'Create Report',
+        type: 'navigation',
+        serviceType: 'docs',
+      },
+    },
+    width: 300,
+    height: 200,
+    measured: { width: 300, height: 200 },
+  },
+  {
+    id: 'gmail-node',
+    type: 'AutomationGmailNode',
+    position: { x: 450, y: 450 },
+    data: {
+      label: 'Send Email',
+      description: 'Gmail හරහා email එකක් send කරන්න',
+      serviceType: 'gmail',
+      status: 'idle',
+      parameters: {
+        to: ['recipient@example.com'],
+        subject: 'Automation Report',
+        body: 'Please find the attached report...',
+      },
+      googleAuth: {
+        clientId: '',
+        scopes: [
+          'https://www.googleapis.com/auth/gmail.send',
+          'https://www.googleapis.com/auth/gmail.compose',
+        ],
+      },
+      formData: {
+        nodeId: 'gmail-node',
+        title: 'Send Email',
+        type: 'navigation',
+        serviceType: 'gmail',
+      },
+    },
+    width: 300,
+    height: 200,
+    measured: { width: 300, height: 200 },
+  },
+  {
+    id: 'google-meet-node',
+    type: 'AutomationGoogleMeetNode',
+    position: { x: 800, y: 450 },
+    data: {
+      label: 'Create Meeting',
+      description: 'Google Meet link එකක් create කරන්න',
+      serviceType: 'meet',
+      status: 'idle',
+      parameters: {
+        meetingTitle: 'Project Discussion',
+        attendees: ['team@example.com'],
+      },
+      googleAuth: {
+        clientId: '',
+        scopes: ['https://www.googleapis.com/auth/meetings.space.created'],
+      },
+      formData: {
+        nodeId: 'google-meet-node',
+        title: 'Create Meeting',
+        type: 'navigation',
+        serviceType: 'meet',
+      },
+    },
+    width: 300,
+    height: 200,
+    measured: { width: 300, height: 200 },
+  },
+  {
+    id: 'google-slides-node',
+    type: 'AutomationGoogleSlidesNode',
+    position: { x: 100, y: 700 },
+    data: {
+      label: 'Create Presentation',
+      description: 'Google Slides presentation එකක් create කරන්න',
+      serviceType: 'slides',
+      status: 'idle',
+      parameters: {
+        presentationTitle: 'Monthly Report',
+        slideContent: 'Slide content here...',
+      },
+      googleAuth: {
+        clientId: '',
+        scopes: [
+          'https://www.googleapis.com/auth/presentations',
+          'https://www.googleapis.com/auth/drive',
+        ],
+      },
+      formData: {
+        nodeId: 'google-slides-node',
+        title: 'Create Presentation',
+        type: 'navigation',
+        serviceType: 'slides',
+      },
+    },
+    width: 300,
+    height: 200,
+    measured: { width: 300, height: 200 },
+  },
+  {
+    id: 'google-calendar-node',
+    type: 'AutomationGoogleCalendarNode',
+    position: { x: 450, y: 700 },
+    data: {
+      label: 'Create Event',
+      description: 'Google Calendar event එකක් create කරන්න',
+      serviceType: 'calendar',
+      status: 'idle',
+      parameters: {
+        calendarId: 'primary',
+        eventTitle: 'Team Meeting',
+        eventDescription: 'Weekly sync up',
+        startTime: new Date().toISOString(),
+        endTime: new Date(Date.now() + 3600000).toISOString(),
+      },
+      googleAuth: {
+        clientId: '',
+        scopes: ['https://www.googleapis.com/auth/calendar'],
+      },
+      formData: {
+        nodeId: 'google-calendar-node',
+        title: 'Create Event',
+        type: 'navigation',
+        serviceType: 'calendar',
+      },
+    },
+    width: 300,
+    height: 200,
+    measured: { width: 300, height: 200 },
+  },
 ];
 
 // Default edges for the automation diagram
@@ -624,4 +781,64 @@ export const automationDefaultEdges = [
       color: '#ffffff',
     },
   },
+  // =====================================
+  // Google Services Node Edges
+  // =====================================
+  {
+    id: 'edge-docs-to-gmail',
+    source: 'google-docs-node',
+    target: 'gmail-node',
+    sourceHandle: 'right',
+    targetHandle: 'left',
+    data: {
+      label: 'Send Report',
+      type: 'flow',
+    },
+    style: {
+      stroke: '#4285F4',
+      strokeWidth: 2,
+    },
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+      color: '#4285F4',
+    },
+  },
+  {
+    id: 'edge-gmail-to-meet',
+    source: 'gmail-node',
+    target: 'google-meet-node',
+    sourceHandle: 'right',
+    targetHandle: 'left',
+    data: {
+      label: 'Schedule Meet',
+      type: 'flow',
+    },
+    style: {
+      stroke: '#EA4335',
+      strokeWidth: 2,
+    },
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+      color: '#EA4335',
+    },
+  },
+  {
+    id: 'edge-slides-to-calendar',
+    source: 'google-slides-node',
+    target: 'google-calendar-node',
+    sourceHandle: 'right',
+    targetHandle: 'left',
+    data: {
+      label: 'Add to Calendar',
+      type: 'flow',
+    },
+    style: {
+      stroke: '#FBBC04',
+      strokeWidth: 2,
+    },
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+      color: '#FBBC04',
+    },
+  },
 ];

package/package.json

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

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

@@ -0,0 +1,1021 @@
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { Handle, Position, useNodeId } from '@xyflow/react';
+import {
+  Box,
+  Typography,
+  Chip,
+  IconButton,
+  Button,
+  CircularProgress,
+  Tooltip,
+  LinearProgress,
+} from '@mui/material';
+import {
+  Description as DocsIcon,
+  Slideshow as SlidesIcon,
+  VideoCall as MeetIcon,
+  Email as GmailIcon,
+  PlayArrow as PlayIcon,
+  Stop as StopIcon,
+  CheckCircle as CheckCircleIcon,
+  Error as ErrorIcon,
+  Settings as SettingsIcon,
+  Link as LinkIcon,
+  LinkOff as LinkOffIcon,
+  Refresh as RefreshIcon,
+  TableChart as SheetsIcon,
+  CalendarMonth as CalendarIcon,
+} from '@mui/icons-material';
+import { FcGoogle } from 'react-icons/fc';
+import { useTranslation } from 'react-i18next';
+import { useDiagram } from '../../contexts/DiagramProvider';
+import { useSearch } from '../../contexts/SearchContext';
+import { NodeActionButtons } from './NodeActionButtons';
+
+// ========================
+// Types / Interfaces
+// ========================
+
+export type GoogleServiceType =
+  | 'docs'
+  | 'slides'
+  | 'meet'
+  | 'gmail'
+  | 'sheets'
+  | 'calendar';
+
+export type NodeStatus =
+  | 'idle'
+  | 'authenticating'
+  | 'authenticated'
+  | 'running'
+  | 'completed'
+  | 'error';
+
+export interface GoogleTokenData {
+  accessToken: string;
+  expiresAt: number;
+  email?: string;
+  scope?: string;
+}
+
+export interface AutomationGoogleServicesNodeData {
+  label: string;
+  description?: string;
+  serviceType: GoogleServiceType;
+  status?: NodeStatus;
+  iconName?: string;
+
+  // Google Auth config
+  googleAuth?: {
+    clientId?: string;
+    scopes?: string[];
+    tokens?: GoogleTokenData;
+  };
+
+  // Service-specific parameters
+  parameters?: {
+    // Google Docs
+    documentId?: string;
+    documentTitle?: string;
+    content?: string;
+    operation?: 'create' | 'read' | 'update' | 'append';
+
+    // Google Slides
+    presentationId?: string;
+    presentationTitle?: string;
+    slideContent?: string;
+
+    // Google Meet
+    meetingTitle?: string;
+    startTime?: string;
+    endTime?: string;
+    attendees?: string[];
+
+    // Gmail
+    to?: string[];
+    subject?: string;
+    body?: string;
+    attachments?: string[];
+
+    // Google Sheets
+    spreadsheetId?: string;
+    sheetName?: string;
+    range?: string;
+    data?: any[];
+
+    // Google Calendar
+    calendarId?: string;
+    eventTitle?: string;
+    eventDescription?: string;
+
+    // Stored tokens
+    useUserAccount?: boolean;
+    googleAccessToken?: string;
+    googleTokenExpiresAt?: number;
+    googleUserEmail?: string;
+  };
+
+  // Form data for configuration
+  formData?: {
+    aiSuggestionsCount?: number;
+    [key: string]: any;
+  };
+
+  // Execution result
+  executionResult?: {
+    success: boolean;
+    data?: any;
+    error?: string;
+    timestamp?: string;
+    executionTime?: number;
+  };
+
+  // Callbacks
+  onExecute?: (tokens: GoogleTokenData) => Promise<any>;
+  onAuthSuccess?: (tokens: GoogleTokenData) => void;
+  onAuthError?: (error: Error) => void;
+}
+
+export interface AutomationGoogleServicesNodeProps {
+  data: AutomationGoogleServicesNodeData;
+  selected?: boolean;
+}
+
+// ========================
+// Constants
+// ========================
+
+const SERVICE_CONFIG: Record<
+  GoogleServiceType,
+  {
+    icon: React.ElementType;
+    label: string;
+    color: string;
+    scopes: string[];
+    description: string;
+  }
+> = {
+  docs: {
+    icon: DocsIcon,
+    label: 'Google Docs',
+    color: '#4285F4',
+    scopes: [
+      'https://www.googleapis.com/auth/documents',
+      'https://www.googleapis.com/auth/drive',
+    ],
+    description: 'Document එකක් create/edit කරන්න',
+  },
+  slides: {
+    icon: SlidesIcon,
+    label: 'Google Slides',
+    color: '#FBBC04',
+    scopes: [
+      'https://www.googleapis.com/auth/presentations',
+      'https://www.googleapis.com/auth/drive',
+    ],
+    description: 'Presentation එකක් create/edit කරන්න',
+  },
+  meet: {
+    icon: MeetIcon,
+    label: 'Google Meet',
+    color: '#34A853',
+    scopes: ['https://www.googleapis.com/auth/meetings.space.created'],
+    description: 'Meeting එකක් create කරන්න',
+  },
+  gmail: {
+    icon: GmailIcon,
+    label: 'Gmail',
+    color: '#EA4335',
+    scopes: [
+      'https://www.googleapis.com/auth/gmail.send',
+      'https://www.googleapis.com/auth/gmail.compose',
+    ],
+    description: 'Email එකක් send කරන්න',
+  },
+  sheets: {
+    icon: SheetsIcon,
+    label: 'Google Sheets',
+    color: '#0F9D58',
+    scopes: ['https://www.googleapis.com/auth/spreadsheets'],
+    description: 'Spreadsheet එකක් read/write කරන්න',
+  },
+  calendar: {
+    icon: CalendarIcon,
+    label: 'Google Calendar',
+    color: '#4285F4',
+    scopes: ['https://www.googleapis.com/auth/calendar'],
+    description: 'Calendar event එකක් create කරන්න',
+  },
+};
+
+// ========================
+// Helper Functions
+// ========================
+
+const isTokenExpired = (expiresAt?: number): boolean => {
+  if (!expiresAt) return true;
+  // Token expires 5 minutes before actual expiry for safety
+  return Date.now() > expiresAt - 5 * 60 * 1000;
+};
+
+const getTimeUntilExpiry = (expiresAt?: number): string => {
+  if (!expiresAt) return 'N/A';
+  const remaining = expiresAt - Date.now();
+  if (remaining <= 0) return 'කල් ඉකුත් වී ඇත';
+  const minutes = Math.floor(remaining / 60000);
+  if (minutes < 60) return `${minutes} min`;
+  const hours = Math.floor(minutes / 60);
+  return `${hours}h ${minutes % 60}m`;
+};
+
+// ========================
+// Main Component
+// ========================
+
+export const AutomationGoogleServicesNode: React.FC<
+  AutomationGoogleServicesNodeProps
+> = ({ data, selected }) => {
+  const { t } = useTranslation();
+  const { highlightText } = useSearch();
+  const nodeId = useNodeId();
+  const setSelectedNode = useDiagram((state) => state.setSelectedNode);
+  const nodes = useDiagram((state) => state.nodes);
+  const setNodes = useDiagram((state) => state.setNodes);
+
+  // ========================
+  // State
+  // ========================
+  const [status, setStatus] = useState<NodeStatus>(data.status || 'idle');
+  const [tokens, setTokens] = useState<GoogleTokenData | null>(null);
+  const [isExecuting, setIsExecuting] = useState(false);
+  const [executionProgress, setExecutionProgress] = useState(0);
+  const [error, setError] = useState<string | null>(null);
+  const [result, setResult] = useState<any>(null);
+
+  const googleClientRef = useRef<any>(null);
+  const serviceType = data.serviceType || 'docs';
+  const serviceConfig = SERVICE_CONFIG[serviceType];
+  const ServiceIcon = serviceConfig.icon;
+
+  // ========================
+  // Initialize tokens from data
+  // ========================
+  useEffect(() => {
+    if (data.parameters?.googleAccessToken) {
+      const savedTokens: GoogleTokenData = {
+        accessToken: data.parameters.googleAccessToken,
+        expiresAt: data.parameters.googleTokenExpiresAt || 0,
+        email: data.parameters.googleUserEmail,
+      };
+
+      if (!isTokenExpired(savedTokens.expiresAt)) {
+        setTokens(savedTokens);
+        setStatus('authenticated');
+      } else {
+        setStatus('idle');
+      }
+    }
+  }, [data.parameters?.googleAccessToken]);
+
+  // ========================
+  // Google OAuth Login
+  // ========================
+  const handleGoogleLogin = useCallback(async () => {
+    setStatus('authenticating');
+    setError(null);
+
+    try {
+      // Load Google Identity Services if not loaded
+      if (!(window as any).google?.accounts?.oauth2) {
+        await new Promise<void>((resolve, reject) => {
+          const script = document.createElement('script');
+          script.src = 'https://accounts.google.com/gsi/client';
+          script.async = true;
+          script.defer = true;
+          script.onload = () => resolve();
+          script.onerror = () => reject(new Error('Failed to load Google Identity Services'));
+          document.head.appendChild(script);
+        });
+      }
+
+      // Initialize OAuth client
+      const clientId = data.googleAuth?.clientId || process.env.REACT_APP_GOOGLE_CLIENT_ID;
+      
+      if (!clientId) {
+        throw new Error('Google Client ID not configured');
+      }
+
+      const tokenClient = (window as any).google.accounts.oauth2.initTokenClient({
+        client_id: clientId,
+        scope: serviceConfig.scopes.join(' '),
+        callback: (response: any) => {
+          if (response.error) {
+            setError(response.error_description || 'Authentication failed');
+            setStatus('error');
+            data.onAuthError?.(new Error(response.error_description));
+            return;
+          }
+
+          const newTokens: GoogleTokenData = {
+            accessToken: response.access_token,
+            expiresAt: Date.now() + response.expires_in * 1000,
+            scope: response.scope,
+          };
+
+          // Get user email
+          fetch('https://www.googleapis.com/oauth2/v2/userinfo', {
+            headers: { Authorization: `Bearer ${response.access_token}` },
+          })
+            .then((res) => res.json())
+            .then((userInfo) => {
+              newTokens.email = userInfo.email;
+              setTokens(newTokens);
+              setStatus('authenticated');
+              data.onAuthSuccess?.(newTokens);
+
+              // Save tokens to node data
+              updateNodeData({
+                parameters: {
+                  ...data.parameters,
+                  useUserAccount: true,
+                  googleAccessToken: newTokens.accessToken,
+                  googleTokenExpiresAt: newTokens.expiresAt,
+                  googleUserEmail: newTokens.email,
+                },
+              });
+            })
+            .catch(() => {
+              setTokens(newTokens);
+              setStatus('authenticated');
+              data.onAuthSuccess?.(newTokens);
+            });
+        },
+      });
+
+      googleClientRef.current = tokenClient;
+      tokenClient.requestAccessToken();
+    } catch (err: any) {
+      setError(err.message || 'Authentication failed');
+      setStatus('error');
+      data.onAuthError?.(err);
+    }
+  }, [data, serviceConfig.scopes]);
+
+  // ========================
+  // Disconnect Google Account
+  // ========================
+  const handleDisconnect = useCallback(() => {
+    setTokens(null);
+    setStatus('idle');
+    setResult(null);
+    setError(null);
+
+    // Clear tokens from node data
+    updateNodeData({
+      parameters: {
+        ...data.parameters,
+        useUserAccount: false,
+        googleAccessToken: undefined,
+        googleTokenExpiresAt: undefined,
+        googleUserEmail: undefined,
+      },
+    });
+  }, [data.parameters]);
+
+  // ========================
+  // Execute Node
+  // ========================
+  const handleExecute = useCallback(async () => {
+    // Check if authenticated
+    if (!tokens || isTokenExpired(tokens.expiresAt)) {
+      // Need to authenticate first
+      handleGoogleLogin();
+      return;
+    }
+
+    setIsExecuting(true);
+    setStatus('running');
+    setExecutionProgress(0);
+    setError(null);
+
+    try {
+      // Simulate progress
+      const progressInterval = setInterval(() => {
+        setExecutionProgress((prev) => Math.min(prev + 10, 90));
+      }, 200);
+
+      // Execute the actual operation
+      let executionResult: any;
+
+      if (data.onExecute) {
+        executionResult = await data.onExecute(tokens);
+      } else {
+        // Default execution based on service type
+        executionResult = await executeGoogleService(serviceType, tokens, data.parameters);
+      }
+
+      clearInterval(progressInterval);
+      setExecutionProgress(100);
+      setResult(executionResult);
+      setStatus('completed');
+
+      // Update node data with result
+      updateNodeData({
+        executionResult: {
+          success: true,
+          data: executionResult,
+          timestamp: new Date().toISOString(),
+        },
+      });
+    } catch (err: any) {
+      setError(err.message || 'Execution failed');
+      setStatus('error');
+
+      // Update node data with error
+      updateNodeData({
+        executionResult: {
+          success: false,
+          error: err.message,
+          timestamp: new Date().toISOString(),
+        },
+      });
+    } finally {
+      setIsExecuting(false);
+    }
+  }, [tokens, data, serviceType, handleGoogleLogin]);
+
+  // ========================
+  // Update Node Data
+  // ========================
+  const updateNodeData = useCallback(
+    (updates: Partial<AutomationGoogleServicesNodeData>) => {
+      if (!nodeId) return;
+
+      setNodes(
+        nodes.map((node) => {
+          if (node.id === nodeId) {
+            return {
+              ...node,
+              data: {
+                ...node.data,
+                ...updates,
+              },
+            };
+          }
+          return node;
+        })
+      );
+    },
+    [nodeId, nodes, setNodes]
+  );
+
+  // ========================
+  // Execute Google Service
+  // ========================
+  const executeGoogleService = async (
+    service: GoogleServiceType,
+    tokenData: GoogleTokenData,
+    params?: any
+  ): Promise<any> => {
+    const headers = {
+      Authorization: `Bearer ${tokenData.accessToken}`,
+      'Content-Type': 'application/json',
+    };
+
+    switch (service) {
+      case 'docs': {
+        // Create or update Google Doc
+        const docTitle = params?.documentTitle || 'New Document';
+        const response = await fetch(
+          'https://docs.googleapis.com/v1/documents',
+          {
+            method: 'POST',
+            headers,
+            body: JSON.stringify({ title: docTitle }),
+          }
+        );
+        return response.json();
+      }
+
+      case 'slides': {
+        // Create Google Slides presentation
+        const slideTitle = params?.presentationTitle || 'New Presentation';
+        const response = await fetch(
+          'https://slides.googleapis.com/v1/presentations',
+          {
+            method: 'POST',
+            headers,
+            body: JSON.stringify({ title: slideTitle }),
+          }
+        );
+        return response.json();
+      }
+
+      case 'meet': {
+        // Create Google Meet link
+        const response = await fetch(
+          'https://meet.googleapis.com/v2/spaces',
+          {
+            method: 'POST',
+            headers,
+            body: JSON.stringify({
+              config: {
+                accessType: 'OPEN',
+                entryPointAccess: 'ALL',
+              },
+            }),
+          }
+        );
+        return response.json();
+      }
+
+      case 'gmail': {
+        // Send Gmail
+        const to = params?.to?.join(', ') || '';
+        const subject = params?.subject || 'No Subject';
+        const body = params?.body || '';
+
+        const email = [
+          `To: ${to}`,
+          `Subject: ${subject}`,
+          '',
+          body,
+        ].join('\n');
+
+        const encodedEmail = btoa(unescape(encodeURIComponent(email)))
+          .replace(/\+/g, '-')
+          .replace(/\//g, '_')
+          .replace(/=+$/, '');
+
+        const response = await fetch(
+          'https://gmail.googleapis.com/gmail/v1/users/me/messages/send',
+          {
+            method: 'POST',
+            headers,
+            body: JSON.stringify({ raw: encodedEmail }),
+          }
+        );
+        return response.json();
+      }
+
+      case 'sheets': {
+        // Read/Write Google Sheets
+        const spreadsheetId = params?.spreadsheetId;
+        const range = params?.range || 'Sheet1!A1:Z100';
+
+        if (!spreadsheetId) {
+          // Create new spreadsheet
+          const response = await fetch(
+            'https://sheets.googleapis.com/v4/spreadsheets',
+            {
+              method: 'POST',
+              headers,
+              body: JSON.stringify({
+                properties: {
+                  title: params?.sheetName || 'New Spreadsheet',
+                },
+              }),
+            }
+          );
+          return response.json();
+        }
+
+        // Read existing spreadsheet
+        const response = await fetch(
+          `https://sheets.googleapis.com/v4/spreadsheets/${spreadsheetId}/values/${range}`,
+          { headers }
+        );
+        return response.json();
+      }
+
+      case 'calendar': {
+        // Create calendar event
+        const calendarId = params?.calendarId || 'primary';
+        const response = await fetch(
+          `https://www.googleapis.com/calendar/v3/calendars/${calendarId}/events`,
+          {
+            method: 'POST',
+            headers,
+            body: JSON.stringify({
+              summary: params?.eventTitle || 'New Event',
+              description: params?.eventDescription,
+              start: {
+                dateTime: params?.startTime || new Date().toISOString(),
+                timeZone: 'UTC',
+              },
+              end: {
+                dateTime:
+                  params?.endTime ||
+                  new Date(Date.now() + 3600000).toISOString(),
+                timeZone: 'UTC',
+              },
+            }),
+          }
+        );
+        return response.json();
+      }
+
+      default:
+        throw new Error(`Unsupported service: ${service}`);
+    }
+  };
+
+  // ========================
+  // Render Status Badge
+  // ========================
+  const renderStatusBadge = () => {
+    const statusConfig: Record<
+      NodeStatus,
+      { color: string; bgColor: string; label: string; icon?: React.ReactNode }
+    > = {
+      idle: {
+        color: '#6B7280',
+        bgColor: 'rgba(107, 114, 128, 0.1)',
+        label: 'සූදානම්',
+      },
+      authenticating: {
+        color: '#F59E0B',
+        bgColor: 'rgba(245, 158, 11, 0.1)',
+        label: 'සත්‍යාපනය...',
+        icon: <CircularProgress size={12} color="inherit" />,
+      },
+      authenticated: {
+        color: '#10B981',
+        bgColor: 'rgba(16, 185, 129, 0.1)',
+        label: 'සම්බන්ධයි',
+        icon: <CheckCircleIcon sx={{ fontSize: 12 }} />,
+      },
+      running: {
+        color: '#3B82F6',
+        bgColor: 'rgba(59, 130, 246, 0.1)',
+        label: 'ක්‍රියාත්මක...',
+        icon: <CircularProgress size={12} color="inherit" />,
+      },
+      completed: {
+        color: '#10B981',
+        bgColor: 'rgba(16, 185, 129, 0.1)',
+        label: 'සාර්ථකයි',
+        icon: <CheckCircleIcon sx={{ fontSize: 12 }} />,
+      },
+      error: {
+        color: '#EF4444',
+        bgColor: 'rgba(239, 68, 68, 0.1)',
+        label: 'දෝෂය',
+        icon: <ErrorIcon sx={{ fontSize: 12 }} />,
+      },
+    };
+
+    const config = statusConfig[status];
+
+    return (
+      <Chip
+        size="small"
+        label={
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+            {config.icon}
+            <span>{config.label}</span>
+          </Box>
+        }
+        sx={{
+          height: 20,
+          fontSize: '10px',
+          fontWeight: 600,
+          color: config.color,
+          bgcolor: config.bgColor,
+          border: `1px solid ${config.color}20`,
+          '& .MuiChip-label': { px: 1 },
+        }}
+      />
+    );
+  };
+
+  // ========================
+  // Render
+  // ========================
+  return (
+    <Box
+      sx={{
+        bgcolor: '#1E1E2E',
+        borderRadius: 2,
+        border: selected ? `2px solid ${serviceConfig.color}` : '1px solid #374151',
+        minWidth: 280,
+        maxWidth: 320,
+        overflow: 'hidden',
+        boxShadow: selected
+          ? `0 0 20px ${serviceConfig.color}30`
+          : '0 4px 12px rgba(0, 0, 0, 0.3)',
+        transition: 'all 0.2s ease',
+      }}
+      onClick={() => setSelectedNode(nodeId || '')}
+    >
+      {/* Input Handle */}
+      <Handle
+        type="target"
+        position={Position.Left}
+        style={{
+          background: serviceConfig.color,
+          width: 10,
+          height: 10,
+          border: '2px solid #1E1E2E',
+        }}
+      />
+
+      {/* Header */}
+      <Box
+        sx={{
+          bgcolor: `${serviceConfig.color}15`,
+          borderBottom: `1px solid ${serviceConfig.color}30`,
+          px: 2,
+          py: 1.5,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+        }}
+      >
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
+          <Box
+            sx={{
+              bgcolor: serviceConfig.color,
+              borderRadius: 1,
+              p: 0.75,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <ServiceIcon sx={{ fontSize: 18, color: '#fff' }} />
+          </Box>
+          <Box>
+            <Typography
+              variant="subtitle2"
+              sx={{ color: '#fff', fontWeight: 600, fontSize: 13 }}
+            >
+              {highlightText(data.label || serviceConfig.label)}
+            </Typography>
+            <Typography
+              variant="caption"
+              sx={{ color: '#9CA3AF', fontSize: 10 }}
+            >
+              {serviceConfig.description}
+            </Typography>
+          </Box>
+        </Box>
+        {renderStatusBadge()}
+      </Box>
+
+      {/* Content */}
+      <Box sx={{ px: 2, py: 1.5 }}>
+        {/* Authentication Status */}
+        <Box
+          sx={{
+            bgcolor: tokens ? 'rgba(16, 185, 129, 0.1)' : 'rgba(107, 114, 128, 0.1)',
+            borderRadius: 1,
+            p: 1.5,
+            mb: 1.5,
+          }}
+        >
+          {tokens ? (
+            <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                <FcGoogle size={20} />
+                <Box>
+                  <Typography
+                    variant="caption"
+                    sx={{ color: '#10B981', display: 'block', fontWeight: 600 }}
+                  >
+                    සම්බන්ධයි
+                  </Typography>
+                  <Typography
+                    variant="caption"
+                    sx={{ color: '#9CA3AF', fontSize: 10 }}
+                  >
+                    {tokens.email || 'Google Account'}
+                  </Typography>
+                </Box>
+              </Box>
+              <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+                <Tooltip title={`කල් ඉකුත් වන්නේ: ${getTimeUntilExpiry(tokens.expiresAt)}`}>
+                  <Typography
+                    variant="caption"
+                    sx={{
+                      color: isTokenExpired(tokens.expiresAt) ? '#EF4444' : '#9CA3AF',
+                      fontSize: 10,
+                    }}
+                  >
+                    {getTimeUntilExpiry(tokens.expiresAt)}
+                  </Typography>
+                </Tooltip>
+                <IconButton
+                  size="small"
+                  onClick={handleDisconnect}
+                  sx={{ color: '#EF4444', p: 0.5 }}
+                >
+                  <LinkOffIcon sx={{ fontSize: 14 }} />
+                </IconButton>
+              </Box>
+            </Box>
+          ) : (
+            <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                <FcGoogle size={20} style={{ opacity: 0.5 }} />
+                <Typography variant="caption" sx={{ color: '#6B7280' }}>
+                  Google ගිණුම සම්බන්ධ කර නැත
+                </Typography>
+              </Box>
+              <Button
+                size="small"
+                variant="outlined"
+                onClick={handleGoogleLogin}
+                disabled={status === 'authenticating'}
+                startIcon={
+                  status === 'authenticating' ? (
+                    <CircularProgress size={12} color="inherit" />
+                  ) : (
+                    <LinkIcon sx={{ fontSize: 14 }} />
+                  )
+                }
+                sx={{
+                  fontSize: 10,
+                  py: 0.25,
+                  px: 1,
+                  borderColor: '#374151',
+                  color: '#9CA3AF',
+                  '&:hover': {
+                    borderColor: serviceConfig.color,
+                    color: serviceConfig.color,
+                  },
+                }}
+              >
+                සම්බන්ධ කරන්න
+              </Button>
+            </Box>
+          )}
+        </Box>
+
+        {/* Progress Bar (when running) */}
+        {status === 'running' && (
+          <Box sx={{ mb: 1.5 }}>
+            <LinearProgress
+              variant="determinate"
+              value={executionProgress}
+              sx={{
+                height: 4,
+                borderRadius: 2,
+                bgcolor: 'rgba(59, 130, 246, 0.1)',
+                '& .MuiLinearProgress-bar': {
+                  bgcolor: serviceConfig.color,
+                },
+              }}
+            />
+            <Typography
+              variant="caption"
+              sx={{ color: '#9CA3AF', fontSize: 10, mt: 0.5, display: 'block' }}
+            >
+              ක්‍රියාත්මක වෙමින්... {executionProgress}%
+            </Typography>
+          </Box>
+        )}
+
+        {/* Error Display */}
+        {error && (
+          <Box
+            sx={{
+              bgcolor: 'rgba(239, 68, 68, 0.1)',
+              borderRadius: 1,
+              p: 1,
+              mb: 1.5,
+              border: '1px solid rgba(239, 68, 68, 0.3)',
+            }}
+          >
+            <Typography
+              variant="caption"
+              sx={{ color: '#EF4444', fontSize: 10, display: 'block' }}
+            >
+              {error}
+            </Typography>
+          </Box>
+        )}
+
+        {/* Result Display (when completed) */}
+        {status === 'completed' && result && (
+          <Box
+            sx={{
+              bgcolor: 'rgba(16, 185, 129, 0.1)',
+              borderRadius: 1,
+              p: 1,
+              mb: 1.5,
+              border: '1px solid rgba(16, 185, 129, 0.3)',
+            }}
+          >
+            <Typography
+              variant="caption"
+              sx={{ color: '#10B981', fontSize: 10, display: 'block', fontWeight: 600 }}
+            >
+              ✓ සාර්ථකව ක්‍රියාත්මක විය
+            </Typography>
+            {result.documentId && (
+              <Typography
+                variant="caption"
+                sx={{ color: '#9CA3AF', fontSize: 10 }}
+              >
+                Doc ID: {result.documentId}
+              </Typography>
+            )}
+            {result.presentationId && (
+              <Typography
+                variant="caption"
+                sx={{ color: '#9CA3AF', fontSize: 10 }}
+              >
+                Presentation ID: {result.presentationId}
+              </Typography>
+            )}
+            {result.meetingUri && (
+              <Typography
+                variant="caption"
+                sx={{ color: '#9CA3AF', fontSize: 10 }}
+              >
+                Meet Link: {result.meetingUri}
+              </Typography>
+            )}
+          </Box>
+        )}
+
+        {/* Execute Button */}
+        <Button
+          fullWidth
+          variant="contained"
+          onClick={handleExecute}
+          disabled={isExecuting}
+          startIcon={
+            isExecuting ? (
+              <CircularProgress size={16} color="inherit" />
+            ) : tokens ? (
+              <PlayIcon />
+            ) : (
+              <FcGoogle size={16} />
+            )
+          }
+          sx={{
+            bgcolor: tokens ? serviceConfig.color : '#374151',
+            color: '#fff',
+            fontWeight: 600,
+            fontSize: 12,
+            py: 1,
+            '&:hover': {
+              bgcolor: tokens ? `${serviceConfig.color}CC` : '#4B5563',
+            },
+            '&:disabled': {
+              bgcolor: '#374151',
+              color: '#6B7280',
+            },
+          }}
+        >
+          {isExecuting
+            ? 'ක්‍රියාත්මක වෙමින්...'
+            : tokens
+            ? 'ක්‍රියාත්මක කරන්න'
+            : 'Google සමඟ ක්‍රියාත්මක කරන්න'}
+        </Button>
+
+        {/* Hint Text */}
+        {!tokens && (
+          <Typography
+            variant="caption"
+            sx={{
+              color: '#6B7280',
+              fontSize: 9,
+              display: 'block',
+              textAlign: 'center',
+              mt: 1,
+            }}
+          >
+            බොත්තම ඔබන්න → Google සත්‍යාපනය → ක්‍රියාත්මක වීම
+          </Typography>
+        )}
+      </Box>
+
+      {/* Node Action Buttons */}
+      <NodeActionButtons
+        nodeId={nodeId || ''}
+        showSettings
+        onSettings={() => setSelectedNode(nodeId || '')}
+      />
+
+      {/* Output Handle */}
+      <Handle
+        type="source"
+        position={Position.Right}
+        style={{
+          background: serviceConfig.color,
+          width: 10,
+          height: 10,
+          border: '2px solid #1E1E2E',
+        }}
+      />
+    </Box>
+  );
+};
+
+export default AutomationGoogleServicesNode;
+

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

@@ -12,6 +12,14 @@ export { AISuggestionsPanel } from './AISuggestionsPanel';
 export { NodeActionButtons } from './NodeActionButtons';
 export { NodeAIAssistantPopup, showNodeAIAssistantPopup } from './NodeAIAssistantPopup';
 export type { AISuggestion } from './AISuggestionsModal';
+// Google Services Node (Docs, Slides, Meet, Gmail, Sheets, Calendar)
+export { AutomationGoogleServicesNode } from './AutomationGoogleServicesNode';
+export type {
+  GoogleServiceType,
+  GoogleTokenData,
+  AutomationGoogleServicesNodeData,
+  AutomationGoogleServicesNodeProps,
+} from './AutomationGoogleServicesNode';
 export {
     setNodeAIAssistantEndpoint,
     setNodeAIAssistantHeaders,

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

@@ -264,13 +264,77 @@ export interface AutomationNavigationNodeForm extends AutomationNodeFormData {
   };
 }
 
+// Google Services Node Form
+export type GoogleServiceType =
+  | 'docs'
+  | 'slides'
+  | 'meet'
+  | 'gmail'
+  | 'sheets'
+  | 'calendar';
+
+export interface AutomationGoogleServicesNodeForm extends AutomationNodeFormData {
+  type: 'start' | 'api' | 'formatting' | 'sheets' | 'end' | 'navigation';
+  serviceType: GoogleServiceType;
+  
+  // Google Auth Configuration
+  googleAuth?: {
+    clientId?: string;
+    scopes?: string[];
+    accessToken?: string;
+    expiresAt?: number;
+    userEmail?: string;
+  };
+  
+  // Service-specific Parameters
+  // Google Docs
+  documentId?: string;
+  documentTitle?: string;
+  documentContent?: string;
+  documentOperation?: 'create' | 'read' | 'update' | 'append';
+  
+  // Google Slides
+  presentationId?: string;
+  presentationTitle?: string;
+  slideContent?: string;
+  
+  // Google Meet
+  meetingTitle?: string;
+  meetingStartTime?: string;
+  meetingEndTime?: string;
+  meetingAttendees?: string[];
+  
+  // Gmail
+  emailTo?: string[];
+  emailSubject?: string;
+  emailBody?: string;
+  emailAttachments?: string[];
+  
+  // Google Sheets
+  spreadsheetId?: string;
+  sheetName?: string;
+  sheetRange?: string;
+  sheetData?: any[];
+  
+  // Google Calendar
+  calendarId?: string;
+  eventTitle?: string;
+  eventDescription?: string;
+  eventStartTime?: string;
+  eventEndTime?: string;
+  
+  // Output
+  outputVariable?: string;
+}
+
 export type AutomationNodeForm =
   | AutomationStartNodeForm
   | AutomationApiNodeForm
   | AutomationFormattingNodeForm
   | AutomationSheetsNodeForm
   | AutomationEndNodeForm
-  | AutomationNavigationNodeForm;
+  | AutomationNavigationNodeForm
+  | AutomationGoogleServicesNodeForm;
 
 // Automation Workflow Data Structure
 export interface AutomationWorkflowData {

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

@@ -12,6 +12,7 @@ import {
   AutomationNoteNode,
   AutomationNavigationNode,
   AutomationAISuggestionNode,
+  AutomationGoogleServicesNode,
 } from '../components/automation';
 
 export default {
@@ -28,4 +29,11 @@ export default {
   AutomationNoteNode,
   AutomationNavigationNode,
   AutomationAISuggestionNode,
+  // Google Services Nodes (Docs, Slides, Meet, Gmail, Sheets, Calendar)
+  AutomationGoogleServicesNode,
+  AutomationGoogleDocsNode: AutomationGoogleServicesNode,
+  AutomationGoogleSlidesNode: AutomationGoogleServicesNode,
+  AutomationGoogleMeetNode: AutomationGoogleServicesNode,
+  AutomationGmailNode: AutomationGoogleServicesNode,
+  AutomationGoogleCalendarNode: AutomationGoogleServicesNode,
 };