From 25426eea804565d5c29756bffc2059a6123dea2e Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Wed, 1 Oct 2025 11:06:28 -0300
Subject: [PATCH] changed use env open ai api key style

---
 frontend/components/label-wrapper.tsx         |   2 +-
 .../components/openai-onboarding.tsx          | 219 +++++++++---------
 2 files changed, 107 insertions(+), 114 deletions(-)

diff --git a/frontend/components/label-wrapper.tsx b/frontend/components/label-wrapper.tsx
index 691b7726..0ebde8a6 100644
--- a/frontend/components/label-wrapper.tsx
+++ b/frontend/components/label-wrapper.tsx
@@ -37,7 +37,7 @@ export function LabelWrapper({
       >
         <Label
           htmlFor={id}
-          className="!text-mmd font-medium flex items-center gap-1.5"
+          className={cn("font-medium flex items-center gap-1.5", description ? "!text-sm" : "!text-mmd")}
         >
           {label}
           {required && <span className="text-red-500">*</span>}
diff --git a/frontend/src/app/onboarding/components/openai-onboarding.tsx b/frontend/src/app/onboarding/components/openai-onboarding.tsx
index b202756d..b057efc0 100644
--- a/frontend/src/app/onboarding/components/openai-onboarding.tsx
+++ b/frontend/src/app/onboarding/components/openai-onboarding.tsx
@@ -2,7 +2,7 @@ import { useState } from "react";
 import { LabelInput } from "@/components/label-input";
 import { LabelWrapper } from "@/components/label-wrapper";
 import OpenAILogo from "@/components/logo/openai-logo";
-import { Checkbox } from "@/components/ui/checkbox";
+import { Switch } from "@/components/ui/switch";
 import { useDebouncedValue } from "@/lib/debounce";
 import type { OnboardingVariables } from "../../api/mutations/useOnboardingMutation";
 import { useGetOpenAIModelsQuery } from "../../api/queries/useGetModelsQuery";
@@ -11,121 +11,114 @@ import { useUpdateSettings } from "../hooks/useUpdateSettings";
 import { AdvancedOnboarding } from "./advanced";
 
 export function OpenAIOnboarding({
-  setSettings,
-  sampleDataset,
-  setSampleDataset,
+	setSettings,
+	sampleDataset,
+	setSampleDataset,
 }: {
-  setSettings: (settings: OnboardingVariables) => void;
-  sampleDataset: boolean;
-  setSampleDataset: (dataset: boolean) => void;
+	setSettings: (settings: OnboardingVariables) => void;
+	sampleDataset: boolean;
+	setSampleDataset: (dataset: boolean) => void;
 }) {
-  const [apiKey, setApiKey] = useState("");
-  const [getFromEnv, setGetFromEnv] = useState(true);
-  const debouncedApiKey = useDebouncedValue(apiKey, 500);
+	const [apiKey, setApiKey] = useState("");
+	const [getFromEnv, setGetFromEnv] = useState(true);
+	const debouncedApiKey = useDebouncedValue(apiKey, 500);
 
-  // Fetch models from API when API key is provided
-  const {
-    data: modelsData,
-    isLoading: isLoadingModels,
-    error: modelsError,
-  } = useGetOpenAIModelsQuery(
-    getFromEnv
-      ? { apiKey: "" }
-      : debouncedApiKey
-      ? { apiKey: debouncedApiKey }
-      : undefined,
-    { enabled: debouncedApiKey !== "" || getFromEnv },
-  );
-  // Use custom hook for model selection logic
-  const {
-    languageModel,
-    embeddingModel,
-    setLanguageModel,
-    setEmbeddingModel,
-    languageModels,
-    embeddingModels,
-  } = useModelSelection(modelsData);
-  const handleSampleDatasetChange = (dataset: boolean) => {
-    setSampleDataset(dataset);
-  };
+	// Fetch models from API when API key is provided
+	const {
+		data: modelsData,
+		isLoading: isLoadingModels,
+		error: modelsError,
+	} = useGetOpenAIModelsQuery(
+		getFromEnv
+			? { apiKey: "" }
+			: debouncedApiKey
+				? { apiKey: debouncedApiKey }
+				: undefined,
+		{ enabled: debouncedApiKey !== "" || getFromEnv },
+	);
+	// Use custom hook for model selection logic
+	const {
+		languageModel,
+		embeddingModel,
+		setLanguageModel,
+		setEmbeddingModel,
+		languageModels,
+		embeddingModels,
+	} = useModelSelection(modelsData);
+	const handleSampleDatasetChange = (dataset: boolean) => {
+		setSampleDataset(dataset);
+	};
 
-  const handleGetFromEnvChange = (fromEnv: boolean) => {
-    setGetFromEnv(fromEnv);
-    if (fromEnv) {
-      setApiKey("");
-    }
-    setLanguageModel("");
-    setEmbeddingModel("");
-  };
+	const handleGetFromEnvChange = (fromEnv: boolean) => {
+		setGetFromEnv(fromEnv);
+		if (fromEnv) {
+			setApiKey("");
+		}
+		setLanguageModel("");
+		setEmbeddingModel("");
+	};
 
-  // Update settings when values change
-  useUpdateSettings(
-    "openai",
-    {
-      apiKey,
-      languageModel,
-      embeddingModel,
-    },
-    setSettings,
-  );
-  return (
-    <>
-      <div className="space-y-5">
-        <LabelWrapper
-          label="Use environment OpenAI API key"
-          id="get-api-key"
-          helperText={
-            <>
-              Reuse the key from your environment config.
-              <br />
-              Uncheck to enter a different key.
-            </>
-          }
-          flex
-          start
-        >
-          <Checkbox
-            checked={getFromEnv}
-            onCheckedChange={handleGetFromEnvChange}
-          />
-        </LabelWrapper>
-        {!getFromEnv && (
-          <div className="space-y-1">
-            <LabelInput
-              label="OpenAI API key"
-              helperText="The API key for your OpenAI account."
-              className={modelsError ? "!border-destructive" : ""}
-              id="api-key"
-              type="password"
-              required
-              placeholder="sk-..."
-              value={apiKey}
-              onChange={(e) => setApiKey(e.target.value)}
-            />
-            {isLoadingModels && (
-              <p className="text-mmd text-muted-foreground">
-                Validating API key...
-              </p>
-            )}
-            {modelsError && (
-              <p className="text-mmd text-destructive">
-                Invalid OpenAI API key. Verify or replace the key.
-              </p>
-            )}
-          </div>
-        )}
-      </div>
-      <AdvancedOnboarding
-        icon={<OpenAILogo className="w-4 h-4" />}
-        languageModels={languageModels}
-        embeddingModels={embeddingModels}
-        languageModel={languageModel}
-        embeddingModel={embeddingModel}
-        sampleDataset={sampleDataset}
-        setLanguageModel={setLanguageModel}
-        setSampleDataset={handleSampleDatasetChange}
-        setEmbeddingModel={setEmbeddingModel}
-      />
-    </>
-  );
+	// Update settings when values change
+	useUpdateSettings(
+		"openai",
+		{
+			apiKey,
+			languageModel,
+			embeddingModel,
+		},
+		setSettings,
+	);
+	return (
+		<>
+			<div className="space-y-5">
+				<LabelWrapper
+					label="Use environment OpenAI API key"
+					id="get-api-key"
+					description="Reuse the key from your environment config. Turn off to enter a different key."
+					flex
+				>
+					<Switch
+						checked={getFromEnv}
+						onCheckedChange={handleGetFromEnvChange}
+					/>
+				</LabelWrapper>
+				{!getFromEnv && (
+					<div className="space-y-1">
+						<LabelInput
+							label="OpenAI API key"
+							helperText="The API key for your OpenAI account."
+							className={modelsError ? "!border-destructive" : ""}
+							id="api-key"
+							type="password"
+							required
+							placeholder="sk-..."
+							value={apiKey}
+							onChange={(e) => setApiKey(e.target.value)}
+						/>
+						{isLoadingModels && (
+							<p className="text-mmd text-muted-foreground">
+								Validating API key...
+							</p>
+						)}
+						{modelsError && (
+							<p className="text-mmd text-destructive">
+								Invalid OpenAI API key. Verify or replace the key.
+							</p>
+						)}
+					</div>
+				)}
+			</div>
+			<AdvancedOnboarding
+				icon={<OpenAILogo className="w-4 h-4" />}
+				languageModels={languageModels}
+				embeddingModels={embeddingModels}
+				languageModel={languageModel}
+				embeddingModel={embeddingModel}
+				sampleDataset={sampleDataset}
+				setLanguageModel={setLanguageModel}
+				setSampleDataset={handleSampleDatasetChange}
+				setEmbeddingModel={setEmbeddingModel}
+			/>
+		</>
+	);
 }