From 021c3bbb94e41882cdbda144dea9ad4b9549d13e Mon Sep 17 00:00:00 2001
From: Junyan Qin <rockchinq@gmail.com>
Date: Fri, 7 Nov 2025 18:48:49 +0800
Subject: [PATCH] perf: show help link in api key mgm dialog

---
 .../ApiKeyManagementDialog.tsx                | 28 ++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/web/src/app/home/components/api-key-management-dialog/ApiKeyManagementDialog.tsx b/web/src/app/home/components/api-key-management-dialog/ApiKeyManagementDialog.tsx
index e3db9cd9..35a3781b 100644
--- a/web/src/app/home/components/api-key-management-dialog/ApiKeyManagementDialog.tsx
+++ b/web/src/app/home/components/api-key-management-dialog/ApiKeyManagementDialog.tsx
@@ -36,6 +36,7 @@ import {
 } from '@/components/ui/alert-dialog';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { backendClient } from '@/app/infra/http';
+import { extractI18nObject } from '@/i18n/I18nProvider';
 
 interface ApiKey {
   id: number;
@@ -155,7 +156,32 @@ export default function ApiKeyManagementDialog({
         <DialogContent className="sm:max-w-[700px]">
           <DialogHeader>
             <DialogTitle>{t('common.manageApiKeys')}</DialogTitle>
-            <DialogDescription>{t('common.apiKeyHint')}</DialogDescription>
+            <DialogDescription>
+              <span className="cursor-pointer flex items-center gap-1">
+                {t('common.apiKeyHint')}
+                <div
+                  onClick={() => {
+                    window.open(
+                      extractI18nObject({
+                        zh_Hans: 'https://docs.langbot.app/zh/tags/readme',
+                        en_US: 'https://docs.langbot.app/en/tags/readme',
+                      }),
+                      '_blank',
+                    );
+                  }}
+                  className="cursor-pointer"
+                >
+                  <svg
+                    className="w-[1rem] h-[1rem]"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    fill="currentColor"
+                  >
+                    <path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 15H13V17H11V15ZM13 13.3551V14H11V12.5C11 11.9477 11.4477 11.5 12 11.5C12.8284 11.5 13.5 10.8284 13.5 10C13.5 9.17157 12.8284 8.5 12 8.5C11.2723 8.5 10.6656 9.01823 10.5288 9.70577L8.56731 9.31346C8.88637 7.70919 10.302 6.5 12 6.5C13.933 6.5 15.5 8.067 15.5 10C15.5 11.5855 14.4457 12.9248 13 13.3551Z"></path>
+                  </svg>
+                </div>
+              </span>
+            </DialogDescription>
           </DialogHeader>
 
           <div className="space-y-4">