diff --git a/src/frontend/src/modals/apiModal/codeTabs/code-tabs.tsx b/src/frontend/src/modals/apiModal/codeTabs/code-tabs.tsx index 1f6d8f156..98687544f 100644 --- a/src/frontend/src/modals/apiModal/codeTabs/code-tabs.tsx +++ b/src/frontend/src/modals/apiModal/codeTabs/code-tabs.tsx @@ -1,11 +1,12 @@ import IconComponent from "@/components/common/genericIconComponent"; import { Button } from "@/components/ui/button"; -import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; +import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs-button"; import useAuthStore from "@/stores/authStore"; import useFlowStore from "@/stores/flowStore"; import { useTweaksStore } from "@/stores/tweaksStore"; import { tabsArrayType } from "@/types/tabs"; import { hasStreaming } from "@/utils/reactflowUtils"; +import { getOS } from "@/utils/utils"; import { useEffect, useState } from "react"; import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"; import { @@ -19,6 +20,19 @@ import { getNewCurlCode } from "../utils/get-curl-code"; import { getNewJsApiCode } from "../utils/get-js-api-code"; import { getNewPythonApiCode } from "../utils/get-python-api-code"; +const operatingSystemTabs = [ + { + name: "macoslinux", + title: "macOS/Linux", + icon: "FaApple", + }, + { + name: "windows", + title: "Windows", + icon: "FaWindows", + }, +]; + export default function APITabsComponent() { const [isCopied, setIsCopied] = useState(false); const endpointName = useFlowStore( @@ -67,114 +81,142 @@ export default function APITabsComponent() { isAuthenticated: autologin || false, processedPayload: processedPayload, }; - const tabsList: tabsArrayType = [ + + // Platform selection for cURL + const [selectedPlatform, setSelectedPlatform] = useState( + operatingSystemTabs.find((tab) => + tab.name.includes(getOS() === "windows" ? "windows" : "macoslinux"), + )?.name || "macoslinux", + ); + + const tabsList = [ { title: "Python", icon: "BWPython", language: "python", code: getNewPythonApiCode(codeOptions), - copyCode: getNewPythonApiCode(codeOptions), }, { title: "JavaScript", icon: "javascript", language: "javascript", code: getNewJsApiCode(codeOptions), - copyCode: getNewJsApiCode(codeOptions), }, { title: "cURL", icon: "TerminalSquare", - language: "shell", - code: getNewCurlCode(codeOptions), - copyCode: getNewCurlCode(codeOptions), + language: selectedPlatform === "windows" ? "powershell" : "shell", + code: getNewCurlCode({ + ...codeOptions, + platform: selectedPlatform === "windows" ? "powershell" : "unix", + }), }, ]; - const [activeTab, setActiveTab] = useState(0); + + const [selectedTab, setSelectedTab] = useState("Python"); const copyToClipboard = () => { if (!navigator.clipboard || !navigator.clipboard.writeText) { return; } - navigator.clipboard.writeText(tabsList[activeTab].code).then(() => { - setIsCopied(true); + const currentTab = tabsList.find((tab) => tab.title === selectedTab); + if (currentTab) { + navigator.clipboard.writeText(currentTab.code).then(() => { + setIsCopied(true); - setTimeout(() => { - setIsCopied(false); - }, 2000); - }); + setTimeout(() => { + setIsCopied(false); + }, 2000); + }); + } }; useEffect(() => { setIsCopied(false); - }, [activeTab]); + }, [selectedTab, selectedPlatform]); + + const currentTab = tabsList.find((tab) => tab.title === selectedTab); return ( - { - setActiveTab(parseInt(value)); - }} - > -
- {tabsList.length > 0 && tabsList[0].title !== "" ? ( - - {tabsList.map((tab, index) => ( - +
+ {/* Main language tabs */} +
+ {tabsList.map((tab) => ( + + ))} +
+ + {/* Platform selection for cURL */} + {selectedTab === "cURL" && ( +
+ + + {operatingSystemTabs.map((tab, index) => ( + + + ))} + + +
+ )} + + {/* Code content */} + {currentTab && ( +
+
+ + + {currentTab.code} + +
+
)}
- - {tabsList.map((tab, idx) => ( - -
- - - {tab.code} - -
-
- ))} - +
); } diff --git a/src/frontend/src/modals/apiModal/index.tsx b/src/frontend/src/modals/apiModal/index.tsx index 09bd29c13..caeb4a701 100644 --- a/src/frontend/src/modals/apiModal/index.tsx +++ b/src/frontend/src/modals/apiModal/index.tsx @@ -135,7 +135,7 @@ export default function ApiModal({