From cb21813d80d1d7b532c4e923be6a3282aecdbf28 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B9=E9=9B=AA?= <2b@yorha.xyz>
Date: Wed, 10 Jun 2026 12:25:12 +0900
Subject: [PATCH] feat(ui): i18n for help link component

---
 .../src/components/HelpLink.tsx               | 27 +++++++++----------
 ui/litellm-dashboard/src/locales/en.json      |  6 +++++
 ui/litellm-dashboard/src/locales/zh-CN.json   |  6 +++++
 3 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/HelpLink.tsx b/ui/litellm-dashboard/src/components/HelpLink.tsx
index 0058e5ae3d7..30fd72d234e 100644
--- a/ui/litellm-dashboard/src/components/HelpLink.tsx
+++ b/ui/litellm-dashboard/src/components/HelpLink.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useRef, useEffect } from "react";
+import { useTranslation } from "react-i18next";
 import { ExternalLink, ChevronDown } from "lucide-react";
 
 interface HelpLinkProps {
@@ -40,12 +41,8 @@ interface DocsMenuProps {
  *   Custom Pricing Documentation
  * </HelpLink>
  */
-export const HelpLink: React.FC<HelpLinkProps> = ({
-  href,
-  children = "Learn more",
-  variant = "inline",
-  className = "",
-}) => {
+export const HelpLink: React.FC<HelpLinkProps> = ({ href, children, variant = "inline", className = "" }) => {
+  const { t } = useTranslation();
   const baseClasses =
     "inline-flex items-center gap-1.5 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 rounded";
 
@@ -62,11 +59,11 @@ export const HelpLink: React.FC<HelpLinkProps> = ({
       target="_blank"
       rel="noopener noreferrer"
       className={`${baseClasses} ${variantClasses[variant]} ${className}`}
-      title="Open documentation in a new tab"
+      title={t("helpLink.openDocsTitle")}
     >
-      <span>{children}</span>
+      <span>{children ?? t("common.learnMore")}</span>
       <ExternalLink className="h-3.5 w-3.5 flex-shrink-0" aria-hidden="true" />
-      <span className="sr-only">(opens in a new tab)</span>
+      <span className="sr-only">{t("helpLink.opensInNewTab")}</span>
     </a>
   );
 };
@@ -81,7 +78,8 @@ interface HelpIconProps {
   learnMoreText?: string;
 }
 
-export const HelpIcon: React.FC<HelpIconProps> = ({ content, learnMoreHref, learnMoreText = "Learn more" }) => {
+export const HelpIcon: React.FC<HelpIconProps> = ({ content, learnMoreHref, learnMoreText }) => {
+  const { t } = useTranslation();
   const [showTooltip, setShowTooltip] = React.useState(false);
 
   return (
@@ -93,7 +91,7 @@ export const HelpIcon: React.FC<HelpIconProps> = ({ content, learnMoreHref, lear
         onMouseLeave={() => setShowTooltip(false)}
         onFocus={() => setShowTooltip(true)}
         onBlur={() => setShowTooltip(false)}
-        aria-label="Help information"
+        aria-label={t("helpLink.helpIconAriaLabel")}
       >
         <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
           <circle cx="12" cy="12" r="10" strokeWidth="1.5" />
@@ -114,7 +112,7 @@ export const HelpIcon: React.FC<HelpIconProps> = ({ content, learnMoreHref, lear
               className="inline-flex items-center gap-1 text-blue-300 hover:text-blue-200 font-medium"
               style={{ pointerEvents: "auto" }}
             >
-              {learnMoreText}
+              {learnMoreText ?? t("common.learnMore")}
               <ExternalLink className="h-3 w-3" aria-hidden="true" />
             </a>
           )}
@@ -144,7 +142,8 @@ export const HelpIcon: React.FC<HelpIconProps> = ({ content, learnMoreHref, lear
  *   Docs
  * </DocsMenu>
  */
-export const DocsMenu: React.FC<DocsMenuProps> = ({ items, children = "Docs", className = "" }) => {
+export const DocsMenu: React.FC<DocsMenuProps> = ({ items, children, className = "" }) => {
+  const { t } = useTranslation();
   const [isOpen, setIsOpen] = useState(false);
   const menuRef = useRef<HTMLDivElement>(null);
 
@@ -173,7 +172,7 @@ export const DocsMenu: React.FC<DocsMenuProps> = ({ items, children = "Docs", cl
         aria-expanded={isOpen}
         aria-haspopup="true"
       >
-        <span>{children}</span>
+        <span>{children ?? t("helpLink.docsMenuLabel")}</span>
         <ChevronDown className={`h-3 w-3 transition-transform ${isOpen ? "rotate-180" : ""}`} aria-hidden="true" />
       </button>
 
diff --git a/ui/litellm-dashboard/src/locales/en.json b/ui/litellm-dashboard/src/locales/en.json
index 44817610aee..e537fa4f64a 100644
--- a/ui/litellm-dashboard/src/locales/en.json
+++ b/ui/litellm-dashboard/src/locales/en.json
@@ -565,6 +565,12 @@
     "cardSubtitle": "Global and team-specific guardrails applied to this team",
     "inlineTitle": "Guardrails Settings"
   },
+  "helpLink": {
+    "openDocsTitle": "Open documentation in a new tab",
+    "opensInNewTab": "(opens in a new tab)",
+    "helpIconAriaLabel": "Help information",
+    "docsMenuLabel": "Docs"
+  },
   "common": {
     "save": "Save",
     "cancel": "Cancel",
diff --git a/ui/litellm-dashboard/src/locales/zh-CN.json b/ui/litellm-dashboard/src/locales/zh-CN.json
index 03adf7e0839..59de5513a5c 100644
--- a/ui/litellm-dashboard/src/locales/zh-CN.json
+++ b/ui/litellm-dashboard/src/locales/zh-CN.json
@@ -565,6 +565,12 @@
     "cardSubtitle": "应用于此团队的全局和团队专属护栏",
     "inlineTitle": "护栏设置"
   },
+  "helpLink": {
+    "openDocsTitle": "在新标签页中打开文档",
+    "opensInNewTab": "（在新标签页中打开）",
+    "helpIconAriaLabel": "帮助信息",
+    "docsMenuLabel": "文档"
+  },
   "common": {
     "save": "保存",
     "cancel": "取消",