@flowuent-org/diagramming-core 1.2.4 → 1.2.5

package/apps/diagramming/src/AutomationDiagramData.ts

@@ -525,6 +525,110 @@ 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: 'Create a Google Docs document',
+      serviceType: 'docs',
+      status: 'idle',
+      isFirstGoogleNode: true, // Only first Google node shows Connect button
+      parameters: {
+        documentTitle: 'Automation Report',
+        operation: 'create',
+        content: 'Report content will be generated here...',
+      },
+      googleAuth: {
+        clientId: '',
+        scopes: [
+          'https://www.googleapis.com/auth/documents',
+          'https://www.googleapis.com/auth/drive',
+        ],
+        isAuthenticated: false,
+        isLoading: false,
+      },
+      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: 'Send email via Gmail',
+      serviceType: 'gmail',
+      status: 'idle',
+      isFirstGoogleNode: false, // Not first, no Connect button
+      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',
+        ],
+        isAuthenticated: false,
+        isLoading: false,
+      },
+      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: 'Create a Google Meet link',
+      serviceType: 'meet',
+      status: 'idle',
+      isFirstGoogleNode: false, // Not first, no Connect button
+      parameters: {
+        meetingTitle: 'Project Discussion',
+        attendees: ['team@example.com'],
+      },
+      googleAuth: {
+        clientId: '',
+        scopes: ['https://www.googleapis.com/auth/meetings.space.created'],
+        isAuthenticated: false,
+        isLoading: false,
+      },
+      formData: {
+        nodeId: 'google-meet-node',
+        title: 'Create Meeting',
+        type: 'navigation',
+        serviceType: 'meet',
+      },
+    },
+    width: 300,
+    height: 200,
+    measured: { width: 300, height: 200 },
+  },
 ];
 
 // Default edges for the automation diagram
@@ -624,4 +728,45 @@ 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 Meeting',
+      type: 'flow',
+    },
+    style: {
+      stroke: '#EA4335',
+      strokeWidth: 2,
+    },
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+      color: '#EA4335',
+    },
+  },
 ];

package/package.json

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

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

