sij/khoj
1
0
Fork 0
mirror of https://github.com/khoj-ai/khoj.git synced 2024-11-27 17:35:07 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Align conversation sessions side panel on Desktop app with Web app

Browse source 
- Move new conversation button to right of "Conversation" title
- Reduce size of chat message loading ellipsis animation
- Add loading animation for chat session
This commit is contained in:
Debanjum Singh Solanky 2024-04-10 09:58:04 +05:30
parent 1c3d129e08
commit cadeaac769
2 changed files with 85 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
src/interface/desktop/chat.html
View file

@ -672,6 +672,13 @@
chatHistoryUrl += `&conversation_id=${chatBody.dataset.conversationId}`;
}
// Create loading screen and add it to chat-body
let loadingScreen = document.createElement('div');
loadingScreen.classList.add("loading-spinner");
let yellowOrb = document.createElement('div');
loadingScreen.appendChild(yellowOrb);
chatBody.appendChild(loadingScreen);
fetch(`${hostURL}${chatHistoryUrl}`, { headers })
.then(response => response.json())
.then(data => {
@ -705,11 +712,17 @@
chat_log.intent?.type,
chat_log.intent?.["inferred-queries"]);
}
loadingScreen.style.height = chatBody.scrollHeight + 'px';
})
// Add fade out animation to loading screen and remove it after the animation ends
let chatBodyWrapper = document.getElementById("chat-body-wrapper");
chatBodyWrapperHeight = chatBodyWrapper.clientHeight;
chatBody.style.height = chatBodyWrapperHeight;
setTimeout(() => {
loadingScreen.remove();
chatBody.classList.remove("relative-position");
}, 500);
})
.catch(err => {
// If the server returns a 500 error with detail, render a setup hint.
@ -1100,9 +1113,10 @@
<div id="side-panel-wrapper">
<div id="side-panel">
<div id="new-conversation">
<button class="side-panel-button" id="new-conversation-button" onclick="createNewConversation()">
New Topic
<svg class="new-convo-button" viewBox="0 0 35 35" fill="#000000" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
<div id="conversation-list-header" style="display: none;">Conversations</div>
<button class="side-panel-button" id="new-conversation-button" onclick="createNewConversation()">
New
<svg class="new-convo-button" viewBox="0 0 40 40" fill="#000000" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M16 0c-8.836 0-16 7.163-16 16s7.163 16 16 16c8.837 0 16-7.163 16-16s-7.163-16-16-16zM16 30.032c-7.72 0-14-6.312-14-14.032s6.28-14 14-14 14 6.28 14 14-6.28 14.032-14 14.032zM23 15h-6v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1v6h-6c-0.552 0-1 0.448-1 1s0.448 1 1 1h6v6c0 0.552 0.448 1 1 1s1-0.448 1-1v-6h6c0.552 0 1-0.448 1-1s-0.448-1-1-1z"></path>
</svg>
</button>
@ -1416,8 +1430,6 @@
transition: background 0.3s ease-in-out;
border-radius: 5%;;
font-family: var(--font-family);
padding: 8px;
font-size: large;
}
svg#side-panel-collapse {
@ -1733,14 +1745,18 @@
}
div#new-conversation {
display: grid;
grid-auto-flow: column;
font-size: large;
text-align: left;
border-bottom: 1px solid var(--main-text-color);
margin-bottom: 8px;
margin: 8px 0;
}
button#new-conversation-button {
display: inline-flex;
align-items: center;
justify-self: end;
}
div.conversation-button {
@ -1866,6 +1882,44 @@
white-space: pre-wrap;
}
.loading-spinner {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
.loading-spinner div {
position: absolute;
border: 4px solid var(--primary-hover);
opacity: 1;
border-radius: 50%;
animation: lds-ripple 0.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.loading-spinner div:nth-child(2) {
animation-delay: -0.5s;
}
@keyframes lds-ripple {
0% {
top: 36px;
left: 36px;
width: 0;
height: 0;
opacity: 1;
border-color: var(--primary-hover);
}
50% {
border-color: var(--flower);
}
100% {
top: 0px;
left: 0px;
width: 72px;
height: 72px;
opacity: 0;
border-color: var(--water);
}
}
.lds-ellipsis {
display: inline-block;
position: relative;
@ -1875,8 +1929,8 @@
.lds-ellipsis div {
position: absolute;
top: 12px;
width: 12px;
height: 12px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--main-text-color);
animation-timing-function: cubic-bezier(0, 1, 1, 0);

47
src/khoj/interface/web/chat.html
View file

@ -1130,7 +1130,6 @@ To get started, just start typing below. You can also type / to see a list of co
agentMetadataElement.style.display = "none";
}
let chatBodyWrapper = document.getElementById("chat-body-wrapper");
const fullChatLog = response.chat || [];
fullChatLog.forEach(chat_log => {
@ -1148,6 +1147,7 @@ To get started, just start typing below. You can also type / to see a list of co
});
// Add fade out animation to loading screen and remove it after the animation ends
let chatBodyWrapper = document.getElementById("chat-body-wrapper");
chatBodyWrapperHeight = chatBodyWrapper.clientHeight;
chatBody.style.height = chatBodyWrapperHeight;
setTimeout(() => {
@ -2443,7 +2443,6 @@ To get started, just start typing below. You can also type / to see a list of co
width: 80px;
height: 80px;
}
.loading-spinner div {
position: absolute;
border: 4px solid var(--primary-hover);
@ -2451,10 +2450,30 @@ To get started, just start typing below. You can also type / to see a list of co
border-radius: 50%;
animation: lds-ripple 0.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.loading-spinner div:nth-child(2) {
animation-delay: -0.5s;
}
@keyframes lds-ripple {
0% {
top: 36px;
left: 36px;
width: 0;
height: 0;
opacity: 1;
border-color: var(--primary-hover);
}
50% {
border-color: var(--flower);
}
100% {
top: 0px;
left: 0px;
width: 72px;
height: 72px;
opacity: 0;
border-color: var(--water);
}
}
#agent-metadata-content {
display: grid;
@ -2620,28 +2639,6 @@ To get started, just start typing below. You can also type / to see a list of co
}
@keyframes lds-ripple {
0% {
top: 36px;
left: 36px;
width: 0;
height: 0;
opacity: 1;
border-color: var(--primary-hover);
}
50% {
border-color: var(--flower);
}
100% {
top: 0px;
left: 0px;
width: 72px;
height: 72px;
opacity: 0;
border-color: var(--water);
}
}
.lds-ellipsis {
display: inline-block;
position: relative;