Microsoft ChatBot自动滚动停止工作

Question

发送或接收消息时，我正在使用Microsoft ChatBot的最新版本，

1. 显示内容不会向下滚动到最新显示内容
2. 输入栏从窗口的顶部开始（而不是从窗口的底部开始，附带图像），不确定这是否是预期的行为。

反应成分

class Layout extends Component {
render() {
return(
  <Aux>
    <main className="Container">
      <ReactWebChat
        botAvatarInitials= 'BOT'
        userAvatarInitials= 'USER'
        directLine={secret} 
        styleSet={styleSet}
      />
    </main>
  </Aux>
)
}}

Answer 1

您需要将ReactWebChat组件包装在div中，并在CSS中设置div及其子元素的高度和宽度，以使对话滚动到底部并入口栏从底部开始。请参见下面的代码外观。

反应网络聊天组件

class Layout extends Component {
render() {
return(
  <Aux>
    <main className="Container">
      <div id="webchat">
          <ReactWebChat
            botAvatarInitials= 'BOT'
            userAvatarInitials= 'USER'
            directLine={secret} 
            styleSet={styleSet}
          />
      </div>
    </main>
  </Aux>
)
}}

CSS

#webchat,
#webchat>* {
  height: 750px;
  width: 400px;
}

屏幕截图

希望这会有所帮助！