Frontend: Added a chat box in the game page

[sksmagr23]

Description

Added a collapsible chat box in the gamepage, which contains messagelist, input box, reactions to messages. The necessary files are added in a folder Chatbox in src/library. The folder include files namely 1.types.ts 2.chatbox.tsx 3.Message.tsx 4.MessageInput.tsx 5.MessageList.tsx

The packages emoji picker react and react icons are also installed.

fixes #125

How to Test

• Run "npm run dev" in frontend directory
• navigate to /game
• Click on chat icon at bottom

Related Issues

• 125

Checklist

• [x] I have tested these changes locally.
• [x] I have reviewed the code and ensured it follows the project's coding guidelines.
• [x] I have updated the documentation, if necessary.
• [x] I have assigned reviewers to this pull request.

Screenshots

[vercel[bot]]

@sksmagr23 is attempting to deploy a commit to the Shivansh Bhatanagar's projects Team on Vercel.

A member of the Team first needs to authorize it.

[kuv2707]

So i should clarify the message sending structure. When the Chatbox mounts, it registers a handler in channel.ts for chat events. (similar to how we subscribe to game events, see GameContext) When the user sends a message, we don't immediately append the message to the message array, rather we update the array when the server sends the MESSAGE_SENT event. (For better UX, we should display the message as sent even before the server sends a response, but that will be handled later)

Finally we should store messages in a JS object (or better, the Map class) instead of array, so that we can find them in constant time. so we store (messageid, messageobject) as the key value pair in the object.

[sksmagr23]

@kuv2707 done the review changes, you can have a look if any other change required

[kuv2707]

@sksmagr23 It is a good practice to respond to the feedback (even with a reaction) instead of resolving the conversation yourself

[kuv2707]

You can add some drop shadow to the chat box

[sksmagr23]

Added the drop shadow to chatbox

[sksmagr23]

@kuv2707 done all the reviewed changes and resolved the previous unresolved reviews

The lint errors are coming because I have removed api call in messageinput and event listeners in chatbox.tsx as function created are not used, Once they are implemented further, it will be fixed

[kuv2707]

We can merge it at this point, and address the regressions as a follow-up Thanks for all the work @sksmagr23 !