Merge branch 'feat/plugins' of https://github.com/langgenius/dify into feat/plugins
twwu
1 year ago
commit
1a547b0db9
@ -0,0 +1,67 @@
|
||||
'use client'
|
||||
import { toolNeko } from '@/app/components/plugins/card/card-mock'
|
||||
import { PluginSource } from '@/app/components/plugins/types'
|
||||
import { useModalContext } from '@/context/modal-context'
|
||||
import React from 'react'
|
||||
|
||||
const UpdatePlugin = () => {
|
||||
const { setShowUpdatePluginModal } = useModalContext()
|
||||
const handleUpdateFromMarketPlace = () => {
|
||||
setShowUpdatePluginModal({
|
||||
payload: {
|
||||
type: PluginSource.marketplace,
|
||||
marketPlace: {
|
||||
originalPackageInfo: {
|
||||
id: 'langgenius/neko:0.0.1@9e57d693739287c0efdc96847d7ed959ca93f70aa704471f2eb7ed3313821824',
|
||||
payload: toolNeko as any,
|
||||
},
|
||||
targetPackageInfo: {
|
||||
id: 'target_xxx',
|
||||
version: '1.2.3',
|
||||
},
|
||||
},
|
||||
},
|
||||
onCancelCallback: () => {
|
||||
console.log('canceled')
|
||||
},
|
||||
onSaveCallback: () => {
|
||||
console.log('saved')
|
||||
},
|
||||
})
|
||||
}
|
||||
const handleUpdateFromGithub = () => {
|
||||
setShowUpdatePluginModal({
|
||||
payload: {
|
||||
type: PluginSource.github,
|
||||
github: {
|
||||
originalPackageInfo: {
|
||||
id: '111',
|
||||
repo: 'aaa/bbb',
|
||||
version: 'xxx',
|
||||
url: 'aaa/bbb',
|
||||
currVersion: '1.2.3',
|
||||
currPackage: 'pack1',
|
||||
} as any,
|
||||
},
|
||||
},
|
||||
onCancelCallback: () => {
|
||||
console.log('canceled')
|
||||
},
|
||||
onSaveCallback: () => {
|
||||
console.log('saved')
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div>更新组件</div>
|
||||
<div className='flex space-x-1'>
|
||||
<div className='underline cursor-pointer' onClick={handleUpdateFromMarketPlace}>从 Marketplace</div>
|
||||
<div className='underline cursor-pointer' onClick={handleUpdateFromGithub}>从 GitHub</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(UpdatePlugin)
|
||||
@ -0,0 +1,72 @@
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
export const useTags = () => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return [
|
||||
{
|
||||
name: 'search',
|
||||
label: t('pluginTags.search'),
|
||||
},
|
||||
{
|
||||
name: 'image',
|
||||
label: t('pluginTags.image'),
|
||||
},
|
||||
{
|
||||
name: 'videos',
|
||||
label: t('pluginTags.videos'),
|
||||
},
|
||||
{
|
||||
name: 'weather',
|
||||
label: t('pluginTags.weather'),
|
||||
},
|
||||
{
|
||||
name: 'finance',
|
||||
label: t('pluginTags.finance'),
|
||||
},
|
||||
{
|
||||
name: 'design',
|
||||
label: t('pluginTags.design'),
|
||||
},
|
||||
{
|
||||
name: 'travel',
|
||||
label: t('pluginTags.travel'),
|
||||
},
|
||||
{
|
||||
name: 'social',
|
||||
label: t('pluginTags.social'),
|
||||
},
|
||||
{
|
||||
name: 'news',
|
||||
label: t('pluginTags.news'),
|
||||
},
|
||||
{
|
||||
name: 'medical',
|
||||
label: t('pluginTags.medical'),
|
||||
},
|
||||
{
|
||||
name: 'productivity',
|
||||
label: t('pluginTags.productivity'),
|
||||
},
|
||||
{
|
||||
name: 'education',
|
||||
label: t('pluginTags.education'),
|
||||
},
|
||||
{
|
||||
name: 'business',
|
||||
label: t('pluginTags.business'),
|
||||
},
|
||||
{
|
||||
name: 'entertainment',
|
||||
label: t('pluginTags.entertainment'),
|
||||
},
|
||||
{
|
||||
name: 'utilities',
|
||||
label: t('pluginTags.utilities'),
|
||||
},
|
||||
{
|
||||
name: 'other',
|
||||
label: t('pluginTags.other'),
|
||||
},
|
||||
]
|
||||
}
|
||||
@ -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)
|
||||
@ -0,0 +1,121 @@
|
||||
'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 type { UpdateFromMarketPlacePayload } from '../types'
|
||||
import { pluginManifestToCardPluginProps } from '@/app/components/plugins/install-plugin/utils'
|
||||
import useGetIcon from '../install-plugin/base/use-get-icon'
|
||||
|
||||
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 [uploadStep, setUploadStep] = useState<UploadStep>(UploadStep.notStarted)
|
||||
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(() => {
|
||||
if (uploadStep === UploadStep.notStarted) {
|
||||
setUploadStep(UploadStep.upgrading)
|
||||
setTimeout(() => {
|
||||
setUploadStep(UploadStep.installed)
|
||||
}, 1500)
|
||||
return
|
||||
}
|
||||
if (uploadStep === UploadStep.installed) {
|
||||
onSave()
|
||||
onCancel()
|
||||
}
|
||||
}, [onCancel, onSave, uploadStep])
|
||||
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>
|
||||
<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>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex pt-5 justify-end items-center gap-2 self-stretch'>
|
||||
{uploadStep === UploadStep.notStarted && (
|
||||
<Button
|
||||
onClick={onCancel}
|
||||
>
|
||||
{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)
|
||||
@ -1,97 +1,33 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React, { useCallback, 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 { toolNotion } from '@/app/components/plugins/card/card-mock'
|
||||
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 i18nPrefix = 'plugin.upgrade'
|
||||
|
||||
type Props = {
|
||||
onHide: () => void
|
||||
}
|
||||
|
||||
enum UploadStep {
|
||||
notStarted = 'notStarted',
|
||||
upgrading = 'upgrading',
|
||||
installed = 'installed',
|
||||
}
|
||||
|
||||
const UpdatePluginModal: FC<Props> = ({
|
||||
onHide,
|
||||
const UpdatePlugin: FC<UpdatePluginModalType> = ({
|
||||
type,
|
||||
marketPlace,
|
||||
github,
|
||||
onCancel,
|
||||
onSave,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const [uploadStep, setUploadStep] = useState<UploadStep>(UploadStep.notStarted)
|
||||
const configBtnText = useMemo(() => {
|
||||
return ({
|
||||
[UploadStep.notStarted]: t(`${i18nPrefix}.upgrade`),
|
||||
[UploadStep.upgrading]: t(`${i18nPrefix}.upgrading`),
|
||||
[UploadStep.installed]: t(`${i18nPrefix}.close`),
|
||||
})[uploadStep]
|
||||
}, [uploadStep])
|
||||
const handleConfirm = useCallback(() => {
|
||||
if (uploadStep === UploadStep.notStarted) {
|
||||
setUploadStep(UploadStep.upgrading)
|
||||
setTimeout(() => {
|
||||
setUploadStep(UploadStep.installed)
|
||||
}, 1500)
|
||||
return
|
||||
}
|
||||
if (uploadStep === UploadStep.installed)
|
||||
onHide()
|
||||
}, [uploadStep])
|
||||
if (type === PluginSource.github) {
|
||||
return (
|
||||
<UpdateFromGitHub
|
||||
payload={github!}
|
||||
onSave={onSave}
|
||||
onCancel={onCancel}
|
||||
/>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<Modal
|
||||
isShow={true}
|
||||
onClose={onHide}
|
||||
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={toolNotion as any}
|
||||
className='w-full'
|
||||
titleLeft={
|
||||
<>
|
||||
<Badge className='mx-1' size="s" state={BadgeState.Warning}>
|
||||
{'1.2.0 -> 1.3.2'}
|
||||
</Badge>
|
||||
<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>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex pt-5 justify-end items-center gap-2 self-stretch'>
|
||||
{uploadStep === UploadStep.notStarted && (
|
||||
<Button
|
||||
onClick={onHide}
|
||||
>
|
||||
{t('common.operation.cancel')}
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant='primary'
|
||||
loading={uploadStep === UploadStep.upgrading}
|
||||
onClick={handleConfirm}
|
||||
disabled={uploadStep === UploadStep.upgrading}
|
||||
>
|
||||
{configBtnText}
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
<UpdateFromMarketplace
|
||||
payload={marketPlace!}
|
||||
onSave={onSave}
|
||||
onCancel={onCancel}
|
||||
/>
|
||||
)
|
||||
}
|
||||
export default React.memo(UpdatePluginModal)
|
||||
export default React.memo(UpdatePlugin)
|
||||
|
||||
@ -1,6 +1,4 @@
|
||||
import type { TypeWithI18N } from '@/app/components/header/account-setting/model-provider-page/declarations'
|
||||
export type Label = {
|
||||
name: string
|
||||
icon: string
|
||||
label: TypeWithI18N
|
||||
label: string
|
||||
}
|
||||
|
||||
@ -1,15 +0,0 @@
|
||||
import { create } from 'zustand'
|
||||
import type { Label } from './constant'
|
||||
|
||||
type State = {
|
||||
labelList: Label[]
|
||||
}
|
||||
|
||||
type Action = {
|
||||
setLabelList: (labelList?: Label[]) => void
|
||||
}
|
||||
|
||||
export const useStore = create<State & Action>(set => ({
|
||||
labelList: [],
|
||||
setLabelList: labelList => set(() => ({ labelList })),
|
||||
}))
|
||||
@ -0,0 +1,4 @@
|
||||
const translation = {
|
||||
}
|
||||
|
||||
export default translation
|
||||
@ -0,0 +1,20 @@
|
||||
const translation = {
|
||||
search: 'Search',
|
||||
image: 'Image',
|
||||
videos: 'Videos',
|
||||
weather: 'Weather',
|
||||
finance: 'Finance',
|
||||
design: 'Design',
|
||||
travel: 'Travel',
|
||||
social: 'Social',
|
||||
news: 'News',
|
||||
medical: 'Medical',
|
||||
productivity: 'Productivity',
|
||||
education: 'Education',
|
||||
business: 'Business',
|
||||
entertainment: 'Entertainment',
|
||||
utilities: 'Utilities',
|
||||
other: 'Other',
|
||||
}
|
||||
|
||||
export default translation
|
||||
@ -0,0 +1,4 @@
|
||||
const translation = {
|
||||
}
|
||||
|
||||
export default translation
|
||||
@ -0,0 +1,4 @@
|
||||
const translation = {
|
||||
}
|
||||
|
||||
export default translation
|
||||
@ -0,0 +1,4 @@
|
||||
const translation = {
|
||||
}
|
||||
|
||||
export default translation
|
||||
@ -0,0 +1,4 @@
|
||||
const translation = {
|
||||
}
|
||||
|
||||
export default translation
|
||||
@ -0,0 +1,4 @@
|
||||
const translation = {
|
||||
}
|
||||
|
||||
export default translation
|
||||
@ -0,0 +1,4 @@
|
||||
const translation = {
|
||||
}
|
||||
|
||||
export default translation
|
||||
@ -0,0 +1,4 @@
|
||||
const translation = {
|
||||
}
|
||||
|
||||
export default translation
|
||||
@ -0,0 +1,4 @@
|
||||
const translation = {
|
||||
}
|
||||
|
||||
export default translation
|
||||
@ -0,0 +1,4 @@
|
||||
const translation = {
|
||||
}
|
||||
|
||||
export default translation
|
||||
@ -0,0 +1,4 @@
|
||||
const translation = {
|
||||
}
|
||||
|
||||
export default translation
|
||||
@ -0,0 +1,4 @@
|
||||
const translation = {
|
||||
}
|
||||
|
||||
export default translation
|
||||
@ -0,0 +1,4 @@
|
||||
const translation = {
|
||||
}
|
||||
|
||||
export default translation
|
||||
@ -0,0 +1,4 @@
|
||||
const translation = {
|
||||
}
|
||||
|
||||
export default translation
|
||||
@ -0,0 +1,4 @@
|
||||
const translation = {
|
||||
}
|
||||
|
||||
export default translation
|
||||
@ -0,0 +1,20 @@
|
||||
const translation = {
|
||||
search: '搜索',
|
||||
image: '图片',
|
||||
videos: '视频',
|
||||
weather: '天气',
|
||||
finance: '金融',
|
||||
design: '设计',
|
||||
travel: '旅行',
|
||||
social: '社交',
|
||||
news: '新闻',
|
||||
medical: '医疗',
|
||||
productivity: '生产力',
|
||||
education: '教育',
|
||||
business: '商业',
|
||||
entertainment: '娱乐',
|
||||
utilities: '工具',
|
||||
other: '其他',
|
||||
}
|
||||
|
||||
export default translation
|
||||
@ -0,0 +1,4 @@
|
||||
const translation = {
|
||||
}
|
||||
|
||||
export default translation
|
||||
Loading…
Reference in New Issue