nodeColors passed tl styleUtils

src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx

@@ -22,11 +22,11 @@ import {
   getRandomKeyByssmm,
   groupByFamily,
   isValidConnection,
-  nodeColors,
   nodeIconsLucide,
   nodeNames,
 } from "../../../../utils";
 import { cleanEdges } from "../../../../utils/reactflowUtils";
+import { nodeColors } from "../../../../utils/styleUtils";
 
 export default function ParameterComponent({
   left,

src/frontend/src/CustomNodes/GenericNode/index.tsx

@@ -10,12 +10,8 @@ import { typesContext } from "../../contexts/typesContext";
 import NodeModal from "../../modals/NodeModal";
 import NodeToolbarComponent from "../../pages/FlowPage/components/nodeToolbarComponent";
 import { NodeDataType } from "../../types/flow";
-import {
-  classNames,
-  nodeColors,
-  nodeIconsLucide,
-  toTitleCase,
-} from "../../utils";
+import { classNames, nodeIconsLucide, toTitleCase } from "../../utils";
+import { nodeColors } from "../../utils/styleUtils";
 import ParameterComponent from "./components/parameterComponent";
 
 export default function GenericNode({

src/frontend/src/components/cardComponent/index.tsx

@@ -2,7 +2,7 @@ import { Trash2 } from "lucide-react";
 import { useContext } from "react";
 import { TabsContext } from "../../contexts/tabsContext";
 import { FlowType } from "../../types/flow";
-import { gradients } from "../../utils";
+import { gradients } from "../../utils/styleUtils";
 import {
   Card,
   CardDescription,

src/frontend/src/modals/NodeModal/index.tsx

@@ -7,10 +7,10 @@ import { NodeDataType } from "../../types/flow";
 import {
   classNames,
   limitScrollFieldsModal,
-  nodeColors,
   nodeIconsLucide,
   toTitleCase,
 } from "../../utils";
+import { nodeColors } from "../../utils/styleUtils";
 import ModalField from "./components/ModalField";
 
 export default function NodeModal({ data }: { data: NodeDataType }) {

src/frontend/src/modals/formModal/chatMessage/index.tsx

@@ -81,7 +81,7 @@ export default function ChatMessage({
                         remarkPlugins={[remarkGfm, remarkMath]}
                         rehypePlugins={[rehypeMathjax]}
                         className="markdown prose inline-block break-words text-primary
-                     dark:prose-invert sm:max-w-[30vw] lg:max-w-[40vw] sm:w-[30vw] lg:w-[40vw]"
+                     dark:prose-invert sm:w-[30vw] sm:max-w-[30vw] lg:w-[40vw] lg:max-w-[40vw]"
                         components={{
                           code: ({
                             node,

src/frontend/src/modals/genericModal/index.tsx

@@ -6,7 +6,11 @@ import { Badge } from "../../components/ui/badge";
 import { Button } from "../../components/ui/button";
 import { DialogTitle } from "../../components/ui/dialog";
 import { Textarea } from "../../components/ui/textarea";
-import { MAX_WORDS_HIGHLIGHT, PROMPT_DIALOG_SUBTITLE, TEXT_DIALOG_SUBTITLE } from "../../constants";
+import {
+  MAX_WORDS_HIGHLIGHT,
+  PROMPT_DIALOG_SUBTITLE,
+  TEXT_DIALOG_SUBTITLE,
+} from "../../constants";
 import { alertContext } from "../../contexts/alertContext";
 import { darkContext } from "../../contexts/darkContext";
 import { PopUpContext } from "../../contexts/popUpContext";
@@ -120,15 +124,16 @@ export default function GenericModal({
     );
   };
 
-  function getClassByNumberLength(){
+  function getClassByNumberLength() {
     let sumOfCaracteres: number = 0;
-    wordsHighlight.forEach(element => {
-      sumOfCaracteres = sumOfCaracteres + element.replace(/[{}]/g, "").length
+    wordsHighlight.forEach((element) => {
+      sumOfCaracteres = sumOfCaracteres + element.replace(/[{}]/g, "").length;
     });
-    return sumOfCaracteres > MAX_WORDS_HIGHLIGHT ? "code-highlight" : "code-nohighlight"
+    return sumOfCaracteres > MAX_WORDS_HIGHLIGHT
+      ? "code-highlight"
+      : "code-nohighlight";
   }
 
-
   function validatePrompt(closeModal: boolean) {
     postValidatePrompt(field_name, inputValue, nodeClass)
       .then((apiReturn) => {
@@ -234,7 +239,10 @@ export default function GenericModal({
             <div className="mb-auto flex-1">
               {type === TypeModal.PROMPT && (
                 <div className=" mr-2">
-                  <div ref={divRef} className="max-h-20 overflow-y-auto custom-scroll">
+                  <div
+                    ref={divRef}
+                    className="max-h-20 overflow-y-auto custom-scroll"
+                  >
                     <div className="flex flex-wrap items-center">
                       <Variable className=" -ml-px mr-1 flex h-4 w-4 text-primary"></Variable>
                       <span className="text-md font-semibold text-primary">

src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx

@@ -9,12 +9,8 @@ import { typesContext } from "../../../../contexts/typesContext";
 import ApiModal from "../../../../modals/ApiModal";
 import ExportModal from "../../../../modals/exportModal";
 import { APIClassType, APIObjectType } from "../../../../types/api";
-import {
-  classNames,
-  nodeColors,
-  nodeIconsLucide,
-  nodeNames,
-} from "../../../../utils";
+import { classNames, nodeIconsLucide, nodeNames } from "../../../../utils";
+import { nodeColors } from "../../../../utils/styleUtils";
 import DisclosureComponent from "../DisclosureComponent";
 
 export default function ExtraSidebar() {

src/frontend/src/utils.ts

@@ -62,29 +62,6 @@ export enum TypeModal {
   PROMPT = 2,
 }
 
-export const nodeColors: { [char: string]: string } = {
-  prompts: "#4367BF",
-  llms: "#6344BE",
-  chains: "#FE7500",
-  agents: "#903BBE",
-  tools: "#FF3434",
-  memories: "#F5B85A",
-  advanced: "#000000",
-  chat: "#198BF6",
-  thought: "#272541",
-  embeddings: "#42BAA7",
-  documentloaders: "#7AAE42",
-  vectorstores: "#AA8742",
-  textsplitters: "#B47CB5",
-  toolkits: "#DB2C2C",
-  wrappers: "#E6277A",
-  utilities: "#31A3CC",
-  output_parsers: "#E6A627",
-  str: "#049524",
-  retrievers: "#e6b25a",
-  unknown: "#9CA3AF",
-};
-
 export const nodeNames: { [char: string]: string } = {
   prompts: "Prompts",
   llms: "LLMs",
@@ -263,40 +240,6 @@ export const nodeIconsLucide: {
   >,
 };
 
-export const gradients = [
-  "bg-gradient-to-br from-gray-800 via-rose-700 to-violet-900",
-  "bg-gradient-to-br from-green-200 via-green-300 to-blue-500",
-  "bg-gradient-to-br from-yellow-200 via-yellow-400 to-yellow-700",
-  "bg-gradient-to-br from-green-200 via-green-400 to-purple-700",
-  "bg-gradient-to-br from-blue-100 via-blue-300 to-blue-500",
-  "bg-gradient-to-br from-purple-400 to-yellow-400",
-  "bg-gradient-to-br from-red-800 via-yellow-600 to-yellow-500",
-  "bg-gradient-to-br from-blue-300 via-green-200 to-yellow-300",
-  "bg-gradient-to-br from-blue-700 via-blue-800 to-gray-900",
-  "bg-gradient-to-br from-green-300 to-purple-400",
-  "bg-gradient-to-br from-yellow-200 via-pink-200 to-pink-400",
-  "bg-gradient-to-br from-green-500 to-green-700",
-  "bg-gradient-to-br from-rose-400 via-fuchsia-500 to-indigo-500",
-  "bg-gradient-to-br from-sky-400 to-blue-500",
-  "bg-gradient-to-br from-green-200 via-green-400 to-green-500",
-  "bg-gradient-to-br from-red-400 via-gray-300 to-blue-500",
-  "bg-gradient-to-br from-gray-900 to-gray-600 bg-gradient-to-r",
-  "bg-gradient-to-br from-rose-500 via-red-400 to-red-500",
-  "bg-gradient-to-br from-fuchsia-600 to-pink-600",
-  "bg-gradient-to-br from-emerald-500 to-lime-600",
-  "bg-gradient-to-br from-rose-500 to-indigo-700",
-  "bg-gradient-to-br bg-gradient-to-tr from-violet-500 to-orange-300",
-  "bg-gradient-to-br from-gray-900 via-purple-900 to-violet-600",
-  "bg-gradient-to-br from-yellow-200 via-red-500 to-fuchsia-500",
-  "bg-gradient-to-br from-sky-400 to-indigo-900",
-  "bg-gradient-to-br from-amber-200 via-violet-600 to-sky-900",
-  "bg-gradient-to-br from-amber-700 via-orange-300 to-rose-800",
-  "bg-gradient-to-br from-gray-300 via-fuchsia-600 to-orange-600",
-  "bg-gradient-to-br from-fuchsia-500 via-red-600 to-orange-400",
-  "bg-gradient-to-br from-sky-400 via-rose-400 to-lime-400",
-  "bg-gradient-to-br from-lime-600 via-yellow-300 to-red-600",
-];
-
 export const taskTypeMap: { [key: string]: string } = {
   MULTICLASS_CLASSIFICATION: "Multiclass Classification",
 };

src/frontend/src/utils/styleUtils.ts

@@ -0,0 +1,56 @@
+export const gradients = [
+  "bg-gradient-to-br from-gray-800 via-rose-700 to-violet-900",
+  "bg-gradient-to-br from-green-200 via-green-300 to-blue-500",
+  "bg-gradient-to-br from-yellow-200 via-yellow-400 to-yellow-700",
+  "bg-gradient-to-br from-green-200 via-green-400 to-purple-700",
+  "bg-gradient-to-br from-blue-100 via-blue-300 to-blue-500",
+  "bg-gradient-to-br from-purple-400 to-yellow-400",
+  "bg-gradient-to-br from-red-800 via-yellow-600 to-yellow-500",
+  "bg-gradient-to-br from-blue-300 via-green-200 to-yellow-300",
+  "bg-gradient-to-br from-blue-700 via-blue-800 to-gray-900",
+  "bg-gradient-to-br from-green-300 to-purple-400",
+  "bg-gradient-to-br from-yellow-200 via-pink-200 to-pink-400",
+  "bg-gradient-to-br from-green-500 to-green-700",
+  "bg-gradient-to-br from-rose-400 via-fuchsia-500 to-indigo-500",
+  "bg-gradient-to-br from-sky-400 to-blue-500",
+  "bg-gradient-to-br from-green-200 via-green-400 to-green-500",
+  "bg-gradient-to-br from-red-400 via-gray-300 to-blue-500",
+  "bg-gradient-to-br from-gray-900 to-gray-600 bg-gradient-to-r",
+  "bg-gradient-to-br from-rose-500 via-red-400 to-red-500",
+  "bg-gradient-to-br from-fuchsia-600 to-pink-600",
+  "bg-gradient-to-br from-emerald-500 to-lime-600",
+  "bg-gradient-to-br from-rose-500 to-indigo-700",
+  "bg-gradient-to-br bg-gradient-to-tr from-violet-500 to-orange-300",
+  "bg-gradient-to-br from-gray-900 via-purple-900 to-violet-600",
+  "bg-gradient-to-br from-yellow-200 via-red-500 to-fuchsia-500",
+  "bg-gradient-to-br from-sky-400 to-indigo-900",
+  "bg-gradient-to-br from-amber-200 via-violet-600 to-sky-900",
+  "bg-gradient-to-br from-amber-700 via-orange-300 to-rose-800",
+  "bg-gradient-to-br from-gray-300 via-fuchsia-600 to-orange-600",
+  "bg-gradient-to-br from-fuchsia-500 via-red-600 to-orange-400",
+  "bg-gradient-to-br from-sky-400 via-rose-400 to-lime-400",
+  "bg-gradient-to-br from-lime-600 via-yellow-300 to-red-600",
+];
+
+export const nodeColors: { [char: string]: string } = {
+  prompts: "#4367BF",
+  llms: "#6344BE",
+  chains: "#FE7500",
+  agents: "#903BBE",
+  tools: "#FF3434",
+  memories: "#F5B85A",
+  advanced: "#000000",
+  chat: "#198BF6",
+  thought: "#272541",
+  embeddings: "#42BAA7",
+  documentloaders: "#7AAE42",
+  vectorstores: "#AA8742",
+  textsplitters: "#B47CB5",
+  toolkits: "#DB2C2C",
+  wrappers: "#E6277A",
+  utilities: "#31A3CC",
+  output_parsers: "#E6A627",
+  str: "#049524",
+  retrievers: "#e6b25a",
+  unknown: "#9CA3AF",
+};