From e06a0c6ae018b5867046ff56446445085cb02be7 Mon Sep 17 00:00:00 2001 From: Debanjum Singh Solanky Date: Tue, 6 Feb 2024 02:53:15 +0530 Subject: [PATCH] Scroll to bottom of chat modal on Obsidian across mobile & desktop Put logic into single reused function --- src/interface/obsidian/src/chat_modal.ts | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/src/interface/obsidian/src/chat_modal.ts b/src/interface/obsidian/src/chat_modal.ts index 723ff218..2682fcd3 100644 --- a/src/interface/obsidian/src/chat_modal.ts +++ b/src/interface/obsidian/src/chat_modal.ts @@ -94,7 +94,7 @@ export class KhojChatModal extends Modal { sendImg.addEventListener('click', async (_) => { await this.chat() }); // Scroll to bottom of modal, till the send message input box - this.modalEl.scrollTop = this.modalEl.scrollHeight; + this.scrollChatToBottom(); chatInput.focus(); } @@ -206,7 +206,7 @@ export class KhojChatModal extends Modal { chatMessageEl.style.userSelect = "text"; // Scroll to bottom after inserting chat messages - this.modalEl.scrollTop = this.modalEl.scrollHeight; + this.scrollChatToBottom(); return chatMessageEl } @@ -229,7 +229,7 @@ export class KhojChatModal extends Modal { }) // Scroll to bottom after inserting chat messages - this.modalEl.scrollTop = this.modalEl.scrollHeight; + this.scrollChatToBottom(); return chat_message_el } @@ -240,7 +240,7 @@ export class KhojChatModal extends Modal { // @ts-ignore await MarkdownRenderer.renderMarkdown(this.result, htmlElement, '', null); // Scroll to bottom of modal, till the send message input box - this.modalEl.scrollTop = this.modalEl.scrollHeight; + this.scrollChatToBottom(); } formatDate(date: Date): string { @@ -581,6 +581,11 @@ export class KhojChatModal extends Modal { const scrollHeight = chatInput.scrollHeight + 8; // +8 accounts for padding chatInput.style.height = Math.min(scrollHeight, 200) + 'px'; chatInput.scrollTop = scrollTop; - this.modalEl.scrollTop = this.modalEl.scrollHeight; + this.scrollChatToBottom(); + } + + scrollChatToBottom() { + let sendButton = this.modalEl.getElementsByClassName("khoj-chat-send")[0]; + sendButton.scrollIntoView({ behavior: "auto", block: "center" }); } }