changing code, export, python modal to shadcn ui

src/frontend/package-lock.json

@@ -13,6 +13,7 @@
                 "@headlessui/react": "^1.7.10",
                 "@heroicons/react": "^2.0.15",
                 "@mui/material": "^5.11.9",
+                "@radix-ui/react-checkbox": "^1.0.4",
                 "@radix-ui/react-dialog": "^1.0.4",
                 "@radix-ui/react-label": "^2.0.2",
                 "@radix-ui/react-slot": "^1.0.2",
@@ -1295,6 +1296,36 @@
                 "@babel/runtime": "^7.13.10"
             }
         },
+        "node_modules/@radix-ui/react-checkbox": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.0.4.tgz",
+            "integrity": "sha512-CBuGQa52aAYnADZVt/KBQzXrwx6TqnlwtcIPGtVt5JkkzQwMOLJjPukimhfKEr4GQNd43C+djUh5Ikopj8pSLg==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/primitive": "1.0.1",
+                "@radix-ui/react-compose-refs": "1.0.1",
+                "@radix-ui/react-context": "1.0.1",
+                "@radix-ui/react-presence": "1.0.1",
+                "@radix-ui/react-primitive": "1.0.3",
+                "@radix-ui/react-use-controllable-state": "1.0.1",
+                "@radix-ui/react-use-previous": "1.0.1",
+                "@radix-ui/react-use-size": "1.0.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0",
+                "react-dom": "^16.8 || ^17.0 || ^18.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/@radix-ui/react-compose-refs": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",

src/frontend/package.json

@@ -8,6 +8,7 @@
         "@headlessui/react": "^1.7.10",
         "@heroicons/react": "^2.0.15",
         "@mui/material": "^5.11.9",
+        "@radix-ui/react-checkbox": "^1.0.4",
         "@radix-ui/react-dialog": "^1.0.4",
         "@radix-ui/react-label": "^2.0.2",
         "@radix-ui/react-slot": "^1.0.2",

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

@@ -39,7 +39,7 @@ export default function CodeAreaComponent({
             );
           }}
           className={
-            editNode ? "placeholder:text-center text-gray-500 border-0 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 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200" :
+            editNode ? "h-7 truncate placeholder:text-center text-gray-500 border-0 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 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-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 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
             (disabled ? " bg-gray-200" : "")
           }

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

