dify
This commit is contained in:
@@ -0,0 +1,30 @@
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import {
|
||||
RiExternalLinkLine,
|
||||
RiPuzzle2Line,
|
||||
} from '@remixicon/react'
|
||||
import { useDocLink } from '@/context/i18n'
|
||||
|
||||
const Empty = () => {
|
||||
const { t } = useTranslation()
|
||||
const docLink = useDocLink()
|
||||
|
||||
return (
|
||||
<div className='mb-2 rounded-xl bg-background-section p-6'>
|
||||
<div className='mb-3 flex h-10 w-10 items-center justify-center rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg-alt shadow-lg backdrop-blur-sm'>
|
||||
<RiPuzzle2Line className='h-5 w-5 text-text-accent' />
|
||||
</div>
|
||||
<div className='system-sm-medium mb-1 text-text-secondary'>{t('common.apiBasedExtension.title')}</div>
|
||||
<a
|
||||
className='system-xs-regular flex items-center text-text-accent'
|
||||
href={docLink('/guides/extension/api-based-extension/README')}
|
||||
target='_blank' rel='noopener noreferrer'
|
||||
>
|
||||
{t('common.apiBasedExtension.link')}
|
||||
<RiExternalLinkLine className='ml-1 h-3 w-3' />
|
||||
</a>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Empty
|
||||
@@ -0,0 +1,57 @@
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import useSWR from 'swr'
|
||||
import {
|
||||
RiAddLine,
|
||||
} from '@remixicon/react'
|
||||
import Item from './item'
|
||||
import Empty from './empty'
|
||||
import Button from '@/app/components/base/button'
|
||||
import { useModalContext } from '@/context/modal-context'
|
||||
import { fetchApiBasedExtensionList } from '@/service/common'
|
||||
|
||||
const ApiBasedExtensionPage = () => {
|
||||
const { t } = useTranslation()
|
||||
const { setShowApiBasedExtensionModal } = useModalContext()
|
||||
const { data, mutate, isLoading } = useSWR(
|
||||
'/api-based-extension',
|
||||
fetchApiBasedExtensionList,
|
||||
)
|
||||
|
||||
const handleOpenApiBasedExtensionModal = () => {
|
||||
setShowApiBasedExtensionModal({
|
||||
payload: {},
|
||||
onSaveCallback: () => mutate(),
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{
|
||||
!isLoading && !data?.length && (
|
||||
<Empty />
|
||||
)
|
||||
}
|
||||
{
|
||||
!isLoading && !!data?.length && (
|
||||
data.map(item => (
|
||||
<Item
|
||||
key={item.id}
|
||||
data={item}
|
||||
onUpdate={() => mutate()}
|
||||
/>
|
||||
))
|
||||
)
|
||||
}
|
||||
<Button
|
||||
variant='secondary'
|
||||
className='w-full'
|
||||
onClick={handleOpenApiBasedExtensionModal}
|
||||
>
|
||||
<RiAddLine className='mr-1 h-4 w-4' />
|
||||
{t('common.apiBasedExtension.add')}
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ApiBasedExtensionPage
|
||||
@@ -0,0 +1,74 @@
|
||||
import type { FC } from 'react'
|
||||
import { useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import {
|
||||
RiDeleteBinLine,
|
||||
RiEditLine,
|
||||
} from '@remixicon/react'
|
||||
import Button from '@/app/components/base/button'
|
||||
import type { ApiBasedExtension } from '@/models/common'
|
||||
import { useModalContext } from '@/context/modal-context'
|
||||
import { deleteApiBasedExtension } from '@/service/common'
|
||||
import Confirm from '@/app/components/base/confirm'
|
||||
|
||||
type ItemProps = {
|
||||
data: ApiBasedExtension
|
||||
onUpdate: () => void
|
||||
}
|
||||
const Item: FC<ItemProps> = ({
|
||||
data,
|
||||
onUpdate,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const { setShowApiBasedExtensionModal } = useModalContext()
|
||||
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
|
||||
|
||||
const handleOpenApiBasedExtensionModal = () => {
|
||||
setShowApiBasedExtensionModal({
|
||||
payload: data,
|
||||
onSaveCallback: () => onUpdate(),
|
||||
})
|
||||
}
|
||||
const handleDeleteApiBasedExtension = async () => {
|
||||
await deleteApiBasedExtension(`/api-based-extension/${data.id}`)
|
||||
|
||||
setShowDeleteConfirm(false)
|
||||
onUpdate()
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='group mb-2 flex items-center rounded-xl border-[0.5px] border-transparent bg-components-input-bg-normal px-4 py-2 hover:border-components-input-border-active hover:shadow-xs'>
|
||||
<div className='grow'>
|
||||
<div className='mb-0.5 text-[13px] font-medium text-text-secondary'>{data.name}</div>
|
||||
<div className='text-xs text-text-tertiary'>{data.api_endpoint}</div>
|
||||
</div>
|
||||
<div className='hidden items-center group-hover:flex'>
|
||||
<Button
|
||||
className='mr-1'
|
||||
onClick={handleOpenApiBasedExtensionModal}
|
||||
>
|
||||
<RiEditLine className='mr-1 h-4 w-4' />
|
||||
{t('common.operation.edit')}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => setShowDeleteConfirm(true)}
|
||||
>
|
||||
<RiDeleteBinLine className='mr-1 h-4 w-4' />
|
||||
{t('common.operation.delete')}
|
||||
</Button>
|
||||
</div>
|
||||
{
|
||||
showDeleteConfirm
|
||||
&& <Confirm
|
||||
isShow={showDeleteConfirm}
|
||||
onCancel={() => setShowDeleteConfirm(false)}
|
||||
title={`${t('common.operation.delete')} “${data.name}”?`}
|
||||
onConfirm={handleDeleteApiBasedExtension}
|
||||
confirmText={t('common.operation.delete') || ''}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Item
|
||||
@@ -0,0 +1,152 @@
|
||||
import type { FC } from 'react'
|
||||
import { useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useDocLink } from '@/context/i18n'
|
||||
import Modal from '@/app/components/base/modal'
|
||||
import Button from '@/app/components/base/button'
|
||||
import { BookOpen01 } from '@/app/components/base/icons/src/vender/line/education'
|
||||
import type { ApiBasedExtension } from '@/models/common'
|
||||
import {
|
||||
addApiBasedExtension,
|
||||
updateApiBasedExtension,
|
||||
} from '@/service/common'
|
||||
import { useToastContext } from '@/app/components/base/toast'
|
||||
import { noop } from 'lodash-es'
|
||||
|
||||
export type ApiBasedExtensionData = {
|
||||
name?: string
|
||||
apiEndpoint?: string
|
||||
apiKey?: string
|
||||
}
|
||||
|
||||
type ApiBasedExtensionModalProps = {
|
||||
data: ApiBasedExtension
|
||||
onCancel: () => void
|
||||
onSave?: (newData: ApiBasedExtension) => void
|
||||
}
|
||||
const ApiBasedExtensionModal: FC<ApiBasedExtensionModalProps> = ({
|
||||
data,
|
||||
onCancel,
|
||||
onSave,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const docLink = useDocLink()
|
||||
const [localeData, setLocaleData] = useState(data)
|
||||
const [loading, setLoading] = useState(false)
|
||||
const { notify } = useToastContext()
|
||||
const handleDataChange = (type: string, value: string) => {
|
||||
setLocaleData({ ...localeData, [type]: value })
|
||||
}
|
||||
const handleSave = async () => {
|
||||
setLoading(true)
|
||||
|
||||
if (localeData && localeData.api_key && localeData.api_key?.length < 5) {
|
||||
notify({ type: 'error', message: t('common.apiBasedExtension.modal.apiKey.lengthError') })
|
||||
setLoading(false)
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
let res: ApiBasedExtension = {}
|
||||
if (!data.id) {
|
||||
res = await addApiBasedExtension({
|
||||
url: '/api-based-extension',
|
||||
body: localeData,
|
||||
})
|
||||
}
|
||||
else {
|
||||
res = await updateApiBasedExtension({
|
||||
url: `/api-based-extension/${data.id}`,
|
||||
body: {
|
||||
...localeData,
|
||||
api_key: data.api_key === localeData.api_key ? '[__HIDDEN__]' : localeData.api_key,
|
||||
},
|
||||
})
|
||||
|
||||
notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
|
||||
}
|
||||
|
||||
if (onSave)
|
||||
onSave(res)
|
||||
}
|
||||
finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal
|
||||
isShow
|
||||
onClose={noop}
|
||||
className='!w-[640px] !max-w-none !p-8 !pb-6'
|
||||
>
|
||||
<div className='mb-2 text-xl font-semibold text-text-primary'>
|
||||
{
|
||||
data.name
|
||||
? t('common.apiBasedExtension.modal.editTitle')
|
||||
: t('common.apiBasedExtension.modal.title')
|
||||
}
|
||||
</div>
|
||||
<div className='py-2'>
|
||||
<div className='text-sm font-medium leading-9 text-text-primary'>
|
||||
{t('common.apiBasedExtension.modal.name.title')}
|
||||
</div>
|
||||
<input
|
||||
value={localeData.name || ''}
|
||||
onChange={e => handleDataChange('name', e.target.value)}
|
||||
className='block h-9 w-full appearance-none rounded-lg bg-components-input-bg-normal px-3 text-sm text-text-primary outline-none'
|
||||
placeholder={t('common.apiBasedExtension.modal.name.placeholder') || ''}
|
||||
/>
|
||||
</div>
|
||||
<div className='py-2'>
|
||||
<div className='flex h-9 items-center justify-between text-sm font-medium text-text-primary'>
|
||||
{t('common.apiBasedExtension.modal.apiEndpoint.title')}
|
||||
<a
|
||||
href={docLink('/guides/extension/api-based-extension/README')}
|
||||
target='_blank' rel='noopener noreferrer'
|
||||
className='group flex items-center text-xs font-normal text-text-accent'
|
||||
>
|
||||
<BookOpen01 className='mr-1 h-3 w-3' />
|
||||
{t('common.apiBasedExtension.link')}
|
||||
</a>
|
||||
</div>
|
||||
<input
|
||||
value={localeData.api_endpoint || ''}
|
||||
onChange={e => handleDataChange('api_endpoint', e.target.value)}
|
||||
className='block h-9 w-full appearance-none rounded-lg bg-components-input-bg-normal px-3 text-sm text-text-primary outline-none'
|
||||
placeholder={t('common.apiBasedExtension.modal.apiEndpoint.placeholder') || ''}
|
||||
/>
|
||||
</div>
|
||||
<div className='py-2'>
|
||||
<div className='text-sm font-medium leading-9 text-text-primary'>
|
||||
{t('common.apiBasedExtension.modal.apiKey.title')}
|
||||
</div>
|
||||
<div className='flex items-center'>
|
||||
<input
|
||||
value={localeData.api_key || ''}
|
||||
onChange={e => handleDataChange('api_key', e.target.value)}
|
||||
className='mr-2 block h-9 grow appearance-none rounded-lg bg-components-input-bg-normal px-3 text-sm text-text-primary outline-none'
|
||||
placeholder={t('common.apiBasedExtension.modal.apiKey.placeholder') || ''}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='mt-6 flex items-center justify-end'>
|
||||
<Button
|
||||
onClick={onCancel}
|
||||
className='mr-2'
|
||||
>
|
||||
{t('common.operation.cancel')}
|
||||
</Button>
|
||||
<Button
|
||||
variant='primary'
|
||||
disabled={!localeData.name || !localeData.api_endpoint || !localeData.api_key || loading}
|
||||
onClick={handleSave}
|
||||
>
|
||||
{t('common.operation.save')}
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
export default ApiBasedExtensionModal
|
||||
@@ -0,0 +1,128 @@
|
||||
import type { FC } from 'react'
|
||||
import { useState } from 'react'
|
||||
import useSWR from 'swr'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import {
|
||||
RiAddLine,
|
||||
RiArrowDownSLine,
|
||||
} from '@remixicon/react'
|
||||
import {
|
||||
PortalToFollowElem,
|
||||
PortalToFollowElemContent,
|
||||
PortalToFollowElemTrigger,
|
||||
} from '@/app/components/base/portal-to-follow-elem'
|
||||
import {
|
||||
ArrowUpRight,
|
||||
} from '@/app/components/base/icons/src/vender/line/arrows'
|
||||
import { useModalContext } from '@/context/modal-context'
|
||||
import { fetchApiBasedExtensionList } from '@/service/common'
|
||||
import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
|
||||
|
||||
type ApiBasedExtensionSelectorProps = {
|
||||
value: string
|
||||
onChange: (value: string) => void
|
||||
}
|
||||
|
||||
const ApiBasedExtensionSelector: FC<ApiBasedExtensionSelectorProps> = ({
|
||||
value,
|
||||
onChange,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const [open, setOpen] = useState(false)
|
||||
const {
|
||||
setShowAccountSettingModal,
|
||||
setShowApiBasedExtensionModal,
|
||||
} = useModalContext()
|
||||
const { data, mutate } = useSWR(
|
||||
'/api-based-extension',
|
||||
fetchApiBasedExtensionList,
|
||||
)
|
||||
const handleSelect = (id: string) => {
|
||||
onChange(id)
|
||||
setOpen(false)
|
||||
}
|
||||
|
||||
const currentItem = data?.find(item => item.id === value)
|
||||
|
||||
return (
|
||||
<PortalToFollowElem
|
||||
open={open}
|
||||
onOpenChange={setOpen}
|
||||
placement='bottom-start'
|
||||
offset={4}
|
||||
>
|
||||
<PortalToFollowElemTrigger onClick={() => setOpen(v => !v)} className='w-full'>
|
||||
{
|
||||
currentItem
|
||||
? (
|
||||
<div className='flex h-9 cursor-pointer items-center justify-between rounded-lg bg-components-input-bg-normal pl-3 pr-2.5'>
|
||||
<div className='text-sm text-text-primary'>{currentItem.name}</div>
|
||||
<div className='flex items-center'>
|
||||
<div className='mr-1.5 w-[270px] truncate text-right text-xs text-text-quaternary'>
|
||||
{currentItem.api_endpoint}
|
||||
</div>
|
||||
<RiArrowDownSLine className={`h-4 w-4 text-text-secondary ${!open && 'opacity-60'}`} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
: (
|
||||
<div className='flex h-9 cursor-pointer items-center justify-between rounded-lg bg-components-input-bg-normal pl-3 pr-2.5 text-sm text-text-quaternary'>
|
||||
{t('common.apiBasedExtension.selector.placeholder')}
|
||||
<RiArrowDownSLine className={`h-4 w-4 text-text-secondary ${!open && 'opacity-60'}`} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</PortalToFollowElemTrigger>
|
||||
<PortalToFollowElemContent className='z-[102] w-[calc(100%-32px)] max-w-[576px]'>
|
||||
<div className='z-10 w-full rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg'>
|
||||
<div className='p-1'>
|
||||
<div className='flex items-center justify-between px-3 pb-1 pt-2'>
|
||||
<div className='text-xs font-medium text-text-tertiary'>
|
||||
{t('common.apiBasedExtension.selector.title')}
|
||||
</div>
|
||||
<div
|
||||
className='flex cursor-pointer items-center text-xs text-text-accent'
|
||||
onClick={() => {
|
||||
setOpen(false)
|
||||
setShowAccountSettingModal({ payload: ACCOUNT_SETTING_TAB.API_BASED_EXTENSION })
|
||||
}}
|
||||
>
|
||||
{t('common.apiBasedExtension.selector.manage')}
|
||||
<ArrowUpRight className='ml-0.5 h-3 w-3' />
|
||||
</div>
|
||||
</div>
|
||||
<div className='max-h-[250px] overflow-y-auto'>
|
||||
{
|
||||
data?.map(item => (
|
||||
<div
|
||||
key={item.id}
|
||||
className='w-full cursor-pointer rounded-md px-3 py-1.5 text-left hover:stroke-state-base-hover'
|
||||
onClick={() => handleSelect(item.id!)}
|
||||
>
|
||||
<div className='text-sm text-text-primary'>{item.name}</div>
|
||||
<div className='text-xs text-text-tertiary'>{item.api_endpoint}</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div className='h-px bg-divider-regular' />
|
||||
<div className='p-1'>
|
||||
<div
|
||||
className='flex h-8 cursor-pointer items-center px-3 text-sm text-text-accent'
|
||||
onClick={() => {
|
||||
setOpen(false)
|
||||
setShowApiBasedExtensionModal({ payload: {}, onSaveCallback: () => mutate() })
|
||||
}}
|
||||
>
|
||||
<RiAddLine className='mr-2 h-4 w-4' />
|
||||
{t('common.operation.add')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PortalToFollowElemContent>
|
||||
</PortalToFollowElem>
|
||||
)
|
||||
}
|
||||
|
||||
export default ApiBasedExtensionSelector
|
||||
Reference in New Issue
Block a user