Filament N8n Chat Plugin

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.