🎨 chore(GradientSparkles): add GradientSparkles icon component

🔧 fix(utils.ts): replace Sparkles icon with GradientSparkles icon component in nodeIconsLucide object

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;

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;
+}

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<