feat(workflow): Plugin Trigger Node with Unified Entry Node System

[lyzno1]

Overview

This PR implements the Plugin Trigger Node frontend components as requested in #24196, providing the foundation for plugin-based workflow triggers with complete UI/UX integration and unified entry node system architecture.

Implementation Summary

Core Changes

• Extended BlockIcon component to support TriggerPlugin types with dynamic icons
• Enhanced useToolIcon hook to work with trigger plugins
• Expanded type definitions for PluginTriggerNodeType with provider integration
• Created TriggerPluginSelector component for Start Tab plugin selection
• Added AllStartBlocks container with complete Tools-tab-like functionality
• Implemented search and filtering for trigger plugins
• Added marketplace footer consistent with Tools tab
• Enhanced trigger service layer for future backend integration

Architecture Approach

This implementation follows a maximum code reuse strategy, leveraging the existing tool system architecture:

• TriggerPlugin nodes reuse the same icon rendering logic as Tool nodes
• Plugin selection UI reuses the Tools component with filtering
• Start Tab now has identical functionality to Tools Tab (search, footer, layout)
• Type definitions extend existing patterns for consistency
• Service layer prepares for backend API integration

UI/UX Improvements

• Complete Start Tab redesign: Now matches Tools tab with search box, content area, and marketplace footer
• Dynamic node display: Plugin trigger nodes show specific plugin names/icons instead of generic titles
• Consistent interaction patterns: Search, filter, and selection work identically to Tools tab
• Internationalization: Added translations for search placeholder in English, Chinese, and Japanese

Entry Node System Enhancements (Latest Updates)

• Unified Entry Node Architecture: Created ENTRY_NODE_TYPES constant grouping Start, TriggerSchedule, TriggerWebhook, and TriggerPlugin
• Intelligent Deletion Logic: Implemented unified deletion system allowing any entry node to be deleted as long as at least one remains
• Visual Distinction: Added 'original start node' label to User Input with full i18n support (en/zh-Hans/ja-JP)
• Improved UI Layout: Added divider between User Input and trigger types for better visual separation
• Icon Consistency: Fixed icon sizing inconsistencies across trigger types

Current Status: ✅ Ready for Review

The plugin trigger architecture is functionally complete with full UI integration and enhanced entry node management:

• ✅ Basic plugin trigger node architecture
• ✅ Icon system integration with dynamic plugin-specific icons
• ✅ Complete Start Tab redesign with search and marketplace integration
• ✅ Plugin trigger node canvas display with dynamic content
• ✅ Type system extension for provider integration
• ✅ Service layer preparation for backend API
• ✅ Unified entry node deletion system - Start nodes can now be deleted like other triggers
• ✅ Enhanced UI/UX - Clear visual separation and labeling of different entry types
• ✅ Visual consistency - Fixed icon sizing and layout inconsistencies
• 🔄 Ready for backend integration - Only requires replacing useAllBuiltInTools() with useAllTriggerPlugins()

Files Changed (11 commits)

• app/components/workflow/block-icon.tsx - Extended for TriggerPlugin support + fixed icon sizing
• app/components/workflow/hooks/use-workflow.ts - Added TriggerPlugin icon support
• app/components/workflow/hooks/use-nodes-interactions.ts - NEW: Unified entry node deletion logic
• app/components/workflow/nodes/trigger-plugin/ - Enhanced node display and panel
• app/components/workflow/block-selector/ - Complete Start Tab redesign + entry node improvements
• service/use-triggers.ts - Service layer for trigger plugins
• i18n/ - EXPANDED: Added search + entry node translations (en/zh-Hans/ja-JP)

Testing

• Manual testing of plugin trigger node creation in Start Tab
• Visual verification of icon rendering and dynamic display
• Search functionality testing
• UI consistency verification with Tools Tab
• NEW: Entry node deletion testing - verified at least one entry node remains
• NEW: Visual separation and labeling verification
• NEW: Icon sizing consistency verification across all trigger types

Related to #24196, #24198

[lyzno1]

📝 Technical Analysis: Current Tools Integration Pattern

Based on codebase analysis, here's how the current tools system works and how we're leveraging it:

Tools System Architecture

The existing tools system uses a unified abstraction layer design:

1. Data Structure: All tools follow the ToolWithProvider type pattern

   • Collection metadata (id, name, icon, author, etc.)
   • Array of Tool objects with parameters and schemas
   • PluginMeta for marketplace integration

2. Icon System: Uses the BlockIcon component with toolIcon prop

   • Supports both string URLs and AppIcon objects
   • useToolIcon hook dynamically retrieves icons from provider data
   • Located at: app/components/workflow/block-icon.tsx

3. UI Components: Reusable tool selection components

   • AllTools -> Tools -> Tool component hierarchy
   • Flat and tree view modes for different contexts
   • Search and filtering capabilities built-in

4. Service Layer: Centralized API management

   • useAllBuiltInTools, useAllCustomTools, etc.
   • Query-based data fetching with caching
   • Located at: service/use-tools.ts

Our Integration Strategy

We're extending this pattern rather than reimplementing:

• TriggerPlugin nodes reuse the same icon rendering path as Tool nodes
• Plugin selection UI leverages existing Tools components with trigger-specific filtering
• Type definitions extend the established CommonNodeType pattern
• Service layer follows the same query hook patterns

This approach ensures maximum code reuse while maintaining architectural consistency.

[lyzno1]

📝 Technical Analysis: Tools System Integration & UI Completion

Based on comprehensive codebase analysis, here's the complete integration pattern and UI enhancements:

Tools System Architecture Integration

The existing tools system uses a unified abstraction layer design that we've fully leveraged:

1. Data Structure: All tools follow the ToolWithProvider type pattern

   • Collection metadata (id, name, icon, author, etc.)
   • Array of Tool objects with parameters and schemas
   • PluginMeta for marketplace integration

2. Icon System: Complete integration with BlockIcon component

   • TriggerPlugin nodes reuse Tool node icon rendering paths
   • useToolIcon hook dynamically retrieves plugin-specific icons
   • Dynamic node display shows actual plugin names instead of generic "Plugin Trigger"

3. UI Components: Full reuse of Tools tab component hierarchy

   • AllStartBlocks -> StartBlocks + TriggerPluginSelector -> Tools component
   • Complete search and filtering capabilities
   • Identical layout, styling, and interaction patterns

4. Service Layer: Prepared for seamless backend transition

   • use-triggers.ts ready for useAllTriggerPlugins() implementation
   • Currently uses useAllBuiltInTools() as temporary data source (line 20 in trigger-plugin-selector.tsx)
   • Single line change needed: replace hook call when backend API is ready

Complete UI/UX Integration Achieved

• Start Tab Redesign: Now functionally identical to Tools tab with search box, scrollable content area, and marketplace footer
• Search Integration: Full search functionality with "Search triggers..." placeholder in 3 languages
• Layout Consistency: Same width (min-w-[400px] max-w-[500px]), height constraints, and scroll behavior
• Footer Integration: Reuses t('plugin.findMoreInMarketplace') translation and styling

Backend Integration Readiness

The implementation is 100% ready for backend integration. Only one change required:

// In trigger-plugin-selector.tsx line 20:
// Current (temporary):
const { data: buildInTools = [] } = useAllBuiltInTools()

// Future (when backend ready):  
const { data: triggerPlugins = [] } = useAllTriggerPlugins()

This approach ensures maximum code reuse (5 commits, 0 duplicate implementations) while maintaining complete architectural consistency.

[dosubot]

Related Documentation

No published documentation to review for changes on this repository.
Write your first living document

^{How did I do? Any feedback?}