Introduce Plugins (#13836)

Signed-off-by: yihong0618 <zouzou0208@gmail.com>
Signed-off-by: -LAN- <laipz8200@outlook.com>
Signed-off-by: xhe <xw897002528@gmail.com>
Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: takatost <takatost@gmail.com>
Co-authored-by: kurokobo <kuro664@gmail.com>
Co-authored-by: Novice Lee <novicelee@NoviPro.local>
Co-authored-by: zxhlyh <jasonapring2015@outlook.com>
Co-authored-by: AkaraChen <akarachen@outlook.com>
Co-authored-by: Yi <yxiaoisme@gmail.com>
Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: JzoNg <jzongcode@gmail.com>
Co-authored-by: twwu <twwu@dify.ai>
Co-authored-by: Hiroshi Fujita <fujita-h@users.noreply.github.com>
Co-authored-by: AkaraChen <85140972+AkaraChen@users.noreply.github.com>
Co-authored-by: NFish <douxc512@gmail.com>
Co-authored-by: Wu Tianwei <30284043+WTW0313@users.noreply.github.com>
Co-authored-by: 非法操作 <hjlarry@163.com>
Co-authored-by: Novice <857526207@qq.com>
Co-authored-by: Hiroki Nagai <82458324+nagaihiroki-git@users.noreply.github.com>
Co-authored-by: Gen Sato <52241300+halogen22@users.noreply.github.com>
Co-authored-by: eux <euxuuu@gmail.com>
Co-authored-by: huangzhuo1949 <167434202+huangzhuo1949@users.noreply.github.com>
Co-authored-by: huangzhuo <huangzhuo1@xiaomi.com>
Co-authored-by: lotsik <lotsik@mail.ru>
Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com>
Co-authored-by: nite-knite <nkCoding@gmail.com>
Co-authored-by: Jyong <76649700+JohnJyong@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: gakkiyomi <gakkiyomi@aliyun.com>
Co-authored-by: CN-P5 <heibai2006@gmail.com>
Co-authored-by: CN-P5 <heibai2006@qq.com>
Co-authored-by: Chuehnone <1897025+chuehnone@users.noreply.github.com>
Co-authored-by: yihong <zouzou0208@gmail.com>
Co-authored-by: Kevin9703 <51311316+Kevin9703@users.noreply.github.com>
Co-authored-by: -LAN- <laipz8200@outlook.com>
Co-authored-by: Boris Feld <lothiraldan@gmail.com>
Co-authored-by: mbo <himabo@gmail.com>
Co-authored-by: mabo <mabo@aeyes.ai>
Co-authored-by: Warren Chen <warren.chen830@gmail.com>
Co-authored-by: JzoNgKVO <27049666+JzoNgKVO@users.noreply.github.com>
Co-authored-by: jiandanfeng <chenjh3@wangsu.com>
Co-authored-by: zhu-an <70234959+xhdd123321@users.noreply.github.com>
Co-authored-by: zhaoqingyu.1075 <zhaoqingyu.1075@bytedance.com>
Co-authored-by: 海狸大師 <86974027+yenslife@users.noreply.github.com>
Co-authored-by: Xu Song <xusong.vip@gmail.com>
Co-authored-by: rayshaw001 <396301947@163.com>
Co-authored-by: Ding Jiatong <dingjiatong@gmail.com>
Co-authored-by: Bowen Liang <liangbowen@gf.com.cn>
Co-authored-by: JasonVV <jasonwangiii@outlook.com>
Co-authored-by: le0zh <newlight@qq.com>
Co-authored-by: zhuxinliang <zhuxinliang@didiglobal.com>
Co-authored-by: k-zaku <zaku99@outlook.jp>
Co-authored-by: luckylhb90 <luckylhb90@gmail.com>
Co-authored-by: hobo.l <hobo.l@binance.com>
Co-authored-by: jiangbo721 <365065261@qq.com>
Co-authored-by: 刘江波 <jiangbo721@163.com>
Co-authored-by: Shun Miyazawa <34241526+miya@users.noreply.github.com>
Co-authored-by: EricPan <30651140+Egfly@users.noreply.github.com>
Co-authored-by: crazywoola <427733928@qq.com>
Co-authored-by: sino <sino2322@gmail.com>
Co-authored-by: Jhvcc <37662342+Jhvcc@users.noreply.github.com>
Co-authored-by: lowell <lowell.hu@zkteco.in>
Co-authored-by: Boris Polonsky <BorisPolonsky@users.noreply.github.com>
Co-authored-by: Ademílson Tonato <ademilsonft@outlook.com>
Co-authored-by: Ademílson Tonato <ademilson.tonato@refurbed.com>
Co-authored-by: IWAI, Masaharu <iwaim.sub@gmail.com>
Co-authored-by: Yueh-Po Peng (Yabi) <94939112+y10ab1@users.noreply.github.com>
Co-authored-by: Jason <ggbbddjm@gmail.com>
Co-authored-by: Xin Zhang <sjhpzx@gmail.com>
Co-authored-by: yjc980121 <3898524+yjc980121@users.noreply.github.com>
Co-authored-by: heyszt <36215648+hieheihei@users.noreply.github.com>
Co-authored-by: Abdullah AlOsaimi <osaimiacc@gmail.com>
Co-authored-by: Abdullah AlOsaimi <189027247+osaimi@users.noreply.github.com>
Co-authored-by: Yingchun Lai <laiyingchun@apache.org>
Co-authored-by: Hash Brown <hi@xzd.me>
Co-authored-by: zuodongxu <192560071+zuodongxu@users.noreply.github.com>
Co-authored-by: Masashi Tomooka <tmokmss@users.noreply.github.com>
Co-authored-by: aplio <ryo.091219@gmail.com>
Co-authored-by: Obada Khalili <54270856+obadakhalili@users.noreply.github.com>
Co-authored-by: Nam Vu <zuzoovn@gmail.com>
Co-authored-by: Kei YAMAZAKI <1715090+kei-yamazaki@users.noreply.github.com>
Co-authored-by: TechnoHouse <13776377+deephbz@users.noreply.github.com>
Co-authored-by: Riddhimaan-Senapati <114703025+Riddhimaan-Senapati@users.noreply.github.com>
Co-authored-by: MaFee921 <31881301+2284730142@users.noreply.github.com>
Co-authored-by: te-chan <t-nakanome@sakura-is.co.jp>
Co-authored-by: HQidea <HQidea@users.noreply.github.com>
Co-authored-by: Joshbly <36315710+Joshbly@users.noreply.github.com>
Co-authored-by: xhe <xw897002528@gmail.com>
Co-authored-by: weiwenyan-dev <154779315+weiwenyan-dev@users.noreply.github.com>
Co-authored-by: ex_wenyan.wei <ex_wenyan.wei@tcl.com>
Co-authored-by: engchina <12236799+engchina@users.noreply.github.com>
Co-authored-by: engchina <atjapan2015@gmail.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: 呆萌闷油瓶 <253605712@qq.com>
Co-authored-by: Kemal <kemalmeler@outlook.com>
Co-authored-by: Lazy_Frog <4590648+lazyFrogLOL@users.noreply.github.com>
Co-authored-by: Yi Xiao <54782454+YIXIAO0@users.noreply.github.com>
Co-authored-by: Steven sun <98230804+Tuyohai@users.noreply.github.com>
Co-authored-by: steven <sunzwj@digitalchina.com>
Co-authored-by: Kalo Chin <91766386+fdb02983rhy@users.noreply.github.com>
Co-authored-by: Katy Tao <34019945+KatyTao@users.noreply.github.com>
Co-authored-by: depy <42985524+h4ckdepy@users.noreply.github.com>
Co-authored-by: 胡春东 <gycm520@gmail.com>
Co-authored-by: Junjie.M <118170653@qq.com>
Co-authored-by: MuYu <mr.muzea@gmail.com>
Co-authored-by: Naoki Takashima <39912547+takatea@users.noreply.github.com>
Co-authored-by: Summer-Gu <37869445+gubinjie@users.noreply.github.com>
Co-authored-by: Fei He <droxer.he@gmail.com>
Co-authored-by: ybalbert001 <120714773+ybalbert001@users.noreply.github.com>
Co-authored-by: Yuanbo Li <ybalbert@amazon.com>
Co-authored-by: douxc <7553076+douxc@users.noreply.github.com>
Co-authored-by: liuzhenghua <1090179900@qq.com>
Co-authored-by: Wu Jiayang <62842862+Wu-Jiayang@users.noreply.github.com>
Co-authored-by: Your Name <you@example.com>
Co-authored-by: kimjion <45935338+kimjion@users.noreply.github.com>
Co-authored-by: AugNSo <song.tiankai@icloud.com>
Co-authored-by: llinvokerl <38915183+llinvokerl@users.noreply.github.com>
Co-authored-by: liusurong.lsr <liusurong.lsr@alibaba-inc.com>
Co-authored-by: Vasu Negi <vasu-negi@users.noreply.github.com>
Co-authored-by: Hundredwz <1808096180@qq.com>
Co-authored-by: Xiyuan Chen <52963600+GareArc@users.noreply.github.com>

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)

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

