Question

我已经在Webchat中使用直线和Microsft的sample-webchat实现了v4 .NET机器人。如何在聊天中的每条消息（如this示例）之后启用漫游器的名称和用户的名称？

我已经使用(isnull([Cost], (0)) + ((1) + (isnull([commission], (0)) / (100))))和https://cdn.botframework.com/botframework-webchat/0.11.4/botchat.js作为脚本来运行它，但是我似乎无法像Microsoft的示例一样使用BotChat.App来弄清楚它。

这是我的网聊代码：

window.WebChat

Answer 1

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

网络聊天第4版-显示漫游器名称示例

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

屏幕截图

请注意，我整理的样本确实涉及到Web Chat的更高级主题，因此，如果需要进一步说明，我建议您查看Adding Middleware to Redux Store和Reaction Buttons Web Chat样本。

希望这会有所帮助！

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

1 个答案: