Skip to content

📧 Email Inbox Plugin

🎯 Overview

The Email Inbox Plugin (alf/plugin-email-inbox) is a comprehensive email management interface for NocoBase that provides an advanced inbox experience for managing email marketing campaigns. It serves as the primary frontend interface for the Email Marketing Component in the Production & Distribution container.

🔗 Backend Integration

Primary Module

  • Email Marketing Component: Complete email campaign management system
  • Campaign message visualization and management
  • Thread organization and conversation tracking
  • Contact interaction history
  • Campaign performance monitoring

Supporting Systems

💡 Benefits to Backend Modules

For Email Marketing

  • Intuitive Message Browsing: User-friendly interface for campaign message review
  • HTML Rendering: Full HTML email visualization with fallback to plain text
  • Thread Management: Automatic conversation grouping and display
  • Real-time Filtering: Search, unread, and starred message filters
  • Attachment Handling: Visual attachment management interface

For Campaign Analytics

  • Read Status Tracking: Visual indication of read/unread messages
  • Engagement Metrics: Starred/flagged message tracking
  • Activity Visualization: Campaign message flow and timeline

✨ Key Features

🎨 User Interface

  • Dual-Panel Layout: Left sidebar for email list, right panel for content
  • Infinite Scroll: Automatic pagination for large inboxes
  • Theme Adaptive: Compatible with light/dark modes
  • Responsive Design: Collapsible sidebar for mobile devices

🔍 Functionality

  • Advanced Filtering:
  • Text search across subject and content
  • Unread message filter
  • Starred/flagged message filter
  • Interactive States:
  • Mark as read/unread
  • Star/unstar messages
  • Conversation threading
  • Smart Sorting: Most recent emails first
  • Relative Dates: Human-friendly date formatting (e.g., "2 hours ago")

📊 Data Structure

Collections

  • Emails: Full message data with headers, body, attachments
  • Conversations: Threading system for related emails
  • Attachments: File metadata and storage references
  • Accounts: Email account configuration (IMAP/SMTP)

Database Compatibility

  • ✅ PostgreSQL: Full support with optimized indexes
  • ✅ SQLite: Full support with compatible queries

🛠️ Technical Architecture

🏗️ Component Structure

Email Inbox Plugin
├── InboxBlock (Main Component)
│   ├── EmailList (Left Panel)
│   │   ├── Infinite Scroll
│   │   ├── Search Filter
│   │   └── Email Items
│   └── EmailViewer (Right Panel)
│       ├── HTML Renderer
│       ├── Action Bar
│       └── Metadata Display
├── Data Provider
│   ├── Email Queries
│   ├── Filter Logic
│   └── State Management
└── Settings & Configuration
    ├── Block Settings
    └── Field Configuration

🔧 Technologies Used

  • React 18+: UI components and hooks
  • Ant Design v5: Professional UI library (Layout, List, Typography)
  • Formily: Form and schema management
  • NocoBase Framework: Platform integration
  • TypeScript: Type safety and development

📡 API Integration

// Email Marketing API Endpoints
GET    /api/emails              // Fetch email list
GET    /api/emails/:id          // Get email detail
PATCH  /api/emails/:id          // Update email status
GET    /api/conversations/:id   // Get conversation thread
GET    /api/attachments/:id     // Download attachment

📦 Installation & Setup

1️⃣ Installation

# Plugin installed as part of NocoBase workspace
# Enable from admin interface:
# Settings → Plugin Manager → @alf/plugin-email-inbox → Enable

2️⃣ Configuration

  1. Enable plugin in NocoBase admin
  2. (Optional) Populate with test data via admin interface
  3. Add "Email Inbox" block from "Other Blocks" category
  4. Configure displayed fields and filters

3️⃣ Usage

  • Add Block: Page Editor → Add Block → Other Blocks → Email Inbox
  • Configure Fields: Select email fields to display
  • Apply Filters: Use search, unread, starred filters
  • Manage Messages: Click to read, star, or mark as read

🔄 Data Flow

Message Display Flow

Email Marketing Backend → PostgreSQL Database → NocoBase API → Email Inbox Plugin → User Interface

Action Flow

User Action (Star/Read) → Email Inbox Plugin → API Request → Email Marketing System → Database Update → UI Refresh

Real-time Updates

Campaign Activity → Event Manager → WebSocket → Email Inbox Plugin → Auto-refresh

🎯 Use Cases

📋 Campaign Management

  • Monitor Campaigns: Track sent emails and responses
  • Review Messages: Verify email content and formatting
  • Thread Analysis: Follow conversation flows
  • Performance Review: Identify engagement patterns

👥 Contact Management

  • Interaction History: View all contact communications
  • Response Tracking: Monitor reply chains
  • Engagement Scoring: Starred/important messages

📈 Analytics Support

  • Message Distribution: Visualize campaign message flow
  • Engagement Metrics: Read/unread ratios
  • Timeline Visualization: Campaign message chronology

🚀 Advanced Features

🔧 Developer Tools

  • Test Data Generator: Automatic sample email population
  • Hot Reload: Development without builds
  • Debug Logging: Comprehensive operation tracking

📊 Planned Enhancements

  • IMAP/SMTP integration for real servers
  • Email composer (draft, reply, forward)
  • Functional attachment system
  • Folder and label management
  • Real-time notifications
  • Advanced search with filters

📚 Documentation References

Backend Module Documentation

Legacy Documentation

  • Source: OLD_Docs/Front_End_Plugins/Email_inbox/
  • Technical Details: OLD_Docs/Front_End_Plugins/Email_inbox/README_dev.md

🔗 Cross-References

This Plugin Supports

📊 Quality Attributes

🎯 Performance

  • Infinite Scroll: Efficient memory usage for large inboxes
  • Lazy Loading: Images and attachments loaded on demand
  • Optimized Queries: Database indexes for fast retrieval
  • Caching: Frequently accessed emails cached

🔒 Security

  • Permission-based: Respects NocoBase ACL system
  • Sanitized HTML: Safe email content rendering
  • Secure Attachments: Protected file access

♿ Accessibility

  • Keyboard Navigation: Full keyboard support
  • Screen Reader: ARIA labels and semantic HTML
  • Color Contrast: WCAG compliant theming