From 969161501acfca278642ea645130754e66dee846 Mon Sep 17 00:00:00 2001 From: yuneng-jiang Date: Tue, 27 Oct 2026 15:54:39 -0700 Subject: [PATCH] feat(ui): add LITELLM_UI_USE_SI_TERMINOLOGY to show SI instead of AI in the Admin UI (#47440) * feat(ui): add LITELLM_UI_USE_SI_TERMINOLOGY to show SI instead of AI in the Admin UI Setting LITELLM_UI_USE_SI_TERMINOLOGY=true on the proxy makes the Admin UI say "SI" where its own copy says "AI" and "Super Intelligence" where it says "Artificial Intelligence". This covers the nav, page headings, settings text, guardrail garden blurbs, the compliance playground prompts and the playground sample prompts. Third-party product, provider and law names keep their spelling (Vertex AI, Cisco AI Defense, EU AI Act, ...), and user data such as guardrail names, gateway URLs and keys is never rewritten. The proxy exposes the flag on /.well-known/litellm-ui-config, a TerminologyProvider at the app root reads it, and components call useTerminology() on their own strings. The context defaults to a pass-through, so nothing changes when the flag is unset. * fix(ui): apply SI terminology to the command palette, page visibility groups and guardrail garden search * test(ui): cover the flag-off wording on the palette, page visibility and garden search tests * fix(ui): apply SI terminology to the Aria usage assistant copy * test(ui): keep the Aria ui-config stub within the inline object lint budget * fix(ui): keep AI wording in prompts sent to models --- .../ui_discovery_endpoints.py | 2 + .../ui_discovery_endpoints.py | 1 + .../test_ui_discovery_endpoints.py | 22 ++++++ .../agents/_components/AgentsPanel.tsx | 7 +- .../_components/EvaluationSettingsModal.tsx | 6 +- .../_components/guardrail_garden.test.tsx | 30 +++++++- .../_components/guardrail_garden.tsx | 6 +- .../_components/guardrail_garden_card.tsx | 4 +- .../_components/guardrail_garden_detail.tsx | 6 +- .../_components/MCPGatewaySessionsTab.tsx | 17 +++-- .../mcp-servers/_components/mcp_connect.tsx | 12 ++-- .../components/chat_ui/RealtimePlayground.tsx | 8 ++- .../components/complianceUI/ComplianceUI.tsx | 4 +- .../_components/ai_suggestion_modal.tsx | 4 +- .../_components/guardrail_selection_modal.tsx | 4 +- .../policies/_components/policy_templates.tsx | 4 +- .../_components/template_parameter_modal.tsx | 4 +- .../UsageViewSelect/UsageViewSelect.tsx | 4 +- .../components/overview/TopAgents.tsx | 4 +- ui/litellm-dashboard/src/app/layout.tsx | 9 ++- .../src/components/AIHub/ModelHubTable.tsx | 4 +- .../CommandPalette.integration.test.tsx | 28 ++++++++ .../CommandPalette/CommandPalette.tsx | 4 +- .../components/CommandPalette/utils.test.ts | 11 +++ .../src/components/CommandPalette/utils.ts | 7 +- .../src/components/DashboardHeader.tsx | 4 +- .../Navbar/ViewSwitcher.integration.test.tsx | 24 +++++-- .../src/components/Navbar/ViewSwitcher.tsx | 9 ++- .../PageVisibilitySettings.test.tsx | 32 ++++++++- .../UISettings/PageVisibilitySettings.tsx | 8 ++- .../AdminSettings/UISettings/UISettings.tsx | 12 +++- .../src/components/leftnav.test.tsx | 19 ++++- .../src/components/leftnav.tsx | 15 ++-- .../liteadmin/LiteAdmin.integration.test.tsx | 69 ++++++++++++++----- .../src/components/liteadmin/LiteAdmin.tsx | 7 +- .../components/model_add/CredentialsPanel.tsx | 4 +- .../components/model_add/CredentialsTable.tsx | 4 +- .../src/components/moyai/MoyaiConnected.tsx | 4 +- .../src/components/networking.tsx | 1 + .../organisms/create_key_button.tsx | 11 ++- .../shared/CreatedKeyDisplay.test.tsx | 8 +++ .../components/shared/CreatedKeyDisplay.tsx | 9 ++- .../templates/KeyEditViewControls.tsx | 51 ++++++++------ .../src/contexts/TerminologyContext.test.tsx | 37 ++++++++++ .../src/contexts/TerminologyContext.tsx | 18 +++++ .../src/data/compliancePrompts.test.ts | 33 +++++++++ .../src/data/compliancePrompts.ts | 11 ++- ui/litellm-dashboard/src/lib/http/schema.d.ts | 5 ++ .../src/lib/terminology.test.ts | 45 ++++++++++++ ui/litellm-dashboard/src/lib/terminology.ts | 28 ++++++++ 50 files changed, 567 insertions(+), 113 deletions(-) create mode 100644 ui/litellm-dashboard/src/contexts/TerminologyContext.test.tsx create mode 100644 ui/litellm-dashboard/src/contexts/TerminologyContext.tsx create mode 100644 ui/litellm-dashboard/src/data/compliancePrompts.test.ts create mode 100644 ui/litellm-dashboard/src/lib/terminology.test.ts create mode 100644 ui/litellm-dashboard/src/lib/terminology.ts diff --git a/litellm/proxy/discovery_endpoints/ui_discovery_endpoints.py b/litellm/proxy/discovery_endpoints/ui_discovery_endpoints.py index 8225984a964..792ef8a3f8c 100644 --- a/litellm/proxy/discovery_endpoints/ui_discovery_endpoints.py +++ b/litellm/proxy/discovery_endpoints/ui_discovery_endpoints.py @@ -25,6 +25,7 @@ async def get_ui_config(): or general_settings.get("auto_redirect_ui_login_to_sso", False) is True ) admin_ui_disabled: Final = os.getenv("DISABLE_ADMIN_UI", "false").lower() == "true" + use_si_terminology: Final = os.getenv("LITELLM_UI_USE_SI_TERMINOLOGY", "false").lower() == "true" hide_default_credentials_hint: Final = should_hide_default_credentials_hint(general_settings) sso_configured: Final = has_user_setup_sso() @@ -49,4 +50,5 @@ async def get_ui_config(): is_control_plane=is_control_plane, workers=proxy_config.worker_registry if is_control_plane else [], mcp_stdio_enabled=is_mcp_stdio_enabled(), + use_si_terminology=use_si_terminology, ) diff --git a/litellm/types/proxy/discovery_endpoints/ui_discovery_endpoints.py b/litellm/types/proxy/discovery_endpoints/ui_discovery_endpoints.py index e30ad26bfe5..d396c79b844 100644 --- a/litellm/types/proxy/discovery_endpoints/ui_discovery_endpoints.py +++ b/litellm/types/proxy/discovery_endpoints/ui_discovery_endpoints.py @@ -14,4 +14,5 @@ class UiDiscoveryEndpoints(LiteLLMBaseModel): hide_default_credentials_hint: bool = False is_control_plane: bool = False mcp_stdio_enabled: bool = False + use_si_terminology: bool = False workers: list[WorkerRegistryEntry] = Field(default=[]) diff --git a/tests/unit/proxy/discovery_endpoints/test_ui_discovery_endpoints.py b/tests/unit/proxy/discovery_endpoints/test_ui_discovery_endpoints.py index 1ef0eee761a..d338f38d862 100644 --- a/tests/unit/proxy/discovery_endpoints/test_ui_discovery_endpoints.py +++ b/tests/unit/proxy/discovery_endpoints/test_ui_discovery_endpoints.py @@ -501,3 +501,25 @@ def test_ui_config_tells_the_dashboard_whether_stdio_mcp_servers_are_enabled(mon assert response.status_code == 200 assert response.json()["mcp_stdio_enabled"] is expected + + +@pytest.mark.parametrize(("flag", "expected"), [(None, False), ("false", False), ("true", True), ("TRUE", True)]) +def test_ui_config_tells_the_dashboard_whether_to_use_si_terminology( + monkeypatch: pytest.MonkeyPatch, flag: str | None, expected: bool +) -> None: + if flag is None: + monkeypatch.delenv("LITELLM_UI_USE_SI_TERMINOLOGY", raising=False) + else: + monkeypatch.setenv("LITELLM_UI_USE_SI_TERMINOLOGY", flag) + app: Final[FastAPI] = FastAPI() + app.include_router(router) + + with ( + patch("litellm.proxy.utils.get_server_root_path", return_value="/"), + patch("litellm.proxy.utils.get_proxy_base_url", return_value=None), + patch("litellm.proxy.auth.auth_utils.has_user_setup_sso", return_value=False), + ): + response: Final = TestClient(app).get("/.well-known/litellm-ui-config") + + assert response.status_code == 200 + assert response.json()["use_si_terminology"] is expected diff --git a/ui/litellm-dashboard/src/app/(dashboard)/agents/_components/AgentsPanel.tsx b/ui/litellm-dashboard/src/app/(dashboard)/agents/_components/AgentsPanel.tsx index b392e270d33..3f599c38976 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/agents/_components/AgentsPanel.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/agents/_components/AgentsPanel.tsx @@ -1,3 +1,4 @@ +import { useTerminology } from "@/contexts/TerminologyContext"; import React, { useState, useEffect } from "react"; import { Info, Plus } from "lucide-react"; import { getAgentsList, deleteAgentCall } from "@/components/networking"; @@ -31,6 +32,7 @@ interface AgentsResponse { } const AgentsPanel: React.FC = ({ accessToken, userRole, teams }) => { + const term = useTerminology(); const [agentsList, setAgentsList] = useState([]); const [isAddModalVisible, setIsAddModalVisible] = useState(false); const [isLoading, setIsLoading] = useState(true); @@ -140,8 +142,9 @@ const AgentsPanel: React.FC = ({ accessToken, userRole, teams

Agents

- List of A2A-spec agents that are available to be used in your organization. Go to AI Hub, to make agents - public. + {term( + "List of A2A-spec agents that are available to be used in your organization. Go to AI Hub, to make agents public.", + )}

diff --git a/ui/litellm-dashboard/src/app/(dashboard)/guardrails-monitor/_components/EvaluationSettingsModal.tsx b/ui/litellm-dashboard/src/app/(dashboard)/guardrails-monitor/_components/EvaluationSettingsModal.tsx index 900a04e480d..78091584cde 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/guardrails-monitor/_components/EvaluationSettingsModal.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/guardrails-monitor/_components/EvaluationSettingsModal.tsx @@ -1,3 +1,4 @@ +import { useTerminology } from "@/contexts/TerminologyContext"; import { Play } from "lucide-react"; import React, { useEffect, useMemo, useState } from "react"; import { fetchAvailableModels, type ModelGroup } from "@/components/llm_calls/fetch_models"; @@ -47,6 +48,7 @@ export function EvaluationSettingsModal({ accessToken, onRunEvaluation, }: EvaluationSettingsModalProps) { + const term = useTerminology(); const [prompt, setPrompt] = useState(DEFAULT_PROMPT); const [schema, setSchema] = useState(DEFAULT_SCHEMA); const [model, setModel] = useState(null); @@ -95,8 +97,8 @@ export function EvaluationSettingsModal({ Evaluation Settings {guardrailName - ? `Configure AI evaluation for ${guardrailName}` - : "Configure AI evaluation for re-running on logs"} + ? `${term("Configure AI evaluation for")} ${guardrailName}` + : term("Configure AI evaluation for re-running on logs")} diff --git a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_garden.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_garden.test.tsx index 613fee04f68..ee214b451fa 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_garden.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_garden.test.tsx @@ -1,9 +1,16 @@ import { describe, it, expect, vi, beforeEach } from "vitest"; -import { render, screen, within } from "@testing-library/react"; +import { fireEvent, render, screen, within } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; +import { TerminologyProvider } from "@/contexts/TerminologyContext"; import GuardrailGarden from "./guardrail_garden"; import { ALL_CARDS } from "./guardrail_garden_data"; +const uiConfig = vi.hoisted(() => ({ data: undefined as { use_si_terminology?: boolean } | undefined })); + +vi.mock("@/app/(dashboard)/hooks/uiConfig/useUIConfig", () => ({ + useUIConfig: () => ({ data: uiConfig.data }), +})); + vi.mock("./guardrail_garden_detail", () => ({ __esModule: true, default: ({ card, onBack }: { card: { name: string }; onBack: () => void }) => ( @@ -21,6 +28,7 @@ const DECISION_MODEL_CARDS = ALL_CARDS.filter((c) => c.category === "decision_mo describe("GuardrailGarden", () => { beforeEach(() => { vi.clearAllMocks(); + uiConfig.data = undefined; }); const renderGarden = () => render(); @@ -114,6 +122,26 @@ describe("GuardrailGarden", () => { } }); + it.each([ + [true, "SI"], + [false, "AI"], + ])("should match the wording a card shows when SI terminology is %s", (useSi, shownTerm) => { + uiConfig.data = { use_si_terminology: useSi }; + const card = ALL_CARDS.find((c) => c.description.startsWith("AI security platform protecting")); + expect(card).toBeDefined(); + render( + + + , + ); + + fireEvent.change(screen.getByPlaceholderText("Search guardrails"), { + target: { value: `${shownTerm} security platform protecting` }, + }); + + expect(screen.getByText(card!.name)).toBeInTheDocument(); + }); + it("should show an empty result set for a query that matches nothing", async () => { const user = userEvent.setup(); renderGarden(); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_garden.tsx b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_garden.tsx index f8e1ab1ef66..d430a5a9f19 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_garden.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_garden.tsx @@ -1,3 +1,4 @@ +import { useTerminology } from "@/contexts/TerminologyContext"; import React, { useState } from "react"; import { ArrowRight, Search } from "lucide-react"; import { InputGroup, InputGroupAddon, InputGroupInput } from "@/components/ui/input-group"; @@ -11,6 +12,7 @@ interface GuardrailGardenProps { } const GuardrailGarden: React.FC = ({ accessToken, onGuardrailCreated }) => { + const term = useTerminology(); const [searchQuery, setSearchQuery] = useState(""); const [selectedCard, setSelectedCard] = useState(null); const [showAllLitellm, setShowAllLitellm] = useState(false); @@ -22,7 +24,7 @@ const GuardrailGarden: React.FC = ({ accessToken, onGuardr const q = searchQuery.toLowerCase(); return ( card.name.toLowerCase().includes(q) || - card.description.toLowerCase().includes(q) || + term(card.description).toLowerCase().includes(q) || card.tags.some((t) => t.toLowerCase().includes(q)) ); }); @@ -106,7 +108,7 @@ const GuardrailGarden: React.FC = ({ accessToken, onGuardr Partner Guardrails

- Third-party guardrail integrations from leading AI security providers. + {term("Third-party guardrail integrations from leading AI security providers.")}

{partnerCards.map((card) => ( diff --git a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_garden_card.tsx b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_garden_card.tsx index 2b7cedd6d85..8a6375d0d68 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_garden_card.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_garden_card.tsx @@ -1,9 +1,11 @@ +import { useTerminology } from "@/contexts/TerminologyContext"; import React from "react"; import { CircleCheck } from "lucide-react"; import { GuardrailCardInfo } from "./guardrail_garden_data"; import { Logo } from "@/components/molecules/logo/Logo"; const GuardrailCard: React.FC<{ card: GuardrailCardInfo; onClick: () => void }> = ({ card, onClick }) => { + const term = useTerminology(); return (
void }> {card.name}
-

{card.description}

+

{term(card.description)}

{card.eval && (
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_garden_detail.tsx b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_garden_detail.tsx index 8ac0493b012..e549ebca50a 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_garden_detail.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_garden_detail.tsx @@ -1,3 +1,4 @@ +import { useTerminology } from "@/contexts/TerminologyContext"; import React, { useState } from "react"; import { ArrowLeft } from "lucide-react"; import { Button } from "@/components/ui/button"; @@ -21,6 +22,7 @@ interface GuardrailDetailViewProps { } const GuardrailDetailView: React.FC = ({ card, onBack, accessToken, onGuardrailCreated }) => { + const term = useTerminology(); const [isAddFormVisible, setIsAddFormVisible] = useState(false); const [activeTab, setActiveTab] = useState("overview"); @@ -66,7 +68,7 @@ const GuardrailDetailView: React.FC = ({ card, onBack,

{card.name}

-

{card.description}

+

{term(card.description)}

{/* Action buttons — outlined style like Vertex */}
@@ -101,7 +103,7 @@ const GuardrailDetailView: React.FC = ({ card, onBack, {/* Left column — overview + details table */}

Overview

-

{card.description}

+

{term(card.description)}

Guardrail Details

Details are as follows

diff --git a/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPGatewaySessionsTab.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPGatewaySessionsTab.tsx index 04a095f8792..46c1d2c6848 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPGatewaySessionsTab.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPGatewaySessionsTab.tsx @@ -1,5 +1,6 @@ "use client"; +import { useTerminology } from "@/contexts/TerminologyContext"; import React, { useState } from "react"; import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; import { RefreshCw, Unplug } from "lucide-react"; @@ -132,6 +133,7 @@ function SessionsBody({ isLoading: boolean; onDisconnect: ((selector: MCPGatewaySessionSelector) => void) | null; }) { + const term = useTerminology(); if (isLoading) { return (

- No live MCP connections on this worker (pid {data.worker_pid}). Connect an AI client to the gateway to see it - here. + No live MCP connections on this worker (pid {data.worker_pid}).{" "} + {term("Connect an AI client to the gateway to see it here.")}

); @@ -166,11 +168,11 @@ function SessionsBody({ <>
- +
- + (null); const queryOptions = { @@ -282,9 +285,9 @@ export function MCPGatewaySessionsTab({ accessToken, canTerminate }: MCPGatewayS

Live Connections

- Stateful Streamable HTTP sessions currently open on this proxy worker, grouped by the AI client that sent - the MCP initialize request and by the authenticated LiteLLM user. Stateless requests and SSE connections are - not counted. + {term( + "Stateful Streamable HTTP sessions currently open on this proxy worker, grouped by the AI client that sent the MCP initialize request and by the authenticated LiteLLM user. Stateless requests and SSE connections are not counted.", + )}

- Use tools directly from Cursor IDE with LiteLLM MCP. Enable your AI assistant to perform real-world tasks - without leaving your coding environment. + {term( + "Use tools directly from Cursor IDE with LiteLLM MCP. Enable your AI assistant to perform real-world tasks without leaving your coding environment.", + )}
@@ -475,8 +478,9 @@ const MCPConnect: React.FC = ({ currentServerAccessGroups = []

Connect to your MCP client

- Use tools directly from any MCP client with LiteLLM MCP. Enable your AI assistant to perform real-world - tasks through a simple, secure connection. + {term( + "Use tools directly from any MCP client with LiteLLM MCP. Enable your AI assistant to perform real-world tasks through a simple, secure connection.", + )}

diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/RealtimePlayground.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/RealtimePlayground.tsx index 8acc54bee8d..01151203e65 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/RealtimePlayground.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/RealtimePlayground.tsx @@ -1,5 +1,6 @@ "use client"; +import { useTerminology } from "@/contexts/TerminologyContext"; import { CircleX, Mic, MicOff, Send, Volume2 } from "lucide-react"; import React, { useCallback, useEffect, useRef, useState } from "react"; import { Button } from "@/components/ui/button"; @@ -27,6 +28,7 @@ const RealtimePlayground: React.FC = ({ customProxyBaseUrl, selectedGuardrails, }) => { + const term = useTerminology(); const [messages, setMessages] = useState([]); const [inputText, setInputText] = useState(""); const [isConnected, setIsConnected] = useState(false); @@ -408,8 +410,8 @@ const RealtimePlayground: React.FC = ({ Realtime Voice Playground

- Click Connect to start a realtime session. You can speak using your microphone or type messages. - The AI will respond with voice and text. + Click Connect to start a realtime session. You can speak using your microphone or type messages.{" "} + {term("The AI will respond with voice and text.")}

)} @@ -428,7 +430,7 @@ const RealtimePlayground: React.FC = ({ : "bg-muted text-foreground rounded-bl-md" }`} > -
{msg.role === "user" ? "You" : "AI"}
+
{msg.role === "user" ? "You" : term("AI")}
{msg.content}
)} diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/complianceUI/ComplianceUI.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/complianceUI/ComplianceUI.tsx index 54ea3702cb4..db576ed03a5 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/complianceUI/ComplianceUI.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/complianceUI/ComplianceUI.tsx @@ -7,6 +7,7 @@ import { type CompliancePrompt, } from "@/data/compliancePrompts"; import useCan from "@/app/(dashboard)/hooks/useCan"; +import { useTerminology } from "@/contexts/TerminologyContext"; import { getGuardrailsList, testPoliciesAndGuardrails } from "@/components/networking"; import PolicySelector, { getPolicyOptionEntries } from "@/components/policies/PolicySelector"; import { Policy } from "@/components/policies/types"; @@ -131,7 +132,8 @@ export default function ComplianceUI({ proxySettings, }: ComplianceUIProps) { const canViewPolicies = useCan("viewPolicies"); - const frameworks = getFrameworks(); + const term = useTerminology(); + const frameworks = getFrameworks(term); const [policyValueToLabel, setPolicyValueToLabel] = useState>(new Map()); const [guardrailOptions, setGuardrailOptions] = useState([]); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/ai_suggestion_modal.tsx b/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/ai_suggestion_modal.tsx index c4f76b07a4e..50ffb89ae83 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/ai_suggestion_modal.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/ai_suggestion_modal.tsx @@ -1,3 +1,4 @@ +import { useTerminology } from "@/contexts/TerminologyContext"; import React, { useEffect, useMemo, useState } from "react"; import { Button } from "@/components/ui/button"; import { Card, CardContent } from "@/components/ui/card"; @@ -62,6 +63,7 @@ const AiSuggestionModal: React.FC = ({ accessToken, allTemplates, }) => { + const term = useTerminology(); const [attackExamples, setAttackExamples] = useState([""]); const [description, setDescription] = useState(""); const [isLoading, setIsLoading] = useState(false); @@ -815,7 +817,7 @@ const AiSuggestionModal: React.FC = ({ {/* Header */}
- AI Policy Suggestion + {term("AI Policy Suggestion")}

{showResults ? `${suggestions?.length || 0} template${(suggestions?.length || 0) !== 1 ? "s" : ""} matched your requirements` diff --git a/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/guardrail_selection_modal.tsx b/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/guardrail_selection_modal.tsx index c4a45d88d1f..25a4b89ed2a 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/guardrail_selection_modal.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/guardrail_selection_modal.tsx @@ -1,3 +1,4 @@ +import { useTerminology } from "@/contexts/TerminologyContext"; import React, { useState, useEffect } from "react"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; @@ -40,6 +41,7 @@ const GuardrailSelectionModal: React.FC = ({ isLoading = false, progressInfo, }) => { + const term = useTerminology(); const [selectedGuardrails, setSelectedGuardrails] = useState>(new Set()); // Prepare guardrail info with existence status @@ -199,7 +201,7 @@ const GuardrailSelectionModal: React.FC = ({

✨ - AI-Discovered Competitors ({template.discoveredCompetitors.length}) + {term("AI-Discovered Competitors")} ({template.discoveredCompetitors.length})
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/policy_templates.tsx b/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/policy_templates.tsx index 46dda1dd11c..0db1f74f540 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/policy_templates.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/policy_templates.tsx @@ -1,3 +1,4 @@ +import { useTerminology } from "@/contexts/TerminologyContext"; import React, { useState, useEffect, useMemo } from "react"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; @@ -106,6 +107,7 @@ const PolicyTemplates: React.FC = ({ onTemplatesLoaded, accessToken, }) => { + const term = useTerminology(); const [templates, setTemplates] = useState([]); const [isLoading, setIsLoading] = useState(false); const [selectedTags, setSelectedTags] = useState>(new Set()); @@ -191,7 +193,7 @@ const PolicyTemplates: React.FC = ({ - Use AI to find templates + {term("Use AI to find templates")}
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/template_parameter_modal.tsx b/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/template_parameter_modal.tsx index b90379b149d..6aa26088756 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/template_parameter_modal.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/template_parameter_modal.tsx @@ -1,3 +1,4 @@ +import { useTerminology } from "@/contexts/TerminologyContext"; import React, { useState, useEffect } from "react"; import { Button } from "@/components/ui/button"; import { Badge } from "@/components/ui/badge"; @@ -44,6 +45,7 @@ const TemplateParameterModal: React.FC = ({ isLoading = false, accessToken, }) => { + const term = useTerminology(); const [parameterValues, setParameterValues] = useState>({}); const [competitorMode, setCompetitorMode] = useState<"ai" | "manual">("ai"); const [selectedModel, setSelectedModel] = useState(null); @@ -260,7 +262,7 @@ const TemplateParameterModal: React.FC = ({ className="grid-cols-2" >