From 768e1b9da38b4d3202844b1960e4951d0aaa9fcd Mon Sep 17 00:00:00 2001
From: AkaraChen <akarachen@outlook.com>
Date: Tue, 7 Jan 2025 16:43:36 +0800
Subject: [PATCH] fix: wrong tooltip content for switch plugin version

---
 web/app/components/base/tooltip/content.tsx   | 22 +++++++++++++++++++
 .../components/agent-strategy-selector.tsx    |  6 ++++-
 .../components/switch-plugin-version.tsx      |  3 ++-
 web/app/dev-preview/page.tsx                  |  7 +++++-
 web/i18n/en-US/workflow.ts                    |  1 -
 web/i18n/zh-Hans/workflow.ts                  |  1 -
 6 files changed, 35 insertions(+), 5 deletions(-)
 create mode 100644 web/app/components/base/tooltip/content.tsx

diff --git a/web/app/components/base/tooltip/content.tsx b/web/app/components/base/tooltip/content.tsx
new file mode 100644
index 0000000000..fe357ccfa6
--- /dev/null
+++ b/web/app/components/base/tooltip/content.tsx
@@ -0,0 +1,22 @@
+import type { FC, PropsWithChildren, ReactNode } from 'react'
+
+export type ToolTipContentProps = {
+  title?: ReactNode
+  action?: ReactNode
+} & PropsWithChildren
+
+export const ToolTipContent: FC<ToolTipContentProps> = ({
+  title,
+  action,
+  children,
+}) => {
+  return (
+    <div className='w-[180px]'>
+      {title && (
+        <div className='mb-1.5 text-text-secondary font-semibold'>{title}</div>
+      )}
+      <div className='mb-1.5 text-text-tertiary'>{children}</div>
+      {action && <div className='text-text-accent cursor-pointer'>{action}</div>}
+    </div>
+  )
+}
diff --git a/web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx b/web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx
index c5862dab02..db684ea2df 100644
--- a/web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx
+++ b/web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx
@@ -20,6 +20,7 @@ import { useStrategyInfo } from '../../agent/use-config'
 import { SwitchPluginVersion } from './switch-plugin-version'
 import PluginList from '@/app/components/workflow/block-selector/market-place-plugin/list'
 import { useMarketplacePlugins } from '@/app/components/plugins/marketplace/hooks'
+import { ToolTipContent } from '@/app/components/base/tooltip/content'
 
 const NotFoundWarn = (props: {
   title: ReactNode,
@@ -178,7 +179,10 @@ export const AgentStrategySelector = memo((props: AgentStrategySelectorProps) =>
           }
           {showSwitchVersion && <SwitchPluginVersion
             uniqueIdentifier={'langgenius/openai:12'}
-            tooltip={t('workflow.nodes.agent.switchToNewVersion')}
+            tooltip={<ToolTipContent
+              title={t('workflow.nodes.agent.unsupportedStrategy')}>
+              {t('workflow.nodes.agent.strategyNotFoundDescAndSwitchVersion')}
+            </ToolTipContent>}
             onChange={() => {
               // TODO: refresh all strategies
             }}
diff --git a/web/app/components/workflow/nodes/_base/components/switch-plugin-version.tsx b/web/app/components/workflow/nodes/_base/components/switch-plugin-version.tsx
index ad7414ca0c..e459a4b49e 100644
--- a/web/app/components/workflow/nodes/_base/components/switch-plugin-version.tsx
+++ b/web/app/components/workflow/nodes/_base/components/switch-plugin-version.tsx
@@ -4,6 +4,7 @@ import Badge from '@/app/components/base/badge'
 import Tooltip from '@/app/components/base/tooltip'
 import PluginVersionPicker from '@/app/components/plugins/update-plugin/plugin-version-picker'
 import { RiArrowLeftRightLine } from '@remixicon/react'
+import type { ReactNode } from 'react'
 import { type FC, useCallback, useState } from 'react'
 import cn from '@/utils/classnames'
 import UpdateFromMarketplace from '@/app/components/plugins/update-plugin/from-market-place'
@@ -12,7 +13,7 @@ import { useCheckInstalled } from '@/service/use-plugins'
 
 export type SwitchPluginVersionProps = {
   uniqueIdentifier: string
-  tooltip?: string
+  tooltip?: ReactNode
   onChange?: (version: string) => void
 }
 
diff --git a/web/app/dev-preview/page.tsx b/web/app/dev-preview/page.tsx
index 49afe537cd..24631aa28e 100644
--- a/web/app/dev-preview/page.tsx
+++ b/web/app/dev-preview/page.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import { ToolTipContent } from '../components/base/tooltip/content'
 import { SwitchPluginVersion } from '../components/workflow/nodes/_base/components/switch-plugin-version'
 import { useTranslation } from 'react-i18next'
 
@@ -8,7 +9,11 @@ export default function Page() {
   return <div className="p-20">
     <SwitchPluginVersion
       uniqueIdentifier={'langgenius/openai:12'}
-      tooltip={t('workflow.nodes.agent.switchToNewVersion')}
+      tooltip={<ToolTipContent
+        title={t('workflow.nodes.agent.unsupportedStrategy')}
+      >
+        {t('workflow.nodes.agent.strategyNotFoundDescAndSwitchVersion')}
+      </ToolTipContent>}
     />
   </div>
 }
diff --git a/web/i18n/en-US/workflow.ts b/web/i18n/en-US/workflow.ts
index 858f69db94..a9b0fe5587 100644
--- a/web/i18n/en-US/workflow.ts
+++ b/web/i18n/en-US/workflow.ts
@@ -755,7 +755,6 @@ const translation = {
     checkList: {
       strategyNotSelected: 'Strategy not selected',
     },
-    switchToNewVersion: 'Switch to new version',
   },
   tracing: {
     stopBy: 'Stop by {{user}}',
diff --git a/web/i18n/zh-Hans/workflow.ts b/web/i18n/zh-Hans/workflow.ts
index b90fec2371..11996ae982 100644
--- a/web/i18n/zh-Hans/workflow.ts
+++ b/web/i18n/zh-Hans/workflow.ts
@@ -754,7 +754,6 @@ const translation = {
       checkList: {
         strategyNotSelected: '未选择策略',
       },
-      switchToNewVersion: '切换到新版',
     },
   },
   tracing: {