Merge branch 'form_io' of personal:logspace-ai/langflow into form_io

src/frontend/src/App.tsx

@@ -1,19 +1,20 @@
-import _ from "lodash";
-import { useContext, useEffect, useState } from "react";
-import { useLocation } from "react-router-dom";
 import "reactflow/dist/style.css";
+import { useState, useEffect, useContext } from "react";
 import "./App.css";
+import { useLocation } from "react-router-dom";
+import _ from "lodash";
 
-import { ErrorBoundary } from "react-error-boundary";
 import ErrorAlert from "./alerts/error";
 import NoticeAlert from "./alerts/notice";
 import SuccessAlert from "./alerts/success";
-import CrashErrorComponent from "./components/CrashErrorComponent";
-import Header from "./components/headerComponent";
 import { alertContext } from "./contexts/alertContext";
 import { locationContext } from "./contexts/locationContext";
+import { ErrorBoundary } from "react-error-boundary";
+import CrashErrorComponent from "./components/CrashErrorComponent";
 import { TabsContext } from "./contexts/tabsContext";
+import { getVersion } from "./controllers/API";
 import Router from "./routes";
+import Header from "./components/headerComponent";
 
 export default function App() {
   let { setCurrent, setShowSideBar, setIsStackedOpen } =

src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx

@@ -1,30 +1,31 @@
-import { Info } from "lucide-react";
-import React, { useContext, useEffect, useRef, useState } from "react";
 import { Handle, Position, useUpdateNodeInternals } from "reactflow";
-import ShadTooltip from "../../../../components/ShadTooltipComponent";
-import CodeAreaComponent from "../../../../components/codeAreaComponent";
-import Dropdown from "../../../../components/dropdownComponent";
-import FloatComponent from "../../../../components/floatComponent";
-import InputComponent from "../../../../components/inputComponent";
-import InputFileComponent from "../../../../components/inputFileComponent";
-import InputListComponent from "../../../../components/inputListComponent";
-import IntComponent from "../../../../components/intComponent";
-import PromptAreaComponent from "../../../../components/promptComponent";
-import TextAreaComponent from "../../../../components/textAreaComponent";
-import ToggleShadComponent from "../../../../components/toggleShadComponent";
-import { PopUpContext } from "../../../../contexts/popUpContext";
-import { TabsContext } from "../../../../contexts/tabsContext";
-import { typesContext } from "../../../../contexts/typesContext";
-import { ParameterComponentType } from "../../../../types/components";
 import {
   classNames,
   getRandomKeyByssmm,
   groupByFamily,
   isValidConnection,
-  nodeColors,
   nodeIconsLucide,
-  nodeNames,
 } from "../../../../utils";
+import { useContext, useEffect, useRef, useState } from "react";
+import InputComponent from "../../../../components/inputComponent";
+import InputListComponent from "../../../../components/inputListComponent";
+import TextAreaComponent from "../../../../components/textAreaComponent";
+import { typesContext } from "../../../../contexts/typesContext";
+import { ParameterComponentType } from "../../../../types/components";
+import FloatComponent from "../../../../components/floatComponent";
+import Dropdown from "../../../../components/dropdownComponent";
+import CodeAreaComponent from "../../../../components/codeAreaComponent";
+import InputFileComponent from "../../../../components/inputFileComponent";
+import { TabsContext } from "../../../../contexts/tabsContext";
+import IntComponent from "../../../../components/intComponent";
+import PromptAreaComponent from "../../../../components/promptComponent";
+import { nodeNames } from "../../../../utils";
+import React from "react";
+import { nodeColors } from "../../../../utils";
+import ShadTooltip from "../../../../components/ShadTooltipComponent";
+import { PopUpContext } from "../../../../contexts/popUpContext";
+import ToggleShadComponent from "../../../../components/toggleShadComponent";
+import { Info } from "lucide-react";
 
 export default function ParameterComponent({
   left,

src/frontend/src/CustomNodes/GenericNode/index.tsx

@@ -1,15 +1,3 @@
-import { Zap } from "lucide-react";
-import { useContext, useEffect, useRef, useState } from "react";
-import { NodeToolbar } from "reactflow";
-import ShadTooltip from "../../components/ShadTooltipComponent";
-import Tooltip from "../../components/TooltipComponent";
-import { useSSE } from "../../contexts/SSEContext";
-import { alertContext } from "../../contexts/alertContext";
-import { PopUpContext } from "../../contexts/popUpContext";
-import { typesContext } from "../../contexts/typesContext";
-import NodeModal from "../../modals/NodeModal";
-import NodeToolbarComponent from "../../pages/FlowPage/components/nodeToolbarComponent";
-import { NodeDataType } from "../../types/flow";
 import {
   classNames,
   nodeColors,
@@ -17,6 +5,18 @@ import {
   toTitleCase,
 } from "../../utils";
 import ParameterComponent from "./components/parameterComponent";
+import { typesContext } from "../../contexts/typesContext";
+import { useContext, useState, useEffect, useRef } from "react";
+import { NodeDataType } from "../../types/flow";
+import { alertContext } from "../../contexts/alertContext";
+import { PopUpContext } from "../../contexts/popUpContext";
+import NodeModal from "../../modals/NodeModal";
+import Tooltip from "../../components/TooltipComponent";
+import { NodeToolbar } from "reactflow";
+import NodeToolbarComponent from "../../pages/FlowPage/components/nodeToolbarComponent";
+import ShadTooltip from "../../components/ShadTooltipComponent";
+import { useSSE } from "../../contexts/SSEContext";
+import { Zap } from "lucide-react";
 
 export default function GenericNode({
   data,

src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx

@@ -1,8 +1,8 @@
-import { Transition } from "@headlessui/react";
-import { CheckCircle2, Info, X, XCircle } from "lucide-react";
-import { useState } from "react";
 import { Link } from "react-router-dom";
+import { Transition } from "@headlessui/react";
+import { useState } from "react";
 import { SingleAlertComponentType } from "../../../../types/alerts";
+import { X, CheckCircle2, Info, XCircle } from "lucide-react";
 
 export default function SingleAlert({
   dropItem,

src/frontend/src/alerts/alertDropDown/index.tsx

@@ -1,10 +1,10 @@
-import { Trash2, X } from "lucide-react";
+import { useContext, useEffect, useRef } from "react";
-import { useContext, useRef } from "react";
 import { alertContext } from "../../contexts/alertContext";
-import { PopUpContext } from "../../contexts/popUpContext";
-import { AlertDropdownType } from "../../types/alerts";
-import { useOnClickOutside } from "../hooks/useOnClickOutside";
 import SingleAlert from "./components/singleAlertComponent";
+import { AlertDropdownType } from "../../types/alerts";
+import { PopUpContext } from "../../contexts/popUpContext";
+import { useOnClickOutside } from "../hooks/useOnClickOutside";
+import { X, Trash2 } from "lucide-react";
 
 export default function AlertDropdown({}: AlertDropdownType) {
   const { closePopUp } = useContext(PopUpContext);

src/frontend/src/alerts/error/index.tsx

@@ -1,7 +1,7 @@
 import { Transition } from "@headlessui/react";
-import { XCircle } from "lucide-react";
 import { useEffect, useState } from "react";
 import { ErrorAlertType } from "../../types/alerts";
+import { XCircle } from "lucide-react";
 
 export default function ErrorAlert({
   title,

src/frontend/src/alerts/notice/index.tsx

@@ -1,8 +1,8 @@
 import { Transition } from "@headlessui/react";
-import { Info } from "lucide-react";
 import { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import { NoticeAlertType } from "../../types/alerts";
+import { Info } from "lucide-react";
 
 export default function NoticeAlert({
   title,

src/frontend/src/alerts/success/index.tsx

@@ -1,7 +1,7 @@
 import { Transition } from "@headlessui/react";
-import { CheckCircle2 } from "lucide-react";
 import { useEffect, useState } from "react";
 import { SuccessAlertType } from "../../types/alerts";
+import { CheckCircle2 } from "lucide-react";
 
 export default function SuccessAlert({
   title,

src/frontend/src/components/AccordionComponent/index.tsx

@@ -1,11 +1,16 @@
-import { useState } from "react";
+import { ReactElement, useContext, useEffect, useRef, useState } from "react";
+import {
+  AccordionComponentType,
+  ProgressBarType,
+} from "../../types/components";
+import { Progress } from "../../components/ui/progress";
+import { setInterval } from "timers/promises";
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
 } from "../../components/ui/accordion";
-import { AccordionComponentType } from "../../types/components";
 
 export default function AccordionComponent({
   trigger,

src/frontend/src/components/EditFlowSettingsComponent/index.tsx

@@ -1,7 +1,7 @@
-import React, { ChangeEvent, useState } from "react";
+import React, { useState, ChangeEvent } from "react";
-import { Input } from "../../components/ui/input";
-import { Label } from "../../components/ui/label";
 import { Textarea } from "../../components/ui/textarea";
+import { Label } from "../../components/ui/label";
+import { Input } from "../../components/ui/input";
 
 type InputProps = {
   name: string | null;

src/frontend/src/components/ExtraSidebarComponent/index.tsx

@@ -1,8 +1,8 @@
 import { Disclosure } from "@headlessui/react";
 import { useContext } from "react";
 import { Link } from "react-router-dom";
-import { locationContext } from "../../contexts/locationContext";
 import { classNames } from "../../utils";
+import { locationContext } from "../../contexts/locationContext";
 
 export default function ExtraSidebar() {
   const {

src/frontend/src/components/LightTooltipComponent/index.tsx

@@ -1,5 +1,5 @@
-import Tooltip, { TooltipProps, tooltipClasses } from "@mui/material/Tooltip";
 import { styled } from "@mui/material/styles";
+import Tooltip, { TooltipProps, tooltipClasses } from "@mui/material/Tooltip";
 
 export const LightTooltip = styled(({ className, ...props }: TooltipProps) => (
   <Tooltip {...props} classes={{ popper: className }} />

src/frontend/src/components/LoadingSpinner/index.tsx

@@ -1,3 +1,6 @@
+import { useContext, useEffect, useRef, useState } from "react";
+import { RadialProgressType } from "../../types/components";
+
 export default function LoadingSpinner({}) {
   return <></>;
 }

src/frontend/src/components/RadialProgress/index.tsx

@@ -1,3 +1,4 @@
+import { useContext, useEffect, useRef, useState } from "react";
 import { RadialProgressType } from "../../types/components";
 
 export default function RadialProgressComponent({

src/frontend/src/components/ShadTooltipComponent/index.tsx

@@ -1,4 +1,4 @@
-import { ShadToolTipType } from "../../types/components";
+import { RadialProgressType, ShadToolTipType } from "../../types/components";
 import {
   Tooltip,
   TooltipContent,

src/frontend/src/components/TooltipComponent/index.tsx

@@ -1,5 +1,6 @@
-import { TooltipComponentType } from "../../types/components";
+import { ReactElement } from "react";
 import { LightTooltip } from "../LightTooltipComponent";
+import { TooltipComponentType } from "../../types/components";
 
 export default function Tooltip({
   children,

src/frontend/src/components/cardComponent/index.tsx

@@ -1,15 +1,26 @@
-import { Trash2 } from "lucide-react";
+import { Trash2, ExternalLink } from "lucide-react";
 import { useContext } from "react";
+import { Link } from "react-router-dom";
 import { TabsContext } from "../../contexts/tabsContext";
 import { FlowType } from "../../types/flow";
 import { gradients } from "../../utils";
 import {
-  Card,
+  CardTitle,
   CardDescription,
   CardFooter,
+  Card,
   CardHeader,
-  CardTitle,
 } from "../ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../ui/dialog";
+import { Button } from "@mui/material";
 
 export const CardComponent = ({
   flow,

src/frontend/src/components/chatComponent/buildTrigger/index.tsx

@@ -1,16 +1,16 @@
+import { useContext, useState } from "react";
 import { Transition } from "@headlessui/react";
 import { Zap } from "lucide-react";
-import { useContext, useState } from "react";
+import { validateNodes } from "../../../utils";
+import { FlowType } from "../../../types/flow";
 import Loading from "../../../components/ui/loading";
 import { useSSE } from "../../../contexts/SSEContext";
-import { alertContext } from "../../../contexts/alertContext";
 import { typesContext } from "../../../contexts/typesContext";
+import { alertContext } from "../../../contexts/alertContext";
 import { postBuildInit } from "../../../controllers/API";
-import { FlowType } from "../../../types/flow";
-import { validateNodes } from "../../../utils";
 
-import { TabsContext } from "../../../contexts/tabsContext";
 import RadialProgressComponent from "../../RadialProgress";
+import { TabsContext } from "../../../contexts/tabsContext";
 
 export default function BuildTrigger({
   open,

src/frontend/src/components/chatComponent/chatTrigger/index.tsx

@@ -1,6 +1,7 @@
 import { Transition } from "@headlessui/react";
 import { MessagesSquare } from "lucide-react";
 
+import { alertContext } from "../../../contexts/alertContext";
 import { useContext } from "react";
 import {
   CHAT_CANNOT_OPEN_DESCRIPTION,
@@ -8,7 +9,6 @@ import {
   FLOW_NOT_BUILT_DESCRIPTION,
   FLOW_NOT_BUILT_TITLE,
 } from "../../../constants";
-import { alertContext } from "../../../contexts/alertContext";
 
 export default function ChatTrigger({ open, setOpen, isBuilt, canOpen }) {
   const { setErrorData } = useContext(alertContext);

src/frontend/src/components/chatComponent/index.tsx

@@ -1,14 +1,14 @@
 import { useContext, useEffect, useRef, useState } from "react";
 import { useNodes } from "reactflow";
 import { ChatType } from "../../types/chat";
-import BuildTrigger from "./buildTrigger";
 import ChatTrigger from "./chatTrigger";
+import BuildTrigger from "./buildTrigger";
 
-import * as _ from "lodash";
-import { TabsContext } from "../../contexts/tabsContext";
 import { getBuildStatus } from "../../controllers/API";
-import FormModal from "../../modals/formModal";
 import { NodeType } from "../../types/flow";
+import FormModal from "../../modals/formModal";
+import { TabsContext } from "../../contexts/tabsContext";
+import * as _ from "lodash";
 
 export default function Chat({ flow }: ChatType) {
   const [open, setOpen] = useState(false);

src/frontend/src/components/codeAreaComponent/index.tsx

@@ -1,6 +1,7 @@
 import { useContext, useEffect, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
 import CodeAreaModal from "../../modals/codeAreaModal";
+import TextAreaModal from "../../modals/textAreaModal";
 import { TextAreaComponentType } from "../../types/components";
 
 import { ExternalLink } from "lucide-react";

src/frontend/src/components/dropdownComponent/index.tsx

@@ -1,9 +1,9 @@
 import { Listbox, Transition } from "@headlessui/react";
-import { Check, ChevronsUpDown } from "lucide-react";
 import { Fragment, useContext, useEffect, useState } from "react";
-import { PopUpContext } from "../../contexts/popUpContext";
 import { DropDownComponentType } from "../../types/components";
 import { classNames } from "../../utils";
+import { ChevronsUpDown, Check } from "lucide-react";
+import { PopUpContext } from "../../contexts/popUpContext";
 
 export default function Dropdown({
   value,

src/frontend/src/components/floatComponent/index.tsx

@@ -1,7 +1,7 @@
 import { useContext, useEffect, useState } from "react";
-import { PopUpContext } from "../../contexts/popUpContext";
-import { TabsContext } from "../../contexts/tabsContext";
 import { FloatComponentType } from "../../types/components";
+import { TabsContext } from "../../contexts/tabsContext";
+import { PopUpContext } from "../../contexts/popUpContext";
 
 export default function FloatComponent({
   value,

src/frontend/src/components/headerComponent/components/menuBar/index.tsx

@@ -1,25 +1,27 @@
+import { useContext } from "react";
+import { TabsContext } from "../../../../contexts/tabsContext";
+import { PopUpContext } from "../../../../contexts/popUpContext";
 import {
+  Plus,
   ChevronDown,
   ChevronLeft,
-  Plus,
+  Undo,
   Redo,
   Settings2,
-  Undo,
 } from "lucide-react";
-import { useContext } from "react";
-import { PopUpContext } from "../../../../contexts/popUpContext";
-import { TabsContext } from "../../../../contexts/tabsContext";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
   DropdownMenuLabel,
   DropdownMenuSeparator,
-  DropdownMenuTrigger,
 } from "../../../ui/dropdown-menu";
 
-import { Link, useNavigate } from "react-router-dom";
 import { alertContext } from "../../../../contexts/alertContext";
+import { Link, useNavigate } from "react-router-dom";
 import { undoRedoContext } from "../../../../contexts/undoRedoContext";
 import FlowSettingsModal from "../../../../modals/flowSettingsModal";
 import { Button } from "../../../ui/button";

src/frontend/src/components/headerComponent/index.tsx

@@ -1,18 +1,19 @@
-import { Bell, Home, MoonIcon, SunIcon, Users2 } from "lucide-react";
+import { Home, MoonIcon, SunIcon, Users2 } from "lucide-react";
 import { useContext, useEffect, useState } from "react";
 import { FaDiscord, FaGithub, FaTwitter } from "react-icons/fa";
-import { Link, useLocation, useParams } from "react-router-dom";
+import { Button } from "../ui/button";
+import { TabsContext } from "../../contexts/tabsContext";
 import AlertDropdown from "../../alerts/alertDropDown";
-import { USER_PROJECTS_HEADER } from "../../constants";
 import { alertContext } from "../../contexts/alertContext";
 import { darkContext } from "../../contexts/darkContext";
 import { PopUpContext } from "../../contexts/popUpContext";
-import { TabsContext } from "../../contexts/tabsContext";
 import { typesContext } from "../../contexts/typesContext";
-import { getRepoStars } from "../../controllers/API";
-import { Button } from "../ui/button";
-import { Separator } from "../ui/separator";
 import MenuBar from "./components/menuBar";
+import { Link, useLocation, useParams } from "react-router-dom";
+import { USER_PROJECTS_HEADER } from "../../constants";
+import { getRepoStars } from "../../controllers/API";
+import { Separator } from "../ui/separator";
+import { Bell } from "lucide-react";
 
 export default function Header() {
   const { flows, addFlow, tabId } = useContext(TabsContext);

src/frontend/src/components/inputComponent/index.tsx

@@ -1,8 +1,8 @@
 import { useContext, useEffect, useState } from "react";
-import { PopUpContext } from "../../contexts/popUpContext";
-import { TabsContext } from "../../contexts/tabsContext";
 import { InputComponentType } from "../../types/components";
 import { classNames } from "../../utils";
+import { TabsContext } from "../../contexts/tabsContext";
+import { PopUpContext } from "../../contexts/popUpContext";
 
 export default function InputComponent({
   value,

src/frontend/src/components/inputFileComponent/index.tsx

@@ -1,9 +1,9 @@
-import { FileSearch2 } from "lucide-react";
 import { useContext, useEffect, useState } from "react";
 import { alertContext } from "../../contexts/alertContext";
-import { TabsContext } from "../../contexts/tabsContext";
-import { uploadFile } from "../../controllers/API";
 import { FileComponentType } from "../../types/components";
+import { TabsContext } from "../../contexts/tabsContext";
+import { FileSearch2 } from "lucide-react";
+import { uploadFile } from "../../controllers/API";
 
 export default function InputFileComponent({
   value,

src/frontend/src/components/inputListComponent/index.tsx

@@ -1,8 +1,9 @@
 import { useContext, useEffect, useState } from "react";
 import { InputListComponentType } from "../../types/components";
+import { TabsContext } from "../../contexts/tabsContext";
 
 import _ from "lodash";
-import { Plus, X } from "lucide-react";
+import { X, Plus } from "lucide-react";
 import { PopUpContext } from "../../contexts/popUpContext";
 
 export default function InputListComponent({

src/frontend/src/components/intComponent/index.tsx

@@ -1,7 +1,8 @@
 import { useContext, useEffect, useState } from "react";
-import { PopUpContext } from "../../contexts/popUpContext";
-import { TabsContext } from "../../contexts/tabsContext";
 import { FloatComponentType } from "../../types/components";
+import { TabsContext } from "../../contexts/tabsContext";
+import { classNames } from "../../utils";
+import { PopUpContext } from "../../contexts/popUpContext";
 
 export default function IntComponent({
   value,

src/frontend/src/components/promptComponent/index.tsx

@@ -1,13 +1,13 @@
 import { useContext, useEffect, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
-import GenericModal from "../../modals/genericModal";
 import { TextAreaComponentType } from "../../types/components";
+import GenericModal from "../../modals/genericModal";
 import { TypeModal } from "../../utils";
 
-import * as _ from "lodash";
 import { ExternalLink } from "lucide-react";
-import { typesContext } from "../../contexts/typesContext";
 import { postValidatePrompt } from "../../controllers/API";
+import { typesContext } from "../../contexts/typesContext";
+import * as _ from "lodash";
 
 export default function PromptAreaComponent({
   field_name,

src/frontend/src/components/textAreaComponent/index.tsx

@@ -1,8 +1,8 @@
 import { useContext, useEffect, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
-import GenericModal from "../../modals/genericModal";
 import { TextAreaComponentType } from "../../types/components";
-import { TypeModal } from "../../utils";
+import GenericModal from "../../modals/genericModal";
+import { TypeModal, classNames } from "../../utils";
 
 import { ExternalLink } from "lucide-react";
 

src/frontend/src/components/toggleComponent/index.tsx

@@ -1,7 +1,7 @@
 import { Switch } from "@headlessui/react";
+import { classNames } from "../../utils";
 import { useEffect } from "react";
 import { ToggleComponentType } from "../../types/components";
-import { classNames } from "../../utils";
 
 export default function ToggleComponent({
   enabled,

src/frontend/src/components/toggleShadComponent/index.tsx

@@ -1,3 +1,4 @@
+import { useEffect } from "react";
 import { ToggleComponentType } from "../../types/components";
 import { Switch } from "../ui/switch";
 

src/frontend/src/components/ui/accordion.tsx

@@ -1,8 +1,8 @@
 "use client";
 
+import * as React from "react";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { ChevronDownIcon } from "@radix-ui/react-icons";
-import * as React from "react";
 import { cn } from "../../utils";
 
 const Accordion = AccordionPrimitive.Root;

src/frontend/src/components/ui/badge.tsx

@@ -1,5 +1,5 @@
-import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../../utils";
 
 const badgeVariants = cva(

src/frontend/src/components/ui/button.tsx

@@ -1,6 +1,6 @@
+import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
 import { cn } from "../../utils";
 
 const buttonVariants = cva(

src/frontend/src/components/ui/checkbox.tsx

@@ -1,8 +1,8 @@
 "use client";
 
+import * as React from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { Check } from "lucide-react";
-import * as React from "react";
 import { cn } from "../../utils";
 
 const Checkbox = React.forwardRef<

src/frontend/src/components/ui/dialog.tsx

@@ -1,6 +1,6 @@
+import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { X } from "lucide-react";
-import * as React from "react";
 import { cn } from "../../utils";
 
 const Dialog = DialogPrimitive.Root;

src/frontend/src/components/ui/dropdown-menu.tsx

@@ -1,8 +1,8 @@
 "use client";
 
+import * as React from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { Check, ChevronRight, Circle } from "lucide-react";
-import * as React from "react";
 import { cn } from "../../utils";
 
 const DropdownMenu = DropdownMenuPrimitive.Root;

src/frontend/src/components/ui/label.tsx

@@ -1,8 +1,8 @@
 "use client";
 
+import * as React from "react";
 import * as LabelPrimitive from "@radix-ui/react-label";
 import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
 import { cn } from "../../utils";
 
 const labelVariants = cva(

src/frontend/src/components/ui/menubar.tsx

@@ -1,8 +1,8 @@
 "use client";
 
+import * as React from "react";
 import * as MenubarPrimitive from "@radix-ui/react-menubar";
 import { Check, ChevronRight, Circle } from "lucide-react";
-import * as React from "react";
 
 import { cn } from "../../utils";
 

src/frontend/src/components/ui/progress.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import * as ProgressPrimitive from "@radix-ui/react-progress";
 import * as React from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
 import { cn } from "../../utils";
 
 const Progress = React.forwardRef<

src/frontend/src/components/ui/rename-label.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useState, useEffect, useRef } from "react";
 import { cn } from "../../utils";
 
 export default function RenameLabel(props) {

src/frontend/src/components/ui/separator.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import * as SeparatorPrimitive from "@radix-ui/react-separator";
 import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
 import { cn } from "../../utils";
 
 const Separator = React.forwardRef<

src/frontend/src/components/ui/switch.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import * as SwitchPrimitives from "@radix-ui/react-switch";
 import * as React from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
 import { cn } from "../../utils";
 
 const Switch = React.forwardRef<

src/frontend/src/components/ui/tabs.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import * as TabsPrimitive from "@radix-ui/react-tabs";
 import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
 import { cn } from "../../utils";
 
 const Tabs = TabsPrimitive.Root;

src/frontend/src/components/ui/tooltip.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { cn } from "../../utils";
 
 const TooltipProvider = TooltipPrimitive.Provider;

src/frontend/src/constants.tsx

@@ -1,9 +1,10 @@
 // src/constants.tsx
 
-import { MessageSquare } from "lucide-react";
+import { MessageSquareDashed } from "lucide-react";
 import { FlowType } from "./types/flow";
 import { TabsState } from "./types/tabs";
 import { buildInputs, buildTweaks } from "./utils";
+import { MessageSquare } from "lucide-react";
 
 /**
  * The base text for subtitle of Export Dialog (Toolbar)

src/frontend/src/contexts/SSEContext.tsx

@@ -1,4 +1,10 @@
-import { createContext, useCallback, useContext, useState } from "react";
+import {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  useCallback,
+} from "react";
 
 const initialValue = {
   updateSSEData: ({}) => {},

src/frontend/src/contexts/index.tsx

@@ -1,13 +1,13 @@
 import { ReactNode } from "react";
-import { ReactFlowProvider } from "reactflow";
-import { SSEProvider } from "./SSEContext";
 import { AlertProvider } from "./alertContext";
 import { DarkProvider } from "./darkContext";
 import { LocationProvider } from "./locationContext";
 import PopUpProvider from "./popUpContext";
 import { TabsProvider } from "./tabsContext";
 import { TypesProvider } from "./typesContext";
+import { ReactFlowProvider } from "reactflow";
 import { UndoRedoProvider } from "./undoRedoContext";
+import { SSEProvider } from "./SSEContext";
 
 export default function ContextWrapper({ children }: { children: ReactNode }) {
   //element to wrap all context

src/frontend/src/contexts/popUpContext.tsx

@@ -1,4 +1,5 @@
-import React, { createContext, useState } from "react";
+import { createContext } from "react";
+import React, { useState } from "react";
 
 // context to set JSX element on the DOM
 export const PopUpContext = createContext({

src/frontend/src/contexts/tabsContext.tsx

@@ -1,33 +1,33 @@
-import _ from "lodash";
 import {
-  ReactNode,
   createContext,
-  useContext,
   useEffect,
-  useRef,
   useState,
+  useRef,
+  ReactNode,
+  useContext,
 } from "react";
-import { addEdge } from "reactflow";
-import ShortUniqueId from "short-unique-id";
-import {
-  deleteFlowFromDatabase,
-  downloadFlowsFromDatabase,
-  readFlowsFromDatabase,
-  saveFlowToDatabase,
-  updateFlowInDatabase,
-  uploadFlowsToDatabase,
-} from "../controllers/API";
-import { APIClassType, APITemplateType } from "../types/api";
 import { FlowType, NodeType } from "../types/flow";
 import { TabsContextType, TabsState } from "../types/tabs";
 import {
-  getRandomDescription,
-  getRandomName,
   updateIds,
   updateTemplate,
+  getRandomDescription,
+  getRandomName,
 } from "../utils";
 import { alertContext } from "./alertContext";
 import { typesContext } from "./typesContext";
+import { APIClassType, APITemplateType } from "../types/api";
+import ShortUniqueId from "short-unique-id";
+import { addEdge } from "reactflow";
+import {
+  readFlowsFromDatabase,
+  deleteFlowFromDatabase,
+  saveFlowToDatabase,
+  downloadFlowsFromDatabase,
+  uploadFlowsToDatabase,
+  updateFlowInDatabase,
+} from "../controllers/API";
+import _ from "lodash";
 
 const uid = new ShortUniqueId({ length: 5 });
 

src/frontend/src/contexts/typesContext.tsx

@@ -1,8 +1,8 @@
 import { createContext, ReactNode, useEffect, useState } from "react";
 import { Node } from "reactflow";
+import { typesContextType } from "../types/typesContext";
 import { getAll } from "../controllers/API";
 import { APIKindType } from "../types/api";
-import { typesContextType } from "../types/typesContext";
 
 //context to share types adn functions from nodes to flow
 

src/frontend/src/contexts/undoRedoContext.tsx

@@ -1,4 +1,3 @@
-import { cloneDeep } from "lodash";
 import {
   createContext,
   useCallback,
@@ -7,6 +6,7 @@ import {
   useState,
 } from "react";
 import { Edge, Node, useReactFlow } from "reactflow";
+import { cloneDeep } from "lodash";
 import { TabsContext } from "./tabsContext";
 
 type undoRedoContextType = {

src/frontend/src/controllers/API/index.ts

@@ -1,15 +1,15 @@
-import axios, { AxiosResponse } from "axios";
-import { ReactFlowJsonObject } from "reactflow";
-import { APIObjectType, sendAllProps } from "../../types/api/index";
-import { FlowStyleType, FlowType } from "../../types/flow";
 import {
-  APIClassType,
   BuildStatusTypeAPI,
-  InitTypeAPI,
-  PromptTypeAPI,
-  UploadFileTypeAPI,
   errorsTypeAPI,
+  InitTypeAPI,
+  UploadFileTypeAPI,
+  APIClassType,
+  PromptTypeAPI,
 } from "./../../types/api/index";
+import { APIObjectType, sendAllProps } from "../../types/api/index";
+import axios, { AxiosResponse } from "axios";
+import { FlowStyleType, FlowType } from "../../types/flow";
+import { ReactFlowJsonObject } from "reactflow";
 
 /**
  * Fetches all objects from the API endpoint.

src/frontend/src/index.tsx

@@ -1,8 +1,9 @@
+import React from "react";
 import ReactDOM from "react-dom/client";
-import { BrowserRouter } from "react-router-dom";
 import App from "./App";
-import ContextWrapper from "./contexts";
 import reportWebVitals from "./reportWebVitals";
+import { BrowserRouter } from "react-router-dom";
+import ContextWrapper from "./contexts";
 
 import "./index.css";
 

src/frontend/src/modals/ApiModal/index.tsx

@@ -1,15 +1,42 @@
-import "ace-builds/src-noconflict/ext-language_tools";
+import { useContext, useEffect, useRef, useState } from "react";
+import { PopUpContext } from "../../contexts/popUpContext";
 import "ace-builds/src-noconflict/mode-python";
 import "ace-builds/src-noconflict/theme-github";
 import "ace-builds/src-noconflict/theme-twilight";
-import { useContext, useEffect, useRef, useState } from "react";
+import "ace-builds/src-noconflict/ext-language_tools";
-import { PopUpContext } from "../../contexts/popUpContext";
 // import "ace-builds/webpack-resolver";
-import { Check, Clipboard, Code2 } from "lucide-react";
+import { darkContext } from "../../contexts/darkContext";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../../components/ui/dialog";
+import { FlowType } from "../../types/flow/index";
+import { getCurlCode, getPythonApiCode, getPythonCode } from "../../constants";
+import { EXPORT_CODE_DIALOG } from "../../constants";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "../../components/ui/tabs";
+import { Check, Clipboard, Code2 } from "lucide-react";
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../../components/ui/table";
+import { buildTweaks, classNames, limitScrollFieldsModal } from "../../utils";
 import AccordionComponent from "../../components/AccordionComponent";
-import ShadTooltip from "../../components/ShadTooltipComponent";
 import CodeAreaComponent from "../../components/codeAreaComponent";
 import Dropdown from "../../components/dropdownComponent";
 import FloatComponent from "../../components/floatComponent";
@@ -20,38 +47,9 @@ import IntComponent from "../../components/intComponent";
 import PromptAreaComponent from "../../components/promptComponent";
 import TextAreaComponent from "../../components/textAreaComponent";
 import ToggleShadComponent from "../../components/toggleShadComponent";
-import {
+import ShadTooltip from "../../components/ShadTooltipComponent";
-  Dialog,
+import { cloneDeep, filter } from "lodash";
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "../../components/ui/dialog";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "../../components/ui/table";
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "../../components/ui/tabs";
-import {
-  EXPORT_CODE_DIALOG,
-  getCurlCode,
-  getPythonApiCode,
-  getPythonCode,
-} from "../../constants";
-import { darkContext } from "../../contexts/darkContext";
 import { TabsContext } from "../../contexts/tabsContext";
-import { FlowType } from "../../types/flow/index";
-import { buildTweaks, classNames } from "../../utils";
 
 export default function ApiModal({ flow }: { flow: FlowType }) {
   const [open, setOpen] = useState(true);

src/frontend/src/modals/EditNodeModal/index.tsx

@@ -1,17 +1,26 @@
-import { Variable } from "lucide-react";
 import { useContext, useEffect, useRef, useState } from "react";
-import CodeAreaComponent from "../../components/codeAreaComponent";
+import { PopUpContext } from "../../contexts/popUpContext";
-import Dropdown from "../../components/dropdownComponent";
+import { NodeDataType } from "../../types/flow";
-import FloatComponent from "../../components/floatComponent";
+import { classNames, limitScrollFieldsModal } from "../../utils";
-import InputComponent from "../../components/inputComponent";
+import { typesContext } from "../../contexts/typesContext";
-import InputFileComponent from "../../components/inputFileComponent";
+import {
-import InputListComponent from "../../components/inputListComponent";
+  Table,
-import IntComponent from "../../components/intComponent";
+  TableBody,
-import PromptAreaComponent from "../../components/promptComponent";
+  TableCell,
-import TextAreaComponent from "../../components/textAreaComponent";
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../../components/ui/table";
 import ToggleShadComponent from "../../components/toggleShadComponent";
-import { Badge } from "../../components/ui/badge";
+import InputListComponent from "../../components/inputListComponent";
-import { Button } from "../../components/ui/button";
+import TextAreaComponent from "../../components/textAreaComponent";
+import InputComponent from "../../components/inputComponent";
+import FloatComponent from "../../components/floatComponent";
+import Dropdown from "../../components/dropdownComponent";
+import IntComponent from "../../components/intComponent";
+import InputFileComponent from "../../components/inputFileComponent";
+import PromptAreaComponent from "../../components/promptComponent";
+import CodeAreaComponent from "../../components/codeAreaComponent";
 import {
   Dialog,
   DialogContent,
@@ -21,18 +30,9 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "../../components/ui/dialog";
-import {
+import { Button } from "../../components/ui/button";
-  Table,
+import { Badge } from "../../components/ui/badge";
-  TableBody,
+import { Variable } from "lucide-react";
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "../../components/ui/table";
-import { PopUpContext } from "../../contexts/popUpContext";
-import { typesContext } from "../../contexts/typesContext";
-import { NodeDataType } from "../../types/flow";
-import { classNames, limitScrollFieldsModal } from "../../utils";
 
 export default function EditNodeModal({ data }: { data: NodeDataType }) {
   const [open, setOpen] = useState(true);

src/frontend/src/modals/NodeModal/components/ModalField/index.tsx

@@ -1,14 +1,14 @@
 import { useState } from "react";
-import CodeAreaComponent from "../../../../components/codeAreaComponent";
-import Dropdown from "../../../../components/dropdownComponent";
-import FloatComponent from "../../../../components/floatComponent";
-import InputComponent from "../../../../components/inputComponent";
-import InputFileComponent from "../../../../components/inputFileComponent";
 import InputListComponent from "../../../../components/inputListComponent";
-import IntComponent from "../../../../components/intComponent";
+import Dropdown from "../../../../components/dropdownComponent";
-import PromptAreaComponent from "../../../../components/promptComponent";
 import TextAreaComponent from "../../../../components/textAreaComponent";
+import InputComponent from "../../../../components/inputComponent";
 import ToggleComponent from "../../../../components/toggleComponent";
+import FloatComponent from "../../../../components/floatComponent";
+import IntComponent from "../../../../components/intComponent";
+import InputFileComponent from "../../../../components/inputFileComponent";
+import PromptAreaComponent from "../../../../components/promptComponent";
+import CodeAreaComponent from "../../../../components/codeAreaComponent";
 import { classNames } from "../../../../utils";
 
 export default function ModalField({

src/frontend/src/modals/NodeModal/index.tsx

@@ -1,8 +1,6 @@
 import { Dialog, Transition } from "@headlessui/react";
-import { X } from "lucide-react";
 import { Fragment, useContext, useRef, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
-import { typesContext } from "../../contexts/typesContext";
 import { NodeDataType } from "../../types/flow";
 import {
   classNames,
@@ -11,7 +9,9 @@ import {
   nodeIconsLucide,
   toTitleCase,
 } from "../../utils";
+import { typesContext } from "../../contexts/typesContext";
 import ModalField from "./components/ModalField";
+import { X } from "lucide-react";
 
 export default function NodeModal({ data }: { data: NodeDataType }) {
   const [open, setOpen] = useState(true);

src/frontend/src/modals/chatModal/chatMessage/index.tsx

@@ -1,17 +1,17 @@
-import Convert from "ansi-to-html";
-import DOMPurify from "dompurify";
-import { MessageCircle, User2 } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
+import { ChatMessageType } from "../../../types/chat";
+import { classNames } from "../../../utils";
+import AiIcon from "../../../assets/Gooey Ring-5s-271px.svg";
+import AiIconStill from "../../../assets/froze-flow.png";
+import FileCard from "../fileComponent";
 import ReactMarkdown from "react-markdown";
 import rehypeMathjax from "rehype-mathjax";
 import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
-import AiIcon from "../../../assets/Gooey Ring-5s-271px.svg";
-import AiIconStill from "../../../assets/froze-flow.png";
-import { ChatMessageType } from "../../../types/chat";
-import { classNames } from "../../../utils";
-import FileCard from "../fileComponent";
 import { CodeBlock } from "./codeBlock";
+import Convert from "ansi-to-html";
+import { User2, MessageCircle } from "lucide-react";
+import DOMPurify from "dompurify";
 export default function ChatMessage({
   chat,
   lockChat,

src/frontend/src/modals/chatModal/index.tsx

@@ -1,14 +1,14 @@
 import { Dialog, Transition } from "@headlessui/react";
-import { Eraser, MessagesSquare, X } from "lucide-react";
 import { Fragment, useContext, useEffect, useRef, useState } from "react";
+import { FlowType } from "../../types/flow";
 import { alertContext } from "../../contexts/alertContext";
+import { validateNodes } from "../../utils";
 import { typesContext } from "../../contexts/typesContext";
+import ChatMessage from "./chatMessage";
+import { X, MessagesSquare, Eraser } from "lucide-react";
 import { sendAllProps } from "../../types/api";
 import { ChatMessageType } from "../../types/chat";
-import { FlowType } from "../../types/flow";
-import { validateNodes } from "../../utils";
 import ChatInput from "./chatInput";
-import ChatMessage from "./chatMessage";
 
 import _ from "lodash";
 import { getHealth } from "../../controllers/API";

src/frontend/src/modals/codeAreaModal/index.tsx

@@ -1,13 +1,14 @@
-import "ace-builds/src-noconflict/ext-language_tools";
+import { useContext, useRef, useState } from "react";
+import { PopUpContext } from "../../contexts/popUpContext";
+import AceEditor from "react-ace";
 import "ace-builds/src-noconflict/mode-python";
 import "ace-builds/src-noconflict/theme-github";
 import "ace-builds/src-noconflict/theme-twilight";
-import { useContext, useRef, useState } from "react";
+import "ace-builds/src-noconflict/ext-language_tools";
-import AceEditor from "react-ace";
-import { PopUpContext } from "../../contexts/popUpContext";
 // import "ace-builds/webpack-resolver";
-import { TerminalSquare } from "lucide-react";
+import { darkContext } from "../../contexts/darkContext";
-import { Button } from "../../components/ui/button";
+import { postValidateCode } from "../../controllers/API";
+import { alertContext } from "../../contexts/alertContext";
 import {
   Dialog,
   DialogContent,
@@ -17,10 +18,9 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "../../components/ui/dialog";
+import { Button } from "../../components/ui/button";
 import { CODE_PROMPT_DIALOG_SUBTITLE } from "../../constants";
-import { alertContext } from "../../contexts/alertContext";
+import { TerminalSquare } from "lucide-react";
-import { darkContext } from "../../contexts/darkContext";
-import { postValidateCode } from "../../controllers/API";
 import { APIClassType } from "../../types/api";
 
 export default function CodeAreaModal({

src/frontend/src/modals/exportModal/index.tsx

@@ -1,8 +1,8 @@
-import { Download } from "lucide-react";
 import { useContext, useRef, useState } from "react";
-import EditFlowSettings from "../../components/EditFlowSettingsComponent";
+import { alertContext } from "../../contexts/alertContext";
-import { Button } from "../../components/ui/button";
+import { PopUpContext } from "../../contexts/popUpContext";
-import { Checkbox } from "../../components/ui/checkbox";
+import { TabsContext } from "../../contexts/tabsContext";
+import { removeApiKeys } from "../../utils";
 import {
   Dialog,
   DialogContent,
@@ -12,11 +12,11 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "../../components/ui/dialog";
+import { Button } from "../../components/ui/button";
+import { Checkbox } from "../../components/ui/checkbox";
 import { EXPORT_DIALOG_SUBTITLE } from "../../constants";
-import { alertContext } from "../../contexts/alertContext";
+import { Download } from "lucide-react";
-import { PopUpContext } from "../../contexts/popUpContext";
+import EditFlowSettings from "../../components/EditFlowSettingsComponent";
-import { TabsContext } from "../../contexts/tabsContext";
-import { removeApiKeys } from "../../utils";
 
 export default function ExportModal() {
   const [open, setOpen] = useState(true);

src/frontend/src/modals/flowSettingsModal/index.tsx

@@ -1,7 +1,7 @@
-import { Settings2 } from "lucide-react";
 import { useContext, useRef, useState } from "react";
-import EditFlowSettings from "../../components/EditFlowSettingsComponent";
+import { alertContext } from "../../contexts/alertContext";
-import { Button } from "../../components/ui/button";
+import { PopUpContext } from "../../contexts/popUpContext";
+import { TabsContext } from "../../contexts/tabsContext";
 import {
   Dialog,
   DialogContent,
@@ -11,10 +11,11 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "../../components/ui/dialog";
+import { Button } from "../../components/ui/button";
 import { SETTINGS_DIALOG_SUBTITLE } from "../../constants";
-import { alertContext } from "../../contexts/alertContext";
+import EditFlowSettings from "../../components/EditFlowSettingsComponent";
-import { PopUpContext } from "../../contexts/popUpContext";
+import { Settings2 } from "lucide-react";
-import { TabsContext } from "../../contexts/tabsContext";
+import { updateFlowInDatabase } from "../../controllers/API";
 
 export default function FlowSettingsModal() {
   const [open, setOpen] = useState(true);

src/frontend/src/modals/formModal/chatInput/index.tsx

@@ -1,6 +1,7 @@
-import { Lock, LucideSend } from "lucide-react";
-import { useEffect } from "react";
 import { classNames } from "../../../utils";
+import { useContext, useEffect, useRef, useState } from "react";
+import { TabsContext } from "../../../contexts/tabsContext";
+import { Eraser, Lock, LucideSend } from "lucide-react";
 
 export default function ChatInput({
   lockChat,

src/frontend/src/modals/formModal/chatMessage/index.tsx

@@ -1,17 +1,32 @@
-import Convert from "ansi-to-html";
+import { useEffect, useRef, useState } from "react";
-import { ChevronDown } from "lucide-react";
+import { ChatMessageType } from "../../../types/chat";
-import { useState } from "react";
+import { classNames } from "../../../utils";
+import AiIcon from "../../../assets/Gooey Ring-5s-271px.svg";
+import AiIconStill from "../../../assets/froze-flow.png";
+import Robot from "../../../assets/robot.png";
+import MaleTechnology from "../../../assets/male-technologist.png";
+import FileCard from "../fileComponent";
 import ReactMarkdown from "react-markdown";
 import rehypeMathjax from "rehype-mathjax";
 import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
-import MaleTechnology from "../../../assets/male-technologist.png";
-import Robot from "../../../assets/robot.png";
-import { THOUGHTS_ICON } from "../../../constants";
-import { ChatMessageType } from "../../../types/chat";
-import { classNames } from "../../../utils";
-import FileCard from "../fileComponent";
 import { CodeBlock } from "./codeBlock";
+import Convert from "ansi-to-html";
+import {
+  User2,
+  MessageSquare,
+  ChevronDown,
+  MessageCircle,
+  MessageSquareDashed,
+} from "lucide-react";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "../../../components/ui/accordion";
+import { Badge } from "../../../components/ui/badge";
+import { THOUGHTS_ICON } from "../../../constants";
 
 export default function ChatMessage({
   chat,

src/frontend/src/modals/formModal/fileComponent/index.tsx

@@ -1,6 +1,6 @@
 import * as base64js from "base64-js";
-import { DownloadCloud, File } from "lucide-react";
 import { useState } from "react";
+import { DownloadCloud, File } from "lucide-react";
 
 export default function FileCard({ fileName, content, fileType }) {
   const handleDownload = () => {

src/frontend/src/modals/formModal/index.tsx

@@ -1,23 +1,15 @@
-import { Eraser, TerminalSquare, Variable } from "lucide-react";
 import { useContext, useEffect, useRef, useState } from "react";
+import { FlowType } from "../../types/flow";
 import { alertContext } from "../../contexts/alertContext";
+import { classNames, validateNodes } from "../../utils";
 import { typesContext } from "../../contexts/typesContext";
+import ChatMessage from "./chatMessage";
+import { TerminalSquare, MessageSquare, Variable, Eraser } from "lucide-react";
 import { sendAllProps } from "../../types/api";
 import { ChatMessageType } from "../../types/chat";
-import { FlowType } from "../../types/flow";
-import { classNames, validateNodes } from "../../utils";
 import ChatInput from "./chatInput";
-import ChatMessage from "./chatMessage";
 
 import _ from "lodash";
-import ToggleShadComponent from "../../components/toggleShadComponent";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "../../components/ui/accordion";
-import { Badge } from "../../components/ui/badge";
 import {
   Dialog,
   DialogContent,
@@ -26,9 +18,17 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "../../components/ui/dialog";
-import { Textarea } from "../../components/ui/textarea";
 import { CHAT_FORM_DIALOG_SUBTITLE, THOUGHTS_ICON } from "../../constants";
 import { TabsContext } from "../../contexts/tabsContext";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "../../components/ui/accordion";
+import { Textarea } from "../../components/ui/textarea";
+import { Badge } from "../../components/ui/badge";
+import ToggleShadComponent from "../../components/toggleShadComponent";
 
 export default function FormModal({
   flow,

src/frontend/src/modals/genericModal/index.tsx

@@ -1,9 +1,8 @@
-import DOMPurify from "dompurify";
+import { useContext, useRef, useState, useEffect } from "react";
-import { FileText, Variable } from "lucide-react";
+import { PopUpContext } from "../../contexts/popUpContext";
-import { useContext, useEffect, useRef, useState } from "react";
+import { darkContext } from "../../contexts/darkContext";
-import ShadTooltip from "../../components/ShadTooltipComponent";
+import { postValidatePrompt } from "../../controllers/API";
-import { Badge } from "../../components/ui/badge";
+import { alertContext } from "../../contexts/alertContext";
-import { Button } from "../../components/ui/button";
 import {
   Dialog,
   DialogContent,
@@ -13,16 +12,14 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "../../components/ui/dialog";
+import { Button } from "../../components/ui/button";
 import { Textarea } from "../../components/ui/textarea";
 import {
   HIGHLIGH_CSS,
   PROMPT_DIALOG_SUBTITLE,
   TEXT_DIALOG_SUBTITLE,
 } from "../../constants";
-import { alertContext } from "../../contexts/alertContext";
+import { FileText } from "lucide-react";
-import { darkContext } from "../../contexts/darkContext";
-import { PopUpContext } from "../../contexts/popUpContext";
-import { postValidatePrompt } from "../../controllers/API";
 import { APIClassType } from "../../types/api";
 import {
   INVALID_CHARACTERS,
@@ -32,6 +29,10 @@ import {
   regexHighlight,
   varHighlightHTML,
 } from "../../utils";
+import { Badge } from "../../components/ui/badge";
+import ShadTooltip from "../../components/ShadTooltipComponent";
+import DOMPurify from "dompurify";
+import { Variable } from "lucide-react";
 
 export default function GenericModal({
   field_name = "",
@@ -237,40 +238,40 @@ export default function GenericModal({
 
         {type == TypeModal.PROMPT && (
           <>
-            <div className="sm:6/6 mr-28 mt-3 h-[60px] overflow-y-auto custom-scroll">
+          <div className="h-[60px] overflow-y-auto custom-scroll sm:6/6 mt-3 mr-28">
-              <div className="flex flex-wrap items-center">
+            <div className="flex flex-wrap items-center">
-                <Variable className=" -ml-px mr-1 flex h-4 w-4 text-primary"></Variable>
+              <Variable className=" -ml-px mr-1 flex h-4 w-4 text-primary"></Variable>
-                <span className="text-md font-semibold text-primary">
+              <span className="text-md font-semibold text-primary">
-                  Input Variables:{" "}
+                Input Variables:{" "}
-                  {wordsHighlight && wordsHighlight.length == 0 ? "-" : ""}
+                {wordsHighlight && wordsHighlight.length == 0 ? "-" : ""}
-                </span>
+              </span>
 
-                {wordsHighlight.map((word, index) => (
+              {wordsHighlight.map((word, index) => (
-                  <ShadTooltip
+                <ShadTooltip
-                    key={getRandomKeyByssmm() + index}
+                  key={getRandomKeyByssmm() + index}
-                    content={word.replace(/[{}]/g, "")}
+                  content={word.replace(/[{}]/g, "")}
-                    asChild={false}
+                  asChild={false}
-                    delayDuration={1500}
+                  delayDuration={1500}
+                >
+                  <Badge
+                    key={index}
+                    variant="gray"
+                    size="md"
+                    className="m-1 max-w-[40vw] cursor-default truncate p-2.5 text-sm"
                   >
-                    <Badge
+                    <div className="relative bottom-[1px]">
-                      key={index}
+                      <span>
-                      variant="gray"
+                        {word.replace(/[{}]/g, "").length > 59
-                      size="md"
+                          ? word.replace(/[{}]/g, "").slice(0, 56) + "..."
-                      className="m-1 max-w-[40vw] cursor-default truncate p-2.5 text-sm"
+                          : word.replace(/[{}]/g, "")}
-                    >
+                      </span>
-                      <div className="relative bottom-[1px]">
+                    </div>
-                        <span>
+                  </Badge>
-                          {word.replace(/[{}]/g, "").length > 59
+                </ShadTooltip>
-                            ? word.replace(/[{}]/g, "").slice(0, 56) + "..."
+              ))}
-                            : word.replace(/[{}]/g, "")}
-                        </span>
-                      </div>
-                    </Badge>
-                  </ShadTooltip>
-                ))}
-              </div>
             </div>
-          </>
+          </div>
+        </>
         )}
 
         <DialogFooter>

src/frontend/src/modals/importModal/buttonBox/index.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import React, { ReactNode } from "react";
 import { classNames } from "../../../utils";
 
 export default function ButtonBox({

src/frontend/src/modals/importModal/index.tsx

@@ -1,11 +1,18 @@
 import {
-  ArrowLeftIcon,
-  ArrowUpTrayIcon,
-  ComputerDesktopIcon,
   DocumentDuplicateIcon,
+  ComputerDesktopIcon,
+  ArrowUpTrayIcon,
+  ArrowLeftIcon,
 } from "@heroicons/react/24/outline";
 import { useContext, useRef, useState } from "react";
+import { PopUpContext } from "../../contexts/popUpContext";
+import { TabsContext } from "../../contexts/tabsContext";
+import ButtonBox from "./buttonBox";
+import { getExamples } from "../../controllers/API";
+import { alertContext } from "../../contexts/alertContext";
 import LoadingComponent from "../../components/loadingComponent";
+import { FlowType } from "../../types/flow";
+import { classNames } from "../../utils";
 import {
   Dialog,
   DialogContent,
@@ -16,13 +23,6 @@ import {
   DialogTrigger,
 } from "../../components/ui/dialog";
 import { IMPORT_DIALOG_SUBTITLE } from "../../constants";
-import { alertContext } from "../../contexts/alertContext";
-import { PopUpContext } from "../../contexts/popUpContext";
-import { TabsContext } from "../../contexts/tabsContext";
-import { getExamples } from "../../controllers/API";
-import { FlowType } from "../../types/flow";
-import { classNames } from "../../utils";
-import ButtonBox from "./buttonBox";
 
 export default function ImportModal() {
   const [open, setOpen] = useState(true);

src/frontend/src/modals/promptModal/index.tsx

@@ -1,10 +1,10 @@
 import { Dialog, Transition } from "@headlessui/react";
-import { DocumentTextIcon, XMarkIcon } from "@heroicons/react/24/outline";
+import { XMarkIcon, DocumentTextIcon } from "@heroicons/react/24/outline";
 import { Fragment, useContext, useRef, useState } from "react";
-import { alertContext } from "../../contexts/alertContext";
-import { darkContext } from "../../contexts/darkContext";
 import { PopUpContext } from "../../contexts/popUpContext";
+import { darkContext } from "../../contexts/darkContext";
 import { checkPrompt } from "../../controllers/API";
+import { alertContext } from "../../contexts/alertContext";
 export default function PromptAreaModal({
   value,
   setValue,

src/frontend/src/modals/textAreaModal/index.tsx

@@ -1,7 +1,7 @@
 import { Dialog, Transition } from "@headlessui/react";
 import {
-  ClipboardDocumentListIcon,
   XMarkIcon,
+  ClipboardDocumentListIcon,
 } from "@heroicons/react/24/outline";
 import { Fragment, useContext, useRef, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";

src/frontend/src/pages/CommunityPage/index.tsx

@@ -1,13 +1,13 @@
-import { GitFork, GithubIcon, Users2 } from "lucide-react";
 import { useContext, useEffect, useState } from "react";
-import { Button } from "../../components/ui/button";
+import { GithubIcon, Users2, GitFork } from "lucide-react";
-import { alertContext } from "../../contexts/alertContext";
 import { TabsContext } from "../../contexts/tabsContext";
+import { alertContext } from "../../contexts/alertContext";
+import { Button } from "../../components/ui/button";
 
-import { useNavigate } from "react-router-dom";
-import { CardComponent } from "../../components/cardComponent";
 import { getExamples } from "../../controllers/API";
 import { FlowType } from "../../types/flow";
+import { CardComponent } from "../../components/cardComponent";
+import { useNavigate } from "react-router-dom";
 export default function CommunityPage() {
   const { flows, setTabId, downloadFlows, uploadFlows, addFlow } =
     useContext(TabsContext);

src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx

@@ -1,6 +1,6 @@
 import { Disclosure } from "@headlessui/react";
-import { ChevronRight } from "lucide-react";
 import { DisclosureComponentType } from "../../../../types/components";
+import { ChevronRight } from "lucide-react";
 
 export default function DisclosureComponent({
   button: { title, Icon, buttons = [] },

src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx

@@ -1,21 +1,21 @@
-import _ from "lodash";
+import _, { set } from "lodash";
-import { useCallback, useContext, useEffect, useRef, useState } from "react";
+import { useContext, useRef, useState, useEffect, useCallback } from "react";
 import ReactFlow, {
-  Background,
-  Connection,
-  Controls,
-  Edge,
-  EdgeChange,
-  NodeChange,
-  NodeDragHandler,
-  OnEdgesDelete,
   OnSelectionChangeParams,
-  SelectionDragHandler,
-  addEdge,
-  updateEdge,
-  useEdgesState,
   useNodesState,
+  useEdgesState,
   useReactFlow,
+  EdgeChange,
+  Connection,
+  addEdge,
+  NodeDragHandler,
+  SelectionDragHandler,
+  OnEdgesDelete,
+  Edge,
+  updateEdge,
+  Background,
+  Controls,
+  NodeChange,
 } from "reactflow";
 import GenericNode from "../../../../CustomNodes/GenericNode";
 import Chat from "../../../../components/chatComponent";
@@ -23,12 +23,12 @@ import { alertContext } from "../../../../contexts/alertContext";
 import { locationContext } from "../../../../contexts/locationContext";
 import { TabsContext } from "../../../../contexts/tabsContext";
 import { typesContext } from "../../../../contexts/typesContext";
-import { undoRedoContext } from "../../../../contexts/undoRedoContext";
 import { APIClassType } from "../../../../types/api";
 import { FlowType, NodeType } from "../../../../types/flow";
 import { isValidConnection } from "../../../../utils";
 import ConnectionLineComponent from "../ConnectionLineComponent";
 import ExtraSidebar from "../extraSidebarComponent";
+import { undoRedoContext } from "../../../../contexts/undoRedoContext";
 
 const nodeTypes = {
   genericNode: GenericNode,

src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx

@@ -1,21 +1,22 @@
-import { Code2, FileDown, FileUp, Menu, Save, Search } from "lucide-react";
+import DisclosureComponent from "../DisclosureComponent";
-import { useContext, useState } from "react";
-import ShadTooltip from "../../../../components/ShadTooltipComponent";
-import { Separator } from "../../../../components/ui/separator";
-import { alertContext } from "../../../../contexts/alertContext";
-import { PopUpContext } from "../../../../contexts/popUpContext";
-import { TabsContext } from "../../../../contexts/tabsContext";
-import { typesContext } from "../../../../contexts/typesContext";
-import ApiModal from "../../../../modals/ApiModal";
-import ExportModal from "../../../../modals/exportModal";
-import { APIClassType, APIObjectType } from "../../../../types/api";
 import {
   classNames,
   nodeColors,
   nodeIconsLucide,
   nodeNames,
 } from "../../../../utils";
-import DisclosureComponent from "../DisclosureComponent";
+import { useContext, useState } from "react";
+import { typesContext } from "../../../../contexts/typesContext";
+import { APIClassType, APIObjectType } from "../../../../types/api";
+import ShadTooltip from "../../../../components/ShadTooltipComponent";
+import { Code2, FileDown, FileUp, Save, Search } from "lucide-react";
+import { PopUpContext } from "../../../../contexts/popUpContext";
+import ExportModal from "../../../../modals/exportModal";
+import ApiModal from "../../../../modals/ApiModal";
+import { TabsContext } from "../../../../contexts/tabsContext";
+import { alertContext } from "../../../../contexts/alertContext";
+import { Separator } from "../../../../components/ui/separator";
+import { Menu } from "lucide-react";
 
 export default function ExtraSidebar() {
   const { data } = useContext(typesContext);

src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx

@@ -1,10 +1,10 @@
-import { Copy, FileText, Settings2, Trash2 } from "lucide-react";
 import { useContext, useState } from "react";
-import { useReactFlow } from "reactflow";
+import { Settings2, Copy, Trash2, FileText } from "lucide-react";
-import ShadTooltip from "../../../../components/ShadTooltipComponent";
-import { TabsContext } from "../../../../contexts/tabsContext";
-import EditNodeModal from "../../../../modals/EditNodeModal";
 import { classNames } from "../../../../utils";
+import { TabsContext } from "../../../../contexts/tabsContext";
+import { useReactFlow } from "reactflow";
+import EditNodeModal from "../../../../modals/EditNodeModal";
+import ShadTooltip from "../../../../components/ShadTooltipComponent";
 
 const NodeToolbarComponent = (props) => {
   const [nodeLength, setNodeLength] = useState(

src/frontend/src/pages/FlowPage/index.tsx

@@ -1,8 +1,8 @@
 import { useContext, useEffect, useState } from "react";
-import { useParams } from "react-router-dom";
-import { TabsContext } from "../../contexts/tabsContext";
-import { getVersion } from "../../controllers/API";
 import Page from "./components/PageComponent";
+import { TabsContext } from "../../contexts/tabsContext";
+import { useParams } from "react-router-dom";
+import { getVersion } from "../../controllers/API";
 
 export default function FlowPage() {
   const { flows, tabId, setTabId } = useContext(TabsContext);

src/frontend/src/pages/MainPage/index.tsx

@@ -1,10 +1,10 @@
-import { Download, ExternalLink, Home, Plus, Upload } from "lucide-react";
 import { useContext, useEffect } from "react";
+import { Download, Upload, Plus, Home, ExternalLink } from "lucide-react";
+import { TabsContext } from "../../contexts/tabsContext";
+import { Button } from "../../components/ui/button";
 import { Link, useNavigate } from "react-router-dom";
 import { CardComponent } from "../../components/cardComponent";
-import { Button } from "../../components/ui/button";
 import { USER_PROJECTS_HEADER } from "../../constants";
-import { TabsContext } from "../../contexts/tabsContext";
 export default function HomePage() {
   const { flows, setTabId, downloadFlows, uploadFlows, addFlow, removeFlow } =
     useContext(TabsContext);

src/frontend/src/routes.tsx

@@ -1,7 +1,7 @@
 import { Route, Routes } from "react-router-dom";
-import CommunityPage from "./pages/CommunityPage";
-import FlowPage from "./pages/FlowPage";
 import HomePage from "./pages/MainPage";
+import FlowPage from "./pages/FlowPage";
+import CommunityPage from "./pages/CommunityPage";
 
 const Router = () => {
   return (

src/frontend/src/types/api/index.ts

@@ -1,4 +1,4 @@
-import { Edge, Node, Viewport } from "reactflow";
+import { Node, Edge, Viewport } from "reactflow";
 //kind and class are just representative names to represent the actual structure of the object received by the API
 
 export type APIObjectType = { kind: APIKindType; [key: string]: APIKindType };

src/frontend/src/types/components/index.ts

@@ -1,7 +1,7 @@
 import { ReactElement, ReactNode } from "react";
-import { APIClassType } from "../api";
 import { NodeDataType } from "../flow/index";
 import { typesContextType } from "../typesContext";
+import { APIClassType } from "../api";
 export type InputComponentType = {
   value: string;
   disabled?: boolean;

src/frontend/src/types/flow/index.ts

@@ -1,5 +1,6 @@
-import { ReactFlowJsonObject, XYPosition } from "reactflow";
+import { ChatMessageType } from "./../chat/index";
 import { APIClassType } from "../api/index";
+import { ReactFlowJsonObject, XYPosition } from "reactflow";
 
 export type FlowType = {
   name: string;

src/frontend/src/utils.ts

@@ -1,9 +1,34 @@
-import clsx, { ClassValue } from "clsx";
+import { Connection, Edge, Node, ReactFlowInstance } from "reactflow";
+import { FlowType, NodeType } from "./types/flow";
+import { APITemplateType } from "./types/api";
 import _ from "lodash";
+import { ChromaIcon } from "./icons/ChromaIcon";
+import { AnthropicIcon } from "./icons/Anthropic";
+import { AirbyteIcon } from "./icons/Airbyte";
+import { BingIcon } from "./icons/Bing";
+import { CohereIcon } from "./icons/Cohere";
+import { EvernoteIcon } from "./icons/Evernote";
+import { FBIcon } from "./icons/FacebookMessenger";
+import { GitBookIcon } from "./icons/GitBook";
+import { GoogleIcon } from "./icons/Google";
+import { HackerNewsIcon } from "./icons/hackerNews";
+import { HugginFaceIcon } from "./icons/HuggingFace";
+import { IFixIcon } from "./icons/IFixIt";
+import { MetaIcon } from "./icons/Meta";
+import { MidjourneyIcon } from "./icons/Midjorney";
+import { NotionIcon } from "./icons/Notion";
+import { OpenAiIcon } from "./icons/OpenAi";
+import { QDrantIcon } from "./icons/QDrant";
+import { SearxIcon } from "./icons/Searx";
+import { SlackIcon } from "./icons/Slack";
+import { PineconeIcon } from "./icons/Pinecone";
+import clsx, { ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+import { ADJECTIVES, DESCRIPTIONS, NOUNS } from "./flow_constants";
+import { ComponentType, SVGProps } from "react";
 import {
   Compass,
   Cpu,
-  FileSearch,
   Fingerprint,
   Gift,
   Hammer,
@@ -16,40 +41,15 @@ import {
   Paperclip,
   Rocket,
   Scissors,
+  FileSearch,
   TerminalSquare,
   Wand2,
   Wrench,
 } from "lucide-react";
-import { ComponentType, SVGProps } from "react";
-import { Connection, Edge, Node, ReactFlowInstance } from "reactflow";
-import { twMerge } from "tailwind-merge";
-import { ADJECTIVES, DESCRIPTIONS, NOUNS } from "./flow_constants";
-import { AirbyteIcon } from "./icons/Airbyte";
-import { AnthropicIcon } from "./icons/Anthropic";
-import { BingIcon } from "./icons/Bing";
-import { ChromaIcon } from "./icons/ChromaIcon";
-import { CohereIcon } from "./icons/Cohere";
-import { EvernoteIcon } from "./icons/Evernote";
-import { FBIcon } from "./icons/FacebookMessenger";
-import { GitBookIcon } from "./icons/GitBook";
-import { GoogleIcon } from "./icons/Google";
-import { HugginFaceIcon } from "./icons/HuggingFace";
-import { IFixIcon } from "./icons/IFixIt";
-import { MetaIcon } from "./icons/Meta";
-import { MidjourneyIcon } from "./icons/Midjorney";
-import { MongoDBIcon } from "./icons/MongoDB";
-import { NotionIcon } from "./icons/Notion";
-import { OpenAiIcon } from "./icons/OpenAi";
-import { PineconeIcon } from "./icons/Pinecone";
-import { QDrantIcon } from "./icons/QDrant";
-import { SearxIcon } from "./icons/Searx";
-import { SlackIcon } from "./icons/Slack";
-import { VertexAIIcon } from "./icons/VertexAI";
-import { HackerNewsIcon } from "./icons/hackerNews";
 import { SupabaseIcon } from "./icons/supabase";
-import { APITemplateType } from "./types/api";
+import { MongoDBIcon } from "./icons/MongoDB";
+import { VertexAIIcon } from "./icons/VertexAI";
 import { IVarHighlightType } from "./types/components";
-import { FlowType, NodeType } from "./types/flow";
 
 export function classNames(...classes: Array<string>) {
   return classes.filter(Boolean).join(" ");

src/frontend/vite.config.ts

@@ -1,5 +1,5 @@
-import react from "@vitejs/plugin-react-swc";
 import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react-swc";
 import svgr from "vite-plugin-svgr";
 const apiRoutes = ["^/api/v1/", "/health"];