@@ -13,8 +13,6 @@ export default function IntComponent({
   const [myValue, setMyValue] = useState(value ?? "");
   const { setDisableCopyPaste } = useContext(TabsContext);
   
-  console.log(editNode);
-  
   useEffect(() => {
     if (disabled) {
       setMyValue("");

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

@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+import { cn } from "../../utils"
+
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }

src/frontend/src/components/ui/input.tsx

@@ -0,0 +1,25 @@
+import * as React from "react"
+import { cn } from "../../utils"
+
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }

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

@@ -1,4 +1,3 @@
-import { Dialog, Transition } from "@headlessui/react";
 import { IconCheck, IconClipboard, IconDownload } from "@tabler/icons-react";
 import {
   XMarkIcon,
@@ -15,13 +14,22 @@ import "ace-builds/src-noconflict/ext-language_tools";
 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,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../../components/ui/dialog";
+import { Button } from "../../components/ui/button";
 
 export default function ApiModal({ flowName }) {
   const [open, setOpen] = useState(true);
   const { dark } = useContext(darkContext);
   const { closePopUp } = useContext(PopUpContext);
   const [activeTab, setActiveTab] = useState(0);
-  const ref = useRef();
   const [isCopied, setIsCopied] = useState<Boolean>(false);
 
   const copyToClipboard = () => {
@@ -40,9 +48,7 @@ export default function ApiModal({ flowName }) {
   function setModalOpen(x: boolean) {
     setOpen(x);
     if (x === false) {
-      setTimeout(() => {
         closePopUp();
-      }, 300);
     }
   }
 
@@ -82,71 +88,34 @@ flow("Hey, have you heard of LangFlow?")`;
     },
   ];
   return (
-    <Transition.Root show={open} appear={true} as={Fragment}>
-      <Dialog
-        as="div"
-        className="relative z-10"
-        onClose={setModalOpen}
-        initialFocus={ref}
-      >
-        <Transition.Child
-          as={Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
-        </Transition.Child>
 
-        <div className="fixed inset-0 z-10 overflow-y-auto">
+
-          <div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+    <Dialog open={true} onOpenChange={setModalOpen}>
-            <Transition.Child
+    <DialogTrigger>
-              as={Fragment}
+    </DialogTrigger>
-              enter="ease-out duration-300"
+    <DialogContent className="lg:max-w-[800px] sm:max-w-[600px] h-[600px]">
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+      <DialogHeader>
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
+        <DialogTitle className="flex items-center">
-              leave="ease-in duration-200"
+          <span className="pr-2">
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+          Code
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+          </span>
-            >
-              <Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[700px]">
-                <div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
-                  <button
-                    type="button"
-                    className="rounded-md text-gray-400 hover:text-gray-500"
-                    onClick={() => {
-                      setModalOpen(false);
-                    }}
-                  >
-                    <span className="sr-only">Close</span>
-                    <XMarkIcon className="h-6 w-6" aria-hidden="true" />
-                  </button>
-                </div>
-                <div className="h-full w-full flex flex-col justify-center items-center">
-                  <div className="flex w-full pb-4 z-10 justify-center shadow-sm">
-                    <div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-gray-900 sm:mx-0 sm:h-10 sm:w-10">
             <CodeBracketSquareIcon
-                        className="h-6 w-6 text-blue-600"
+            className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
             aria-hidden="true"
             />
-                    </div>
+          
-                    <div className="mt-4 text-center sm:ml-4 sm:text-left">
+          </DialogTitle>
-                      <Dialog.Title
+        <DialogDescription>
-                        as="h3"
+        Export your flow to use it with this code.
-                        className="text-lg font-medium dark:text-white leading-10 text-gray-900"
+
-                      >
+        </DialogDescription>
-                        Code
+      </DialogHeader>
-                      </Dialog.Title>
+
-                    </div>
+
-                  </div>
-                  <div className="h-full w-full bg-gray-200 overflow-auto dark:bg-gray-900 p-4 gap-4 flex flex-row justify-center items-center">
                     <div className="flex flex-col h-full w-full ">
                       <div className="flex px-5 z-10">
                         {tabs.map((tab, index) => (
-                          <button
+                          <button key={index}
                             onClick={() => {
                               setActiveTab(index);
                             }}
@@ -162,11 +131,9 @@ flow("Hey, have you heard of LangFlow?")`;
                           </button>
                         ))}
                       </div>
-                      <div className="overflow-hidden px-4 py-5 sm:p-6 w-full h-full rounded-lg shadow bg-white dark:bg-gray-800">
+                      <div className="overflow-hidden px-4 py-2 sm:p-4 sm:pb-0 sm:pt-2 w-full h-full rounded-lg shadow bg-white dark:bg-gray-800">
-                        <div className="w-full flex items-center justify-between mb-2">
+                        <div className="items-center mb-2">
-                          <span className="text-sm text-gray-500 dark:text-gray-300">
+                          <div className="float-right">
-                            Export your flow to use it with this code.
-                          </span>
                           <button
                             className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-gray-500 dark:text-gray-300"
                             onClick={copyToClipboard}
@@ -179,8 +146,10 @@ flow("Hey, have you heard of LangFlow?")`;
                             {isCopied ? "Copied!" : "Copy code"}
                           </button>
                             </div>
+
+                        </div>
                         <SyntaxHighlighter
-                          className="h-[370px]"
+                          className="h-[370px] w-full"
                           language={tabs[activeTab].mode}
                           style={oneDark}
                           customStyle={{ margin: 0 }}
@@ -189,13 +158,8 @@ flow("Hey, have you heard of LangFlow?")`;
                         </SyntaxHighlighter>
                       </div>
                     </div>
-                  </div>
+    </DialogContent>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
   </Dialog>
-    </Transition.Root>
+
   );
 }

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

@@ -1,4 +1,3 @@
-import { Dialog, Transition } from "@headlessui/react";
 import { XMarkIcon, CommandLineIcon } from "@heroicons/react/24/outline";
 import { Fragment, useContext, useRef, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
@@ -12,6 +11,17 @@ import { darkContext } from "../../contexts/darkContext";
 import { checkCode } from "../../controllers/API";
 import { alertContext } from "../../contexts/alertContext";
 import { TabsContext } from "../../contexts/tabsContext";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../../components/ui/dialog";
+import { Button } from "../../components/ui/button";
+
 export default function CodeAreaModal({
   value,
   setValue,
@@ -34,69 +44,30 @@ export default function CodeAreaModal({
     }
   }
   return (
-    <Transition.Root show={open} appear={true} as={Fragment}>
-      <Dialog
-        as="div"
-        className="relative z-10"
-        onClose={setModalOpen}
-        initialFocus={ref}
-      >
-        <Transition.Child
-          as={Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
-        </Transition.Child>
 
-        <div className="fixed inset-0 z-10 overflow-y-auto">
+    <Dialog open={true} onOpenChange={setModalOpen}>
-          <div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+    <DialogTrigger>
-            <Transition.Child
+    </DialogTrigger>
-              as={Fragment}
+    <DialogContent className="lg:max-w-[700px] h-[500px]">
-              enter="ease-out duration-300"
+      <DialogHeader>
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+        <DialogTitle className="flex items-center">
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
+          <span className="pr-2">
-              leave="ease-in duration-200"
+          Edit Code
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+          </span>
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[700px]">
-                <div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
-                  <button
-                    type="button"
-                    className="rounded-md text-gray-400 hover:text-gray-500"
-                    onClick={() => {
-                      setModalOpen(false);
-                    }}
-                  >
-                    <span className="sr-only">Close</span>
-                    <XMarkIcon className="h-6 w-6" aria-hidden="true" />
-                  </button>
-                </div>
-                <div className="h-full w-full flex flex-col justify-center items-center">
-                  <div className="flex w-full pb-4 z-10 justify-center shadow-sm">
-                    <div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-gray-900 sm:mx-0 sm:h-10 sm:w-10">
             <CommandLineIcon
-                        className="h-6 w-6 text-blue-600"
+            className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
             aria-hidden="true"
             />
-                    </div>
+          
-                    <div className="mt-4 text-center sm:ml-4 sm:text-left">
+          </DialogTitle>
-                      <Dialog.Title
+        <DialogDescription>
-                        as="h3"
+          Make configurations changes to your nodes. Click save when you're done.
-                        className="text-lg font-medium dark:text-white leading-10 text-gray-900"
+
-                      >
+        </DialogDescription>
-                        Edit Code
+      </DialogHeader>
-                      </Dialog.Title>
+
-                    </div>
+
-                  </div>
+                    <div className="flex h-full w-full mt-2">
-                  <div className="h-full w-full bg-gray-200 overflow-auto dark:bg-gray-900 p-4 gap-4 flex flex-row justify-center items-center">
-                    <div className="flex h-full w-full">
-                      <div className="overflow-hidden px-4 py-5 sm:p-6 w-full h-full rounded-lg bg-white dark:bg-gray-800 shadow">
                     <AceEditor
                           value={code}
                           mode="python"
@@ -110,15 +81,16 @@ export default function CodeAreaModal({
                           onChange={(value) => {
                             setCode(value);
                           }}
-                          className="h-full w-full rounded-lg"
+                          className="w-full rounded-lg h-[300px] custom-scroll"
                         />
+
                     </div>
-                    </div>
+
-                  </div>
+
-                  <div className="bg-gray-200 dark:bg-gray-900 w-full pb-3 flex flex-row-reverse px-4">
+   
-                    <button
+      <DialogFooter>
-                      type="button"
+      <Button
-                      className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm"
+      className="mt-3" 
       onClick={() => {
         checkCode(code)
           .then((apiReturn) => {
@@ -161,16 +133,11 @@ export default function CodeAreaModal({
             })
           );
       }}
-                    >
+
-                      Check & Save
+      type="submit">Check & Save</Button>
-                    </button>
+      </DialogFooter>
-                  </div>
+    </DialogContent>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
   </Dialog>
-    </Transition.Root>
+
   );
 }

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

@@ -1,4 +1,3 @@
-import { Dialog, Transition } from "@headlessui/react";
 import {
   XMarkIcon,
   ArrowDownTrayIcon,
@@ -10,6 +9,20 @@ import { alertContext } from "../../contexts/alertContext";
 import { PopUpContext } from "../../contexts/popUpContext";
 import { TabsContext } from "../../contexts/tabsContext";
 import { removeApiKeys } from "../../utils";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../../components/ui/dialog";
+import { Button } from "../../components/ui/button";
+import { Label } from "@radix-ui/react-label";
+import { Checkbox } from "../../components/ui/checkbox";
+import { Textarea } from "../../components/ui/textarea";
+import { Input } from "../../components/ui/input";
 
 export default function ExportModal() {
   const [open, setOpen] = useState(true);
@@ -28,75 +41,34 @@ export default function ExportModal() {
   const [checked, setChecked] = useState(true);
   const [name, setName] = useState(flows[tabIndex].name);
   return (
-    <Transition.Root show={open} appear={true} as={Fragment}>
-      <Dialog
-        as="div"
-        className="relative z-10"
-        onClose={setModalOpen}
-        initialFocus={ref}
-      >
-        <Transition.Child
-          as={Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
-        </Transition.Child>
 
-        <div className="fixed inset-0 z-10 overflow-y-auto">
+    <Dialog open={true} onOpenChange={setModalOpen} >
-          <div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+    <DialogTrigger asChild>
-            <Transition.Child
+
-              as={Fragment}
+    </DialogTrigger>
-              enter="ease-out duration-300"
+    <DialogContent className="lg:max-w-[600px] h-[450px]">
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+      <DialogHeader>
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
+        <DialogTitle className="flex items-center">
-              leave="ease-in duration-200"
+          <span className="pr-2">
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+          Export
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+          </span>
-            >
-              <Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[700px]">
-                <div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
-                  <button
-                    type="button"
-                    className="rounded-md text-gray-400 hover:text-gray-500"
-                    onClick={() => {
-                      setModalOpen(false);
-                    }}
-                  >
-                    <span className="sr-only">Close</span>
-                    <XMarkIcon className="h-6 w-6" aria-hidden="true" />
-                  </button>
-                </div>
-                <div className="h-full w-full flex flex-col justify-center items-center">
-                  <div className="flex w-full pb-4 z-10 justify-center shadow-sm">
-                    <div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-gray-900 sm:mx-0 sm:h-10 sm:w-10">
             <ArrowDownTrayIcon
-                        className="h-6 w-6 text-blue-600"
+            className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
             aria-hidden="true"
             />
-                    </div>
+          
-                    <div className="mt-4 text-center sm:ml-4 sm:text-left">
+          </DialogTitle>
-                      <Dialog.Title
+        <DialogDescription>
-                        as="h3"
+          Make configurations changes to your nodes. Click save when you're done.
-                        className="text-lg font-medium dark:text-white leading-10 text-gray-900"
+
-                      >
+        </DialogDescription>
-                        Export
+      </DialogHeader>
-                      </Dialog.Title>
+
-                    </div>
+      <Label>
-                  </div>
+          <span className="font-medium">Name</span>
-                  <div className="pt-16 flex flex-col items-start justify-start h-full w-full bg-gray-200 dark:bg-gray-900 p-4 gap-16">
+
-                    <div className="w-full">
+      <Input 
-                      <label
+      className="mt-2"
-                        htmlFor="name"
-                        className="block mb-2 font-medium text-gray-700 dark:text-white"
-                      >
-                        Name
-                      </label>
-                      <input
       onChange={(event) => {
         if (event.target.value != "") {
           let newFlow = flows[tabIndex];
@@ -112,21 +84,12 @@ export default function ExportModal() {
       value={name ?? null}
       placeholder="File name"
       id="name"
-                        className="focus:border focus:border-blue block w-full px-3 py-2 border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-600 dark:focus:border-blue-500 dark:focus:ring-blue-500 text-gray-900 dark:text-gray-100"
       />
-                    </div>
+</Label>
-                    <div className="w-full">
+<Label>
-                      <label
+  <span className="font-medium">Description (optional)</span>
-                        htmlFor="description"
+      <Textarea 
-                        className="block mb-2 font-medium text-gray-700 dark:text-white"
+      
-                      >
-                        Description{" "}
-                        <span className="text-gray-400 text-sm">
-                          {" "}
-                          (optional)
-                        </span>
-                      </label>
-                      <textarea
                         name="description"
                         id="description"
                         onChange={(event) => {
@@ -136,45 +99,40 @@ export default function ExportModal() {
                         }}
                         value={flows[tabIndex].description ?? null}
                         placeholder="Flow description"
-                        rows={3}
+                        className="max-h-[100px] mt-2"
-                        className=" focus:border focus:border-blue block w-full px-3 py-2 border-gray-300 text-gray-900 dark:text-gray-100 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-600 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+                        rows={3} />
-                      ></textarea>
-                    </div>
 
-                    <div>
+</Label>
-                      <label htmlFor="checkbox" className="flex items-center">
+<div className="flex items-center space-x-2">
-                        <input
+      <Checkbox id="terms"
-                          onChange={(event) => {
+                onCheckedChange={(event: boolean) => {
-                            setChecked(event.target.checked);
+                  setChecked(event);
                 }}
-                          checked={checked}
+               
-                          id="checkbox"
-                          type="checkbox"
-                          className="h-4 w-4 text-blue-600 border-gray-300 rounded dark:bg-gray-800 dark:border-gray-600 dark:focus:border-blue-500 dark:focus:ring-blue-500"
       />
-                        <span className="ml-2 font-medium text-gray-700 dark:text-white">
+      <label
+        htmlFor="terms"
+        className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+      >
         Save with my API keys
-                        </span>
       </label>
     </div>
-                    <div className="w-full flex justify-end">
+
-                      <button
+      <DialogFooter>
+      <Button
                         onClick={() => {
                           if (checked) downloadFlow(flows[tabIndex]);
                           else downloadFlow(removeApiKeys(flows[tabIndex]));
                         }}
-                        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+
-                      >
+      type="submit">Download Flow</Button>
-                        Download Flow
+      </DialogFooter>
-                      </button>
+    </DialogContent>
-                    </div>
-                  </div>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
   </Dialog>
-    </Transition.Root>
+
+
+
+
+
   );
 }