Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
wants to merge 3 commits into
base: develop
Choose a base branch
from
Open

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

wants to merge 3 commits into from

Conversation

dhairyashiil
Copy link
Contributor

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
Copy link
Collaborator

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

@dhairyashiil
Copy link
Contributor Author

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
Copy link
Collaborator

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

@dhairyashiil
Copy link
Contributor Author

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
Copy link
Collaborator

Yes

dhairyashiil
dhairyashiil commented Jan 12, 2025
View reviewed changes
packages/react/src/views/ChatInput/ChatInput.js
if (navigator.onLine && messageQueue.length > 0) {
for (let i = 0; i < messageQueue.length; i += 1) {
const pendingMessage = JSON.parse(messageQueue[i]);
const res = await RCInstance.sendMessage(
Copy link
Contributor Author

@dhairyashiil dhairyashiil Jan 12, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Spiral-Memory
I'm getting a lint error for using await inside a loop, and we need this logic to send offline messages in order. Is there a way to resolve this error?

@dhairyashiil
Copy link
Contributor Author

Yes

Okay, I will work on it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

FEAT: draft-saving feature for messages, which automatically sends them when the internet is restored.
2 participants
@dhairyashiil @Spiral-Memory