Download the PHP package coolsam/nested-comments without Composer

Filament Nested Comments & Emoji Reactions

This package allows you to incorporate comments and replies in your Filament forms, infolists, pages, widgets etc, or even simply in your livewire components. Comment replies can be nested as deep as you want, using the Nested Set data structure. Additionally, the package comes with a Reactions feature to enable your users to react to any of your models (e.g comments or posts) with selected emoji reactions.

Installation

You can install the package via composer:

Run the installation command and follow the prompts:

During the installation, you will be asked if you would like to publish and replace the config file. This is important especially if you are upgrading the package to a newer version in which the config file structure has changed. No worries, if you have customizations in your config file that you would like to keep, your current config file will be backed up to config/nested-comments.php.bak before the new config file is published.

You will also be asked if you would like to re-publish the package's assets. This is also important in case the package's styles and scripts have changed in the new version.

Adjust the configuration file as necessary, then run migrations.

`That's it! You are now ready to add nested comments

Usage: Comments

At the very basic level, this package is simply a Livewire Component that takes in a model record which is commentable. Follow the following steps to prepare your model to be commentable or reactable:

1. Add the HasComments trait to your model

2. If you would like to be able to react to your model directly as well, add the HasReactions trait to your model

3. You can now access the comments and reactions of your model in the following ways

Using the Comments Infolist Entry

Using the Comments Widget inside a Resource Page (e.g EditRecord)

As long as the resource page interacts with the record, the CommentsWidget will resolve the record automatically.

Using the Comments Widget in a custom Filament Page (You have to pass $record manually)

Using the Comments Page Action in a Resource Page (which interacts with $record)

Using the Comments Page Action in a custom Filament Page (You have to pass $record manually)

In this case you will have to pass the record attribute manually.

Using the Comments Table Action

Using the Comments Blade Component ANYWHERE!

This unlocks incredible possibilities. It allows you to render your comments even in your own frontend blade page. All you have to do is simply pass the commentable $record to the blade component

Alternatively, you could use the Livewire component if you prefer.

Mentions

The package uses Filament TipTap Editor which supports mentions. You can mention users in your comments by typing @ followed by the user's name. In the future, the package will support sending notifications to the mentioned users via database notifications if supported. For more on how to customize the mentions, see the Package Customization section below.

Usage: Emoji Reactions

This package also allows you to add emoji reactions to your models. You can use the HasReactions trait to add reactions to any model. The reactions are stored in a separate table, and you can customize the reactions that are available via the configuration file. The Comments model that powers the comments feature described above already uses emoji reactions.

In order to start using reactions for your model, add the HasReactions trait to your model. You can then use the reactions method to get the reactions for the model.

The above trait adds the react() method to your model, allowing you to toggle a reaction for the model. You can also use the reactions method to get the reactions for the model.

You can also use the reactions method to get the reactions for the model.

Other useful methods include

To interact with the methods above with ease within and even outside Filament, this package comes with the following handy components:

Reactions Infolist Entry

Reactions Blade Component

Just include the blade component anywhere in your blade file and pass the model record to it.

In your view:

Reactions Livewire Component

Similar to the blade component, you can use the Livewire component anywhere in your Livewire component and pass the model record to it.

In your view:

The two components can be used anywhere, in resource pages, custom pages, actions, form fields, widgets, livewire components or just plain blade views. Here is a sample screenshot of how the components will be rendered:

Package Customization

You can customize the package by changing most of the default values in the config file after publishing it. Additionally, you can customize how the package interacts with your models by overriding some methods in your commentable model.

Customize how to get the Comment Author's Name

You can customize how to get the comment author's name by overriding the getUserName method in your commentable model. By default, the package uses the name attribute of the user model, but you can change this to any other attribute or method that returns a string.

This name will be displayed in the comment card, and it will also be used to mention the user in the comment text.

Customize the User's Avatar

You can customize the user's avatar by overriding the getUserAvatar method in your commentable model.

By default, the package uses ui-avatars to generate the avatar based on the user's name, but you can change this to any other method that returns a URL to the user's avatar image.

Customize how to get the Mention Items

You can customize how to get the mention items by overriding and changing the getMentionsQuery method in your commentable model. By default, the package gets mention items from all users in your database. For example, if you would only like to mention users who have commented on the current thread, you can do so by changing the method to return only those users. There is a handy method included in the default class to achieve this. Alternatively, you can go wild and mention fruits instead of users! The choice is within your freedom.

Customize the Supported Emoji Reactions

You can customize the supported emoji reactions by changing the reactions array in the config file. Decent defaults are provided, but you can change them to any emojis you prefer.

Testing

Open Source Dependencies

This package uses the following awesome open source packages, among many others under the hood:

• Filament
• Livewire
• Laravel
• AlpineJS
• Laravel NestedSet
• Filament Tiptap Editor

I am grateful for the work that has been put into these packages. They have made it possible to build this package in a short time.

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

• Sam Maosa
• All Contributors

License

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