🐛 fix(AccordionComponent): fix formatting and add missing semicolons to improve code readability and maintainability

🐛 fix(codeAreaComponent): fix formatting and add missing semicolons to improve code readability and maintainability
🐛 fix(dropdownComponent): fix formatting and add missing semicolons to improve code readability and maintainability
🐛 fix(floatComponent): fix formatting and add missing semicolons to improve code readability and maintainability
🐛 fix(inputFileComponent): fix formatting and add missing semicolons to improve code readability and maintainability
🐛 fix(inputListComponent): fix formatting and add missing semicolons to improve code readability and maintainability
🐛 fix(intComponent): fix formatting and add missing semicolons to improve code readability and maintainability
🐛 fix(promptComponent): fix formatting and add missing semicolons to improve code readability and maintainability
🐛 fix(textAreaComponent): fix formatting and add missing semicolons to improve code readability and maintainability
🐛 fix(ui/accordion.tsx): fix formatting and add missing semicolons to improve code readability and maintainability

The changes were made to fix formatting issues and add missing semicolons in the code. This improves code readability and maintainability, making it easier for developers to understand and work with the code.

🐛 fix(constants.tsx): fix formatting and indentation issues in the buildTweakObject function
🐛 fix(popUpContext.tsx): remove unnecessary empty line
🐛 fix(tabsContext.tsx): remove unnecessary empty line
🐛 fix(ApiModal/index.tsx): fix formatting and indentation issues
🐛 fix(codeAreaModal/index.tsx): fix formatting and indentation issues
🐛 fix(types/components/index.ts): remove unnecessary empty line
The changes in constants.tsx fix formatting and indentation issues in the buildTweakObject function to improve code readability. The changes in popUpContext.tsx, tabsContext.tsx, ApiModal/index.tsx, codeAreaModal/index.tsx, and types/components/index.ts fix formatting and indentation issues to ensure consistent code style.

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

