Scroll to bottom of chat modal on Obsidian across mobile & desktop

Put logic into single reused function
This commit is contained in:
Debanjum Singh Solanky 2024-02-06 02:53:15 +05:30
parent 07dc04f40e
commit e06a0c6ae0

View file

@ -94,7 +94,7 @@ export class KhojChatModal extends Modal {
sendImg.addEventListener('click', async (_) => { await this.chat() }); sendImg.addEventListener('click', async (_) => { await this.chat() });
// Scroll to bottom of modal, till the send message input box // Scroll to bottom of modal, till the send message input box
this.modalEl.scrollTop = this.modalEl.scrollHeight; this.scrollChatToBottom();
chatInput.focus(); chatInput.focus();
} }
@ -206,7 +206,7 @@ export class KhojChatModal extends Modal {
chatMessageEl.style.userSelect = "text"; chatMessageEl.style.userSelect = "text";
// Scroll to bottom after inserting chat messages // Scroll to bottom after inserting chat messages
this.modalEl.scrollTop = this.modalEl.scrollHeight; this.scrollChatToBottom();
return chatMessageEl return chatMessageEl
} }
@ -229,7 +229,7 @@ export class KhojChatModal extends Modal {
}) })
// Scroll to bottom after inserting chat messages // Scroll to bottom after inserting chat messages
this.modalEl.scrollTop = this.modalEl.scrollHeight; this.scrollChatToBottom();
return chat_message_el return chat_message_el
} }
@ -240,7 +240,7 @@ export class KhojChatModal extends Modal {
// @ts-ignore // @ts-ignore
await MarkdownRenderer.renderMarkdown(this.result, htmlElement, '', null); await MarkdownRenderer.renderMarkdown(this.result, htmlElement, '', null);
// Scroll to bottom of modal, till the send message input box // Scroll to bottom of modal, till the send message input box
this.modalEl.scrollTop = this.modalEl.scrollHeight; this.scrollChatToBottom();
} }
formatDate(date: Date): string { formatDate(date: Date): string {
@ -581,6 +581,11 @@ export class KhojChatModal extends Modal {
const scrollHeight = chatInput.scrollHeight + 8; // +8 accounts for padding const scrollHeight = chatInput.scrollHeight + 8; // +8 accounts for padding
chatInput.style.height = Math.min(scrollHeight, 200) + 'px'; chatInput.style.height = Math.min(scrollHeight, 200) + 'px';
chatInput.scrollTop = scrollTop; chatInput.scrollTop = scrollTop;
this.modalEl.scrollTop = this.modalEl.scrollHeight; this.scrollChatToBottom();
}
scrollChatToBottom() {
let sendButton = <HTMLButtonElement>this.modalEl.getElementsByClassName("khoj-chat-send")[0];
sendButton.scrollIntoView({ behavior: "auto", block: "center" });
} }
} }