File size: 4,257 Bytes
4304c6d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 |
'use client'
import type { MouseEventHandler } from 'react'
import cn from 'classnames'
import { useState } from 'react'
import { BookOpenIcon } from '@heroicons/react/24/outline'
import { useContext } from 'use-context-selector'
import { useTranslation } from 'react-i18next'
import Button from '@/app/components/base/button'
import Modal from '@/app/components/base/modal'
import { ToastContext } from '@/app/components/base/toast'
import { XClose } from '@/app/components/base/icons/src/vender/line/general'
import type { DataSet } from '@/models/datasets'
import { updateDatasetSetting } from '@/service/datasets'
type RenameDatasetModalProps = {
show: boolean
dataset: DataSet
onSuccess?: () => void
onClose: () => void
}
const RenameDatasetModal = ({ show, dataset, onSuccess, onClose }: RenameDatasetModalProps) => {
const { t } = useTranslation()
const { notify } = useContext(ToastContext)
const [loading, setLoading] = useState(false)
const [name, setName] = useState<string>(dataset.name)
const [description, setDescription] = useState<string>(dataset.description)
const onConfirm: MouseEventHandler = async () => {
if (!name.trim()) {
notify({ type: 'error', message: t('datasetSettings.form.nameError') })
return
}
try {
setLoading(true)
await updateDatasetSetting({
datasetId: dataset.id,
body: {
name,
description,
},
})
notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
if (onSuccess)
onSuccess()
onClose()
}
catch (e) {
notify({ type: 'error', message: t('common.actionMsg.modifiedUnsuccessfully') })
}
finally {
setLoading(false)
}
}
return (
<Modal
wrapperClassName='z-20'
className='px-8 py-6 max-w-[520px] w-[520px] rounded-xl'
isShow={show}
onClose={() => {}}
>
<div className='relative pb-2 text-xl font-medium leading-[30px] text-gray-900'>{t('datasetSettings.title')}</div>
<div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={onClose}>
<XClose className='w-4 h-4 text-gray-500' />
</div>
<div>
<div className={cn('flex justify-between py-4 flex-wrap items-center')}>
<div className='shrink-0 py-2 text-sm font-medium leading-[20px] text-gray-900'>
{t('datasetSettings.form.name')}
</div>
<input
value={name}
onChange={e => setName(e.target.value)}
className='block px-3 w-full h-9 bg-gray-100 rounded-lg text-sm text-gray-900 outline-none appearance-none'
placeholder={t('datasetSettings.form.namePlaceholder') || ''}
/>
</div>
<div className={cn('flex justify-between py-4 flex-wrap items-center')}>
<div className='shrink-0 py-2 text-sm font-medium leading-[20px] text-gray-900'>
{t('datasetSettings.form.desc')}
</div>
<div className='w-full'>
<textarea
value={description}
onChange={e => setDescription(e.target.value)}
className='block px-3 py-2 w-full h-[88px] rounded-lg bg-gray-100 text-sm outline-none appearance-none resize-none'
placeholder={t('datasetSettings.form.descPlaceholder') || ''}
/>
<a className='mt-2 flex items-center h-[18px] px-3 text-xs text-gray-500 hover:text-primary-600' href="https://docs.dify.ai/features/datasets#how-to-write-a-good-dataset-description" target='_blank' rel='noopener noreferrer'>
<BookOpenIcon className='w-3 h-[18px] mr-1' />
{t('datasetSettings.form.descWrite')}
</a>
</div>
</div>
</div>
<div className='pt-6 flex justify-end'>
<Button className='mr-2 text-gray-700 text-sm font-medium' onClick={onClose}>{t('common.operation.cancel')}</Button>
<Button className='text-sm font-medium' disabled={loading} type="primary" onClick={onConfirm}>{t('common.operation.save')}</Button>
</div>
</Modal>
)
}
export default RenameDatasetModal
|