Fix: Mention Rendering Issue in File Upload Descriptions

[SinghaAnirban005]

Brief Title

Fix Mention Rendering Issue in File Upload Descriptions

Acceptance Criteria fulfillment

• Ensure that mentions (e.g., @username) in File Upload descriptions render with highlighted styling, matching the styling used in messages.
• Verify that when the current user's username is mentioned in the description, it applies a distinct background color

Fixes #648
Closes #622

Video/Screenshots

After making necessary changes

PR Test Details

Implemented regex on the description's before they render and ensured that list of members appear on typing "@" in the description box

Note: The PR will be ready for live testing at https://rocketchat.github.io/EmbeddedChat/pulls/pr-<pr_number> after approval.

[CLAassistant]

All committers have signed the CLA.

[Spiral-Memory]

Thank you so much for the contribution @SinghaAnirban005

Please run prettier formatter and ensure that your code follows the linting rules.

[devanshkansagra]

@Spiral-Memory can you please approve the changes so that I can test it live

[Spiral-Memory]

Actually, I'm not sure whether we need this. I may need to have a discussion to understand it better.

[devanshkansagra]

okay then when you are available we will disscuss

[devanshkansagra]

Hey @SinghaAnirban005, can you share the video of this implementation so that I can check it visually?

[SinghaAnirban005]

@devanshkansagra

Case when user mentions himself in description of an attachment

EmbeddedChat._.Simple.-.Simple.Storybook.-.Brave.2024-11-05.12-00-19.mp4

Case when user mentions other members in group

EmbeddedChat._.Simple.-.Simple.Storybook.-.Brave.2024-11-05.12-01-21.mp4

[devanshkansagra]

Hey @SinghaAnirban005, it looks good, but one thing to ask, does it displays the user profile when clicked on the mentioned user?

This gets displayed in Rocketchat

[SinghaAnirban005]

@devanshkansagra it does not !!
Should i create a new issue template for that or improvise in the same PR

[Spiral-Memory]

Wait wait @SinghaAnirban005
I'll review and let you know..

[devanshkansagra]

No no, work in this only no need to create new issue

[SinghaAnirban005]

@Spiral-Memory okay !!

[Spiral-Memory]

@SinghaAnirban005,
A suggestion for you: I feel a lot of the code changes are unnecessary in your PRs. You can implement similar features with far fewer changes. Try leveraging React’s capabilities instead of handling so many things manually.

[SinghaAnirban005]

@Spiral-Memory Thank you for your suggestions !! Will definitely refine my approach