Added the possibility to show the webchat messages with 24h format

[mirkus90]

Feature Request

When using the "timestampFormat" absolute format, it returns the datetime in the format of "Day Month HH:mm AM/PM".
It could be useful to have another setting which can give the time in 24 hours, when the timestampFormat is set to "absolute", or in general to decide which datetime format to show.

https://github.com/microsoft/BotFramework-WebChat/blob/aaec155732d3968ae69972ea0117cef969588065/packages/component/src/Styles/defaultStyleOptions.js

https://github.com/microsoft/BotFramework-WebChat/blob/0cd6b8d268b710a0194d59b0ad6765bea6b0d236/packages/component/src/Middleware/ActivityStatus/Timestamp.js

https://github.com/microsoft/BotFramework-WebChat/blob/0cd6b8d268b710a0194d59b0ad6765bea6b0d236/packages/component/src/Middleware/ActivityStatus/AbsoluteTime.js

@corinagum @compulim @tdurnford

[corinagum]

This is a good request. @compulim I ~seem to recall complications regarding 24hr time format for localization, but I don't recall details. Could you weigh in?

[compulim]

The problem with this feature is it would significantly increase Web Chat package size by importing another package for formatting timestamp. Not to mention localizing the timestamp is also a big package. We can't justify a increase package size compare to the benefit and usage of this feature.

However, you can do it by customizing the activity status middleware using the following code.

import { Constants } from 'botframework-webchat-core';

const {
  ActivityClientState: { SENT }
} = Constants;

export default function createActivityStatusMiddleware() {
  return () => next => (...args) => {
    const [{ activity, sendState }] = args;

    if (sendState === SENT) {
      // You will need a date time formatter to convert this timestamp from ISO string format to your format, for example, moment.js.
      // Please also consider localizing the timestamp.
      return activity.timestamp;
    }

    return next(...args);
  };
}

renderWebChat({
  ...,
  activityStatusMiddleware: createActivityStatusMiddleware()
}, document.getElementById('webchat'));

There are multiple date time formatter you can choose from, such as moment.js or globalize (which support localization via Unicode CLDR).