VDMDI/CT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

scroll chats to bottom when opening tools

Browse Source
This commit is contained in:
marlon-erler
2024-07-11 01:03:07 +02:00
parent d3604d474b
commit 885093a7b9
2 changed files with 19 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/index.js
Vendored
+9 -6
View File
@@ -1111,7 +1111,6 @@
}); });
} }
const itemConverter = (item) => { const itemConverter = (item) => {
console.log(item);
return /* @__PURE__ */ createElement("span", null, item.title); 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] })); 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); const listWrapper = /* @__PURE__ */ createElement("div", { class: "thread-view flex-column gap" }, messageList, outboxList);
function scrollToBottom() { function scrollToBottom() {
const scrollFromBottom = listWrapper.scrollHeight - (listWrapper.scrollTop + listWrapper.offsetHeight);
if (scrollFromBottom > 400) return;
listWrapper.scrollTop = listWrapper.scrollHeight; listWrapper.scrollTop = listWrapper.scrollHeight;
} }
chat.messages.handleAddition(scrollToBottom); function scrollToBottomIfAppropriate() {
chat.outbox.handleAddition(scrollToBottom); const scrollFromBottom = listWrapper.scrollHeight - (listWrapper.scrollTop + listWrapper.offsetHeight);
setTimeout(() => listWrapper.scrollTop = listWrapper.scrollHeight, 50); if (scrollFromBottom > 400) return;
scrollToBottom();
}
chat.messages.handleAddition(scrollToBottomIfAppropriate);
chat.outbox.handleAddition(scrollToBottomIfAppropriate);
isShowingChatTools.subscribe(() => scrollToBottom());
setTimeout(() => scrollToBottom(), 50);
return listWrapper; return listWrapper;
} }
src/Views/threadView.tsx
+10 -4
View File
@@ -2,6 +2,7 @@ import * as React from "bloatless-react";
import { Chat, ChatMessage } from "../Model/chatModel"; import { Chat, ChatMessage } from "../Model/chatModel";
import { isShowingChatTools } from "../Model/model";
import { translation } from "../translations"; import { translation } from "../translations";
export function ThreadView(chat: Chat) { export function ThreadView(chat: Chat) {
@@ -123,17 +124,22 @@ export function ThreadView(chat: Chat) {
); );
function scrollToBottom() { function scrollToBottom() {
listWrapper.scrollTop = listWrapper.scrollHeight;
}
function scrollToBottomIfAppropriate() {
const scrollFromBottom = const scrollFromBottom =
listWrapper.scrollHeight - listWrapper.scrollHeight -
(listWrapper.scrollTop + listWrapper.offsetHeight); (listWrapper.scrollTop + listWrapper.offsetHeight);
if (scrollFromBottom > 400) return; if (scrollFromBottom > 400) return;
listWrapper.scrollTop = listWrapper.scrollHeight; scrollToBottom();
} }
chat.messages.handleAddition(scrollToBottom); chat.messages.handleAddition(scrollToBottomIfAppropriate);
chat.outbox.handleAddition(scrollToBottom); chat.outbox.handleAddition(scrollToBottomIfAppropriate);
setTimeout(() => (listWrapper.scrollTop = listWrapper.scrollHeight), 50); isShowingChatTools.subscribe(() => scrollToBottom());
setTimeout(() => scrollToBottom(), 50);
return listWrapper; return listWrapper;
} }