PHPackages                             missgamerz/flarum-ext-chat - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. missgamerz/flarum-ext-chat

ActiveFlarum-extension[Utility & Helpers](/categories/utility)

missgamerz/flarum-ext-chat
==========================

Realtime Chat for Flarum!

07↓50%JavaScript

Since Feb 28Pushed 2mo agoCompare

[ Source](https://github.com/MissGamerz/flarum-ext-chat)[ Packagist](https://packagist.org/packages/missgamerz/flarum-ext-chat)[ RSS](/packages/missgamerz-flarum-ext-chat/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (1)DependenciesVersions (1)Used By (0)

### How it looks now:

[](#how-it-looks-now)

Dark Mode:
==========

[](#dark-mode)

[![Dark Mode NOW](https://camo.githubusercontent.com/65fb2251dbeb9e469a4340bbd5fbd43be47c3aa0acb35dfd7a60c83bef048413/68747470733a2f2f692e706f7374696d672e63632f52565274576234362f696d6167652e706e67)](https://camo.githubusercontent.com/65fb2251dbeb9e469a4340bbd5fbd43be47c3aa0acb35dfd7a60c83bef048413/68747470733a2f2f692e706f7374696d672e63632f52565274576234362f696d6167652e706e67)

Light Mode:
===========

[](#light-mode)

[![Light Mode NOW](https://camo.githubusercontent.com/5862e9cbf897b4133a608e1ee3955961f0f305ccf9ee91f1e83dbc97d5d0b3c4/68747470733a2f2f692e706f7374696d672e63632f6e723158514362392f696d6167652e706e67)](https://camo.githubusercontent.com/5862e9cbf897b4133a608e1ee3955961f0f305ccf9ee91f1e83dbc97d5d0b3c4/68747470733a2f2f692e706f7374696d672e63632f6e723158514362392f696d6167652e706e67)

Chat Extension Bug Fixes
========================

[](#chat-extension-bug-fixes)

This section here outlines the critical bug fixes applied to resolve the unresponsiveness and element glitching issues in this Flarum chat extension.

Issues Fixed
------------

[](#issues-fixed)

### 1. ScrollHeight Reference Errors

[](#1-scrollheight-reference-errors)

**Problem**: `Cannot read properties of undefined (reading 'scrollHeight')` error in ChatViewport.js **Root Cause**: Missing null checks when accessing DOM elements and their properties **Fix**: Added comprehensive null checking and defensive programming in:

- `pixelsFromBottom()` method
- `getChatWrapper()` method
- `isFastScrollAvailable()` method
- `scrollToBottom()` method
- `loadChat()` method

### 2. Component Lifecycle Errors

[](#2-component-lifecycle-errors)

**Problem**: Multiple `Cannot read properties of undefined (reading 'onbeforeupdate')` errors **Root Cause**: Components being destroyed or not properly initialized during lifecycle transitions **Fix**: Added try-catch blocks and null checks in:

- `wrapperOnBeforeUpdate()` method
- `wrapperOnUpdate()` method
- `wrapperOnRemove()` method
- `checkUnreaded()` method

### 3. Incorrect Class Export

[](#3-incorrect-class-export)

**Problem**: ChatList.js was exporting as `ChatFrame` instead of `ChatList`**Root Cause**: Copy-paste error in class declaration **Fix**: Corrected export to `export default class ChatList extends Component`

### 4. State Management Issues

[](#4-state-management-issues)

**Problem**: Chat state operations failing when components are not properly initialized **Root Cause**: Missing null checks in state management operations **Fix**: Added defensive checks in:

- `onChatChanged()` method with try-catch for redraw operations
- `renderChatMessage()` method with fallback error handling
- Various ChatFrame methods to check for `app.chat` existence

### 5. DOM Element Access Failures

[](#5-dom-element-access-failures)

**Problem**: Attempting to access DOM elements that may not exist **Root Cause**: Timing issues and component lifecycle mismanagement **Fix**: Enhanced all DOM element access with null checks:

- `getChatInput()` method in ViewportState
- `chatMoveProcess()` method in ChatFrame
- Element selection queries throughout

### 6. Duplicate Chat Creation Error (UPDATED)

[](#6-duplicate-chat-creation-error-updated)

**Problem**: `POST https://bunklr.com/api/chats 400 (Bad Request)` when trying to create a chat with a user you've already chatted with, especially when you've left that chat **Root Cause**: Frontend not checking for existing private chats (including ones you've left) before attempting to create new ones **Fix**: Enhanced logic in ChatCreateModal to:

- Check for existing active private chats using `findExistingPMChat()` method
- Check for chats you've left using new `findAnyPMChatIncludingLeft()` method
- Automatically rejoin existing chats when possible
- Provide specific user guidance when rejoining fails
- Added `findAnyPMChatIncludingLeft()` method to ChatState for comprehensive chat searching
- Better error messages differentiate between different failure scenarios

Key Improvements
----------------

[](#key-improvements)

### Defensive Programming

[](#defensive-programming)

- Added null checks before accessing object properties
- Implemented try-catch blocks around critical operations
- Added console warnings for debugging failed operations
- Fallback mechanisms for critical functionality

### Element Validation

[](#element-validation)

- All DOM element access now validates existence before use
- ScrollHeight, scrollTop, and clientHeight checks before calculations
- Proper handling of missing or destroyed elements

### Error Handling

[](#error-handling)

- Graceful degradation when components fail
- Console warnings instead of breaking errors
- Safe fallbacks for UI operations

### Build Compatibility

[](#build-compatibility)

- Fixed Node.js compatibility issues with legacy OpenSSL provider
- Successful build verification with webpack

Testing
-------

[](#testing)

The fixes have been validated through:

1. Code syntax validation during modifications
2. Successful webpack build process
3. Comprehensive error handling implementation

Deployment
----------

[](#deployment)

After applying these fixes:

1. The chat extension should be more stable
2. UI glitches should be significantly reduced
3. Component lifecycle errors should be eliminated
4. Better error recovery and user experience

Recommendations
---------------

[](#recommendations)

1. **Regular Testing**: Test the chat functionality with multiple users to ensure stability
2. **Monitor Console**: Keep an eye on browser console for any remaining warnings
3. **Performance**: Monitor performance with the additional null checks
4. **Future Updates**: Apply similar defensive programming patterns to any new features

Files Modified
--------------

[](#files-modified)

1. `/js/src/forum/components/ChatViewport.js` - Major stability improvements
2. `/js/src/forum/components/ChatList.js` - Fixed class export name
3. `/js/src/forum/components/ChatFrame.js` - Added null checks and element validation
4. `/js/src/forum/states/ChatState.js` - Enhanced error handling and added findExistingPMChat method
5. `/js/src/forum/states/ViewportState.js` - Improved DOM element access
6. `/js/src/forum/components/ChatCreateModal.js` - Added duplicate chat prevention logic

All changes maintain backward compatibility while significantly improving stability and user experience.

### This is the OLD VERSION section and how it used to look. All of the functionalities here have been maintained or upgraded.

[](#this-is-the-old-version-section-and-how-it-used-to-look-all-of-the-functionalities-here-have-been-maintained-or-upgraded)

The new minimalistic design will make communication more pleasant.
[![Image](https://camo.githubusercontent.com/02b4bc26eec8ae6cedbc51be130542e5a13b6b03be438571d149937be3c9f58b/68747470733a2f2f692e6962622e636f2f336d34774356332f6234306631306461363137632e706e67)](https://camo.githubusercontent.com/02b4bc26eec8ae6cedbc51be130542e5a13b6b03be438571d149937be3c9f58b/68747470733a2f2f692e6962622e636f2f336d34774356332f6234306631306461363137632e706e67)[![Image](https://camo.githubusercontent.com/21057b43aedbef1149143ac05a4c15b32a30c60afa0f2dca3a09e415ff7cc0b6/68747470733a2f2f632e726164696b616c2e72752f6331352f323230312f30662f3630306363356661616339322e706e67)](https://camo.githubusercontent.com/21057b43aedbef1149143ac05a4c15b32a30c60afa0f2dca3a09e415ff7cc0b6/68747470733a2f2f632e726164696b616c2e72752f6331352f323230312f30662f3630306363356661616339322e706e67)

### Media content preview

[](#media-content-preview)

Send media content to people to make communication brighter!
[![Image](https://camo.githubusercontent.com/190d731eca1253c5368c1140a2c75275eb8b7e434957ea20412459687e152d67/68747470733a2f2f73756e392d362e757365726170692e636f6d2f656c644246303363355973396474314959542d4469394b70514e5839317351465068464566412f6e394b5470796d413436552e6a7067)](https://camo.githubusercontent.com/190d731eca1253c5368c1140a2c75275eb8b7e434957ea20412459687e152d67/68747470733a2f2f73756e392d362e757365726170692e636f6d2f656c644246303363355973396474314959542d4469394b70514e5839317351465068464566412f6e394b5470796d413436552e6a7067)

### Groups, PMs and channels

[](#groups-pms-and-channels)

You can create your own conversations and channels, add or remove users, change their rights, and customize the appearance of the chat.

[![Image](https://camo.githubusercontent.com/b2c9bcbda6ae38a07a9ef855e5ee5f27548c9c499eb10f5e1c3d4ff13b75980a/68747470733a2f2f73756e392d31332e757365726170692e636f6d2f735a6a47656a5878663070593874424f51506765544757416e72574f594771415238416b43412f4c397a42577677374650512e6a7067)](https://camo.githubusercontent.com/b2c9bcbda6ae38a07a9ef855e5ee5f27548c9c499eb10f5e1c3d4ff13b75980a/68747470733a2f2f73756e392d31332e757365726170692e636f6d2f735a6a47656a5878663070593874424f51506765544757416e72574f594771415238416b43412f4c397a42577677374650512e6a7067)

### Push and sound notifications

[](#push-and-sound-notifications)

Stay up to date with the chat discussion and find out about mentions of you via push notifications.
[![Image](https://camo.githubusercontent.com/0cb1d23adb961854757b3923804607a0e58b004806e724d787cdb0af38ce780e/68747470733a2f2f73756e392d31362e757365726170692e636f6d2f5f4c776d55344774434c38637362715f34343341616c31336e6d7473764d767836496c7665412f5353392d6b5a53364e51492e6a7067)](https://camo.githubusercontent.com/0cb1d23adb961854757b3923804607a0e58b004806e724d787cdb0af38ce780e/68747470733a2f2f73756e392d31362e757365726170692e636f6d2f5f4c776d55344774434c38637362715f34343341616c31336e6d7473764d767836496c7665412f5353392d6b5a53364e51492e6a7067)

Neon Chat
=========

[](#neon-chat)

[![License](https://camo.githubusercontent.com/7013272bd27ece47364536a221edb554cd69683b68a46fc0ee96881174c4214c/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d626c75652e737667)](https://camo.githubusercontent.com/7013272bd27ece47364536a221edb554cd69683b68a46fc0ee96881174c4214c/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d626c75652e737667)[![Latest Release](https://camo.githubusercontent.com/cebe9040848d2fce4905175466458ddd84ff2ff257863e5fc49e098b53d60e24/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f78656c736f6e2f666c6172756d2d6578742d63686174)](https://packagist.org/packages/xelson/flarum-ext-chat)
A [Flarum](http://flarum.org) extension. Adds native realtime chat to your Flarum.

Requires Pusher or [kyrne/websocket](https://extiverse.com/extension/kyrne/websocket)

Installation
============

[](#installation)

Install extension via composer:

```
composer require xelson/flarum-ext-chat

```

For development builds:

```
composer require xelson/flarum-ext-chat:dev-master

```

Make sure that any socket extension is enabled

Updating
========

[](#updating)

Via composer:

```
composer update xelson/flarum-ext-chat
php flarum migrate
php flarum cache:clear

```

For development builds:

```
composer require xelson/flarum-ext-chat:dev-master
php flarum migrate
php flarum cache:clear

```

Roadmap:
========

[](#roadmap)

- Emoji picker
- [FriendsOfFlarum/upload](https://github.com/FriendsOfFlarum/upload) support
- Chat display mode in a separate browser window
- Forum notifications for missed mentions
- Customizing of notification sounds
- Chat messages history. Finding messages by keywords or name

###  Health Score

21

—

LowBetter than 19% of packages

Maintenance57

Moderate activity, may be stable

Popularity4

Limited adoption so far

Community15

Small or concentrated contributor base

Maturity12

Early-stage or recently created project

 Bus Factor2

2 contributors hold 50%+ of commits

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

### Community

Maintainers

![](https://www.gravatar.com/avatar/4cb926f49f30e154f85238f597fdc24bf69cc94f892d04e8a5e9345de46be44f?d=identicon)[MissGamerz](/maintainers/MissGamerz)

---

Top Contributors

[![Xelson](https://avatars.githubusercontent.com/u/43149567?v=4)](https://github.com/Xelson "Xelson (126 commits)")[![askvortsov1](https://avatars.githubusercontent.com/u/38059171?v=4)](https://github.com/askvortsov1 "askvortsov1 (99 commits)")[![gpascualg](https://avatars.githubusercontent.com/u/1239061?v=4)](https://github.com/gpascualg "gpascualg (71 commits)")[![flarum-bot](https://avatars.githubusercontent.com/u/39334649?v=4)](https://github.com/flarum-bot "flarum-bot (23 commits)")[![datlechin](https://avatars.githubusercontent.com/u/56961917?v=4)](https://github.com/datlechin "datlechin (7 commits)")[![littlegolden](https://avatars.githubusercontent.com/u/35162802?v=4)](https://github.com/littlegolden "littlegolden (6 commits)")[![jtojnar](https://avatars.githubusercontent.com/u/705123?v=4)](https://github.com/jtojnar "jtojnar (5 commits)")[![fw27](https://avatars.githubusercontent.com/u/57566916?v=4)](https://github.com/fw27 "fw27 (2 commits)")[![ardacebi](https://avatars.githubusercontent.com/u/17576065?v=4)](https://github.com/ardacebi "ardacebi (1 commits)")[![MissGamerz](https://avatars.githubusercontent.com/u/32730401?v=4)](https://github.com/MissGamerz "MissGamerz (1 commits)")[![psjuan97](https://avatars.githubusercontent.com/u/10296859?v=4)](https://github.com/psjuan97 "psjuan97 (1 commits)")[![rob006](https://avatars.githubusercontent.com/u/5972388?v=4)](https://github.com/rob006 "rob006 (1 commits)")

### Embed Badge

![Health badge](/badges/missgamerz-flarum-ext-chat/health.svg)

```
[![Health](https://phpackages.com/badges/missgamerz-flarum-ext-chat/health.svg)](https://phpackages.com/packages/missgamerz-flarum-ext-chat)
```

###  Alternatives

[runtime/react

ReactPHP runtime

185.3k1](/packages/runtime-react)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)