From 15f3e46c491aae24c30c2dd6e87b2bae14e1cf4e Mon Sep 17 00:00:00 2001
From: AkaraChen <akarachen@outlook.com>
Date: Tue, 7 Jan 2025 09:30:35 +0800
Subject: [PATCH] refactor: some field name in strategy status

---
 web/app/components/base/badge.tsx             |  5 +-
 .../components/agent-strategy-selector.tsx    | 17 ++--
 .../components/switch-plugin-version.tsx      | 80 +++++++++++++++++++
 .../components/workflow/nodes/agent/node.tsx  |  4 +-
 .../workflow/nodes/agent/use-config.ts        |  4 +-
 web/app/dev-preview/page.tsx                  | 16 ++++
 6 files changed, 115 insertions(+), 11 deletions(-)
 create mode 100644 web/app/components/workflow/nodes/_base/components/switch-plugin-version.tsx
 create mode 100644 web/app/dev-preview/page.tsx

diff --git a/web/app/components/base/badge.tsx b/web/app/components/base/badge.tsx
index 0214d46968..78b9a76326 100644
--- a/web/app/components/base/badge.tsx
+++ b/web/app/components/base/badge.tsx
@@ -1,10 +1,11 @@
+import type { ReactNode } from 'react'
 import { memo } from 'react'
 import cn from '@/utils/classnames'
 
 type BadgeProps = {
   className?: string
-  text?: string
-  children?: React.ReactNode
+  text?: ReactNode
+  children?: ReactNode
   uppercase?: boolean
   hasRedCornerMark?: boolean
 }
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 3cd88f7329..5eedac69d4 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
@@ -18,6 +18,7 @@ import type { ToolWithProvider } from '../../../types'
 import { CollectionType } from '@/app/components/tools/types'
 import useGetIcon from '@/app/components/plugins/install-plugin/base/use-get-icon'
 import { useStrategyInfo } from '../../agent/use-config'
