From 8a488b9e396c6c8007ef79eac8417e4c04c98568 Mon Sep 17 00:00:00 2001
From: Debanjum Singh Solanky <debanjum@gmail.com>
Date: Fri, 19 Jan 2024 20:05:29 +0530
Subject: [PATCH] Fix auto resizing chat input box when transcribed text added

---
 src/interface/desktop/chat.html          | 5 +++--
 src/interface/obsidian/src/chat_modal.ts | 3 ++-
 src/interface/obsidian/styles.css        | 1 +
 src/khoj/interface/web/chat.html         | 3 ++-
 4 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/interface/desktop/chat.html b/src/interface/desktop/chat.html
index ec5de0c7..10034385 100644
--- a/src/interface/desktop/chat.html
+++ b/src/interface/desktop/chat.html
@@ -690,7 +690,7 @@
 
                 fetch(url, { method: 'POST', body: formData, headers})
                     .then(response => response.ok ? response.json() : Promise.reject(response))
-                    .then(data => { chatInput.value += data.text; })
+                    .then(data => { chatInput.value += data.text.trimStart(); autoResize(); })
                     .catch(err => {
                         if (err.status === 501) {
                           flashStatusInChatInput("⛔️ Configure speech-to-text model on server.")
@@ -917,7 +917,8 @@
             grid-template-columns: 32px auto 32px 40px;
             grid-column-gap: 10px;
             grid-row-gap: 10px;
-            background: #f9fafc
+            background: #f9fafc;
+            align-items: center;
         }
         .option:hover {
             box-shadow: 0 0 11px #aaa;
diff --git a/src/interface/obsidian/src/chat_modal.ts b/src/interface/obsidian/src/chat_modal.ts
index 97b08620..ae4159b2 100644
--- a/src/interface/obsidian/src/chat_modal.ts
+++ b/src/interface/obsidian/src/chat_modal.ts
@@ -453,7 +453,8 @@ export class KhojChatModal extends Modal {
             // Parse response from Khoj backend
             if (response.status === 200) {
                 console.log(response);
-                chatInput.value += response.json.text;
+                chatInput.value += response.json.text.trimStart();
+                this.autoResize();
             } else if (response.status === 501) {
                 throw new Error("⛔️ Configure speech-to-text model on server.");
             } else if (response.status === 422) {
diff --git a/src/interface/obsidian/styles.css b/src/interface/obsidian/styles.css
index 4029ecc7..07739a23 100644
--- a/src/interface/obsidian/styles.css
+++ b/src/interface/obsidian/styles.css
@@ -235,6 +235,7 @@ img {
     grid-row-gap: 10px;
     background: var(--background-primary);
     margin: 0 0 0 -8px;
+    align-items: center;
 }
 #khoj-chat-input.option:hover {
     box-shadow: 0 0 11px var(--background-modifier-box-shadow);
diff --git a/src/khoj/interface/web/chat.html b/src/khoj/interface/web/chat.html
index 54dc9692..14fb6057 100644
--- a/src/khoj/interface/web/chat.html
+++ b/src/khoj/interface/web/chat.html
@@ -651,7 +651,7 @@ To get started, just start typing below. You can also type / to see a list of co
 
                 fetch('/api/transcribe?client=web', { method: 'POST', body: formData })
                     .then(response => response.ok ? response.json() : Promise.reject(response))
-                    .then(data => { chatInput.value += data.text; })
+                    .then(data => { chatInput.value += data.text.trimStart(); autoResize(); })
                     .catch(err => {
                         if (err.status === 501) {
                           flashStatusInChatInput("⛔️ Configure speech-to-text model on server.")
@@ -987,6 +987,7 @@ To get started, just start typing below. You can also type / to see a list of co
             grid-column-gap: 10px;
             grid-row-gap: 10px;
             background: var(--background-color);
+            align-items: center;
         }
         .option:hover {
             box-shadow: 0 0 11px #aaa;