diff --git a/src/interface/obsidian/src/chat_modal.ts b/src/interface/obsidian/src/chat_modal.ts index 0f597e2a..2ee2fa1a 100644 --- a/src/interface/obsidian/src/chat_modal.ts +++ b/src/interface/obsidian/src/chat_modal.ts @@ -17,17 +17,19 @@ export class KhojChatModal extends Modal { this.setting = setting; // Register Modal Keybindings to send user message - this.scope.register([], 'Enter', async () => { - // Get text in chat input elmenet - let input_el = this.contentEl.getElementsByClassName("khoj-chat-input")[0]; + this.scope.register([], 'Enter', async () => { await this.chat() }); + } - // Clear text after extracting message to send - let user_message = input_el.value; - input_el.value = ""; + async chat() { + // Get text in chat input element + let input_el = this.contentEl.getElementsByClassName("khoj-chat-input")[0]; - // Get and render chat response to user message - await this.getChatResponse(user_message); - }); + // Clear text after extracting message to send + let user_message = input_el.value.trim(); + input_el.value = ""; + + // Get and render chat response to user message + await this.getChatResponse(user_message); } async onOpen() { @@ -42,10 +44,19 @@ export class KhojChatModal extends Modal { // Get chat history from Khoj backend let getChatHistorySucessfully = await this.getChatHistory(chatBodyEl); - let placeholderText = getChatHistorySucessfully ? "Chat with Khoj [Hit Enter to send message]" : "Configure Khoj to enable chat"; + let placeholderText = getChatHistorySucessfully ? "Message" : "Configure Khoj to enable chat"; // Add chat input field let inputRow = contentEl.createDiv("khoj-input-row"); + let clearChat = inputRow.createEl("button", { + text: "Clear History", + attr: { + class: "khoj-input-row-button clickable-icon", + }, + }) + clearChat.addEventListener('click', async (_) => { await this.clearConversationHistory() }); + setIcon(clearChat, "trash"); + let chatInput = inputRow.createEl("input", { attr: { type: "text", @@ -61,20 +72,21 @@ export class KhojChatModal extends Modal { text: "Transcribe", attr: { id: "khoj-transcribe", - class: "khoj-transcribe khoj-input-row-button", + class: "khoj-input-row-button clickable-icon ", }, }) transcribe.addEventListener('click', async (_) => { await this.speechToText() }); setIcon(transcribe, "mic"); - let clearChat = inputRow.createEl("button", { - text: "Clear History", + let send = inputRow.createEl("button", { + text: "Send", attr: { - class: "khoj-input-row-button", + id: "khoj-chat-send", + class: "khoj-input-row-button clickable-icon", }, }) - clearChat.addEventListener('click', async (_) => { await this.clearConversationHistory() }); - setIcon(clearChat, "trash"); + send.addEventListener('click', async (_) => { await this.chat() }); + setIcon(send, "arrow-up-circle"); // Scroll to bottom of modal, till the send message input box this.modalEl.scrollTop = this.modalEl.scrollHeight; diff --git a/src/interface/obsidian/styles.css b/src/interface/obsidian/styles.css index 11fc0086..87325d61 100644 --- a/src/interface/obsidian/styles.css +++ b/src/interface/obsidian/styles.css @@ -230,36 +230,30 @@ img { } .khoj-input-row { display: grid; - grid-template-columns: auto 32px 32px; + grid-template-columns: 32px auto 32px 32px; grid-column-gap: 10px; grid-row-gap: 10px; background: var(--background-primary); + margin: 0 0 0 -8px; } #khoj-chat-input.option:hover { box-shadow: 0 0 11px var(--background-modifier-box-shadow); } #khoj-chat-input { font-size: var(--font-ui-medium); - padding: 25px 20px; + padding: 0 0 0 12px; + border-radius: 16px; + height: 32px; } .khoj-input-row-button { - background: var(--background-primary); - border: none; - border-radius: 5px; - padding: 5px; + border-radius: 50%; + padding: 4px; --icon-size: var(--icon-size); - height: auto; - font-size: 14px; - font-weight: 300; - line-height: 1.5em; - cursor: pointer; - transition: background 0.3s ease-in-out; } -.khoj-input-row-button:hover { - background: var(--background-modifier-hover); -} -.khoj-input-row-button:active { - background: var(--background-modifier-active); +#khoj-chat-send .svg-icon { + background: var(--khoj-sun); + border-radius: 50%; + color: #222; } @media (pointer: coarse), (hover: none) {