fix: step animation

Chainlit · Jan 8, 2025 · c862ca3 · c862ca3
1 parent 7d05d7d
commit c862ca3
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 13 deletions.
diff --git a/frontend/src/components/chat/Messages/Message/Step.tsx b/frontend/src/components/chat/Messages/Message/Step.tsx
@@ -33,8 +33,8 @@ export default function Step({
           'flex items-center gap-1 group/step',
           isError && 'text-red-500',
           hasContent && 'cursor-pointer',
-          !isRunning && 'text-muted-foreground hover:text-foreground',
-          isRunning && 'loading-shimmer'
+          !using && 'text-muted-foreground hover:text-foreground',
+          using && 'loading-shimmer'
         )}
         onClick={() => setOpen(!open)}
         id={`step-${stepName}`}

diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -113,19 +113,19 @@ code {
   text-fill-color: transparent;
   -webkit-text-fill-color: transparent;
   animation-delay: 0s;
-  animation-duration: 3s;
+  animation-duration: 4s;
   animation-iteration-count: infinite;
   animation-name: loading-shimmer;
-  background: hsl(var(--muted-foreground))
+  background: hsl(var(--muted))
     gradient(
       linear,
       100% 0,
       0 0,
-      from(hsl(var(--muted-foreground))),
+      from(hsl(var(--muted))),
       color-stop(0.5, hsl(var(--foreground))),
-      to(hsl(var(--muted-foreground)))
+      to(hsl(var(--muted)))
     );
-  background: hsl(var(--muted-foreground)) -webkit-gradient(linear, 100% 0, 0 0, from(hsl(var(--muted-foreground))), color-stop(0.5, hsl(var(--foreground))), to(hsl(var(--muted-foreground))));
+  background: hsl(var(--muted)) -webkit-gradient(linear, 100% 0, 0 0, from(hsl(var(--muted))), color-stop(0.5, hsl(var(--foreground))), to(hsl(var(--muted))));
   background-clip: text;
   -webkit-background-clip: text;
   background-repeat: no-repeat;

diff --git a/libs/copilot/src/index.css b/libs/copilot/src/index.css
@@ -113,20 +113,20 @@
   background-position: -100% top;
   text-fill-color: transparent;
   -webkit-text-fill-color: transparent;
-  animation-delay: 0.3s;
-  animation-duration: 3s;
+  animation-delay: 0s;
+  animation-duration: 4s;
   animation-iteration-count: infinite;
   animation-name: loading-shimmer;
-  background: hsl(var(--muted-foreground))
+  background: hsl(var(--muted))
     gradient(
       linear,
       100% 0,
       0 0,
-      from(hsl(var(--muted-foreground))),
+      from(hsl(var(--muted))),
       color-stop(0.5, hsl(var(--foreground))),
-      to(hsl(var(--muted-foreground)))
+      to(hsl(var(--muted)))
     );
-  background: hsl(var(--muted-foreground)) -webkit-gradient(linear, 100% 0, 0 0, from(hsl(var(--muted-foreground))), color-stop(0.5, hsl(var(--foreground))), to(hsl(var(--muted-foreground))));
+  background: hsl(var(--muted)) -webkit-gradient(linear, 100% 0, 0 0, from(hsl(var(--muted))), color-stop(0.5, hsl(var(--foreground))), to(hsl(var(--muted))));
   background-clip: text;
   -webkit-background-clip: text;
   background-repeat: no-repeat;