Webchat:无法在与化身分组相结合的情况下使用Acvity中间件呈现新元素

Question

自从更新到4.14之后，我无法使用activity中间件向webchat添加新的元素。例如，我添加了一些用于键入指示符的代码。一旦我这么做了，我的化身的分组就不再工作了。

没有活动中间件的

1. 和showAvatarInGroup：“发送方”->的正常行为。“阿凡达”每组消息以及timestamp.
2. With活动中间件和showAvatarInGroup只显示一次：“发送方”->类型指示符按预期呈现，时间戳显示(但没有分组)，“阿凡达”根本不显示。带有Acvity中间件和showAvatarInGroup的
3. 和showAvatarInGroup：“group”->类型指示符按预期呈现，并显示阿凡达和时间戳。但没有分组。

Botcode (Node)机器人发送一个事件来请求webchat客户端呈现一个元素。在这种情况下，输入指示符，但也可以是一个新的inputform。

await context.sendActivity({ name: 'typingIndicator', type: 'event' });

webchat代码(React)有一个Acvity中间件，用于在事件发生时立即呈现此类型指示符：

​

import React, { useEffect, useMemo } from 'react';
import ReactWebChat, { createDirectLine } from 'botframework-webchat';
import TypingIndicator from './TypingIndicator';

const WebChat = ({ className, onFetchToken, store, token }) => {
  const directLine = useMemo(() => createDirectLine({ token }), [token]);

  const activityMiddleware = () => next => ({ activity, nextVisibleActivity, ...otherArgs }) => {
    const { name, type } = activity;
    // first remove all existing typing indicators
    let elements = document.getElementsByClassName('typing-indicator');
      for (let i = 0; i < elements.length; i++) {
        elements[i].style.display = 'none'
      }
    // if we reveive a typing event, render a typing Indicator
    if (type === 'event' && name === 'typingIndicator') {
      return () => <TypingIndicator activity={activity} nextVisibleActivity={nextVisibleActivity} />;
    } else {
      return next({ activity, nextVisibleActivity, ...otherArgs });
    }
  }

  const styleOptions = {
    botAvatarInitials: 'Max',
    showAvatarInGroup: 'sender', // group works ok
    botAvatarImage: `${process.env.REACT_APP_AVATAR_URL}`,
  }

  useEffect(() => {
    onFetchToken();
  }, [onFetchToken]);

  return token ? (
    <ReactWebChat className={`${className || ''} web-chat`} directLine={directLine} activityMiddleware={activityMiddleware} store={store} styleOptions={styleOptions}/>
  ) : (
    <div className={`${className || ''} connect-spinner`}>
      <div className="content">
        <div className="icon">
          <span className="ms-Icon ms-Icon--Robot" />
        </div>
        <p>Connecting.</p>
      </div>
    </div>
  );
};
export default WebChat;

​

打字指示器

​

import './TypingIndicator.css';
import React from 'react';

const {
  hooks: { useRenderActivityStatus }
} = window.WebChat;

const TypingIndicator = ({ activity, nextVisibleActivity }) => {
  const renderActivityStatus = useRenderActivityStatus({ activity, nextVisibleActivity });
  return (
    <div>
      <div className="typing-indicator">
        <span></span>
        <span></span>
        <span></span>
      </div>
      {renderActivityStatus()}
    </div>
  );
};
export default TypingIndicator

​

它的造型

​

.typing-indicator {
    background-color: transparent;
    height: 35px;
    width: 60px!important;
    border-radius: 20px;
    padding:10px;
    margin-left: 65px;
}

 .typing-indicator span {
    line-height: 35px;
    display:inline-block;
    vertical-align: middle;
    height: 10px;
    width: 10px;
    margin: 0 1px;
    background-color: #9E9EA1;
    border-radius: 50%!important;
    opacity: 0.4;
    animation: bounce 0.7s linear infinite;
}

.typing-indicator span:nth-child(1)
{
    animation-delay: 0.1s;
}

.typing-indicator span:nth-child(2)
{
    animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3)
{
    animation-delay: 0.1s;
}

@keyframes bounce {
    30% { transform: translateY(-4px); }
    60% { transform: translateY(0px); }
    80% { transform: translateY(4px); }
    100% { transform: translateY(0px); opacity: 0.5;  }
  }

​

"dependencies": {
    "botframework-webchat": "^4.14.0",
    "react": "16.12.0",
    "react-dom": "16.12.0",
    "react-scripts": "^3.4.1",
  },

Answer 1

这个问题是由我把活动从机器人发送到网上聊天的顺序引起的。我过去经常发送：

1. typing-indicator事件
2. 消息event
3. typing-indicator事件
4. 消息事件

活动中间件将看到类型指示符事件，并将默认呈现('void')替换为新呈现(我的类型指示符)。我的假设是，下一个事件(消息)将在没有化身的情况下呈现，因为网络聊天已经被假定为已经呈现了一个化身。

为了绕过这种行为，我的解决方案是

event

• typing-indicator event

• message

1. 消息

从Ux的角度来看，这不是一个好主意，问题也不会发生。