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/plugin-page/index.tsx

@@ -0,0 +1,276 @@
+'use client'
+
+import { useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Link from 'next/link'
+import {
+  RiBookOpenLine,
+  RiDragDropLine,
+  RiEqualizer2Line,
+} from '@remixicon/react'
+import { useBoolean } from 'ahooks'
+import InstallFromLocalPackage from '../install-plugin/install-from-local-package'
+import {
+  PluginPageContextProvider,
+  usePluginPageContext,
+} from './context'
+import InstallPluginDropdown from './install-plugin-dropdown'
+import { useUploader } from './use-uploader'
+import usePermission from './use-permission'
+import DebugInfo from './debug-info'
+import PluginTasks from './plugin-tasks'
+import Button from '@/app/components/base/button'
+import TabSlider from '@/app/components/base/tab-slider'
+import Tooltip from '@/app/components/base/tooltip'
+import cn from '@/utils/classnames'
+import PermissionSetModal from '@/app/components/plugins/permission-setting-modal/modal'
+import { useSelector as useAppContextSelector } from '@/context/app-context'
+import InstallFromMarketplace from '../install-plugin/install-from-marketplace'
+import {
+  useRouter,
+  useSearchParams,
+} from 'next/navigation'
+import type { Dependency } from '../types'
+import type { PluginDeclaration, PluginManifestInMarket } from '../types'
+import { sleep } from '@/utils'
+import { fetchBundleInfoFromMarketPlace, fetchManifestFromMarketPlace } from '@/service/plugins'
+import { marketplaceApiPrefix } from '@/config'
+import { SUPPORT_INSTALL_LOCAL_FILE_EXTENSIONS } from '@/config'
+
+const PACKAGE_IDS_KEY = 'package-ids'
+const BUNDLE_INFO_KEY = 'bundle-info'
+
+export type PluginPageProps = {
+  plugins: React.ReactNode
+  marketplace: React.ReactNode
+}
+const PluginPage = ({
+  plugins,
+  marketplace,
+}: PluginPageProps) => {
+  const { t } = useTranslation()
+  const searchParams = useSearchParams()
+  const { replace } = useRouter()
+
+  // just support install one package now
+  const packageId = useMemo(() => {
+    const idStrings = searchParams.get(PACKAGE_IDS_KEY)
+    try {
+      return idStrings ? JSON.parse(idStrings)[0] : ''
+    }
+    catch (e) {
+      return ''
+    }
+  }, [searchParams])
+
+  const [dependencies, setDependencies] = useState<Dependency[]>([])
+  const bundleInfo = useMemo(() => {
+    const info = searchParams.get(BUNDLE_INFO_KEY)
+    try {
+      return info ? JSON.parse(info) : undefined
+    }
+    catch (e) {
+      return undefined
+    }
+  }, [searchParams])
+
+  const [isShowInstallFromMarketplace, {
+    setTrue: showInstallFromMarketplace,
+    setFalse: doHideInstallFromMarketplace,
+  }] = useBoolean(false)
+
+  const hideInstallFromMarketplace = () => {
+    doHideInstallFromMarketplace()
+    const url = new URL(window.location.href)
+    url.searchParams.delete(PACKAGE_IDS_KEY)
+    url.searchParams.delete(BUNDLE_INFO_KEY)
+    replace(url.toString())
+  }
+  const [manifest, setManifest] = useState<PluginDeclaration | PluginManifestInMarket | null>(null)
+
+  useEffect(() => {
+    (async () => {
+      await sleep(100)
+      if (packageId) {
+        const { data } = await fetchManifestFromMarketPlace(encodeURIComponent(packageId))
+        const { plugin, version } = data
+        setManifest({
+          ...plugin,
+          version: version.version,
+          icon: `${marketplaceApiPrefix}/plugins/${plugin.org}/${plugin.name}/icon`,
+        })
+        showInstallFromMarketplace()
+        return
+      }
+      if (bundleInfo) {
+        const { data } = await fetchBundleInfoFromMarketPlace(bundleInfo)
+        setDependencies(data.version.dependencies)
+        showInstallFromMarketplace()
+      }
+    })()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [packageId, bundleInfo])
+
+  const {
+    canManagement,
+    canDebugger,
+    canSetPermissions,
+    permissions,
+    setPermissions,
+  } = usePermission()
+  const [showPluginSettingModal, {
+    setTrue: setShowPluginSettingModal,
+    setFalse: setHidePluginSettingModal,
+  }] = useBoolean()
+  const [currentFile, setCurrentFile] = useState<File | null>(null)
+  const containerRef = usePluginPageContext(v => v.containerRef)
+  const options = usePluginPageContext(v => v.options)
+  const activeTab = usePluginPageContext(v => v.activeTab)
+  const setActiveTab = usePluginPageContext(v => v.setActiveTab)
+  const { enable_marketplace } = useAppContextSelector(s => s.systemFeatures)
+
+  const uploaderProps = useUploader({
+    onFileChange: setCurrentFile,
+    containerRef,
+    enabled: activeTab === 'plugins',
+  })
+
+  const { dragging, fileUploader, fileChangeHandle, removeFile } = uploaderProps
+
+  return (
+    <div
+      id='marketplace-container'
+      ref={containerRef}
+      className={cn('grow relative flex flex-col overflow-y-auto border-t border-divider-subtle', activeTab === 'plugins'
+        ? 'rounded-t-xl bg-components-panel-bg'
+        : 'bg-background-body',
+      )}
+    >
+      <div
+        className={cn(
+          'sticky top-0 flex min-h-[60px] px-12 pt-4 pb-2 items-center self-stretch gap-1 z-10 bg-components-panel-bg', activeTab === 'discover' && 'bg-background-body',
+        )}
+      >
+        <div className='flex justify-between items-center w-full'>
+          <div className='flex-1'>
+            <TabSlider
+              value={activeTab}
+              onChange={setActiveTab}
+              options={options}
+            />
+          </div>
+          <div className='flex shrink-0 items-center gap-1'>
+            {
+              activeTab === 'discover' && (
+                <>
+                  <Link
+                    href='https://docs.dify.ai/plugins/publish-plugins/publish-to-dify-marketplace'
+                    target='_blank'
+                  >
+                    <Button
+                      className='px-3'
+                      variant='secondary-accent'
+                    >
+                      <RiBookOpenLine className='mr-1 w-4 h-4' />
+                      {t('plugin.submitPlugin')}
+                    </Button>
+                  </Link>
+                  <div className='mx-2 w-[1px] h-3.5 bg-divider-regular'></div>
+                </>
+              )
+            }
+            <PluginTasks />
+            {canManagement && (
+              <InstallPluginDropdown
+                onSwitchToMarketplaceTab={() => setActiveTab('discover')}
+              />
+            )}
+            {
+              canDebugger && (
+                <DebugInfo />
+              )
+            }
+            {
+              canSetPermissions && (
+                <Tooltip
+                  popupContent={t('plugin.privilege.title')}
+                >
+                  <Button
+                    className='w-full h-full p-2 text-components-button-secondary-text group'
+                    onClick={setShowPluginSettingModal}
+                  >
+                    <RiEqualizer2Line className='w-4 h-4' />
+                  </Button>
+                </Tooltip>
+              )
+            }
+          </div>
+        </div>
+      </div>
+      {activeTab === 'plugins' && (
+        <>
+          {plugins}
+          {dragging && (
+            <div
+              className="absolute inset-0 m-0.5 p-2 rounded-2xl bg-[rgba(21,90,239,0.14)] border-2
+                  border-dashed border-components-dropzone-border-accent">
+            </div>
+          )}
+          <div className={`flex py-4 justify-center items-center gap-2 ${dragging ? 'text-text-accent' : 'text-text-quaternary'}`}>
+            <RiDragDropLine className="w-4 h-4" />
+            <span className="system-xs-regular">{t('plugin.installModal.dropPluginToInstall')}</span>
+          </div>
+          {currentFile && (
+            <InstallFromLocalPackage
+              file={currentFile}
+              onClose={removeFile ?? (() => { })}
+              onSuccess={() => { }}
+            />
+          )}
+          <input
+            ref={fileUploader}
+            className="hidden"
+            type="file"
+            id="fileUploader"
+            accept={SUPPORT_INSTALL_LOCAL_FILE_EXTENSIONS}
+            onChange={fileChangeHandle ?? (() => { })}
+          />
+        </>
+      )}
+      {
+        activeTab === 'discover' && enable_marketplace && marketplace
+      }
+
+      {showPluginSettingModal && (
+        <PermissionSetModal
+          payload={permissions!}
+          onHide={setHidePluginSettingModal}
+          onSave={setPermissions}
+        />
+      )}
+
+      {
+        isShowInstallFromMarketplace && (
+          <InstallFromMarketplace
+            manifest={manifest! as PluginManifestInMarket}
+            uniqueIdentifier={packageId}
+            isBundle={!!bundleInfo}
+            dependencies={dependencies}
+            onClose={hideInstallFromMarketplace}
+            onSuccess={hideInstallFromMarketplace}
+          />
+        )
+      }
+    </div>
+  )
+}
+
+const PluginPageWithContext = (props: PluginPageProps) => {
+  return (
+    <PluginPageContextProvider>
+      <PluginPage {...props} />
+    </PluginPageContextProvider>
+  )
+}
+
+export default PluginPageWithContext