覆盖网络聊天中的时间戳格式答案

【问题标题】：Override the timestamp format in the webchat覆盖网络聊天中的时间戳格式
【发布时间】：2020-05-13 12:46:37
【问题描述】：

将时间戳格式设置为“绝对”时，语言环境设置为 fr-FR 的网络聊天使用 globalizejs 库的“短”时间格式打印时间戳的时间部分为上午 8:36。请参阅：https://github.com/globalizejs/globalize/blob/master/doc/api/date/date-formatter.md。

我是否可以覆盖时间格式以以 24 小时制显示时间，即代替上午 8:36 来打印 8h 36？

Web Chat 使用 JavaScript（不是 React）集成到网页中：诉 4.8.1，https://cdn.botframework.com/botframework-webchat/latest/webchat.js

【问题讨论】：

接受/投票支持更大的 Stack Overflow 社区和任何有类似问题的人。如果您觉得我的回答足够，请“接受”并点赞。如果没有，请告诉我我还能提供哪些帮助！

标签： botframework web-chat

【解决方案1】：

如果您使用的是非 React 版本的网络聊天，那么，不，没有用于更新或更改时间戳的内置方法。

但是，您可以使用网络聊天的store 访问活动的时间戳以覆盖 HTML 元素，如下所示。我的示例是仅使用时间更新元素。您将需要添加功能来捕获任何其他位（日期、日期、时间偏移等）。

此外，您还需要考虑网络聊天对时间元素的内置自动更新。例如，当活动到达后经过一分钟时，时间元素将变为“1 分钟前”，然后变为“2 分钟前”，依此类推。

您可以使用一个事件监听器来寻找时间元素的变化，当触发时，它会继续更新时间元素以满足您的需求。

请注意：直接操作 DOM 存在固有风险。最大的风险是，如果网络聊天团队决定在未来更新、删除或以其他方式更改某些底层组件，您的机器人将受到重大更改的影响。我建议您考虑切换到 Web Chat 的 React 版本，除了许多其他功能外，它还允许在 Web Chat 的空间内运行时进行此更改。

最后，页面的任何刷新都会将时间元素重置为网络聊天默认值（以防您将机器人设置为跨会话持续聊天）。

<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>

希望有帮助！

【讨论】：

谢谢史蒂文。我确实出于其他一些原因操作 DOM。因此，尽管我不赞成这样的解决方案，但我也会将其添加到其中。我一直在寻找更好的方法来做到这一点，类似于 overrideLocalizedStrings 方法......顺便说一句。 React 的网络聊天本来是我的选择，但我必须支持 IE 11 :( 也是。

【解决方案2】：

查看Customize activity status 网络聊天示例。它展示了如何使用activityStatusMiddleware 来自定义时间戳。

【讨论】：