Autoscroll to bottom on render, improve scrollbar rendering for messages-list

Author: moxon6

chat_bots.py

@@ -58,6 +58,7 @@ def render():
         message_list = document["messages-list"]
         message_list.clear()
         message_list <= (createLI(message) for message in Messages.messages)
+        message_list.scrollTop = message_list.scrollHeight
 
         if Messages.bot_typing:
             message_list.append(create_bot_typing_message())

styles/main.scss

@@ -1,4 +1,5 @@
 
+@import 'scrollbar.scss';
 @import "messages.scss";
 @import "editor.scss";
 @import "console.scss";

styles/messages.scss

@@ -63,6 +63,11 @@ $dark: #32465a;
       overflow-y: auto;
       overflow-x: hidden;
       margin: 0;
+      scroll-behavior: smooth;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+      @include withScrollbar();
       li {
         margin: 15px 15px 0px 15px;
         width: calc(100% - 25px);

styles/scrollbar.scss

@@ -0,0 +1,16 @@
+@mixin withScrollbar() {
+  &::-webkit-scrollbar
+    {
+      width: 6px;
+      background-color: #F5F5F5;
+      &-track
+      {
+        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+        background-color: #F5F5F5;
+      }
+      &-thumb
+      {
+        background-color: #32465a;
+      }
+    }
+}