From e4c07eb8951866c2fd6a9dc0129737627f842ff0 Mon Sep 17 00:00:00 2001
From: Walber Cardoso <50842245+walbercardoso@users.noreply.github.com>
Date: Tue, 9 Apr 2024 21:34:22 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=91=9F=20style:=20CodeAnalyze=20Animation?=
 =?UTF-8?q?=20(#2348)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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>
---
 .../Chat/Messages/Content/CodeAnalyze.tsx     | 14 ++--
 client/src/style.css                          | 65 ++++++++++++++++++-
 2 files changed, 74 insertions(+), 5 deletions(-)

diff --git a/client/src/components/Chat/Messages/Content/CodeAnalyze.tsx b/client/src/components/Chat/Messages/Content/CodeAnalyze.tsx
index 5f6b4eb8e5..c0ab640dd4 100644
--- a/client/src/components/Chat/Messages/Content/CodeAnalyze.tsx
+++ b/client/src/components/Chat/Messages/Content/CodeAnalyze.tsx
@@ -85,14 +85,14 @@ const CodeInProgress = ({
       style={{ opacity: 1, transform: 'none' }}
       data-projection-id="77"
     >
-      <div>
+      <div className='absolute right-[1.5px] bottom-[1.5px]'>
         <svg
           xmlns="http://www.w3.org/2000/svg"
           xmlnsXlink="http://www.w3.org/1999/xlink"
           viewBox="0 0 20 20"
           width="20"
           height="20"
-          style={{ width: '100%', height: '100%', transform: 'translate3d(0px, 0px, 0px)' }}
+          style={{ transform: 'translate3d(0px, 0px, 0px)' }}
           preserveAspectRatio="xMidYMid meet"
         >
           <defs>
@@ -101,7 +101,10 @@ const CodeInProgress = ({
             </clipPath>
           </defs>
           <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)">
                 <path
                   fill="rgb(177,98,253)"
@@ -119,7 +122,10 @@ const CodeInProgress = ({
                 />
               </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)">
                 <path
                   fill="rgb(177,98,253)"
diff --git a/client/src/style.css b/client/src/style.css
index fbfb83edd3..a1d3fc16b9 100644
--- a/client/src/style.css
+++ b/client/src/style.css
@@ -1984,4 +1984,67 @@ html {
   -webkit-text-fill-color: #fff;
   background-clip: content-box;
   -webkit-box-shadow: 0 0 0 50vh #0d0d0d inset;
-}
\ No newline at end of file
+}
+
+
+@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;
+}