@@ -0,0 +1,164 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import { RiInformation2Line } from '@remixicon/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'
+
+const i18nPrefix = 'plugin.upgrade'
+
+type Props = {
+  payload: UpdateFromMarketPlacePayload
+  onSave: () => void
+  onCancel: () => void
+}
+
+enum UploadStep {
+  notStarted = 'notStarted',
+  upgrading = 'upgrading',
+  installed = 'installed',
+}
+
+const UpdatePluginModal: FC<Props> = ({
+  payload,
+  onSave,
+  onCancel,
+}) => {
+  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 usedInAppInfo = useMemo(() => {
+    return (
+      <div className='flex px-0.5 justify-center items-center gap-0.5'>
+        <div className='text-text-warning system-xs-medium'>{t(`${i18nPrefix}.usedInApps`, { num: 3 })}</div>
+        {/* show the used apps */}
+        <RiInformation2Line className='w-4 h-4 text-text-tertiary' />
+      </div>
+    )
+  }, [t])
+  return (
+    <Modal
+      isShow={true}
+      onClose={onCancel}
+      className='min-w-[560px]'
+      closable
+      title={t(`${i18nPrefix}.${uploadStep === UploadStep.installed ? 'successfulTitle' : 'title'}`)}
+    >
+      <div className='mt-3 mb-2 text-text-secondary system-md-regular'>
+        {t(`${i18nPrefix}.description`)}
+      </div>
+      <div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn'>
+        <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>
+              {false && usedInAppInfo}
+            </>
+          }
+        />
+      </div>
+      <div className='flex pt-5 justify-end items-center gap-2 self-stretch'>
+        {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)

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)

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

