-
+ {({ open }) => (
+ <>
+ {children}
+
+ )}
+
+ );
+}
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index f9e904581..f713ca884 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -1,10 +1,11 @@
import { cloneDeep } from "lodash";
+import { LinkIcon, SparklesIcon } from "lucide-react";
import { useEffect, useMemo, useState } from "react";
import ShadTooltip from "../../../../components/ShadTooltipComponent";
import IconComponent from "../../../../components/genericIconComponent";
import { Input } from "../../../../components/ui/input";
import { Separator } from "../../../../components/ui/separator";
-import ApiModal from "../../../../modals/ApiModal";
+import { PRIORITY_SIDEBAR_ORDER } from "../../../../constants/constants";
import ExportModal from "../../../../modals/exportModal";
import ShareModal from "../../../../modals/shareModal";
import useAlertStore from "../../../../stores/alertStore";
@@ -24,7 +25,9 @@ import {
sensitiveSort,
} from "../../../../utils/utils";
import DisclosureComponent from "../DisclosureComponent";
+import ParentDisclosureComponent from "../ParentDisclosureComponent";
import SidebarDraggableComponent from "./sideBarDraggableComponent";
+import { sortKeys } from "./utils";
export default function ExtraSidebar(): JSX.Element {
const data = useTypesStore((state) => state.data);
@@ -37,7 +40,6 @@ export default function ExtraSidebar(): JSX.Element {
const hasApiKey = useStoreStore((state) => state.hasApiKey);
const validApiKey = useStoreStore((state) => state.validApiKey);
- const isBuilt = useFlowStore((state) => state.isBuilt);
const setErrorData = useAlertStore((state) => state.setErrorData);
const [dataFilter, setFilterData] = useState(data);
const [search, setSearch] = useState("");
@@ -232,73 +234,22 @@ export default function ExtraSidebar(): JSX.Element {
[]
);
+ const getIcon = useMemo(() => {
+ return (SBSectionName: string) => {
+ if (nodeIconsLucide[SBSectionName]) {
+ return (
+
+
- {Object.keys(templates).length > 0 &&
- Object.keys(types).length > 0 ? (
-
);
}
diff --git a/src/frontend/src/pages/FlowPage/components/ParentDisclosureComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/ParentDisclosureComponent/index.tsx
new file mode 100644
index 000000000..edc479fce
--- /dev/null
+++ b/src/frontend/src/pages/FlowPage/components/ParentDisclosureComponent/index.tsx
@@ -0,0 +1,41 @@
+import { Disclosure } from "@headlessui/react";
+import IconComponent from "../../../../components/genericIconComponent";
+import { DisclosureComponentType } from "../../../../types/components";
+
+export default function ParentDisclosureComponent({
+ button: { title, Icon, buttons = [] },
+ children,
+ openDisc,
+}: DisclosureComponentType): JSX.Element {
+ return (
+
-
- {
- takeSnapshot();
- if (
- validateSelection(lastSelection!, edges).length === 0
- ) {
- const { newFlow, removedEdges } = generateFlow(
- lastSelection!,
- nodes,
- edges,
- getRandomName()
- );
- const newGroupNode = generateNodeFromFlow(
- newFlow,
- getNodeId
- );
- const newEdges = reconnectEdges(
- newGroupNode,
- removedEdges
- );
- setNodes((oldNodes) => [
- ...oldNodes.filter(
- (oldNodes) =>
- !lastSelection?.nodes.some(
- (selectionNode) =>
- selectionNode.id === oldNodes.id
- )
- ),
- newGroupNode,
- ]);
- setEdges((oldEdges) => [
- ...oldEdges.filter(
- (oldEdge) =>
- !lastSelection!.nodes.some(
- (selectionNode) =>
- selectionNode.id === oldEdge.target ||
- selectionNode.id === oldEdge.source
- )
- ),
- ...newEdges,
- ]);
- } else {
- setErrorData({
- title: "Invalid selection",
- list: validateSelection(lastSelection!, edges),
- });
- }
- }}
- />
-
- {!view &&
- ) : (
- <>
+
+ {showCanvas ? (
+ {
+ handleGroupNode();
+ }}
+ />
+
-
+ ) : (
+ <>
+ )}
+
+
+
+
+
+
+
+ {title}
+
+
+ {buttons.map((btn, index) => (
+
+ ))}
+
+
+
+
- (null);
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/utils.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/utils.tsx
new file mode 100644
index 000000000..ee0509cd0
--- /dev/null
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/utils.tsx
@@ -0,0 +1,26 @@
+import { PRIORITY_SIDEBAR_ORDER } from "../../../../constants/constants";
+
+export function sortKeys(a: string, b: string) {
+ // Define the order of specific keys
+
+ const indexA = PRIORITY_SIDEBAR_ORDER.indexOf(a.toLowerCase());
+ const indexB = PRIORITY_SIDEBAR_ORDER.indexOf(b.toLowerCase());
+
+ // Check if both keys are in the predefined order
+ if (indexA !== -1 && indexB !== -1) {
+ return indexA - indexB;
+ }
+
+ // If only 'a' is in the predefined order, it should come first
+ if (indexA !== -1) {
+ return -1;
+ }
+
+ // If only 'b' is in the predefined order, it should come first
+ if (indexB !== -1) {
+ return 1;
+ }
+
+ // If neither 'a' nor 'b' are in the predefined order, sort them alphabetically
+ return a.localeCompare(b);
+}
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index 279165a69..8a134f48a 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -1,6 +1,8 @@
-import { cloneDeep } from "lodash";
+import _, { cloneDeep } from "lodash";
import { useEffect, useState } from "react";
+import { useUpdateNodeInternals } from "reactflow";
import ShadTooltip from "../../../../components/ShadTooltipComponent";
+import CodeAreaComponent from "../../../../components/codeAreaComponent";
import IconComponent from "../../../../components/genericIconComponent";
import {
Select,
@@ -8,13 +10,17 @@ import {
SelectItem,
SelectTrigger,
} from "../../../../components/ui/select-custom";
+import { postCustomComponent } from "../../../../controllers/API";
import ConfirmationModal from "../../../../modals/ConfirmationModal";
import EditNodeModal from "../../../../modals/EditNodeModal";
import ShareModal from "../../../../modals/shareModal";
+import useAlertStore from "../../../../stores/alertStore";
import { useDarkStore } from "../../../../stores/darkStore";
import useFlowStore from "../../../../stores/flowStore";
import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
import { useStoreStore } from "../../../../stores/storeStore";
+import { useTypesStore } from "../../../../stores/typesStore";
+import { APIClassType } from "../../../../types/api";
import { nodeToolbarPropsType } from "../../../../types/components";
import { FlowType } from "../../../../types/flow";
import {
@@ -24,14 +30,20 @@ import {
updateFlowPosition,
} from "../../../../utils/reactflowUtils";
import { classNames } from "../../../../utils/utils";
+import ToolbarSelectItem from "./toolbarSelectItem";
export default function NodeToolbarComponent({
data,
deleteNode,
- position,
setShowNode,
numberOfHandles,
showNode,
+ name = "code",
+ selected,
+ updateNodeCode,
+ setShowState,
+ onCloseAdvancedModal,
+ isOutdated,
}: nodeToolbarPropsType): JSX.Element {
const nodeLength = Object.keys(data.node!.template).filter(
(templateField) =>
@@ -48,7 +60,7 @@ export default function NodeToolbarComponent({
data.node.template[templateField].type === "dict" ||
data.node.template[templateField].type === "NestedDict")
).length;
-
+ const templates = useTypesStore((state) => state.templates);
const hasStore = useStoreStore((state) => state.hasStore);
const hasApiKey = useStoreStore((state) => state.hasApiKey);
const validApiKey = useStoreStore((state) => state.validApiKey);
@@ -56,26 +68,44 @@ export default function NodeToolbarComponent({
const isMinimal = numberOfHandles <= 1;
const isGroup = data.node?.flow ? true : false;
+ // const frozen = data.node?.frozen ?? false;
const paste = useFlowStore((state) => state.paste);
const nodes = useFlowStore((state) => state.nodes);
const edges = useFlowStore((state) => state.edges);
const setNodes = useFlowStore((state) => state.setNodes);
- const setEdges = useFlowStore((state) => state.setEdges);
+ const setEdges = useFlowStore((state) => state.setEdges);
+ const unselectAll = useFlowStore((state) => state.unselectAll);
const saveComponent = useFlowsManagerStore((state) => state.saveComponent);
+ const getNodePosition = useFlowStore((state) => state.getNodePosition);
const flows = useFlowsManagerStore((state) => state.flows);
const version = useDarkStore((state) => state.version);
const takeSnapshot = useFlowsManagerStore((state) => state.takeSnapshot);
const [showModalAdvanced, setShowModalAdvanced] = useState(false);
const [showconfirmShare, setShowconfirmShare] = useState(false);
const [showOverrideModal, setShowOverrideModal] = useState(false);
-
- const [flowComponent, setFlowComponent] = useState();
+ const [flowComponent, setFlowComponent] = useState(
+ createFlowComponent(cloneDeep(data), version)
+ );
const openInNewTab = (url) => {
window.open(url, "_blank", "noreferrer");
};
+ useEffect(() => {
+ if (!showModalAdvanced) {
+ onCloseAdvancedModal!(false);
+ }
+ }, [showModalAdvanced]);
+ const updateNodeInternals = useUpdateNodeInternals();
+
+ const setLastCopiedSelection = useFlowStore(
+ (state) => state.setLastCopiedSelection
+ );
+
+ const setSuccessData = useAlertStore((state) => state.setSuccessData);
+ const setNoticeData = useAlertStore((state) => state.setNoticeData);
+
useEffect(() => {
setFlowComponent(createFlowComponent(cloneDeep(data), version));
}, [
@@ -97,6 +127,9 @@ export default function NodeToolbarComponent({
takeSnapshot();
setShowNode(data.showNode ?? true ? false : true);
break;
+ case "Share":
+ if (hasApiKey || hasStore) setShowconfirmShare(true);
+ break;
case "Download":
downloadNode(flowComponent!);
break;
@@ -112,7 +145,7 @@ export default function NodeToolbarComponent({
takeSnapshot();
expandGroupNode(
data.id,
- updateFlowPosition(position, data.node?.flow!),
+ updateFlowPosition(getNodePosition(data.id), data.node?.flow!),
data.node!.template,
nodes,
edges,
@@ -122,6 +155,58 @@ export default function NodeToolbarComponent({
break;
case "override":
setShowOverrideModal(true);
+ break;
+ case "delete":
+ deleteNode(data.id);
+ break;
+ case "copy":
+ const node = nodes.filter((node) => node.id === data.id);
+ setLastCopiedSelection({ nodes: _.cloneDeep(node), edges: [] });
+ break;
+ case "duplicate":
+ paste(
+ {
+ nodes: [nodes.find((node) => node.id === data.id)!],
+ edges: [],
+ },
+ {
+ x: 50,
+ y: 10,
+ paneX: nodes.find((node) => node.id === data.id)?.position.x,
+ paneY: nodes.find((node) => node.id === data.id)?.position.y,
+ }
+ );
+ break;
+ case "update":
+ takeSnapshot();
+ // to update we must get the code from the templates in useTypesStore
+ const thisNodeTemplate = templates[data.type].template;
+ // if the template does not have a code key
+ // return
+ if (!thisNodeTemplate.code) return;
+
+ const currentCode = thisNodeTemplate.code.value;
+ if (data.node) {
+ postCustomComponent(currentCode, data.node)
+ .then((apiReturn) => {
+ const { data } = apiReturn;
+ if (data && updateNodeCode) {
+ updateNodeCode(data, currentCode, "code");
+ }
+ })
+ .catch((err) => {
+ console.log(err);
+ });
+ setNode(data.id, (oldNode) => {
+ let newNode = cloneDeep(oldNode);
+ newNode.data = {
+ ...data,
+ };
+ newNode.data.node.template.code.value = currentCode;
+ return newNode;
+ });
+ }
+
break;
}
};
@@ -130,74 +215,243 @@ export default function NodeToolbarComponent({
Object.values(flow).includes(data.node?.display_name!)
);
+ const setNode = useFlowStore((state) => state.setNode);
+
+ const handleOnNewValue = (
+ newValue: string | string[] | boolean | Object[]
+ ): void => {
+ if (data.node!.template[name].value !== newValue) {
+ takeSnapshot();
+ }
+
+ data.node!.template[name].value = newValue; // necessary to enable ctrl+z inside the input
+
+ setNode(data.id, (oldNode) => {
+ let newNode = cloneDeep(oldNode);
+
+ newNode.data = {
+ ...newNode.data,
+ };
+
+ newNode.data.node.template[name].value = newValue;
+
+ return newNode;
+ });
+ };
+
+ const handleNodeClass = (newNodeClass: APIClassType, code?: string): void => {
+ if (!data.node) return;
+ if (data.node!.template[name].value !== code) {
+ takeSnapshot();
+ }
+
+ setNode(data.id, (oldNode) => {
+ let newNode = cloneDeep(oldNode);
+
+ newNode.data = {
+ ...newNode.data,
+ node: newNodeClass,
+ description: newNodeClass.description ?? data.node!.description,
+ display_name: newNodeClass.display_name ?? data.node!.display_name,
+ };
+
+ newNode.data.node.template[name].value = code;
+
+ return newNode;
+ });
+ updateNodeInternals(data.id);
+ };
+
+ const [openModal, setOpenModal] = useState(false);
+ const hasCode = Object.keys(data.node!.template).includes("code");
+
+ useEffect(() => {
+ function onKeyDown(event: KeyboardEvent) {
+ if (
+ selected &&
+ (hasApiKey || hasStore) &&
+ (event.ctrlKey || event.metaKey) &&
+ event.key === "u"
+ ) {
+ event.preventDefault();
+ handleSelectChange("update");
+ }
+ if (
+ selected &&
+ isGroup &&
+ (event.ctrlKey || event.metaKey) &&
+ event.key === "g"
+ ) {
+ event.preventDefault();
+ handleSelectChange("ungroup");
+ }
+ if (
+ selected &&
+ (hasApiKey || hasStore) &&
+ (event.ctrlKey || event.metaKey) &&
+ event.shiftKey &&
+ event.key === "S"
+ ) {
+ event.preventDefault();
+ setShowconfirmShare((state) => !state);
+ }
+
+ if (
+ selected &&
+ (event.ctrlKey || event.metaKey) &&
+ event.shiftKey &&
+ event.key === "Q"
+ ) {
+ event.preventDefault();
+ if (isMinimal) {
+ setShowState((show) => !show);
+ setShowNode(data.showNode ?? true ? false : true);
+ return;
+ }
+ setNoticeData({
+ title:
+ "Minimization are only available for nodes with one handle or fewer.",
+ });
+ }
+ if (
+ selected &&
+ (event.ctrlKey || event.metaKey) &&
+ event.shiftKey &&
+ event.key === "U"
+ ) {
+ event.preventDefault();
+ if (hasCode) return setOpenModal((state) => !state);
+ setNoticeData({ title: `You can not access ${data.id} code` });
+ }
+ if (
+ selected &&
+ !isGroup &&
+ (event.ctrlKey || event.metaKey) &&
+ event.shiftKey &&
+ event.key === "A"
+ ) {
+ event.preventDefault();
+ setShowModalAdvanced((state) => !state);
+ }
+ if (selected && (event.ctrlKey || event.metaKey) && event.key === "s") {
+ if (isSaved) {
+ event.preventDefault();
+ return setShowOverrideModal((state) => !state);
+ }
+ if (hasCode) {
+ event.preventDefault();
+ saveComponent(cloneDeep(data), false);
+ setSuccessData({ title: `${data.id} saved successfully` });
+ }
+ }
+ if (
+ selected &&
+ (event.ctrlKey || event.metaKey) &&
+ event.shiftKey &&
+ event.key === "D"
+ ) {
+ event.preventDefault();
+ if (data.node?.documentation) {
+ return openInNewTab(data.node?.documentation);
+ }
+ setNoticeData({
+ title: `${data.id} docs is not available at the moment.`,
+ });
+ }
+ if (selected && (event.ctrlKey || event.metaKey) && event.key === "j") {
+ event.preventDefault();
+ downloadNode(flowComponent!);
+ }
+ }
+
+ document.addEventListener("keydown", onKeyDown);
+
+ return () => {
+ document.removeEventListener("keydown", onKeyDown);
+ };
+ }, [isSaved, showNode, data.showNode, isMinimal]);
+
return (
<>
- {hasStore && validApiKey && (
-
-
- )}
-
-
- )}
-
-
-
- {ModalMemo}
-
-
-
-
-
- {(!hasApiKey || !validApiKey) && (
- {ExportMemo}
-
- {currentFlow && currentFlow.data && (
-
-
-
- )}
-
-
handleBlur()}
@@ -314,94 +265,215 @@ export default function ExtraSidebar(): JSX.Element {
setSearch(event.target.value);
}}
/>
-
);
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 f33e97a1d..7d468b4ba 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx
@@ -43,6 +43,7 @@ export const SidebarDraggableComponent = forwardRef(
const deleteComponent = useFlowsManagerStore(
(state) => state.deleteComponent
);
+
const version = useDarkStore((state) => state.version);
const [cursorPos, setCursorPos] = useState({ x: 0, y: 0 });
const popoverRef = useRef
+
-
+ {
+ if (search) {
+ setFilterData(data);
+ setSearch("");
+ }
+ }}
+ >
+
-
+
) : (
)
- )}
+ )}{" "}
+
+ {Object.keys(dataFilter)
+ .sort(sortKeys)
+ .filter((x) => !PRIORITY_SIDEBAR_ORDER.includes(x))
+ .map((SBSectionName: keyof APIObjectType, index) =>
+ Object.keys(dataFilter[SBSectionName]).length > 0 ? (
+ <>
+
+
+ {index ===
+ Object.keys(dataFilter).length -
+ PRIORITY_SIDEBAR_ORDER.length +
+ 1 && (
+ <>
+
+
+
{Object.keys(dataFilter)
- .sort((a, b) => {
- if (a.toLowerCase() === "saved_components") {
- return -1;
- } else if (b.toLowerCase() === "saved_components") {
- return 1;
- } else if (a.toLowerCase() === "custom_components") {
- return -2;
- } else if (b.toLowerCase() === "custom_components") {
- return 2;
- } else {
- return a.localeCompare(b);
- }
- })
+ .sort(sortKeys)
+ .filter((x) => PRIORITY_SIDEBAR_ORDER.includes(x))
.map((SBSectionName: keyof APIObjectType, index) =>
Object.keys(dataFilter[SBSectionName]).length > 0 ? (
-
+ Core Components
+
+
- {Object.keys(dataFilter[SBSectionName])
- .sort((a, b) =>
- sensitiveSort(
- dataFilter[SBSectionName][a].display_name,
- dataFilter[SBSectionName][b].display_name
+ <>
+
+
+ side="right"
+ key={index}
+ >
+
+ onDragStart(event, {
+ //split type to remove type in nodes saved with same name removing it's
+ type: removeCountFromString(SBItemName),
+ node: dataFilter[SBSectionName][SBItemName],
+ })
+ }
+ color={nodeColors[SBSectionName]}
+ itemName={SBItemName}
+ //convert error to boolean
+ error={
+ !!dataFilter[SBSectionName][SBItemName].error
+ }
+ display_name={
+ dataFilter[SBSectionName][SBItemName].display_name
+ }
+ official={
+ dataFilter[SBSectionName][SBItemName].official ===
+ false
+ ? false
+ : true
+ }
+ />
+
+ ))}
+
+
+ {Object.keys(dataFilter[SBSectionName])
+ .sort((a, b) =>
+ sensitiveSort(
+ dataFilter[SBSectionName][a].display_name,
+ dataFilter[SBSectionName][b].display_name
+ )
)
- )
- .map((SBItemName: string, index) => (
-
-
- onDragStart(event, {
- //split type to remove type in nodes saved with same name removing it's
- type: removeCountFromString(SBItemName),
- node: dataFilter[SBSectionName][SBItemName],
- })
- }
- color={nodeColors[SBSectionName]}
- itemName={SBItemName}
- //convert error to boolean
- error={!!dataFilter[SBSectionName][SBItemName].error}
- display_name={
+ .map((SBItemName: string, index) => (
+
- ))}
-
-
+ {Object.keys(dataFilter[SBSectionName])
+ .sort((a, b) =>
+ sensitiveSort(
+ dataFilter[SBSectionName][a].display_name,
+ dataFilter[SBSectionName][b].display_name
+ )
+ )
+ .map((SBItemName: string, index) => (
+
+
+ onDragStart(event, {
+ //split type to remove type in nodes saved with same name removing it's
+ type: removeCountFromString(SBItemName),
+ node: dataFilter[SBSectionName][SBItemName],
+ })
+ }
+ color={nodeColors[SBSectionName]}
+ itemName={SBItemName}
+ //convert error to boolean
+ error={
+ !!dataFilter[SBSectionName][SBItemName].error
+ }
+ display_name={
+ dataFilter[SBSectionName][SBItemName]
+ .display_name
+ }
+ official={
+ dataFilter[SBSectionName][SBItemName]
+ .official === false
+ ? false
+ : true
+ }
+ />
+
+ ))}
+
+
+ {/* BUG ON THIS ICON */}
+
+
+
+
+
+ )}
+
+ ) : (
+
+ )
+ )}
+
+
+
-
+ {hasCode && (
+
+
+
+ )}
+
+
-
+
+
+
+
+ {/*
-
- {hasStore && (
-
-
-
- )}
+ />
+
+ */}
@@ -311,9 +624,13 @@ export default function NodeToolbarComponent({
index={6}
onConfirm={(index, user) => {
saveComponent(cloneDeep(data), true);
+ setSuccessData({ title: `${data.id} successfully overridden!` });
}}
onClose={setShowOverrideModal}
- onCancel={() => saveComponent(cloneDeep(data), false)}
+ onCancel={() => {
+ saveComponent(cloneDeep(data), false);
+ setSuccessData({ title: "New node successfully saved!" });
+ }}
>
@@ -328,12 +645,36 @@ export default function NodeToolbarComponent({
open={showModalAdvanced}
setOpen={setShowModalAdvanced}
/>
-
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/toolbarSelectItem/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/toolbarSelectItem/index.tsx
new file mode 100644
index 000000000..88e74623a
--- /dev/null
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/toolbarSelectItem/index.tsx
@@ -0,0 +1,51 @@
+import ForwardedIconComponent from "../../../../../components/genericIconComponent";
+import { toolbarSelectItemProps } from "../../../../../types/components";
+
+export default function ToolbarSelectItem({
+ shift,
+ isMac,
+ keyboardKey,
+ value,
+ icon,
+ styleObj,
+ dataTestId,
+ ping,
+}: toolbarSelectItemProps) {
+ return (
+
+ {openModal && (
+
+ )}
+
+ );
+}
diff --git a/src/frontend/src/pages/FlowPage/index.tsx b/src/frontend/src/pages/FlowPage/index.tsx
index 9aa88a6e2..a222dddcc 100644
--- a/src/frontend/src/pages/FlowPage/index.tsx
+++ b/src/frontend/src/pages/FlowPage/index.tsx
@@ -1,11 +1,13 @@
import { useEffect } from "react";
import { useParams } from "react-router-dom";
+import FlowToolbar from "../../components/chatComponent";
import Header from "../../components/headerComponent";
import { useDarkStore } from "../../stores/darkStore";
import useFlowsManagerStore from "../../stores/flowsManagerStore";
import Page from "./components/PageComponent";
+import ExtraSidebar from "./components/extraSidebarComponent";
-export default function FlowPage(): JSX.Element {
+export default function FlowPage({ view }: { view?: boolean }): JSX.Element {
const setCurrentFlowId = useFlowsManagerStore(
(state) => state.setCurrentFlowId
);
@@ -17,12 +19,22 @@ export default function FlowPage(): JSX.Element {
useEffect(() => {
setCurrentFlowId(id!);
}, [id]);
-
return (
<>