dify

dify/web/app/components/plugins/update-plugin/downgrade-warning.tsx

@@ -0,0 +1,35 @@
+import { useTranslation } from 'react-i18next'
+import Button from '@/app/components/base/button'
+
+const i18nPrefix = 'plugin.autoUpdate.pluginDowngradeWarning'
+
+type Props = {
+  onCancel: () => void
+  onJustDowngrade: () => void
+  onExcludeAndDowngrade: () => void
+}
+const DowngradeWarningModal = ({
+  onCancel,
+  onJustDowngrade,
+  onExcludeAndDowngrade,
+}: Props) => {
+  const { t } = useTranslation()
+
+  return (
+    <>
+      <div className='flex flex-col items-start gap-2 self-stretch'>
+        <div className='title-2xl-semi-bold text-text-primary'>{t(`${i18nPrefix}.title`)}</div>
+        <div className='system-md-regular text-text-secondary'>
+          {t(`${i18nPrefix}.description`)}
+        </div>
+      </div>
+      <div className='mt-9 flex items-start justify-end space-x-2 self-stretch'>
+        <Button variant='secondary' onClick={() => onCancel()}>{t('app.newApp.Cancel')}</Button>
+        <Button variant='secondary' destructive onClick={onJustDowngrade}>{t(`${i18nPrefix}.downgrade`)}</Button>
+        <Button variant='primary' onClick={onExcludeAndDowngrade}>{t(`${i18nPrefix}.exclude`)}</Button>
+      </div>
+    </>
+  )
+}
+
+export default DowngradeWarningModal

dify/web/app/components/plugins/update-plugin/from-github.tsx

@@ -0,0 +1,26 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import type { UpdateFromGitHubPayload } from '../types'
+import InstallFromGitHub from '../install-plugin/install-from-github'
+
+type Props = {
+  payload: UpdateFromGitHubPayload
+  onSave: () => void
+  onCancel: () => void
+}
+
+const FromGitHub: FC<Props> = ({
+  payload,
+  onSave,
+  onCancel,
+}) => {
+  return (
+    <InstallFromGitHub
+      updatePayload={payload}
+      onClose={onCancel}
+      onSuccess={onSave}
+    />
+  )
+}
+export default React.memo(FromGitHub)

dify/web/app/components/plugins/update-plugin/from-market-place.tsx

