Refactor code formatting

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

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(() => {

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

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,

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,

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);

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}

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>

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,

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({

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
)}
>

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 };

View file

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

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,

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 => {

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,

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}

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,

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>

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

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);

Some files were not shown because too many files have changed in this diff Show more