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.

#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).

#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'));
}

#Create Chat Action

Make the create create chat button action visible on WireChat UI.

use Wirechat\Wirechat\Panel;

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

#Create Group Action

Show the create create group action.

use Wirechat\Wirechat\Panel;

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

#Redirect To Home Action

Show the create new group action

use Wirechat\Wirechat\Panel;

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

#HomeUrl

Set the redirect url when the home action is clicked

use Wirechat\Wirechat\Panel;

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

#Delete Message Actions

Delete Message actions are enabled by default:

• Delete message for me
• Delete message for everyone

You can disable these actions in the panel.

use Wirechat\Wirechat\Panel;

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