Wirechat Panel Configuration

Wirechat panels centralize configuration for routing, middleware, features, and search functionality in a single file, streamlining package setup.

#Default Panel Setup

When you install Wirechat, a default panel is created at app/Providers/Wirechat/ChatsPanelProvider.php and the wirechat can accessed at route '/chats'.

#Creating Panels

You can create multiple panels to support different user roles, such as:

• Admins accessing exclusive features at /admin.
• Regular users accessing chats at /chats.

To create a new panel, run:

php artisan make:wirechat-panel panel-name

For example, php artisan make:wirechat-panel app generates a panel named "app" with its configuration in app/Providers/Wirechat/AppPanelProvider.php. The panel is accessible at '/app' by default, but you can customize the path (see Changing the Panel Path).

After creating a panel, register its service provider:

• Laravel 11+: Add to bootstrap/providers.php.
• Laravel 10 or below: Add to config/app.php.

Wirechat attempts automatic registration, but if the panel is inaccessible, verify the provider registration.

#Panel Methods Overview

Panels are the main configuration surface for Wirechat. Instead of scattering package setup across multiple files, you can keep routing, access rules, visual settings, chat-list behavior, and feature flags in one provider.

Common panel method groups include:

• Identity and routing: id(), path(), default()
• Access and middleware: middleware(), chatMiddleware()
• Chats list behavior: chatsSearch(), unreadIndicator()
• Uploads and media: attachments(), fileAttachments(), mediaAttachments()
• Appearance: layout(), colors(), heading(), favicon(), emojiPicker()
• Message rendering: parseMessageUrls()
• Actions: createChatAction(), createGroupAction(), clearChatAction(), deleteChatAction(), redirectToHomeAction(), deleteMessageActions()
• Pro features: tabs(), defaultTab(), contentViewer()

Use the methods below when you want fine-grained control, or start with a broader provider example and refine it over time.

#Quick Example

Here is a realistic panel provider example that combines some of the most commonly used panel methods:

use Wirechat\Wirechat\Panel;
use Wirechat\Wirechat\Support\Color;
use Wirechat\Wirechat\Support\Enums\EmojiPickerPosition;
use Wirechat\Wirechat\Support\Enums\UnreadIndicatorType;

public function panel(Panel $panel): Panel
{
    return $panel
        ->id('support')
        ->path('support')
        ->middleware(['web', 'auth'])
        ->chatMiddleware(['verified'])
        ->chatsSearch()
        ->unreadIndicator(type: UnreadIndicatorType::Count)
        ->emojiPicker(position: EmojiPickerPosition::Docked)
        ->attachments()
        ->colors([
            'primary' => Color::Blue,
        ])
        ->heading('Support Chat')
        ->createChatAction()
        ->createGroupAction()
        ->redirectToHomeAction(url: '/dashboard')
        ->default();
}

#Methods

#Panel ID

The panel ID identifies the panel across the application. Set it using the id() method:

use Wirechat\Wirechat\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
          //...
          ->id('chats');
}

#Path

Customize the panel’s URL path using the path() method:

use Wirechat\Wirechat\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
          //...
          ->path('chats');
}

To use the root URL (no prefix), set an empty path:

use Wirechat\Wirechat\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
          //...
          ->path('');
}

Note: Ensure routes/web.php does not define a conflicting '' or '/' route, as it takes precedence.

#Middleware

Apply additional middleware to Wirechat routes using the middleware() method:

use Wirechat\Wirechat\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
          //...
          ->middleware(['web', 'auth']);
}

#Chat Middleware

The belongsToConversation middleware is automatically applied to /chats/{conversation} to restrict access to authorized users, such as conversation members. Add custom middleware to modify chat access:

use Wirechat\Wirechat\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
          //...
          ->chatMiddleware([
            // Additional middleware
        ]);
}

#Enable Chats Search

Enable the chat search field in the Wirechat UI:

use Wirechat\Wirechat\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
          //...
          ->chatsSearch();
}

Note: Disable search by passing false: ->chatsSearch(false).

#Parse Message URLs

Enable message link parsing so URLs and recognized bare domains (like example.com) render as clickable links inside chat bubbles:

use Wirechat\Wirechat\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
          //...
          ->parseMessageUrls();
}

Disable it explicitly by passing false:

->parseMessageUrls(false);

This feature only wraps the URL segments, leaving the rest of the message body unchanged. Link recognition respects the wirechat.message_url_parsing config settings.

