{"id":14985403,"url":"https://github.com/basement-chat/basement-chat","last_synced_at":"2025-05-16T09:06:13.508Z","repository":{"id":169931191,"uuid":"639233209","full_name":"basement-chat/basement-chat","owner":"basement-chat","description":"Real-time chat widget package for your Laravel application with flexible broadcast driver support. Built for Laravel using PHP, TypeScript, Alpine.js, and Tailwind CSS.","archived":false,"fork":false,"pushed_at":"2024-06-04T01:09:18.000Z","size":5725,"stargazers_count":480,"open_issues_count":17,"forks_count":60,"subscribers_count":8,"default_branch":"main","last_synced_at":"2025-05-11T08:09:15.085Z","etag":null,"topics":["ably","alpinejs","chat","composer","laravel","laravel-websockets","library","package","php","pusher","realtime","soketi","tailwindcss","typescript","websocket"],"latest_commit_sha":null,"homepage":"https://packagist.org/packages/basement-chat/basement-chat","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/basement-chat.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-05-11T03:36:04.000Z","updated_at":"2025-05-09T22:26:29.000Z","dependencies_parsed_at":"2024-09-25T00:30:49.181Z","dependency_job_id":null,"html_url":"https://github.com/basement-chat/basement-chat","commit_stats":{"total_commits":346,"total_committers":5,"mean_commits":69.2,"dds":0.6676300578034682,"last_synced_commit":"7e8cc34d067c4fb78c9f2e15ef6f8ef203de86ca"},"previous_names":["basement-chat/basement-chat"],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basement-chat%2Fbasement-chat","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basement-chat%2Fbasement-chat/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basement-chat%2Fbasement-chat/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basement-chat%2Fbasement-chat/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/basement-chat","download_url":"https://codeload.github.com/basement-chat/basement-chat/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254501558,"owners_count":22081528,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ably","alpinejs","chat","composer","laravel","laravel-websockets","library","package","php","pusher","realtime","soketi","tailwindcss","typescript","websocket"],"created_at":"2024-09-24T14:10:54.460Z","updated_at":"2025-05-16T09:06:08.493Z","avatar_url":"https://github.com/basement-chat.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cp\u003e\u003ca href=\"https://github.com/basement-chat/basement-chat\"\u003e\u003cimg src=\"./assets/basement-chat.svg\" alt=\"Basement Chat Logo\" height=\"60\"/\u003e\u003c/a\u003e\u003c/p\u003e\n  \u003ch1\u003eBasement Chat\u003c/h1\u003e\n  \u003cp\u003eAdd a real-time chat widget to your Laravel application.\u003c/p\u003e\n\u003c/div\u003e\n\n[basement-chat.webm](https://github.com/basement-chat/basement-chat/assets/52187958/2f2250ef-5578-412e-b0d7-2bb84c8b3c5a)\n\n\u003cdiv align=\"center\"\u003e\n  \u003cp\u003e\n    \u003ca href=\"https://github.com/basement-chat/basement-chat/actions/workflows/test.yml?query=branch%3Amain\"\u003e\n      \u003cimg alt=\"GitHub Workflow Test Status\" src=\"https://img.shields.io/github/actions/workflow/status/basement-chat/basement-chat/test.yml?label=test\u0026logo=github\u0026style=flat\u0026color=3a82f7\u0026logoColor=white\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://app.codecov.io/gh/basement-chat/basement-chat/\"\u003e\n      \u003cimg alt=\"Code Coverage\" src=\"https://img.shields.io/codecov/c/github/basement-chat/basement-chat?color=white\u0026logo=codecov\u0026style=flat\u0026logoColor=white\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://packagist.org/packages/basement-chat/basement-chat\"\u003e\n      \u003cimg alt=\"Packagist Version\" src=\"https://img.shields.io/packagist/v/basement-chat/basement-chat?color=3a82f7\u0026logo=packagist\u0026style=flat\u0026logoColor=white\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/basement-chat/basement-chat/blob/main/LICENSE.md\"\u003e\n      \u003cimg alt=\"Packagist License\" src=\"https://img.shields.io/packagist/l/basement-chat/basement-chat?color=white\u0026style=flat\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.conventionalcommits.org/\"\u003e\n      \u003cimg alt=\"Semantic Release\" src=\"https://img.shields.io/badge/semantic--release-angular-e10079?logo=semantic-release\u0026color=3a82f7\u0026style=flat\u0026logoColor=white\"\u003e\n    \u003c/a\u003e\n  \u003c/p\u003e\n  \u003cp\u003e\n    \u003cimg alt=\"Built for\" src=\"https://img.shields.io/static/v1?label=built%20for\u0026message=%20\u0026color=white\u0026style=flat\u0026labelColor=white\"\u003e\n    \u003ca href=\"https://github.com/basement-chat/basement-chat/blob/main/composer.json\"\u003e\n      \u003cimg alt=\"Packagist Laravel Version\" src=\"https://img.shields.io/packagist/dependency-v/basement-chat/basement-chat/laravel/framework?logo=laravel\u0026color=3a82f7\u0026style=flat\u0026logoColor=white\"\u003e\n    \u003c/a\u003e\n    \u003cimg alt=\"With\" src=\"https://img.shields.io/static/v1?label=with\u0026message=%20\u0026color=white\u0026style=flat\u0026labelColor=white\"\u003e\n    \u003ca href=\"https://github.com/basement-chat/basement-chat/blob/main/composer.json\"\u003e\n      \u003cimg alt=\"Packagist PHP Version\" src=\"https://img.shields.io/packagist/dependency-v/basement-chat/basement-chat/php?logo=php\u0026color=3a82f7\u0026style=flat\u0026logoColor=white\"\u003e\n    \u003c/a\u003e\n  \u003c/p\u003e\n\u003c/div\u003e\n\n## Table of Contents\n\n- [Introduction](#introduction)\n- [Features](#features)\n- [Demo](#demo)\n- [Installation](#installation)\n- [Configurations](#configurations)\n- [Advanced Customizations](#advanced-customizations)\n- [Extra Notes and Troubleshooting](#extra-notes-and-troubleshooting)\n- [Roadmap](#roadmap)\n- [Contributing](#contributing)\n- [License](#license)\n\n## Introduction\n\nWith this package, you can enhance user engagement, boost collaboration, and facilitate instant communication within your existing Laravel application by providing seamlessly integrated dynamic and interactive real-time chat widget functionality.\n\n\u003cdetails\u003e\n  \u003csummary\u003eTrivia\u003c/summary\u003e\n\nThe Basement name was inspired by Aech's private chat room from [Ready Player One](https://readyplayerone.fandom.com/wiki/Basement).\n\n\u003c/details\u003e\n\n## Features\n\n- Real-time messages\n- User's online status\n- User's typing indicator\n- Messages have been read status\n- Configurable push notifications from the client side\n- Searchable contacts and messages\n- Extendable and customizable actions behavior\n- Lazy loading with infinite scroll messages\n- Intuitive and attractive design using TailwindCSS and Alpine.js\n- Can be used with various CSS frontend frameworks such as Bootstrap and TailwindCSS without worrying about style conflicts\n- Flexible broadcast driver support, [Pusher](https://pusher.com/), [Ably](https://ably.com/), [Soketi](https://docs.soketi.app/), [Laravel Websockets](https://beyondco.de/docs/laravel-websockets/), or any other Laravel supported broadcast driver, it's up to you to decide.\n\n## Demo\n\n[Here is a demo](https://github.com/basement-chat/demo) with scaffolding using Laravel Breeze.\n\n## Installation\n\n### Requirements:\n\n- Server-side: `php ^8.0` and `laravel/framework ^9.0.0 | ^10.0.0` installed in your project.\n- Client-side: `chrome \u003e= 80`, `edge \u003e= 80`, `firefox \u003e= 74`, or equivalent. See details [here](https://browsersl.ist/#q=chrome+%3E%3D+80%2C+edge+%3E%3D+80%2C+firefox+%3E%3D+74%2C+maintained+node+versions).\n\n### Installation steps:\n\n- Open a terminal, and make sure you are in your Laravel project directory.\n- Install this package using the following command:\n  ```\n  composer require basement-chat/basement-chat\n  ```\n- Start integrating Basement Chat with your Laravel application:\n  ```\n  php artisan basement:install\n  ```\n  \u003e The above command will publish the configuration, assets, and migration files to your Laravel application. On the other hand, it will also ask interactive questions for you to run the database migrations and ask you to install which broadcast driver you will use.\n- Selecting a broadcast driver\n\n  Before selecting a broadcast driver, you need to ensure that `BroadcastServiceProvider::class` is enabled by uncommenting it or adding it to your `providers` in `config/app.php`:\n\n  ```diff\n  /*\n   * Application Service Providers...\n   */\n  App\\Providers\\AppServiceProvider::class,\n  App\\Providers\\AuthServiceProvider::class,\n  - // App\\Providers\\BroadcastServiceProvider::class,\n  + App\\Providers\\BroadcastServiceProvider::class,\n  App\\Providers\\EventServiceProvider::class,\n  App\\Providers\\RouteServiceProvider::class,\n  ```\n\n  Then you can select one of the following drivers:\n\n  \u003e If you accidentally missed installing the driver in the previous step, you can install it again using the `php artisan basement:install driver` command.\n\n  - \u003cdetails\u003e\n      \u003csummary\u003e\u003ca href=\"https://pusher.com/\"\u003ePusher\u003c/a\u003e (Click here to expand)\u003c/summary\u003e\n\n    After creating a new channel in the Pusher account, you need to configure Laravel `.env` by providing the relevant configurations:\n\n    ```ini\n    BASEMENT_BROADCAST_DRIVER=pusher\n    BROADCAST_DRIVER=pusher\n    PUSHER_APP_ID=\u003creplace-with-your-pusher-app-id\u003e\n    PUSHER_APP_KEY=\u003creplace-with-your-pusher-key\u003e\n    PUSHER_APP_SECRET=\u003creplace-with-your-pusher-secret\u003e\n    PUSHER_APP_CLUSTER=\u003creplace-with-your-pusher-cluster\u003e\n    ```\n\n    \u003c/details\u003e\n\n  - \u003cdetails\u003e\n      \u003csummary\u003e\u003ca href=\"https://ably.com/\"\u003eAbly\u003c/a\u003e (Click here to expand)\u003c/summary\u003e\n\n    Provide relevant configurations in your `.env` after creating a new app in your Ably account:\n\n    ```ini\n    BASEMENT_BROADCAST_DRIVER=ably\n    BROADCAST_DRIVER=ably\n    ABLY_KEY=\u003creplace-with-your-ably-key\u003e\n    ABLY_PUBLIC_KEY=\u003creplace-with-your-ably-public-key\u003e\n    ```\n\n    \u003c/details\u003e\n\n  - \u003cdetails\u003e\n      \u003csummary\u003e\u003ca href=\"https://docs.soketi.app/\"\u003eSoketi\u003c/a\u003e (Click here to expand)\u003c/summary\u003e\n\n    Configure your `.env` first with the following configuration:\n\n    ```ini\n    BASEMENT_BROADCAST_DRIVER=soketi\n    BROADCAST_DRIVER=pusher\n    PUSHER_APP_ID=app-id\n    PUSHER_APP_KEY=app-key\n    PUSHER_APP_SECRET=app-secret\n    PUSHER_HOST=127.0.0.1\n    PUSHER_PORT=6001\n    PUSHER_SCHEME=http\n    ```\n\n    Then, keep the Soketi server running with the following command when you want to use chat features in your app:\n\n    ```\n    npx soketi start\n    ```\n\n    \u003c/details\u003e\n\n  - \u003cdetails\u003e\n      \u003csummary\u003e\u003ca href=\"https://beyondco.de/docs/laravel-websockets/\"\u003eLaravel Websockets\u003c/a\u003e (Click here to expand)\u003c/summary\u003e\n\n    Similar to Soketi, you need to configure `.env` first with the following configuration:\n\n    ```ini\n    BASEMENT_BROADCAST_DRIVER=laravel-websockets\n    BROADCAST_DRIVER=pusher\n    PUSHER_APP_ID=app-id\n    PUSHER_APP_KEY=app-key\n    PUSHER_APP_SECRET=app-secret\n    PUSHER_HOST=127.0.0.1\n    PUSHER_PORT=6001\n    PUSHER_SCHEME=http\n    ```\n\n    Then, keep the Laravel Websockets server running with the following command when you want to use chat features in your app:\n\n    ```\n    php artisan websockets:serve\n    ```\n\n    \u003c/details\u003e\n\n- Configure your Sanctum Stateful Domains\n\n  Since this package uses [Laravel Sanctum](https://laravel.com/docs/10.x/sanctum) as the primary authentication system, you will need to configure your `.env` to use the equivalent `SANCTUM_STATEFUL_DOMAINS` with the domain you are currently using:\n\n  ```\n  SANCTUM_STATEFUL_DOMAINS=\u003cyour-app-domain\u003e\n  ```\n\n  \u003e Example: `basement.up.railway.app`, `127.0.0.1:8080`\n\n- Implements Basement Chat functionality to your user model\n\n  In your user model (by default uses `app/Models/User.php`), modify it so it implements `BasementChat\\Basement\\Contracts\\User` and uses `BasementChat\\Basement\\Traits\\HasPrivateMessages` trait\n\n  ```diff\n  \u003c?php\n\n  namespace App\\Models;\n\n  + use BasementChat\\Basement\\Contracts\\User as BasementUserContract;\n  + use BasementChat\\Basement\\Traits\\HasPrivateMessages;\n\n  ...\n\n  - class User extends Authenticatable\n  + class User extends Authenticatable implements BasementUserContract\n  {\n  +     use HasPrivateMessages;\n\n        ...\n  }\n  ```\n\n- Loading the Basement Chat component into your views\n\n  To add a chat box component, load it in the `.blade` view file **where the user is already logged in**. For example, if you use Laravel Breeze, the path should be in `resources/views/layouts/app.blade.php`. Then, add the `\u003cx-basement::chat-box /\u003e` line before the closing `\u003c/body\u003e` tag.\n\n  ```diff\n  \u003c!DOCTYPE html\u003e\n  \u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    ...\n  \u003c/head\u003e\n  \u003cbody\u003e\n    ...\n\n  + \u003cx-basement::chat-box /\u003e\n  \u003c/body\u003e\n  \u003c/html\u003e\n  ```\n\n- Choosing how you use frontend assets\n\n  There are two ways to use the frontend assets of this package. You can use one of the following:\n\n  - \u003cdetails\u003e\n      \u003csummary\u003eUse pre-bundled assets via the \u003ccode\u003elink\u003c/code\u003e and \u003ccode\u003escript\u003c/code\u003e tags directly\u003c/summary\u003e\n\n    This is the simplest way to integrate Basement Chat frontend assets with your existing Laravel application. Note that this bundle also sets the following packages to your global `window` object:\n\n    - `window.Alpine`\n    - `window.axios`\n    - `window.Pusher`\n    - `window.Echo`\n\n    In the same file as the previous step that added the chat box component, you need to load the Basement Chat `.css` and `.js` files:\n\n    ```diff\n    \u003c!DOCTYPE html\u003e\n    \u003chtml lang=\"en\"\u003e\n    \u003chead\u003e\n        ...\n\n    +    \u003clink rel=\"stylesheet\" href=\"{{ asset('vendor/basement/basement.bundle.min.css') }}\"\u003e\n    \u003c/head\u003e\n    \u003cbody\u003e\n        ...\n\n       \u003cx-basement::chat-box /\u003e\n    +  \u003cscript src=\"{{ asset('vendor/basement/basement.bundle.min.js') }}\"\u003e\u003c/script\u003e\n    \u003c/body\u003e\n    \u003c/html\u003e\n    ```\n\n    \u003c/details\u003e\n\n  - \u003cdetails\u003e\n      \u003csummary\u003eMore robust approach by importing into a bundle\u003c/summary\u003e\n\n    You can also import the Basement Chat library as a module into your own `.js` file and bundle it yourself.\n\n    - First, make sure you assign the following packages to the global `window` object:\n      - `alpinejs@^3` with `@alpinejs/intersect@^3` plugin as `window.Alpine`\n      - `axios@^1` as `window.axios`\n      - `laravel-echo@^1` as `window.Echo`\n      - `pusher-js@^7` as `window.Pusher`\n        \u003e To automatically install the above dependencies you can use the following command:\n        \u003e\n        \u003e ```\n        \u003e php artisan basement:install frontend_deps\n        \u003e ```\n    - Then, you need to import the following modules:\n      - `vendor/basement-chat/basement-chat/dist/basement.bundle.min.css`\n      - `vendor/basement-chat/basement-chat/dist/basement.plugin.esm` as an Alpine.js plugin\n      - `vendor/basement-chat/basement-chat/dist/basement.echo-options.esm` as a Laravel Echo argument\n        \u003e You can change the `.esm` suffix to `.common` if you are using cjs module instead of esm.\n    - A fully working example inside `resources/js/app.js` would be like the following:\n\n      ```js\n      import '../../vendor/basement-chat/basement-chat/dist/basement.bundle.min.css'\n      import axios from 'axios'\n      import Pusher from 'pusher-js'\n      import Echo from 'laravel-echo'\n      import Alpine from 'alpinejs'\n      import intersect from '@alpinejs/intersect'\n      import echoOptions from '../../vendor/basement-chat/basement-chat/dist/basement.echo-options.esm'\n      import basement from '../../vendor/basement-chat/basement-chat/dist/basement.plugin.esm'\n\n      window.axios = axios\n\n      window.Pusher = Pusher\n      window.Echo = new Echo(echoOptions)\n\n      window.Alpine = Alpine\n      window.Alpine.plugin(intersect)\n      window.Alpine.plugin(basement)\n      window.Alpine.start()\n      ```\n\n    \u003c/details\u003e\n\n## Configurations\n\nThis package publishes a `config/basement.php` configuration file and offers options to configure `broadcaster`, `chat_box_widget_position`, `user_model`, `avatar`, and `middleware`. See this [file](./config/basement.php) for more detailed information on what you can configure.\n\n## Advanced Customizations\n\nOther than configuring through the `config/basement.php` file, you can customize further by changing the class implementation or overriding the default method. Let's explore some of the use cases you can do with this feature:\n\n### Changing the name shown in the contacts\n\nBy default, the Basement Chat package will display the user's full name in your contacts list. If you want to show the last name instead, you can override the `getNameAttribute` as in the following example:\n\n```php\n\u003c?php\n\nnamespace App\\Models;\n\nuse BasementChat\\Basement\\Contracts\\User as BasementUserContract;\nuse BasementChat\\Basement\\Traits\\HasPrivateMessages;\n\nclass User extends Authenticatable implements BasementUserContract\n{\n    use HasPrivateMessages;\n\n    ...\n\n    /**\n     * Get the user's last name instead of the user's full name.\n     */\n    public function getNameAttribute(): string\n    {\n        return str($this-\u003eattributes['name'])-\u003eexplode(' ')-\u003elast();\n    }\n}\n```\n\n### Using custom avatars\n\nLike when you are changing the name shown in the contacts. You can also override the default `getAvatarAttribute` to change your contact's avatar.\n\n```php\n\u003c?php\n\nnamespace App\\Models;\n\nuse BasementChat\\Basement\\Contracts\\User as BasementUserContract;\nuse BasementChat\\Basement\\Traits\\HasPrivateMessages;\n\nclass User extends Authenticatable implements BasementUserContract\n{\n    use HasPrivateMessages;\n\n    ...\n\n    /**\n     * Get the user's avatar url.\n     */\n    public function getAvatarAttribute(): string\n    {\n        return $this-\u003eattributes['image_url'];\n    }\n}\n```\n\n### Providing the chat feature to specific users\n\nInstead of providing the chat feature to all available users, you can also conditionally provide the chat feature to specific users. For example, if you are using [spatie/laravel-permission](https://github.com/spatie/laravel-permission) and want to provide a chat feature only for the `administrator` role:\n\n```php\n// app/Actions/AllContacts.php\n\u003c?php\n\nnamespace App\\Actions;\n\nuse App\\Models\\User;\nuse BasementChat\\Basement\\Actions\\AllContacts as BasementAllContactsAction;\nuse BasementChat\\Basement\\Data\\ContactData;\nuse Illuminate\\Contracts\\Auth\\Authenticatable;\nuse Illuminate\\Database\\Eloquent\\Builder as EloquentBuilder;\nuse Illuminate\\Database\\Eloquent\\Collection as EloquentCollection;\nuse Illuminate\\Support\\Collection;\n\nclass AllContacts extends BasementAllContactsAction\n{\n    /**\n     * Extend and override the default method for getting all contacts.\n     * Only users with the administrator role will appear in the contact list.\n     */\n    public function all(Authenticatable $user): Collection\n    {\n        /** @var EloquentCollection\u003cint,User\u003e $contacts */\n        $contacts = User::addSelectLastPrivateMessageId($user)\n            -\u003eaddSelectUnreadMessages($user)\n            -\u003ewhereHas('roles', function (EloquentBuilder $query): void {\n                $query-\u003ewhere('name', 'administrator');\n            })\n            -\u003eget();\n\n        $contacts-\u003eappend('avatar');\n        $contacts-\u003eload('lastPrivateMessage');\n\n        return $contacts\n            -\u003esortByDesc('lastPrivateMessage.id')\n            -\u003evalues()\n            -\u003emap(fn (Authenticatable $contact): ContactData =\u003e $this-\u003econvertToContactData($contact));\n    }\n}\n```\n\n```php\n// app/Providers/AppServiceProvider.php\n\u003c?php\n\nnamespace App\\Providers;\n\nuse App\\Actions\\AllContacts;\nuse BasementChat\\Basement\\Basement;\nuse Illuminate\\Support\\ServiceProvider;\n\nclass AppServiceProvider extends ServiceProvider\n{\n    ...\n\n    /**\n     * Bootstrap any application services.\n     */\n    public function boot(): void\n    {\n        // Override the default action with your customized AllContacts action.\n        Basement::allContactsUsing(AllContacts::class);\n    }\n}\n```\n\n\u003e The following is a list of functions that you can use to override other actions and models:\n\u003e\n\u003e ```php\n\u003e Basement::useUserModel(User::class);\n\u003e Basement::usePrivateMessageModel(PrivateMessage::class);\n\u003e PrivateMessage::observe(PrivateMessageObserver::class);\n\u003e\n\u003e Basement::allContactsUsing(AllContacts::class);\n\u003e Basement::allPrivateMessagesUsing(AllPrivateMessages::class);\n\u003e Basement::markPrivateMessagesAsReadUsing(MarkPrivatesMessagesAsRead::class);\n\u003e Basement::sendPrivateMessagesUsing(SendPrivateMessage::class);\n\u003e ```\n\n```html\n\u003c!-- resources/views/layouts/app.blade.php --\u003e\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    ...\n  \u003c/head\u003e\n  \u003cbody\u003e\n    ...\n\n    \u003c!-- The chat box component button will only be available if the current user is an administrator --\u003e\n    @role('administrator')\n      \u003cx-basement::chat-box /\u003e\n    @endrole\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Customizing view styles\n\nIt is also possible to customize the view style. For example, you can do the following steps to change the color of the header and icon of a chat box component:\n\n- Publish views with the following command:\n  ```\n  php artisan vendor:publish --tag=basement-views\n  ```\n- Open the `resources/views/vendor/basement/components/organisms/header.blade.php` file, and add the style attribute like the following:\n  ```diff\n  \u003cheader {{ $attributes-\u003emerge([\n    'class' =\u003e 'bm-grid bm-grid-cols-5 bm-border-b bm-border-gray-300 bm-p-3 bm-bg-blue-500 bm-text-white bm-rounded-t-md',\n  + 'style' =\u003e 'background-color: cornflowerblue;',\n  ]) }}\u003e\n    ...\n  \u003c/header\u003e\n  ```\n- Open the `resources/views/vendor/basement/chat-box.blade.php` file, and add text color style:\n\n  ```diff\n  \u003cdiv class=\"basement\"\u003e\n    \u003cdiv ...\u003e\n\n      \u003cbutton\n  +     style=\"color: cornflowerblue\"\n        x-on:click=\"isMinimized = false\"\n        x-bind:class=\"isMinimized === true ? '' : 'bm-hidden'\"\n        x-bind:data-title=\"totalUnreadMessages === 0 ? 'Open chat box' : `There are ${totalUnreadMessages} unread messages`\"\n        class=\"basement-chat-box__open-button bm-w-full bm-h-full bm-rounded-full bm-text-blue-500 bm-border bm-bg-white bm-transition bm-duration-500 hover:bm-text-white hover:bm-bg-blue-500 bm-shadow-lg\"\u003e\n        ...\n      \u003c/button\u003e\n\n      ...\n    \u003c/div\u003e\n  \u003c/div\u003e\n  ```\n\n## Extra Notes and Troubleshooting\n\n### Updating package\n\nWhen you are using pre-bundled assets. Every time after updating this package with `composer update`, you need to keep your assets file up to date using the following command:\n\n```\nphp artisan vendor:publish --tag=basement-assets --force\n```\n\nAlternatively, to run the above command automatically after the `update` command is executed, you can configure `composer.json` by adding it to the `post-update-cmd` scripts:\n\n```diff\n\"scripts\": {\n  \"post-update-cmd\": [\n    \"@php artisan vendor:publish --tag=laravel-assets --ansi --force\",\n+   \"@php artisan vendor:publish --tag=basement-assets --ansi --force\"\n  ]\n},\n```\n\n### Fixing Vite memory leaks\n\nWhen you are using the Vite development server and get very high memory usage, you can configure your `vite.config.js` to ignore watching the vendor folder like the following example:\n\n```diff\nimport { defineConfig } from 'vite'\nimport laravel from 'laravel-vite-plugin'\n\nexport default defineConfig({\n+  server: {\n+    watch: {\n+      ignored: [\n+        './vendor/**',\n+      ],\n+    },\n+  },\n});\n```\n\n### Broadcasting auth error when using route cache\n\nBasement Chat package may fail to start and you may get a 403 Forbidden - HTTP Error when accessing the `broadcasting/auth` endpoint in the browser console when you use the `php artisan route:cache` command. The solution to this problem is still under further investigation, we recommend that you do not use route caching feature at this time.\n\n## Roadmap\n\nPlease visit the [following page](https://github.com/basement-chat/basement-chat/projects) to view the Basement Chat roadmap.\n\n## Contributing\n\nYou can check detailed information about the contributing guide on the [following page](./CONTRIBUTING.md).\n\n## License\n\nThe Basement Chat package is licensed under the [MIT license](./LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbasement-chat%2Fbasement-chat","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbasement-chat%2Fbasement-chat","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbasement-chat%2Fbasement-chat/lists"}