Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-17 08:50:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 7

👟 style: CodeAnalyze Animation (#2348)

Browse source 
* refactor(CodeAnaluzer SVG)

* refactor(CodeAnalyzer SVG)

* style: center terminal animation, reduce scaling

---------

Co-authored-by: Danny Avila <messagedaniel@protonmail.com>
Co-authored-by: Danny Avila <danny@librechat.ai>
This commit is contained in:
Walber Cardoso 2024-04-09 21:34:22 -03:00 • committed by GitHub
parent 2240fee44a
commit e4c07eb895
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 74 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

14
client/src/components/Chat/Messages/Content/CodeAnalyze.tsx
View file

@ -85,14 +85,14 @@ const CodeInProgress = ({
style={{ opacity: 1, transform: 'none' }} style={{ opacity: 1, transform: 'none' }}
data-projection-id="77" data-projection-id="77"
> >
<div> <div className='absolute right-[1.5px] bottom-[1.5px]'>
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink" xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 20 20" viewBox="0 0 20 20"
width="20" width="20"
height="20" height="20"
style={{ width: '100%', height: '100%', transform: 'translate3d(0px, 0px, 0px)' }} style={{ transform: 'translate3d(0px, 0px, 0px)' }}
preserveAspectRatio="xMidYMid meet" preserveAspectRatio="xMidYMid meet"
> >
<defs> <defs>
@ -101,7 +101,10 @@ const CodeInProgress = ({
</clipPath> </clipPath>
</defs> </defs>
<g clipPath="url(#__lottie_element_11)"> <g clipPath="url(#__lottie_element_11)">
<g style={{ display: 'block', transform: 'matrix(1,0,0,1,-2,-2)', opacity: 1 }}> <g
style={{ display: 'block', transform: 'matrix(1,0,0,1,-2,-2)', opacity: 1 }}
className="slide-from-left"
>
<g opacity="1" transform="matrix(1,0,0,1,7.026679992675781,8.834091186523438)"> <g opacity="1" transform="matrix(1,0,0,1,7.026679992675781,8.834091186523438)">
<path <path
fill="rgb(177,98,253)" fill="rgb(177,98,253)"
@ -119,7 +122,10 @@ const CodeInProgress = ({
/> />
</g> </g>
</g> </g>
<g style={{ display: 'block', transform: 'matrix(1,0,0,1,-2,-2)', opacity: 1 }}> <g
style={{ display: 'block', transform: 'matrix(1,0,0,1,-2,-2)', opacity: 1 }}
className="slide-to-down"
>
<g opacity="1" transform="matrix(1,0,0,1,11.79640007019043,13.512199401855469)"> <g opacity="1" transform="matrix(1,0,0,1,11.79640007019043,13.512199401855469)">
<path <path
fill="rgb(177,98,253)" fill="rgb(177,98,253)"

65
client/src/style.css
View file

@ -1984,4 +1984,67 @@ html {
-webkit-text-fill-color: #fff; -webkit-text-fill-color: #fff;
background-clip: content-box; background-clip: content-box;
-webkit-box-shadow: 0 0 0 50vh #0d0d0d inset; -webkit-box-shadow: 0 0 0 50vh #0d0d0d inset;
} }
@keyframes slideFromLeftToRightAndFade {
0% {
opacity: 0;
transform: translateX(-10%);
}
20% {
opacity: 1;
transform: translateX(0);
}
70% {
opacity: 1;
transform: translateX(0);
}
75% {
opacity: 1;
transform: translateX(10%);
}
80% {
opacity: 0;
transform: translateX(20%);
}
85%, 100% {
opacity: 0;
transform: translateX(30%);
}
}
.slide-from-left {
animation: slideFromLeftToRightAndFade 2s ease-in-out infinite;
}
@keyframes slideDownAndFadeOut {
0% {
opacity: 1;
transform: translateY(-10%);
}
20% {
opacity: 1;
transform: translateY(0);
}
70% {
opacity: 1;
transform: translateY(0);
}
75% {
opacity: 1;
transform: translateY(10%);
}
80% {
opacity: 0;
transform: translateY(20%);
}
85%, 100% {
opacity: 0;
transform: translateY(30%);
}
}
.slide-to-down {
animation: slideDownAndFadeOut 2s ease-in-out infinite;
}