diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index f45a6a562..8fabc07e2 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/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, diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index ee62461bd..18b42c670 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/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({ diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx index 285aa91b7..5f4498f97 100644 --- a/src/frontend/src/components/cardComponent/index.tsx +++ b/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, diff --git a/src/frontend/src/modals/NodeModal/index.tsx b/src/frontend/src/modals/NodeModal/index.tsx index c61af4ff4..95c0e5512 100644 --- a/src/frontend/src/modals/NodeModal/index.tsx +++ b/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 }) { diff --git a/src/frontend/src/modals/formModal/chatMessage/index.tsx b/src/frontend/src/modals/formModal/chatMessage/index.tsx index 9affce87e..953aed530 100644 --- a/src/frontend/src/modals/formModal/chatMessage/index.tsx +++ b/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, diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx index b76a71c4b..fa26af1be 100644 --- a/src/frontend/src/modals/genericModal/index.tsx +++ b/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({
{type === TypeModal.PROMPT && (
-
+
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx index f7223d67a..7317341e2 100644 --- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx +++ b/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() { diff --git a/src/frontend/src/utils.ts b/src/frontend/src/utils.ts index eea82ca70..c5db58157 100644 --- a/src/frontend/src/utils.ts +++ b/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", }; diff --git a/src/frontend/src/utils/styleUtils.ts b/src/frontend/src/utils/styleUtils.ts new file mode 100644 index 000000000..ac42d2072 --- /dev/null +++ b/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", +};