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

Refactor code formatting

Browse source
This commit is contained in:
anovazzi1 2024-01-08 15:35:40 -03:00
commit e9f5ad4017
34 changed files with 278 additions and 277 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -16,13 +16,13 @@ import {
FETCH_ERROR_MESSAGE,
} from "./constants/constants";
import { AuthContext } from "./contexts/authContext";
import { getHealth, getRepoStars, getVersion } from "./controllers/API";
import { getHealth } 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 { useLocationStore } from "./stores/locationStore";
import { useTypesStore } from "./stores/typesStore";
export default function App() {
const setCurrent = useLocationStore((state) => state.setCurrent);
@ -149,7 +149,6 @@ export default function App() {
refreshFlows();
});
}
}, [isAuthenticated]);
useEffect(() => {

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

@ -1,11 +1,5 @@
import { cloneDeep } from "lodash";
import React, {
ReactNode,
useContext,
useEffect,
useRef,
useState,
} from "react";
import React, { ReactNode, useEffect, useRef, useState } from "react";
import { Handle, Position } from "reactflow";
import ShadTooltip from "../../../../components/ShadTooltipComponent";
import CodeAreaComponent from "../../../../components/codeAreaComponent";
@ -29,6 +23,8 @@ 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";
@ -45,8 +41,6 @@ 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,
@ -112,7 +106,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) => {
@ -300,7 +294,7 @@ export default function ParameterComponent({
) : (
<div
ref={ref}
className="mt-1 flex w-full flex-wrap items-center justify-between relative bg-muted px-5 py-2"
className="relative mt-1 flex w-full flex-wrap items-center justify-between bg-muted px-5 py-2"
>
<>
<div

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

@ -1,4 +1,4 @@
import { useContext, useEffect, useState } from "react";
import { useEffect, useState } from "react";
import { NodeToolbar } from "reactflow";
import ShadTooltip from "../../components/ShadTooltipComponent";
import Tooltip from "../../components/TooltipComponent";
@ -8,14 +8,14 @@ import { Textarea } from "../../components/ui/textarea";
import { priorityFields } from "../../constants/constants";
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,

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

@ -1,7 +1,8 @@
import { useContext, useEffect, useState } from "react";
import { 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";
@ -17,7 +18,6 @@ import {
CardHeader,
CardTitle,
} from "../ui/card";
import useFlowsManagerStore from "../../stores/flowsManagerStore";
export default function CollectionCardComponent({
data,

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

@ -10,7 +10,6 @@ import { parsedDataType } from "../../../types/components";
import { validateNodes } from "../../../utils/reactflowUtils";
import RadialProgressComponent from "../../RadialProgress";
import IconComponent from "../../genericIconComponent";
import { stat } from "fs";
export default function BuildTrigger({
open,
@ -29,9 +28,7 @@ export default function BuildTrigger({
const edges = useFlowStore((state) => state.edges);
const setErrorData = useAlertStore((state) => state.setErrorData);
const setSuccessData = useAlertStore((state) => state.setSuccessData);
const setFlowState = useFlowStore(
(state) => state.setFlowState
);
const setFlowState = useFlowStore((state) => state.setFlowState);
const eventClick = isBuilding ? "pointer-events-none" : "";
const [progress, setProgress] = useState(0);

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

@ -1,4 +1,4 @@
import { useContext, useEffect, useRef, useState } from "react";
import { useEffect, useRef, useState } from "react";
import { useNodes } from "reactflow";
import { ChatType } from "../../types/chat";
import BuildTrigger from "./buildTrigger";
@ -9,7 +9,6 @@ import { getBuildStatus } from "../../controllers/API";
import FormModal from "../../modals/formModal";
import useFlowStore from "../../stores/flowStore";
import { NodeType } from "../../types/flow";
import useFlowsManagerStore from "../../stores/flowsManagerStore";
export default function Chat({ flow }: ChatType): JSX.Element {
const [open, setOpen] = useState(false);
@ -51,9 +50,7 @@ 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);
}
prevNodesRef.current = currentNodes;
@ -68,16 +65,9 @@ export default function Chat({ flow }: ChatType): JSX.Element {
setIsBuilt={setIsBuilt}
isBuilt={isBuilt}
/>
{isBuilt &&
flowState &&
!!flowState?.input_keys && (
<FormModal
key={flow.id}
flow={flow}
open={open}
setOpen={setOpen}
/>
)}
{isBuilt && flowState && !!flowState?.input_keys && (
<FormModal key={flow.id} flow={flow} open={open} setOpen={setOpen} />
)}
<ChatTrigger
canOpen={!!flowState?.input_keys}
open={open}

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

@ -1,4 +1,4 @@
import { useContext, useState } from "react";
import { useState } from "react";
import {
DropdownMenu,
DropdownMenuContent,
@ -49,9 +49,7 @@ 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>

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

@ -1,9 +1,9 @@
import { useContext, useEffect, useState } from "react";
import { 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,6 +1,9 @@
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({

2
src/frontend/src/components/ui/accordion.tsx
View file

@ -27,7 +27,7 @@ const AccordionTrigger = React.forwardRef<
<AccordionPrimitive.Trigger asChild ref={ref} {...props}>
<div
className={cn(
"cursor-pointer flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all [&[data-state=open]>svg]:rotate-180",
"flex flex-1 cursor-pointer items-center justify-between py-4 text-sm font-medium transition-all [&[data-state=open]>svg]:rotate-180",
className
)}
>

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

@ -26,7 +26,13 @@ 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,
@ -40,6 +46,6 @@ const CheckBoxDiv = (({ className = "", checked }: {className?: string, checked?
</div>
)}
</div>
));
);
export { CheckBoxDiv, Checkbox };

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

@ -13,8 +13,8 @@ export default function ContextWrapper({ children }: { children: ReactNode }) {
<AuthProvider>
<TooltipProvider>
<ReactFlowProvider>
<ApiInterceptor />
{children}
<ApiInterceptor />
{children}
</ReactFlowProvider>
</TooltipProvider>
</AuthProvider>

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

@ -18,7 +18,7 @@ import {
LANGFLOW_SUPPORTED_TYPES,
} from "../../constants/constants";
import { AuthContext } from "../../contexts/authContext";
import useFlowsManagerStore from "../../stores/flowsManagerStore";
import useFlowStore from "../../stores/flowStore";
import { TemplateVariableType } from "../../types/api";
import { tweakType, uniqueTweakType } from "../../types/components";
import { FlowType, NodeType } from "../../types/flow/index";
@ -31,7 +31,6 @@ import {
tabsArray,
} from "../../utils/utils";
import BaseModal from "../baseModal";
import useFlowStore from "../../stores/flowStore";
const ApiModal = forwardRef(
(
@ -50,9 +49,7 @@ const ApiModal = forwardRef(
const tweak = useRef<tweakType>([]);
const tweaksList = useRef<string[]>([]);
const [getTweak, setTweak] = useState<tweakType>([]);
const flowState = useFlowStore(
(state) => state.flowState
);
const flowState = useFlowStore((state) => state.flowState);
const pythonApiCode = getPythonApiCode(
flow,
autoLogin,

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

@ -1,14 +1,14 @@
import { ReactNode, forwardRef, useContext, useEffect, useState } from "react";
import { ReactNode, forwardRef, 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 { downloadFlow, removeApiKeys } from "../../utils/reactflowUtils";
import BaseModal from "../baseModal";
import { useDarkStore } from "../../stores/darkStore";
import useFlowsManagerStore from "../../stores/flowsManagerStore";
import { downloadFlow, removeApiKeys } from "../../utils/reactflowUtils";
import BaseModal from "../baseModal";
const ExportModal = forwardRef(
(props: { children: ReactNode }, ref): JSX.Element => {

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

@ -1,12 +1,12 @@
import { useContext, useEffect, useState } from "react";
import { 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,

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

@ -25,8 +25,7 @@ import { AuthContext } from "../../contexts/authContext";
import { getBuildStatus } from "../../controllers/API";
import useAlertStore from "../../stores/alertStore";
import useFlowStore from "../../stores/flowStore";
import useFlowsManagerStore from "../../stores/flowsManagerStore";
import { FlowState, FlowsState } from "../../types/tabs";
import { FlowState } from "../../types/tabs";
import { validateNodes } from "../../utils/reactflowUtils";
export default function FormModal({
@ -40,12 +39,8 @@ export default function FormModal({
}): JSX.Element {
const nodes = useFlowStore((state) => state.nodes);
const edges = useFlowStore((state) => state.edges);
const flowState = useFlowStore(
(state) => state.flowState
);
const setFlowState = useFlowStore(
(state) => state.setFlowState
);
const flowState = useFlowStore((state) => state.flowState);
const setFlowState = useFlowStore((state) => state.setFlowState);
const [chatValue, setChatValue] = useState(() => {
try {
if (!flowState) {
@ -468,72 +463,63 @@ export default function FormModal({
</div>
{flowState?.input_keys
? Object.keys(flowState?.input_keys!).map(
(key, index) => (
<div className="file-component-accordion-div" key={index}>
<AccordionComponent
trigger={
<div className="file-component-badge-div">
<Badge variant="gray" size="md">
{key}
</Badge>
? Object.keys(flowState?.input_keys!).map((key, index) => (
<div className="file-component-accordion-div" key={index}>
<AccordionComponent
trigger={
<div className="file-component-badge-div">
<Badge variant="gray" size="md">
{key}
</Badge>
<div
className="-mb-1"
onClick={(event) => {
event.stopPropagation();
}}
>
<ToggleShadComponent
enabled={chatKey === key}
setEnabled={(value) =>
handleOnCheckedChange(value, key)
}
size="small"
disabled={flowState.handle_keys!.some(
(t) => t === key
)}
/>
</div>
</div>
}
key={index}
keyValue={key}
>
<div className="file-component-tab-column">
{flowState?.handle_keys!.some(
(t) => t === key
) && (
<div className="font-normal text-muted-foreground ">
Source: Component
</div>
)}
<Textarea
className="custom-scroll"
value={
flowState?.input_keys![key]
}
onChange={(e) => {
if (flowState) {
setFlowState(
(old: FlowState | undefined) => {
let newFlowState = cloneDeep(old!);
newFlowState.input_keys![
key
] = e.target.value;
return newFlowState;
}
);
}
<div
className="-mb-1"
onClick={(event) => {
event.stopPropagation();
}}
disabled={chatKey === key}
placeholder="Enter text..."
></Textarea>
>
<ToggleShadComponent
enabled={chatKey === key}
setEnabled={(value) =>
handleOnCheckedChange(value, key)
}
size="small"
disabled={flowState.handle_keys!.some(
(t) => t === key
)}
/>
</div>
</div>
</AccordionComponent>
</div>
)
)
}
key={index}
keyValue={key}
>
<div className="file-component-tab-column">
{flowState?.handle_keys!.some((t) => t === key) && (
<div className="font-normal text-muted-foreground ">
Source: Component
</div>
)}
<Textarea
className="custom-scroll"
value={flowState?.input_keys![key]}
onChange={(e) => {
if (flowState) {
setFlowState((old: FlowState | undefined) => {
let newFlowState = cloneDeep(old!);
newFlowState.input_keys![key] =
e.target.value;
return newFlowState;
});
}
}}
disabled={chatKey === key}
placeholder="Enter text..."
></Textarea>
</div>
</AccordionComponent>
</div>
))
: null}
{flowState?.memory_keys!.map((key, index) => (
<div className="file-component-accordion-div" key={index}>
@ -628,15 +614,11 @@ export default function FormModal({
setChatValue={(value) => {
setChatValue(value);
if (flowState && chatKey) {
setFlowState(
(old: FlowState | undefined) => {
let newFlowState = cloneDeep(old!);
newFlowState.input_keys![
chatKey
] = value;
return newFlowState;
}
);
setFlowState((old: FlowState | undefined) => {
let newFlowState = cloneDeep(old!);
newFlowState.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, useContext, useEffect, useMemo, useState } from "react";
import { ReactNode, useEffect, useMemo, useState } from "react";
import EditFlowSettings from "../../components/EditFlowSettingsComponent";
import IconComponent from "../../components/genericIconComponent";
import { TagsSelector } from "../../components/tagsSelectorComponent";
@ -12,6 +12,8 @@ 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 {
@ -22,8 +24,6 @@ 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,

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,7 +44,9 @@ 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(() => {
@ -333,9 +335,7 @@ 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,9 +367,7 @@ 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>

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

@ -18,6 +18,7 @@ import Loading from "../../../../components/ui/loading";
import useAlertStore from "../../../../stores/alertStore";
import useFlowStore from "../../../../stores/flowStore";
import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
import { useLocationStore } from "../../../../stores/locationStore";
import { useTypesStore } from "../../../../stores/typesStore";
import { APIClassType } from "../../../../types/api";
import { FlowType, NodeType, targetHandleType } from "../../../../types/flow";
@ -33,7 +34,6 @@ import { cn, getRandomName, isWrappedWithClass } from "../../../../utils/utils";
import ConnectionLineComponent from "../ConnectionLineComponent";
import SelectionMenu from "../SelectionMenuComponent";
import ExtraSidebar from "../extraSidebarComponent";
import { useLocationStore } from "../../../../stores/locationStore";
const nodeTypes = {
genericNode: GenericNode,
@ -179,7 +179,7 @@ export default function Page({
nodes: flow?.data?.nodes ?? [],
edges: flow?.data?.edges ?? [],
viewport: flow?.data?.viewport ?? { zoom: 1, x: 0, y: 0 },
})
});
}
// Clear the previous timeout

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

@ -1,5 +1,5 @@
import { cloneDeep } from "lodash";
import { useContext, useEffect, useState } from "react";
import { useEffect, useState } from "react";
import ShadTooltip from "../../../../components/ShadTooltipComponent";
import IconComponent from "../../../../components/genericIconComponent";
import {
@ -11,7 +11,9 @@ 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";
@ -22,8 +24,6 @@ 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,22 +33,21 @@ 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 { useContext, useEffect, useState } from "react";
import { 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 { FlowType } from "../../../../types/flow";
import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
import { FlowType } from "../../../../types/flow";
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 { useContext, useEffect } from "react";
import { useEffect } from "react";
import { Outlet, useLocation, useNavigate } from "react-router-dom";
import DropdownButton from "../../components/DropdownButtonComponent";
import IconComponent from "../../components/genericIconComponent";
@ -16,9 +16,7 @@ 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,14 +10,16 @@ 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,7 +45,9 @@ 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,11 +1,13 @@
import { useEffect } from "react";
import { useParams } from "react-router-dom";
import Page from "../FlowPage/components/PageComponent";
import useFlowsManagerStore from "../../stores/flowsManagerStore";
import Page from "../FlowPage/components/PageComponent";
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
@ -15,9 +17,7 @@ export default function ViewPage() {
return (
<div className="flow-page-positioning">
{currentFlow && (
<Page view flow={currentFlow} />
)}
{currentFlow && <Page view flow={currentFlow} />}
</div>
);
}

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

@ -1,6 +1,5 @@
import { cloneDeep } from "lodash";
import {
Connection,
Edge,
EdgeChange,
Node,
@ -33,11 +32,10 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
nodes: [],
edges: [],
isBuilding: false,
isBuilt: false,
isBuilt: false,
reactFlowInstance: null,
lastCopiedSelection: null,
resetFlow: ({ nodes, edges, viewport }) => {
set({
nodes,
@ -45,7 +43,6 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
flowState: undefined,
sseData: {},
isBuilt: false,
});
get().reactFlowInstance!.setViewport(viewport);
},
@ -60,11 +57,9 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
},
setFlowState: (flowState) => {
const newFlowState =
typeof flowState === "function"
? flowState(get().flowState)
: flowState;
if(newFlowState !== get().flowState){
typeof flowState === "function" ? flowState(get().flowState) : flowState;
if (newFlowState !== get().flowState) {
set(() => ({
flowState: newFlowState,
}));
@ -87,30 +82,39 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
let newChange = typeof change === "function" ? change(get().nodes) : change;
let newEdges = cleanEdges(newChange, get().edges);
set({ edges: newEdges, nodes: newChange, flowState: undefined, isBuilt: false, sseData: {} });
set({
edges: newEdges,
nodes: newChange,
flowState: undefined,
isBuilt: false,
sseData: {},
});
const flowsManager = useFlowsManagerStore.getState()
const flowsManager = useFlowsManagerStore.getState();
flowsManager.autoSaveCurrentFlow(
newChange,
newEdges,
get().reactFlowInstance?.getViewport() ?? { x: 0, y: 0, zoom: 1 }
);
newChange,
newEdges,
get().reactFlowInstance?.getViewport() ?? { x: 0, y: 0, zoom: 1 }
);
},
setEdges: (change) => {
let newChange = typeof change === "function" ? change(get().edges) : change;
set({ edges: newChange, flowState: undefined, isBuilt: false, sseData: {} });
set({
edges: newChange,
flowState: undefined,
isBuilt: false,
sseData: {},
});
const flowsManager = useFlowsManagerStore.getState()
const flowsManager = useFlowsManagerStore.getState();
flowsManager.autoSaveCurrentFlow(
get().nodes,
newChange,
get().reactFlowInstance?.getViewport() ?? { x: 0, y: 0, zoom: 1 }
);
get().nodes,
newChange,
get().reactFlowInstance?.getViewport() ?? { x: 0, y: 0, zoom: 1 }
);
},
setNode: (id: string, change: Node | ((oldState: Node) => Node)) => {
let newChange =

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

@ -9,8 +9,10 @@ import {
uploadFlowsToDatabase,
} from "../controllers/API";
import { FlowType, NodeDataType } from "../types/flow";
import { FlowState } from "../types/tabs";
import { FlowsManagerStoreType, UseUndoRedoOptions } from "../types/zustand/flowsManager";
import {
FlowsManagerStoreType,
UseUndoRedoOptions,
} from "../types/zustand/flowsManager";
import {
addVersionToDuplicates,
createFlowComponent,
@ -333,9 +335,11 @@ 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];
@ -352,8 +356,11 @@ 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);
@ -368,8 +375,11 @@ 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);

46
src/frontend/src/stores/locationStore.tsx
View file

@ -2,27 +2,27 @@ import { create } from "zustand";
import { LocationStoreType } from "../types/zustand/location";
export const useLocationStore = create<LocationStoreType>((set, get) => ({
current: window.location.pathname.replace(/\/$/g, "").split("/"),
isStackedOpen:
window.innerWidth > 1024 && window.location.pathname.split("/")[1]
? true
: false,
setCurrent: (newState) => {
set({ current: newState });
},
setIsStackedOpen: (newState) => {
set({ isStackedOpen: newState });
},
showSideBar: window.location.pathname.split("/")[1] ? true : false,
setShowSideBar: (newState) => {
set({ showSideBar: newState });
},
extraNavigation: { title: "" },
setExtraNavigation: (newState) => {
set({ extraNavigation: newState });
},
extraComponent: <></>,
setExtraComponent: (newState) => {
set({ extraComponent: newState });
},
current: window.location.pathname.replace(/\/$/g, "").split("/"),
isStackedOpen:
window.innerWidth > 1024 && window.location.pathname.split("/")[1]
? true
: false,
setCurrent: (newState) => {
set({ current: newState });
},
setIsStackedOpen: (newState) => {
set({ isStackedOpen: newState });
},
showSideBar: window.location.pathname.split("/")[1] ? true : false,
setShowSideBar: (newState) => {
set({ showSideBar: newState });
},
extraNavigation: { title: "" },
setExtraNavigation: (newState) => {
set({ extraNavigation: newState });
},
extraComponent: <></>,
setExtraComponent: (newState) => {
set({ extraComponent: newState });
},
}));

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

@ -4,7 +4,6 @@ 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;
@ -263,7 +262,6 @@ export type LoadingComponentProps = {
export type ContentProps = {
children: ReactNode;
};
export type HeaderProps = { children: ReactNode; description: string };
export type TriggerProps = {
@ -305,10 +303,9 @@ 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;

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

@ -1,7 +1,6 @@
import {
Edge,
Node,
OnConnect,
OnEdgesChange,
OnNodesChange,
ReactFlowInstance,
@ -14,11 +13,20 @@ export type FlowStoreType = {
sseData: object;
isBuilding: boolean;
setIsBuilding: (isBuilding: boolean) => void;
resetFlow: (flow: {nodes: Node[], edges: Edge[], viewport: Viewport}) => void;
resetFlow: (flow: {
nodes: Node[];
edges: Edge[];
viewport: Viewport;
}) => void;
reactFlowInstance: ReactFlowInstance | null;
setReactFlowInstance: (newState: ReactFlowInstance) => void;
flowState: FlowState | undefined;
setFlowState: (state: FlowState | undefined | ((oldState: FlowState | undefined) => FlowState)) => void;
setFlowState: (
state:
| FlowState
| undefined
| ((oldState: FlowState | undefined) => FlowState)
) => void;
nodes: Node[];
edges: Edge[];
onNodesChange: OnNodesChange;
@ -39,5 +47,4 @@ export type FlowStoreType = {
) => void;
isBuilt: boolean;
setIsBuilt: (isBuilt: boolean) => void;
};

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

@ -1,6 +1,5 @@
import { Node, Edge, Viewport, XYPosition } from "reactflow";
import { Edge, Node, Viewport, XYPosition } from "reactflow";
import { FlowType } from "../../flow";
import { FlowState, FlowsState } from "../../tabs";
export type FlowsManagerStoreType = {
flows: Array<FlowType>;
@ -12,13 +11,35 @@ export type FlowsManagerStoreType = {
setIsLoading: (isLoading: boolean) => 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;
@ -27,4 +48,4 @@ export type FlowsManagerStoreType = {
export type UseUndoRedoOptions = {
maxHistorySize: number;
enableShortcuts: boolean;
};
};

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

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

@ -299,13 +299,8 @@ export function buildTweakObject(tweak: tweakType) {
export function getChatInputField(flow: FlowType, flowState?: FlowState) {
let chat_input_field = "text";
if (
flowState &&
flowState.input_keys
) {
chat_input_field = Object.keys(
flowState.input_keys!
)[0];
if (flowState && flowState.input_keys) {
chat_input_field = Object.keys(flowState.input_keys!)[0];
}
return chat_input_field;
}