feat: New Timestamp component on the MessageToolBar and Support for Displaying it

[dhairyashiil]

Brief Title

Add New Timestamp component on the MessageToolBar and Support for Displaying it

Acceptance Criteria fulfillment

• Create a new chat input component that will create these timestamps in the required format
• Added support for rendering timestamps in various formats like relative time ("5 minutes ago") or full date and time.
• Implemented flexible timestamp formatting options (e.g., short time, full date, long-form date with time).
• Ensured the TimestampElement correctly handles and displays timestamps based on the provided format.

Fixes #987

Video:

aqua.breeze.theme.timestamp.mp4

PR Test Details

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

[dhairyashiil]

Video:

timestamp.component.working.mp4

and

other.themes.mp4

[dhairyashiil]

timestamp.element.mp4

[abirc8010]

Hey @dhairyashiil, it looks like the TimeStamp option is missing in optionConfig in chatInputFormatterToolbar and the corresponding entry in chatToolMap . Please add it, or consider waiting for @Spiral-Memory's feedback on this feature, as this is a big PR.

[dhairyashiil]

Hey @dhairyashiil, it looks like the TimeStamp option is missing in optionConfig in chatInputFormatterToolbar and the corresponding entry in chatToolMap . Please add it, or consider waiting for @Spiral-Memory's feedback on this feature, as this is a big PR.

Hello @abirc8010 , Thank you for letting me know. I have added the timestamp component in optionConfig and chatToolMap just as you mentioned. 🙏

[Spiral-Memory]

What is the use of it ? 🤔

[Spiral-Memory]

We can have support for displaying timestamps, but what is the use of modal which helps you choose timestamps ?

[dhairyashiil]

What is the use of it? 🤔

One major use I can think of is - Timezone Management
People in different time zones might be chatting with each other, and by using timestamps, they can communicate better on topics related to time and date, like planning a meeting or event.

There must be a reason for this, as Rocket Chat is adding it and considering it for a GSoC project.

In Embedded Chat, we primarily include all chat-related features from Rocket Chat, so I thought of adding this here.

[Spiral-Memory]

That's great, for now, let's have the support for timestamps but not the modals.. and let's wait for the gsoc project to complete, afterwards based on the implementation, we can think of implementing that here.

Talking about timestamps, I've a small idea, Can we make every timestamp dynamic, in prop we can define the type of time stamp dev want and everywhere it will be displayed like that, if no prop is defined - Follow the usual rocket chat timestamp display

[dhairyashiil]

That's great, for now, let's have the support for timestamps but not the modals.. and let's wait for the gsoc project to complete, afterwards based on the implementation, we can think of implementing that here.

Talking about timestamps, I've a small idea, Can we make every timestamp dynamic, in prop we can define the type of time stamp dev want and everywhere it will be displayed like that, if no prop is defined - Follow the usual rocket chat timestamp display

Okay, I will keep support for timestamps and the save modal for later. And yes, we can make every timestamp dynamic, but what would be the use of that?

Most people will use the standard timestamps for their respective locations. like only showing time and not date timestamp for messages

And if we implement it, we have to make sure the UI remains consistent and looks good.

[dhairyashiil]

That's great, for now, let's have the support for timestamps but not the modals.. and let's wait for the gsoc project to complete, afterwards based on the implementation, we can think of implementing that here.

Talking about timestamps, I've a small idea, Can we make every timestamp dynamic, in prop we can define the type of time stamp dev want and everywhere it will be displayed like that, if no prop is defined - Follow the usual rocket chat timestamp display

Hello @Spiral-Memory, I have created a separate PR (#990) to add support for displaying timestamp messages. Please consider that PR. I would like to use this PR to showcase the feature to Martin and Sing Li Sir.