Enhanced Chat UI for n8n

A powerful complete chat solution for n8n featuring both Enhanced Chat Trigger and Chat UI Renderer nodes, built using official @n8n/chat source code for professional-grade chat capabilities.

🚀 What's New in v1.7.0 - Chat UI Renderer Added!

Enhanced Chat UI now includes TWO powerful nodes that work together to provide a complete chat solution:

✨ Enhanced Chat Trigger

True functional chat trigger with advanced features, real chat interface, and enhanced processing.

🎨 Chat UI Renderer (NEW!)

Professional chat visualization node that renders conversations as beautiful HTML using official @n8n/chat design patterns.

🎯 Complete Chat Solution

Enhanced Chat Trigger - Functional Chat Interface

• 🔥 True Chat Trigger: Functions like the official Chat Trigger but with enhanced features
• 💬 Real Chat Interface: Displays actual working chat interface using @n8n/chat
• 📱 Multiple Modes: Window mode (toggle button) and Fullscreen mode
• 📁 File Upload Support: Images, PDFs, documents, JSON files
• 💾 Session Management: Maintain conversation context across messages
• 📚 Message History: Store and retrieve conversation history
• ⚡ Enhanced Processing: Advanced message processing and response handling

Chat UI Renderer - Professional Chat Visualization

• 🎨 4 Render Modes: HTML, Components, Preview, Export
• 📊 3 Message Sources: Input data, Manual messages, Enhanced Chat format
• 🎭 Complete Theming: Dark/light modes, custom colors, full CSS control
• 📝 Markdown Support: Render rich text with markdown formatting
• ⏰ Timestamps: Display message timestamps with formatting
• 📤 Export Options: Generate standalone HTML files for sharing
• 🔗 Perfect Integration: Seamlessly works with Enhanced Chat Trigger output

🛠️ Installation

npm install n8n-nodes-enhanced-chat

Or install directly in n8n:

1. Go to Settings → Community Nodes
2. Install n8n-nodes-enhanced-chat
3. Restart n8n

📖 Usage

Enhanced Chat Trigger Setup

1. Add the Enhanced Chat Trigger node to your workflow
2. Configure your chat settings (title, welcome messages, etc.)
3. Activate your workflow
4. The chat interface will be available in the trigger panel
5. Use the generated webhook URL for external integration

Chat UI Renderer Setup

1. Add the Chat UI Renderer node after your Enhanced Chat Trigger
2. Choose your render mode (HTML, Preview, Export, etc.)
3. Configure styling and appearance options
4. Execute to generate beautiful chat visualizations

Perfect Integration Example

Enhanced Chat Trigger → [Your Processing] → Chat UI Renderer

1. Enhanced Chat Trigger captures chat messages
2. Your workflow processes the conversation
3. Chat UI Renderer creates beautiful HTML output for reports/sharing

🎨 Chat UI Renderer Features

Render Modes

• HTML Output: Clean HTML + CSS for embedding in websites
• Components Mode: Individual message components for custom layouts
• Preview Mode: Complete HTML page with embedded styles
• Export Mode: Standalone HTML file ready for download

Message Sources

• Input Data: Use messages from workflow input
• Manual Messages: Define messages directly in the node
• Enhanced Chat Format: Seamlessly process Enhanced Chat Trigger output

Styling Options

• Themes: Default, Dark, Light, Custom
• Colors: Primary, secondary, background, text colors
• Layout: Custom width, height, and spacing
• Typography: Font families, sizes, and formatting
• CSS Variables: Full control over chat appearance

Output Examples

HTML Mode Output:

<div class="chat-renderer">
  <div class="chat-header">
    <h1 class="chat-title">Customer Support</h1>
  </div>
  <div class="chat-messages">
    <div class="chat-message from-bot">
      <div class="message-text">Hello! How can I help?</div>
      <div class="message-timestamp">12:30 PM</div>
    </div>
  </div>
</div>

Preview Mode Output:

Complete HTML page with embedded CSS, ready for browser viewing.

Export Mode Output:

Downloadable HTML file with conversation data.

🎯 Use Cases

Customer Support Workflows

Chat → Enhanced Chat Trigger → AI Processing → Chat UI Renderer → Email Report

Meeting Transcription

Meeting Data → Chat UI Renderer → Professional HTML Summary

Chat Analytics

Chat History → Enhanced Chat Trigger → Analysis → Chat UI Renderer → Dashboard

Documentation Generation

Support Conversations → Chat UI Renderer → Knowledge Base Articles

🔧 Configuration Examples

Enhanced Chat Trigger Configuration

{
  chatTitle: "AI Support Assistant",
  chatSubtitle: "How can I help you today?",
  chatMode: "window",
  enableFileUploads: true,
  enhancedFeatures: {
    sessionManagement: true,
    messageHistory: true,
    typingIndicators: true
  }
}

Chat UI Renderer Configuration

