n8n chat by Mohamed Alkoumi

• Features
• Requirements
• Installation
  • Step 1: Install via Composer
  • Step 2: Publish Configuration and Translations
  • Step 3: Add Environment Variables or Your config.filament-n8n-chat
• Usage
  • Basic Setup
    • Method 2: Plugin Registration (Advanced)
• Configuration
  • Simplified Configuration with i18n Support
• Advanced Usage
  • Conditional Display
  • Dynamic Configuration
  • Custom Styling
  • JavaScript Events
• N8n Workflow Setup
  • Basic Webhook Setup
• Troubleshooting
  • Chat Widget Not Appearing
• Security Considerations
• Support
• Contributing
• Credits
• License

A seamless integration of n8n chat widget into your FilamentPHP applications with full multilingual support and theme customization.

#Features

• 🚀 Full compatibility with FilamentPHP v4 & v5
• 🌍 Multilingual support (Arabic, English, and more)
• 💬 Full n8n chat functionality
• 🎨 Custommizable themes with updating config colors
• 🔧 Simplified configuration
• 📱 Fully responsive design with RTL support
• 🔐 Authentication-aware display options

#Requirements

• PHP 8.2+
• Laravel 11.x
• FilamentPHP 4.x
• Livewire 3.x (auto-installed with Filament)

#Installation

#Step 1: Install via Composer

composer require alkoumi/filament-n8n-chat

#Step 2: Publish Configuration and Translations

php artisan vendor:publish --tag="filament-n8n-chat-config"
php artisan vendor:publish --tag="filament-n8n-chat-translations"

#Step 3: Add Environment Variables or Your config.filament-n8n-chat

Add your n8n webhook URL to your .env file: or in config.filament-n8n-chat

N8N_CHAT_ENABLED=true
N8N_CHAT_WEBHOOK_URL=https://your-n8n-instance.com/webhook/your-webhook-id

#Usage

#Basic Setup

#Method 2: Plugin Registration (Advanced)

Register the plugin in your Panel Provider for more control:

// app/Providers/Filament/AdminPanelProvider.php

use Alkoumi\FilamentN8nChat\FilamentN8nChatPlugin;

public function panel(Panel $panel): Panel
{
    return $panel
        ->default()
        ->id('admin')
        ->path('admin')
        // ... other configurations
        ->plugins([
            FilamentN8nChatPlugin::make()
                ->config(function () {
                        $lang = app()->getLocale() ?? 'ar';

                        return [
                            'defaultLanguage' => $lang,
                            'initialMessages' => $lang === 'ar'
                                ? [
                                    'أنا مساعد الذكاء الإصطناعي',
                                    'آمر، كيف أخدمك 💐',
                                ]
                                : [
                                    'Hello! I am your AI assistant',
                                    'How can I help you today?',
                                ],
                            'i18n' => [
                                'en' => [
                                    'title' => 'Hi there! 👋',
                                    'subtitle' => 'I am AI assistant',
                                    'footer' => '',
                                    'getStarted' => 'New Conversation',
                                    'inputPlaceholder' => 'How can I help you today?',
                                ],
                                'ar' => [
                                    'title' => 'مرحبًا بك 💐',
                                    'subtitle' => 'أنا مساعد الذكاء الإصطناعي',
                                    'footer' => '',
                                    'getStarted' => 'محادثة جديدة',
                                    'inputPlaceholder' => 'آمر، كيف أقدر أخدمك 💐',
                                ],
                            ],
                        ];
                    }),
        ]);
}

#Configuration

#Simplified Configuration with i18n Support

Just take alook in // config/filament-n8n-chat.php

#Advanced Usage

#Conditional Display

Show chat only for specific user roles:

FilamentN8nChatPlugin::make()
    ->enabled(fn () => auth()->user()?->hasRole('admin'))

#Dynamic Configuration

Configure based on current user:

FilamentN8nChatPlugin::make()
    ->config(function () {
        return [
            'initialMessages' => auth()->check() 
                ? 'Welcome back, ' . auth()->user()->name . '!'
                : 'Hello! How can I help you?',
        ];
    })

#Custom Styling

You can customize the chat widget appearance by adding custom config options.

#JavaScript Events

Listen to chat events:

window.addEventListener('n8n-chat-ready', (event) => {
    console.log('N8n chat is ready!', event.detail.chat);
});

// Programmatically control the chat
window.openN8nChat();
window.closeN8nChat();
window.toggleN8nChat();
window.sendN8nMessage('Hello from code!');

#N8n Workflow Setup

#Basic Webhook Setup

1. Create a new workflow in n8n
2. Use chat trigger
3. Make Chat Publicly Available
4. Copy Chat URL (this will be your webhook URL)
5. Now you can use the plugin to integrate chat into your FilamentPHP application!

#Troubleshooting

#Chat Widget Not Appearing

1. Check if the plugin is enabled in config
2. Verify the webhook URL is set correctly
3. Check browser console for JavaScript errors

#Security Considerations

1. Use HTTPS: Always use HTTPS for your webhook URLs
2. Validate Input: Sanitize and validate all user input in your n8n workflows
3. Rate Limiting: Implement rate limiting in your n8n workflows
4. Authentication: Use the user metadata feature to track users
5. Environment Variables: Never commit webhook URLs to version control

#Support

• GitHub Issues
• Discussions

#Contributing

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

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

#Credits

• Alkoumi
• All Contributors

#License

The MIT License (MIT). Please see License File for more information.