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/install-plugin/install-from-local-package/index.tsx

@@ -0,0 +1,133 @@
+'use client'
+
+import React, { useCallback, useState } from 'react'
+import Modal from '@/app/components/base/modal'
+import type { Dependency, PluginDeclaration } from '../../types'
+import { InstallStep } from '../../types'
+import Uploading from './steps/uploading'
+import { useTranslation } from 'react-i18next'
+import useGetIcon from '@/app/components/plugins/install-plugin/base/use-get-icon'
+import ReadyToInstallPackage from './ready-to-install'
+import ReadyToInstallBundle from '../install-bundle/ready-to-install'
+import useHideLogic from '../hooks/use-hide-logic'
+import cn from '@/utils/classnames'
+
+const i18nPrefix = 'plugin.installModal'
+
+type InstallFromLocalPackageProps = {
+  file: File
+  onSuccess: () => void
+  onClose: () => void
+}
+
+const InstallFromLocalPackage: React.FC<InstallFromLocalPackageProps> = ({
+  file,
+  onClose,
+}) => {
+  const { t } = useTranslation()
+  // uploading -> !uploadFailed -> readyToInstall -> installed/failed
+  const [step, setStep] = useState<InstallStep>(InstallStep.uploading)
+  const [uniqueIdentifier, setUniqueIdentifier] = useState<string | null>(null)
+  const [manifest, setManifest] = useState<PluginDeclaration | null>(null)
+  const [errorMsg, setErrorMsg] = useState<string | null>(null)
+  const isBundle = file.name.endsWith('.difybndl')
+  const [dependencies, setDependencies] = useState<Dependency[]>([])
+
+  const {
+    modalClassName,
+    foldAnimInto,
+    setIsInstalling,
+    handleStartToInstall,
+  } = useHideLogic(onClose)
+
+  const getTitle = useCallback(() => {
+    if (step === InstallStep.uploadFailed)
+      return t(`${i18nPrefix}.uploadFailed`)
+    if (isBundle && step === InstallStep.installed)
+      return t(`${i18nPrefix}.installComplete`)
+    if (step === InstallStep.installed)
+      return t(`${i18nPrefix}.installedSuccessfully`)
+    if (step === InstallStep.installFailed)
+      return t(`${i18nPrefix}.installFailed`)
+
+    return t(`${i18nPrefix}.installPlugin`)
+  }, [isBundle, step, t])
+
+  const { getIconUrl } = useGetIcon()
+
+  const handlePackageUploaded = useCallback(async (result: {
+    uniqueIdentifier: string
+    manifest: PluginDeclaration
+  }) => {
+    const {
+      manifest,
+      uniqueIdentifier,
+    } = result
+    const icon = await getIconUrl(manifest!.icon)
+    setUniqueIdentifier(uniqueIdentifier)
+    setManifest({
+      ...manifest,
+      icon,
+    })
+    setStep(InstallStep.readyToInstall)
+  }, [getIconUrl])
+
+  const handleBundleUploaded = useCallback((result: Dependency[]) => {
+    setDependencies(result)
+    setStep(InstallStep.readyToInstall)
+  }, [])
+
+  const handleUploadFail = useCallback((errorMsg: string) => {
+    setErrorMsg(errorMsg)
+    setStep(InstallStep.uploadFailed)
+  }, [])
+
+  return (
+    <Modal
+      isShow={true}
+      onClose={foldAnimInto}
+      className={cn(modalClassName, 'flex min-w-[560px] p-0 flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadows-shadow-xl')}
+      closable
+    >
+      <div className='flex pt-6 pl-6 pb-3 pr-14 items-start gap-2 self-stretch'>
+        <div className='self-stretch text-text-primary title-2xl-semi-bold'>
+          {getTitle()}
+        </div>
+      </div>
+      {step === InstallStep.uploading && (
+        <Uploading
+          isBundle={isBundle}
+          file={file}
+          onCancel={onClose}
+          onPackageUploaded={handlePackageUploaded}
+          onBundleUploaded={handleBundleUploaded}
+          onFailed={handleUploadFail}
+        />
+      )}
+      {isBundle ? (
+        <ReadyToInstallBundle
+          step={step}
+          onStepChange={setStep}
+          onStartToInstall={handleStartToInstall}
+          setIsInstalling={setIsInstalling}
+          onClose={onClose}
+          allPlugins={dependencies}
+        />
+      ) : (
+        <ReadyToInstallPackage
+          step={step}
+          onStepChange={setStep}
+          onStartToInstall={handleStartToInstall}
+          setIsInstalling={setIsInstalling}
+          onClose={onClose}
+          uniqueIdentifier={uniqueIdentifier}
+          manifest={manifest}
+          errorMsg={errorMsg}
+          onError={setErrorMsg}
+        />
+      )}
+    </Modal>
+  )
+}
+
+export default InstallFromLocalPackage

web/app/components/plugins/install-plugin/install-from-local-package/ready-to-install.tsx

