diff --git a/src/interface/obsidian/src/chat_modal.ts b/src/interface/obsidian/src/chat_modal.ts index a8008048..fc6d5a48 100644 --- a/src/interface/obsidian/src/chat_modal.ts +++ b/src/interface/obsidian/src/chat_modal.ts @@ -1,4 +1,4 @@ -import { App, Modal, request } from 'obsidian'; +import { App, Modal, request, setIcon } from 'obsidian'; import { KhojSetting } from 'src/settings'; import fetch from "node-fetch"; @@ -38,7 +38,8 @@ export class KhojChatModal extends Modal { await this.getChatHistory(); // Add chat input field - const chatInput = contentEl.createEl("input", + let inputRow = contentEl.createDiv("khoj-input-row"); + const chatInput = inputRow.createEl("input", { attr: { type: "text", @@ -50,6 +51,15 @@ export class KhojChatModal extends Modal { }) chatInput.addEventListener('change', (event) => { this.result = (event.target).value }); + let clearChat = inputRow.createEl("button", { + text: "Clear History", + attr: { + class: "khoj-input-row-button", + }, + }) + clearChat.addEventListener('click', async (_) => { await this.clearConversationHistory() }); + setIcon(clearChat, "trash"); + // Scroll to bottom of modal, till the send message input box this.modalEl.scrollTop = this.modalEl.scrollHeight; chatInput.focus(); @@ -194,4 +204,35 @@ export class KhojChatModal extends Modal { this.renderIncrementalMessage(responseElement, "Sorry, unable to get response from Khoj backend ❤️‍🩹. Contact developer for help at team@khoj.dev or in Discord") } } + + async clearConversationHistory() { + let chatInput = this.contentEl.getElementsByClassName("khoj-chat-input")[0]; + let originalPlaceholder = chatInput.placeholder; + let chatBody = this.contentEl.getElementsByClassName("khoj-chat-body")[0]; + + let response = await request({ + url: `${this.setting.khojUrl}/api/chat/history?client=web`, + method: "DELETE", + headers: { "Authorization": `Bearer ${this.setting.khojApiKey}` }, + }) + try { + let result = JSON.parse(response); + if (result.status !== "ok") { + // Throw error if conversation history isn't cleared + throw new Error("Failed to clear conversation history"); + } else { + // If conversation history is cleared successfully, clear chat logs from modal + chatBody.innerHTML = ""; + await this.getChatHistory(); + chatInput.placeholder = result.message; + } + } catch (err) { + chatInput.placeholder = "Failed to clear conversation history"; + } finally { + // Reset to original placeholder text after some time + setTimeout(() => { + chatInput.placeholder = originalPlaceholder; + }, 2000); + } + } } diff --git a/src/interface/obsidian/styles.css b/src/interface/obsidian/styles.css index d322804d..95a304f1 100644 --- a/src/interface/obsidian/styles.css +++ b/src/interface/obsidian/styles.css @@ -68,7 +68,7 @@ If your plugin does not need CSS, delete this file. } /* color chat bubble by khoj blue */ .khoj-chat-message-text.khoj { - color: var(--text-on-accent); + color: var(--khoj-chat-dark-grey); background: var(--khoj-chat-primary); margin-left: auto; white-space: pre-line; @@ -110,9 +110,12 @@ If your plugin does not need CSS, delete this file. grid-column-gap: 10px; grid-row-gap: 10px; } -#khoj-chat-footer > * { - padding: 15px; - background: #f9fafc +.khoj-input-row { + display: grid; + grid-template-columns: auto 32px; + grid-column-gap: 10px; + grid-row-gap: 10px; + background: var(--background-primary); } #khoj-chat-input.option:hover { box-shadow: 0 0 11px var(--background-modifier-box-shadow); @@ -121,6 +124,25 @@ If your plugin does not need CSS, delete this file. font-size: var(--font-ui-medium); padding: 25px 20px; } +.khoj-input-row-button { + background: var(--background-primary); + border: none; + border-radius: 5px; + padding: 5px; + --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); +} @media (pointer: coarse), (hover: none) { #khoj-chat-body.abbr[title] {