{
  renderMode: "preview",
  messageSource: "enhanced",
  chatConfig: {
    title: "Customer Conversation",
    showTimestamps: true,
    enableMarkdown: true
  },
  styling: {
    theme: "dark",
    primaryColor: "#667eea",
    chatWidth: "500px"
  }
}

🆚 Enhanced vs Standard Solutions

Feature	Standard Chat	Enhanced Chat UI
Basic Chat	✅ Yes	✅ Enhanced
Chat Visualization	❌ No	✅ Professional
File Uploads	❌ Limited	✅ Multiple formats
Session Management	❌ Basic	✅ Advanced
Message History	❌ No	✅ Persistent
Custom Styling	❌ Limited	✅ Complete control
Export Options	❌ No	✅ Multiple formats
Response Modes	❌ Basic	✅ Text/JSON/HTML/Workflow
Theme Support	❌ No	✅ Dark/Light/Custom
Markdown Rendering	❌ No	✅ Full support

🎨 Demo & Examples

Live Demos

• enhanced-chat-demo.html - Enhanced Chat Trigger showcase
• chat-renderer-demo.html - Chat UI Renderer examples

Integration Examples

Website Integration

<link href="https://cdn.jsdelivr.net/npm/@n8n/chat/dist/style.css" rel="stylesheet" />
<script type="module">
  import { createChat } from 'https://cdn.jsdelivr.net/npm/@n8n/chat/dist/chat.bundle.es.js';
  
  createChat({
    webhookUrl: 'https://your-n8n-instance.com/webhook/your-enhanced-chat-node-id',
    mode: 'window',
    showWelcomeScreen: true,
    allowFileUploads: true,
    initialMessages: [
      'Hi there! 👋',
      'I\'m your Enhanced AI Assistant. How can I help you today?'
    ]
  });
</script>

React Integration

import { useEffect } from 'react';
import '@n8n/chat/style.css';
import { createChat } from '@n8n/chat';

export const EnhancedChatWidget = () => {
  useEffect(() => {
    createChat({
      webhookUrl: 'YOUR_ENHANCED_CHAT_WEBHOOK_URL',
      mode: 'window',
      allowFileUploads: true,
      loadPreviousSession: true
    });
  }, []);

  return <div id="n8n-chat"></div>;
};

🔒 Security Features

• Rate Limiting: Prevent spam and abuse
• CORS Control: Restrict origins for security
• Session Timeouts: Automatic session cleanup
• Input Validation: Enhanced message validation
• File Type Restrictions: Control allowed upload formats

🐛 Troubleshooting

Common Issues

1. Chat not appearing: Ensure workflow is activated and webhook URL is correct
2. File uploads failing: Check allowed file types configuration
3. Messages not triggering: Verify webhook URL and CORS settings
4. Styling issues: Check CSS variable overrides and custom styling
5. Render output empty: Verify message source and data format
6. "Chat session not found" error: Fixed in v1.7.1 - sessions now recover automatically after n8n restart
7. "Could not get parameter" error: Fixed in v1.7.2 - all parameters now have proper defaults

Debug Mode

Enable debug logging in your workflow to see enhanced message data and processing details.

📝 Changelog

v1.7.2 (Current)

• 🐛 CRITICAL FIX: Resolved "Could not get parameter" error during trigger initialization
• 🔧 IMPROVEMENT: Added proper default values for all node parameters
• ✨ NEW: More robust parameter handling prevents initialization crashes
• 📝 ENHANCEMENT: Simplified welcome message generation with sensible defaults

v1.7.1 (Previous)

• 🐛 FIX: Resolved "Chat session not found" error after workflow restart/reactivation
• ✨ NEW: Graceful session recovery - chat continues working after n8n restarts
• 🔧 IMPROVEMENT: Better error handling and debugging for session management
• 📝 ENHANCEMENT: Added logging for session recovery events

v1.7.0 (Previous)

• 🎨 NEW: Chat UI Renderer node with professional chat visualization
• ✨ 4 render modes: HTML, Components, Preview, Export
• 🎭 Complete theming system with dark/light modes
• 📝 Markdown support in message rendering
• 🔗 Perfect integration between Enhanced Chat Trigger and Chat UI Renderer
• 📤 Export functionality for standalone HTML files
• 🎯 Professional design using official @n8n/chat patterns

v1.6.3 (Previous)

• 🔥 MAJOR: Complete redesign as true functional chat trigger
• ✨ Real chat interface with @n8n/chat integration
• 🚀 Enhanced features: session management, file uploads, custom styling
• 💾 Message history and auto-save conversations
• ⚡ Multiple response modes and rate limiting
• 🎨 Professional UI/UX with custom theming
• 🔒 Enhanced security and CORS support

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Built with the powerful @n8n/chat package
• Leveraged official @n8n/chat source code for professional UI components
• Inspired by the n8n community's need for enhanced chat functionality
• Special thanks to the n8n team for the excellent platform

---

🚀 Ready to enhance your n8n workflows with the most powerful chat solution available? Install Enhanced Chat UI today and get both Enhanced Chat Trigger AND Chat UI Renderer!