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

format

Browse source
This commit is contained in:
Cole Goldsmith 2025-11-19 13:16:59 -06:00
parent cf8eb9ccce
commit 697baceb5f
5 changed files with 146 additions and 140 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

267
frontend/app/settings/_components/anthropic-settings-dialog.tsx
View file

@ -9,162 +9,161 @@ import type { ProviderHealthResponse } from "@/app/api/queries/useProviderHealth
import AnthropicLogo from "@/components/icons/anthropic-logo"; import AnthropicLogo from "@/components/icons/anthropic-logo";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { import {
Dialog, Dialog,
DialogContent, DialogContent,
DialogFooter, DialogFooter,
DialogHeader, DialogHeader,
DialogTitle, DialogTitle,
} from "@/components/ui/dialog"; } from "@/components/ui/dialog";
import { import {
AnthropicSettingsForm, AnthropicSettingsForm,
type AnthropicSettingsFormData, type AnthropicSettingsFormData,
} from "./anthropic-settings-form"; } from "./anthropic-settings-form";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
const AnthropicSettingsDialog = ({ const AnthropicSettingsDialog = ({
open, open,
setOpen, setOpen,
}: { }: {
open: boolean; open: boolean;
setOpen: (open: boolean) => void; setOpen: (open: boolean) => void;
}) => { }) => {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const [isValidating, setIsValidating] = useState(false); const [isValidating, setIsValidating] = useState(false);
const [validationError, setValidationError] = useState<Error | null>(null); const [validationError, setValidationError] = useState<Error | null>(null);
const router = useRouter(); const router = useRouter();
const methods = useForm<AnthropicSettingsFormData>({ const methods = useForm<AnthropicSettingsFormData>({
mode: "onSubmit", mode: "onSubmit",
defaultValues: { defaultValues: {
apiKey: "", apiKey: "",
}, },
}); });
const { handleSubmit, watch } = methods; const { handleSubmit, watch } = methods;
const apiKey = watch("apiKey"); const apiKey = watch("apiKey");
const { refetch: validateCredentials } = useGetAnthropicModelsQuery( const { refetch: validateCredentials } = useGetAnthropicModelsQuery(
{ {
apiKey: apiKey, apiKey: apiKey,
}, },
{ {
enabled: false, enabled: false,
}, },
); );
const settingsMutation = useUpdateSettingsMutation({ const settingsMutation = useUpdateSettingsMutation({
onSuccess: () => { onSuccess: () => {
// Update provider health cache to healthy since backend validated the setup // Update provider health cache to healthy since backend validated the setup
const healthData: ProviderHealthResponse = { const healthData: ProviderHealthResponse = {
status: "healthy", status: "healthy",
message: "Provider is configured and working correctly", message: "Provider is configured and working correctly",
provider: "anthropic", provider: "anthropic",
}; };
queryClient.setQueryData(["provider", "health"], healthData); queryClient.setQueryData(["provider", "health"], healthData);
toast.message("Anthropic successfully configured", { toast.message("Anthropic successfully configured", {
description: description: "You can now access the provided language models.",
"You can now access the provided language models.", duration: Infinity,
duration: Infinity, closeButton: true,
closeButton: true, icon: <AnthropicLogo className="w-4 h-4 text-[#D97757]" />,
icon: <AnthropicLogo className="w-4 h-4 text-[#D97757]" />, action: {
action: { label: "Settings",
label: "Settings", onClick: () => {
onClick: () => { router.push("/settings");
router.push("/settings"); },
}, },
}, });
}); setOpen(false);
setOpen(false); },
}, });
});
const onSubmit = async (data: AnthropicSettingsFormData) => { const onSubmit = async (data: AnthropicSettingsFormData) => {
// Clear any previous validation errors // Clear any previous validation errors
setValidationError(null); setValidationError(null);
// Only validate if a new API key was entered // Only validate if a new API key was entered
if (data.apiKey) { if (data.apiKey) {
setIsValidating(true); setIsValidating(true);
const result = await validateCredentials(); const result = await validateCredentials();
setIsValidating(false); setIsValidating(false);
if (result.isError) { if (result.isError) {
setValidationError(result.error); setValidationError(result.error);
return; return;
} }
} }
const payload: { const payload: {
anthropic_api_key?: string; anthropic_api_key?: string;
} = {}; } = {};
// Only include api_key if a value was entered // Only include api_key if a value was entered
if (data.apiKey) { if (data.apiKey) {
payload.anthropic_api_key = data.apiKey; payload.anthropic_api_key = data.apiKey;
} }
// Submit the update // Submit the update
settingsMutation.mutate(payload); settingsMutation.mutate(payload);
}; };
return ( return (
<Dialog open={open} onOpenChange={setOpen}> <Dialog open={open} onOpenChange={setOpen}>
<DialogContent className="max-w-2xl"> <DialogContent className="max-w-2xl">
<FormProvider {...methods}> <FormProvider {...methods}>
<form onSubmit={handleSubmit(onSubmit)} className="grid gap-4"> <form onSubmit={handleSubmit(onSubmit)} className="grid gap-4">
<DialogHeader className="mb-2"> <DialogHeader className="mb-2">
<DialogTitle className="flex items-center gap-3"> <DialogTitle className="flex items-center gap-3">
<div className="w-8 h-8 rounded flex items-center justify-center bg-white border"> <div className="w-8 h-8 rounded flex items-center justify-center bg-white border">
<AnthropicLogo className="text-black" /> <AnthropicLogo className="text-black" />
</div> </div>
Anthropic Setup Anthropic Setup
</DialogTitle> </DialogTitle>
</DialogHeader> </DialogHeader>
<AnthropicSettingsForm <AnthropicSettingsForm
modelsError={validationError} modelsError={validationError}
isLoadingModels={isValidating} isLoadingModels={isValidating}
/> />
<AnimatePresence mode="wait"> <AnimatePresence mode="wait">
{settingsMutation.isError && ( {settingsMutation.isError && (
<motion.div <motion.div
key="error" key="error"
initial={{ opacity: 0, y: 10 }} initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -10 }} exit={{ opacity: 0, y: -10 }}
> >
<p className="rounded-lg border border-destructive p-4"> <p className="rounded-lg border border-destructive p-4">
{settingsMutation.error?.message} {settingsMutation.error?.message}
</p> </p>
</motion.div> </motion.div>
)} )}
</AnimatePresence> </AnimatePresence>
<DialogFooter className="mt-4"> <DialogFooter className="mt-4">
<Button <Button
variant="outline" variant="outline"
type="button" type="button"
onClick={() => setOpen(false)} onClick={() => setOpen(false)}
> >
Cancel Cancel
</Button> </Button>
<Button <Button
type="submit" type="submit"
disabled={settingsMutation.isPending || isValidating} disabled={settingsMutation.isPending || isValidating}
> >
{settingsMutation.isPending {settingsMutation.isPending
? "Saving..." ? "Saving..."
: isValidating : isValidating
? "Validating..." ? "Validating..."
: "Save"} : "Save"}
</Button> </Button>
</DialogFooter> </DialogFooter>
</form> </form>
</FormProvider> </FormProvider>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
); );
}; };
export default AnthropicSettingsDialog; export default AnthropicSettingsDialog;

