From f8f9d066db0622e96d6757b15c708dfc688fe177 Mon Sep 17 00:00:00 2001 From: Debanjum Singh Solanky Date: Tue, 7 May 2024 00:54:01 +0800 Subject: [PATCH] Focus on input field, scroll to latest message on opening chat pane Previously scroll and chat input focus weren't applied as view hadn't been rendered yet --- src/interface/obsidian/src/chat_view.ts | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/src/interface/obsidian/src/chat_view.ts b/src/interface/obsidian/src/chat_view.ts index f9b67f12..9f95a1e0 100644 --- a/src/interface/obsidian/src/chat_view.ts +++ b/src/interface/obsidian/src/chat_view.ts @@ -127,9 +127,15 @@ export class KhojChatView extends ItemView { chatInput.placeholder = placeholderText; chatInput.disabled = !getChatHistorySucessfully; - // Scroll to bottom of modal, till the send message input box - this.scrollChatToBottom(); - chatInput.focus(); + // Scroll to bottom of chat messages and focus on chat input field, once messages rendered + requestAnimationFrame(() => { + // Ensure layout and paint have occurred + requestAnimationFrame(() => { + this.scrollChatToBottom(); + const chatInput = this.contentEl.getElementsByClassName("khoj-chat-input")[0]; + chatInput?.focus(); + }); + }); } generateReference(messageEl: Element, reference: string, index: number) { @@ -651,7 +657,7 @@ export class KhojChatView extends ItemView { } scrollChatToBottom() { - let sendButton = this.contentEl.getElementsByClassName("khoj-chat-send")[0]; - sendButton.scrollIntoView({ behavior: "auto", block: "center" }); + const chat_body_el = this.contentEl.getElementsByClassName("khoj-chat-body")[0]; + if (!!chat_body_el) chat_body_el.scrollTop = chat_body_el.scrollHeight; } }