gmakstutis/openrag
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

changed use env open ai api key style

Browse source
This commit is contained in:
Lucas Oliveira 2025-10-01 11:06:28 -03:00
parent 2b6695deb2
commit 25426eea80
2 changed files with 107 additions and 114 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/components/label-wrapper.tsx
View file

@ -37,7 +37,7 @@ export function LabelWrapper({
> >
<Label <Label
htmlFor={id} 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} {label}
{required && <span className="text-red-500">*</span>} {required && <span className="text-red-500">*</span>}

219
frontend/src/app/onboarding/components/openai-onboarding.tsx
View file

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