jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Revert "code format"

Browse source 
This reverts commit 8a0b240a7f.
This commit is contained in:
anovazzi1 2024-01-08 15:00:42 -03:00
commit 6aaad2d2cd
39 changed files with 167 additions and 191 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/frontend/src/App.tsx
View file

@ -17,12 +17,12 @@ import {
} from "./constants/constants";
import { AuthContext } from "./contexts/authContext";
import { locationContext } from "./contexts/locationContext";
import { getHealth } from "./controllers/API";
import { getHealth, getRepoStars, getVersion } from "./controllers/API";
import Router from "./routes";
import useAlertStore from "./stores/alertStore";
import { useTypesStore } from "./stores/typesStore";
import { useDarkStore } from "./stores/darkStore";
import useFlowsManagerStore from "./stores/flowsManagerStore";
import { useTypesStore } from "./stores/typesStore";
export default function App() {
let { setCurrent, setShowSideBar, setIsStackedOpen } =
@ -147,6 +147,7 @@ export default function App() {
refreshFlows();
});
}
}, [isAuthenticated]);
useEffect(() => {

16
src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
View file

@ -1,5 +1,11 @@
import { cloneDeep } from "lodash";
import React, { ReactNode, useEffect, useRef, useState } from "react";
import React, {
ReactNode,
useContext,
useEffect,
useRef,
useState,
} from "react";
import { Handle, Position } from "reactflow";
import ShadTooltip from "../../../../components/ShadTooltipComponent";
import CodeAreaComponent from "../../../../components/codeAreaComponent";
@ -23,8 +29,6 @@ import {
import { postCustomComponentUpdate } from "../../../../controllers/API";
import useAlertStore from "../../../../stores/alertStore";
import useFlowStore from "../../../../stores/flowStore";
import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
import { useTypesStore } from "../../../../stores/typesStore";
import { APIClassType } from "../../../../types/api";
import { ParameterComponentType } from "../../../../types/components";
import { NodeDataType } from "../../../../types/flow";
@ -41,6 +45,8 @@ import {
nodeNames,
} from "../../../../utils/styleUtils";
import { classNames, groupByFamily } from "../../../../utils/utils";
import { useTypesStore } from "../../../../stores/typesStore";
import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
export default function ParameterComponent({
left,
@ -106,7 +112,7 @@ export default function ParameterComponent({
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) => {
@ -294,7 +300,7 @@ export default function ParameterComponent({
) : (
<div
ref={ref}
className="relative mt-1 flex w-full flex-wrap items-center justify-between bg-muted px-5 py-2"
className="mt-1 flex w-full flex-wrap items-center justify-between relative bg-muted px-5 py-2"
>
<>
<div

6
src/frontend/src/CustomNodes/GenericNode/index.tsx
View file

@ -1,4 +1,4 @@
import { useEffect, useState } from "react";
import { useContext, useEffect, useState } from "react";
import { NodeToolbar } from "reactflow";
import ShadTooltip from "../../components/ShadTooltipComponent";
import Tooltip from "../../components/TooltipComponent";
@ -9,14 +9,14 @@ import { priorityFields } from "../../constants/constants";
import { useSSE } from "../../contexts/SSEContext";
import NodeToolbarComponent from "../../pages/FlowPage/components/nodeToolbarComponent";
import useFlowStore from "../../stores/flowStore";
import useFlowsManagerStore from "../../stores/flowsManagerStore";
import { useTypesStore } from "../../stores/typesStore";
import { validationStatusType } from "../../types/components";
import { NodeDataType } from "../../types/flow";
import { handleKeyDown, scapedJSONStringfy } from "../../utils/reactflowUtils";
import { nodeColors, nodeIconsLucide } from "../../utils/styleUtils";
import { classNames, cn, getFieldTitle } from "../../utils/utils";
import ParameterComponent from "./components/parameterComponent";
import { useTypesStore } from "../../stores/typesStore";
import useFlowsManagerStore from "../../stores/flowsManagerStore";
export default function GenericNode({
data,

11
src/frontend/src/components/authAdminGuard/index.tsx
View file

@ -1,10 +1,15 @@
import { useContext } from "react";
import { useContext, useEffect } from "react";
import { Navigate } from "react-router-dom";
import { AuthContext } from "../../contexts/authContext";
export const ProtectedAdminRoute = ({ children }) => {
const { isAdmin, isAuthenticated, logout, userData, autoLogin } =
useContext(AuthContext);
const {
isAdmin,
isAuthenticated,
logout,
userData,
autoLogin,
} = useContext(AuthContext);
if (!isAuthenticated) {
logout();

3
src/frontend/src/components/authGuard/index.tsx
View file

@ -3,7 +3,8 @@ import { Navigate } from "react-router-dom";
import { AuthContext } from "../../contexts/authContext";
export const ProtectedRoute = ({ children }) => {
const { isAuthenticated, logout } = useContext(AuthContext);
const { isAuthenticated, logout} =
useContext(AuthContext);
if (!isAuthenticated) {
logout();
return <Navigate to="/login" replace />;

4
src/frontend/src/components/cardComponent/index.tsx
View file

@ -1,8 +1,7 @@
import { useEffect, useState } from "react";
import { useContext, useEffect, useState } from "react";
import { getComponent, postLikeComponent } from "../../controllers/API";
import DeleteConfirmationModal from "../../modals/DeleteConfirmationModal";
import useAlertStore from "../../stores/alertStore";
import useFlowsManagerStore from "../../stores/flowsManagerStore";
import { useStoreStore } from "../../stores/storeStore";
import { storeComponent } from "../../types/store";
import cloneFLowWithParent from "../../utils/storeUtils";
@ -18,6 +17,7 @@ import {
CardHeader,
CardTitle,
} from "../ui/card";
import useFlowsManagerStore from "../../stores/flowsManagerStore";
export default function CollectionCardComponent({
data,

3
src/frontend/src/components/chatComponent/buildTrigger/index.tsx
View file

@ -1,5 +1,5 @@
import { Transition } from "@headlessui/react";
import { useState } from "react";
import { useContext, useState } from "react";
import Loading from "../../../components/ui/loading";
import { useSSE } from "../../../contexts/SSEContext";
import { postBuildInit } from "../../../controllers/API";
@ -9,6 +9,7 @@ import useAlertStore from "../../../stores/alertStore";
import useFlowStore from "../../../stores/flowStore";
import useFlowsManagerStore from "../../../stores/flowsManagerStore";
import { parsedDataType } from "../../../types/components";
import { FlowState } from "../../../types/tabs";
import { validateNodes } from "../../../utils/reactflowUtils";
import RadialProgressComponent from "../../RadialProgress";
import IconComponent from "../../genericIconComponent";

12
src/frontend/src/components/chatComponent/index.tsx
View file

@ -1,4 +1,4 @@
import { useEffect, useRef, useState } from "react";
import { useContext, useEffect, useRef, useState } from "react";
import { useNodes } from "reactflow";
import { ChatType } from "../../types/chat";
import BuildTrigger from "./buildTrigger";
@ -8,17 +8,15 @@ import * as _ from "lodash";
import { getBuildStatus } from "../../controllers/API";
import FormModal from "../../modals/formModal";
import useFlowStore from "../../stores/flowStore";
import useFlowsManagerStore from "../../stores/flowsManagerStore";
import { NodeType } from "../../types/flow";
import useFlowsManagerStore from "../../stores/flowsManagerStore";
export default function Chat({ flow }: ChatType): JSX.Element {
const [open, setOpen] = useState(false);
const [canOpen, setCanOpen] = useState(false);
const isBuilt = useFlowStore((state) => state.isBuilt);
const setIsBuilt = useFlowStore((state) => state.setIsBuilt);
const currentFlowState = useFlowsManagerStore(
(state) => state.currentFlowState
);
const currentFlowState = useFlowsManagerStore((state) => state.currentFlowState);
useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
@ -55,7 +53,9 @@ export default function Chat({ flow }: ChatType): JSX.Element {
const currentNodes = nodes.map((node: NodeType) =>
_.cloneDeep(node.data.node?.template)
);
if (JSON.stringify(prevNodes) !== JSON.stringify(currentNodes)) {
if (
JSON.stringify(prevNodes) !== JSON.stringify(currentNodes)
) {
setIsBuilt(false);
}
if (

6
src/frontend/src/components/headerComponent/components/menuBar/index.tsx
View file

@ -1,4 +1,4 @@
import { useState } from "react";
import { useContext, useState } from "react";
import {
DropdownMenu,
DropdownMenuContent,
@ -49,7 +49,9 @@ export const MenuBar = (): JSX.Element => {
<DropdownMenuTrigger asChild>
<Button asChild variant="primary" size="sm">
<div className="header-menu-bar-display">
<div className="header-menu-flow-name">{currentFlow.name}</div>
<div className="header-menu-flow-name">
{currentFlow.name}
</div>
<IconComponent name="ChevronDown" className="h-4 w-4" />
</div>
</Button>

5
src/frontend/src/components/headerComponent/index.tsx
View file

@ -166,10 +166,7 @@ export default function Header(): JSX.Element {
<button
className={
"h-7 w-7 rounded-full focus-visible:outline-0 " +
(userData?.profile_image ??
gradients[
parseInt(userData?.id ?? "", 30) % gradients.length
])
(userData?.profile_image ?? gradients[parseInt(userData?.id ?? "", 30) % gradients.length])
}
/>
</DropdownMenuTrigger>

4
src/frontend/src/components/inputFileComponent/index.tsx
View file

@ -1,9 +1,9 @@
import { useEffect, useState } from "react";
import { useContext, useEffect, useState } from "react";
import { uploadFile } from "../../controllers/API";
import useAlertStore from "../../stores/alertStore";
import useFlowsManagerStore from "../../stores/flowsManagerStore";
import { FileComponentType } from "../../types/components";
import IconComponent from "../genericIconComponent";
import useFlowsManagerStore from "../../stores/flowsManagerStore";
export default function InputFileComponent({
value,

5
src/frontend/src/components/intComponent/index.tsx
View file

@ -1,9 +1,6 @@
import { useEffect } from "react";
import { IntComponentType } from "../../types/components";
import {
handleKeyDown,
handleOnlyIntegerInput,
} from "../../utils/reactflowUtils";
import { handleKeyDown, handleOnlyIntegerInput } from "../../utils/reactflowUtils";
import { Input } from "../ui/input";
export default function IntComponent({

10
src/frontend/src/components/ui/checkbox.tsx
View file

@ -26,13 +26,7 @@ const Checkbox = React.forwardRef<
));
Checkbox.displayName = CheckboxPrimitive.Root.displayName;
const CheckBoxDiv = ({
className = "",
checked,
}: {
className?: string;
checked?: boolean;
}) => (
const CheckBoxDiv = (({ className = "", checked }: {className?: string, checked?: boolean}) => (
<div
className={cn(
className,
@ -46,6 +40,6 @@ const CheckBoxDiv = ({
</div>
)}
</div>
);
));
export { CheckBoxDiv, Checkbox };

9
src/frontend/src/contexts/authContext.tsx
View file

@ -35,7 +35,7 @@ export function AuthProvider({ children }): React.ReactElement {
);
const [isAuthenticated, setIsAuthenticated] = useState<boolean>(
!!cookies.get("refresh_tkn_lflw") && !!cookies.get("access_tkn_lflw")
);
);
const [isAdmin, setIsAdmin] = useState<boolean>(false);
const [userData, setUserData] = useState<Users | null>(null);
const [autoLogin, setAutoLogin] = useState<boolean>(false);
@ -81,7 +81,7 @@ export function AuthProvider({ children }): React.ReactElement {
});
}, [setUserData, setLoading, autoLogin, setIsAdmin]);
function getUser() {
function getUser(){
getLoggedUser()
.then((user) => {
setUserData(user);
@ -101,9 +101,8 @@ export function AuthProvider({ children }): React.ReactElement {
setAccessToken(newAccessToken);
setRefreshToken(refreshToken);
setIsAuthenticated(true);
setTimeout(() => {
getUser();
}, 500);
setTimeout(() => {getUser();}, 500)
}
function logout() {

4
src/frontend/src/contexts/index.tsx
View file

@ -17,7 +17,9 @@ export default function ContextWrapper({ children }: { children: ReactNode }) {
<ReactFlowProvider>
<LocationProvider>
<ApiInterceptor />
<SSEProvider>{children}</SSEProvider>
<SSEProvider>
{children}
</SSEProvider>
</LocationProvider>
</ReactFlowProvider>
</TooltipProvider>

9
src/frontend/src/contexts/typesContext.tsx
View file

@ -1,9 +1,16 @@
import _ from "lodash";
import { createContext, ReactNode, useState } from "react";
import {
createContext,
ReactNode,
useContext,
useEffect,
useState,
} from "react";
import { getAll, getHealth } from "../controllers/API";
import useAlertStore from "../stores/alertStore";
import { APIKindType } from "../types/api";
import { typesContextType } from "../types/typesContext";
import { AuthContext } from "./authContext";
//context to share types adn functions from nodes to flow

14
src/frontend/src/modals/ApiModal/index.tsx
View file

@ -58,12 +58,7 @@ const ApiModal = forwardRef(
tweak.current,
currentFlowState
);
const curl_code = getCurlCode(
flow,
autoLogin,
tweak.current,
currentFlowState
);
const curl_code = getCurlCode(flow, autoLogin, tweak.current, currentFlowState);
const pythonCode = getPythonCode(flow, tweak.current, currentFlowState);
const widgetCode = getWidgetCode(flow, autoLogin, currentFlowState);
const tweaksCode = buildTweaks(flow);
@ -178,12 +173,7 @@ const ApiModal = forwardRef(
tweak.current,
currentFlowState
);
const curl_code = getCurlCode(
flow,
autoLogin,
tweak.current,
currentFlowState
);
const curl_code = getCurlCode(flow, autoLogin, tweak.current, currentFlowState);
const pythonCode = getPythonCode(flow, tweak.current, currentFlowState);
const widgetCode = getWidgetCode(flow, autoLogin, currentFlowState);

6
src/frontend/src/modals/exportModal/index.tsx
View file

@ -1,14 +1,14 @@
import { ReactNode, forwardRef, useEffect, useState } from "react";
import { ReactNode, forwardRef, useContext, useEffect, useState } from "react";
import EditFlowSettings from "../../components/EditFlowSettingsComponent";
import IconComponent from "../../components/genericIconComponent";
import { Button } from "../../components/ui/button";
import { Checkbox } from "../../components/ui/checkbox";
import { EXPORT_DIALOG_SUBTITLE } from "../../constants/constants";
import useAlertStore from "../../stores/alertStore";
import { useDarkStore } from "../../stores/darkStore";
import useFlowsManagerStore from "../../stores/flowsManagerStore";
import { downloadFlow, removeApiKeys } from "../../utils/reactflowUtils";
import BaseModal from "../baseModal";
import { useDarkStore } from "../../stores/darkStore";
import useFlowsManagerStore from "../../stores/flowsManagerStore";
const ExportModal = forwardRef(
(props: { children: ReactNode }, ref): JSX.Element => {

4
src/frontend/src/modals/flowSettingsModal/index.tsx
View file

@ -1,12 +1,12 @@
import { useEffect, useState } from "react";
import { useContext, useEffect, useState } from "react";
import EditFlowSettings from "../../components/EditFlowSettingsComponent";
import IconComponent from "../../components/genericIconComponent";
import { Button } from "../../components/ui/button";
import { SETTINGS_DIALOG_SUBTITLE } from "../../constants/constants";
import useFlowsManagerStore from "../../stores/flowsManagerStore";
import { FlowSettingsPropsType } from "../../types/components";
import { FlowType } from "../../types/flow";
import BaseModal from "../baseModal";
import useFlowsManagerStore from "../../stores/flowsManagerStore";
export default function FlowSettingsModal({
open,

17
src/frontend/src/modals/formModal/index.tsx
View file

@ -26,7 +26,7 @@ import { getBuildStatus } from "../../controllers/API";
import useAlertStore from "../../stores/alertStore";
import useFlowStore from "../../stores/flowStore";
import useFlowsManagerStore from "../../stores/flowsManagerStore";
import { FlowState } from "../../types/tabs";
import { FlowState, FlowsState } from "../../types/tabs";
import { validateNodes } from "../../utils/reactflowUtils";
export default function FormModal({
@ -629,12 +629,15 @@ export default function FormModal({
setChatValue={(value) => {
setChatValue(value);
if (currentFlowState && chatKey) {
setCurrentFlowState((old: FlowState | undefined) => {
let newFlowState = cloneDeep(old!);
newFlowState.formKeysData.input_keys![chatKey] =
value;
return newFlowState;
});
setCurrentFlowState(
(old: FlowState | undefined) => {
let newFlowState = cloneDeep(old!);
newFlowState.formKeysData.input_keys![
chatKey
] = value;
return newFlowState;
}
);
}
}}
inputRef={ref}

6
src/frontend/src/modals/shareModal/index.tsx
View file

@ -1,5 +1,5 @@
import { Loader2 } from "lucide-react";
import { ReactNode, useEffect, useMemo, useState } from "react";
import { ReactNode, useContext, useEffect, useMemo, useState } from "react";
import EditFlowSettings from "../../components/EditFlowSettingsComponent";
import IconComponent from "../../components/genericIconComponent";
import { TagsSelector } from "../../components/tagsSelectorComponent";
@ -12,8 +12,6 @@ import {
updateFlowStore,
} from "../../controllers/API";
import useAlertStore from "../../stores/alertStore";
import { useDarkStore } from "../../stores/darkStore";
import useFlowsManagerStore from "../../stores/flowsManagerStore";
import { useStoreStore } from "../../stores/storeStore";
import { FlowType } from "../../types/flow";
import {
@ -24,6 +22,8 @@ import {
import { getTagsIds } from "../../utils/storeUtils";
import ConfirmationModal from "../ConfirmationModal";
import BaseModal from "../baseModal";
import { useDarkStore } from "../../stores/darkStore";
import useFlowsManagerStore from "../../stores/flowsManagerStore";
export default function ShareModal({
component,

2
src/frontend/src/pages/AdminPage/LoginPage/index.tsx
View file

@ -4,7 +4,7 @@ import { Button } from "../../../components/ui/button";
import { Input } from "../../../components/ui/input";
import { CONTROL_LOGIN_STATE } from "../../../constants/constants";
import { AuthContext } from "../../../contexts/authContext";
import { onLogin } from "../../../controllers/API";
import { getLoggedUser, onLogin } from "../../../controllers/API";
import useAlertStore from "../../../stores/alertStore";
import { LoginType } from "../../../types/api";
import {

14
src/frontend/src/pages/AdminPage/index.tsx
View file

@ -30,9 +30,9 @@ import {
import ConfirmationModal from "../../modals/ConfirmationModal";
import UserManagementModal from "../../modals/UserManagementModal";
import useAlertStore from "../../stores/alertStore";
import useFlowsManagerStore from "../../stores/flowsManagerStore";
import { Users } from "../../types/api";
import { UserInputType } from "../../types/components";
import useFlowsManagerStore from "../../stores/flowsManagerStore";
export default function AdminPage() {
const [inputValue, setInputValue] = useState("");
@ -44,9 +44,7 @@ export default function AdminPage() {
const setErrorData = useAlertStore((state) => state.setErrorData);
const { userData } = useContext(AuthContext);
const [totalRowsCount, setTotalRowsCount] = useState(0);
const setCurrentFlowId = useFlowsManagerStore(
(state) => state.setCurrentFlowId
);
const setCurrentFlowId = useFlowsManagerStore((state) => state.setCurrentFlowId);
// set null id
useEffect(() => {
@ -335,7 +333,9 @@ export default function AdminPage() {
</ConfirmationModal.Content>
<ConfirmationModal.Trigger>
<div className="flex w-fit">
<CheckBoxDiv checked={user.is_active} />
<CheckBoxDiv
checked={user.is_active}
/>
</div>
</ConfirmationModal.Trigger>
</ConfirmationModal>
@ -367,7 +367,9 @@ export default function AdminPage() {
</ConfirmationModal.Content>
<ConfirmationModal.Trigger>
<div className="flex w-fit">
<CheckBoxDiv checked={user.is_superuser} />
<CheckBoxDiv
checked={user.is_superuser}
/>
</div>
</ConfirmationModal.Trigger>
</ConfirmationModal>

14
src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
View file

@ -18,6 +18,8 @@ import ReactFlow, {
SelectionDragHandler,
addEdge,
updateEdge,
useEdgesState,
useNodesState,
} from "reactflow";
import GenericNode from "../../../../CustomNodes/GenericNode";
import Chat from "../../../../components/chatComponent";
@ -222,7 +224,8 @@ export default function Page({
const onMoveEnd: OnMove = useCallback(() => {
// 👇 make moving the canvas undoable
autoSaveCurrentFlow(nodes, edges, reactFlowInstance?.getViewport()!);
}, [takeSnapshot, autoSaveCurrentFlow, nodes, edges, reactFlowInstance]);
}
, [takeSnapshot, autoSaveCurrentFlow, nodes, edges, reactFlowInstance]);
const onSelectionDragStart: SelectionDragHandler = useCallback(() => {
// 👇 make dragging a selection undoable
@ -287,16 +290,14 @@ export default function Page({
const newNode: NodeType = {
id: newId,
type: "genericNode",
position: { x: 0, y: 0 },
position: {x: 0, y:0},
data: {
...data,
id: newId,
},
};
paste(
{ nodes: [newNode], edges: [] },
{ x: event.clientX, y: event.clientY }
);
paste({ nodes: [newNode], edges: [] }, {x: event.clientX, y: event.clientY});
} else if (event.dataTransfer.types.some((types) => types === "Files")) {
takeSnapshot();
if (event.dataTransfer.files.item(0)!.type === "application/json") {
@ -383,6 +384,7 @@ export default function Page({
setFilterEdge([]);
}, []);
return (
<div className="flex h-full overflow-hidden">
{!view && <ExtraSidebar />}

37
src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
View file

@ -1,5 +1,5 @@
import { cloneDeep } from "lodash";
import { useEffect, useState } from "react";
import { useContext, useEffect, useState } from "react";
import ShadTooltip from "../../../../components/ShadTooltipComponent";
import IconComponent from "../../../../components/genericIconComponent";
import {
@ -11,9 +11,7 @@ import {
import ConfirmationModal from "../../../../modals/ConfirmationModal";
import EditNodeModal from "../../../../modals/EditNodeModal";
import ShareModal from "../../../../modals/shareModal";
import { useDarkStore } from "../../../../stores/darkStore";
import useFlowStore from "../../../../stores/flowStore";
import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
import { useStoreStore } from "../../../../stores/storeStore";
import { nodeToolbarPropsType } from "../../../../types/components";
import { FlowType } from "../../../../types/flow";
@ -24,6 +22,8 @@ import {
updateFlowPosition,
} from "../../../../utils/reactflowUtils";
import { classNames } from "../../../../utils/utils";
import { useDarkStore } from "../../../../stores/darkStore";
import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
export default function NodeToolbarComponent({
data,
@ -33,21 +33,22 @@ export default function NodeToolbarComponent({
numberOfHandles,
showNode,
}: nodeToolbarPropsType): JSX.Element {
const nodeLength = Object.keys(data.node!.template).filter(
(templateField) =>
templateField.charAt(0) !== "_" &&
data.node?.template[templateField].show &&
(data.node.template[templateField].type === "str" ||
data.node.template[templateField].type === "bool" ||
data.node.template[templateField].type === "float" ||
data.node.template[templateField].type === "code" ||
data.node.template[templateField].type === "prompt" ||
data.node.template[templateField].type === "file" ||
data.node.template[templateField].type === "Any" ||
data.node.template[templateField].type === "int" ||
data.node.template[templateField].type === "dict" ||
data.node.template[templateField].type === "NestedDict")
).length;
const nodeLength =
Object.keys(data.node!.template).filter(
(templateField) =>
templateField.charAt(0) !== "_" &&
data.node?.template[templateField].show &&
(data.node.template[templateField].type === "str" ||
data.node.template[templateField].type === "bool" ||
data.node.template[templateField].type === "float" ||
data.node.template[templateField].type === "code" ||
data.node.template[templateField].type === "prompt" ||
data.node.template[templateField].type === "file" ||
data.node.template[templateField].type === "Any" ||
data.node.template[templateField].type === "int" ||
data.node.template[templateField].type === "dict" ||
data.node.template[templateField].type === "NestedDict")
).length;
const hasStore = useStoreStore((state) => state.hasStore);
const hasApiKey = useStoreStore((state) => state.hasApiKey);

4
src/frontend/src/pages/MainPage/components/components/index.tsx
View file

@ -1,4 +1,4 @@
import { useEffect, useState } from "react";
import { useContext, useEffect, useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import PaginatorComponent from "../../../../components/PaginatorComponent";
import CollectionCardComponent from "../../../../components/cardComponent";
@ -7,8 +7,8 @@ import IconComponent from "../../../../components/genericIconComponent";
import { SkeletonCardComponent } from "../../../../components/skeletonCardComponent";
import { Button } from "../../../../components/ui/button";
import useAlertStore from "../../../../stores/alertStore";
import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
import { FlowType } from "../../../../types/flow";
import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
export default function ComponentsComponent({
is_component = true,

6
src/frontend/src/pages/MainPage/index.tsx
View file

@ -1,5 +1,5 @@
import { Group, ToyBrick } from "lucide-react";
import { useEffect } from "react";
import { useContext, useEffect } from "react";
import { Outlet, useLocation, useNavigate } from "react-router-dom";
import DropdownButton from "../../components/DropdownButtonComponent";
import IconComponent from "../../components/genericIconComponent";
@ -16,7 +16,9 @@ export default function HomePage(): JSX.Element {
const setCurrentFlowId = useFlowsManagerStore(
(state) => state.setCurrentFlowId
);
const uploadFlows = useFlowsManagerStore((state) => state.uploadFlows);
const uploadFlows = useFlowsManagerStore(
(state) => state.uploadFlows
);
const setSuccessData = useAlertStore((state) => state.setSuccessData);
const setErrorData = useAlertStore((state) => state.setErrorData);
const location = useLocation();

6
src/frontend/src/pages/ProfileSettingsPage/index.tsx
View file

@ -10,16 +10,14 @@ import { CONTROL_PATCH_USER_STATE } from "../../constants/constants";
import { AuthContext } from "../../contexts/authContext";
import { resetPassword, updateUser } from "../../controllers/API";
import useAlertStore from "../../stores/alertStore";
import useFlowsManagerStore from "../../stores/flowsManagerStore";
import {
inputHandlerEventType,
patchUserInputStateType,
} from "../../types/components";
import { gradients } from "../../utils/styleUtils";
import useFlowsManagerStore from "../../stores/flowsManagerStore";
export default function ProfileSettingsPage(): JSX.Element {
const setCurrentFlowId = useFlowsManagerStore(
(state) => state.setCurrentFlowId
);
const setCurrentFlowId = useFlowsManagerStore((state) => state.setCurrentFlowId);
const [inputState, setInputState] = useState<patchUserInputStateType>(
CONTROL_PATCH_USER_STATE

6
src/frontend/src/pages/StorePage/index.tsx
View file

@ -28,10 +28,10 @@ import {
} from "../../controllers/API";
import StoreApiKeyModal from "../../modals/StoreApiKeyModal";
import useAlertStore from "../../stores/alertStore";
import useFlowsManagerStore from "../../stores/flowsManagerStore";
import { useStoreStore } from "../../stores/storeStore";
import { storeComponent } from "../../types/store";
import { cn } from "../../utils/utils";
import useFlowsManagerStore from "../../stores/flowsManagerStore";
export default function StorePage(): JSX.Element {
const hasApiKey = useStoreStore((state) => state.hasApiKey);
@ -45,9 +45,7 @@ export default function StorePage(): JSX.Element {
const { apiKey } = useContext(AuthContext);
const setErrorData = useAlertStore((state) => state.setErrorData);
const setCurrentFlowId = useFlowsManagerStore(
(state) => state.setCurrentFlowId
);
const setCurrentFlowId = useFlowsManagerStore((state) => state.setCurrentFlowId);
const [loading, setLoading] = useState(true);
const [loadingTags, setLoadingTags] = useState(true);
const { id } = useParams();

10
src/frontend/src/pages/ViewPage/index.tsx
View file

@ -1,13 +1,11 @@
import { useEffect } from "react";
import { useParams } from "react-router-dom";
import useFlowsManagerStore from "../../stores/flowsManagerStore";
import Page from "../FlowPage/components/PageComponent";
import useFlowsManagerStore from "../../stores/flowsManagerStore";
export default function ViewPage() {
const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
const setCurrentFlowId = useFlowsManagerStore(
(state) => state.setCurrentFlowId
);
const setCurrentFlowId = useFlowsManagerStore((state) => state.setCurrentFlowId);
const { id } = useParams();
// Set flow tab id
@ -17,7 +15,9 @@ export default function ViewPage() {
return (
<div className="flow-page-positioning">
{currentFlow && <Page view flow={currentFlow} />}
{currentFlow && (
<Page view flow={currentFlow} />
)}
</div>
);
}

2
src/frontend/src/pages/loginPage/index.tsx
View file

@ -6,7 +6,7 @@ import { Button } from "../../components/ui/button";
import { Input } from "../../components/ui/input";
import { CONTROL_LOGIN_STATE } from "../../constants/constants";
import { AuthContext } from "../../contexts/authContext";
import { onLogin } from "../../controllers/API";
import { getLoggedUser, onLogin } from "../../controllers/API";
import useAlertStore from "../../stores/alertStore";
import { LoginType } from "../../types/api";
import {

1
src/frontend/src/stores/flowStore.ts
View file

@ -1,5 +1,6 @@
import { cloneDeep } from "lodash";
import {
Connection,
Edge,
EdgeChange,
Node,

22
src/frontend/src/stores/flowsManagerStore.ts
View file

@ -352,11 +352,9 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
JSON.stringify(past[currentFlowId][pastLength - 1]) !==
JSON.stringify(newState)
) {
past[currentFlowId] = past[currentFlowId].slice(
pastLength - defaultOptions.maxHistorySize + 1,
pastLength
);
past[currentFlowId] = past[currentFlowId]
.slice(pastLength - defaultOptions.maxHistorySize + 1, pastLength)
past[currentFlowId].push(newState);
} else {
past[currentFlowId] = [newState];
@ -373,11 +371,8 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
if (pastState) {
past[currentFlowId] = past[currentFlowId].slice(0, pastLength - 1);
if (!future[currentFlowId]) future[currentFlowId] = [];
future[currentFlowId].push({
nodes: newState.nodes,
edges: newState.edges,
});
if(!future[currentFlowId]) future[currentFlowId] = [];
future[currentFlowId].push({ nodes: newState.nodes, edges: newState.edges });
newState.setNodes(pastState.nodes);
newState.setEdges(pastState.edges);
@ -392,11 +387,8 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
if (futureState) {
future[currentFlowId] = future[currentFlowId].slice(0, futureLength - 1);
if (!past[currentFlowId]) past[currentFlowId] = [];
past[currentFlowId].push({
nodes: newState.nodes,
edges: newState.edges,
});
if(!past[currentFlowId]) past[currentFlowId] = [];
past[currentFlowId].push({ nodes: newState.nodes, edges: newState.edges });
newState.setNodes(futureState.nodes);
newState.setEdges(futureState.edges);

9
src/frontend/src/types/components/index.ts
View file

@ -4,6 +4,7 @@ import { APIClassType, APITemplateType, TemplateVariableType } from "../api";
import { ChatMessageType } from "../chat";
import { FlowStyleType, FlowType, NodeDataType, NodeType } from "../flow/index";
import { sourceHandleType, targetHandleType } from "./../flow/index";
import { TypesStoreType } from "../zustand/types";
export type InputComponentType = {
autoFocus?: boolean;
onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
@ -262,6 +263,7 @@ export type LoadingComponentProps = {
export type ContentProps = {
children: ReactNode;
};
export type HeaderProps = { children: ReactNode; description: string };
export type TriggerProps = {
@ -303,9 +305,10 @@ export type ConfirmationModalType = {
modalContentTitle?: string;
cancelText: string;
confirmationText: string;
children:
| [React.ReactElement<ContentProps>, React.ReactElement<TriggerProps>]
| React.ReactElement<ContentProps>;
children: [
React.ReactElement<ContentProps>,
React.ReactElement<TriggerProps>
] | React.ReactElement<ContentProps>;
icon: string;
data?: any;
index?: number;

1
src/frontend/src/types/zustand/flow/index.ts
View file

@ -1,6 +1,7 @@
import {
Edge,
Node,
OnConnect,
OnEdgesChange,
OnNodesChange,
ReactFlowInstance,

36
src/frontend/src/types/zustand/flowsManager/index.ts
View file

@ -1,4 +1,4 @@
import { Edge, Node, Viewport, XYPosition } from "reactflow";
import { Node, Edge, Viewport, XYPosition } from "reactflow";
import { FlowType } from "../../flow";
import { FlowState, FlowsState } from "../../tabs";
@ -12,40 +12,16 @@ export type FlowsManagerStoreType = {
setIsLoading: (isLoading: boolean) => void;
flowsState: FlowsState;
currentFlowState: FlowState | undefined;
setCurrentFlowState: (
state: FlowState | ((oldState: FlowState | undefined) => FlowState)
) => void;
setCurrentFlowState: (state: FlowState | ((oldState: FlowState | undefined) => FlowState)) => void;
refreshFlows: () => Promise<void>;
saveFlow: (flow: FlowType, silent?: boolean) => Promise<void>;
autoSaveCurrentFlow: (
nodes: Node[],
edges: Edge[],
viewport: Viewport
) => void;
autoSaveCurrentFlow: (nodes: Node[], edges: Edge[], viewport: Viewport) => void;
uploadFlows: () => Promise<void>;
uploadFlow: ({
newProject,
file,
isComponent,
position,
}: {
newProject: boolean;
file?: File;
isComponent?: boolean;
position?: XYPosition;
}) => Promise<string | never>;
addFlow: (
newProject: boolean,
flow?: FlowType,
override?: boolean,
position?: XYPosition
) => Promise<string | undefined>;
uploadFlow: ({newProject, file, isComponent, position}: {newProject: boolean, file?: File, isComponent?: boolean, position?: XYPosition}) => Promise<string | never>;
addFlow: (newProject: boolean, flow?: FlowType, override?: boolean, position?: XYPosition) => Promise<string | undefined>;
deleteComponent: (key: string) => Promise<void>;
removeFlow: (id: string) => Promise<void>;
saveComponent: (
component: any,
override: boolean
) => Promise<string | undefined>;
saveComponent: (component: any, override: boolean) => Promise<string | undefined>;
undo: () => void;
redo: () => void;
takeSnapshot: () => void;

20
src/frontend/src/types/zustand/types/index.ts
View file

@ -1,13 +1,13 @@
import { APIClassType, APIDataType } from "../../api";
export type TypesStoreType = {
types: { [char: string]: string };
setTypes: (newState: {}) => void;
templates: { [char: string]: APIClassType };
setTemplates: (newState: {}) => void;
data: APIDataType;
setData: (newState: {}) => void;
getTypes: () => Promise<void>;
setFilterEdge: (newState) => void;
getFilterEdge: any[];
};
types: { [char: string]: string };
setTypes: (newState: {}) => void;
templates: { [char: string]: APIClassType };
setTemplates: (newState: {}) => void;
data: APIDataType;
setData: (newState: {}) => void;
getTypes: () => Promise<void>;
setFilterEdge: (newState) => void;
getFilterEdge: any[];
}

4
src/frontend/src/utils/reactflowUtils.ts
View file

@ -415,9 +415,7 @@ export function handleKeyDown(
}
}
export function handleOnlyIntegerInput(
event: React.KeyboardEvent<HTMLInputElement>
) {
export function handleOnlyIntegerInput(event: React.KeyboardEvent<HTMLInputElement>) {
if (
event.key === "." ||
event.key === "-" ||

5
src/frontend/src/utils/utils.ts
View file

@ -297,10 +297,7 @@ export function buildTweakObject(tweak: tweakType) {
* @param {FlowsState} tabsState - The current tabs state.
* @returns {string} - The chat input field
*/
export function getChatInputField(
flow: FlowType,
currentFlowState?: FlowState
) {
export function getChatInputField(flow: FlowType, currentFlowState?: FlowState) {
let chat_input_field = "text";
if (