自动滚动聊天窗口

Question

我使用bootstrap 4卡制作了一个简单的聊天UI，我需要一种方法来将消息输入固定到底部，并在窗口的高度被已发送和接收的消息填充时自动滚动对话。我试图使用固定位置（底部设置为0）来修复消息输入，但是输入将占用所有窗口宽度，这不是我想要的。同样对于文本消息，我尝试使用jQuery滚动窗口，但是它不起作用，我需要手动滚动窗口。另一个问题是我用来将已发送和已接收的消息添加到DOM的代码，我不想重复该代码，但是我无法想象另一种解决方案来区分传入消息和传出消息。

这是我的代码：

function scrollConversation() {
  $(".list-group").stop()
    .animate({
      scrollTop: $(".list-group")[0].scrollHeight
    }, 1000);
}

function outMessage(message) {
  //var html = '<li class="list-group-item">';
  var html = '<p class="speech-bubble-out float-right">' + message + '</p>';
  //html += '</li>';
  $('.list-group').append(html);
  //return ;
}

function inMessage(message) {
  //var html = '<li class="list-group-item">';
  var html = '<p class="speech-bubble-in float-left">' + message + '</p>';
  //html += '</li>';
  $('.list-group').append(html);
}

body {
  background-color: #f5f5f5;
}

body .speech-bubble-out {
  padding: 1em;
  position: relative;
  background: #dad8da;
  border-radius: .4em;
}

body .speech-bubble-out:after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 0;
  height: 0;
  border: 0.563em solid transparent;
  border-left-color: #dad8da;
  border-right: 0;
  border-bottom: 0;
  margin-top: -0.281em;
  margin-right: -0.562em;
}

body .speech-bubble-in {
  padding: 1em;
  position: relative;
  background: #efe8b8;
  border-radius: .4em;
}

body .speech-bubble-in:after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 0;
  border: 0.563em solid transparent;
  border-right-color: #efe8b8;
  border-left: 0;
  border-bottom: 0;
  margin-top: -0.281em;
  margin-left: -0.562em;
}

<div class="container">
  <div class="row justify-content-center">
    <div class="col-sm-12 col-md-7 col-lg-7 card">
      <div class="card-body">
        <!-- message list -->
        <ul class="list-group"></ul>
        <!-- text input -->
        <div class="input-group">
          <input type="text" class="form-control" name="message" id="">
          <div class="input-group-append">
            <button class="btn btn-outline-secondary" id="sendMessage">Send</buttom>
                  <button class="btn btn-outline-secondary" id="sendAudio">Send Audio</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

任何帮助将不胜感激。