@@ -0,0 +1,118 @@
+'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'
+
+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,
+  }: {
+    version: string
+    unique_identifier: string
+  }) => 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 }: {
+    version: string
+    unique_identifier: string
+  }) => {
+    if (currentVersion === version)
+      return
+    onSelect({ version, unique_identifier })
+    onShowChange(false)
+  }, [currentVersion, onSelect, onShowChange])
+
+  return (
+    <PortalToFollowElem
+      placement={placement}
+      offset={offset}
+      open={isShow}
+      onOpenChange={onShowChange}
+    >
+      <PortalToFollowElemTrigger
+        className={cn('inline-flex items-center cursor-pointer', disabled && 'cursor-default')}
+        onClick={handleTriggerClick}
+      >
+        {trigger}
+      </PortalToFollowElemTrigger>
+
+      <PortalToFollowElemContent className='z-[1000]'>
+        <div className="relative w-[209px] p-1 rounded-xl bg-components-panel-bg-blur border-[0.5px] border-components-panel-border shadow-lg">
+          <div className='px-3 pt-1 pb-0.5 text-text-tertiary system-xs-medium-uppercase'>
+            {t('plugin.detailPanel.switchVersion')}
+          </div>
+          <div className='relative'>
+            {res?.data.versions.map(version => (
+              <div
+                key={version.unique_identifier}
+                className={cn(
+                  'h-7 px-3 py-1 flex items-center gap-1 rounded-lg hover:bg-state-base-hover cursor-pointer',
+                  currentVersion === version.version && 'opacity-30 cursor-default hover:bg-transparent',
+                )}
+                onClick={() => handleSelect({
+                  version: version.version,
+                  unique_identifier: version.unique_identifier,
+                })}
+              >
+                <div className='grow flex items-center'>
+                  <div className='text-text-secondary system-sm-medium'>{version.version}</div>
+                  {currentVersion === version.version && <Badge className='ml-1' text='CURRENT'/>}
+                </div>
+                <div className='shrink-0 text-text-tertiary system-xs-regular'>{formatDate(version.created_at, format)}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+
+export default React.memo(PluginVersionPicker)