You can tune link recognition globally in config/wirechat.php:

'message_url_parsing' => [
    // Allow domains like "example.com" without http/https.
    'allow_bare_domains' => true,

    // Limit recognized TLDs for bare domains.
    // Set to null to allow all TLDs, or [] to block all.
    'allowed_tlds' => [
        'com', 'net', 'org', 'io', 'co', 'me', 'app', 'dev', 'ai', 'gg', 'tv',
        'info', 'biz', 'xyz', 'site', 'store', 'shop', 'pro', 'cloud',
    ],
],

#Unread Messages Indicator

Use unreadIndicator() to control how unread conversations are highlighted in the chats list.

By default, Wirechat uses a small unread dot, so existing panels keep the current behavior without needing any changes:

use Wirechat\Wirechat\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
          //...
          ->unreadIndicator();
}

If you prefer a numeric unread badge, pass the UnreadIndicatorType enum:

use Wirechat\Wirechat\Panel;
use Wirechat\Wirechat\Support\Enums\UnreadIndicatorType;

public function panel(Panel $panel): Panel
{
    return $panel
          //...
          ->unreadIndicator(type: UnreadIndicatorType::Count);
}

You may also disable the unread indicator completely:

use Wirechat\Wirechat\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
          //...
          ->unreadIndicator(false);
}

This setting affects the chats list in both full-page and widget mode.

If you are upgrading from earlier panel examples, unReadMessages() still works as a backward-compatible alias, but unreadIndicator() is now the preferred name.

#Enable Emoji Picker

Enable Emoji Picker element in Chat

use Wirechat\Wirechat\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
          //...
          ->emojiPicker();
}

By default the emoji picker has position floating. You can change it to docked using the enum:

use Wirechat\Wirechat\Panel;
use Wirechat\Wirechat\Support\Enums\EmojiPickerPosition;

public function panel(Panel $panel): Panel
{
    return $panel
          //...
          ->emojiPicker(position:EmojiPickerPosition::Docked);
}

#Web Push Notifications

Wirechat web push notifications keep you connected to conversations via browser notifications, even when the app is not active:

use Wirechat\Wirechat\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
          //...
          ->webPushNotifications();
}

Note: Disable notifications by passing false: ->webPushNotifications(false).

#Messages Queue

High Priority (messages): For real-time broadcasting of messages to users in a conversation.

use Wirechat\Wirechat\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
          //...
          ->messagesQueue('messages');
}

#Events Queue

Default Priority (default): For notifications like updating chat lists or showing unread message counts.

use Wirechat\Wirechat\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
          //...
          ->eventsQueue('default');
}

#Layout

Wirechat uses the default layout wirechat::layouts.app. Override it with a custom layout:

use Wirechat\Wirechat\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
          //...
          ->layout('layouts.app');
}

#Attachments

Enable both file and media attachments:

use Wirechat\Wirechat\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
          //...
          ->attachments();
}

Setting to false disables attachments entirely: ->attachments(false).

#File Attachments

Allow only document uploads (e.g., PDFs, ZIPs, text files):

use Wirechat\Wirechat\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
          //...
          ->fileAttachments();
}

#Media Attachments

Allow only image and video uploads:

use Wirechat\Wirechat\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
          //...
          ->mediaAttachments();
}

#Color theme

Easily update the panel’s primary color so it aligns with your brand colors.

use Wirechat\Wirechat\Panel;
use Wirechat\Wirechat\Support\Color;

public function panel(Panel $panel): Panel
{
return $panel
    // ...
    ->colors([
        'primary' => Color::Blue
    ]);
}

#Heading

Set a custom heading for the chat panel:

use Wirechat\Wirechat\Panel;

public function panel(Panel $panel): Panel
{
   return $panel
      //...
      ->heading('Chats');
}

#Favicon

Customize the chat panel with a favicon that reflects your brand.

use Wirechat\Wirechat\Panel;

public function panel(Panel $panel): Panel
{
   return $panel
      //...
      ->favicon(url:asset('favicon.ico'));
}

#Actions

Wirechat panel actions let you control shortcuts such as creating chats, creating groups, clearing chats, deleting chats, returning home, and deleting messages.

For full action documentation, including icon and icon-attribute configuration, see the Actions page.

use Wirechat\Wirechat\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
        //...
        ->createChatAction()
        ->createGroupAction()
        ->clearChatAction()
        ->deleteChatAction()
        ->redirectToHomeAction(url: '/dashboard')
        ->deleteMessageActions();
}