README

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

Register the plugin in your Filament panel provider:

use Aaix\FilamentChatBubbles\ChatBubblesPlugin;

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

Ensure broadcasting is configured:
```
php artisan install:broadcasting
```
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.

aaix / filament-chat-bubbles

Maintainers

Package info

Statistics

Security