klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-09 05:39:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add support for starting a new line with shift-enter (#412)

Browse Source 
* 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>
This commit is contained in:
Ellen7ions
2023-08-08 10:49:07 +08:00
committed by GitHub
parent 97609e4995
commit 26bddcb65c
1 changed files with 23 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/khoj/interface/web/chat.html
View File

@@ -61,6 +61,7 @@
// Add message by user to chat body // Add message by user to chat body
renderMessage(query, "you"); renderMessage(query, "you");
document.getElementById("chat-input").value = ""; document.getElementById("chat-input").value = "";
autoResize();
document.getElementById("chat-input").setAttribute("disabled", "disabled"); document.getElementById("chat-input").setAttribute("disabled", "disabled");
// Generate backend API URL to execute query // Generate backend API URL to execute query
@@ -128,12 +129,21 @@
} }
function incrementalChat(event) { function incrementalChat(event) {
// Send chat message on 'Enter' if (!event.shiftKey && event.key === 'Enter') {
if (event.key === 'Enter') {
chat(); 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 () { window.onload = function () {
fetch('/api/chat/history?client=web') fetch('/api/chat/history?client=web')
.then(response => response.json()) .then(response => response.json())
@@ -207,7 +217,7 @@
<!-- Chat Footer --> <!-- Chat Footer -->
<div id="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> </div>
</body> </body>
@@ -255,6 +265,7 @@
.chat-message.you { .chat-message.you {
margin-right: auto; margin-right: auto;
text-align: right; text-align: right;
white-space: pre-line;
} }
/* basic style chat message text */ /* basic style chat message text */
.chat-message-text { .chat-message-text {
@@ -335,7 +346,16 @@
box-shadow: 0 0 11px #aaa; box-shadow: 0 0 11px #aaa;
} }
#chat-input { #chat-input {
font-family: roboto, karma, segoe ui, sans-serif;
font-size: medium; 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 { a.inline-chat-link {