@@ -0,0 +1,186 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Card from '@/app/components/plugins/card'
+import Modal from '@/app/components/base/modal'
+import Button from '@/app/components/base/button'
+import Badge, { BadgeState } from '@/app/components/base/badge/index'
+import { TaskStatus, type UpdateFromMarketPlacePayload } from '../types'
+import { pluginManifestToCardPluginProps } from '@/app/components/plugins/install-plugin/utils'
+import useGetIcon from '../install-plugin/base/use-get-icon'
+import { updateFromMarketPlace } from '@/service/plugins'
+import checkTaskStatus from '@/app/components/plugins/install-plugin/base/check-task-status'
+import { usePluginTaskList } from '@/service/use-plugins'
+import Toast from '../../base/toast'
+import DowngradeWarningModal from './downgrade-warning'
+import { useInvalidateReferenceSettings, useRemoveAutoUpgrade } from '@/service/use-plugins'
+import cn from '@/utils/classnames'
+
+const i18nPrefix = 'plugin.upgrade'
+
+type Props = {
+  payload: UpdateFromMarketPlacePayload
+  pluginId?: string
+  onSave: () => void
+  onCancel: () => void
+  isShowDowngradeWarningModal?: boolean
+}
+
+enum UploadStep {
+  notStarted = 'notStarted',
+  upgrading = 'upgrading',
+  installed = 'installed',
+}
+
+const UpdatePluginModal: FC<Props> = ({
+  payload,
+  pluginId,
+  onSave,
+  onCancel,
+  isShowDowngradeWarningModal,
+}) => {
+  const {
+    originalPackageInfo,
+    targetPackageInfo,
+  } = payload
+  const { t } = useTranslation()
+  const { getIconUrl } = useGetIcon()
+  const [icon, setIcon] = useState<string>(originalPackageInfo.payload.icon)
+  useEffect(() => {
+    (async () => {
+      const icon = await getIconUrl(originalPackageInfo.payload.icon)
+      setIcon(icon)
+    })()
+  }, [originalPackageInfo, getIconUrl])
+  const {
+    check,
+    stop,
+  } = checkTaskStatus()
+  const handleCancel = () => {
+    stop()
+    onCancel()
+  }
+
+  const [uploadStep, setUploadStep] = useState<UploadStep>(UploadStep.notStarted)
+  const { handleRefetch } = usePluginTaskList(payload.category)
+
+  const configBtnText = useMemo(() => {
+    return ({
+      [UploadStep.notStarted]: t(`${i18nPrefix}.upgrade`),
+      [UploadStep.upgrading]: t(`${i18nPrefix}.upgrading`),
+      [UploadStep.installed]: t(`${i18nPrefix}.close`),
+    })[uploadStep]
+  }, [t, uploadStep])
+
+  const handleConfirm = useCallback(async () => {
+    if (uploadStep === UploadStep.notStarted) {
+      setUploadStep(UploadStep.upgrading)
+      try {
+        const {
+          all_installed: isInstalled,
+          task_id: taskId,
+        } = await updateFromMarketPlace({
+          original_plugin_unique_identifier: originalPackageInfo.id,
+          new_plugin_unique_identifier: targetPackageInfo.id,
+        })
+
+        if (isInstalled) {
+          onSave()
+          return
+        }
+        handleRefetch()
+        const { status, error } = await check({
+          taskId,
+          pluginUniqueIdentifier: targetPackageInfo.id,
+        })
+        if (status === TaskStatus.failed) {
+          Toast.notify({ type: 'error', message: error! })
+          return
+        }
+        onSave()
+      }
+      // eslint-disable-next-line unused-imports/no-unused-vars
+      catch (e) {
+        setUploadStep(UploadStep.notStarted)
+      }
+      return
+    }
+    if (uploadStep === UploadStep.installed)
+      onSave()
+  }, [onSave, uploadStep, check, originalPackageInfo.id, handleRefetch, targetPackageInfo.id])
+
+  const { mutateAsync } = useRemoveAutoUpgrade()
+  const invalidateReferenceSettings = useInvalidateReferenceSettings()
+  const handleExcludeAndDownload = async () => {
+    if (pluginId) {
+      await mutateAsync({
+        plugin_id: pluginId,
+      })
+    }
+    invalidateReferenceSettings()
+    handleConfirm()
+  }
+  const doShowDowngradeWarningModal = isShowDowngradeWarningModal && uploadStep === UploadStep.notStarted
+
+  return (
+    <Modal
+      isShow={true}
+      onClose={onCancel}
+      className={cn('min-w-[560px]', doShowDowngradeWarningModal && 'min-w-[640px]')}
+      closable
+      title={!doShowDowngradeWarningModal && t(`${i18nPrefix}.${uploadStep === UploadStep.installed ? 'successfulTitle' : 'title'}`)}
+    >
+      {doShowDowngradeWarningModal && (
+        <DowngradeWarningModal
+          onCancel={onCancel}
+          onJustDowngrade={handleConfirm}
+          onExcludeAndDowngrade={handleExcludeAndDownload}
+        />
+      )}
+      {!doShowDowngradeWarningModal && (
+        <>
+          <div className='system-md-regular mb-2 mt-3 text-text-secondary'>
+            {t(`${i18nPrefix}.description`)}
+          </div>
+          <div className='flex flex-wrap content-start items-start gap-1 self-stretch rounded-2xl bg-background-section-burn p-2'>
+            <Card
+              installed={uploadStep === UploadStep.installed}
+              payload={pluginManifestToCardPluginProps({
+                ...originalPackageInfo.payload,
+                icon: icon!,
+              })}
+              className='w-full'
+              titleLeft={
+                <>
+                  <Badge className='mx-1' size="s" state={BadgeState.Warning}>
+                    {`${originalPackageInfo.payload.version} -> ${targetPackageInfo.version}`}
+                  </Badge>
+                </>
+              }
+            />
+          </div>
+          <div className='flex items-center justify-end gap-2 self-stretch pt-5'>
+            {uploadStep === UploadStep.notStarted && (
+              <Button
+                onClick={handleCancel}
+              >
+                {t('common.operation.cancel')}
+              </Button>
+            )}
+            <Button
+              variant='primary'
+              loading={uploadStep === UploadStep.upgrading}
+              onClick={handleConfirm}
+              disabled={uploadStep === UploadStep.upgrading}
+            >
+              {configBtnText}
+            </Button>
+          </div>
+        </>
+      )}
+
+    </Modal>
+  )
+}
+export default React.memo(UpdatePluginModal)

dify/web/app/components/plugins/update-plugin/index.tsx