@@ -0,0 +1,76 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback } from 'react'
+import type { PluginDeclaration } from '../../types'
+import { InstallStep } from '../../types'
+import Install from './steps/install'
+import Installed from '../base/installed'
+import useRefreshPluginList from '../hooks/use-refresh-plugin-list'
+
+type Props = {
+  step: InstallStep
+  onStepChange: (step: InstallStep) => void,
+  onStartToInstall: () => void
+  setIsInstalling: (isInstalling: boolean) => void
+  onClose: () => void
+  uniqueIdentifier: string | null,
+  manifest: PluginDeclaration | null,
+  errorMsg: string | null,
+  onError: (errorMsg: string) => void,
+}
+
+const ReadyToInstall: FC<Props> = ({
+  step,
+  onStepChange,
+  onStartToInstall,
+  setIsInstalling,
+  onClose,
+  uniqueIdentifier,
+  manifest,
+  errorMsg,
+  onError,
+}) => {
+  const { refreshPluginList } = useRefreshPluginList()
+
+  const handleInstalled = useCallback((notRefresh?: boolean) => {
+    onStepChange(InstallStep.installed)
+    if (!notRefresh)
+      refreshPluginList(manifest)
+    setIsInstalling(false)
+  }, [manifest, onStepChange, refreshPluginList, setIsInstalling])
+
+  const handleFailed = useCallback((errorMsg?: string) => {
+    onStepChange(InstallStep.installFailed)
+    setIsInstalling(false)
+    if (errorMsg)
+      onError(errorMsg)
+  }, [onError, onStepChange, setIsInstalling])
+
+  return (
+    <>
+      {
+        step === InstallStep.readyToInstall && (
+          <Install
+            uniqueIdentifier={uniqueIdentifier!}
+            payload={manifest!}
+            onCancel={onClose}
+            onInstalled={handleInstalled}
+            onFailed={handleFailed}
+            onStartToInstall={onStartToInstall}
+          />
+        )
+      }
+      {
+        ([InstallStep.uploadFailed, InstallStep.installed, InstallStep.installFailed].includes(step)) && (
+          <Installed
+            payload={manifest}
+            isFailed={[InstallStep.uploadFailed, InstallStep.installFailed].includes(step)}
+            errMsg={errorMsg}
+            onCancel={onClose}
+          />
+        )
+      }
+    </>
+  )
+}
+export default React.memo(ReadyToInstall)

web/app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx

