From f0e48859268120efb811d2232e40bbeb78f0cf62 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Fri, 15 Nov 2024 16:21:51 +0800
Subject: [PATCH] tooltip of endpoints

---
 .../plugin-detail-panel/endpoint-list.tsx     | 26 +++++++++++++++++--
 web/i18n/en-US/plugin.ts                      |  2 ++
 web/i18n/zh-Hans/plugin.ts                    | 16 +++++++-----
 3 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx b/web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx
index b5f5d2768e..0dfc65404f 100644
--- a/web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx
@@ -1,7 +1,11 @@
 import React, { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useBoolean } from 'ahooks'
-import { RiAddLine } from '@remixicon/react'
+import {
+  RiAddLine,
+  RiApps2AddLine,
+  RiBookOpenLine,
+} from '@remixicon/react'
 import EndpointModal from './endpoint-modal'
 import EndpointCard from './endpoint-card'
 import { NAME_FIELD } from './utils'
@@ -61,8 +65,26 @@ const EndpointList = ({ showTopBorder }: Props) => {
         <div className='flex items-center gap-0.5'>
           {t('plugin.detailPanel.endpoints')}
           <Tooltip
+            needsDelay
+            popupClassName='w-[240px] p-4 rounded-xl bg-components-panel-bg-blur border-[0.5px] border-components-panel-border'
             popupContent={
-              <div className='w-[180px]'>TODO</div>
+              <div className='flex flex-col gap-2'>
+                <div className='w-8 h-8 flex items-center justify-center bg-background-default-subtle rounded-lg border-[0.5px] border-components-panel-border-subtle'>
+                  <RiApps2AddLine className='w-4 h-4 text-text-tertiary' />
+                </div>
+                <div className='text-text-tertiary system-xs-regular'>{t('plugin.detailPanel.endpointsTip')}</div>
+                {/* TODO  endpoints doc link */}
+                <a
+                  href=''
+                  target='_blank'
+                  rel='noopener noreferrer'
+                >
+                  <div className='inline-flex items-center gap-1 text-text-accent system-xs-regular cursor-pointer'>
+                    <RiBookOpenLine className='w-3 h-3' />
+                    {t('plugin.detailPanel.endpointsDocLink')}
+                  </div>
+                </a>
+              </div>
             }
           />
         </div>
diff --git a/web/i18n/en-US/plugin.ts b/web/i18n/en-US/plugin.ts
index 16389b2129..e2f3ae7cf5 100644
--- a/web/i18n/en-US/plugin.ts
+++ b/web/i18n/en-US/plugin.ts
@@ -50,6 +50,8 @@ const translation = {
     },
     actionNum: '{{num}} ACTIONS INCLUDED',
     endpoints: 'Endpoints',
+    endpointsTip: 'This plugin provides specific functionalities via endpoints, and you can configure multiple endpoint sets for current workspace.',
+    endpointsDocLink: 'View the document',
     endpointsEmpty: 'Click the \'+\' button to add an endpoint',
     endpointDisableTip: 'Disable Endpoint',
     endpointDisableContent: 'Would you like to disable {{name}}? ',
diff --git a/web/i18n/zh-Hans/plugin.ts b/web/i18n/zh-Hans/plugin.ts
index f4b1aeb53b..c537656e54 100644
--- a/web/i18n/zh-Hans/plugin.ts
+++ b/web/i18n/zh-Hans/plugin.ts
@@ -49,14 +49,16 @@ const translation = {
       remove: '移除',
     },
     actionNum: '{{num}} ACTIONS 已包含',
-    endpoints: 'Endpoints',
-    endpointsEmpty: '点击 \'+\' 按钮添加 Endpoint',
-    endpointDisableTip: '停用 Endpoint',
-    endpointDisableContent: '是否要停用 {{name}} 的 Endpoint ？',
-    endpointDeleteTip: '移除 Endpoint',
+    endpoints: 'API 端点',
+    endpointsTip: '此插件通过 API 端点提供特定功能，您可以为当前工作区配置多个 API 端点集。',
+    endpointsDocLink: '查看文档',
+    endpointsEmpty: '点击 \'+\' 按钮添加 API 端点',
+    endpointDisableTip: '停用 API 端点',
+    endpointDisableContent: '是否要停用 {{name}} 的 API 端点 ？',
+    endpointDeleteTip: '移除 API 端点',
     endpointDeleteContent: '是否要移除 {{name}} ？',
-    endpointModalTitle: '设置 Endpoint',
-    endpointModalDesc: '配置表单后，工作区内的所有成员都可以在编排应用时使用此端点。',
+    endpointModalTitle: '设置 API 端点',
+    endpointModalDesc: '配置表单后，工作区内的所有成员都可以在编排应用时使用此 API 端点。',
     serviceOk: '服务正常',
     disabled: '停用',
     modelNum: '{{num}} 模型已包含',