feat: chat timestamp

[agazso]

Closes #32

There were several simplifications compared to the original design:

• In the design the timestamps are on the same line if the message is only one line
• The badges indicating the days are floating in the design, I just implemented them as markers between the chat bubbles.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
waku-objects-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 23, 2023 4:43pm

[vojtechsimetka]

So this is definitely an improvement, but it does not play nice with object. We can tackle that separately, just FYI

[agazso]

So this is definitely an improvement, but it does not play nice with object. We can tackle that separately, just FYI

What is the issue? Maybe I can address it in this PR.

[vojtechsimetka]

Yes to few things:

1. Timestamps don't exist on waku object messages

2. In the following screenshot, I've sent the waku object today and then the text. However, the Today only appeared after the waku object and before the normal text. There is around 1 min difference between these two.
   

3. If I scroll all the way to the top, it shows just time and I have no idea when the message was sent (it was sent 2 days ago). So before the first message in the chat we should always have the date.
   

[agazso]

1. Timestamps don't exist on waku object messages

This is an existing issue and I didn't necessarily want to fix in this PR: #347

2. In the following screenshot, I've sent the waku object today and then the text. However, the `Today` only appeared after the waku object and before the normal text. There is around 1 min difference between these two.

This is indeed an issue, and I will fix it.

3. If I scroll all the way to the top, it shows just time and I have no idea when the message was sent (it was sent 2 days ago). So before the first message in the chat we should always have the date.

This is a new feature request and I think it's a good idea and seems easy to add, so I will add it too.

[agazso]

I added a fix that addresses points 2 and 3.

As for the first one, currently all the objects render their own ChatMessage components and that's where the timestamp needs to be passed from the message (also the name and avatar in #347). It would be better if the host app would render the ChatMessage frame with the designed embellishments and the object would just render inside a rectangle. I talked to @david-gauquelin about this and he plans to document it as part of the design system. Then we can refactor the code for the objects to work that way.

[lucille-bellepleure]

Looks really good ❤️

[david-gauquelin]

ok so answering all the different points in the thread here:

• yes I'm defining in the guidelines what belongs to the chat and what belongs to a Waku Object (in chat bubble), but definitely the time stamp belongs to the chat app so it should appear on Waku Object messages in-chat
• the floating day/date (always visible) would be really nice as otherwise I just see the time and it can be confusing/misleading
• the time on one line is a nice to have, having on 2 lines is less space-efficient but doesn't create usability issues
• finally, please use a sans-serif font for the timestamp, the serif font is for the message text only