@@ -0,0 +1,150 @@
+'use client'
+import type { FC } from 'react'
+import React, { useEffect } from 'react'
+import { type PluginDeclaration, TaskStatus } from '../../../types'
+import Card from '../../../card'
+import { pluginManifestToCardPluginProps } from '../../utils'
+import Button from '@/app/components/base/button'
+import { Trans, useTranslation } from 'react-i18next'
+import { RiLoader2Line } from '@remixicon/react'
+import checkTaskStatus from '../../base/check-task-status'
+import { useInstallPackageFromLocal, usePluginTaskList } from '@/service/use-plugins'
+import useCheckInstalled from '@/app/components/plugins/install-plugin/hooks/use-check-installed'
+import { uninstallPlugin } from '@/service/plugins'
+import Version from '../../base/version'
+
+const i18nPrefix = 'plugin.installModal'
+
+type Props = {
+  uniqueIdentifier: string
+  payload: PluginDeclaration
+  onCancel: () => void
+  onStartToInstall?: () => void
+  onInstalled: (notRefresh?: boolean) => void
+  onFailed: (message?: string) => void
+}
+
+const Installed: FC<Props> = ({
+  uniqueIdentifier,
+  payload,
+  onCancel,
+  onStartToInstall,
+  onInstalled,
+  onFailed,
+}) => {
+  const { t } = useTranslation()
+  const toInstallVersion = payload.version
+  const pluginId = `${payload.author}/${payload.name}`
+  const { installedInfo, isLoading } = useCheckInstalled({
+    pluginIds: [pluginId],
+    enabled: !!pluginId,
+  })
+  const installedInfoPayload = installedInfo?.[pluginId]
+  const installedVersion = installedInfoPayload?.installedVersion
+  const hasInstalled = !!installedVersion
+
+  useEffect(() => {
+    if (hasInstalled && uniqueIdentifier === installedInfoPayload.uniqueIdentifier)
+      onInstalled()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [hasInstalled])
+
+  const [isInstalling, setIsInstalling] = React.useState(false)
+  const { mutateAsync: installPackageFromLocal } = useInstallPackageFromLocal()
+
+  const {
+    check,
+    stop,
+  } = checkTaskStatus()
+
+  const handleCancel = () => {
+    stop()
+    onCancel()
+  }
+
+  const { handleRefetch } = usePluginTaskList(payload.category)
+  const handleInstall = async () => {
+    if (isInstalling) return
+    setIsInstalling(true)
+    onStartToInstall?.()
+
+    try {
+      if (hasInstalled)
+        await uninstallPlugin(installedInfoPayload.installedId)
+
+      const {
+        all_installed,
+        task_id,
+      } = await installPackageFromLocal(uniqueIdentifier)
+      const taskId = task_id
+      const isInstalled = all_installed
+
+      if (isInstalled) {
+        onInstalled()
+        return
+      }
+      handleRefetch()
+      const { status, error } = await check({
+        taskId,
+        pluginUniqueIdentifier: uniqueIdentifier,
+      })
+      if (status === TaskStatus.failed) {
+        onFailed(error)
+        return
+      }
+      onInstalled(true)
+    }
+    catch (e) {
+      if (typeof e === 'string') {
+        onFailed(e)
+        return
+      }
+      onFailed()
+    }
+  }
+
+  return (
+    <>
+      <div className='flex flex-col px-6 py-3 justify-center items-start gap-4 self-stretch'>
+        <div className='text-text-secondary system-md-regular'>
+          <p>{t(`${i18nPrefix}.readyToInstall`)}</p>
+          <p>
+            <Trans
+              i18nKey={`${i18nPrefix}.fromTrustSource`}
+              components={{ trustSource: <span className='system-md-semibold' /> }}
+            />
+          </p>
+        </div>
+        <div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn'>
+          <Card
+            className='w-full'
+            payload={pluginManifestToCardPluginProps(payload)}
+            titleLeft={!isLoading && <Version
+              hasInstalled={hasInstalled}
+              installedVersion={installedVersion}
+              toInstallVersion={toInstallVersion}
+            />}
+          />
+        </div>
+      </div>
+      {/* Action Buttons */}
+      <div className='flex p-6 pt-5 justify-end items-center gap-2 self-stretch'>
+        {!isInstalling && (
+          <Button variant='secondary' className='min-w-[72px]' onClick={handleCancel}>
+            {t('common.operation.cancel')}
+          </Button>
+        )}
+        <Button
+          variant='primary'
+          className='min-w-[72px] flex space-x-0.5'
+          disabled={isInstalling || isLoading}
+          onClick={handleInstall}
+        >
+          {isInstalling && <RiLoader2Line className='w-4 h-4 animate-spin-slow' />}
+          <span>{t(`${i18nPrefix}.${isInstalling ? 'installing' : 'install'}`)}</span>
+        </Button>
+      </div>
+    </>
+  )
+}
+export default React.memo(Installed)

web/app/components/plugins/install-plugin/install-from-local-package/steps/uploading.tsx

@@ -0,0 +1,99 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { RiLoader2Line } from '@remixicon/react'
+import Card from '../../../card'
+import type { Dependency, PluginDeclaration } from '../../../types'
+import Button from '@/app/components/base/button'
+import { useTranslation } from 'react-i18next'
+import { uploadFile } from '@/service/plugins'
+const i18nPrefix = 'plugin.installModal'
+
+type Props = {
+  isBundle: boolean
+  file: File
+  onCancel: () => void
+  onPackageUploaded: (result: {
+    uniqueIdentifier: string
+    manifest: PluginDeclaration
+  }) => void
+  onBundleUploaded: (result: Dependency[]) => void
+  onFailed: (errorMsg: string) => void
+}
+
+const Uploading: FC<Props> = ({
+  isBundle,
+  file,
+  onCancel,
+  onPackageUploaded,
+  onBundleUploaded,
+  onFailed,
+}) => {
+  const { t } = useTranslation()
+  const fileName = file.name
+  const handleUpload = async () => {
+    try {
+      await uploadFile(file, isBundle)
+    }
+    catch (e: any) {
+      if (e.response?.message) {
+        onFailed(e.response?.message)
+      }
+      else { // Why it would into this branch?
+        const res = e.response
+        if (isBundle) {
+          onBundleUploaded(res)
+          return
+        }
+        onPackageUploaded({
+          uniqueIdentifier: res.unique_identifier,
+          manifest: res.manifest,
+        })
+      }
+    }
+  }
+
+  React.useEffect(() => {
+    handleUpload()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+  return (
+    <>
+      <div className='flex flex-col px-6 py-3 justify-center items-start gap-4 self-stretch'>
+        <div className='flex items-center gap-1 self-stretch'>
+          <RiLoader2Line className='text-text-accent w-4 h-4 animate-spin-slow' />
+          <div className='text-text-secondary system-md-regular'>
+            {t(`${i18nPrefix}.uploadingPackage`, {
+              packageName: fileName,
+            })}
+          </div>
+        </div>
+        <div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn'>
+          <Card
+            className='w-full'
+            payload={{ name: fileName } as any}
+            isLoading
+            loadingFileName={fileName}
+            installed={false}
+          />
+        </div>
+      </div>
+
+      {/* Action Buttons */}
+      <div className='flex p-6 pt-5 justify-end items-center gap-2 self-stretch'>
+        <Button variant='secondary' className='min-w-[72px]' onClick={onCancel}>
+          {t('common.operation.cancel')}
+        </Button>
+        <Button
+          variant='primary'
+          className='min-w-[72px]'
+          disabled
+        >
+          {t(`${i18nPrefix}.install`)}
+        </Button>
+      </div>
+    </>
+  )
+}
+
+export default React.memo(Uploading)