@@ -0,0 +1,33 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import type { UpdatePluginModalType } from '../types'
+import { PluginSource } from '../types'
+import UpdateFromGitHub from './from-github'
+import UpdateFromMarketplace from './from-market-place'
+
+const UpdatePlugin: FC<UpdatePluginModalType> = ({
+  type,
+  marketPlace,
+  github,
+  onCancel,
+  onSave,
+}) => {
+  if (type === PluginSource.github) {
+    return (
+      <UpdateFromGitHub
+        payload={github!}
+        onSave={onSave}
+        onCancel={onCancel}
+      />
+    )
+  }
+  return (
+    <UpdateFromMarketplace
+      payload={marketPlace!}
+      onSave={onSave}
+      onCancel={onCancel}
+    />
+  )
+}
+export default React.memo(UpdatePlugin)

dify/web/app/components/plugins/update-plugin/plugin-version-picker.tsx

@@ -0,0 +1,123 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import Badge from '@/app/components/base/badge'
+import type {
+  OffsetOptions,
+  Placement,
+} from '@floating-ui/react'
+import { useVersionListOfPlugin } from '@/service/use-plugins'
+import useTimestamp from '@/hooks/use-timestamp'
+import cn from '@/utils/classnames'
+import { lt } from 'semver'
+
+type Props = {
+  disabled?: boolean
+  isShow: boolean
+  onShowChange: (isShow: boolean) => void
+  pluginID: string
+  currentVersion: string
+  trigger: React.ReactNode
+  placement?: Placement
+  offset?: OffsetOptions
+  onSelect: ({
+    version,
+    unique_identifier,
+    isDowngrade,
+  }: {
+    version: string
+    unique_identifier: string
+    isDowngrade: boolean
+  }) => void
+}
+
+const PluginVersionPicker: FC<Props> = ({
+  disabled = false,
+  isShow,
+  onShowChange,
+  pluginID,
+  currentVersion,
+  trigger,
+  placement = 'bottom-start',
+  offset = {
+    mainAxis: 4,
+    crossAxis: -16,
+  },
+  onSelect,
+}) => {
+  const { t } = useTranslation()
+  const format = t('appLog.dateTimeFormat').split(' ')[0]
+  const { formatDate } = useTimestamp()
+
+  const handleTriggerClick = () => {
+    if (disabled) return
+    onShowChange(true)
+  }
+
+  const { data: res } = useVersionListOfPlugin(pluginID)
+
+  const handleSelect = useCallback(({ version, unique_identifier, isDowngrade }: {
+    version: string
+    unique_identifier: string
+    isDowngrade: boolean
+  }) => {
+    if (currentVersion === version)
+      return
+    onSelect({ version, unique_identifier, isDowngrade })
+    onShowChange(false)
+  }, [currentVersion, onSelect, onShowChange])
+
+  return (
+    <PortalToFollowElem
+      placement={placement}
+      offset={offset}
+      open={isShow}
+      onOpenChange={onShowChange}
+    >
+      <PortalToFollowElemTrigger
+        className={cn('inline-flex cursor-pointer items-center', disabled && 'cursor-default')}
+        onClick={handleTriggerClick}
+      >
+        {trigger}
+      </PortalToFollowElemTrigger>
+
+      <PortalToFollowElemContent className='z-[1000]'>
+        <div className="relative w-[209px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-sm">
+          <div className='system-xs-medium-uppercase px-3 pb-0.5 pt-1 text-text-tertiary'>
+            {t('plugin.detailPanel.switchVersion')}
+          </div>
+          <div className='relative'>
+            {res?.data.versions.map(version => (
+              <div
+                key={version.unique_identifier}
+                className={cn(
+                  'flex h-7 cursor-pointer items-center gap-1 rounded-lg px-3 py-1 hover:bg-state-base-hover',
+                  currentVersion === version.version && 'cursor-default opacity-30 hover:bg-transparent',
+                )}
+                onClick={() => handleSelect({
+                  version: version.version,
+                  unique_identifier: version.unique_identifier,
+                  isDowngrade: lt(version.version, currentVersion),
+                })}
+              >
+                <div className='flex grow items-center'>
+                  <div className='system-sm-medium text-text-secondary'>{version.version}</div>
+                  {currentVersion === version.version && <Badge className='ml-1' text='CURRENT'/>}
+                </div>
+                <div className='system-xs-regular shrink-0 text-text-tertiary'>{formatDate(version.created_at, format)}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+
+export default React.memo(PluginVersionPicker)