Enhanced chat interface UI

[Asymtode712]

Related Issue

Fixes #182

Description

• Updated MessageTemplate and ChatPage component for enhancing the overall user experience.
• Added message container so that the overall look becomes more attractive and streamline interactions.
• Added hovering effects to the bottom buttons.

Type of PR

• Bug fix
• Feature enhancement
• Documentation update
• Other (specify): _______________

Video

ChatApp.-.Personal.-.Microsoft.Edge.2024-06-08.17-49-11_Trim.mp4

Checklist:

• I have performed a self-review of my code
• I have read and followed the Contribution Guidelines.
• I have tested the changes thoroughly before submitting this pull request.
• I have provided relevant issue numbers, screenshots, and videos after making the changes.
• I have commented my code, particularly in hard-to-understand areas.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
react-chat	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 8, 2024 0:31am

[Asymtode712]

@anshulsoni4 please review and merge this PR

Also, add the revelant labels and assign me this PR

Thank you!

[anshulsoni4]

LGMT

[urstrulynishkarsh]

@anshulsoni4 i think there are some mistakes in this code
at least you have you run in local host

[anshulsoni4]

@anshulsoni4 i think there are some mistakes in this code at least you have you run in local host

looks fine to me