AI/text-generation-webui
1
0
Fork 0
mirror of https://github.com/oobabooga/text-generation-webui.git synced 2024-10-01 01:26:03 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add a typing dots (...) animation to chat tab

Browse Source
This commit is contained in:
oobabooga 2023-08-28 13:50:36 -07:00
parent 57e9ded00c
commit 558e918fd6
3 changed files with 78 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
css/main.css
View File

@ -323,12 +323,6 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
height: calc(100dvh - 200px);
}
#show-controls {
position: absolute;
background-color: transparent;
left: calc(100% - 180px);
}
.chat > .messages {
display: flex;
flex-direction: column;
@ -412,3 +406,64 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
max-width: unset;
}
}
#show-controls {
position: absolute;
background-color: transparent;
left: calc(100% - 180px);
}
#typing-container {
display: none;
position: absolute;
background-color: transparent;
left: -2px;
padding: var(--block-padding);
}
.typing {
position: relative;
}
.visible-dots #typing-container {
display: block;
}
.typing span {
content: '';
animation: blink 1.5s infinite;
animation-fill-mode: both;
height: 10px;
width: 10px;
background: #3b5998;;
position: absolute;
left:0;
top:0;
border-radius: 50%;
}
.typing .dot1 {
animation-delay: .2s;
margin-left: calc(10px * 1.5);
}
.typing .dot2 {
animation-delay: .4s;
margin-left: calc(10px * 3);
}
@keyframes blink {
0% {
opacity: .1;
}
20% {
opacity: 1;
}
100% {
opacity: .1;
}
}
#chat-tab .generating {
display: none !important;
}

16
js/main.js
View File

@ -58,6 +58,14 @@ document.addEventListener("keydown", function(event) {
});
//------------------------------------------------
// Position the chat typing dots
//------------------------------------------------
typing = document.getElementById('typing-container');
typingParent = typing.parentNode;
typingSibling = typing.previousElementSibling;
typingSibling.insertBefore(typing, typingSibling.childNodes[2]);
//------------------------------------------------
// Chat scrolling
//------------------------------------------------
@ -81,6 +89,14 @@ const observer = new MutationObserver(function(mutations) {
if(!isScrolled) {
targetElement.scrollTop = targetElement.scrollHeight;
}
const firstChild = targetElement.children[0];
if (firstChild.classList.contains('generating')) {
typing.parentNode.classList.add('visible-dots');
} else {
typing.parentNode.classList.remove('visible-dots');
}
});
});

1
modules/ui_chat.py
View File

@ -24,6 +24,7 @@ def create_ui():
shared.gradio['display'] = gr.HTML(value=chat_html_wrapper({'internal': [], 'visible': []}, shared.settings['name1'], shared.settings['name2'], 'chat', 'cai-chat'))
shared.gradio['textbox'] = gr.Textbox(label='', placeholder='Send a message', elem_id='chat-input')
shared.gradio['show_controls'] = gr.Checkbox(value=shared.settings['show_controls'], label='Show controls (Ctrl+S)', elem_id='show-controls')
shared.gradio['typing-dots'] = gr.HTML(value='<div class="typing"><span></span><span class="dot1"></span><span class="dot2"></span></div>', label='typing', elem_id='typing-container')
with gr.Row():
shared.gradio['Stop'] = gr.Button('Stop', elem_id='stop')