From 14a0669c992adead98719eccfc300175768de7ab Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Mon, 17 Jul 2023 13:27:04 -0300
Subject: [PATCH] Normailzed code modals

---
 .../components/codeTabsComponent/index.tsx    | 524 +++++++++++++++++
 src/frontend/src/index.css                    |   2 +-
 src/frontend/src/modals/ApiModal/index.tsx    | 553 +-----------------
 .../modals/formModal/chatMessage/index.tsx    |  20 +-
 4 files changed, 565 insertions(+), 534 deletions(-)
 create mode 100644 src/frontend/src/components/codeTabsComponent/index.tsx

diff --git a/src/frontend/src/components/codeTabsComponent/index.tsx b/src/frontend/src/components/codeTabsComponent/index.tsx
new file mode 100644
index 000000000..744e0e171
--- /dev/null
+++ b/src/frontend/src/components/codeTabsComponent/index.tsx
@@ -0,0 +1,524 @@
+import { Check, Clipboard, Download } from "lucide-react";
+import { useState } from "react";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
+import AccordionComponent from "../../components/AccordionComponent";
+import ShadTooltip from "../../components/ShadTooltipComponent";
+import CodeAreaComponent from "../../components/codeAreaComponent";
+import Dropdown from "../../components/dropdownComponent";
+import FloatComponent from "../../components/floatComponent";
+import InputComponent from "../../components/inputComponent";
+import InputFileComponent from "../../components/inputFileComponent";
+import InputListComponent from "../../components/inputListComponent";
+import IntComponent from "../../components/intComponent";
+import PromptAreaComponent from "../../components/promptComponent";
+import TextAreaComponent from "../../components/textAreaComponent";
+import ToggleShadComponent from "../../components/toggleShadComponent";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../../components/ui/table";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "../../components/ui/tabs";
+import { FlowType } from "../../types/flow/index";
+import { classNames } from "../../utils";
+
+export default function CodeTabsComponent({
+  flow,
+  tabs,
+  activeTab,
+  setActiveTab,
+  tweaks: { tweak, tweaksList, buildContent, getValue, buildTweakObject },
+}: {
+  flow?: FlowType;
+  tabs: any;
+  activeTab: string;
+  setActiveTab: any;
+  tweaks?: any;
+}) {
+  const [isCopied, setIsCopied] = useState<Boolean>(false);
+  const [openAccordion, setOpenAccordion] = useState([]);
+
+  const copyToClipboard = () => {
+    if (!navigator.clipboard || !navigator.clipboard.writeText) {
+      return;
+    }
+
+    navigator.clipboard.writeText(tabs[activeTab].code).then(() => {
+      setIsCopied(true);
+
+      setTimeout(() => {
+        setIsCopied(false);
+      }, 2000);
+    });
+  };
+
+  const downloadAsFile = () => {
+    const fileExtension = tabs[activeTab].language || ".txt";
+    const suggestedFileName = `${"generated-code."}${fileExtension}`;
+    const fileName = window.prompt("Enter the file name.", suggestedFileName);
+
+    if (!fileName) {
+      // user pressed cancel on prompt
+      return;
+    }
+
+    const blob = new Blob([tabs[activeTab].code], { type: "text/plain" });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.download = fileName;
+    link.href = url;
+    link.style.display = "none";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  };
+
+  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);
+        }
+      });
+    });
+
+    if (accordionsToOpen.length == 0) {
+      setOpenAccordion([]);
+    }
+  }
+  return (
+    <Tabs
+      value={activeTab}
+      className="api-modal-tabs"
+      onValueChange={(value) => {
+        setActiveTab(value);
+        if (value === "3") {
+          openAccordions();
+        }
+      }}
+    >
+      <div className="api-modal-tablist-div">
+        <TabsList>
+          {tabs.map((tab, index) => (
+            <TabsTrigger key={index} value={index.toString()}>
+              {tab.name}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+        {Number(activeTab) < 3 && (
+          <div className="float-right mx-1 flex gap-2">
+            <button
+              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} />}
+              {isCopied ? "Copied!" : "Copy code"}
+            </button>
+            <button
+              className="flex items-center gap-1.5 rounded bg-none p-1 text-xs text-gray-500 dark:text-gray-300"
+              onClick={downloadAsFile}
+            >
+              <Download size={18} />
+            </button>
+          </div>
+        )}
+      </div>
+
+      {tabs.map((tab, index) => (
+        <TabsContent
+          value={index.toString()}
+          className="api-modal-tabs-content"
+          key={index} // Remember to add a unique key prop
+        >
+          {index < 3 ? (
+            <SyntaxHighlighter
+              className="mt-0 h-full w-full overflow-auto custom-scroll"
+              language={tab.mode}
+              style={oneDark}
+            >
+              {tab.code}
+            </SyntaxHighlighter>
+          ) : index === 3 ? (
+            <>
+              <div className="api-modal-according-display">
+                <div
+                  className={classNames(
+                    "h-[70vh] w-full rounded-lg bg-muted",
+                    1 == 1
+                      ? "overflow-scroll overflow-x-hidden custom-scroll"
+                      : "overflow-hidden"
+                  )}
+                >
+                  {flow["data"]["nodes"].map((t: any, index) => (
+                    <div className="px-3" key={index}>
+                      {tweaksList.current.includes(t["data"]["id"]) && (
+                        <AccordionComponent
+                          trigger={t["data"]["id"]}
+                          open={openAccordion}
+                        >
+                          <div className="api-modal-table-arrangement">
+                            <Table className="table-fixed bg-muted outline-1">
+                              <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="h-7 p-0 text-center">
+                                    VALUE
+                                  </TableHead>
+                                </TableRow>
+                              </TableHeader>
+                              <TableBody className="p-0">
+                                {Object.keys(t["data"]["node"]["template"])
+                                  .filter(
+                                    (n) =>
+                                      n.charAt(0) !== "_" &&
+                                      t.data.node.template[n].show &&
+                                      (t.data.node.template[n].type === "str" ||
+                                        t.data.node.template[n].type ===
+                                          "bool" ||
+                                        t.data.node.template[n].type ===
+                                          "float" ||
+                                        t.data.node.template[n].type ===
+                                          "code" ||
+                                        t.data.node.template[n].type ===
+                                          "prompt" ||
+                                        t.data.node.template[n].type ===
+                                          "file" ||
+                                        t.data.node.template[n].type === "int")
+                                  )
+                                  .map((n, i) => {
+                                    //console.log(t.data.node.template[n]);
+
+                                    return (
+                                      <TableRow
+                                        key={i}
+                                        className="h-10 dark:border-b-muted"
+                                      >
+                                        <TableCell className="p-0 text-center text-sm text-foreground">
+                                          {n}
+                                        </TableCell>
+                                        <TableCell className="p-0 text-xs text-foreground">
+                                          <div className="m-auto w-[250px]">
+                                            {t.data.node.template[n].type ===
+                                              "str" &&
+                                            !t.data.node.template[n].options ? (
+                                              <div className="mx-auto">
+                                                {t.data.node.template[n]
+                                                  .list ? (
+                                                  <InputListComponent
+                                                    editNode={true}
+                                                    disabled={false}
+                                                    value={
+                                                      !t.data.node.template[n]
+                                                        .value ||
+                                                      t.data.node.template[n]
+                                                        .value === ""
+                                                        ? [""]
+                                                        : t.data.node.template[
+                                                            n
+                                                          ].value
+                                                    }
+                                                    onChange={(k) => {}}
+                                                    onAddInput={(k) => {
+                                                      buildTweakObject(
+                                                        t["data"]["id"],
+                                                        k,
+                                                        t.data.node.template[n]
+                                                      );
+                                                    }}
+                                                  />
+                                                ) : t.data.node.template[n]
+                                                    .multiline ? (
+                                                  <ShadTooltip
+                                                    content={buildContent(
+                                                      t.data.node.template[n]
+                                                        .value
+                                                    )}
+                                                  >
+                                                    <div>
+                                                      <TextAreaComponent
+                                                        disabled={false}
+                                                        editNode={true}
+                                                        value={getValue(
+                                                          t.data.node.template[
+                                                            n
+                                                          ].value,
+                                                          t.data,
+                                                          t.data.node.template[
+                                                            n
+                                                          ]
+                                                        )}
+                                                        onChange={(k) => {
+                                                          buildTweakObject(
+                                                            t["data"]["id"],
+                                                            k,
+                                                            t.data.node
+                                                              .template[n]
+                                                          );
+                                                        }}
+                                                      />
+                                                    </div>
+                                                  </ShadTooltip>
+                                                ) : (
+                                                  <InputComponent
+                                                    editNode={true}
+                                                    disabled={false}
+                                                    password={
+                                                      t.data.node.template[n]
+                                                        .password ?? false
+                                                    }
+                                                    value={getValue(
+                                                      t.data.node.template[n]
+                                                        .value,
+                                                      t.data,
+                                                      t.data.node.template[n]
+                                                    )}
+                                                    onChange={(k) => {
+                                                      buildTweakObject(
+                                                        t["data"]["id"],
+                                                        k,
+                                                        t.data.node.template[n]
+                                                      );
+                                                    }}
+                                                  />
+                                                )}
+                                              </div>
+                                            ) : t.data.node.template[n].type ===
+                                              "bool" ? (
+                                              <div className="ml-auto">
+                                                {" "}
+                                                <ToggleShadComponent
+                                                  enabled={
+                                                    t.data.node.template[n]
+                                                      .value
+                                                  }
+                                                  setEnabled={(e) => {
+                                                    t.data.node.template[
+                                                      n
+                                                    ].value = e;
+                                                    buildTweakObject(
+                                                      t["data"]["id"],
+                                                      e,
+                                                      t.data.node.template[n]
+                                                    );
+                                                  }}
+                                                  size="small"
+                                                  disabled={false}
+                                                />
+                                              </div>
+                                            ) : t.data.node.template[n].type ===
+                                              "file" ? (
+                                              <ShadTooltip
+                                                content={buildContent(
+                                                  getValue(
+                                                    t.data.node.template[n]
+                                                      .value,
+                                                    t.data,
+                                                    t.data.node.template[n]
+                                                  )
+                                                )}
+                                              >
+                                                <div className="mx-auto">
+                                                  <InputFileComponent
+                                                    editNode={true}
+                                                    disabled={false}
+                                                    value={
+                                                      t.data.node.template[n]
+                                                        .value ?? ""
+                                                    }
+                                                    onChange={(k: any) => {}}
+                                                    fileTypes={
+                                                      t.data.node.template[n]
+                                                        .fileTypes
+                                                    }
+                                                    suffixes={
+                                                      t.data.node.template[n]
+                                                        .suffixes
+                                                    }
+                                                    onFileChange={(
+                                                      k: any
+                                                    ) => {}}
+                                                  ></InputFileComponent>
+                                                </div>
+                                              </ShadTooltip>
+                                            ) : t.data.node.template[n].type ===
+                                              "float" ? (
+                                              <div className="mx-auto">
+                                                <FloatComponent
+                                                  disabled={false}
+                                                  editNode={true}
+                                                  value={getValue(
+                                                    t.data.node.template[n]
+                                                      .value,
+                                                    t.data,
+                                                    t.data.node.template[n]
+                                                  )}
+                                                  onChange={(k) => {
+                                                    buildTweakObject(
+                                                      t["data"]["id"],
+                                                      k,
+                                                      t.data.node.template[n]
+                                                    );
+                                                  }}
+                                                />
+                                              </div>
+                                            ) : t.data.node.template[n].type ===
+                                                "str" &&
+                                              t.data.node.template[n]
+                                                .options ? (
+                                              <div className="mx-auto">
+                                                <Dropdown
+                                                  editNode={true}
+                                                  apiModal={true}
+                                                  options={
+                                                    t.data.node.template[n]
+                                                      .options
+                                                  }
+                                                  onSelect={(k) => {
+                                                    buildTweakObject(
+                                                      t["data"]["id"],
+                                                      k,
+                                                      t.data.node.template[n]
+                                                    );
+                                                  }}
+                                                  value={getValue(
+                                                    t.data.node.template[n]
+                                                      .value,
+                                                    t.data,
+                                                    t.data.node.template[n]
+                                                  )}
+                                                ></Dropdown>
+                                              </div>
+                                            ) : t.data.node.template[n].type ===
+                                              "int" ? (
+                                              <div className="mx-auto">
+                                                <IntComponent
+                                                  disabled={false}
+                                                  editNode={true}
+                                                  value={getValue(
+                                                    t.data.node.template[n]
+                                                      .value,
+                                                    t.data,
+                                                    t.data.node.template[n]
+                                                  )}
+                                                  onChange={(k) => {
+                                                    buildTweakObject(
+                                                      t["data"]["id"],
+                                                      k,
+                                                      t.data.node.template[n]
+                                                    );
+                                                  }}
+                                                />
+                                              </div>
+                                            ) : t.data.node.template[n].type ===
+                                              "prompt" ? (
+                                              <ShadTooltip
+                                                content={buildContent(
+                                                  getValue(
+                                                    t.data.node.template[n]
+                                                      .value,
+                                                    t.data,
+                                                    t.data.node.template[n]
+                                                  )
+                                                )}
+                                              >
+                                                <div className="mx-auto">
+                                                  <PromptAreaComponent
+                                                    editNode={true}
+                                                    disabled={false}
+                                                    value={getValue(
+                                                      t.data.node.template[n]
+                                                        .value,
+                                                      t.data,
+                                                      t.data.node.template[n]
+                                                    )}
+                                                    onChange={(k) => {
+                                                      buildTweakObject(
+                                                        t["data"]["id"],
+                                                        k,
+                                                        t.data.node.template[n]
+                                                      );
+                                                    }}
+                                                  />
+                                                </div>
+                                              </ShadTooltip>
+                                            ) : t.data.node.template[n].type ===
+                                              "code" ? (
+                                              <ShadTooltip
+                                                content={buildContent(
+                                                  getValue(
+                                                    t.data.node.template[n]
+                                                      .value,
+                                                    t.data,
+                                                    t.data.node.template[n]
+                                                  )
+                                                )}
+                                              >
+                                                <div className="mx-auto">
+                                                  <CodeAreaComponent
+                                                    disabled={false}
+                                                    editNode={true}
+                                                    value={getValue(
+                                                      t.data.node.template[n]
+                                                        .value,
+                                                      t.data,
+                                                      t.data.node.template[n]
+                                                    )}
+                                                    onChange={(k) => {
+                                                      buildTweakObject(
+                                                        t["data"]["id"],
+                                                        k,
+                                                        t.data.node.template[n]
+                                                      );
+                                                    }}
+                                                  />
+                                                </div>
+                                              </ShadTooltip>
+                                            ) : t.data.node.template[n].type ===
+                                              "Any" ? (
+                                              "-"
+                                            ) : (
+                                              <div className="hidden"></div>
+                                            )}
+                                          </div>
+                                        </TableCell>
+                                      </TableRow>
+                                    );
+                                  })}
+                              </TableBody>
+                            </Table>
+                          </div>
+                        </AccordionComponent>
+                      )}
+
+                      {tweaksList.current.length === 0 && (
+                        <>
+                          <div className="pt-3">
+                            No tweaks are available for this flow.
+                          </div>
+                        </>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </>
+          ) : null}
+        </TabsContent>
+      ))}
+    </Tabs>
+  );
+}
diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index 15556b27c..c81038284 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -904,7 +904,7 @@ The cursor: default; property value restores the browser's default cursor style
   }
 
   .api-modal-tabs {
-    @apply lg:w-full h-full overflow-hidden text-center bg-muted rounded-md border sm:w-[75vw]
+    @apply lg:w-full h-full flex flex-col overflow-hidden text-center bg-muted rounded-md border sm:w-[75vw]
   }
   .api-modal-tablist-div {
     @apply flex items-center justify-between px-2
diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx
index 1d530ca6d..c4571bf26 100644
--- a/src/frontend/src/modals/ApiModal/index.tsx
+++ b/src/frontend/src/modals/ApiModal/index.tsx
@@ -11,35 +11,8 @@ import {
   useState,
 } from "react";
 // import "ace-builds/webpack-resolver";
-import { Check, Clipboard, Code2 } from "lucide-react";
-import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
-import AccordionComponent from "../../components/AccordionComponent";
-import ShadTooltip from "../../components/ShadTooltipComponent";
-import CodeAreaComponent from "../../components/codeAreaComponent";
-import Dropdown from "../../components/dropdownComponent";
-import FloatComponent from "../../components/floatComponent";
-import InputComponent from "../../components/inputComponent";
-import InputFileComponent from "../../components/inputFileComponent";
-import InputListComponent from "../../components/inputListComponent";
-import IntComponent from "../../components/intComponent";
-import PromptAreaComponent from "../../components/promptComponent";
-import TextAreaComponent from "../../components/textAreaComponent";
-import ToggleShadComponent from "../../components/toggleShadComponent";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "../../components/ui/table";
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "../../components/ui/tabs";
+import { Code2 } from "lucide-react";
+import CodeTabsComponent from "../../components/codeTabsComponent";
 import {
   EXPORT_CODE_DIALOG,
   getCurlCode,
@@ -48,7 +21,7 @@ import {
 } from "../../constants";
 import { TabsContext } from "../../contexts/tabsContext";
 import { FlowType } from "../../types/flow/index";
-import { buildTweaks, classNames } from "../../utils";
+import { buildTweaks } from "../../utils";
 import BaseModal from "../baseModal";
 
 const ApiModal = forwardRef(
@@ -62,27 +35,11 @@ const ApiModal = forwardRef(
     },
     ref
   ) => {
-    const [activeTab, setActiveTab] = useState("0");
     const [open, setOpen] = useState(false);
-    const [isCopied, setIsCopied] = useState<Boolean>(false);
-    const [openAccordion, setOpenAccordion] = useState([]);
+    const [activeTab, setActiveTab] = useState("0");
     const tweak = useRef([]);
     const tweaksList = useRef([]);
     const { setTweak, getTweak, tabsState } = useContext(TabsContext);
-
-    const copyToClipboard = () => {
-      if (!navigator.clipboard || !navigator.clipboard.writeText) {
-        return;
-      }
-
-      navigator.clipboard.writeText(tabs[activeTab].code).then(() => {
-        setIsCopied(true);
-
-        setTimeout(() => {
-          setIsCopied(false);
-        }, 2000);
-      });
-    };
     const pythonApiCode = getPythonApiCode(flow, tweak.current, tabsState);
     const curl_code = getCurlCode(flow, tweak.current, tabsState);
     const pythonCode = getPythonCode(flow, tweak.current, tabsState);
@@ -92,6 +49,7 @@ const ApiModal = forwardRef(
         name: "cURL",
         mode: "bash",
         image: "https://curl.se/logo/curl-symbol-transparent.png",
+        language: "sh",
         code: curl_code,
       },
       {
@@ -99,12 +57,14 @@ const ApiModal = forwardRef(
         mode: "python",
         image:
           "https://images.squarespace-cdn.com/content/v1/5df3d8c5d2be5962e4f87890/1628015119369-OY4TV3XJJ53ECO0W2OLQ/Python+API+Training+Logo.png?format=1000w",
+        language: "py",
         code: pythonApiCode,
       },
       {
         name: "Python Code",
         mode: "python",
         image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
+        language: "py",
         code: pythonCode,
       },
     ]);
@@ -133,6 +93,7 @@ const ApiModal = forwardRef(
             name: "cURL",
             mode: "bash",
             image: "https://curl.se/logo/curl-symbol-transparent.png",
+            language: "sh",
             code: curl_code,
           },
           {
@@ -140,11 +101,13 @@ const ApiModal = forwardRef(
             mode: "python",
             image:
               "https://images.squarespace-cdn.com/content/v1/5df3d8c5d2be5962e4f87890/1628015119369-OY4TV3XJJ53ECO0W2OLQ/Python+API+Training+Logo.png?format=1000w",
+            language: "py",
             code: pythonApiCode,
           },
           {
             name: "Python Code",
             mode: "python",
+            language: "py",
             image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
             code: pythonCode,
           },
@@ -152,6 +115,7 @@ const ApiModal = forwardRef(
             name: "Tweaks",
             mode: "python",
             image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
+            language: "py",
             code: pythonCode,
           },
         ]);
@@ -161,6 +125,7 @@ const ApiModal = forwardRef(
             name: "cURL",
             mode: "bash",
             image: "https://curl.se/logo/curl-symbol-transparent.png",
+            language: "sh",
             code: curl_code,
           },
           {
@@ -168,12 +133,14 @@ const ApiModal = forwardRef(
             mode: "python",
             image:
               "https://images.squarespace-cdn.com/content/v1/5df3d8c5d2be5962e4f87890/1628015119369-OY4TV3XJJ53ECO0W2OLQ/Python+API+Training+Logo.png?format=1000w",
+            language: "py",
             code: pythonApiCode,
           },
           {
             name: "Python Code",
             mode: "python",
             image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
+            language: "py",
             code: pythonCode,
           },
         ]);
@@ -206,7 +173,6 @@ const ApiModal = forwardRef(
         return self.indexOf(value) === index;
       });
     }
-
     function buildTweakObject(tw, changes, template) {
       if (template.type === "float") {
         changes = parseFloat(changes);
@@ -286,22 +252,6 @@ const ApiModal = forwardRef(
       return returnValue;
     }
 
-    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);
-          }
-        });
-      });
-
-      if (accordionsToOpen.length == 0) {
-        setOpenAccordion([]);
-      }
-    }
-
     return (
       <BaseModal open={open} setOpen={setOpen}>
         <BaseModal.Trigger>{children}</BaseModal.Trigger>
@@ -314,470 +264,19 @@ const ApiModal = forwardRef(
           />
         </BaseModal.Header>
         <BaseModal.Content>
-          <Tabs
-            value={activeTab}
-            className="api-modal-tabs"
-            onValueChange={(value) => {
-              setActiveTab(value);
-              if (value === "3") {
-                openAccordions();
-              }
+          <CodeTabsComponent
+            flow={flow}
+            tabs={tabs}
+            activeTab={activeTab}
+            setActiveTab={setActiveTab}
+            tweaks={{
+              tweak,
+              tweaksList,
+              buildContent,
+              buildTweakObject,
+              getValue,
             }}
-          >
-            <div className="api-modal-tablist-div">
-              <TabsList>
-                {tabs.map((tab, index) => (
-                  <TabsTrigger key={index} value={index.toString()}>
-                    {tab.name}
-                  </TabsTrigger>
-                ))}
-              </TabsList>
-              {Number(activeTab) < 3 && (
-                <div className="float-right">
-                  <button
-                    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} />}
-                    {isCopied ? "Copied!" : "Copy code"}
-                  </button>
-                </div>
-              )}
-            </div>
-
-            {tabs.map((tab, index) => (
-              <TabsContent
-                value={index.toString()}
-                className="api-modal-tabs-content"
-                key={index} // Remember to add a unique key prop
-              >
-                {index < 3 ? (
-                  <SyntaxHighlighter
-                    className="h-[70vh] w-full overflow-auto custom-scroll"
-                    language={tab.mode}
-                    style={oneDark}
-                  >
-                    {tab.code}
-                  </SyntaxHighlighter>
-                ) : index === 3 ? (
-                  <>
-                    <div className="api-modal-according-display">
-                      <div
-                        className={classNames(
-                          "h-[70vh] w-full rounded-lg bg-muted",
-                          1 == 1
-                            ? "overflow-scroll overflow-x-hidden custom-scroll"
-                            : "overflow-hidden"
-                        )}
-                      >
-                        {flow["data"]["nodes"].map((t: any, index) => (
-                          <div className="px-3" key={index}>
-                            {tweaksList.current.includes(t["data"]["id"]) && (
-                              <AccordionComponent
-                                trigger={t["data"]["id"]}
-                                open={openAccordion}
-                              >
-                                <div className="api-modal-table-arrangement">
-                                  <Table className="table-fixed bg-muted outline-1">
-                                    <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="h-7 p-0 text-center">
-                                          VALUE
-                                        </TableHead>
-                                      </TableRow>
-                                    </TableHeader>
-                                    <TableBody className="p-0">
-                                      {Object.keys(
-                                        t["data"]["node"]["template"]
-                                      )
-                                        .filter(
-                                          (n) =>
-                                            n.charAt(0) !== "_" &&
-                                            t.data.node.template[n].show &&
-                                            (t.data.node.template[n].type ===
-                                              "str" ||
-                                              t.data.node.template[n].type ===
-                                                "bool" ||
-                                              t.data.node.template[n].type ===
-                                                "float" ||
-                                              t.data.node.template[n].type ===
-                                                "code" ||
-                                              t.data.node.template[n].type ===
-                                                "prompt" ||
-                                              t.data.node.template[n].type ===
-                                                "file" ||
-                                              t.data.node.template[n].type ===
-                                                "int")
-                                        )
-                                        .map((n, i) => {
-                                          //console.log(t.data.node.template[n]);
-
-                                          return (
-                                            <TableRow
-                                              key={i}
-                                              className="h-10 dark:border-b-muted"
-                                            >
-                                              <TableCell className="p-0 text-center text-sm text-foreground">
-                                                {n}
-                                              </TableCell>
-                                              <TableCell className="p-0 text-xs text-foreground">
-                                                <div className="m-auto w-[250px]">
-                                                  {t.data.node.template[n]
-                                                    .type === "str" &&
-                                                  !t.data.node.template[n]
-                                                    .options ? (
-                                                    <div className="mx-auto">
-                                                      {t.data.node.template[n]
-                                                        .list ? (
-                                                        <InputListComponent
-                                                          editNode={true}
-                                                          disabled={false}
-                                                          value={
-                                                            !t.data.node
-                                                              .template[n]
-                                                              .value ||
-                                                            t.data.node
-                                                              .template[n]
-                                                              .value === ""
-                                                              ? [""]
-                                                              : t.data.node
-                                                                  .template[n]
-                                                                  .value
-                                                          }
-                                                          onChange={(k) => {}}
-                                                          onAddInput={(k) => {
-                                                            buildTweakObject(
-                                                              t["data"]["id"],
-                                                              k,
-                                                              t.data.node
-                                                                .template[n]
-                                                            );
-                                                          }}
-                                                        />
-                                                      ) : t.data.node.template[
-                                                          n
-                                                        ].multiline ? (
-                                                        <ShadTooltip
-                                                          content={buildContent(
-                                                            t.data.node
-                                                              .template[n].value
-                                                          )}
-                                                        >
-                                                          <div>
-                                                            <TextAreaComponent
-                                                              disabled={false}
-                                                              editNode={true}
-                                                              value={getValue(
-                                                                t.data.node
-                                                                  .template[n]
-                                                                  .value,
-                                                                t.data,
-                                                                t.data.node
-                                                                  .template[n]
-                                                              )}
-                                                              onChange={(k) => {
-                                                                buildTweakObject(
-                                                                  t["data"][
-                                                                    "id"
-                                                                  ],
-                                                                  k,
-                                                                  t.data.node
-                                                                    .template[n]
-                                                                );
-                                                              }}
-                                                            />
-                                                          </div>
-                                                        </ShadTooltip>
-                                                      ) : (
-                                                        <InputComponent
-                                                          editNode={true}
-                                                          disabled={false}
-                                                          password={
-                                                            t.data.node
-                                                              .template[n]
-                                                              .password ?? false
-                                                          }
-                                                          value={getValue(
-                                                            t.data.node
-                                                              .template[n]
-                                                              .value,
-                                                            t.data,
-                                                            t.data.node
-                                                              .template[n]
-                                                          )}
-                                                          onChange={(k) => {
-                                                            buildTweakObject(
-                                                              t["data"]["id"],
-                                                              k,
-                                                              t.data.node
-                                                                .template[n]
-                                                            );
-                                                          }}
-                                                        />
-                                                      )}
-                                                    </div>
-                                                  ) : t.data.node.template[n]
-                                                      .type === "bool" ? (
-                                                    <div className="ml-auto">
-                                                      {" "}
-                                                      <ToggleShadComponent
-                                                        enabled={
-                                                          t.data.node.template[
-                                                            n
-                                                          ].value
-                                                        }
-                                                        setEnabled={(e) => {
-                                                          t.data.node.template[
-                                                            n
-                                                          ].value = e;
-                                                          buildTweakObject(
-                                                            t["data"]["id"],
-                                                            e,
-                                                            t.data.node
-                                                              .template[n]
-                                                          );
-                                                        }}
-                                                        size="small"
-                                                        disabled={false}
-                                                      />
-                                                    </div>
-                                                  ) : t.data.node.template[n]
-                                                      .type === "file" ? (
-                                                    <ShadTooltip
-                                                      content={buildContent(
-                                                        getValue(
-                                                          t.data.node.template[
-                                                            n
-                                                          ].value,
-                                                          t.data,
-                                                          t.data.node.template[
-                                                            n
-                                                          ]
-                                                        )
-                                                      )}
-                                                    >
-                                                      <div className="mx-auto">
-                                                        <InputFileComponent
-                                                          editNode={true}
-                                                          disabled={false}
-                                                          value={
-                                                            t.data.node
-                                                              .template[n]
-                                                              .value ?? ""
-                                                          }
-                                                          onChange={(
-                                                            k: any
-                                                          ) => {}}
-                                                          fileTypes={
-                                                            t.data.node
-                                                              .template[n]
-                                                              .fileTypes
-                                                          }
-                                                          suffixes={
-                                                            t.data.node
-                                                              .template[n]
-                                                              .suffixes
-                                                          }
-                                                          onFileChange={(
-                                                            k: any
-                                                          ) => {}}
-                                                        ></InputFileComponent>
-                                                      </div>
-                                                    </ShadTooltip>
-                                                  ) : t.data.node.template[n]
-                                                      .type === "float" ? (
-                                                    <div className="mx-auto">
-                                                      <FloatComponent
-                                                        disabled={false}
-                                                        editNode={true}
-                                                        value={getValue(
-                                                          t.data.node.template[
-                                                            n
-                                                          ].value,
-                                                          t.data,
-                                                          t.data.node.template[
-                                                            n
-                                                          ]
-                                                        )}
-                                                        onChange={(k) => {
-                                                          buildTweakObject(
-                                                            t["data"]["id"],
-                                                            k,
-                                                            t.data.node
-                                                              .template[n]
-                                                          );
-                                                        }}
-                                                      />
-                                                    </div>
-                                                  ) : t.data.node.template[n]
-                                                      .type === "str" &&
-                                                    t.data.node.template[n]
-                                                      .options ? (
-                                                    <div className="mx-auto">
-                                                      <Dropdown
-                                                        editNode={true}
-                                                        apiModal={true}
-                                                        options={
-                                                          t.data.node.template[
-                                                            n
-                                                          ].options
-                                                        }
-                                                        onSelect={(k) => {
-                                                          buildTweakObject(
-                                                            t["data"]["id"],
-                                                            k,
-                                                            t.data.node
-                                                              .template[n]
-                                                          );
-                                                        }}
-                                                        value={getValue(
-                                                          t.data.node.template[
-                                                            n
-                                                          ].value,
-                                                          t.data,
-                                                          t.data.node.template[
-                                                            n
-                                                          ]
-                                                        )}
-                                                      ></Dropdown>
-                                                    </div>
-                                                  ) : t.data.node.template[n]
-                                                      .type === "int" ? (
-                                                    <div className="mx-auto">
-                                                      <IntComponent
-                                                        disabled={false}
-                                                        editNode={true}
-                                                        value={getValue(
-                                                          t.data.node.template[
-                                                            n
-                                                          ].value,
-                                                          t.data,
-                                                          t.data.node.template[
-                                                            n
-                                                          ]
-                                                        )}
-                                                        onChange={(k) => {
-                                                          buildTweakObject(
-                                                            t["data"]["id"],
-                                                            k,
-                                                            t.data.node
-                                                              .template[n]
-                                                          );
-                                                        }}
-                                                      />
-                                                    </div>
-                                                  ) : t.data.node.template[n]
-                                                      .type === "prompt" ? (
-                                                    <ShadTooltip
-                                                      content={buildContent(
-                                                        getValue(
-                                                          t.data.node.template[
-                                                            n
-                                                          ].value,
-                                                          t.data,
-                                                          t.data.node.template[
-                                                            n
-                                                          ]
-                                                        )
-                                                      )}
-                                                    >
-                                                      <div className="mx-auto">
-                                                        <PromptAreaComponent
-                                                          editNode={true}
-                                                          disabled={false}
-                                                          value={getValue(
-                                                            t.data.node
-                                                              .template[n]
-                                                              .value,
-                                                            t.data,
-                                                            t.data.node
-                                                              .template[n]
-                                                          )}
-                                                          onChange={(k) => {
-                                                            buildTweakObject(
-                                                              t["data"]["id"],
-                                                              k,
-                                                              t.data.node
-                                                                .template[n]
-                                                            );
-                                                          }}
-                                                        />
-                                                      </div>
-                                                    </ShadTooltip>
-                                                  ) : t.data.node.template[n]
-                                                      .type === "code" ? (
-                                                    <ShadTooltip
-                                                      content={buildContent(
-                                                        getValue(
-                                                          t.data.node.template[
-                                                            n
-                                                          ].value,
-                                                          t.data,
-                                                          t.data.node.template[
-                                                            n
-                                                          ]
-                                                        )
-                                                      )}
-                                                    >
-                                                      <div className="mx-auto">
-                                                        <CodeAreaComponent
-                                                          disabled={false}
-                                                          editNode={true}
-                                                          value={getValue(
-                                                            t.data.node
-                                                              .template[n]
-                                                              .value,
-                                                            t.data,
-                                                            t.data.node
-                                                              .template[n]
-                                                          )}
-                                                          onChange={(k) => {
-                                                            buildTweakObject(
-                                                              t["data"]["id"],
-                                                              k,
-                                                              t.data.node
-                                                                .template[n]
-                                                            );
-                                                          }}
-                                                        />
-                                                      </div>
-                                                    </ShadTooltip>
-                                                  ) : t.data.node.template[n]
-                                                      .type === "Any" ? (
-                                                    "-"
-                                                  ) : (
-                                                    <div className="hidden"></div>
-                                                  )}
-                                                </div>
-                                              </TableCell>
-                                            </TableRow>
-                                          );
-                                        })}
-                                    </TableBody>
-                                  </Table>
-                                </div>
-                              </AccordionComponent>
-                            )}
-
-                            {tweaksList.current.length === 0 && (
-                              <>
-                                <div className="pt-3">
-                                  No tweaks are available for this flow.
-                                </div>
-                              </>
-                            )}
-                          </div>
-                        ))}
-                      </div>
-                    </div>
-                  </>
-                ) : null}
-              </TabsContent>
-            ))}
-          </Tabs>
+          />
         </BaseModal.Content>
       </BaseModal>
     );
diff --git a/src/frontend/src/modals/formModal/chatMessage/index.tsx b/src/frontend/src/modals/formModal/chatMessage/index.tsx
index 953aed530..31b389efb 100644
--- a/src/frontend/src/modals/formModal/chatMessage/index.tsx
+++ b/src/frontend/src/modals/formModal/chatMessage/index.tsx
@@ -8,11 +8,11 @@ import remarkMath from "remark-math";
 import MaleTechnology from "../../../assets/male-technologist.png";
 import Robot from "../../../assets/robot.png";
 import SanitizedHTMLWrapper from "../../../components/SanitizedHTMLWrapper";
+import CodeTabsComponent from "../../../components/codeTabsComponent";
 import { THOUGHTS_ICON } from "../../../constants";
 import { ChatMessageType } from "../../../types/chat";
 import { classNames } from "../../../utils";
 import FileCard from "../fileComponent";
-import { CodeBlock } from "./codeBlock";
 export default function ChatMessage({
   chat,
   lockChat,
@@ -110,11 +110,19 @@ export default function ChatMessage({
                             );
 
                             return !inline ? (
-                              <CodeBlock
-                                key={Math.random()}
-                                language={(match && match[1]) || ""}
-                                value={String(children).replace(/\n$/, "")}
-                                {...props}
+                              <CodeTabsComponent
+                                tabs={[
+                                  {
+                                    name: (match && match[1]) || "",
+                                    mode: (match && match[1]) || "",
+                                    image:
+                                      "https://curl.se/logo/curl-symbol-transparent.png",
+                                    language: (match && match[1]) || "",
+                                    code: String(children).replace(/\n$/, ""),
+                                  },
+                                ]}
+                                activeTab={"0"}
+                                setActiveTab={() => {}}
                               />
                             ) : (
                               <code className={className} {...props}>