mirror of
https://github.com/khoj-ai/khoj.git
synced 2024-11-23 23:48:56 +01:00
Add and improve chat input pane, actions, icons on web client
- Use SVG icons in chat footer on web - Move delete icon to left of chat input. This makes it harder to inadvertently click - Add send button to chat footer. Enter being the only way to send messages is not intuitive, outside standard modern UI patterns - Color chat message send button to make it primary CTA on web client - Make chat footer shorter. Use no or round border on action buttons
This commit is contained in:
Debanjum Singh Solanky
parent
9dfe1bb003
commit
ea85ebdacb
1 changed files with 55 additions and 17 deletions
|
|
@ -528,7 +528,7 @@ To get started, just start typing below. You can also type / to see a list of co
|
||||||
const textarea = document.getElementById('chat-input');
|
const textarea = document.getElementById('chat-input');
|
||||||
const scrollTop = textarea.scrollTop;
|
const scrollTop = textarea.scrollTop;
|
||||||
textarea.style.height = '0';
|
textarea.style.height = '0';
|
||||||
const scrollHeight = textarea.scrollHeight;
|
const scrollHeight = textarea.scrollHeight + 8; // +8 accounts for padding
|
||||||
textarea.style.height = Math.min(scrollHeight, 200) + 'px';
|
textarea.style.height = Math.min(scrollHeight, 200) + 'px';
|
||||||
textarea.scrollTop = scrollTop;
|
textarea.scrollTop = scrollTop;
|
||||||
document.getElementById("chat-body").scrollTop = document.getElementById("chat-body").scrollHeight;
|
document.getElementById("chat-body").scrollTop = document.getElementById("chat-body").scrollHeight;
|
||||||
|
|
@ -642,6 +642,7 @@ To get started, just start typing below. You can also type / to see a list of co
|
||||||
let mediaRecorder;
|
let mediaRecorder;
|
||||||
function speechToText() {
|
function speechToText() {
|
||||||
const speakButtonImg = document.getElementById('speak-button-img');
|
const speakButtonImg = document.getElementById('speak-button-img');
|
||||||
|
const stopRecordButtonImg = document.getElementById('stop-record-button-img');
|
||||||
const chatInput = document.getElementById('chat-input');
|
const chatInput = document.getElementById('chat-input');
|
||||||
|
|
||||||
const sendToServer = (audioBlob) => {
|
const sendToServer = (audioBlob) => {
|
||||||
|
|
@ -679,8 +680,8 @@ To get started, just start typing below. You can also type / to see a list of co
|
||||||
});
|
});
|
||||||
|
|
||||||
mediaRecorder.start();
|
mediaRecorder.start();
|
||||||
speakButtonImg.src = '/static/assets/icons/stop-solid.svg';
|
speakButtonImg.style.display = 'none';
|
||||||
speakButtonImg.alt = 'Stop Transcription';
|
stopRecordButtonImg.style.display = 'initial';
|
||||||
};
|
};
|
||||||
|
|
||||||
// Toggle recording
|
// Toggle recording
|
||||||
|
|
@ -695,8 +696,8 @@ To get started, just start typing below. You can also type / to see a list of co
|
||||||
mediaRecorder.stop();
|
mediaRecorder.stop();
|
||||||
mediaRecorder.stream.getTracks().forEach(track => track.stop());
|
mediaRecorder.stream.getTracks().forEach(track => track.stop());
|
||||||
mediaRecorder = null;
|
mediaRecorder = null;
|
||||||
speakButtonImg.src = '/static/assets/icons/microphone-solid.svg';
|
speakButtonImg.style.display = 'initial';
|
||||||
speakButtonImg.alt = 'Transcribe';
|
stopRecordButtonImg.style.display = 'none';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -718,12 +719,31 @@ To get started, just start typing below. You can also type / to see a list of co
|
||||||
<div id="chat-footer">
|
<div id="chat-footer">
|
||||||
<div id="chat-tooltip" style="display: none;"></div>
|
<div id="chat-tooltip" style="display: none;"></div>
|
||||||
<div id="input-row">
|
<div id="input-row">
|
||||||
<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>
|
<button id="clear-chat-button" class="input-row-button" onclick="clearConversationHistory()">
|
||||||
<button id="speak-button" class="input-row-button" onclick="speechToText()">
|
<svg class="input-row-button-img" alt="Clear Chat History" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
|
||||||
<img id="speak-button-img" class="input-row-button-img" src="/static/assets/icons/microphone-solid.svg" alt="Transcribe"></img>
|
<rect width="128" height="128" fill="none"/>
|
||||||
|
<line x1="216" y1="56" x2="40" y2="56" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/>
|
||||||
|
<line x1="104" y1="104" x2="104" y2="168" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/>
|
||||||
|
<line x1="152" y1="104" x2="152" y2="168" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/>
|
||||||
|
<path d="M200,56V208a8,8,0,0,1-8,8H64a8,8,0,0,1-8-8V56" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/>
|
||||||
|
<path d="M168,56V40a16,16,0,0,0-16-16H104A16,16,0,0,0,88,40V56" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/>
|
||||||
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
<button class="input-row-button" onclick="clearConversationHistory()">
|
<textarea id="chat-input" class="option" oninput="onChatInput()" onkeydown=incrementalChat(event) autofocus="autofocus" placeholder="Message"></textarea>
|
||||||
<img class="input-row-button-img" src="/static/assets/icons/trash-solid.svg" alt="Clear Chat History"></img>
|
<button id="speak-button" class="input-row-button" onclick="speechToText()">
|
||||||
|
<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">
|
||||||
|
<path d="M3.5 6.5A.5.5 0 0 1 4 7v1a4 4 0 0 0 8 0V7a.5.5 0 0 1 1 0v1a5 5 0 0 1-4.5 4.975V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 .5-.5z"/>
|
||||||
|
<path d="M10 8a2 2 0 1 1-4 0V3a2 2 0 1 1 4 0v5zM8 0a3 3 0 0 0-3 3v5a3 3 0 0 0 6 0V3a3 3 0 0 0-3-3z"/>
|
||||||
|
</svg>
|
||||||
|
<svg id="stop-record-button-img" style="display: none" class="input-row-button-img" alt="Stop Transcribing" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
||||||
|
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
|
||||||
|
<path d="M5 6.5A1.5 1.5 0 0 1 6.5 5h3A1.5 1.5 0 0 1 11 6.5v3A1.5 1.5 0 0 1 9.5 11h-3A1.5 1.5 0 0 1 5 9.5v-3z"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button id="send-button" class="input-row-button" onclick="chat()" alt="Send message" type="submit">
|
||||||
|
<svg id="send-button-img" class="input-row-button-img" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
||||||
|
<path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V11.5z"/>
|
||||||
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -963,7 +983,7 @@ To get started, just start typing below. You can also type / to see a list of co
|
||||||
}
|
}
|
||||||
#input-row {
|
#input-row {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: auto 32px 32px;
|
grid-template-columns: 32px auto 32px 40px;
|
||||||
grid-column-gap: 10px;
|
grid-column-gap: 10px;
|
||||||
grid-row-gap: 10px;
|
grid-row-gap: 10px;
|
||||||
background: var(--background-color);
|
background: var(--background-color);
|
||||||
|
|
@ -974,12 +994,13 @@ To get started, just start typing below. You can also type / to see a list of co
|
||||||
#chat-input {
|
#chat-input {
|
||||||
font-family: roboto, karma, segoe ui, sans-serif;
|
font-family: roboto, karma, segoe ui, sans-serif;
|
||||||
font-size: medium;
|
font-size: medium;
|
||||||
height: 54px;
|
height: 36px;
|
||||||
|
border-radius: 16px;
|
||||||
resize: none;
|
resize: none;
|
||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
max-height: 200px;
|
max-height: 200px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 15px;
|
padding: 4px 0 0 12px;
|
||||||
line-height: 1.5em;
|
line-height: 1.5em;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
@ -988,15 +1009,18 @@ To get started, just start typing below. You can also type / to see a list of co
|
||||||
}
|
}
|
||||||
.input-row-button {
|
.input-row-button {
|
||||||
background: var(--background-color);
|
background: var(--background-color);
|
||||||
border: 1px solid var(--main-text-color);
|
border: none;
|
||||||
box-shadow: 0 0 11px #aaa;
|
box-shadow: none;
|
||||||
border-radius: 5px;
|
border-radius: 50%;
|
||||||
padding: 0px;
|
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
line-height: 1.5em;
|
line-height: 1.5em;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background 0.3s ease-in-out;
|
transition: background 0.3s ease-in-out;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
margin-top: -2px;
|
||||||
|
margin-left: -5px;
|
||||||
}
|
}
|
||||||
.input-row-button:hover {
|
.input-row-button:hover {
|
||||||
background: var(--primary-hover);
|
background: var(--primary-hover);
|
||||||
|
|
@ -1006,6 +1030,17 @@ To get started, just start typing below. You can also type / to see a list of co
|
||||||
}
|
}
|
||||||
.input-row-button-img {
|
.input-row-button-img {
|
||||||
width: 24px;
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
#send-button {
|
||||||
|
padding-top: 0;
|
||||||
|
padding-right: 3px;
|
||||||
|
}
|
||||||
|
#send-button-img {
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
background: var(--primary-hover);
|
||||||
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -1083,6 +1118,9 @@ To get started, just start typing below. You can also type / to see a list of co
|
||||||
img.text-to-image {
|
img.text-to-image {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
#clear-chat-button {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@media only screen and (min-width: 700px) {
|
@media only screen and (min-width: 700px) {
|
||||||
body {
|
body {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue