botframework - 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>
)
}}

标签： botframeworkchatbot

Answer 1

您需要将ReactWebChat组件包装在 a中，并在 css 中div 设置 the 及其子项的高度和宽度，div以使对话滚动到底部并让输入栏从底部开始。请参阅下文了解您的代码的外观。

React 网络聊天组件

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;
}

截屏

希望这可以帮助！