Build Chat Window

[mqnguyen5]

Is your feature request related to a problem? Please describe.
The "Message" page is where the user can have a conversation with his/her matched partners, either via text or photo.

Thus, we need to implement the following main elements to complete the chat window:

• The buttons containing different functionalities (play ice-breaker game, send photo message, report user, un-match user,...)
• The chat bubble, which will contain the messages sent in either text or photo
• An input element for sending text messages
• Suggested opening line section where users can view and select an opening line

Are there any related issues? Please list all of them.

• User conversation - display message history #72
• Implement logic for sending messages #55
• User conversation - get opening lines #71
• User can unmatch another user #75
• BE: Send photo
• BE: Create a match
• BE: Create a chat room

Describe the solution you'd like

• Buttons are highlighted by blue boxes
• Chat bubbles are highlighted by red boxes

Acceptance criteria

• Sent messages are displayed properly in the chat bubble
• User can type in the input to create the text message
• Buttons are being rendered properly
• All elements are responsive, which mean they should look alright in mobiles phone or tablets (optional)
• User can select an opening line from the suggested list
• User can only see the suggested opening line when the chat window is empty
• Match button (i.e. "heart" button) should redirect user to chat page
• Pagination must be implemented for opening lines (3 lines / page)
• Opening line must be sent on click

Describe alternatives you've considered
N/A

Additional context

• Final SRS: https://seneca.sharepoint.com/:w:/s/PRJ566NAAFall2021-Team04/EUqySSjxSqJLiVd2OyWDEAABJI8vfO567WsHBpPZmSQWCg?e=FJcwSh
• Figma Design: https://www.figma.com/file/D6OdyoGg8cbL1hAScPEsYI/PRJ-Diagrams