mmarch/text-generation-webui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 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
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;
}