README

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)

// 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

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

Troubleshooting

Chat Widget Not Appearing

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

Security Considerations

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

Support

Contributing

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

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

Credits

License

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

alkoumi / filament-n8n-chat

Maintainers

Details