您可以先呈现用户消息,然后再将其显示在网络聊天中吗?

时间:2019-06-26 18:26:58

标签: botframework web-chat

对于MS Botframework网络聊天,有没有一种方法可以在截取用户消息并将其更改为网络聊天之前对其进行拦截?

1 个答案:

答案 0 :(得分:1)

使用createStore()方法很容易做到这一点。

在页面上的网络聊天脚本中,使用上述方法创建商店。在其中,将action.type与'WEB_CHAT / SEND_MESSAGE'匹配。这将捕获在显示之前通过网络聊天组件传递的所有消息。

请注意,此更改后的文本(或您更改的任何值)就是发送给机器人的内容。 action是根对象。 action.payload有效地代表了活动。在此处可以找到文本值,等等。

if语句中,执行您要进行的任何更改,然后返回action对象。

最后,将store对象包含在renderWebChat组件中。这应该设置您。

在下面的示例中,我将文本添加到文本字段,然后在呈现和显示之前对其进行更改。

<script>
  ( async function () {
    const res = await fetch( 'http://somesite/directline/token', { method: 'POST' } );
    const { token } = await res.json();

    // We are using a customized store to add hooks to connect event
    const store = window.WebChat.createStore( {}, ( { dispatch } ) => next => action => {
      if ( action.type === 'WEB_CHAT/SEND_MESSAGE' ) {
        action.payload.text = action.payload.text + ' (Hello from behind the curtain)'
      }

      return next( action );
    } );

    window.WebChat.renderWebChat( {
      directLine: window.WebChat.createDirectLine( { token } ),
      userID: 'user123',
      username: 'johndoe',
      botAvatarInitials: 'BB',
      userAvatarInitials: 'JD',
      store
    }, document.getElementById( 'webchat' ) );
    document.querySelector( '#webchat > *' ).focus();

  } )().catch( err => console.error( err ) );
</script>

enter image description here

enter image description here

希望有帮助!