dify

2025-12-01 17:21:38 +08:00
parent 32fee2b8ab
commit fab8c13cb3
7511 changed files with 996300 additions and 0 deletions
--- a/dify/web/app/components/plugins/install-plugin/install-from-github/steps/loaded.tsx
+++ b/dify/web/app/components/plugins/install-plugin/install-from-github/steps/loaded.tsx
@@ -0,0 +1,179 @@
+'use client'
+
+import React, { useEffect } from 'react'
+import Button from '@/app/components/base/button'
+import { type Plugin, type PluginDeclaration, TaskStatus, type UpdateFromGitHubPayload } from '../../../types'
+import Card from '../../../card'
+import { pluginManifestToCardPluginProps } from '../../utils'
+import { useTranslation } from 'react-i18next'
+import { updateFromGitHub } from '@/service/plugins'
+import { useInstallPackageFromGitHub } from '@/service/use-plugins'
+import { RiLoader2Line } from '@remixicon/react'
+import { usePluginTaskList } from '@/service/use-plugins'
+import checkTaskStatus from '../../base/check-task-status'
+import useCheckInstalled from '@/app/components/plugins/install-plugin/hooks/use-check-installed'
+import { parseGitHubUrl } from '../../utils'
+import Version from '../../base/version'
+
+type LoadedProps = {
+  updatePayload: UpdateFromGitHubPayload
+  uniqueIdentifier: string
+  payload: PluginDeclaration | Plugin
+  repoUrl: string
+  selectedVersion: string
+  selectedPackage: string
+  onBack: () => void
+  onStartToInstall?: () => void
+  onInstalled: (notRefresh?: boolean) => void
+  onFailed: (message?: string) => void
+}
+
+const i18nPrefix = 'plugin.installModal'
+
+const Loaded: React.FC<LoadedProps> = ({
+  updatePayload,
+  uniqueIdentifier,
+  payload,
+  repoUrl,
+  selectedVersion,
+  selectedPackage,
+  onBack,
+  onStartToInstall,
+  onInstalled,
+  onFailed,
+}) => {
+  const { t } = useTranslation()
+  const toInstallVersion = payload.version
+  const pluginId = (payload as Plugin).plugin_id
+  const { installedInfo, isLoading } = useCheckInstalled({
+    pluginIds: [pluginId],
+    enabled: !!pluginId,
+  })
+  const installedInfoPayload = installedInfo?.[pluginId]
+  const installedVersion = installedInfoPayload?.installedVersion
+  const hasInstalled = !!installedVersion
+
+  const [isInstalling, setIsInstalling] = React.useState(false)
+  const { mutateAsync: installPackageFromGitHub } = useInstallPackageFromGitHub()
+  const { handleRefetch } = usePluginTaskList(payload.category)
+  const { check } = checkTaskStatus()
+
+  useEffect(() => {
+    if (hasInstalled && uniqueIdentifier === installedInfoPayload.uniqueIdentifier)
+      onInstalled()
+  }, [hasInstalled])
+
+  const handleInstall = async () => {
+    if (isInstalling) return
+    setIsInstalling(true)
+    onStartToInstall?.()
+
+    try {
+      const { owner, repo } = parseGitHubUrl(repoUrl)
+      let taskId
+      let isInstalled
+      if (updatePayload) {
+        const { all_installed, task_id } = await updateFromGitHub(
+          `${owner}/${repo}`,
+          selectedVersion,
+          selectedPackage,
+          updatePayload.originalPackageInfo.id,
+          uniqueIdentifier,
+        )
+
+        taskId = task_id
+        isInstalled = all_installed
+      }
+      else {
+        if (hasInstalled) {
+          const {
+            all_installed,
+            task_id,
+          } = await updateFromGitHub(
+            `${owner}/${repo}`,
+            selectedVersion,
+            selectedPackage,
+            installedInfoPayload.uniqueIdentifier,
+            uniqueIdentifier,
+          )
+          taskId = task_id
+          isInstalled = all_installed
+        }
+        else {
+          const { all_installed, task_id } = await installPackageFromGitHub({
+            repoUrl: `${owner}/${repo}`,
+            selectedVersion,
+            selectedPackage,
+            uniqueIdentifier,
+          })
+
+          taskId = task_id
+          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()
+    }
+    finally {
+      setIsInstalling(false)
+    }
+  }
+
+  return (
+    <>
+      <div className='system-md-regular text-text-secondary'>
+        <p>{t(`${i18nPrefix}.readyToInstall`)}</p>
+      </div>
+      <div className='flex flex-wrap content-start items-start gap-1 self-stretch rounded-2xl bg-background-section-burn p-2'>
+        <Card
+          className='w-full'
+          payload={pluginManifestToCardPluginProps(payload as PluginDeclaration)}
+          titleLeft={!isLoading && <Version
+            hasInstalled={hasInstalled}
+            installedVersion={installedVersion}
+            toInstallVersion={toInstallVersion}
+          />}
+        />
+      </div>
+      <div className='mt-4 flex items-center justify-end gap-2 self-stretch'>
+        {!isInstalling && (
+          <Button variant='secondary' className='min-w-[72px]' onClick={onBack}>
+            {t('plugin.installModal.back')}
+          </Button>
+        )}
+        <Button
+          variant='primary'
+          className='flex min-w-[72px] space-x-0.5'
+          onClick={handleInstall}
+          disabled={isInstalling || isLoading}
+        >
+          {isInstalling && <RiLoader2Line className='h-4 w-4 animate-spin-slow' />}
+          <span>{t(`${i18nPrefix}.${isInstalling ? 'installing' : 'install'}`)}</span>
+        </Button>
+      </div>
+    </>
+  )
+}
+
+export default Loaded
--- a/dify/web/app/components/plugins/install-plugin/install-from-github/steps/selectPackage.tsx
+++ b/dify/web/app/components/plugins/install-plugin/install-from-github/steps/selectPackage.tsx
@@ -0,0 +1,127 @@
+'use client'
+
+import React from 'react'
+import type { Item } from '@/app/components/base/select'
+import { PortalSelect } from '@/app/components/base/select'
+import Button from '@/app/components/base/button'
+import type { PluginDeclaration, UpdateFromGitHubPayload } from '../../../types'
+import { useTranslation } from 'react-i18next'
+import { useGitHubUpload } from '../../hooks'
+
+const i18nPrefix = 'plugin.installFromGitHub'
+
+type SelectPackageProps = {
+  updatePayload: UpdateFromGitHubPayload
+  repoUrl: string
+  selectedVersion: string
+  versions: Item[]
+  onSelectVersion: (item: Item) => void
+  selectedPackage: string
+  packages: Item[]
+  onSelectPackage: (item: Item) => void
+  onUploaded: (result: {
+    uniqueIdentifier: string
+    manifest: PluginDeclaration
+  }) => void
+  onFailed: (errorMsg: string) => void
+  onBack: () => void
+}
+
+const SelectPackage: React.FC<SelectPackageProps> = ({
+  updatePayload,
+  repoUrl,
+  selectedVersion,
+  versions,
+  onSelectVersion,
+  selectedPackage,
+  packages,
+  onSelectPackage,
+  onUploaded,
+  onFailed,
+  onBack,
+}) => {
+  const { t } = useTranslation()
+  const isEdit = Boolean(updatePayload)
+  const [isUploading, setIsUploading] = React.useState(false)
+  const { handleUpload } = useGitHubUpload()
+
+  const handleUploadPackage = async () => {
+    if (isUploading) return
+    setIsUploading(true)
+    try {
+      const repo = repoUrl.replace('https://github.com/', '')
+      await handleUpload(repo, selectedVersion, selectedPackage, (GitHubPackage) => {
+        onUploaded({
+          uniqueIdentifier: GitHubPackage.unique_identifier,
+          manifest: GitHubPackage.manifest,
+        })
+      })
+    }
+    catch (e: any) {
+      if (e.response?.message)
+        onFailed(e.response?.message)
+      else
+        onFailed(t(`${i18nPrefix}.uploadFailed`))
+    }
+    finally {
+      setIsUploading(false)
+    }
+  }
+
+  return (
+    <>
+      <label
+        htmlFor='version'
+        className='flex flex-col items-start justify-center self-stretch text-text-secondary'
+      >
+        <span className='system-sm-semibold'>{t(`${i18nPrefix}.selectVersion`)}</span>
+      </label>
+      <PortalSelect
+        value={selectedVersion}
+        onSelect={onSelectVersion}
+        items={versions}
+        installedValue={updatePayload?.originalPackageInfo.version}
+        placeholder={t(`${i18nPrefix}.selectVersionPlaceholder`) || ''}
+        popupClassName='w-[512px] z-[1001]'
+        triggerClassName='text-components-input-text-filled'
+      />
+      <label
+        htmlFor='package'
+        className='flex flex-col items-start justify-center self-stretch text-text-secondary'
+      >
+        <span className='system-sm-semibold'>{t(`${i18nPrefix}.selectPackage`)}</span>
+      </label>
+      <PortalSelect
+        value={selectedPackage}
+        onSelect={onSelectPackage}
+        items={packages}
+        readonly={!selectedVersion}
+        placeholder={t(`${i18nPrefix}.selectPackagePlaceholder`) || ''}
+        popupClassName='w-[512px] z-[1001]'
+        triggerClassName='text-components-input-text-filled'
+      />
+      <div className='mt-4 flex items-center justify-end gap-2 self-stretch'>
+        {!isEdit
+          && <Button
+            variant='secondary'
+            className='min-w-[72px]'
+            onClick={onBack}
+            disabled={isUploading}
+          >
+            {t('plugin.installModal.back')}
+          </Button>
+        }
+        <Button
+          variant='primary'
+          className='min-w-[72px]'
+          onClick={handleUploadPackage}
+          disabled={!selectedVersion || !selectedPackage || isUploading}
+        >
+          {t('plugin.installModal.next')}
+        </Button>
+      </div>
+    </>
+  )
+}
+
+export default SelectPackage
--- a/dify/web/app/components/plugins/install-plugin/install-from-github/steps/setURL.tsx
+++ b/dify/web/app/components/plugins/install-plugin/install-from-github/steps/setURL.tsx
@@ -0,0 +1,56 @@
+'use client'
+
+import React from 'react'
+import Button from '@/app/components/base/button'
+import { useTranslation } from 'react-i18next'
+
+type SetURLProps = {
+  repoUrl: string
+  onChange: (value: string) => void
+  onNext: () => void
+  onCancel: () => void
+}
+
+const SetURL: React.FC<SetURLProps> = ({ repoUrl, onChange, onNext, onCancel }) => {
+  const { t } = useTranslation()
+  return (
+    <>
+      <label
+        htmlFor='repoUrl'
+        className='flex flex-col items-start justify-center self-stretch text-text-secondary'
+      >
+        <span className='system-sm-semibold'>{t('plugin.installFromGitHub.gitHubRepo')}</span>
+      </label>
+      <input
+        type='url'
+        id='repoUrl'
+        name='repoUrl'
+        value={repoUrl}
+        onChange={e => onChange(e.target.value)}
+        className='shadows-shadow-xs system-sm-regular flex grow items-center gap-[2px]
+          self-stretch overflow-hidden text-ellipsis rounded-lg border border-components-input-border-active
+          bg-components-input-bg-active p-2 text-components-input-text-filled'
+        placeholder='Please enter GitHub repo URL'
+      />
+      <div className='mt-4 flex items-center justify-end gap-2 self-stretch'>
+        <Button
+          variant='secondary'
+          className='min-w-[72px]'
+          onClick={onCancel}
+        >
+          {t('plugin.installModal.cancel')}
+        </Button>
+        <Button
+          variant='primary'
+          className='min-w-[72px]'
+          onClick={onNext}
+          disabled={!repoUrl.trim()}
+        >
+          {t('plugin.installModal.next')}
+        </Button>
+      </div>
+    </>
+  )
+}
+
+export default SetURL