@@ -0,0 +1,739 @@
+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;
+
+  // Flag to indicate if this is the first Google node (show auth button)
+  isFirstGoogleNode?: boolean;
+
+  // Google Auth config
+  googleAuth?: {
+    clientId?: string;
+    scopes?: string[];
+    tokens?: GoogleTokenData;
+    isAuthenticated?: boolean;
+    isLoading?: boolean;
+    userEmail?: string;
+  };
+
+  // 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 - passed from parent workflow
+  onGoogleLogin?: () => void;
+  onGoogleDisconnect?: () => 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: 'Create or edit a document',
+  },
+  slides: {
+    icon: SlidesIcon,
+    label: 'Google Slides',
+    color: '#FBBC04',
+    scopes: [
+      'https://www.googleapis.com/auth/presentations',
+      'https://www.googleapis.com/auth/drive',
+    ],
+    description: 'Create or edit a presentation',
+  },
+  meet: {
+    icon: MeetIcon,
+    label: 'Google Meet',
+    color: '#34A853',
+    scopes: ['https://www.googleapis.com/auth/meetings.space.created'],
+    description: 'Create a meeting link',
+  },
+  gmail: {
+    icon: GmailIcon,
+    label: 'Gmail',
+    color: '#EA4335',
+    scopes: [
+      'https://www.googleapis.com/auth/gmail.send',
+      'https://www.googleapis.com/auth/gmail.compose',
+    ],
+    description: 'Send an email',
+  },
+  sheets: {
+    icon: SheetsIcon,
+    label: 'Google Sheets',
+    color: '#0F9D58',
+    scopes: ['https://www.googleapis.com/auth/spreadsheets'],
+    description: 'Read or write spreadsheet data',
+  },
+  calendar: {
+    icon: CalendarIcon,
+    label: 'Google Calendar',
+    color: '#4285F4',
+    scopes: ['https://www.googleapis.com/auth/calendar'],
+    description: 'Create a calendar event',
+  },
+};
+
+// ========================
+// 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 'Expired';
+  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 [isExecuting, setIsExecuting] = useState(false);
+  const [executionProgress, setExecutionProgress] = useState(0);
+  const [error, setError] = useState<string | null>(null);
+  const [result, setResult] = useState<any>(null);
+
+  const serviceType = data.serviceType || 'docs';
+  const serviceConfig = SERVICE_CONFIG[serviceType];
+  const ServiceIcon = serviceConfig.icon;
+
+  // Check if authenticated from data
+  const isAuthenticated = data.googleAuth?.isAuthenticated || 
+    (data.parameters?.googleAccessToken && !isTokenExpired(data.parameters?.googleTokenExpiresAt));
+  const isAuthLoading = data.googleAuth?.isLoading || false;
+  const userEmail = data.googleAuth?.userEmail || data.parameters?.googleUserEmail;
+
+  // Show Google Auth button only on first Google node
+  const showGoogleAuthButton = data.isFirstGoogleNode === true;
+
+  // ========================
+  // 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]
+  );
+
+  // ========================
+  // 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: 'Ready',
+      },
+      authenticating: {
+        color: '#F59E0B',
+        bgColor: 'rgba(245, 158, 11, 0.1)',
+        label: 'Authenticating...',
+        icon: <CircularProgress size={12} color="inherit" />,
+      },
+      authenticated: {
+        color: '#10B981',
+        bgColor: 'rgba(16, 185, 129, 0.1)',
+        label: 'Connected',
+        icon: <CheckCircleIcon sx={{ fontSize: 12 }} />,
+      },
+      running: {
+        color: '#3B82F6',
+        bgColor: 'rgba(59, 130, 246, 0.1)',
+        label: 'Running...',
+        icon: <CircularProgress size={12} color="inherit" />,
+      },
+      completed: {
+        color: '#10B981',
+        bgColor: 'rgba(16, 185, 129, 0.1)',
+        label: 'Success',
+        icon: <CheckCircleIcon sx={{ fontSize: 12 }} />,
+      },
+      error: {
+        color: '#EF4444',
+        bgColor: 'rgba(239, 68, 68, 0.1)',
+        label: 'Error',
+        icon: <ErrorIcon sx={{ fontSize: 12 }} />,
+      },
+    };
+
+    const currentStatus = isAuthenticated ? 'authenticated' : status;
+    const config = statusConfig[currentStatus];
+
+    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 Google Auth Button
+  // ========================
+  const renderGoogleAuthButton = () => {
+    if (!showGoogleAuthButton) return null;
+
+    if (isAuthenticated) {
+      return (
+        <Button
+          onClick={data.onGoogleDisconnect}
+          disabled={isAuthLoading}
+          fullWidth
+          sx={{
+            backgroundColor: '#10B981',
+            border: '1px solid #10B981',
+            borderRadius: '8px',
+            padding: '8px 12px',
+            gap: '8px',
+            color: '#FFFFFF',
+            textTransform: 'none',
+            fontSize: '13px',
+            fontWeight: 500,
+            '&:hover': {
+              backgroundColor: '#059669',
+            },
+            '&:disabled': {
+              opacity: 0.6,
+            },
+          }}
+        >
+          <FcGoogle size={18} />
+          {userEmail ? userEmail.split('@')[0] : 'Connected'}
+        </Button>
+      );
+    }
+
+    return (
+      <Button
+        onClick={data.onGoogleLogin}
+        disabled={isAuthLoading}
+        fullWidth
+        sx={{
+          backgroundColor: '#171C29',
+          border: '1px solid #FFFFFF1A',
+          borderRadius: '8px',
+          padding: '8px 12px',
+          gap: '8px',
+          color: '#B2BCD8',
+          textTransform: 'none',
+          fontSize: '13px',
+          fontWeight: 400,
+          '&:hover': {
+            backgroundColor: '#1e293b',
+            borderColor: '#3B82F6',
+          },
+          '&:disabled': {
+            opacity: 0.6,
+          },
+        }}
+      >
+        {isAuthLoading ? (
+          <>
+            <CircularProgress size={16} sx={{ color: '#B2BCD8' }} />
+            Connecting...
+          </>
+        ) : (
+          <>
+            <FcGoogle size={18} />
+            Connect Google
+          </>
+        )}
+      </Button>
+    );
+  };
+
+  // ========================
+  // 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 }}
+            >
+              {data.description || serviceConfig.description}
+            </Typography>
+          </Box>
+        </Box>
+        {renderStatusBadge()}
+      </Box>
+
+      {/* Content */}
+      <Box sx={{ px: 2, py: 1.5 }}>
+        {/* Google Auth Button - Only on first Google node */}
+        {showGoogleAuthButton && (
+          <Box sx={{ mb: 1.5 }}>
+            {renderGoogleAuthButton()}
+            {!isAuthenticated && (
+              <Typography
+                variant="caption"
+                sx={{
+                  color: '#6B7280',
+                  fontSize: 10,
+                  display: 'block',
+                  textAlign: 'center',
+                  mt: 0.5,
+                }}
+              >
+                Click to authenticate with Google
+              </Typography>
+            )}
+          </Box>
+        )}
+
+        {/* Authentication Status for non-first nodes */}
+        {!showGoogleAuthButton && (
+          <Box
+            sx={{
+              bgcolor: isAuthenticated ? 'rgba(16, 185, 129, 0.1)' : 'rgba(107, 114, 128, 0.1)',
+              borderRadius: 1,
+              p: 1.5,
+              mb: 1.5,
+            }}
+          >
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+              <FcGoogle size={18} style={{ opacity: isAuthenticated ? 1 : 0.5 }} />
+              <Box>
+                <Typography
+                  variant="caption"
+                  sx={{ 
+                    color: isAuthenticated ? '#10B981' : '#6B7280', 
+                    display: 'block', 
+                    fontWeight: 600,
+                    fontSize: 11,
+                  }}
+                >
+                  {isAuthenticated ? 'Google Connected' : 'Google Not Connected'}
+                </Typography>
+                {isAuthenticated && userEmail && (
+                  <Typography
+                    variant="caption"
+                    sx={{ color: '#9CA3AF', fontSize: 10 }}
+                  >
+                    {userEmail}
+                  </Typography>
+                )}
+              </Box>
+            </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' }}
+            >
+              Executing... {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 }}
+            >
+              ✓ Executed successfully
+            </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>
+        )}
+
+        {/* Service-specific details */}
+        <Box
+          sx={{
+            bgcolor: 'rgba(255, 255, 255, 0.03)',
+            borderRadius: 1,
+            p: 1,
+          }}
+        >
+          {serviceType === 'docs' && data.parameters?.documentTitle && (
+            <Typography variant="caption" sx={{ color: '#9CA3AF', fontSize: 10 }}>
+              Document: {data.parameters.documentTitle}
+            </Typography>
+          )}
+          {serviceType === 'gmail' && data.parameters?.subject && (
+            <Typography variant="caption" sx={{ color: '#9CA3AF', fontSize: 10 }}>
+              Subject: {data.parameters.subject}
+            </Typography>
+          )}
+          {serviceType === 'meet' && data.parameters?.meetingTitle && (
+            <Typography variant="caption" sx={{ color: '#9CA3AF', fontSize: 10 }}>
+              Meeting: {data.parameters.meetingTitle}
+            </Typography>
+          )}
+          {serviceType === 'slides' && data.parameters?.presentationTitle && (
+            <Typography variant="caption" sx={{ color: '#9CA3AF', fontSize: 10 }}>
+              Presentation: {data.parameters.presentationTitle}
+            </Typography>
+          )}
+          {serviceType === 'calendar' && data.parameters?.eventTitle && (
+            <Typography variant="caption" sx={{ color: '#9CA3AF', fontSize: 10 }}>
+              Event: {data.parameters.eventTitle}
+            </Typography>
+          )}
+          {serviceType === 'sheets' && data.parameters?.sheetName && (
+            <Typography variant="caption" sx={{ color: '#9CA3AF', fontSize: 10 }}>
+              Sheet: {data.parameters.sheetName}
+            </Typography>
+          )}
+          {!data.parameters?.documentTitle && 
+           !data.parameters?.subject && 
+           !data.parameters?.meetingTitle &&
+           !data.parameters?.presentationTitle &&
+           !data.parameters?.eventTitle &&
+           !data.parameters?.sheetName && (
+            <Typography variant="caption" sx={{ color: '#6B7280', fontSize: 10, fontStyle: 'italic' }}>
+              Configure node parameters
+            </Typography>
+          )}
+        </Box>
+      </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,86 @@ 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;
+  
+  // Flag to show Google auth button only on first node
+  isFirstGoogleNode?: boolean;
+  
+  // Google Auth Configuration
+  googleAuth?: {
+    clientId?: string;
+    scopes?: string[];
+    accessToken?: string;
+    expiresAt?: number;
+    userEmail?: string;
+    isAuthenticated?: boolean;
+    isLoading?: boolean;
+  };
+  
+  // 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;
+  
+  // Callbacks
+  onGoogleLogin?: () => void;
+  onGoogleDisconnect?: () => void;
+}
+
 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
+  AutomationGoogleServicesNode,
+  AutomationGoogleDocsNode: AutomationGoogleServicesNode,
+  AutomationGoogleSlidesNode: AutomationGoogleServicesNode,
+  AutomationGoogleMeetNode: AutomationGoogleServicesNode,
+  AutomationGmailNode: AutomationGoogleServicesNode,
+  AutomationGoogleCalendarNode: AutomationGoogleServicesNode,
 };