Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UX Improvement: Keyboard Shortcuts for Recent Messages #804

Merged
merged 2 commits into from
Jun 14, 2024
Merged

UX Improvement: Keyboard Shortcuts for Recent Messages #804

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e039c99
added keyboard shortcuts to access old queries
MythicalCow Jun 7, 2024
efc13c5
minor bug fix and PR improvements
MythicalCow Jun 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/khoj/database/migrations/0044_conversation_file_filters.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# Generated by Django 4.2.10 on 2024-05-29 19:56
# Generated by Django 4.2.11 on 2024-06-14 04:36

from django.db import migrations, models

Expand Down
66 changes: 64 additions & 2 deletions src/khoj/interface/web/chat.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -532,6 +532,13 @@
if (query.length === 0)
return;

// if the query is not empty then update userMessages array. keep the size of the array to 10
if (userMessages.length >= 10) {
userMessages.shift();
}
userMessages.push(query);
resetUserMessageIndex();

// Add message by user to chat body
renderMessage(query, "you");
document.getElementById("chat-input").value = "";
Expand Down Expand Up @@ -1085,6 +1092,12 @@
var query = document.getElementById("chat-input").value.trim();
console.log(`Query: ${query}`);

if (userMessages.length >= 10) {
userMessages.shift();
}
userMessages.push(query);
resetUserMessageIndex();

// Add message by user to chat body
renderMessage(query, "you");
document.getElementById("chat-input").value = "";
Expand Down Expand Up @@ -1126,7 +1139,8 @@
rawQuery: query,
}
}

var userMessages = [];
var userMessageIndex = -1;
function loadChat() {
let chatBody = document.getElementById("chat-body");
chatBody.innerHTML = "";
Expand Down Expand Up @@ -1233,9 +1247,15 @@
}, {rootMargin: '0px 0px 0px 0px'});

const fullChatLog = response.chat || [];
userMessages = [];
userMessageIndex = 0;
fullChatLog.forEach((chat_log, index) => {
// Render the last 10 messages immediately
// also cache user messages into array for shortcut access
if (chat_log.message != null) {
if(chat_log.by !== "khoj") {
userMessages.push(chat_log.message);
}
let messageElement = renderMessageWithReference(
chat_log.message,
chat_log.by,
Expand All @@ -1255,6 +1275,7 @@
}
loadingScreen.style.height = chatBody.scrollHeight + 'px';
});
userMessageIndex = userMessages.length;

// Scroll to bottom of chat-body element
chatBody.scrollTop = chatBody.scrollHeight;
Expand Down Expand Up @@ -2039,11 +2060,35 @@
console.error("Error loading file filters:", error);
});
}

function inputAutoFiller(key){
var chatInput = document.getElementById("chat-input");
MythicalCow marked this conversation as resolved.
Show resolved Hide resolved
console.log(key, userMessageIndex)
if (key === "up") {
if (userMessageIndex > 0) {
userMessageIndex -= 1;
chatInput.value = userMessages[userMessageIndex];
} else {
userMessageIndex = -1;
chatInput.value = "";
MythicalCow marked this conversation as resolved.
Show resolved Hide resolved
}
} else if (key === "down") {
if (userMessageIndex < userMessages.length - 1) {
userMessageIndex += 1;
chatInput.value = userMessages[userMessageIndex];
} else if (userMessageIndex === userMessages.length - 1) {
userMessageIndex += 1;
MythicalCow marked this conversation as resolved.
Show resolved Hide resolved
chatInput.value = "";
}
}
}
function resetUserMessageIndex(){
userMessageIndex = userMessages.length;
}
</script>
<body>
<div id="khoj-empty-container" class="khoj-empty-container">
</div>

<!--Add Header Logo and Nav Pane-->
{% import 'utils.html' as utils %}
{{ utils.heading_pane(user_photo, username, is_active, has_documents) }}
Expand Down Expand Up @@ -2114,6 +2159,7 @@
fileList.style.display = 'none';
selectedFileList.style.display = 'block';
}

});

fileInput.addEventListener('click', function(event) {
Expand Down Expand Up @@ -2170,6 +2216,22 @@
</svg>
</button>
<textarea id="chat-input" class="option" oninput="onChatInput()" onkeydown=incrementalChat(event) autofocus="autofocus" placeholder="Type / to see a list of commands"></textarea>
<!-- Shortcut Handler for Accessing Old Messages -->
<script>
MythicalCow marked this conversation as resolved.
Show resolved Hide resolved
let chatInput = document.getElementById('chat-input');
chatInput.addEventListener('keydown', function(event) {
if (event.key === 'ArrowUp') {
MythicalCow marked this conversation as resolved.
Show resolved Hide resolved
inputAutoFiller('up');
} else if (event.key === 'ArrowDown') {
inputAutoFiller('down');
}
});
document.addEventListener('click', function(event) {
if (document.activeElement !== document.getElementById('chat-input')) {
resetUserMessageIndex();
}
});
</script>
<button id="speak-button" class="input-row-button"
ontouchstart="speechToText(event)" ontouchend="speechToText(event)" ontouchcancel="speechToText(event)" onmousedown="speechToText(event)">
<svg id="speak-button-img" class="input-row-button-img" alt="Transcribe" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
Expand Down
Loading