RocketChat / EmbeddedChat

An easy to use full-stack component (ReactJS) embedding Rocket.Chat into your webapp

https://www.npmjs.com/package/@embeddedchat/react

107 stars 214 forks source link

fix: Chat input bugs and refactor it #589

Closed Spiral-Memory closed 3 weeks ago

Spiral-Memory commented 3 weeks ago

Brief Title: Fix Chat Input Bugs and Refactor This Component

Acceptance Criteria Fulfillment

[x] Fixed MemberList and CommandList stylings.
[x] Added auto-scroll functionality to MentionList and CommandList menus.
[x] Added keyboard control in CommandList menu.
[x] Implemented word break in the input component when text exceeds the limit.
[x] Added scroll functionality in the input.
[x] Fixed Ctrl+B and Ctrl+I usage and toggling and tried reusing the existing functionality
[x] Refactored code into separate functions and components based on their concerns.

Fixes #588

Video/Screenshots

Before: (Issues mentioned descriptively in issue page)

https://github.com/RocketChat/EmbeddedChat/assets/78961432/580e17e0-2efc-479a-8683-d595bb7cdb8b

After:

https://github.com/RocketChat/EmbeddedChat/assets/78961432/9a3a89ed-db08-4f76-8891-9f427bdfc183

Spiral-Memory commented 3 weeks ago

Hey @sidmohanty11, this PR is ready for review. It's not a very big change—just fixed some basic issues mentioned in the issue and the video. Also, tried reordering and making the code a little more readable than before by separating concerns and creating reusable hooks.