214 lines
8.0 KiB
TypeScript
214 lines
8.0 KiB
TypeScript
import { Button } from "@/components/ui/button";
|
|
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
|
|
import { Switch } from "@/components/ui/switch";
|
|
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
|
|
import { getErrorMessage, setProviderFormDirtyState, useAppDispatch } from "@/lib/store";
|
|
import { useUpdateProviderMutation } from "@/lib/store/apis/providersApi";
|
|
import { ModelProvider } from "@/lib/types/config";
|
|
import { debuggingFormSchema, type DebuggingFormSchema } from "@/lib/types/schemas";
|
|
import { RbacOperation, RbacResource, useRbac } from "@enterprise/lib";
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import { Info } from "lucide-react";
|
|
import { useEffect } from "react";
|
|
import { useForm, type Resolver } from "react-hook-form";
|
|
import { toast } from "sonner";
|
|
import { buildProviderUpdatePayload } from "../views/utils";
|
|
|
|
interface DebuggingFormFragmentProps {
|
|
provider: ModelProvider;
|
|
}
|
|
|
|
export function DebuggingFormFragment({ provider }: DebuggingFormFragmentProps) {
|
|
const dispatch = useAppDispatch();
|
|
const hasUpdateProviderAccess = useRbac(RbacResource.ModelProvider, RbacOperation.Update);
|
|
const [updateProvider, { isLoading: isUpdatingProvider }] = useUpdateProviderMutation();
|
|
const form = useForm<DebuggingFormSchema, any, DebuggingFormSchema>({
|
|
resolver: zodResolver(debuggingFormSchema) as Resolver<DebuggingFormSchema, any, DebuggingFormSchema>,
|
|
mode: "onChange",
|
|
reValidateMode: "onChange",
|
|
defaultValues: {
|
|
send_back_raw_request: provider.send_back_raw_request ?? false,
|
|
send_back_raw_response: provider.send_back_raw_response ?? false,
|
|
store_raw_request_response: provider.store_raw_request_response ?? false,
|
|
},
|
|
});
|
|
const sendBackRawRequest = form.watch("send_back_raw_request");
|
|
const sendBackRawResponse = form.watch("send_back_raw_response");
|
|
const storeRawRequestResponse = form.watch("store_raw_request_response");
|
|
|
|
useEffect(() => {
|
|
dispatch(setProviderFormDirtyState(form.formState.isDirty));
|
|
}, [form.formState.isDirty, dispatch]);
|
|
|
|
useEffect(() => {
|
|
form.reset({
|
|
send_back_raw_request: provider.send_back_raw_request ?? false,
|
|
send_back_raw_response: provider.send_back_raw_response ?? false,
|
|
store_raw_request_response: provider.store_raw_request_response ?? false,
|
|
});
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [provider.name, provider.send_back_raw_request, provider.send_back_raw_response, provider.store_raw_request_response]);
|
|
|
|
const onSubmit = (data: DebuggingFormSchema) => {
|
|
const updatedProvider = buildProviderUpdatePayload(provider, {
|
|
send_back_raw_request: data.send_back_raw_request,
|
|
send_back_raw_response: data.send_back_raw_response,
|
|
store_raw_request_response: data.store_raw_request_response,
|
|
});
|
|
updateProvider(updatedProvider)
|
|
.unwrap()
|
|
.then(() => {
|
|
toast.success("Debugging configuration updated successfully");
|
|
form.reset(data);
|
|
})
|
|
.catch((err) => {
|
|
toast.error("Failed to update debugging configuration", {
|
|
description: getErrorMessage(err),
|
|
});
|
|
});
|
|
};
|
|
|
|
return (
|
|
<Form {...form}>
|
|
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6 px-6" data-testid="provider-config-debugging-content">
|
|
<div className="space-y-4">
|
|
{/* Send Back Raw Request */}
|
|
<FormField
|
|
control={form.control}
|
|
name="send_back_raw_request"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<div className="flex items-center justify-between space-x-2">
|
|
<div className="space-y-0.5">
|
|
<div className="flex items-center gap-1.5">
|
|
<FormLabel>Send Back Raw Request</FormLabel>
|
|
<TooltipProvider>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild data-testid="provider-debugging-send-back-raw-request-tooltip-trigger">
|
|
<Info className="text-muted-foreground h-3 w-3 cursor-pointer" />
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
Override per-request with header: <code>x-bf-send-back-raw-request: {String(!sendBackRawRequest)}</code>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
</div>
|
|
<p className="text-muted-foreground text-xs">
|
|
Include the raw provider request alongside the parsed request in the API response.
|
|
</p>
|
|
</div>
|
|
<FormControl>
|
|
<Switch
|
|
size="md"
|
|
checked={field.value}
|
|
disabled={!hasUpdateProviderAccess}
|
|
onCheckedChange={(checked) => {
|
|
field.onChange(checked);
|
|
form.trigger("send_back_raw_request");
|
|
}}
|
|
/>
|
|
</FormControl>
|
|
</div>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
{/* Send Back Raw Response */}
|
|
<FormField
|
|
control={form.control}
|
|
name="send_back_raw_response"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<div className="flex items-center justify-between space-x-2">
|
|
<div className="space-y-0.5">
|
|
<div className="flex items-center gap-1.5">
|
|
<FormLabel>Send Back Raw Response</FormLabel>
|
|
<TooltipProvider>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild data-testid="provider-debugging-send-back-raw-response-tooltip-trigger">
|
|
<Info className="text-muted-foreground h-3 w-3 cursor-pointer" />
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
Override per-request with header: <code>x-bf-send-back-raw-response: {String(!sendBackRawResponse)}</code>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
</div>
|
|
<p className="text-muted-foreground text-xs">
|
|
Include the raw provider response alongside the parsed response in the API response.
|
|
</p>
|
|
</div>
|
|
<FormControl>
|
|
<Switch
|
|
size="md"
|
|
checked={field.value}
|
|
disabled={!hasUpdateProviderAccess}
|
|
onCheckedChange={(checked) => {
|
|
field.onChange(checked);
|
|
form.trigger("send_back_raw_response");
|
|
}}
|
|
/>
|
|
</FormControl>
|
|
</div>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
{/* Store Raw Request/Response */}
|
|
<FormField
|
|
control={form.control}
|
|
name="store_raw_request_response"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<div className="flex items-center justify-between space-x-2">
|
|
<div className="space-y-0.5">
|
|
<div className="flex items-center gap-1.5">
|
|
<FormLabel>Store Raw Request/Response</FormLabel>
|
|
<TooltipProvider>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild data-testid="provider-debugging-store-raw-request-response-tooltip-trigger">
|
|
<Info className="text-muted-foreground h-3 w-3 cursor-pointer" />
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
Override per-request with header:{" "}
|
|
<code>x-bf-store-raw-request-response: {String(!storeRawRequestResponse)}</code>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
</div>
|
|
<p className="text-muted-foreground text-xs">Persist raw request and response payloads in log records.</p>
|
|
</div>
|
|
<FormControl>
|
|
<Switch
|
|
data-testid="provider-debugging-store-raw-request-response-switch"
|
|
size="md"
|
|
checked={field.value}
|
|
disabled={!hasUpdateProviderAccess}
|
|
onCheckedChange={(checked) => {
|
|
field.onChange(checked);
|
|
form.trigger("store_raw_request_response");
|
|
}}
|
|
/>
|
|
</FormControl>
|
|
</div>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex justify-end space-x-2 pb-6">
|
|
<Button
|
|
type="submit"
|
|
disabled={!form.formState.isDirty || !form.formState.isValid || !hasUpdateProviderAccess || isUpdatingProvider}
|
|
isLoading={isUpdatingProvider}
|
|
>
|
|
Save Debugging Configuration
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</Form>
|
|
);
|
|
} |