From 885093a7b9d9d3a443d66b2d23326ced3a00c976 Mon Sep 17 00:00:00 2001
From: marlon-erler <viridian035@gmail.com>
Date: Thu, 11 Jul 2024 01:03:07 +0200
Subject: [PATCH] scroll chats to bottom when opening tools

---
 dist/index.js            | 15 +++++++++------
 src/Views/threadView.tsx | 14 ++++++++++----
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/dist/index.js b/dist/index.js
index b9b1b499..5535c79f 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -1111,7 +1111,6 @@
       });
     }
     const itemConverter = (item) => {
-      console.log(item);
       return /* @__PURE__ */ createElement("span", null, item.title);
     };
     return /* @__PURE__ */ createElement("div", { class: "chat-tool-view" }, /* @__PURE__ */ createElement("button", { "on:click": createItem }, "+"), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { "children:append": [chat.items, itemConverter] }));
@@ -1204,13 +1203,17 @@
     );
     const listWrapper = /* @__PURE__ */ createElement("div", { class: "thread-view flex-column gap" }, messageList, outboxList);
     function scrollToBottom() {
-      const scrollFromBottom = listWrapper.scrollHeight - (listWrapper.scrollTop + listWrapper.offsetHeight);
-      if (scrollFromBottom > 400) return;
       listWrapper.scrollTop = listWrapper.scrollHeight;
     }
-    chat.messages.handleAddition(scrollToBottom);
-    chat.outbox.handleAddition(scrollToBottom);
-    setTimeout(() => listWrapper.scrollTop = listWrapper.scrollHeight, 50);
+    function scrollToBottomIfAppropriate() {
+      const scrollFromBottom = listWrapper.scrollHeight - (listWrapper.scrollTop + listWrapper.offsetHeight);
+      if (scrollFromBottom > 400) return;
+      scrollToBottom();
+    }
+    chat.messages.handleAddition(scrollToBottomIfAppropriate);
+    chat.outbox.handleAddition(scrollToBottomIfAppropriate);
+    isShowingChatTools.subscribe(() => scrollToBottom());
+    setTimeout(() => scrollToBottom(), 50);
     return listWrapper;
   }
 
diff --git a/src/Views/threadView.tsx b/src/Views/threadView.tsx
index 7fe989a3..72bb5ca1 100644
--- a/src/Views/threadView.tsx
+++ b/src/Views/threadView.tsx
@@ -2,6 +2,7 @@ import * as React from "bloatless-react";
 
 import { Chat, ChatMessage } from "../Model/chatModel";
 
+import { isShowingChatTools } from "../Model/model";
 import { translation } from "../translations";
 
 export function ThreadView(chat: Chat) {
@@ -123,17 +124,22 @@ export function ThreadView(chat: Chat) {
   );
 
   function scrollToBottom() {
+    listWrapper.scrollTop = listWrapper.scrollHeight;
+  }
+
+  function scrollToBottomIfAppropriate() {
     const scrollFromBottom =
       listWrapper.scrollHeight -
       (listWrapper.scrollTop + listWrapper.offsetHeight);
     if (scrollFromBottom > 400) return;
 
-    listWrapper.scrollTop = listWrapper.scrollHeight;
+    scrollToBottom();
   }
 
-  chat.messages.handleAddition(scrollToBottom);
-  chat.outbox.handleAddition(scrollToBottom);
-  setTimeout(() => (listWrapper.scrollTop = listWrapper.scrollHeight), 50);
+  chat.messages.handleAddition(scrollToBottomIfAppropriate);
+  chat.outbox.handleAddition(scrollToBottomIfAppropriate);
+  isShowingChatTools.subscribe(() => scrollToBottom());
+  setTimeout(() => scrollToBottom(), 50);
 
   return listWrapper;
 }