Filament Chat Bubbles

Chat Heads for Filament panels with real-time messaging, file sharing, and presence tracking.

Filament Chat Bubbles brings a complete real-time messaging experience to your Filament panel. Floating chat heads, a slide-over modal, and a dedicated full-page view — all powered by Laravel Echo with zero npm dependencies in the host project.

Screenshots

Full-page messages view with sidebar, search, and cross-pattern background

Floating chat bubbles  ·  Slide-over modal

Key Features

• 💬 Floating Bubbles: Draggable, dockable chat heads with edge snapping and drag-drop sorting.
• 📱 Slide-Over Modal: Conversation list, chat detail, group management, and settings in one panel.
• 🖥️ Full-Page Messages: Dedicated Filament page with sidebar, search panel, and cross-pattern background.
• ⚡ Real-Time: Typing indicators, presence channels, and instant message delivery via Echo/Reverb.
• 📎 File Attachments: Images, documents, and videos with AVIF thumbnails, grid layout, and lightbox gallery.
• 🔗 Link Previews: Automatic OG meta fetching with inline preview cards.
• 😀 Emoji Picker: Full categorized picker loaded via CDN. Large emoji rendering for emoji-only messages.
• 🟢 Online Status: Presence dots, idle detection, heartbeat, and "last seen" timestamps.
• 🔍 Search: Conversation-scoped and global message search with highlighted results.
• ✏️ Rich Messaging: Reply-to, edit, delete, emoji reactions, inline markdown, and code blocks.
• 👥 Groups: Create, rename, and manage group conversations with member count and online indicators.
• ⌨️ Keyboard Shortcuts: Ctrl+E code, Ctrl+B bold, Ctrl+I italic, Arrow-Up edit last, Escape cancel.

Requirements

• PHP 8.2+
• Laravel 12+
• Filament 5+
• Laravel Echo + Reverb (or Pusher/Ably)
• Intervention Image 3+

Installation

You can install the package via Composer:

composer require aaix/filament-chat-bubbles

Run migrations and publish assets:

php artisan migrate
php artisan filament:assets

Add the package views to your panel's theme CSS so Tailwind picks up all utility classes:

/* resources/css/filament/admin/theme.css */
@source '../../../../vendor/aaix/filament-chat-bubbles/resources/views/**/*';

Then rebuild your theme:

npm run build

Optionally publish the configuration:

php artisan vendor:publish --tag=filament-chat-bubbles-config

Optionally publish the notification sound:

php artisan vendor:publish --tag=filament-chat-bubbles-assets

Quick Setup

1. Register the plugin in your Filament panel provider:

   use Aaix\FilamentChatBubbles\ChatBubblesPlugin;
   
   public function panel(Panel $panel): Panel
   {
       return $panel
           ->plugins([
               ChatBubblesPlugin::make(),
           ]);
   }
   

2. Ensure broadcasting is configured:

   php artisan install:broadcasting
   

3. Create the storage symlink (for file attachments):

   php artisan storage:link
   

That's it. Chat bubbles will appear in the bottom-right corner of your panel, and the slide-over is accessible from the topbar.

Configuration

The configuration file (config/filament-chat-bubbles.php) allows you to customize:

| Option | Default | Description | |--------|---------|-------------| | user_model | App\Models\User | Your User model class | | user_name_attribute | name | Attribute used for display name | | user_avatar_attribute | profile_picture_url | Attribute used for avatar URL | | table_prefix | fcb_ | Database table prefix | | bubble_size | 48 | Bubble diameter in pixels | | max_message_length | 5000 | Maximum message body length | | attachments.disk | public | Storage disk for file uploads | | attachments.max_size | 50 MB | Maximum upload file size | | attachments.max_per_message | 20 | Maximum attachments per message | | link_previews.enabled | true | Enable link preview fetching | | presence.enabled | true | Enable online/idle tracking | | presence.idle_after | 300 | Seconds before user is marked idle |

Testing

composer install
php artisan test --filter=ChatBubbles

Contributing

Contributions are welcome! Please open an issue or submit a pull request.

License

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