add scroll functionality v1

src/background.ts

@@ -33,7 +33,7 @@ protocol.registerSchemesAsPrivileged([
 function createWindow() {
   // Create the browser window.
   win = new BrowserWindow({
-    width: 800,
+    width: 650,
     height: 1200,
     webPreferences: {
       // Use pluginOptions.nodeIntegration, leave this alone

src/components/AI/index.vue

@@ -103,14 +103,12 @@ export default defineComponent({
 
     watch(think, async (think, prevThink) => {
       if (think) {
-        console.log("think", think);
         anime({
           targets: gradient,
           cy: "0.7",
         });
         thinkAnimation.play();
       } else {
-        console.log("stop think");
         thinkAnimation.pause();
         // thinkAnimation.reset();
         anime({

src/components/UI/UIDetails/messageRenderer.vue

@@ -1,34 +1,42 @@
 <template>
-<svg
-  version="1.1"
-  xmlns="http://www.w3.org/2000/svg"
-  xmlns:xlink="http://www.w3.org/1999/xlink"
-  viewBox="0 0 350 500"
->
-  <g id="messageRenderer">
-    <g
-      v-for="(item, index) in renderArr"
-      :key="index"
-      :id="index"
-      class="messageList"
-      transform="translate(0, 0)"
-    >
-      <transition
-        appear
-        v-on:before-appear="beforeEnter"
-        v-on:appear="enter"
-        v-on:after-enter="afterEnter"
+  <svg
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    :viewBox="testBox"
+  >
+    <g id="messageRenderer">
+      <g
+        v-for="(item, index) in renderArr"
+        :key="index"
+        :id="index"
+        class="messageList"
+        transform="translate(0, 0)"
       >
-        <MessageItem :item="item" :key="index" />
-      </transition>
+        <transition
+          appear
+          v-on:before-appear="beforeEnter"
+          v-on:appear="enter"
+          v-on:after-enter="afterEnter"
+        >
+          <MessageItem :item="item" :key="index" />
+        </transition>
+      </g>
     </g>
-  </g>
-</svg>
+  </svg>
 </template>
 
 <script lang="ts">
 import useMessageRenderer from "@/composables/messageRenderer/useMessageRenderer";
-import { defineComponent, reactive, ref, inject } from "vue";
+import {
+  defineComponent,
+  reactive,
+  ref,
+  inject,
+  computed,
+  onMounted,
+  render,
+} from "vue";
 import MessageItem from "./messageItem.vue";
 import { Message } from "@/types/message/index";
 import { Mitt } from "@/types/mitt/index";
@@ -37,6 +45,45 @@ export default defineComponent({
   components: { MessageItem },
   setup() {
     const renderArr: Message[] = reactive([]);
+    const scroll = ref(0);
+    let renderer: any;
+    const rendererHeight = ref(0);
+    let topBound: number;
+
+    const clampedScroll = computed(() => {
+      const test = rendererHeight.value;
+      if (test === 0) { return 0; }
+      topBound = -test + 440;
+      return Math.max(topBound, Math.min(scroll.value, 0)) as number;
+    })
+
+    const testBox = computed(() => {
+      if (clampedScroll.value === 0) {
+        scroll.value = 0;
+      } else if (clampedScroll.value === topBound) {
+        scroll.value = topBound;
+      }
+      return `0 ${clampedScroll.value} 350 500`;
+    });
+
+    onMounted(() => {
+      renderer = document.getElementById("messageRenderer");
+    });
+
+    window.addEventListener(
+      "wheel",
+      (e) => {
+        if (renderer) {
+          // get renderer height
+          rendererHeight.value = renderer.getBoundingClientRect().height;
+          // only scroll if renderer height is greater than main window
+          if (rendererHeight.value > 500) {
+            scroll.value += e.deltaY * 0.25;
+          }
+        }
+      },
+      { passive: true }
+    );
 
     // imports mitt Emitter safely
     let emitter: Mitt;
@@ -55,6 +102,7 @@ export default defineComponent({
       beforeEnter,
       enter,
       afterEnter,
+      testBox,
     };
   },
 });