From 87061316b31a6544b5335f17425d2b3df67a4c08 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Wed, 5 Jul 2023 16:36:28 -0300
Subject: [PATCH] formatted code

---
 .../components/parameterComponent/index.tsx   |   7 +-
 .../ExtraSidebarComponent/index.tsx           |   6 +-
 .../components/ShadTooltipComponent/index.tsx |  11 +-
 .../src/components/cardComponent/index.tsx    |  46 ++--
 .../chatComponent/buildTrigger/index.tsx      |  13 +-
 .../components/codeAreaComponent/index.tsx    |  10 +-
 .../components/dropdownComponent/index.tsx    |   4 +-
 .../src/components/headerComponent/index.tsx  |   4 +-
 .../components/inputFileComponent/index.tsx   |   5 +-
 .../components/textAreaComponent/index.tsx    |  16 +-
 src/frontend/src/components/ui/badge.tsx      |  10 +-
 src/frontend/src/components/ui/dialog.tsx     |   2 +-
 src/frontend/src/components/ui/switch.tsx     |   2 +-
 src/frontend/src/contexts/tabsContext.tsx     |   6 +-
 src/frontend/src/modals/ApiModal/index.tsx    |  47 ++--
 .../src/modals/codeAreaModal/index.tsx        |   4 +-
 src/frontend/src/modals/exportModal/index.tsx |   4 +-
 .../src/modals/formModal/chatInput/index.tsx  |  15 +-
 .../modals/formModal/chatMessage/index.tsx    | 236 +++++++++---------
 src/frontend/src/modals/importModal/index.tsx |   5 +-
 .../src/modals/textAreaModal/index.tsx        |   2 +-
 .../extraSidebarComponent/index.tsx           |   2 +-
 src/frontend/src/types/tabs/index.ts          |   6 +-
 src/frontend/src/utils.ts                     | 117 ++++-----
 24 files changed, 313 insertions(+), 267 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index 7adfeb2d1..56c65354d 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -101,7 +101,7 @@ export default function ParameterComponent({
 
     refHtml.current = groupedObj.map((item, i) => {
       const Icon: any = nodeIconsLucide[item.family];
-      
+
       return (
         <span
           key={getRandomKeyByssmm() + item.family + i}
@@ -116,8 +116,7 @@ export default function ParameterComponent({
             }}
           >
             <Icon
-            className="h-5 w-5"
-
+              className="h-5 w-5"
               strokeWidth={1.5}
               style={{
                 color: nodeColors[item.family] ?? nodeColors.unknown,
@@ -128,7 +127,7 @@ export default function ParameterComponent({
             {nodeNames[item.family] ?? ""}{" "}
             <span className="text-xs">
               {" "}
-              {item.type == "" ? '' : ' - '}
+              {item.type == "" ? "" : " - "}
               {item.type.split(", ").length > 2
                 ? item.type.split(", ").map((el, i) => (
                     <React.Fragment key={el + i}>
diff --git a/src/frontend/src/components/ExtraSidebarComponent/index.tsx b/src/frontend/src/components/ExtraSidebarComponent/index.tsx
index 7efef4ec0..5273b7147 100644
--- a/src/frontend/src/components/ExtraSidebarComponent/index.tsx
+++ b/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",
-                                  "ml-3 h-5 w-5 flex-shrink-0 transition-rotate duration-150 ease-in-out group-hover:text-accent-foreground"
+                                  open ? "rotate-90 text-ring" : "text-ring",
+                                  "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"
diff --git a/src/frontend/src/components/ShadTooltipComponent/index.tsx b/src/frontend/src/components/ShadTooltipComponent/index.tsx
index 61b0e7961..362be6842 100644
--- a/src/frontend/src/components/ShadTooltipComponent/index.tsx
+++ b/src/frontend/src/components/ShadTooltipComponent/index.tsx
@@ -11,16 +11,19 @@ const ShadTooltip = ({
   side,
   content,
   children,
-  style
+  style,
 }: ShadTooltipProps) => {
   return (
     <TooltipProvider>
       <Tooltip delayDuration={delayDuration}>
         <TooltipTrigger asChild>{children}</TooltipTrigger>
 
-        <TooltipContent 
-        className={style}
-        side={side} avoidCollisions={false} sticky="always">
+        <TooltipContent
+          className={style}
+          side={side}
+          avoidCollisions={false}
+          sticky="always"
+        >
           {content}
         </TooltipContent>
       </Tooltip>
diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
index 4fd786a79..470d0a801 100644
--- a/src/frontend/src/components/cardComponent/index.tsx
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -11,7 +11,15 @@ import {
   Card,
   CardHeader,
 } from "../ui/card";
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "../ui/dialog";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../ui/dialog";
 import { Button } from "@mui/material";
 
 export const CardComponent = ({
@@ -42,24 +50,26 @@ export const CardComponent = ({
           </span>
           {onDelete && (
             <Dialog>
-                <DialogTrigger asChild>
+              <DialogTrigger asChild>
                 <button className="flex self-start">
-              <Trash2 className="w-4 h-4 text-primary opacity-0 group-hover:opacity-100 transition-all" />
-            </button>
-                </DialogTrigger>
-            <DialogContent>
-              <DialogHeader>
-                <DialogTitle>Are you sure absolutely sure?</DialogTitle>
-                <DialogDescription>
-                  This action cannot be undone. Are you sure you want to permanently
-                  delete this file from our servers?
-                </DialogDescription>
-              </DialogHeader>
-              <DialogFooter>
-                <Button type="submit" onClick={onDelete}>Confirm</Button>
-              </DialogFooter>
-            </DialogContent>
-          </Dialog>
+                  <Trash2 className="h-4 w-4 text-primary opacity-0 transition-all group-hover:opacity-100" />
+                </button>
+              </DialogTrigger>
+              <DialogContent>
+                <DialogHeader>
+                  <DialogTitle>Are you sure absolutely sure?</DialogTitle>
+                  <DialogDescription>
+                    This action cannot be undone. Are you sure you want to
+                    permanently delete this file from our servers?
+                  </DialogDescription>
+                </DialogHeader>
+                <DialogFooter>
+                  <Button type="submit" onClick={onDelete}>
+                    Confirm
+                  </Button>
+                </DialogFooter>
+              </DialogContent>
+            </Dialog>
           )}
         </CardTitle>
         <CardDescription className="pb-2 pt-2">
diff --git a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
index 0482262eb..7abb29224 100644
--- a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
+++ b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
@@ -76,6 +76,7 @@ export default function BuildTrigger({
     const eventSource = new EventSource(apiUrl);
 
     eventSource.onmessage = (event) => {
+      console.log(event);
       // If the event is parseable, return
       if (!event.data) {
         return;
@@ -96,10 +97,9 @@ export default function BuildTrigger({
             [flowId]: {
               ...old[flowId],
               formKeysData: parsedData,
-            
-            }
+            },
           };
-        })
+        });
       } else {
         // Otherwise, process the data
         const isValid = processStreamResult(parsedData);
@@ -168,7 +168,7 @@ export default function BuildTrigger({
       leaveFrom="translate-y-0"
       leaveTo="translate-y-96"
     >
-      <div className="fixed right-4 bottom-20">
+      <div className="fixed bottom-20 right-4">
         <div
           className={`${eventClick} align-center shadow-round-btn-shadow hover:shadow-round-btn-shadow flex h-12 w-12 cursor-pointer justify-center rounded-full bg-border px-3 py-1 shadow-md`}
           onClick={() => {
@@ -189,7 +189,10 @@ export default function BuildTrigger({
               ) : isBuilding ? (
                 <Loading strokeWidth={1.5} className="stroke-build-trigger" />
               ) : (
-                <Zap strokeWidth={1.5} className="sh-6 w-6 fill-build-trigger stroke-1 stroke-build-trigger" />
+                <Zap
+                  strokeWidth={1.5}
+                  className="sh-6 w-6 fill-build-trigger stroke-build-trigger stroke-1"
+                />
               )}
             </div>
           </button>
diff --git a/src/frontend/src/components/codeAreaComponent/index.tsx b/src/frontend/src/components/codeAreaComponent/index.tsx
index 75f5497a2..00578a25a 100644
--- a/src/frontend/src/components/codeAreaComponent/index.tsx
+++ b/src/frontend/src/components/codeAreaComponent/index.tsx
@@ -53,7 +53,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..."}
@@ -62,7 +63,7 @@ export default function CodeAreaComponent({
           onClick={() => {
             openPopUp(
               <CodeAreaModal
-              setNodeClass={setNodeClass}
+                setNodeClass={setNodeClass}
                 value={myValue}
                 nodeClass={nodeClass}
                 setValue={(t: string) => {
@@ -74,7 +75,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>
diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx
index 67447a21f..b275f83f7 100644
--- a/src/frontend/src/components/dropdownComponent/index.tsx
+++ b/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"
-                    : "py-2 pl-3 pr-10 text-left input-primary"
+                    ? "border-1 input-edit-node relative pr-8"
+                    : "input-primary py-2 pl-3 pr-10 text-left"
                 }
               >
                 <span className="block w-full truncate bg-background">
diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx
index 342054b10..f60f65f61 100644
--- a/src/frontend/src/components/headerComponent/index.tsx
+++ b/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 } = (
diff --git a/src/frontend/src/components/inputFileComponent/index.tsx b/src/frontend/src/components/inputFileComponent/index.tsx
index edfc8e39d..a0039abf1 100644
--- a/src/frontend/src/components/inputFileComponent/index.tsx
+++ b/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>
diff --git a/src/frontend/src/components/textAreaComponent/index.tsx b/src/frontend/src/components/textAreaComponent/index.tsx
index 8773c47b2..b175da5de 100644
--- a/src/frontend/src/components/textAreaComponent/index.tsx
+++ b/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
-            ? "w-full items-center"
-            : "w-full flex items-center"
+          editNode ? "w-full items-center" : "flex w-full items-center"
         }
       >
         <span
@@ -52,8 +50,9 @@ export default function TextAreaComponent({
           }}
           className={
             editNode
-            ? "input-edit-node input-dialog "
-            : "input-primary input-dialog " + (disabled ? "input-disable" : "")
+              ? "input-edit-node input-dialog "
+              : "input-dialog input-primary " +
+                (disabled ? "input-disable" : "")
           }
         >
           {myValue !== "" ? myValue : "Type something..."}
@@ -74,7 +73,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>
diff --git a/src/frontend/src/components/ui/badge.tsx b/src/frontend/src/components/ui/badge.tsx
index 1516bf273..36c44ac4d 100644
--- a/src/frontend/src/components/ui/badge.tsx
+++ b/src/frontend/src/components/ui/badge.tsx
@@ -9,8 +9,7 @@ const badgeVariants = cva(
       variant: {
         default:
           "bg-primary hover:bg-primary/80 border-transparent text-primary-foreground",
-        gray:
-          "bg-border hover:bg-border/80 text-secondary-foreground",
+        gray: "bg-border hover:bg-border/80 text-secondary-foreground",
         secondary:
           "bg-secondary hover:bg-secondary/80 border-transparent text-secondary-foreground",
         destructive:
@@ -21,7 +20,7 @@ const badgeVariants = cva(
         sm: "h-4 text-xs",
         md: "h-5 text-sm",
         lg: "h-6 text-base",
-      }
+      },
     },
     defaultVariants: {
       variant: "default",
@@ -35,7 +34,10 @@ export interface BadgeProps
 
 function Badge({ className, variant, size, ...props }: BadgeProps) {
   return (
-    <div className={cn(badgeVariants({ variant, size }), className)} {...props} />
+    <div
+      className={cn(badgeVariants({ variant, size }), className)}
+      {...props}
+    />
   );
 }
 
diff --git a/src/frontend/src/components/ui/dialog.tsx b/src/frontend/src/components/ui/dialog.tsx
index f17576064..a02379087 100644
--- a/src/frontend/src/components/ui/dialog.tsx
+++ b/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}
diff --git a/src/frontend/src/components/ui/switch.tsx b/src/frontend/src/components/ui/switch.tsx
index 5e5d3c2ff..8f473a0eb 100644
--- a/src/frontend/src/components/ui/switch.tsx
+++ b/src/frontend/src/components/ui/switch.tsx
@@ -19,7 +19,7 @@ const Switch = React.forwardRef<
     <SwitchPrimitives.Thumb
       aria-disabled={props.disabled}
       className={cn(
-        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 aria-disabled:bg-muted/70 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform aria-disabled:bg-muted/70 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
       )}
     />
   </SwitchPrimitives.Root>
diff --git a/src/frontend/src/contexts/tabsContext.tsx b/src/frontend/src/contexts/tabsContext.tsx
index bd1269a9f..2de15ca68 100644
--- a/src/frontend/src/contexts/tabsContext.tsx
+++ b/src/frontend/src/contexts/tabsContext.tsx
@@ -285,7 +285,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();
diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx
index d069763ff..b37f6fe40 100644
--- a/src/frontend/src/modals/ApiModal/index.tsx
+++ b/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) => {
-        Object.keys(el).forEach((key) => {
-          if (Object.keys(el[key]).length > 0) {
-            accordionsToOpen.push(key);
-            setOpenAccordion(accordionsToOpen);
-          }
-        });
+    tweak.current.forEach((el) => {
+      Object.keys(el).forEach((key) => {
+        if (Object.keys(el[key]).length > 0) {
+          accordionsToOpen.push(key);
+          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">
-                                              <div className="w-[250px] m-auto">
+                                            <TableCell className="p-0 text-center text-xs text-gray-900 dark:text-gray-300">
+                                              <div className="m-auto w-[250px]">
                                                 {t.data.node.template[n]
                                                   .type === "str" &&
                                                 !t.data.node.template[n]
diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx
index 96ea8d88b..df4e015a6 100644
--- a/src/frontend/src/modals/codeAreaModal/index.tsx
+++ b/src/frontend/src/modals/codeAreaModal/index.tsx
@@ -107,8 +107,8 @@ export default function CodeAreaModal({
           <DialogTitle className="flex items-center">
             <span className="pr-2">Edit Code</span>
             <TerminalSquare
-            strokeWidth={1.5}
-              className="h-6 w-6 text-primary pl-1 "
+              strokeWidth={1.5}
+              className="h-6 w-6 pl-1 text-primary "
               aria-hidden="true"
             />
           </DialogTitle>
diff --git a/src/frontend/src/modals/exportModal/index.tsx b/src/frontend/src/modals/exportModal/index.tsx
index e65eb537e..bef5b9244 100644
--- a/src/frontend/src/modals/exportModal/index.tsx
+++ b/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}
-              className="h-6 w-6 text-foreground pl-1"
+              strokeWidth={1.5}
+              className="h-6 w-6 pl-1 text-foreground"
               aria-hidden="true"
             />
           </DialogTitle>
diff --git a/src/frontend/src/modals/formModal/chatInput/index.tsx b/src/frontend/src/modals/formModal/chatInput/index.tsx
index 0cc390e2a..437af1914 100644
--- a/src/frontend/src/modals/formModal/chatInput/index.tsx
+++ b/src/frontend/src/modals/formModal/chatInput/index.tsx
@@ -52,20 +52,27 @@ export default function ChatInput({
           lockChat
             ? " bg-input text-black dark:bg-gray-700 dark:text-gray-300"
             : "  bg-white-200 text-black dark:bg-gray-900 dark:text-gray-300",
-          "p-4 form-input block w-full custom-scroll rounded-md border-gray-300 dark:border-gray-600 pr-16 sm:text-sm"
+          "form-input block w-full rounded-md border-gray-300 p-4 pr-16 custom-scroll dark:border-gray-600 sm:text-sm"
         )}
         placeholder={"Send a message..."}
       />
       <div className="absolute bottom-2 right-4">
-        <button className={classNames("p-2 px-1 transition-all duration-300 rounded-md",chatValue == "" ? "text-primary" : " bg-indigo-600 text-background")} disabled={lockChat} onClick={() => sendMessage()}>
+        <button
+          className={classNames(
+            "rounded-md p-2 px-1 transition-all duration-300",
+            chatValue == "" ? "text-primary" : " bg-indigo-600 text-background"
+          )}
+          disabled={lockChat}
+          onClick={() => sendMessage()}
+        >
           {lockChat ? (
             <Lock
-              className="h-5 w-5 ml-1 mr-1 animate-pulse"
+              className="ml-1 mr-1 h-5 w-5 animate-pulse"
               aria-hidden="true"
             />
           ) : (
             <LucideSend
-              className="h-5 w-5 mr-2 rotate-[44deg] "
+              className="mr-2 h-5 w-5 rotate-[44deg] "
               aria-hidden="true"
             />
           )}
diff --git a/src/frontend/src/modals/formModal/chatMessage/index.tsx b/src/frontend/src/modals/formModal/chatMessage/index.tsx
index 765f35fac..ede2ce242 100644
--- a/src/frontend/src/modals/formModal/chatMessage/index.tsx
+++ b/src/frontend/src/modals/formModal/chatMessage/index.tsx
@@ -29,138 +29,136 @@ export default function ChatMessage({
   }, [chat.message]);
   const [hidden, setHidden] = useState(true);
   return (
+    <div
+      className={classNames(
+        "flex w-full px-2 py-2 pl-4 pr-9",
+        chat.isSend ? " bg-border" : " "
+      )}
+    >
       <div
         className={classNames(
-          "w-full py-2 px-2 pl-4 pr-9 flex",
-          chat.isSend
-            ? " bg-border"
-            : " "
+          "mx-3 my-3 flex h-8 w-8 items-center justify-center overflow-hidden rounded-full"
         )}
       >
-        <div
-          className={classNames(
-            "rounded-full overflow-hidden w-8 h-8 flex items-center my-3 mx-3 justify-center"
-          )}
-        >
-          {!chat.isSend && (
-            <div className="relative w-8 h-8">
-              <img
-                className={
-                  "absolute transition-opacity duration-500 scale-150 " +
-                  (lockChat ? "opacity-100" : "opacity-0")
-                }
-                src={lastMessage ? AiIcon : AiIconStill}
-              />
-              <img
-                className={
-                  "absolute transition-opacity duration-500 scale-150 " +
-                  (lockChat ? "opacity-0" : "opacity-100")
-                }
-                src={AiIconStill}
-              />
-            </div>
-          )}
-          {chat.isSend && (
-            <User2 className="w-6 h-6 text-gray-800 dark:text-gray-200" />
-          )}
-        </div>
-        {!chat.isSend ? (
-          <div className="w-full text-start flex items-center">
-            <div className="w-full relative text-start inline-block text-primary text-sm font-normal">
-              {hidden && chat.thought && chat.thought !== "" && (
-                <div
-                  onClick={() => setHidden((prev) => !prev)}
-                  className="absolute -top-1 -left-2 cursor-pointer"
-                >
-                  <MessageSquare className="w-5 h-5 animate-bounce dark:text-white" />
-                </div>
-              )}
-              {chat.thought && chat.thought !== "" && !hidden && (
-                <div
-                  onClick={() => setHidden((prev) => !prev)}
-                  className=" text-start inline-block rounded-md text-primary h-full border border-gray-300 dark:border-gray-500
-								bg-muted dark:bg-gray-800 w-[95%] pb-3 pt-3 px-2 ml-3 cursor-pointer scrollbar-hide overflow-scroll"
-                  dangerouslySetInnerHTML={{
-                    __html: convert.toHtml(chat.thought),
-                  }}
-                ></div>
-              )}
-              {chat.thought && chat.thought !== "" && !hidden && <br></br>}
-              <div className="w-full pb-3 pt-3">
-                <div className="dark:text-white w-full">
-                  <div className="w-full">
-                    <ReactMarkdown
-                      remarkPlugins={[remarkGfm, remarkMath]}
-                      rehypePlugins={[rehypeMathjax]}
-                      className="markdown prose dark:prose-invert text-primary max-w-full"
-                      components={{
-                        code({ node, inline, className, children, ...props }) {
-                          if (children.length) {
-                            if (children[0] == "▍") {
-                              return (
-                                <span className="animate-pulse cursor-default mt-1">
-                                  ▍
-                                </span>
-                              );
-                            }
-
-                            children[0] = (children[0] as string).replace(
-                              "`▍`",
-                              "▍"
+        {!chat.isSend && (
+          <div className="relative h-8 w-8">
+            <img
+              className={
+                "absolute scale-150 transition-opacity duration-500 " +
+                (lockChat ? "opacity-100" : "opacity-0")
+              }
+              src={lastMessage ? AiIcon : AiIconStill}
+            />
+            <img
+              className={
+                "absolute scale-150 transition-opacity duration-500 " +
+                (lockChat ? "opacity-0" : "opacity-100")
+              }
+              src={AiIconStill}
+            />
+          </div>
+        )}
+        {chat.isSend && (
+          <User2 className="h-6 w-6 text-gray-800 dark:text-gray-200" />
+        )}
+      </div>
+      {!chat.isSend ? (
+        <div className="flex w-full items-center text-start">
+          <div className="relative inline-block w-full text-start text-sm font-normal text-primary">
+            {hidden && chat.thought && chat.thought !== "" && (
+              <div
+                onClick={() => setHidden((prev) => !prev)}
+                className="absolute -left-2 -top-1 cursor-pointer"
+              >
+                <MessageSquare className="h-5 w-5 animate-bounce dark:text-white" />
+              </div>
+            )}
+            {chat.thought && chat.thought !== "" && !hidden && (
+              <div
+                onClick={() => setHidden((prev) => !prev)}
+                className=" ml-3 inline-block h-full w-[95%] cursor-pointer overflow-scroll rounded-md border
+								border-gray-300 bg-muted px-2 pb-3 pt-3 text-start text-primary scrollbar-hide dark:border-gray-500 dark:bg-gray-800"
+                dangerouslySetInnerHTML={{
+                  __html: convert.toHtml(chat.thought),
+                }}
+              ></div>
+            )}
+            {chat.thought && chat.thought !== "" && !hidden && <br></br>}
+            <div className="w-full pb-3 pt-3">
+              <div className="w-full dark:text-white">
+                <div className="w-full">
+                  <ReactMarkdown
+                    remarkPlugins={[remarkGfm, remarkMath]}
+                    rehypePlugins={[rehypeMathjax]}
+                    className="markdown prose max-w-full text-primary dark:prose-invert"
+                    components={{
+                      code({ node, inline, className, children, ...props }) {
+                        if (children.length) {
+                          if (children[0] == "▍") {
+                            return (
+                              <span className="mt-1 animate-pulse cursor-default">
+                                ▍
+                              </span>
                             );
                           }
 
-                          const match = /language-(\w+)/.exec(className || "");
-
-                          return !inline ? (
-                            <CodeBlock
-                              key={Math.random()}
-                              language={(match && match[1]) || ""}
-                              value={String(children).replace(/\n$/, "")}
-                              {...props}
-                            />
-                          ) : (
-                            <code className={className} {...props}>
-                              {children}
-                            </code>
+                          children[0] = (children[0] as string).replace(
+                            "`▍`",
+                            "▍"
                           );
-                        },
-                      }}
-                    >
-                      {message}
-                    </ReactMarkdown>
-                  </div>
-                  {chat.files && (
-                    <div className="my-2 w-full">
-                      {chat.files.map((file, index) => {
-                        return (
-                          <div key={index} className="my-2 w-full">
-                            <FileCard
-                              fileName={"Generated File"}
-                              fileType={file.data_type}
-                              content={file.data}
-                            />
-                          </div>
+                        }
+
+                        const match = /language-(\w+)/.exec(className || "");
+
+                        return !inline ? (
+                          <CodeBlock
+                            key={Math.random()}
+                            language={(match && match[1]) || ""}
+                            value={String(children).replace(/\n$/, "")}
+                            {...props}
+                          />
+                        ) : (
+                          <code className={className} {...props}>
+                            {children}
+                          </code>
                         );
-                      })}
-                    </div>
-                  )}
+                      },
+                    }}
+                  >
+                    {message}
+                  </ReactMarkdown>
                 </div>
+                {chat.files && (
+                  <div className="my-2 w-full">
+                    {chat.files.map((file, index) => {
+                      return (
+                        <div key={index} className="my-2 w-full">
+                          <FileCard
+                            fileName={"Generated File"}
+                            fileType={file.data_type}
+                            content={file.data}
+                          />
+                        </div>
+                      );
+                    })}
+                  </div>
+                )}
               </div>
             </div>
           </div>
-        ) : (
-          <div className="w-full flex items-center">
-            <div className="text-start inline-block">
-              <span
-                className="text-primary"
-                dangerouslySetInnerHTML={{
-                  __html: message.replace(/\n/g, "<br>"),
-                }}
-              ></span>
-            </div>
+        </div>
+      ) : (
+        <div className="flex w-full items-center">
+          <div className="inline-block text-start">
+            <span
+              className="text-primary"
+              dangerouslySetInnerHTML={{
+                __html: message.replace(/\n/g, "<br>"),
+              }}
+            ></span>
           </div>
-        )}
-      </div>
+        </div>
+      )}
+    </div>
   );
 }
diff --git a/src/frontend/src/modals/importModal/index.tsx b/src/frontend/src/modals/importModal/index.tsx
index ffd51c8d0..eb52ee6ff 100644
--- a/src/frontend/src/modals/importModal/index.tsx
+++ b/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);
diff --git a/src/frontend/src/modals/textAreaModal/index.tsx b/src/frontend/src/modals/textAreaModal/index.tsx
index a41a39ba4..f1e47b738 100644
--- a/src/frontend/src/modals/textAreaModal/index.tsx
+++ b/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);
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index 8daaf956a..def7cf63f 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -135,7 +135,7 @@ export default function ExtraSidebar() {
         </div>
       </div>
 
-      <div className="w-full overflow-auto scrollbar-hide pb-10">
+      <div className="w-full overflow-auto pb-10 scrollbar-hide">
         {Object.keys(dataFilter)
           .sort()
           .map((d: keyof APIObjectType, i) =>
diff --git a/src/frontend/src/types/tabs/index.ts b/src/frontend/src/types/tabs/index.ts
index c85c3682a..89ba5ef15 100644
--- a/src/frontend/src/types/tabs/index.ts
+++ b/src/frontend/src/types/tabs/index.ts
@@ -39,6 +39,10 @@ export type TabsContextType = {
 export type TabsState = {
   [key: string]: {
     isPending: boolean;
-    formKeysData: {input_keys?: Object, memory_keys?: Array<string>, handle_keys?: Array<string>};
+    formKeysData: {
+      input_keys?: Object;
+      memory_keys?: Array<string>;
+      handle_keys?: Array<string>;
+    };
   };
 };
diff --git a/src/frontend/src/utils.ts b/src/frontend/src/utils.ts
index b40bfd0b0..c372b7ea2 100644
--- a/src/frontend/src/utils.ts
+++ b/src/frontend/src/utils.ts
@@ -792,36 +792,36 @@ export function groupByFamily(data, baseClasses, left, type) {
   let parentOutput: string;
   let arrOfParent: string[] = [];
   let arrOfType: { family: string; type: string; component: string }[] = [];
-  let arrOfLength: { length: number; type: string; }[] = [];
+  let arrOfLength: { length: number; type: string }[] = [];
   let lastType = "";
   Object.keys(data).map((d) => {
-      Object.keys(data[d]).map((n) => {
-          try {
-              if (
-                  data[d][n].base_classes.some((r) =>
-                      baseClasses.split("\n").includes(r)
-                  )
-              ) {
-                  arrOfParent.push(d);
-              }
-              if (n === type) {
-                  parentOutput = d;
-              }
-  
-              if (d !== lastType) {
-                  arrOfLength.push({
-                      length: Object.keys(data[d]).length,
-                      type: d
-                  });
-  
-                  lastType = d;
-              }
-          } catch (e) {
-              console.log(e);
-          }
-      });
+    Object.keys(data[d]).map((n) => {
+      try {
+        if (
+          data[d][n].base_classes.some((r) =>
+            baseClasses.split("\n").includes(r)
+          )
+        ) {
+          arrOfParent.push(d);
+        }
+        if (n === type) {
+          parentOutput = d;
+        }
+
+        if (d !== lastType) {
+          arrOfLength.push({
+            length: Object.keys(data[d]).length,
+            type: d,
+          });
+
+          lastType = d;
+        }
+      } catch (e) {
+        console.log(e);
+      }
+    });
   });
-  
+
   Object.keys(data).map((d) => {
     Object.keys(data[d]).map((n) => {
       try {
@@ -831,7 +831,7 @@ export function groupByFamily(data, baseClasses, left, type) {
               arrOfType.push({
                 family: d,
                 type: data,
-                component: n
+                component: n,
               });
             }
           });
@@ -842,61 +842,64 @@ export function groupByFamily(data, baseClasses, left, type) {
     });
   });
 
-  if(left == false){
+  if (left == false) {
     let groupedBy = arrOfType.filter((object, index, self) => {
       const foundIndex = self.findIndex(
         (o) => o.family === object.family && o.type === object.type
       );
       return foundIndex === index;
     });
-  
+
     return groupedBy.reduce((result, item) => {
-      const existingGroup = result.find((group) => group.family === item.family);
-  
+      const existingGroup = result.find(
+        (group) => group.family === item.family
+      );
+
       if (existingGroup) {
         existingGroup.type += `, ${item.type}`;
       } else {
-        result.push({ family: item.family, type: item.type, component: item.component });
+        result.push({
+          family: item.family,
+          type: item.type,
+          component: item.component,
+        });
       }
-  
+
       if (left == false) {
         let resFil = result.filter((group) => group.family === parentOutput);
         result = resFil;
       }
-  
+
       return result;
     }, []);
-  }
-
-  else{
+  } else {
     const groupedArray = [];
     const groupedData = {};
-    
+
     arrOfType.forEach((item) => {
-        const { family, type, component } = item;
-        const key = `${family}-${type}`;
-    
-        if (!groupedData[key]) {
-            groupedData[key] = { family, type, component: [component] };
-        } else {
-            groupedData[key].component.push(component);
-        }
+      const { family, type, component } = item;
+      const key = `${family}-${type}`;
+
+      if (!groupedData[key]) {
+        groupedData[key] = { family, type, component: [component] };
+      } else {
+        groupedData[key].component.push(component);
+      }
     });
-    
+
     for (const key in groupedData) {
-        groupedArray.push(groupedData[key]);
+      groupedArray.push(groupedData[key]);
     }
 
     groupedArray.forEach((object, index, self) => {
-      const findObj = arrOfLength.find(x => x.type == object.family);
-      if(object.component.length == findObj.length){
-        self[index]['type'] = "";
+      const findObj = arrOfLength.find((x) => x.type == object.family);
+      if (object.component.length == findObj.length) {
+        self[index]["type"] = "";
+      } else {
+        self[index]["type"] = object.component.join(", ");
       }
-      else{
-        self[index]['type'] = object.component.join(', ');
-      }
-    })
-    return groupedArray
+    });
+    return groupedArray;
   }
 }