scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-10-10 03:28:53 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 84

feat(ui): support preset prop in AddGuardrailForm for garden pre-fill

Browse source
This commit is contained in:
Ishaan Jaffer 2026-02-20 19:40:05 -08:00
parent ec5a55dbca
commit 67ac3675e1
1 changed files with 64 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
ui/litellm-dashboard/src/components/guardrails/add_guardrail_form.tsx
View file

@ -33,11 +33,20 @@ const modeDescriptions = {
during_mcp_call: "During MCP Tool Call - Runs in parallel with MCP tool execution for monitoring",
};
interface GuardrailPreset {
provider: string;
categoryName?: string;
guardrailNameSuggestion: string;
mode: string;
defaultOn: boolean;
}
interface AddGuardrailFormProps {
visible: boolean;
onClose: () => void;
accessToken: string | null;
onSuccess: () => void;
preset?: GuardrailPreset;
}
interface GuardrailSettings {
@ -90,7 +99,7 @@ interface ProviderParamsResponse {
[provider: string]: { [key: string]: ProviderParam };
}
const AddGuardrailForm: React.FC<AddGuardrailFormProps> = ({ visible, onClose, accessToken, onSuccess }) => {
const AddGuardrailForm: React.FC<AddGuardrailFormProps> = ({ visible, onClose, accessToken, onSuccess, preset }) => {
const [form] = Form.useForm();
const [loading, setLoading] = useState(false);
const [selectedProvider, setSelectedProvider] = useState<string | null>(null);
@ -154,6 +163,36 @@ const AddGuardrailForm: React.FC<AddGuardrailFormProps> = ({ visible, onClose, a
fetchData();
}, [accessToken]);
// Apply preset when settings are loaded and form becomes visible
useEffect(() => {
if (!preset || !visible || !guardrailSettings) return;
// Set provider
setSelectedProvider(preset.provider);
form.setFieldsValue({
provider: preset.provider,
guardrail_name: preset.guardrailNameSuggestion,
mode: preset.mode,
default_on: preset.defaultOn,
});
// Pre-select content category if specified
if (preset.categoryName && guardrailSettings.content_filter_settings?.content_categories) {
const category = guardrailSettings.content_filter_settings.content_categories.find(
(c: any) => c.name === preset.categoryName
);
if (category) {
setSelectedContentCategories([{
id: `category-${Date.now()}`,
category: category.name,
display_name: category.display_name,
action: category.default_action as "BLOCK" | "MASK",
severity_threshold: "medium",
}]);
}
}
}, [preset, visible, guardrailSettings]);
const handleProviderChange = (value: string) => {
setSelectedProvider(value);
// Reset form fields that are provider-specific
@ -860,6 +899,30 @@ const AddGuardrailForm: React.FC<AddGuardrailFormProps> = ({ visible, onClose, a
);
};
const getStepConfigs = () => {
const isContentFilter = shouldRenderContentFilterConfigSettings(selectedProvider);
const isPII = shouldRenderPIIConfigSettings(selectedProvider);
const steps = [
{ title: "Guardrail details", optional: false },
{
title: isPII
? "PII Configuration"
: isContentFilter
? "Denied topics"
: "Provider Configuration",
optional: true,
},
];
if (isContentFilter) {
steps.push({ title: "Patterns", optional: true });
steps.push({ title: "Word filters", optional: true });
}
return steps;
};
const stepConfigs = getStepConfigs();
return (