From a4d4e5cde42b519ab2028a951103a8b03c18952f Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Thu, 20 Jul 2023 11:45:53 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20chore(GradientSparkles):=20add?=
 =?UTF-8?q?=20GradientSparkles=20icon=20component=20=F0=9F=94=A7=20fix(uti?=
 =?UTF-8?q?ls.ts):=20replace=20Sparkles=20icon=20with=20GradientSparkles?=
 =?UTF-8?q?=20icon=20component=20in=20nodeIconsLucide=20object?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/icons/GradientSparkles/index.tsx      | 22 +++++++++++
 src/frontend/src/index.css                    | 37 +++++++++++++++++++
 src/frontend/src/utils.ts                     |  4 +-
 3 files changed, 61 insertions(+), 2 deletions(-)
 create mode 100644 src/frontend/src/icons/GradientSparkles/index.tsx

diff --git a/src/frontend/src/icons/GradientSparkles/index.tsx b/src/frontend/src/icons/GradientSparkles/index.tsx
new file mode 100644
index 000000000..b8f3534d5
--- /dev/null
+++ b/src/frontend/src/icons/GradientSparkles/index.tsx
@@ -0,0 +1,22 @@
+import { Infinity } from "lucide-react";
+import { forwardRef } from "react";
+
+const GradientSparkles = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
+  (props, ref) => {
+    return (
+      <>
+        <svg width="0" height="0" style={{ position: "absolute" }}>
+          <defs>
+            <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
+              <stop className="gradient-start" offset="0%" />
+              <stop className="gradient-end" offset="100%" />
+            </linearGradient>
+          </defs>
+        </svg>
+        <Infinity stroke="url(#grad1)" ref={ref} {...props} />
+      </>
+    );
+  }
+);
+
+export default GradientSparkles;
diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index 368755346..05a099903 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -1120,3 +1120,40 @@ The cursor: default; property value restores the browser's default cursor style
     @apply rounded-md bg-indigo-100 px-0.5 dark:bg-indigo-900;
   }
 }
+
+@keyframes gradient-motion-start {
+  0% {
+    stop-color: rgb(156, 138, 236);
+  }
+  50% {
+    stop-color: rgb(255, 130, 184);
+  }
+  80% {
+    stop-color: rgb(255, 165, 100);
+  }
+  100% {
+    stop-color: rgb(156, 138, 236);
+  }
+}
+
+@keyframes gradient-motion-end {
+  0% {
+    stop-color: rgb(156, 138, 236);
+  }
+  50% {
+    stop-color: rgb(255, 165, 100);
+  }
+  80% {
+    stop-color: rgb(255, 130, 184);
+  }
+  100% {
+    stop-color: rgb(156, 138, 236);
+  }
+}
+
+.gradient-end {
+  animation: gradient-motion-end 3s infinite forwards;
+}
+.gradient-start {
+  animation: gradient-motion-start 4s infinite forwards;
+}
diff --git a/src/frontend/src/utils.ts b/src/frontend/src/utils.ts
index ad982320b..52c9876dc 100644
--- a/src/frontend/src/utils.ts
+++ b/src/frontend/src/utils.ts
@@ -17,7 +17,6 @@ import {
   Paperclip,
   Rocket,
   Scissors,
-  Sparkles,
   TerminalSquare,
   Wand2,
   Wrench,
@@ -35,6 +34,7 @@ import { EvernoteIcon } from "./icons/Evernote";
 import { FBIcon } from "./icons/FacebookMessenger";
 import { GitBookIcon } from "./icons/GitBook";
 import { GoogleIcon } from "./icons/Google";
+import GradientSparkles from "./icons/GradientSparkles";
 import { HuggingFaceIcon } from "./icons/HuggingFace";
 import { IFixIcon } from "./icons/IFixIt";
 import { MetaIcon } from "./icons/Meta";
@@ -303,7 +303,7 @@ export const nodeIconsLucide: {
   retrievers: FileSearch as React.ForwardRefExoticComponent<
     ComponentType<SVGProps<SVGSVGElement>>
   >,
-  custom_components: Sparkles as React.ForwardRefExoticComponent<
+  custom_components: GradientSparkles as React.ForwardRefExoticComponent<
     ComponentType<SVGProps<SVGSVGElement>>
   >,
   unknown: HelpCircle as React.ForwardRefExoticComponent<