diff --git a/ui/litellm-dashboard/src/components/guardrails/GuardrailTestPanel.tsx b/ui/litellm-dashboard/src/components/guardrails/GuardrailTestPanel.tsx
index 473871553b1..1a1fd425cb1 100644
--- a/ui/litellm-dashboard/src/components/guardrails/GuardrailTestPanel.tsx
+++ b/ui/litellm-dashboard/src/components/guardrails/GuardrailTestPanel.tsx
@@ -2,6 +2,7 @@ import React, { useState } from "react";
import { Button } from "@tremor/react";
import { Input, Typography, Tooltip } from "antd";
import { CopyOutlined, InfoCircleOutlined } from "@ant-design/icons";
+import { useTranslation, Trans } from "react-i18next";
import NotificationsManager from "../molecules/notifications_manager";
import GuardrailTestResults from "./GuardrailTestResults";
@@ -25,11 +26,12 @@ export function GuardrailTestPanel({
errors,
onClose,
}: GuardrailTestPanelProps) {
+ const { t } = useTranslation();
const [inputText, setInputText] = useState("");
const handleSubmit = () => {
if (!inputText.trim()) {
- NotificationsManager.fromBackend("Please enter text to test");
+ NotificationsManager.fromBackend(t("guardrails.guardrailTestPanel.pleaseEnterText"));
return;
}
@@ -74,9 +76,9 @@ export function GuardrailTestPanel({
const handleCopyInput = async () => {
const success = await copyToClipboard(inputText);
if (success) {
- NotificationsManager.success("Input copied to clipboard");
+ NotificationsManager.success(t("guardrails.guardrailTestPanel.inputCopied"));
} else {
- NotificationsManager.fromBackend("Failed to copy input");
+ NotificationsManager.fromBackend(t("guardrails.guardrailTestPanel.failedToCopyInput"));
}
};
@@ -87,7 +89,7 @@ export function GuardrailTestPanel({
-
Test Guardrails:
+
{t("guardrails.guardrailTestPanel.title")}
{guardrailNames.map((name) => (
- Test {guardrailNames.length > 1 ? "guardrails" : "guardrail"} and compare results
+ {t("guardrails.guardrailTestPanel.subtitle", { count: guardrailNames.length })}
@@ -112,14 +114,16 @@ export function GuardrailTestPanel({
-
-
+
+
{inputText && (
)}
@@ -127,26 +131,31 @@ export function GuardrailTestPanel({
value={inputText}
onChange={(e) => setInputText(e.target.value)}
onKeyDown={handleKeyDown}
- placeholder="Enter text to test with guardrails..."
+ placeholder={t("guardrails.guardrailTestPanel.inputPlaceholder")}
rows={8}
className="font-mono text-sm"
/>
- Press Enter to
- submit •{" "}
- Shift+Enter for
- new line
+ ,
+ shiftEnter: ,
+ }}
+ />
+
+
+ {t("guardrails.guardrailTestPanel.characters", { count: inputText.length })}
- Characters: {inputText.length}
- Select Guardrails to Test
+ {t("guardrails.guardrailTestPlayground.emptyStateTitle")}
- Choose one or more guardrails from the left sidebar to start testing and comparing results.
+ {t("guardrails.guardrailTestPlayground.emptyStateDesc")}