add scroll to bottom button

Author: azmy60

src/assets/styles/pages/_chat-interface.scss

@@ -93,6 +93,33 @@
       background-color: var(--btn-hover-bg-color);
     }
   }
+
+  .scroll-down-btn {
+    position: absolute;
+    bottom: 7rem;
+    left: 50%;
+    transform: translateX(-50%);
+    min-width: 0;
+    width: 2rem;
+    height: 2rem;
+    padding: 0;
+    border: 1px solid var(--border-color);
+    border-radius: 9999px;
+    color: var(--text-dark);
+    background-color: var(--query-editor-bg);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:hover {
+      background-color: color-mix(in srgb, var(--theme-base) 10%, var(--query-editor-bg));
+    }
+
+    .material-symbols-outlined {
+      margin-top: 0.2rem;
+      font-size: 1.6rem;
+    }
+  }
 }
 
 .chat-messages {

src/components/ChatInterface.vue

@@ -59,6 +59,14 @@
       </div>
       <div ref="bottomMarker"></div>
     </div>
+    <button
+      v-if="!isAtBottom"
+      @click="scrollToBottom({ smooth: true })"
+      class="btn scroll-down-btn"
+      title="Scroll to bottom"
+    >
+      <span class="material-symbols-outlined">keyboard_arrow_down</span>
+    </button>
     <div class="chat-input-container-container">
       <div class="chat-input-container">
         <BaseInput
@@ -414,12 +422,19 @@ export default {
       }
     },
 
-    scrollToBottom() {
+    scrollToBottom(options?: { smooth?: boolean }) {
       if (!this.$refs.scrollContainerRef) {
         return;
       }
-      this.$refs.scrollContainerRef.scrollTop =
-        this.$refs.scrollContainerRef.scrollHeight;
+      if (options?.smooth) {
+        this.$refs.scrollContainerRef.scrollTo({
+          top: this.$refs.scrollContainerRef.scrollHeight,
+          behavior: 'smooth'
+        });
+      } else {
+        this.$refs.scrollContainerRef.scrollTop =
+          this.$refs.scrollContainerRef.scrollHeight;
+      }
     },
     selectModel(model: Model) {
       this.setInternal("lastUsedModelId", model.id);