تحريك الشريط الجانبي تلقائيا الى الأسفل كما فى المحادثات

السلام عليكم

فى هذا الكود الشريط الجانبي يتحرك لاسفل كلما اضيفت رسالة جديدة

لكن فى الكود هنا يضيف رسالة تتكرر  - كيف يمكن الغاء هذا من الكود ليتم فقط عرض الرسائل القادمة من قاعدة البيانات بدلا من ذلك

انا لا اعرف اي جزء بالتحديد يمكن حذفة او تعديلة لذا ارجو منكم التكرم وتوضيح ذلك

<style>
#messages {
  height: 200px;
  overflow-y: auto;
}
</style>
<div id="messages">
  <div class="message">
    رسالة - مرحبا
  </div>
</div>
<script>
const messages = document.getElementById('messages');

function appendMessage() {
    const message = document.getElementsByClassName('message')[0];
  const newMessage = message.cloneNode(true);
  messages.appendChild(newMessage);
}

function getMessages() {
    // قبل الحصول على رسائلك.
  shouldScroll = messages.scrollTop + messages.clientHeight === messages.scrollHeight;
  /*
   * احصل على رسائلك ، سنقوم بمحاكاتها من خلال إلحاق واحدة جديدة بشكل متزامن.
   */
  appendMessage();
  // بعد استلام رسائلك.
  if (!shouldScroll) {
    scrollToBottom();
  }
}

function scrollToBottom() {
  messages.scrollTop = messages.scrollHeight;
}

scrollToBottom();

setInterval(getMessages, 100);
</script>