From 26bddcb65c46122c90d8968b306e5ff5781236ac Mon Sep 17 00:00:00 2001
From: Ellen7ions <lzz765177255@gmail.com>
Date: Tue, 8 Aug 2023 10:49:07 +0800
Subject: [PATCH] Add support for starting a new line with shift-enter (#412)

* Add support for starting a new line with shift-enter
* Remove useless comments. Set font-size: medium.
* Update src/khoj/interface/web/chat.html
Update the styling to have the padding, margin and line-height like before.
Co-authored-by: Debanjum <debanjum@gmail.com>
* Update src/khoj/interface/web/chat.html
Make the chat-body scroll to the bottom after resizing
Co-authored-by: Debanjum <debanjum@gmail.com>
---------
Co-authored-by: Debanjum <debanjum@gmail.com>
---
 src/khoj/interface/web/chat.html | 26 +++++++++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/khoj/interface/web/chat.html b/src/khoj/interface/web/chat.html
index f8fd2a60..44bfdaeb 100644
--- a/src/khoj/interface/web/chat.html
+++ b/src/khoj/interface/web/chat.html
@@ -61,6 +61,7 @@
             // Add message by user to chat body
             renderMessage(query, "you");
             document.getElementById("chat-input").value = "";
+            autoResize();
             document.getElementById("chat-input").setAttribute("disabled", "disabled");
 
             // Generate backend API URL to execute query
@@ -128,12 +129,21 @@
         }
 
         function incrementalChat(event) {
-            // Send chat message on 'Enter'
-            if (event.key === 'Enter') {
+            if (!event.shiftKey && event.key === 'Enter') {
                 chat();
             }
         }
 
+        function autoResize() {
+            const textarea = document.getElementById('chat-input');
+            const scrollTop = textarea.scrollTop;
+            textarea.style.height = '0';
+            const scrollHeight = textarea.scrollHeight;
+            textarea.style.height = Math.min(scrollHeight, 200) + 'px';
+            textarea.scrollTop = scrollTop;
+            document.getElementById("chat-body").scrollTop = document.getElementById("chat-body").scrollHeight;
+        }
+
         window.onload = function () {
             fetch('/api/chat/history?client=web')
                 .then(response => response.json())
@@ -207,7 +217,7 @@
 
         <!-- Chat Footer -->
         <div id="chat-footer">
-            <input type="text" id="chat-input" class="option" onkeyup=incrementalChat(event) autofocus="autofocus" placeholder="What is the meaning of life?">
+            <textarea id="chat-input" class="option" oninput="autoResize()" onkeyup=incrementalChat(event) autofocus="autofocus" placeholder="What is the meaning of life?"></textarea>
         </div>
     </body>
 
@@ -255,6 +265,7 @@
         .chat-message.you {
             margin-right: auto;
             text-align: right;
+            white-space: pre-line;
         }
         /* basic style chat message text */
         .chat-message-text {
@@ -335,7 +346,16 @@
             box-shadow: 0 0 11px #aaa;
         }
         #chat-input {
+            font-family: roboto, karma, segoe ui, sans-serif;
             font-size: medium;
+            height: 54px;
+            resize: none;
+            overflow-y: hidden;
+            max-height: 200px;
+            box-sizing: border-box;
+            padding: 15px;
+            line-height: 1.5em;
+            margin: 0;
         }
 
         a.inline-chat-link {