diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index 041c26fc4..c9b8e901f 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx @@ -402,7 +402,9 @@ export default function ParameterComponent({ {title} )} - + {required ? "*" : ""}
diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index c9a8e463a..1e8d15451 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -345,29 +345,40 @@ export default function GenericNode({ return ( { - takeSnapshot(); - deleteNode(id); - }} - setShowNode={(show) => { - setNode(data.id, (old) => ({ - ...old, - data: { ...old.data, showNode: show }, - })); - }} - setShowState={setShowNode} - numberOfHandles={handles} - showNode={showNode} - openAdvancedModal={false} - onCloseAdvancedModal={() => {}} - updateNodeCode={updateNodeCode} - isOutdated={isOutdated} - selected={selected} - /> + data={data} + deleteNode={(id) => { + takeSnapshot(); + deleteNode(id); + }} + setShowNode={(show) => { + setNode(data.id, (old) => ({ + ...old, + data: { ...old.data, showNode: show }, + })); + }} + setShowState={setShowNode} + numberOfHandles={handles} + showNode={showNode} + openAdvancedModal={false} + onCloseAdvancedModal={() => {}} + updateNodeCode={updateNodeCode} + isOutdated={isOutdated} + selected={selected} + /> - ) - }, [data, deleteNode, takeSnapshot, setNode, setShowNode, handles, showNode, updateNodeCode, isOutdated, selected]); + ); + }, [ + data, + deleteNode, + takeSnapshot, + setNode, + setShowNode, + handles, + showNode, + updateNodeCode, + isOutdated, + selected, + ]); return ( <> diff --git a/src/frontend/src/components/chatComponent/index.tsx b/src/frontend/src/components/chatComponent/index.tsx index b387a2ae8..66ff2b609 100644 --- a/src/frontend/src/components/chatComponent/index.tsx +++ b/src/frontend/src/components/chatComponent/index.tsx @@ -1,13 +1,12 @@ import { Transition } from "@headlessui/react"; import { useEffect, useMemo, useRef, useState } from "react"; import ApiModal from "../../modals/ApiModal"; +import IOModal from "../../modals/IOModal"; import ShareModal from "../../modals/shareModal"; import useFlowStore from "../../stores/flowStore"; import useFlowsManagerStore from "../../stores/flowsManagerStore"; import { useStoreStore } from "../../stores/storeStore"; -import { ChatType } from "../../types/chat"; import { classNames } from "../../utils/utils"; -import IOModal from "../../modals/IOModal"; import ForwardedIconComponent from "../genericIconComponent"; import { Separator } from "../ui/separator"; diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx index 729b11a55..e0c0d39cf 100644 --- a/src/frontend/src/components/dropdownComponent/index.tsx +++ b/src/frontend/src/components/dropdownComponent/index.tsx @@ -52,9 +52,9 @@ export default function Dropdown({ editNode ? "input-edit-node" : "py-2" )} > - {(value && + {value && value !== "" && - options.find((option) => option === value)) + options.find((option) => option === value) ? options.find((option) => option === value) : "Choose an option..."} word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()) - .join(' '); + .split(" ") + .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()) + .join(" "); } const Button = React.forwardRef( - ({ className, variant, size, asChild = false,children, ...props }, ref) => { + ({ className, variant, size, asChild = false, children, ...props }, ref) => { const Comp = asChild ? Slot : "button"; let newChildren = children; - if (typeof(children)==="string"){ - newChildren = toTitleCase(children) + if (typeof children === "string") { + newChildren = toTitleCase(children); } return ( ( ref={ref} children={newChildren} {...props} - /> ); } diff --git a/src/frontend/src/constants/enums.ts b/src/frontend/src/constants/enums.ts index d7d3ac334..2573b5194 100644 --- a/src/frontend/src/constants/enums.ts +++ b/src/frontend/src/constants/enums.ts @@ -18,4 +18,4 @@ export enum BuildStatus { export enum InputOutput { INPUT = "input", OUTPUT = "output", -} \ No newline at end of file +} diff --git a/src/frontend/src/index.tsx b/src/frontend/src/index.tsx index 051908e3b..62e73f091 100644 --- a/src/frontend/src/index.tsx +++ b/src/frontend/src/index.tsx @@ -8,8 +8,8 @@ import "./style/index.css"; // @ts-ignore import "./style/applies.css"; // @ts-ignore -import "./style/classes.css"; import { StrictMode } from "react"; +import "./style/classes.css"; const root = ReactDOM.createRoot( document.getElementById("root") as HTMLElement diff --git a/src/frontend/src/modals/IOModal/components/IOFieldView/components/FileInput/index.tsx b/src/frontend/src/modals/IOModal/components/IOFieldView/components/FileInput/index.tsx index 90bf6e974..935db2644 100644 --- a/src/frontend/src/modals/IOModal/components/IOFieldView/components/FileInput/index.tsx +++ b/src/frontend/src/modals/IOModal/components/IOFieldView/components/FileInput/index.tsx @@ -1,11 +1,11 @@ import { Button } from "../../../../../../components/ui/button"; import { useEffect, useState } from "react"; +import IconComponent from "../../../../../../components/genericIconComponent"; import { BASE_URL_API } from "../../../../../../constants/constants"; import { uploadFile } from "../../../../../../controllers/API"; import useFlowsManagerStore from "../../../../../../stores/flowsManagerStore"; import { IOFileInputProps } from "../../../../../../types/components"; -import IconComponent from "../../../../../../components/genericIconComponent"; export default function IOFileInput({ field, updateValue }: IOFileInputProps) { //component to handle file upload from chatIO diff --git a/src/frontend/src/modals/IOModal/components/IOFieldView/index.tsx b/src/frontend/src/modals/IOModal/components/IOFieldView/index.tsx index cbb81cc0e..25f9deeaa 100644 --- a/src/frontend/src/modals/IOModal/components/IOFieldView/index.tsx +++ b/src/frontend/src/modals/IOModal/components/IOFieldView/index.tsx @@ -1,9 +1,9 @@ import { cloneDeep } from "lodash"; +import { Textarea } from "../../../../components/ui/textarea"; import { InputOutput } from "../../../../constants/enums"; import useFlowStore from "../../../../stores/flowStore"; import { IOFieldViewProps } from "../../../../types/components"; import IOFileInput from "./components/FileInput"; -import { Textarea } from "../../../../components/ui/textarea"; export default function IOFieldView({ type, diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatInput/index.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatInput/index.tsx index fd9baa39e..30d609f8c 100644 --- a/src/frontend/src/modals/IOModal/components/chatView/chatInput/index.tsx +++ b/src/frontend/src/modals/IOModal/components/chatView/chatInput/index.tsx @@ -25,7 +25,6 @@ export default function ChatInput({ } }, [lockChat, inputRef]); - useEffect(() => { if (inputRef.current) { inputRef.current.style.height = "inherit"; // Reset the height @@ -42,7 +41,8 @@ export default function ChatInput({ event.key === "Enter" && !lockChat && !saveLoading && - !event.shiftKey && !event.nativeEvent.isComposing + !event.shiftKey && + !event.nativeEvent.isComposing ) { sendMessage(repeat); } diff --git a/src/frontend/src/modals/IOModal/components/chatView/index.tsx b/src/frontend/src/modals/IOModal/components/chatView/index.tsx index f439fe283..e655f22a5 100644 --- a/src/frontend/src/modals/IOModal/components/chatView/index.tsx +++ b/src/frontend/src/modals/IOModal/components/chatView/index.tsx @@ -15,10 +15,10 @@ import { ChatOutputType, FlowPoolObjectType, } from "../../../../types/chat"; +import { chatViewProps } from "../../../../types/components"; import { classNames } from "../../../../utils/utils"; import ChatInput from "./chatInput"; import ChatMessage from "./chatMessage"; -import { chatViewProps } from "../../../../types/components"; export default function ChatView({ sendMessage, diff --git a/src/frontend/src/modals/IOModal/index.tsx b/src/frontend/src/modals/IOModal/index.tsx index 30a753ecf..e5b1c885c 100644 --- a/src/frontend/src/modals/IOModal/index.tsx +++ b/src/frontend/src/modals/IOModal/index.tsx @@ -1,9 +1,7 @@ import { useEffect, useState } from "react"; import AccordionComponent from "../../components/AccordionComponent"; -import IOFieldView from "./components/IOFieldView"; import ShadTooltip from "../../components/ShadTooltipComponent"; import IconComponent from "../../components/genericIconComponent"; -import ChatView from "./components/chatView"; import { Badge } from "../../components/ui/badge"; import { Button } from "../../components/ui/button"; import { @@ -20,11 +18,13 @@ import { import { InputOutput } from "../../constants/enums"; import useFlowStore from "../../stores/flowStore"; import useFlowsManagerStore from "../../stores/flowsManagerStore"; +import { IOModalPropsType } from "../../types/components"; import { NodeType } from "../../types/flow"; import { updateVerticesOrder } from "../../utils/buildUtils"; import { cn } from "../../utils/utils"; import BaseModal from "../baseModal"; -import { IOModalPropsType } from "../../types/components"; +import IOFieldView from "./components/IOFieldView"; +import ChatView from "./components/chatView"; export default function IOModal({ children, diff --git a/src/frontend/src/modals/NewFlowModal/components/NewFlowCardComponent/index.tsx b/src/frontend/src/modals/NewFlowModal/components/NewFlowCardComponent/index.tsx index bbc6e6111..8fbd8ab8f 100644 --- a/src/frontend/src/modals/NewFlowModal/components/NewFlowCardComponent/index.tsx +++ b/src/frontend/src/modals/NewFlowModal/components/NewFlowCardComponent/index.tsx @@ -1,6 +1,11 @@ import { useNavigate } from "react-router-dom"; +import { + Card, + CardContent, + CardDescription, + CardTitle, +} from "../../../../components/ui/card"; import useFlowsManagerStore from "../../../../stores/flowsManagerStore"; -import { Card, CardContent, CardDescription, CardTitle } from "../../../../components/ui/card"; export default function NewFlowCardComponent() { const addFlow = useFlowsManagerStore((state) => state.addFlow); diff --git a/src/frontend/src/modals/NewFlowModal/components/undrawCards/index.tsx b/src/frontend/src/modals/NewFlowModal/components/undrawCards/index.tsx index aeed1351e..a98413dcb 100644 --- a/src/frontend/src/modals/NewFlowModal/components/undrawCards/index.tsx +++ b/src/frontend/src/modals/NewFlowModal/components/undrawCards/index.tsx @@ -10,13 +10,19 @@ import { ReactComponent as ChatWithHistory } from "../../../../assets/undraw_mob import { ReactComponent as Assistant } from "../../../../assets/undraw_team_collaboration_re_ow29.svg"; //@ts-ignore import { ReactComponent as APIRequest } from "../../../../assets/undraw_real_time_analytics_re_yliv.svg"; +import { + Card, + CardContent, + CardDescription, + CardTitle, +} from "../../../../components/ui/card"; import useFlowsManagerStore from "../../../../stores/flowsManagerStore"; -import { FlowType } from "../../../../types/flow"; -import { updateIds } from "../../../../utils/reactflowUtils"; -import { Card, CardContent, CardDescription, CardTitle } from "../../../../components/ui/card"; import { UndrawCardComponentProps } from "../../../../types/components"; +import { updateIds } from "../../../../utils/reactflowUtils"; -export default function UndrawCardComponent({ flow }: UndrawCardComponentProps): JSX.Element { +export default function UndrawCardComponent({ + flow, +}: UndrawCardComponentProps): JSX.Element { const addFlow = useFlowsManagerStore((state) => state.addFlow); const navigate = useNavigate(); diff --git a/src/frontend/src/modals/NewFlowModal/index.tsx b/src/frontend/src/modals/NewFlowModal/index.tsx index d318475c3..5ad736247 100644 --- a/src/frontend/src/modals/NewFlowModal/index.tsx +++ b/src/frontend/src/modals/NewFlowModal/index.tsx @@ -1,10 +1,13 @@ +import useFlowsManagerStore from "../../stores/flowsManagerStore"; +import { newFlowModalPropsType } from "../../types/components"; +import BaseModal from "../baseModal"; import NewFlowCardComponent from "./components/NewFlowCardComponent"; import UndrawCardComponent from "./components/undrawCards"; -import useFlowsManagerStore from "../../stores/flowsManagerStore"; -import BaseModal from "../baseModal"; -import { newFlowModalPropsType } from "../../types/components"; -export default function NewFlowModal({ open, setOpen }: newFlowModalPropsType): JSX.Element { +export default function NewFlowModal({ + open, + setOpen, +}: newFlowModalPropsType): JSX.Element { const examples = useFlowsManagerStore((state) => state.examples); return ( diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx index 19f245dd5..32dc23f89 100644 --- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx @@ -12,7 +12,6 @@ import ReactFlow, { updateEdge, } from "reactflow"; import GenericNode from "../../../../CustomNodes/GenericNode"; -import FlowToolbar from "../../../../components/chatComponent"; import { INVALID_SELECTION_ERROR_ALERT, UPLOAD_ALERT_LIST, @@ -58,8 +57,9 @@ export default function Page({ const templates = useTypesStore((state) => state.templates); const setFilterEdge = useFlowStore((state) => state.setFilterEdge); const reactFlowWrapper = useRef(null); - const [showCanvas, setSHowCanvas] = useState(Object.keys(templates).length > 0 && - Object.keys(types).length > 0) + const [showCanvas, setSHowCanvas] = useState( + Object.keys(templates).length > 0 && Object.keys(types).length > 0 + ); const reactFlowInstance = useFlowStore((state) => state.reactFlowInstance); const setReactFlowInstance = useFlowStore( @@ -273,8 +273,10 @@ export default function Page({ }, []); useEffect(() => { - setSHowCanvas(Object.keys(templates).length > 0 && Object.keys(types).length > 0) - }, [templates, types]) + setSHowCanvas( + Object.keys(templates).length > 0 && Object.keys(types).length > 0 + ); + }, [templates, types]); const onConnectMod = useCallback( (params: Connection) => { @@ -437,7 +439,6 @@ export default function Page({ } return ( -
{showCanvas ? (
@@ -491,8 +492,7 @@ export default function Page({
) : ( <> - )} + )}
- ); } diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx index 43cbc0137..9b057fde7 100644 --- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx @@ -1,7 +1,6 @@ import { cloneDeep } from "lodash"; import { LinkIcon, SparklesIcon } from "lucide-react"; import { useEffect, useMemo, useState } from "react"; -import AccordionComponent from "../../../../components/AccordionComponent"; import ShadTooltip from "../../../../components/ShadTooltipComponent"; import IconComponent from "../../../../components/genericIconComponent"; import { Input } from "../../../../components/ui/input"; diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx index 763211e32..c507a541f 100644 --- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx @@ -631,22 +631,24 @@ export default function NodeToolbarComponent({ )} {hasCode && (
- {openModal&& } + {openModal && ( + + )}
)} diff --git a/src/frontend/src/pages/FlowPage/index.tsx b/src/frontend/src/pages/FlowPage/index.tsx index 960e71af4..a222dddcc 100644 --- a/src/frontend/src/pages/FlowPage/index.tsx +++ b/src/frontend/src/pages/FlowPage/index.tsx @@ -1,11 +1,11 @@ import { useEffect } from "react"; import { useParams } from "react-router-dom"; +import FlowToolbar from "../../components/chatComponent"; import Header from "../../components/headerComponent"; import { useDarkStore } from "../../stores/darkStore"; import useFlowsManagerStore from "../../stores/flowsManagerStore"; import Page from "./components/PageComponent"; import ExtraSidebar from "./components/extraSidebarComponent"; -import FlowToolbar from "../../components/chatComponent"; export default function FlowPage({ view }: { view?: boolean }): JSX.Element { const setCurrentFlowId = useFlowsManagerStore( @@ -23,7 +23,7 @@ export default function FlowPage({ view }: { view?: boolean }): JSX.Element { <>
- {currentFlow && + {currentFlow && (
{!view && }
@@ -32,10 +32,9 @@ export default function FlowPage({ view }: { view?: boolean }): JSX.Element {
{!view && } -
- } + )} state.uploadFlow); const setCurrentFlowId = useFlowsManagerStore( diff --git a/src/frontend/src/stores/flowStore.ts b/src/frontend/src/stores/flowStore.ts index 4a7b30b6b..15ee69169 100644 --- a/src/frontend/src/stores/flowStore.ts +++ b/src/frontend/src/stores/flowStore.ts @@ -72,7 +72,7 @@ const useFlowStore = create((set, get) => ({ }, getNodePosition: (nodeId: string) => { const node = get().nodes.find((node) => node.id === nodeId); - return node?.position||{x:0,y:0}; + return node?.position || { x: 0, y: 0 }; }, updateFlowPool: ( nodeId: string, diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts index 03578e224..378fa8674 100644 --- a/src/frontend/src/types/components/index.ts +++ b/src/frontend/src/types/components/index.ts @@ -1,5 +1,5 @@ import { ReactElement, ReactNode, SetStateAction } from "react"; -import { ReactFlowJsonObject, XYPosition } from "reactflow"; +import { ReactFlowJsonObject } from "reactflow"; import { InputOutput } from "../../constants/enums"; import { APIClassType, APITemplateType, TemplateVariableType } from "../api"; import { ChatMessageType } from "../chat"; diff --git a/src/frontend/src/utils/reactflowUtils.ts b/src/frontend/src/utils/reactflowUtils.ts index 1a803bf82..f9de6099b 100644 --- a/src/frontend/src/utils/reactflowUtils.ts +++ b/src/frontend/src/utils/reactflowUtils.ts @@ -1170,7 +1170,7 @@ export function downloadNode(NodeFLow: FlowType) { type: "application/json", }); element.href = URL.createObjectURL(file); - element.download = `${NodeFLow?.name??"node"}.json`; + element.download = `${NodeFLow?.name ?? "node"}.json`; element.click(); } diff --git a/src/frontend/vite.config.ts b/src/frontend/vite.config.ts index 479a98202..b513e36bb 100644 --- a/src/frontend/vite.config.ts +++ b/src/frontend/vite.config.ts @@ -1,7 +1,6 @@ import react from "@vitejs/plugin-react-swc"; import { defineConfig } from "vite"; import svgr from "vite-plugin-svgr"; -import MillionCompiler from "@million/lint"; const apiRoutes = ["^/api/v1/", "/health"]; // Use environment variable to determine the target.