diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index 80049fec4..4a98a7737 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx @@ -22,7 +22,10 @@ import PromptAreaComponent from "../../../../components/promptComponent"; import TextAreaComponent from "../../../../components/textAreaComponent"; import ToggleShadComponent from "../../../../components/toggleShadComponent"; import { Button } from "../../../../components/ui/button"; -import { LANGFLOW_SUPPORTED_TYPES, TOOLTIP_EMPTY } from "../../../../constants/constants"; +import { + LANGFLOW_SUPPORTED_TYPES, + TOOLTIP_EMPTY, +} from "../../../../constants/constants"; import { FlowsContext } from "../../../../contexts/flowsContext"; import { typesContext } from "../../../../contexts/typesContext"; import { ParameterComponentType } from "../../../../types/components"; @@ -222,9 +225,7 @@ export default function ParameterComponent({ }, [tooltipTitle, flow]); return !showNode ? ( - left && - (LANGFLOW_SUPPORTED_TYPES.has(type??"")) && - !optionalHandle ? ( + left && LANGFLOW_SUPPORTED_TYPES.has(type ?? "") && !optionalHandle ? ( <> ) : ( diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx index 7784f7cab..12caba30a 100644 --- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx @@ -93,12 +93,11 @@ export default function SidebarDraggableComponent({ > {display_name}
- - - + +
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx index c78861133..ade0b3284 100644 --- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx @@ -10,6 +10,8 @@ import { SelectTrigger, } from "../../../../components/ui/select-custom"; import { FlowsContext } from "../../../../contexts/flowsContext"; +import { StoreContext } from "../../../../contexts/storeContext"; +import ConfirmationModal from "../../../../modals/ConfirmationModal"; import EditNodeModal from "../../../../modals/EditNodeModal"; import ShareModal from "../../../../modals/shareModal"; import { nodeToolbarPropsType } from "../../../../types/components"; @@ -21,7 +23,6 @@ import { updateFlowPosition, } from "../../../../utils/reactflowUtils"; import { classNames } from "../../../../utils/utils"; -import { StoreContext } from "../../../../contexts/storeContext"; export default function NodeToolbarComponent({ data, @@ -51,7 +52,7 @@ export default function NodeToolbarComponent({ ); const updateNodeInternals = useUpdateNodeInternals(); const { getNodeId } = useContext(FlowsContext); - const {hasApiKey} = useContext(StoreContext) + const { hasApiKey } = useContext(StoreContext); function canMinimize() { let countHandles: number = 0; @@ -64,11 +65,12 @@ export default function NodeToolbarComponent({ const isMinimal = canMinimize(); const isGroup = data.node?.flow ? true : false; - const { paste, saveComponent, version } = useContext(FlowsContext); + const { paste, saveComponent, version, flows } = useContext(FlowsContext); const reactFlowInstance = useReactFlow(); const [showModalAdvanced, setShowModalAdvanced] = useState(false); const [showconfirmShare, setShowconfirmShare] = useState(false); const [selectedValue, setSelectedValue] = useState(""); + const [showOverrideModal, setShowOverrideModal] = useState(false); const [flowComponent, setFlowComponent] = useState(); @@ -76,6 +78,11 @@ export default function NodeToolbarComponent({ setFlowComponent(createFlowComponent(cloneDeep(data), version)); }, [data]); + function onOverrideModalConfirmation(override: boolean): void { + if (override) saveComponent(cloneDeep(data), true); + saveComponent(cloneDeep(data), false); + } + const handleSelectChange = (event) => { switch (event) { case "advanced": @@ -89,10 +96,10 @@ export default function NodeToolbarComponent({ downloadNode(createFlowComponent(cloneDeep(data), version)); break; case "Share": - if(hasApiKey) setShowconfirmShare(true); + if (hasApiKey) setShowconfirmShare(true); break; case "SaveAll": - saveComponent(cloneDeep(data)); + saveComponent(cloneDeep(data), false); break; case "disabled": break; @@ -100,9 +107,16 @@ export default function NodeToolbarComponent({ updateFlowPosition(position, data.node?.flow!); expandGroupNode(data, reactFlowInstance, getNodeId); break; + case "override": + setShowOverrideModal(true); + break; } }; + const isSaved = flows.some((flow) => + Object.values(flow).includes(data.node?.display_name!) + ); + return ( <>
@@ -204,24 +218,38 @@ export default function NodeToolbarComponent({ )} - -
- {" "} - Save{" "} -
{" "} - - {hasApiKey && -
- {" "} - Share{" "} -
{" "} - } + {isSaved ? ( + +
+ {" "} + Save{" "} +
{" "} + + ) : ( + +
+ {" "} + Save{" "} +
{" "} + + )} + {hasApiKey && ( + +
+ {" "} + Share{" "} +
{" "} + + )}
+ + { + saveComponent(cloneDeep(data), true); + }} + onClose={setShowOverrideModal} + onCancel={() => saveComponent(cloneDeep(data), false)} + > + + + It seems {data.node?.display_name} already exists. Replacing it + will switch the current component. Proceed with replacement? + + + + + void; title: string; titleHeader: string; asChild?: boolean; diff --git a/src/frontend/src/types/tabs/index.ts b/src/frontend/src/types/tabs/index.ts index 0cb1f673a..996c508d3 100644 --- a/src/frontend/src/types/tabs/index.ts +++ b/src/frontend/src/types/tabs/index.ts @@ -10,7 +10,8 @@ export type FlowsContextType = { removeFlow: (id: string) => void; addFlow: ( newProject: boolean, - flow?: FlowType + flow?: FlowType, + override?: boolean ) => Promise; updateFlow: (newFlow: FlowType) => void; incrementNodeId: () => string; @@ -44,7 +45,10 @@ export type FlowsContextType = { setLastCopiedSelection: (selection: { nodes: any; edges: any }) => void; setTweak: (tweak: tweakType) => tweakType | void; getTweak: tweakType; - saveComponent: (component: NodeDataType) => Promise; + saveComponent: ( + component: NodeDataType, + override: boolean + ) => Promise; deleteComponent: (key: string) => void; version: string; }; diff --git a/src/frontend/src/utils/reactflowUtils.ts b/src/frontend/src/utils/reactflowUtils.ts index 4e6e08d6b..d69f2fe89 100644 --- a/src/frontend/src/utils/reactflowUtils.ts +++ b/src/frontend/src/utils/reactflowUtils.ts @@ -9,7 +9,10 @@ import { XYPosition, } from "reactflow"; import ShortUniqueId from "short-unique-id"; -import { LANGFLOW_SUPPORTED_TYPES, specialCharsRegex } from "../constants/constants"; +import { + LANGFLOW_SUPPORTED_TYPES, + specialCharsRegex, +} from "../constants/constants"; import { APITemplateType, TemplateVariableType } from "../types/api"; import { FlowType,