Formatting

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

@@ -42,7 +42,7 @@ export default function ExtraSidebar() {
                               item.href.split("/")[2] === current[4]
                                 ? "text-ring"
                                 : "text-ring group-hover:text-accent-foreground",
-                              "mr-3 flex-shrink-0 h-6 w-6"
+                              "mr-3 h-6 w-6 flex-shrink-0"
                             )}
                           />
                           {item.name}
@@ -71,8 +71,8 @@ export default function ExtraSidebar() {
                               <span className="flex-1">{item.name}</span>
                               <svg
                                 className={classNames(
-                                  open ? "text-ring rotate-90" : "text-ring",
+                                  open ? "rotate-90 text-ring" : "text-ring",
-                                  "ml-3 h-5 w-5 flex-shrink-0 transition-rotate duration-150 ease-in-out group-hover:text-accent-foreground"
+                                  "transition-rotate ml-3 h-5 w-5 flex-shrink-0 duration-150 ease-in-out group-hover:text-accent-foreground"
                                 )}
                                 viewBox="0 0 20 20"
                                 aria-hidden="true"

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

@@ -156,7 +156,11 @@ export default function BuildTrigger({
       leaveFrom="translate-y-0"
       leaveTo="translate-y-96"
     >
-      <div className={'round-buttons-position' + (isBuilt ? " bottom-20" : " bottom-4")}>
+      <div
+        className={
+          "round-buttons-position" + (isBuilt ? " bottom-20" : " bottom-4")
+        }
+      >
         <div
           className={`${eventClick} round-button-form`}
           onClick={() => {
@@ -175,7 +179,10 @@ export default function BuildTrigger({
                   value={progress}
                 ></RadialProgressComponent>
               ) : isBuilding ? (
-                <Loading strokeWidth={1.5} className="build-trigger-loading-icon" />
+                <Loading
+                  strokeWidth={1.5}
+                  className="build-trigger-loading-icon"
+                />
               ) : (
                 <Zap strokeWidth={1.5} className="build-trigger-icon" />
               )}

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

@@ -31,10 +31,7 @@ export default function ChatTrigger({ open, setOpen, isBuilt }) {
       leaveTo="translate-y-96"
     >
       <div className="message-button-position">
-        <div
+        <div className="round-button-form" onClick={handleClick}>
-          className="round-button-form"
-          onClick={handleClick}
-        >
           <button>
             <div className="round-button-div">
               <MessagesSquare

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

@@ -49,7 +49,8 @@ export default function CodeAreaComponent({
           className={
             editNode
               ? "input-edit-node input-dialog"
-              : "input-primary input-dialog " + (disabled ? "input-disable" : "")
+              : "input-dialog input-primary " +
+                (disabled ? "input-disable" : "")
           }
         >
           {myValue !== "" ? myValue : "Type something..."}
@@ -68,7 +69,10 @@ export default function CodeAreaComponent({
           }}
         >
           {!editNode && (
-            <ExternalLink strokeWidth={1.5} className="w-6 h-6 hover:text-accent-foreground  ml-3" />
+            <ExternalLink
+              strokeWidth={1.5}
+              className="ml-3 h-6 w-6  hover:text-accent-foreground"
+            />
           )}
         </button>
       </div>

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

@@ -39,8 +39,8 @@ export default function Dropdown({
               <Listbox.Button
                 className={
                   editNode
-                    ? "border-1 relative pr-8 input-edit-node"
+                    ? "border-1 input-edit-node relative pr-8"
-                    : "py-2 pl-3 pr-10 text-left input-primary"
+                    : "input-primary py-2 pl-3 pr-10 text-left"
                 }
               >
                 <span className="block w-full truncate bg-background">

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

@@ -75,7 +75,7 @@ export default function Header() {
             href="https://github.com/logspace-ai/langflow"
             target="_blank"
             rel="noreferrer"
-            className="inline-flex shadow-sm items-center justify-center text-sm font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background text-muted-foreground  border border-input hover:bg-accent hover:text-accent-foreground h-9 px-3 pr-0 rounded-md"
+            className="inline-flex h-9 items-center justify-center rounded-md border border-input px-3 pr-0 text-sm font-medium text-muted-foreground shadow-sm ring-offset-background  hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
           >
             <FaGithub className="mr-2 h-5 w-5" />
             Star
@@ -114,7 +114,7 @@ export default function Header() {
             )}
           </button>
           <button
-            className="text-muted-foreground hover:text-accent-foreground relative"
+            className="relative text-muted-foreground hover:text-accent-foreground"
             onClick={(event: React.MouseEvent<HTMLElement>) => {
               setNotificationCenter(false);
               const { top, left } = (

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

@@ -110,7 +110,10 @@ export default function InputFileComponent({
         </span>
         <button onClick={handleButtonClick}>
           {!editNode && !loading && (
-            <FileSearch2 strokeWidth={1.5} className="w-6 h-6 hover:text-accent-foreground" />
+            <FileSearch2
+              strokeWidth={1.5}
+              className="h-6 w-6 hover:text-accent-foreground"
+            />
           )}
           {!editNode && loading && (
             <span className="loading loading-spinner loading-sm pointer-events-none h-8 pl-3"></span>

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

@@ -31,7 +31,7 @@ export default function PromptAreaComponent({
         disabled ? "pointer-events-none w-full cursor-not-allowed" : " w-full"
       }
     >
-      <div className="w-full flex items-center">
+      <div className="flex w-full items-center">
         <span
           onClick={() => {
             openPopUp(
@@ -50,7 +50,9 @@ export default function PromptAreaComponent({
           className={
             editNode
               ? " input-edit-node " + " input-dialog "
-              : (disabled ? " input-disable " : "") + " input-primary " + " input-dialog "
+              : (disabled ? " input-disable " : "") +
+                " input-primary " +
+                " input-dialog "
           }
         >
           {myValue !== "" ? myValue : "Type your prompt here"}
@@ -71,7 +73,12 @@ export default function PromptAreaComponent({
             );
           }}
         >
-          {!editNode && <ExternalLink strokeWidth={1.5} className="w-6 h-6 hover:text-accent-foreground ml-3" />}
+          {!editNode && (
+            <ExternalLink
+              strokeWidth={1.5}
+              className="ml-3 h-6 w-6 hover:text-accent-foreground"
+            />
+          )}
         </button>
       </div>
     </div>

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

@@ -30,9 +30,7 @@ export default function TextAreaComponent({
     <div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}>
       <div
         className={
-          editNode
+          editNode ? "w-full items-center" : "flex w-full items-center gap-3"
-            ? "w-full items-center"
-            : "w-full flex items-center gap-3"
         }
       >
         <span
@@ -53,7 +51,9 @@ export default function TextAreaComponent({
           className={
             editNode
               ? "input-edit-node " + " input-dialog "
-              : " input_dialog " + "px-3 py-2" + (disabled ? " input-disable " : "")
+              : " input_dialog " +
+                "px-3 py-2" +
+                (disabled ? " input-disable " : "")
           }
         >
           {myValue !== "" ? myValue : "Type something..."}
@@ -74,7 +74,12 @@ export default function TextAreaComponent({
             );
           }}
         >
-          {!editNode && <ExternalLink strokeWidth={1.5} className="w-6 h-6 hover:text-accent-foreground ml-3" />}
+          {!editNode && (
+            <ExternalLink
+              strokeWidth={1.5}
+              className="ml-3 h-6 w-6 hover:text-accent-foreground"
+            />
+          )}
         </button>
       </div>
     </div>

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

@@ -44,7 +44,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed gap-3 z-50 grid w-full rounded-b-lg border bg-background p-6 shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0",
+        "fixed z-50 grid w-full gap-3 rounded-b-lg border bg-background p-6 shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0",
         className
       )}
       {...props}

src/frontend/src/contexts/tabsContext.tsx

@@ -288,7 +288,11 @@ export function TabsProvider({ children }: { children: ReactNode }) {
     // create a link element and set its properties
     const link = document.createElement("a");
     link.href = jsonString;
-    link.download = `${flowName && flowName != "" ? flowName : flows.find((f) => f.id === tabId).name}.json`;
+    link.download = `${
+      flowName && flowName != ""
+        ? flowName
+        : flows.find((f) => f.id === tabId).name
+    }.json`;
 
     // simulate a click on the link element to trigger the download
     link.click();

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,25 +249,25 @@ 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 (
     <Dialog open={true} onOpenChange={setModalOpen}>
       <DialogTrigger></DialogTrigger>
-      <DialogContent className="lg:max-w-[80vw] h-[80vh]">
+      <DialogContent className="h-[80vh] lg:max-w-[80vw]">
         <DialogHeader>
           <DialogTitle className="flex items-center">
             <span className="pr-2">Code</span>
             <Code2
-              className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
+              className="h-6 w-6 pl-1 text-gray-800 dark:text-white"
               aria-hidden="true"
             />
           </DialogTitle>
@@ -277,7 +276,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
 
         <Tabs
           value={activeTab}
-          className="w-full h-full overflow-hidden text-center bg-muted rounded-md border"
+          className="h-full w-full overflow-hidden rounded-md border bg-muted text-center"
           onValueChange={(value) => {
             setActiveTab(value);
             if (value === "3") {
@@ -296,7 +295,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
             {Number(activeTab) < 3 && (
               <div className="float-right">
                 <button
-                  className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-gray-500 dark:text-gray-300"
+                  className="flex items-center gap-1.5 rounded bg-none p-1 text-xs text-gray-500 dark:text-gray-300"
                   onClick={copyToClipboard}
                 >
                   {isCopied ? <Check size={18} /> : <Clipboard size={15} />}
@@ -309,12 +308,12 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
           {tabs.map((tab, index) => (
             <TabsContent
               value={index.toString()}
-              className="overflow-hidden w-full h-full px-4 pb-4 -mt-1"
+              className="-mt-1 h-full w-full overflow-hidden px-4 pb-4"
               key={index} // Remember to add a unique key prop
             >
               {index < 3 ? (
                 <SyntaxHighlighter
-                  className="w-full overflow-auto h-[60vh]"
+                  className="h-[60vh] w-full overflow-auto"
                   language={tab.mode}
                   style={oneDark}
                 >
@@ -322,10 +321,10 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                 </SyntaxHighlighter>
               ) : index === 3 ? (
                 <>
-                  <div className="flex w-full h-full mt-2">
+                  <div className="mt-2 flex h-full w-full">
                     <div
                       className={classNames(
-                        "w-full rounded-lg bg-muted h-[60vh]",
+                        "h-[60vh] w-full rounded-lg bg-muted",
                         1 == 1
                           ? "overflow-scroll overflow-x-hidden custom-scroll"
                           : "overflow-hidden"
@@ -338,14 +337,14 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                               trigger={t["data"]["id"]}
                               open={openAccordion}
                             >
-                              <div className="flex flex-col gap-5 h-fit">
+                              <div className="flex h-fit flex-col gap-5">
                                 <Table className="table-fixed bg-muted outline-1">
-                                  <TableHeader className="border-input text-xs font-medium text-ring h-10">
+                                  <TableHeader className="h-10 border-input text-xs font-medium text-ring">
                                     <TableRow className="dark:border-b-muted">
                                       <TableHead className="h-7 text-center">
                                         PARAM
                                       </TableHead>
-                                      <TableHead className="p-0 h-7 text-center">
+                                      <TableHead className="h-7 p-0 text-center">
                                         VALUE
                                       </TableHead>
                                     </TableRow>
@@ -379,11 +378,11 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                             key={i}
                                             className="h-10 dark:border-b-muted"
                                           >
-                                            <TableCell className="p-0 text-center text-gray-900 text-sm">
+                                            <TableCell className="p-0 text-center text-sm text-gray-900">
                                               {n}
                                             </TableCell>
-                                            <TableCell className="p-0 text-center text-gray-900 text-xs dark:text-gray-300">
+                                            <TableCell className="p-0 text-center text-xs text-gray-900 dark:text-gray-300">
-                                              <div className="w-[250px] m-auto">
+                                              <div className="m-auto w-[250px]">
                                                 {t.data.node.template[n]
                                                   .type === "str" &&
                                                 !t.data.node.template[n]

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

@@ -81,7 +81,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
   return (
     <Dialog open={true} onOpenChange={setModalOpen}>
       <DialogTrigger asChild></DialogTrigger>
-      <DialogContent className="lg:max-w-[700px] sm:max-w-[600px]">
+      <DialogContent className="sm:max-w-[600px] lg:max-w-[700px]">
         <DialogHeader>
           <DialogTitle className="flex items-center">
             <span className="pr-2">{data.type}</span>
@@ -135,7 +135,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
                       )
                       .map((n, i) => (
                         <TableRow key={i} className="h-10">
-                          <TableCell className="p-0 text-center text-sm text-foreground truncate sm:px-3">
+                          <TableCell className="truncate p-0 text-center text-sm text-foreground sm:px-3">
                             {data.node.template[n].name
                               ? data.node.template[n].name
                               : data.node.template[n].display_name}

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

@@ -53,8 +53,8 @@ export default function CodeAreaModal({
           <DialogTitle className="flex items-center">
             <span className="pr-2">Edit Code</span>
             <TerminalSquare
-            strokeWidth={1.5}
+              strokeWidth={1.5}
-              className="h-6 w-6 text-primary pl-1 "
+              className="h-6 w-6 pl-1 text-primary "
               aria-hidden="true"
             />
           </DialogTitle>

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

@@ -47,8 +47,8 @@ export default function ExportModal() {
           <DialogTitle className="flex items-center">
             <span className="pr-2">Export</span>
             <Download
-            strokeWidth={1.5}
+              strokeWidth={1.5}
-              className="h-6 w-6 text-foreground pl-1"
+              className="h-6 w-6 pl-1 text-foreground"
               aria-hidden="true"
             />
           </DialogTitle>

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

@@ -56,8 +56,8 @@ export default function GenericModal({
           <DialogTitle className="flex items-center">
             <span className="pr-2">{myModalTitle}</span>
             <FileText
-            strokeWidth={1.5}
+              strokeWidth={1.5}
-              className="h-6 w-6 text-primary pl-1 "
+              className="h-6 w-6 pl-1 text-primary "
               aria-hidden="true"
             />
           </DialogTitle>
@@ -80,7 +80,7 @@ export default function GenericModal({
         <div className="mt-2 flex h-full w-full">
           <Textarea
             ref={ref}
-            className=" h-[300px] w-full form-primary "
+            className=" form-primary h-[300px] w-full "
             value={myValue}
             onChange={(e) => {
               setMyValue(e.target.value);

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

@@ -160,7 +160,10 @@ export default function ImportModal() {
                     bgColor="bg-medium-emerald "
                     description={example.description ?? "Prebuilt Examples"}
                     icon={
-                      <DocumentDuplicateIcon strokeWidth={1.5} className="h-6 w-6 flex-shrink-0" />
+                      <DocumentDuplicateIcon
+                        strokeWidth={1.5}
+                        className="h-6 w-6 flex-shrink-0"
+                      />
                     }
                     onClick={() => {
                       addFlow(example, false);

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

@@ -92,7 +92,7 @@ export default function TextAreaModal({
                       <div className="w-full overflow-hidden rounded-lg bg-background px-4 py-5 shadow sm:p-6">
                         <textarea
                           ref={ref}
-                          className="form-input h-full w-full form-primary"
+                          className="form-primary form-input h-full w-full"
                           value={myValue}
                           onChange={(e) => {
                             setMyValue(e.target.value);

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

@@ -15,9 +15,7 @@ export default function DisclosureComponent({
             <Disclosure.Button className="components-disclosure-arrangement">
               <div className="flex gap-4">
                 <Icon strokeWidth={1.5} size={22} className="text-primary" />
-                <span className="components-disclosure-title">
+                <span className="components-disclosure-title">{title}</span>
-                  {title}
-                </span>
               </div>
               <div className="components-disclosure-div">
                 {buttons.map((x, index) => (

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

@@ -69,27 +69,29 @@ export default function ExtraSidebar() {
               uploadFlow();
             }}
           >
-            <FileUp strokeWidth={1.5} className="side-bar-button-size "></FileUp>
+            <FileUp
+              strokeWidth={1.5}
+              className="side-bar-button-size "
+            ></FileUp>
           </button>
         </ShadTooltip>
 
         <ShadTooltip content="Export" side="top">
           <button
-            className={classNames(
+            className={classNames("extra-side-bar-buttons")}
-              "extra-side-bar-buttons"
-            )}
             onClick={(event) => {
               openPopUp(<ExportModal />);
             }}
           >
-            <FileDown strokeWidth={1.5} className="side-bar-button-size"></FileDown>
+            <FileDown
+              strokeWidth={1.5}
+              className="side-bar-button-size"
+            ></FileDown>
           </button>
         </ShadTooltip>
         <ShadTooltip content="Code" side="top">
           <button
-            className={classNames(
+            className={classNames("extra-side-bar-buttons")}
-              "extra-side-bar-buttons"
-            )}
             onClick={(event) => {
               openPopUp(<ApiModal flow={flows.find((f) => f.id === tabId)} />);
             }}
@@ -110,7 +112,8 @@ export default function ExtraSidebar() {
             <Save
               strokeWidth={1.5}
               className={
-                "side-bar-button-size" + (isPending ? " " : " extra-side-bar-save-disable")
+                "side-bar-button-size" +
+                (isPending ? " " : " extra-side-bar-save-disable")
               }
             ></Save>
           </button>