Feat/chatbox improvement

[dangvuthang]

Changelog

• Included new prettier.config.js file for consistent formatting
• Add dayjs to format date
• Fixed VideoChat page cause overflown thus creating a redundant scrollbar
• Style Chat, and ChatItem Component

Current limitation

This will only look nice on medium and large screen size

Testing

Please refer to #64 and see if all improvement is met

[dangvuthang]

Well done 👏. Everything tested great. However, I couldn't find the airplane button you mentioned in #64 . Aside from that, great work 👌

By airplane button, I mean the button with the content of an airplane svg :)). Here is that button

[8bitzz]

@dangvuthang I think the UI is great, however I have experienced some issues:

1. First time I joined room

2. After leaving chat and coming back, I saw the messages appears then disappears after the loading indicator showed up. Then the messages appeared inconsistent between the chat box of instructor & student

[ManPhamQuang]

@dangvuthang yes I know what an airplane bbutton is. However, I could not find it in my screen I suspect that my laptop screen is too small or somehow the button is covered by the bottom navbar.

[dangvuthang]

@ManPhamQuang ok, I just move the button on the same line with the input itself. Hopefully, you can see it now

[dangvuthang]

@8bitzz for the first problem, I was not able to recreate the same state so for now I will just call the method conditionally if the element exists. For the second one, by inconsistent appearing, do you mean the message does not appear on the same side? If so, then I make it so that all the messages sent by the currently logged-in users will have a dark background and appear on the right hand (with a note you beside their name) while other messages will only appear on the left and have a blue background. The message will only take a whole width if the content is too long like in this case. Or would you like all messages to have the same width regardless of their content?

[8bitzz]

@dangvuthang oh, the issue I have mentioned above is not about the UI. I mean the chat message were not loaded on the teacher's side (actually it appeared, and then disappeared after the loading spinner showing up), only student saw the chat message

[dangvuthang]

@8bitzz I think i find the problem. It turns out that when fetching for the messages, the returned value is not consistent, if the last fetch is 0, then there will be no messages to map and the chat will be empty

The problem you encounter maybe because the prior messages value has length > 0, but the last one is zero so it will appear and disappear immediately like you describe If the last value length > 0 then the message will be shown.

The problem lies in these lines (30-32)

I have not read twillo documentation so even though I know about the problem, I was not able to solve it.

[dangvuthang]

There will be a new issue #72 that deal with this problem