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

Question

当将时间戳格式设置为'absolute'时，区域设置为fr-FR的网络聊天使用globalizejs库的'short'时间格式打印时间戳的时间部分为8:36 是。参见：https://github.com/globalizejs/globalize/blob/master/doc/api/date/date-formatter.md.

我可以覆盖时间格式以显示 24 小时制时间，即代替 8:36 AM 打印 8h 36 吗？

使用 JavaScript（不是 React）将网络聊天集成到网页中：第 4.8.1 节，https://cdn.botframework.com/botframework-webchat/latest/webchat.js

Answer 1

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

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

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

您可以使用事件侦听器来查找时间元素的更改，该侦听器在触发时会继续更新时间元素以满足您的需要。

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

中运行时进行此更改

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

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

希望得到帮助！

Answer 2

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

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

Override the timestamp format in the webchat

botframework

web-chat