Clear Conversation History from the Obsidian client

- Fix font color for Khoj chat responses in Obsidian. Previous color
  had too low a contrast to be readable

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 = (<HTMLInputElement>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 <a href='https://discord.gg/BDgyabRM6e'>in Discord</a>")
         }
     }
+
+    async clearConversationHistory() {
+        let chatInput = <HTMLInputElement>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);
+        }
+    }
 }

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] {