diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index 12c9c2a74..e1d677379 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx @@ -1,4 +1,4 @@ -import { cloneDeep, divide } from "lodash"; +import { cloneDeep } from "lodash"; import React, { ReactNode, useContext, @@ -32,7 +32,7 @@ import { } from "../../../../utils/styleUtils"; import { classNames, groupByFamily } from "../../../../utils/utils"; -export default function ParameterComponent({ +export default function ParameterComponent({ left, id, data, @@ -121,17 +121,18 @@ export default function ParameterComponent({ return ( <> {index === 0 && ( - - {left ? "Components to connect into:" : "Components to connect to:"} - - ) - } + + {left + ? "Components to connect into:" + : "Components to connect to:"} + + )} 0 ? "mt-2 flex items-center" : "mt-3 flex items-center" )} - > + >
- {nodeNames[item.family] ?? "Other"} - {" "} + {nodeNames[item.family] ?? "Other"}{" "} {" "} {item.type === "" ? "" : " - "} @@ -179,220 +179,218 @@ export default function ParameterComponent({ renderTooltips(); }, [tooltipTitle, flow]); - return ( - !showNode ? ( - left && - (type === "str" || - type === "bool" || - type === "float" || - type === "code" || - type === "prompt" || - type === "file" || - type === "int") && - !optionalHandle ? ( - <> - ) : ( - - - isValidConnection(connection, reactFlowInstance!) - } - className={classNames( - left ? "-ml-0.5 my-12 " : " -mr-0.5 my-12 ", - "h-3 w-3 rounded-full border-2 bg-background" - )} - style={{ - borderColor: color, - top: position, - }} - > - - ) + return !showNode ? ( + left && + (type === "str" || + type === "bool" || + type === "float" || + type === "code" || + type === "prompt" || + type === "file" || + type === "int") && + !optionalHandle ? ( + <> ) : ( -
- <> -
- {title} - {required ? " *" : ""} -
- {info !== "" && ( - - {/* put div to avoid bug that does not display tooltip */} -
- -
- - )} -
-
- {left && - (type === "str" || - type === "bool" || - type === "float" || - type === "code" || - type === "prompt" || - type === "file" || - type === "int") && - !optionalHandle ? ( - <> - ) : ( - - - isValidConnection(connection, reactFlowInstance!) - } - className={classNames( - left ? "-ml-0.5 " : "-mr-0.5 ", - "h-3 w-3 rounded-full border-2 bg-background" - )} - style={{ - borderColor: color, - top: position, - }} - > - + + isValidConnection(connection, reactFlowInstance!) + } + className={classNames( + left ? "my-12 -ml-0.5 " : " my-12 -mr-0.5 ", + "h-3 w-3 rounded-full border-2 bg-background" )} - - {left === true && - type === "str" && - !data.node?.template[name].options ? ( -
- {data.node?.template[name].list ? ( - - ) : data.node?.template[name].multiline ? ( - - ) : ( - - )} -
- ) : left === true && type === "bool" ? ( -
- { - handleOnNewValue(isEnabled); - }} - size="large" - /> -
- ) : left === true && type === "float" ? ( -
- -
- ) : left === true && - type === "str" && - data.node?.template[name].options ? ( -
- -
- ) : left === true && type === "code" ? ( -
- { - data.node = nodeClass; - }} - nodeClass={data.node} - disabled={disabled} - value={data.node?.template[name].value ?? ""} - onChange={handleOnNewValue} - /> -
- ) : left === true && type === "file" ? ( -
- { - data.node!.template[name].file_path = filePath; - save(); - }} - > -
- ) : left === true && type === "int" ? ( -
- -
- ) : left === true && type === "prompt" ? ( -
- { - data.node = nodeClass; - }} - nodeClass={data.node} - disabled={disabled} - value={data.node?.template[name].value ?? ""} - onChange={handleOnNewValue} - /> -
- ) : ( - <> - )} - -
+ style={{ + borderColor: color, + top: position, + }} + > + ) + ) : ( +
+ <> +
+ {title} + {required ? " *" : ""} +
+ {info !== "" && ( + + {/* put div to avoid bug that does not display tooltip */} +
+ +
+ + )} +
+
+ {left && + (type === "str" || + type === "bool" || + type === "float" || + type === "code" || + type === "prompt" || + type === "file" || + type === "int") && + !optionalHandle ? ( + <> + ) : ( + + + isValidConnection(connection, reactFlowInstance!) + } + className={classNames( + left ? "-ml-0.5 " : "-mr-0.5 ", + "h-3 w-3 rounded-full border-2 bg-background" + )} + style={{ + borderColor: color, + top: position, + }} + > + + )} + + {left === true && + type === "str" && + !data.node?.template[name].options ? ( +
+ {data.node?.template[name].list ? ( + + ) : data.node?.template[name].multiline ? ( + + ) : ( + + )} +
+ ) : left === true && type === "bool" ? ( +
+ { + handleOnNewValue(isEnabled); + }} + size="large" + /> +
+ ) : left === true && type === "float" ? ( +
+ +
+ ) : left === true && + type === "str" && + data.node?.template[name].options ? ( +
+ +
+ ) : left === true && type === "code" ? ( +
+ { + data.node = nodeClass; + }} + nodeClass={data.node} + disabled={disabled} + value={data.node?.template[name].value ?? ""} + onChange={handleOnNewValue} + /> +
+ ) : left === true && type === "file" ? ( +
+ { + data.node!.template[name].file_path = filePath; + save(); + }} + > +
+ ) : left === true && type === "int" ? ( +
+ +
+ ) : left === true && type === "prompt" ? ( +
+ { + data.node = nodeClass; + }} + nodeClass={data.node} + disabled={disabled} + value={data.node?.template[name].value ?? ""} + onChange={handleOnNewValue} + /> +
+ ) : ( + <> + )} + +
); } diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index 179429cc9..74547dfa8 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -35,10 +35,11 @@ export default function GenericNode({ function countHandles(): void { numberOfInputs = Object.keys(data.node!.template) - .filter((templateField) => templateField.charAt(0) !== "_").map((templateCamp) => { + .filter((templateField) => templateField.charAt(0) !== "_") + .map((templateCamp) => { const { template } = data.node!; - if (template[templateCamp].input_types) return true - if (!template[templateCamp].show) return false + if (template[templateCamp].input_types) return true; + if (!template[templateCamp].show) return false; switch (template[templateCamp].type) { case "str": return false; @@ -55,15 +56,15 @@ export default function GenericNode({ case "int": return false; default: - return true + return true; } - }) - setHandles(numberOfInputs) - }; + }); + setHandles(numberOfInputs); + } useEffect(() => { countHandles(); - }, []) + }, []); // State for outline color const { sseData, isBuilding } = useSSE(); @@ -91,10 +92,9 @@ export default function GenericNode({ useEffect(() => { setTimeout(() => { - updateNodeInternals(data.id) - }, 400) - - }, [showNode]) + updateNodeInternals(data.id); + }, 300); + }, [showNode]); // New useEffect to watch for changes in sseData and update validation status useEffect(() => { @@ -124,8 +124,10 @@ export default function GenericNode({ className={classNames( selected ? "border border-ring" : "border", " transition-transform ", - showNode ? " rounded-lg transform w-96 duration-500 ease-in-out scale-100 " : " rounded-full transform transform-width duration-500 w-26 h-26 scale-90 ", - "generic-node-div", + showNode + ? " w-96 scale-100 transform rounded-lg duration-500 ease-in-out " + : " transform-width w-26 h-26 scale-90 transform rounded-full duration-500 ", + "generic-node-div" )} > {data.node?.beta && showNode && ( @@ -134,11 +136,26 @@ export default function GenericNode({ )}
-
-
+
+
{showNode && ( @@ -155,84 +172,97 @@ export default function GenericNode({ {!showNode && ( <> {Object.keys(data.node!.template) - .filter((templateField) => templateField.charAt(0) !== "_") - .map((templateField: string, idx) => ( - data.node!.template[templateField].show && - !data.node!.template[templateField].advanced && ( - - )))} - 0 - ? data.node.output_types.join("|") - : data.type - } - tooltipTitle={data.node?.base_classes.join("\n")} - id={[data.type, data.id, ...data.node!.base_classes].join("|")} - type={data.node?.base_classes.join("|")} - left={false} - showNode={showNode} - /> + .filter((templateField) => templateField.charAt(0) !== "_") + .map( + (templateField: string, idx) => + data.node!.template[templateField].show && + !data.node!.template[templateField].advanced && ( + + ) + )} + 0 + ? data.node.output_types.join("|") + : data.type + } + tooltipTitle={data.node?.base_classes.join("\n")} + id={[data.type, data.id, ...data.node!.base_classes].join( + "|" + )} + type={data.node?.base_classes.join("|")} + left={false} + showNode={showNode} + /> )} -
- - {showNode && (
@@ -296,9 +326,18 @@ export default function GenericNode({
{showNode && ( -
+
{data.node?.description !== "" && showNode && ( -
{data.node?.description}
+
+ {data.node?.description} +
)} <> @@ -324,14 +363,18 @@ export default function GenericNode({ nodeColors[ types[data.node?.template[templateField].type!] ] ?? - nodeColors[data.node?.template[templateField].type!] ?? + nodeColors[ + data.node?.template[templateField].type! + ] ?? nodeColors.unknown } title={ data.node?.template[templateField].display_name ? data.node.template[templateField].display_name : data.node?.template[templateField].name - ? toTitleCase(data.node.template[templateField].name) + ? toTitleCase( + data.node.template[templateField].name + ) : toTitleCase(templateField) } info={data.node?.template[templateField].info} diff --git a/src/frontend/src/icons/GradientSparkles/index.tsx b/src/frontend/src/icons/GradientSparkles/index.tsx index 49502c6ba..55e8d3977 100644 --- a/src/frontend/src/icons/GradientSparkles/index.tsx +++ b/src/frontend/src/icons/GradientSparkles/index.tsx @@ -1,38 +1,39 @@ import { forwardRef } from "react"; -export const GradientSparkles = forwardRef>( - (props, ref) => { - return ( - <> - - - - - - - - - {/* this svg comes from the source code of lucide, +export const GradientSparkles = forwardRef< + SVGSVGElement, + React.PropsWithChildren<{}> +>((props, ref) => { + return ( + <> + + + + + + + + + {/* this svg comes from the source code of lucide, we do not use the import because it crashes the ui (why? no one knows...). source code from the used svg: https://github.com/lucide-icons/lucide/blob/a4076db69b52ff0debc383f76d4d671c3bad5345/icons/infinity.svg?short_path=f79de91 */} - - - - - ); - } -); - + + + + + ); +}); diff --git a/src/frontend/src/pages/AdminPage/index.tsx b/src/frontend/src/pages/AdminPage/index.tsx index bcdc78b5f..24baefb5b 100644 --- a/src/frontend/src/pages/AdminPage/index.tsx +++ b/src/frontend/src/pages/AdminPage/index.tsx @@ -190,7 +190,7 @@ export default function AdminPage() { setSuccessData({ title: "Success! New user added!", }); - }) + }); }) .catch((error) => { setErrorData({ diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx index 24fb79a02..718ac7f3d 100644 --- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx @@ -119,7 +119,8 @@ export default function NodeToolbarComponent({ >
{ - setShowNode(prev => !prev); - updateNodeInternals(data.id) + setShowNode((prev) => !prev); + updateNodeInternals(data.id); }} > - + )} diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts index d88960488..576104f40 100644 --- a/src/frontend/src/types/components/index.ts +++ b/src/frontend/src/types/components/index.ts @@ -174,7 +174,7 @@ export type IconComponentProps = { name: string; className?: string; iconColor?: string; - onClick?: () => void + onClick?: () => void; }; export type InputProps = { diff --git a/src/frontend/src/utils/styleUtils.ts b/src/frontend/src/utils/styleUtils.ts index cb7086c5d..ee3bf10c5 100644 --- a/src/frontend/src/utils/styleUtils.ts +++ b/src/frontend/src/utils/styleUtils.ts @@ -48,6 +48,7 @@ import { MessageCircle, MessageSquare, MessagesSquare, + Minus, MoonIcon, MoreHorizontal, Paperclip, @@ -61,6 +62,7 @@ import { Settings2, Shield, Sparkles, + Square, SunIcon, TerminalSquare, Trash2, @@ -78,8 +80,6 @@ import { X, XCircle, Zap, - Minus, - Square, } from "lucide-react"; import { FaApple, FaGithub } from "react-icons/fa"; import { AirbyteIcon } from "../icons/Airbyte"; @@ -91,7 +91,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 { GradientSparkles } from "../icons/GradientSparkles"; import { HuggingFaceIcon } from "../icons/HuggingFace"; import { IFixIcon } from "../icons/IFixIt"; import { MetaIcon } from "../icons/Meta";