Override the timestamp format in the webchat

Question

When setting the timestamp format to 'absolute', the webchat with locale set to fr-FR prints the time portion of the timestamp using the 'short' time format of globalizejs library as 8:36 AM. See: https://github.com/globalizejs/globalize/blob/master/doc/api/date/date-formatter.md.

Can I override the time format to display the time in 24-hour notation, i.e. instead of 8:36 AM to print 8h 36?

Web Chat is integrated into a webpage using JavaScript (not React): v. 4.8.1, https://cdn.botframework.com/botframework-webchat/latest/webchat.js

Answer 1

If you are using the non-React version of Web Chat, then, no, there isn't an in-built method for updating or changing the timestamp.

However, you can use Web Chat's store for accessing the activity's timestamp to overwrite the HTML element, as shown below. My example is updating the element with only the time. You will want to add functionality to capture any other bits (date, day, time offsets, etc.).

Also, you will need to account for the in-built auto-updating of the time element by Web Chat. For instance, when a minute has passed following an activity's arrival, the time element changes to "1 minute ago", then to "2 minutes ago", and so on.

You may be able to utilize an event listener that looks for changes to the time element which, when triggered, continues to update the time element to fit your needs.

Please note: There are inherent risks in manipulating the DOM directly. The biggest risk is your bot becomes subject to breaking changes should the Web Chat team decide to update, remove, or otherwise alter some underlying component in the future. I would recommended you consider switching to the React version of Web Chat that, among many other features, allows this change while functioning within Web Chat's space.

Lastly, any refreshing of the page will reset the time elements back to Web Chat defaults (in case you have your bot setup for persistent chat across sessions).

<script>
  ( async function () {

    const store = window.WebChat.createStore( {}, ({dispatch}) => next => action => {
      if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY') {
        const { activity } = action.payload;
        if (activity.type === 'message') {
          console.log('MESSAGE ', activity);
          setTimeout(() => {
            const webChatRow = document.querySelectorAll('.webchat__row');
            const rowLen = webChatRow.length;
            const timeParent = webChatRow[ rowLen - 1 ].children;
            let timeText = timeParent[ 0 ].children[ 1 ].innerText;
            let time = new Date(activity.timestamp);
            let hours = time.getHours();
            let mins = time.getMinutes();
            timeParent[ 0 ].children[ 1 ].innerText = `${hours}:${mins}`
            console.log(timeText)
          }, 300);
        }
      }
      next(action);
    } );

    const res = await fetch( 'http://localhost:3500/directline/token', { method: 'POST' } );
    const { token } = await res.json();

    window.WebChat.renderWebChat(
      {
        directLine: window.WebChat.createDirectLine( {
          token: token
        } ),
        store: store
      },
      document.getElementById( 'webchat' )
    );

    document.querySelector( '#webchat > *' ).focus();
  } )().catch( err => console.error( err ) );
</script>

Hope of help!