Skip to content

Commit

Permalink
Adding ... wait for chat message animations
Browse files Browse the repository at this point in the history
  • Loading branch information
@polterguy
polterguy committed Sep 5, 2023
1 parent f400699 commit c6de563
Show file tree
Hide file tree
Showing 31 changed files with 1,158 additions and 16 deletions.
36 changes: 36 additions & 0 deletions backend/files/system/openai/front.files/chat/burning-sunset.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,42 @@
.aista-chat-msg-container a:visited {
color: #9f0c0c !important;
}
@keyframes jump {
0% {bottom: 0px;}
20% {bottom: 5px;}
40% {bottom: 0px;}
}
.ainiro-waiting-animation span {
position: relative;
margin-left: auto;
margin-right: auto;
animation: jump 1s infinite;
display: inline-block;
}
.ainiro-waiting-animation .ainiro-dot-1 {
background-color: #474147;
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 3px;
animation-delay: 200ms;
}
.ainiro-waiting-animation .ainiro-dot-2 {
background-color: #474147;
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 3px;
animation-delay: 400ms;
}
.ainiro-waiting-animation .ainiro-dot-3 {
background-color: #474147;
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 3px;
animation-delay: 600ms;
}
@keyframes aista-chat-question-waiting {
0% { opacity: .2; }
100% { opacity: 1; }
Expand Down
36 changes: 36 additions & 0 deletions backend/files/system/openai/front.files/chat/chess.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,42 @@
.aista-chat-msg-container a:visited {
color: #5555ff !important;
}
@keyframes jump {
0% {bottom: 0px;}
20% {bottom: 5px;}
40% {bottom: 0px;}
}
.ainiro-waiting-animation span {
position: relative;
margin-left: auto;
margin-right: auto;
animation: jump 1s infinite;
display: inline-block;
}
.ainiro-waiting-animation .ainiro-dot-1 {
background-color: #8c868c;
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 3px;
animation-delay: 200ms;
}
.ainiro-waiting-animation .ainiro-dot-2 {
background-color: #8c868c;
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 3px;
animation-delay: 400ms;
}
.ainiro-waiting-animation .ainiro-dot-3 {
background-color: #8c868c;
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 3px;
animation-delay: 600ms;
}
@keyframes aista-chat-question-waiting {
0% { opacity: .2; }
100% { opacity: 1; }
Expand Down
52 changes: 36 additions & 16 deletions backend/files/system/openai/front.files/chat/default.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,22 +106,42 @@
.aista-chat-msg-container a:visited {
color: #5555ff !important;
}
@keyframes aista-chat-question-waiting {
0% { margin-left:-10px; opacity: 0; color: rgb(128,128,0); }
10% { margin-left:-10px; opacity: 0; color: rgb(128,128,0); }
23% { margin-left:0px; opacity: 1; color: rgb(128,128,128); }
50% { margin-left:0px; opacity: 1; color: rgb(128,128,128); }
65% { margin-left:0px; opacity: 1; color: rgb(128,128,128); }
100% { margin-left:-10px; opacity: 0; color: rgb(128,128,0); }
}
.aista-chat-question-waiting {
animation-name: aista-chat-question-waiting;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
font-size: 14px !important;
margin-bottom: 10px !important;
font-weight: bold !important;
@keyframes jump {
0% {bottom: 0px;}
20% {bottom: 5px;}
40% {bottom: 0px;}
}
.ainiro-waiting-animation span {
position: relative;
margin-left: auto;
margin-right: auto;
animation: jump 1s infinite;
display: inline-block;
margin-top: 20px;
}
.ainiro-waiting-animation .ainiro-dot-1 {
background-color: #c1b8c2;
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 3px;
animation-delay: 200ms;
}
.ainiro-waiting-animation .ainiro-dot-2 {
background-color: #c1b8c2;
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 3px;
animation-delay: 400ms;
}
.ainiro-waiting-animation .ainiro-dot-3 {
background-color: #c1b8c2;
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 3px;
animation-delay: 600ms;
}
.aista-chat-question {
font-size: 14px !important;
Expand Down
24 changes: 24 additions & 0 deletions backend/files/system/openai/front.files/chat/default.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -200,6 +200,22 @@ function aista_create_chat_ui() {
}
}

function ainiro_create_wait_animation() {

const row = window.document.createElement('div');
row.className = 'aista-chat-answer ainiro-waiting-animation';
row.innerHTML = '<span class="ainiro-dot-1"></span><span class="ainiro-dot-2"></span><span class="ainiro-dot-3"></span>';
const msgs = window.document.getElementsByClassName('aista-chat-msg-container')[0];
msgs.appendChild(row);
}

function ainiro_delete_wait_animation() {
const els = window.document.querySelector('.ainiro-waiting-animation');
if (els) {
els.parentNode.removeChild(els);
}
}

/*
* Submits form to backend.
*/
Expand All @@ -219,6 +235,8 @@ function aista_submit_form(speech) {
}, 1);
inp.disabled = true;

ainiro_create_wait_animation();

const speechBtns = window.document.getElementsByClassName('aista-speech-button');
if (speechBtns?.length > 0) {
speechBtns[0].disabled = true;
Expand Down Expand Up @@ -519,6 +537,8 @@ function aista_invoke_prompt(msg, token, speech) {
const msgRow = window.document.getElementsByClassName('aista-chat-question-waiting')[0];
msgRow.className = 'aista-chat-question';

ainiro_delete_wait_animation();

// Making sure form submit button and speech button are enabled.
const speechBtns = window.document.getElementsByClassName('aista-speech-button');
if (speechBtns?.length > 0) {
Expand Down Expand Up @@ -604,6 +624,8 @@ function aista_invoke_prompt(msg, token, speech) {
// Removing flashing on question
const msgRow = window.document.getElementsByClassName('aista-chat-question-waiting')[0];
msgRow.className = 'aista-chat-question';

ainiro_delete_wait_animation();

// Checking if server returned references.
if (data.references && data.references.length > 0) {
Expand Down Expand Up @@ -656,6 +678,8 @@ function aista_invoke_prompt(msg, token, speech) {
const msgRow = window.document.getElementsByClassName('aista-chat-question-waiting')[0];
msgRow.className = 'aista-chat-question';
msgRow.scrollIntoView({behavior: 'smooth', block: 'start'});

ainiro_delete_wait_animation();
});
}
}})();
38 changes: 38 additions & 0 deletions backend/files/system/openai/front.files/chat/emerald.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,44 @@
.aista-chat-msg-container a:visited {
color: #5555ff !important;
}
@keyframes jump {
0% {bottom: 0px;}
20% {bottom: 5px;}
40% {bottom: 0px;}
}
.ainiro-waiting-animation span {
position: relative;
margin-left: auto;
margin-right: auto;
animation: jump 1s infinite;
display: inline-block;
margin-top: 3px;
margin-bottom: -3px;
}
.ainiro-waiting-animation .ainiro-dot-1 {
background-color: #5e875c;
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 3px;
animation-delay: 200ms;
}
.ainiro-waiting-animation .ainiro-dot-2 {
background-color: #5e875c;
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 3px;
animation-delay: 400ms;
}
.ainiro-waiting-animation .ainiro-dot-3 {
background-color: #5e875c;
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 3px;
animation-delay: 600ms;
}
@keyframes aista-chat-question-waiting {
0% { opacity: .2; }
100% { opacity: 1; }
Expand Down
38 changes: 38 additions & 0 deletions backend/files/system/openai/front.files/chat/frank.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,44 @@
.aista-chat-msg-container a:visited {
color: #5555ff !important;
}
@keyframes jump {
0% {bottom: 0px;}
20% {bottom: 5px;}
40% {bottom: 0px;}
}
.ainiro-waiting-animation span {
position: relative;
margin-left: auto;
margin-right: auto;
animation: jump 1s infinite;
display: inline-block;
margin-top: 3px;
margin-bottom: -3px;
}
.ainiro-waiting-animation .ainiro-dot-1 {
background-color: #563a98;
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 3px;
animation-delay: 200ms;
}
.ainiro-waiting-animation .ainiro-dot-2 {
background-color: #563a98;
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 3px;
animation-delay: 400ms;
}
.ainiro-waiting-animation .ainiro-dot-3 {
background-color: #563a98;
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 3px;
animation-delay: 600ms;
}
@keyframes aista-chat-question-waiting {
0% { opacity: .2; }
100% { opacity: 1; }
Expand Down
38 changes: 38 additions & 0 deletions backend/files/system/openai/front.files/chat/galaxy.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,44 @@
.aista-chat-msg-container a:visited {
color: #1266e1 !important;
}
@keyframes jump {
0% {bottom: 0px;}
20% {bottom: 5px;}
40% {bottom: 0px;}
}
.ainiro-waiting-animation span {
position: relative;
margin-left: auto;
margin-right: auto;
animation: jump 1s infinite;
display: inline-block;
margin-top: 3px;
margin-bottom: -3px;
}
.ainiro-waiting-animation .ainiro-dot-1 {
background-color: #6a0d8f;
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 3px;
animation-delay: 200ms;
}
.ainiro-waiting-animation .ainiro-dot-2 {
background-color: #6a0d8f;
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 3px;
animation-delay: 400ms;
}
.ainiro-waiting-animation .ainiro-dot-3 {
background-color: #6a0d8f;
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 3px;
animation-delay: 600ms;
}
@keyframes aista-chat-question-waiting {
0% { opacity: .2; }
100% { opacity: 1; }
Expand Down
38 changes: 38 additions & 0 deletions backend/files/system/openai/front.files/chat/lollipop.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,44 @@
.aista-chat-msg-container a:visited {
color: #ff66c4 !important;
}
@keyframes jump {
0% {bottom: 0px;}
20% {bottom: 5px;}
40% {bottom: 0px;}
}
.ainiro-waiting-animation span {
position: relative;
margin-left: auto;
margin-right: auto;
animation: jump 1s infinite;
display: inline-block;
margin-top: 3px;
margin-bottom: -3px;
}
.ainiro-waiting-animation .ainiro-dot-1 {
background-color: #e126cb;
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 3px;
animation-delay: 200ms;
}
.ainiro-waiting-animation .ainiro-dot-2 {
background-color: #e126cb;
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 3px;
animation-delay: 400ms;
}
.ainiro-waiting-animation .ainiro-dot-3 {
background-color: #e126cb;
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 3px;
animation-delay: 600ms;
}
@keyframes aista-chat-question-waiting {
0% { opacity: .2; }
100% { opacity: 1; }
Expand Down
Loading

0 comments on commit c6de563

Please sign in to comment.