WebChat 中的 BotFramework v4 在消息后显示机器人的名称和用户名

Question

我已经使用直线和 Microsft 的 sample-webchat. How can I enable the bot's name and the user's name after each message in the chat like this 示例在网络聊天中实现了我的 v4 .NET 机器人？

我已经使用 BotChat.App 和 https://cdn.botframework.com/botframework-webchat/0.11.4/botchat.js 作为脚本让它工作，但我似乎无法像 Microsoft 的示例所使用的那样使用 window.WebChat 来解决它。

这是我的网络聊天代码：

  <!DOCTYPE html>
<html lang="en-US">
  <head>
    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
    <style>
      html, body { height: 100% }
      body { margin: 0 }

      #webchat {
        height: 100%;
        width: 100%;
      }
    </style>
  </head>
  <body>
        <div style="display: flex">
            <div style="position: relative; height: 500px; width: 370px"><div id="webchat" ></div></div>
        </div>
    <script>
      (async function () {

        const res = await fetch('https://directline.botframework.com/v3/directline/tokens/generate', { method: 'POST', headers: { Authorization: 'Bearer my direct line secret' } });
        const { token }  = await res.json();

       const store = window.WebChat.createStore({}, ({ dispatch }) => next => action => {
         if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
           dispatch({
             type: 'WEB_CHAT/SEND_EVENT',
             payload: {
               name: 'webchat/join',
               value: { language: window.navigator.language }
             }
           });
         }
         return next(action);
       });

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

        document.querySelector('#webchat > *').focus();

        BotChat.App({
        botConnection:  botConnection,
        user: { id: '1234', name: 'user'},
        bot: { id: 'botid' },
        chatTitle: "I'm a custom chat title"
        }, document.getElementById("webchat"));


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

Answer 1

不幸的是，开发团队从 Web Chat v4 的时间戳中删除了机器人名称；但是，您可以使用 Web Chat 的一些中间件 - Redux Store 和 Activity 中间件 - 在每个消息集上方添加机器人名称。我整理了一个示例来说明如何执行此操作。基本上，在商店中间件中，我们通过检查记录中的最后一条消息并将 showDisplayName 添加到活动的通道数据来标记哪些活动应显示机器人名称，如果最后一条消息不是来自bot 和 false 否则。然后在 Activity 中间件中，如果 showDisplayName 值为真，我们将机器人名称添加到 div 中的 activity。

网络聊天 v4 - 显示机器人名称示例

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <title>Web Chat: Custom attachment with GitHub Stargazers</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--
      For simplicity and code clarity, we are using Babel and React from unpkg.com.
    -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script src="https://unpkg.com/react@16.5.0/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.5.0/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/react-redux@5.0.7/dist/react-redux.min.js"></script>
    <script src="https://unpkg.com/glamor@2.20.40/umd/index.js"></script>
    <script src="https://unpkg.com/simple-update-in/dist/simple-update-in.production.min.js"></script>
    <!--
      This CDN points to the latest official release of Web Chat. If you need to test against Web Chat's latest bits, please refer to pointing to Web Chat's MyGet feed:
      https://github.com/microsoft/BotFramework-WebChat#how-to-test-with-web-chats-latest-bits
    -->
    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
    <style>
      html, body { height: 100% }
      body { margin: 0 }
      #webchat {
        height: 100%;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="webchat" role="main"></div>
    <script type="text/babel">
      (async function () {
        'use strict';

        const { connectToWebChat, ReactWebChat } = window.WebChat;
        const { css } = window.Glamor;
        const { Fragment } = window.React;
        const { simpleUpdateIn } = window;

        const displayNameStyle = css({ 
          color:'#767676', 
          fontFamily: "Calibri, Helvetica Neue, Arial, sans-serif", 
          fontSize: '80%', 
          paddingBottom: '5px',
          paddingLeft: '10px',
        });

        const activityMiddleware = () => next => card => {
        const { activity: { channelData: { showDisplayName } = {}, from: { name: botName }}} = card;
          return (children) => (
            <Fragment>
              { showDisplayName && <div className={displayNameStyle}>{ botName }</div> }
              { next(card)(children) }
            </Fragment>)
        };
        const store = createStore(
          {},
          ({ getState }) => next => action => {
            if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY') {
              const { activities } = getState();
              const { from: { role: lastRole } = {}} = activities.filter(({ type }) => type === 'message')[activities.length - 1] || {}; 
              const { from: { role: incomingRole }} = action.payload.activity;
              action = simpleUpdateIn(action, ['payload', 'activity', 'channelData', 'showDisplayName'], () => incomingRole === 'bot' && lastRole !== 'bot')
            }
            return next(action)
          }
        );

        // In this demo, we are using Direct Line token from MockBot.
        // To talk to your bot, you should use the token exchanged using your Direct Line secret.
        // You should never put the Direct Line secret in the browser or client app.
        // https://docs.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-direct-line-3-0-authentication
        const res = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' });
        const { token } = await res.json();

        window.ReactDOM.render(
          <ReactWebChat
            activityMiddleware={ activityMiddleware }
            store={store}
            directLine={ window.WebChat.createDirectLine({ token }) }
          />,
          document.getElementById('webchat')
        );
        document.querySelector('#webchat > *').focus();
      })().catch(err => console.error(err));
    </script>
  </body>
</html>

截图

请注意，我放在一起的示例确实涉及网络聊天的更高级主题，因此如果您需要更多说明，我建议您查看 Adding Middleware to Redux Store and the Reaction Buttons 网络聊天示例。

希望对您有所帮助！

WebChat 中的 BotFramework v4 在消息后显示机器人的名称和用户名

BotFramework v4 in WebChat show bot's name and user's name after messages

reactjs

botframework

web-chat