@@ -17,15 +17,17 @@ export default function AccordionComponent({
   children,
   open = [],
 }: AccordionComponentType) {
-  const [value, setValue] = useState(open.length == 0 ? "" : getOpenAccordion());
+  const [value, setValue] = useState(
+    open.length == 0 ? "" : getOpenAccordion()
+  );
 
-  function getOpenAccordion(){
+  function getOpenAccordion() {
     let value = "";
-    open.forEach(el => {
+    open.forEach((el) => {
-      if(el == trigger){
+      if (el == trigger) {
         value = trigger;
       }
-    })
+    });
 
     return value;
   }

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

@@ -12,7 +12,9 @@ export default function CodeAreaComponent({
   disabled,
   editNode = false,
 }: TextAreaComponentType) {
-  const [myValue, setMyValue] = useState(typeof value == "string" ? value : JSON.stringify(value));
+  const [myValue, setMyValue] = useState(
+    typeof value == "string" ? value : JSON.stringify(value)
+  );
   const { openPopUp } = useContext(PopUpContext);
   useEffect(() => {
     if (disabled) {
@@ -47,7 +49,8 @@ export default function CodeAreaComponent({
           className={
             editNode
               ? "truncate cursor-pointer placeholder:text-center text-gray-500 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 border-1 shadow-sm sm:text-sm" +
-                INPUT_STYLE + (disabled ? " bg-gray-200 " : "")
+                INPUT_STYLE +
+                (disabled ? " bg-gray-200 " : "")
               : "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm sm:text-sm" +
                 INPUT_STYLE +
                 (disabled ? " bg-gray-200" : "")

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

@@ -13,7 +13,7 @@ export default function Dropdown({
   onSelect,
   editNode = false,
   numberOfOptions = 0,
-  apiModal = false
+  apiModal = false,
 }: DropDownComponentType) {
   const { closePopUp } = useContext(PopUpContext);
 
@@ -67,14 +67,12 @@ export default function Dropdown({
                 leaveTo="opacity-0"
               >
                 <Listbox.Options
-                  className={
+                  className={classNames(
-                    classNames(
+                    editNode
-                      editNode
                       ? "z-10 mt-1 max-h-60 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm w-[215px]"
                       : "nowheel z-10 mt-1 max-h-60 w-full overflow-auto overflow-y rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm ",
-                      apiModal ? 'w-[250px] mb-2' : 'absolute'
+                    apiModal ? "w-[250px] mb-2" : "absolute"
-                    )
+                  )}
-                  }
                 >
                   {options.map((option, id) => (
                     <Listbox.Option

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

@@ -59,7 +59,8 @@ export default function FloatComponent({
         className={
           editNode
             ? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
-              INPUT_STYLE + (disabled ? " bg-gray-200 " : "")
+              INPUT_STYLE +
+              (disabled ? " bg-gray-200 " : "")
             : "focus:placeholder-transparent block w-full form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm ring-offset-gray-200 sm:text-sm" +
               INPUT_STYLE +
               (disabled ? " bg-gray-200 dark:bg-gray-700" : "")

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

@@ -104,7 +104,8 @@ export default function InputFileComponent({
           className={
             editNode
               ? "truncate placeholder:text-center text-gray-500 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm border-1" +
-                INPUT_STYLE + (disabled ? " bg-gray-200 " : "")
+                INPUT_STYLE +
+                (disabled ? " bg-gray-200 " : "")
               : "truncate block w-full text-gray-500 dark:text-gray-300 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm sm:text-sm" +
                 INPUT_STYLE +
                 (disabled ? " bg-gray-200 " : "")

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

@@ -12,7 +12,7 @@ export default function InputListComponent({
   onChange,
   disabled,
   editNode = false,
-  onAddInput
+  onAddInput,
 }: InputListComponentType) {
   const [inputList, setInputList] = useState(value ?? [""]);
   const { closePopUp } = useContext(PopUpContext);
@@ -43,7 +43,8 @@ export default function InputListComponent({
             className={
               editNode
                 ? "border-[1px]  truncate cursor-pointer text-center placeholder:text-center text-gray-500 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
-                  INPUT_STYLE + (disabled ? " bg-gray-200 " : "")
+                  INPUT_STYLE +
+                  (disabled ? " bg-gray-200 " : "")
                 : "block w-full form-input rounded-md border-gray-300 shadow-sm focus:border-gray-500 focus:ring-gray-500 sm:text-sm" +
                   (disabled ? " bg-gray-200" : "") +
                   "focus:placeholder-transparent"

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

@@ -73,7 +73,8 @@ export default function IntComponent({
         className={
           editNode
             ? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
-              INPUT_STYLE + (disabled ? " bg-gray-200 " : "")
+              INPUT_STYLE +
+              (disabled ? " bg-gray-200 " : "")
             : "focus:placeholder-transparent block w-full form-input dark:bg-gray-900 dark:border-gray-600 dark:text-gray-300 rounded-md border-gray-300 shadow-sm ring-offset-background sm:text-sm" +
               INPUT_STYLE +
               (disabled ? " bg-gray-200 dark:bg-gray-700" : "")

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

@@ -50,7 +50,8 @@ export default function PromptAreaComponent({
           className={
             editNode
               ? "cursor-pointer truncate placeholder:text-center text-gray-500 border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
-                INPUT_STYLE + (disabled ? " bg-gray-200 " : "")
+                INPUT_STYLE +
+                (disabled ? " bg-gray-200 " : "")
               : "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm sm:text-sm" +
                 (disabled ? " bg-gray-200" : "")
           }

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

@@ -53,7 +53,8 @@ export default function TextAreaComponent({
           className={
             editNode
               ? "truncate cursor-pointer placeholder:text-center text-gray-500 border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
-                INPUT_STYLE + (disabled ? " bg-gray-200 " : "")
+                INPUT_STYLE +
+                (disabled ? " bg-gray-200 " : "")
               : "truncate block w-full text-gray-500 dark:text-muted px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm sm:text-sm" +
                 (disabled ? " bg-gray-200" : "")
           }

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

@@ -1,12 +1,11 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
-import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
-import { ChevronDownIcon } from "@radix-ui/react-icons"
+import { ChevronDownIcon } from "@radix-ui/react-icons";
-import { cn } from "../../utils"
+import { cn } from "../../utils";
 
-
+const Accordion = AccordionPrimitive.Root;
-const Accordion = AccordionPrimitive.Root
 
 const AccordionItem = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Item>,
@@ -17,8 +16,8 @@ const AccordionItem = React.forwardRef<
     className={cn("border-b", className)}
     {...props}
   />
-))
+));
-AccordionItem.displayName = "AccordionItem"
+AccordionItem.displayName = "AccordionItem";
 
 const AccordionTrigger = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Trigger>,
@@ -37,8 +36,8 @@ const AccordionTrigger = React.forwardRef<
       <ChevronDownIcon className="h-4 w-4 text-muted-foreground transition-transform duration-200" />
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
-))
+));
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
 
 const AccordionContent = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Content>,
@@ -54,7 +53,7 @@ const AccordionContent = React.forwardRef<
   >
     <div className="pb-4 pt-0">{children}</div>
   </AccordionPrimitive.Content>
-))
+));
-AccordionContent.displayName = AccordionPrimitive.Content.displayName
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
 
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

src/frontend/src/constants.tsx

@@ -71,7 +71,9 @@ FLOW_ID = "${flowId}"
 # You can tweak the flow by adding a tweaks dictionary
 # e.g {"OpenAI-XXXXX": {"model_name": "gpt-4"}}
 TWEAKS = ${
-    tweak && tweak.length > 0 ? buildTweakObject(tweak): JSON.stringify(tweaks, null, 2)
+    tweak && tweak.length > 0
+      ? buildTweakObject(tweak)
+      : JSON.stringify(tweaks, null, 2)
   }
 
 def run_flow(message: str, flow_id: str, tweaks: dict = None) -> dict:
@@ -111,7 +113,9 @@ export const getCurlCode = (flow: FlowType, tweak?): string => {
   }/api/v1/process/${flowId} \\
   -H 'Content-Type: application/json' \\
   -d '{"inputs": {"input": message}, "tweaks": ${
-    tweak && tweak.length > 0 ? buildTweakObject(tweak) : JSON.stringify(tweaks, null, 2)
+    tweak && tweak.length > 0
+      ? buildTweakObject(tweak)
+      : JSON.stringify(tweaks, null, 2)
   }}'`;
 };
 /**
@@ -124,23 +128,24 @@ export const getPythonCode = (flow: FlowType, tweak?): string => {
   const tweaks = buildTweaks(flow);
   return `from langflow import load_flow_from_json
 TWEAKS = ${
-  tweak && tweak.length > 0 ? buildTweakObject(tweak) : JSON.stringify(tweaks, null, 2)
+    tweak && tweak.length > 0
+      ? buildTweakObject(tweak)
+      : JSON.stringify(tweaks, null, 2)
   }
 flow = load_flow_from_json("${flowName}.json", tweaks=TWEAKS)
 # Now you can use it like any chain
 flow("Hey, have you heard of LangFlow?")`;
 };
 
-function buildTweakObject(tweak){
+function buildTweakObject(tweak) {
-  tweak.forEach(el => {
+  tweak.forEach((el) => {
-    Object.keys(el).forEach(key => {
+    Object.keys(el).forEach((key) => {
       for (let kp in el[key]) {
-        try{
+        try {
           el[key][kp] = JSON.parse(el[key][kp]);
-        }
+        } catch {}
-        catch{}
       }
-    })
+    });
   });
 
   const tweakString = JSON.stringify(tweak, null, 2);

src/frontend/src/contexts/popUpContext.tsx

@@ -13,7 +13,6 @@ interface PopUpProviderProps {
   children: React.ReactNode;
 }
 
-
 const PopUpProvider = ({ children }: PopUpProviderProps) => {
   const [popUpElements, setPopUpElements] = useState<JSX.Element[]>([]);
 
@@ -27,9 +26,10 @@ const PopUpProvider = ({ children }: PopUpProviderProps) => {
 
   const [closeEdit, setCloseEdit] = useState("");
 
-
   return (
-    <PopUpContext.Provider value={{ openPopUp, closePopUp, closeEdit, setCloseEdit }}>
+    <PopUpContext.Provider
+      value={{ openPopUp, closePopUp, closeEdit, setCloseEdit }}
+    >
       {children}
       {popUpElements[0]}
     </PopUpContext.Provider>

src/frontend/src/contexts/tabsContext.tsx

@@ -648,7 +648,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
         setTabsState,
         paste,
         getTweak,
-        setTweak
+        setTweak,
       }}
     >
       {children}

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

@@ -104,11 +104,10 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
   useEffect(() => {
     if (closeEdit !== "") {
       tweak.current = getTweak;
-      if(tweak.current.length > 0){
+      if (tweak.current.length > 0) {
         setActiveTab("3");
         openAccordions();
-      }
+      } else {
-      else{
         startTweaks();
       }
     } else {
@@ -250,14 +249,14 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
 
   function openAccordions() {
     let accordionsToOpen = [];
-      tweak.current.forEach((el) => {
+    tweak.current.forEach((el) => {
-        Object.keys(el).forEach((key) => {
+      Object.keys(el).forEach((key) => {
-          if (Object.keys(el[key]).length > 0) {
+        if (Object.keys(el[key]).length > 0) {
-            accordionsToOpen.push(key);
+          accordionsToOpen.push(key);
-            setOpenAccordion(accordionsToOpen);
+          setOpenAccordion(accordionsToOpen);
-          }
+        }
-        });
       });
+    });
   }
 
   return (

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

@@ -34,7 +34,7 @@ export default function CodeAreaModal({
   const [code, setCode] = useState(value);
   const { dark } = useContext(darkContext);
   const { setErrorData, setSuccessData } = useContext(alertContext);
-  const { closePopUp,setCloseEdit } = useContext(PopUpContext);
+  const { closePopUp, setCloseEdit } = useContext(PopUpContext);
   const ref = useRef();
   function setModalOpen(x: boolean) {
     setOpen(x);

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

@@ -44,7 +44,6 @@ export type InputListComponentType = {
   disabled: boolean;
   editNode?: boolean;
   onAddInput?: (value?: string[]) => void;
-
 };
 
 export type TextAreaComponentType = {
@@ -114,7 +113,7 @@ export type RadialProgressType = {
   color?: string;
 };
 
-export type AccordionComponentType  = {
+export type AccordionComponentType = {
   children?: ReactElement;
   open?: string[];
   trigger?: string;