FEAT: Added draft-saving feature for messages, which automatically sends them when the internet is restored.

[dhairyashiil]

Brief Title

Added draft-saving feature for messages, which automatically sends them when the internet is restored.

Acceptance Criteria fulfillment

• Add a draft-saving feature for messages, which automatically sends them when the internet is restored.
• If multiple messages are queued while offline, ensure that all of them are sent in order once the connection is restored, as long as the user remains on that screen.
• There is no need to send the messages if the user closes the tab.
• For the last unsent message that was typed, populate it back into the input box when the user returns to the page.

Also added the following:

• Added validation for the edit message functionality. When editing a message, if the internet is disconnected, a popup will appear saying, "Please try again after connecting to internet!".
• Added the same validation for the send file message functionality. When sending a file, if the internet is disconnected, a popup will appear.
• Added upsert message functionality for audio, video, and file messages, which was previously only available for text messages. This functionality ensures the UI remains consistent across online, offline, and slow internet scenarios.

Fixes #721

Video/Screenshots

1. Demo video: click here

In the above video, I have not shown a demo for the video messages but that too works as expected.

Upsert message functionality for file messages (consistent UI).
(To see the upsert message functionality for audio messages, refer to the demo video above.)

6.upserting.message.mp4

Validation for File Messages.

4.file.message.mp4

Validation for Edit Messages.

5.edit.message.mp4

PR Test Details

Note: The PR will be ready for live testing at https://rocketchat.github.io/EmbeddedChat/pulls/pr-722 after approval. Contributors are requested to replace <pr_number> with the actual PR number.

[Spiral-Memory]

Woah, this looks like a huge PR, i'll need some time to review this
Thanks a lot @dhairyashiil

[dhairyashiil]

Woah, this looks like a huge PR, i'll need some time to review this Thanks a lot @dhairyashiil

No problem! Take your time, and let me know if you need anything. Welcome! :)

[Spiral-Memory]

Hi @dhairyashiil
No need to show toast message for that, maybe follow how whatsapp do it

[dhairyashiil]

Hello @Spiral-Memory, I have removed the toast message logic as you suggested. Currently, if the user is offline, they can still see their messages on the screen due to the upsert message functionality.

Also, WhatsApp shows messages with a circle tick in the bottom-right corner. Do you think I should implement that too?

[Spiral-Memory]

Yes

[dhairyashiil]

Yes

Okay, I will work on it