+import { SwitchPluginVersion } from './switch-plugin-version'
 
 const NotFoundWarn = (props: {
   title: ReactNode,
@@ -100,17 +101,18 @@ export const AgentStrategySelector = memo((props: AgentStrategySelectorProps) =>
     value?.agent_strategy_provider_name,
     value?.agent_strategy_name,
   )
+
   const showPluginNotInstalledWarn = strategyStatus?.plugin?.source === 'external'
     && !strategyStatus.plugin.installed
 
   const showUnsupportedStrategy = strategyStatus?.plugin.source === 'external'
-    && strategyStatus.strategy === 'not-found'
+    && !strategyStatus?.isExistInPlugin
 
-  const showSwitchVersion = strategyStatus?.strategy === 'not-found'
-    && strategyStatus.plugin.source === 'marketplace' && strategyStatus.plugin.installed
+  const showSwitchVersion = !strategyStatus?.isExistInPlugin
+    && strategyStatus?.plugin.source === 'marketplace' && strategyStatus.plugin.installed
 
-  const showInstallButton = strategyStatus?.strategy === 'not-found'
-    && strategyStatus.plugin.source === 'marketplace' && !strategyStatus.plugin.installed
+  const showInstallButton = !strategyStatus?.isExistInPlugin
+    && strategyStatus?.plugin.source === 'marketplace' && !strategyStatus.plugin.installed
 
   const icon = list?.find(
     coll => coll.tools?.find(tool => tool.name === value?.agent_strategy_name),
@@ -154,6 +156,11 @@ export const AgentStrategySelector = memo((props: AgentStrategySelectorProps) =>
               />
               : <RiArrowDownSLine className='size-4 text-text-tertiary' />
           }
+          {showSwitchVersion && <SwitchPluginVersion
+            uniqueIdentifier={'langgenius/openai:12'}
+            onSelect={console.error}
+            version={''}
+          />}
         </div>}
       </div>
     </PortalToFollowElemTrigger>
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
new file mode 100644
index 0000000000..fc310676fe
--- /dev/null
+++ b/web/app/components/workflow/nodes/_base/components/switch-plugin-version.tsx
@@ -0,0 +1,80 @@
+'use client'
+
+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 FC, useCallback, useState } from 'react'
+import cn from '@/utils/classnames'
+import UpdateFromMarketplace from '@/app/components/plugins/update-plugin/from-market-place'
+import { useBoolean } from 'ahooks'
+import { useCheckInstalled } from '@/service/use-plugins'
+
+export type SwitchPluginVersionProps = {
+  uniqueIdentifier: string
+  tooltip?: string
+  version: string
+  onSelect: (version: string) => void
+}
+
+export const SwitchPluginVersion: FC<SwitchPluginVersionProps> = (props) => {
+  const { uniqueIdentifier, tooltip, onSelect, version } = props
+  const [pluginId] = uniqueIdentifier.split(':')
+  const [isShow, setIsShow] = useState(false)
+  const [isShowUpdateModal, { setTrue: showUpdateModal, setFalse: hideUpdateModal }] = useBoolean(false)
+  const [targetVersion, setTargetVersion] = useState<string>()
+  const pluginDetails = useCheckInstalled({
+    pluginIds: [pluginId],
+    enabled: true,
+  })
+  const pluginDetail = pluginDetails.data?.plugins.at(0)
+
+  const handleUpdatedFromMarketplace = useCallback(() => {
+    hideUpdateModal()
+    onSelect(targetVersion!)
+  }, [hideUpdateModal, onSelect, targetVersion])
+  return <Tooltip popupContent={!isShow && tooltip} triggerMethod='hover'>
+    <div>
+      {isShowUpdateModal && pluginDetail && <UpdateFromMarketplace
+        payload={{
+          originalPackageInfo: {
+            id: uniqueIdentifier,
+            payload: pluginDetail.declaration,
+          },
+          targetPackageInfo: {
+            id: uniqueIdentifier,
+            version: targetVersion!,
+          },
+        }}
+        onCancel={hideUpdateModal}
+        onSave={handleUpdatedFromMarketplace}
+      />}
+      <PluginVersionPicker
+        isShow={isShow}
+        onShowChange={setIsShow}
+        pluginID={pluginId}
+        currentVersion={version}
+        onSelect={(state) => {
+          setTargetVersion(state.version)
+          showUpdateModal()
+        }}
+        trigger={
+          <Badge
+            className={cn(
+              'mx-1 hover:bg-state-base-hover',
+              isShow && 'bg-state-base-hover',
+            )}
+            uppercase={true}
+            text={
+              <>
+                <div>{version}</div>
+                <RiArrowLeftRightLine className='ml-1 w-3 h-3 text-text-tertiary' />
+              </>
+            }
+            hasRedCornerMark={true}
+          />
+        }
+      />
+    </div>
+  </Tooltip>
+}
diff --git a/web/app/components/workflow/nodes/agent/node.tsx b/web/app/components/workflow/nodes/agent/node.tsx
index df6beb24c0..033827741d 100644
--- a/web/app/components/workflow/nodes/agent/node.tsx
+++ b/web/app/components/workflow/nodes/agent/node.tsx
@@ -89,9 +89,9 @@ const AgentNode: FC<NodeProps<AgentNodeType>> = (props) => {
     {inputs.agent_strategy_name
       ? <SettingItem
         label={t('workflow.nodes.agent.strategy.shortLabel')}
-        status={currentStrategyStatus?.strategy === 'not-found' ? 'error' : undefined}
+        status={!currentStrategyStatus?.isExistInPlugin ? 'error' : undefined}
         tooltip={
-          currentStrategyStatus?.strategy === 'not-found' ? t('workflow.nodes.agent.strategyNotInstallTooltip', {
+          !currentStrategyStatus?.isExistInPlugin ? t('workflow.nodes.agent.strategyNotInstallTooltip', {
             plugin: pluginDetail?.declaration.label
               ? renderI18nObject(pluginDetail?.declaration.label)
               : undefined,
diff --git a/web/app/components/workflow/nodes/agent/use-config.ts b/web/app/components/workflow/nodes/agent/use-config.ts
index aa59a3dc4f..d1446892c2 100644
--- a/web/app/components/workflow/nodes/agent/use-config.ts
+++ b/web/app/components/workflow/nodes/agent/use-config.ts
@@ -18,7 +18,7 @@ export type StrategyStatus = {
     source: 'external' | 'marketplace'
     installed: boolean
   }
-  strategy: 'not-found' | 'normal'
+  isExistInPlugin: boolean
 }
 
 export const useStrategyInfo = (
@@ -46,7 +46,7 @@ export const useStrategyInfo = (
         source: isInMarketplace ? 'marketplace' : 'external',
         installed: isPluginInstalled,
       },
-      strategy: strategyExist ? 'normal' : 'not-found',
+      isExistInPlugin: strategyExist,
     }
   }, [strategy, marketplace, strategyProvider.isError, strategyProvider.isLoading])
   return {
diff --git a/web/app/dev-preview/page.tsx b/web/app/dev-preview/page.tsx
new file mode 100644
index 0000000000..8ab12d63f7
--- /dev/null
+++ b/web/app/dev-preview/page.tsx
@@ -0,0 +1,16 @@
+'use client'
+
+import { useState } from 'react'
+import { SwitchPluginVersion } from '../components/workflow/nodes/_base/components/switch-plugin-version'
+
+export default function Page() {
+  const [version, setVersion] = useState('0.0.1')
+  return <div className="p-20">
+    <SwitchPluginVersion
+      uniqueIdentifier={'langgenius/openai:12'}
+      onSelect={setVersion}
+      version={version}
+      tooltip='Switch to new version'
+    />
+  </div>
+}