2
frontend/app/settings/_components/ollama-settings-dialog.tsx
View file

@ -35,7 +35,7 @@ const OllamaSettingsDialog = ({
const [isValidating, setIsValidating] = useState(false); const [isValidating, setIsValidating] = useState(false);
const [validationError, setValidationError] = useState<Error | null>(null); const [validationError, setValidationError] = useState<Error | null>(null);
const router = useRouter(); const router = useRouter();
const { data: settings = {} } = useGetSettingsQuery({ const { data: settings = {} } = useGetSettingsQuery({
enabled: isAuthenticated || isNoAuthMode, enabled: isAuthenticated || isNoAuthMode,
}); });

2
frontend/app/settings/_components/openai-settings-dialog.tsx
View file

@ -32,7 +32,7 @@ const OpenAISettingsDialog = ({
const [isValidating, setIsValidating] = useState(false); const [isValidating, setIsValidating] = useState(false);
const [validationError, setValidationError] = useState<Error | null>(null); const [validationError, setValidationError] = useState<Error | null>(null);
const router = useRouter(); const router = useRouter();
const methods = useForm<OpenAISettingsFormData>({ const methods = useForm<OpenAISettingsFormData>({
mode: "onSubmit", mode: "onSubmit",
defaultValues: { defaultValues: {

4
frontend/app/settings/_components/watsonx-settings-dialog.tsx
View file

@ -32,7 +32,7 @@ const WatsonxSettingsDialog = ({
const [isValidating, setIsValidating] = useState(false); const [isValidating, setIsValidating] = useState(false);
const [validationError, setValidationError] = useState<Error | null>(null); const [validationError, setValidationError] = useState<Error | null>(null);
const router = useRouter(); const router = useRouter();
const methods = useForm<WatsonxSettingsFormData>({ const methods = useForm<WatsonxSettingsFormData>({
mode: "onSubmit", mode: "onSubmit",
defaultValues: { defaultValues: {
@ -67,7 +67,7 @@ const WatsonxSettingsDialog = ({
provider: "watsonx", provider: "watsonx",
}; };
queryClient.setQueryData(["provider", "health"], healthData); queryClient.setQueryData(["provider", "health"], healthData);
toast.message("IBM watsonx.ai successfully configured", { toast.message("IBM watsonx.ai successfully configured", {
description: description:
"You can now access the provided language and embedding models.", "You can now access the provided language and embedding models.",

11
frontend/app/settings/page.tsx
View file

@ -785,7 +785,12 @@ function KnowledgeSourcesPage() {
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3">
<div className="mb-1"> <div className="mb-1">
<div <div
className={cn("w-8 h-8 rounded flex items-center justify-center border", connector?.available ? "bg-white" : "bg-muted grayscale")} className={cn(
"w-8 h-8 rounded flex items-center justify-center border",
connector?.available
? "bg-white"
: "bg-muted grayscale",
)}
> >
{connector.icon} {connector.icon}
</div> </div>
@ -794,7 +799,9 @@ function KnowledgeSourcesPage() {
{connector.name} {connector.name}
</CardTitle> </CardTitle>
<CardDescription className="text-sm"> <CardDescription className="text-sm">
{connector?.available ? `${connector.name} is configured.` : "Not configured."} {connector?.available
? `${connector.name} is configured.`
: "Not configured."}
</CardDescription> </CardDescription>
</div> </div>
</div> </div>