From 8273bf26b78dfacd7accf04f9367579cf6e16d45 Mon Sep 17 00:00:00 2001
From: Debanjum Singh Solanky <debanjum@gmail.com>
Date: Sat, 4 Nov 2023 01:09:35 -0700
Subject: [PATCH] Fix multi-line chat input and output render on web, desktop
 clients

- Remove spurious whitespace in chat input box on page load being
  added because text area element was ending on newline
- Do not insert newline in message when send message by hitting enter key
  This would be more evident when send message with cursor in the
  middle of the sentence, as a newline would be inserted at the cursor
  point
- Remove chat message separator tokens from model output. Model
  sometimes starts to output text in it's chat format
---
 src/interface/desktop/chat.html  | 6 ++++--
 src/khoj/interface/web/chat.html | 6 ++++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/interface/desktop/chat.html b/src/interface/desktop/chat.html
index 11f6f17d..b27bbc90 100644
--- a/src/interface/desktop/chat.html
+++ b/src/interface/desktop/chat.html
@@ -68,6 +68,8 @@
             // Replace any ** with <b> and __ with <u>
             newHTML = newHTML.replace(/\*\*([\s\S]*?)\*\*/g, '<b>$1</b>');
             newHTML = newHTML.replace(/__([\s\S]*?)__/g, '<u>$1</u>');
+            // Remove any text between <s>[INST] and </s> tags. These are spurious instructions for the AI chat model.
+            newHTML = newHTML.replace(/<s>\[INST\].+(<\/s>)?/g, '');
             return newHTML;
         }
 
@@ -168,6 +170,7 @@
 
         function incrementalChat(event) {
             if (!event.shiftKey && event.key === 'Enter') {
+                event.preventDefault();
                 chat();
             }
         }
@@ -291,8 +294,7 @@
         <!-- Chat Footer -->
         <div id="chat-footer">
             <div id="chat-tooltip" style="display: none;"></div>
-            <textarea id="chat-input" class="option" oninput="onChatInput()" onkeyup=incrementalChat(event) autofocus="autofocus" placeholder="Type / to see a list of commands, or just type your questions and hit enter.">
-            </textarea>
+            <textarea id="chat-input" class="option" oninput="onChatInput()" onkeydown=incrementalChat(event) autofocus="autofocus" placeholder="Type / to see a list of commands, or just type your questions and hit enter."></textarea>
         </div>
     </body>
 
diff --git a/src/khoj/interface/web/chat.html b/src/khoj/interface/web/chat.html
index 13ba9875..30304caf 100644
--- a/src/khoj/interface/web/chat.html
+++ b/src/khoj/interface/web/chat.html
@@ -67,6 +67,8 @@
             // Replace any ** with <b> and __ with <u>
             newHTML = newHTML.replace(/\*\*([\s\S]*?)\*\*/g, '<b>$1</b>');
             newHTML = newHTML.replace(/__([\s\S]*?)__/g, '<u>$1</u>');
+            // Remove any text between <s>[INST] and </s> tags. These are spurious instructions for the AI chat model.
+            newHTML = newHTML.replace(/<s>\[INST\].+(<\/s>)?/g, '');
             return newHTML;
         }
 
@@ -163,6 +165,7 @@
 
         function incrementalChat(event) {
             if (!event.shiftKey && event.key === 'Enter') {
+                e.preventDefault();
                 chat();
             }
         }
@@ -281,8 +284,7 @@
         <!-- Chat Footer -->
         <div id="chat-footer">
             <div id="chat-tooltip" style="display: none;"></div>
-            <textarea id="chat-input" class="option" oninput="onChatInput()" onkeyup=incrementalChat(event) autofocus="autofocus" placeholder="Type / to see a list of commands, or just type your questions and hit enter.">
-            </textarea>
+            <textarea id="chat-input" class="option" oninput="onChatInput()" onkeydown=incrementalChat(event) autofocus="autofocus" placeholder="Type / to see a list of commands, or just type your questions and hit enter."></textarea>
         </div>
     </body>