Merge branch 'db' of https://github.com/logspace-ai/langflow into db

src/frontend/src/components/ui/tabs.tsx

@@ -1,10 +1,10 @@
-"use client";
+"use client"
 
-import * as React from "react";
+import * as React from "react"
-import * as TabsPrimitive from "@radix-ui/react-tabs";
+import * as TabsPrimitive from "@radix-ui/react-tabs"
-import { cn } from "../../utils";
+import { cn } from "../../utils"
 
-const Tabs = TabsPrimitive.Root;
+const Tabs = TabsPrimitive.Root
 
 const TabsList = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.List>,
@@ -13,13 +13,13 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center rounded-md bg-muted text-muted-foreground",
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
       className
     )}
     {...props}
   />
-));
+))
-TabsList.displayName = TabsPrimitive.List.displayName;
+TabsList.displayName = TabsPrimitive.List.displayName
 
 const TabsTrigger = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Trigger>,
@@ -28,13 +28,13 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-lg px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm data-[state=inactive]:hover:bg-secondary/80 data-[state=active]:border data-[state=inactive]:border data-[state=inactive]:border-muted",
       className
     )}
     {...props}
   />
-));
+))
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
 
 const TabsContent = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Content>,
@@ -43,12 +43,12 @@ const TabsContent = React.forwardRef<
   <TabsPrimitive.Content
     ref={ref}
     className={cn(
-      "ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
       className
     )}
     {...props}
   />
-));
+))
-TabsContent.displayName = TabsPrimitive.Content.displayName;
+TabsContent.displayName = TabsPrimitive.Content.displayName
 
-export { Tabs, TabsList, TabsTrigger, TabsContent };
+export { Tabs, TabsList, TabsTrigger, TabsContent }

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

@@ -1,4 +1,3 @@
-import { IconCheck, IconClipboard } from "@tabler/icons-react";
 import { CodeBracketSquareIcon } from "@heroicons/react/24/outline";
 import { useContext, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
@@ -21,6 +20,13 @@ import {
 import { FlowType } from "../../types/flow/index";
 import { getCurlCode, getPythonApiCode, getPythonCode } from "../../constants";
 import { EXPORT_CODE_DIALOG } from "../../constants";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "../../components/ui/tabs";
+import { Check, Clipboard } from "lucide-react";
 
 export default function ApiModal({ flow }: { flow: FlowType }) {
   const [open, setOpen] = useState(true);
@@ -55,6 +61,12 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
   const pythonCode = getPythonCode(flow);
 
   const tabs = [
+    {
+      name: "cURL",
+      mode: "bash",
+      image: "https://curl.se/logo/curl-symbol-transparent.png",
+      code: curl_code,
+    },
     {
       name: "Python API",
       mode: "python",
@@ -62,12 +74,6 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
         "https://images.squarespace-cdn.com/content/v1/5df3d8c5d2be5962e4f87890/1628015119369-OY4TV3XJJ53ECO0W2OLQ/Python+API+Training+Logo.png?format=1000w",
       code: pythonApiCode,
     },
-    {
-      name: "cURL",
-      mode: "bash",
-      image: "https://curl.se/logo/curl-symbol-transparent.png",
-      code: curl_code,
-    },
     {
       name: "Python Code",
       mode: "python",
@@ -90,52 +96,42 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
           <DialogDescription>{EXPORT_CODE_DIALOG}</DialogDescription>
         </DialogHeader>
 
-        <div className="flex flex-col h-full w-full overflow-hidden">
+        <Tabs defaultValue={"0"} className="w-full h-full overflow-hidden text-center bg-muted rounded-md border">
-          <div className="flex px-5 z-10 w-full">
+          <div className="flex items-center justify-between px-2">
+
+          <TabsList>
             {tabs.map((tab, index) => (
-              <button
+              <TabsTrigger value={index.toString()}>{tab.name}</TabsTrigger>
-                key={index}
-                onClick={() => {
-                  setActiveTab(index);
-                }}
-                className={
-                  "p-1.5 rounded-t-lg w-44 border border-b-0 border-gray-300 dark:border-gray-700 dark:text-gray-300 -mr-px flex justify-center items-center gap-4 " +
-                  (activeTab === index
-                    ? " bg-white dark:bg-gray-800"
-                    : "bg-muted dark:bg-gray-900")
-                }
-              >
-                {tab.name}
-                <img src={tab.image} className="w-[23px]" />
-              </button>
             ))}
-          </div>
+          </TabsList>
-          <div className=" overflow-hidden px-4 sm:p-4 sm:pb-0 sm:pt-0 w-full h-full rounded-lg border-gray-200 border-[1px] bg-muted dark:bg-gray-800">
+                <div className="float-right">
-            <div className="items-center mb-2 w-full">
+                  <button
-              <div className="float-right">
+                    className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-gray-500 dark:text-gray-300"
-                <button
+                    onClick={copyToClipboard}
-                  className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-gray-500 dark:text-gray-300"
+                  >
-                  onClick={copyToClipboard}
+                    {isCopied ? (
-                >
+                      <Check size={18} />
-                  {isCopied ? (
+                    ) : (
-                    <IconCheck size={18} />
+                      <Clipboard size={15} />
-                  ) : (
+                    )}
-                    <IconClipboard size={18} />
+                    {isCopied ? "Copied!" : "Copy code"}
-                  )}
+                  </button>
-                  {isCopied ? "Copied!" : "Copy code"}
+                </div>
-                </button>
               </div>
-            </div>
+          
-            <SyntaxHighlighter
+          {tabs.map((tab, index) => (
-              className="h-[350px] w-full overflow-auto"
+            <TabsContent value={index.toString()} className="overflow-hidden w-full h-full px-4 pb-4 -mt-1">
-              language={tabs[activeTab].mode}
+              
-              style={oneDark}
+              <SyntaxHighlighter
-              customStyle={{ margin: 0 }}
+                className="h-[400px] w-full overflow-auto"
-            >
+                language={tab.mode}
-              {tabs[activeTab].code}
+                style={oneDark}
-            </SyntaxHighlighter>
+              >
-          </div>
+                {tab.code}
-        </div>
+              </SyntaxHighlighter>
+            </TabsContent>
+          ))}
+        </Tabs>
       </DialogContent>
     </Dialog>
   );