Improve UI of Chat Box

[Lavcodes]

Is your feature request related to a problem? Please describe.

• On scrolling down, the close button also moves. Ideally only chat component should scroll and close should remain fixed.
• Chat always opens from the first created message. It should start from last read or most recent message.
• Input and emoji picker alignment could be better.
• For a single message component, the name of the user should always be aligned with their profile icon. Currently it always aligns to the left.
• Make chat user specific. Currently every user sees same alignment of chat. In my experience, it is defaulted as last added user's messages in blue colour and from right. Rest all in grey and from left. It would be more intuitive to have the user whose window is opened, from right and in blue rest in grey from left.

Screenshots.
Chat always opens from top

Close button scrolls along with chat component

Alignment of message header and lower input bar

How the chat defaults

when third user arrives

Describe the solution you'd like
Implement the suggestions

Motivation
Please outline the motivation for the proposal.

Are you willing to contribute to this issue? Yes

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

[kothariji]

Hi @Lavcodes, First of all, thank you so much for taking out the time to work on this issue.

Regarding the Last Point ⭐

• ❎ How the chat defaults for all users

  Actually, you are facing this issue because you are using the same browser for all users, but we are saving the user details in local storage. So local storage for all 3 users is the same. So every time a new user joins the room, the local storage gets override with new user details. Therefore you are facing such kind of abnormal behavior. To avoid this I would recommend you to use different browsers or incognito mode.

Rest All points are correct, and for sure you can work on the same.

But, currently, we are on implementing Redux for SyntaxMeets, so there are a lot of changes in the codebase.
So I am keeping this issue on hold for now, and once the code refactoring is done, I'll definitely assign it to you.

And last but not least,
Keep Contributing 🙏🔥

[kothariji]

Hi @Lavcodes, we are good to go with this issue now.
So please confirm with us about the same, so that we can assign this issue to you.

[Lavcodes]

Yes, I would like to work on this issue. Please assign it to me

[kothariji]

Yes, I would like to work on this issue. Please assign it to me

Great @Lavcodes, we are assigning this issue to you. 🔥
Also, the 3rd issue - Input and emoji picker alignment could be better. - is already resolved. So you can work on other points.

[kothariji]

@Lavcodes any updates ?

[Lavcodes]

Hey sorry about the late response will just complete the pr ASAP

[kothariji]

Hey sorry about the late response will just complete the pr ASAP

Yupp No issues 🙌