Relative time is not correct

[mirkus90]

Screenshots

Labels are in Italian.
"Oggi" => "today"

All the messages, both from the user and the bot, have timestamp around 2th February 3:30 PM, whereas the screenshot was done at around 3th February 11:15 AM.

Version

Custom ReactJS webchat, created using the "botframework-webchat" 4.8.0 npm package

Describe the bug

Activities related to "yesterday" are marked as "today". For example, with current timestamp "3th February 11:15 AM", an activity with timestamp "2th February 3:30 PM" is showed as "today" in the webchat.
The reason is that in the "useRelativeTimeFormatter.js" file the logic is done with delta time within 24 hours, regardless the current day.

Steps to reproduce

1. Go to the webchat
2. Generate some activities
3. Wait until the day after
4. See the incorrect behavior

Expected behavior

When the activity is related to the day before the current day, it should be shown as "yesterday".

[Bug]

[mirkus90]

@corinagum @compulim added for information, as marked like contributors on the "useRelativeTimeFormatter.js" file

[corinagum]

To my knowledge this is standard behavior for timestamp diffs. Do you have an example of this not being the case in other apps? If so that will help us discuss with the design team moving forward.

[mirkon90]

@corinagum for example, in Whatsapp all the messages related to the day before, even if they have been sent less than 24 hours, are marked in the section "Yesterday". Usually, I guess this is the common behaviour when referring to the day before.

[corinagum]

I'm adding this to our front-burner for consideration for our next release.

[compulim]

Note for @corinagum, inside useRelativeTimeFormatter.js:

const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())

// Around 5 hours
if (today > new Date(activity.timestamp)) {
  // It is yesterday
  return localize('ACTIVITY_STATUS_TIMESTAMP_YESTERDAY');
}

[cappe89]

I have the same issue. The problem is for messages between 24 and 25 hours ago (the same for 48 and 49).

A simple solution could be convert <= to < at lines 40 and 42

if (deltaInHours < 24) { return localize('ACTIVITY_STATUS_TIMESTAMP_TODAY'); } else if (deltaInHours < 48) { return localize('ACTIVITY_STATUS_TIMESTAMP_YESTERDAY'); }