DatasetCard.tsx 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245
  1. 'use client'
  2. import { useContext } from 'use-context-selector'
  3. import { useRouter } from 'next/navigation'
  4. import { useCallback, useEffect, useState } from 'react'
  5. import { useTranslation } from 'react-i18next'
  6. import { RiMoreFill } from '@remixicon/react'
  7. import cn from '@/utils/classnames'
  8. import Confirm from '@/app/components/base/confirm'
  9. import { ToastContext } from '@/app/components/base/toast'
  10. import { checkIsUsedInApp, deleteDataset } from '@/service/datasets'
  11. import type { DataSet } from '@/models/datasets'
  12. import Tooltip from '@/app/components/base/tooltip'
  13. import { Folder } from '@/app/components/base/icons/src/vender/solid/files'
  14. import type { HtmlContentProps } from '@/app/components/base/popover'
  15. import CustomPopover from '@/app/components/base/popover'
  16. import Divider from '@/app/components/base/divider'
  17. import RenameDatasetModal from '@/app/components/datasets/rename-modal'
  18. import type { Tag } from '@/app/components/base/tag-management/constant'
  19. import TagSelector from '@/app/components/base/tag-management/selector'
  20. import CornerLabel from '@/app/components/base/corner-label'
  21. import { useAppContext } from '@/context/app-context'
  22. export type DatasetCardProps = {
  23. dataset: DataSet
  24. onSuccess?: () => void,
  25. optionsType: any[]
  26. }
  27. const DatasetCard = ({
  28. dataset,
  29. onSuccess,
  30. optionsType,
  31. }: DatasetCardProps) => {
  32. const { t } = useTranslation()
  33. const { notify } = useContext(ToastContext)
  34. const { push } = useRouter()
  35. const EXTERNAL_PROVIDER = 'external' as const
  36. const { isCurrentWorkspaceDatasetOperator } = useAppContext()
  37. const [tags, setTags] = useState<Tag[]>(dataset.tags)
  38. const [type, setType] = useState<any>(dataset.type)
  39. const [showRenameModal, setShowRenameModal] = useState(false)
  40. const [showConfirmDelete, setShowConfirmDelete] = useState(false)
  41. const [confirmMessage, setConfirmMessage] = useState<string>('')
  42. const isExternalProvider = (provider: string): boolean => provider === EXTERNAL_PROVIDER
  43. const detectIsUsedByApp = useCallback(async () => {
  44. try {
  45. const { is_using: isUsedByApp } = await checkIsUsedInApp(dataset.id)
  46. setConfirmMessage(isUsedByApp ? t('dataset.datasetUsedByApp')! : t('dataset.deleteDatasetConfirmContent')!)
  47. }
  48. catch (e: any) {
  49. const res = await e.json()
  50. notify({ type: 'error', message: res?.message || 'Unknown error' })
  51. }
  52. setShowConfirmDelete(true)
  53. }, [dataset.id, notify, t])
  54. const onConfirmDelete = useCallback(async () => {
  55. try {
  56. await deleteDataset(dataset.id)
  57. notify({ type: 'success', message: t('dataset.datasetDeleted') })
  58. if (onSuccess)
  59. onSuccess()
  60. }
  61. catch (e: any) {
  62. }
  63. setShowConfirmDelete(false)
  64. }, [dataset.id, notify, onSuccess, t])
  65. const Operations = (props: HtmlContentProps & { showDelete: boolean }) => {
  66. const onMouseLeave = async () => {
  67. props.onClose?.()
  68. }
  69. const onClickRename = async (e: React.MouseEvent<HTMLDivElement>) => {
  70. e.stopPropagation()
  71. props.onClick?.()
  72. e.preventDefault()
  73. setShowRenameModal(true)
  74. }
  75. const onClickDelete = async (e: React.MouseEvent<HTMLDivElement>) => {
  76. e.stopPropagation()
  77. props.onClick?.()
  78. e.preventDefault()
  79. detectIsUsedByApp()
  80. }
  81. return (
  82. <div className="relative w-full py-1" onMouseLeave={onMouseLeave}>
  83. <div className='mx-1 flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 py-[6px] hover:bg-state-base-hover' onClick={onClickRename}>
  84. <span className='text-sm text-text-secondary'>{t('common.operation.settings')}</span>
  85. </div>
  86. {props.showDelete && (
  87. <>
  88. <Divider className="!my-1" />
  89. <div
  90. className='group mx-1 flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 py-[6px] hover:bg-state-destructive-hover'
  91. onClick={onClickDelete}
  92. >
  93. <span className={cn('text-sm text-text-secondary', 'group-hover:text-text-destructive')}>
  94. {t('common.operation.delete')}
  95. </span>
  96. </div>
  97. </>
  98. )}
  99. </div>
  100. )
  101. }
  102. useEffect(() => {
  103. setTags(dataset.tags)
  104. }, [dataset])
  105. return (
  106. <>
  107. <div
  108. className='group relative col-span-1 flex min-h-[160px] cursor-pointer flex-col rounded-xl border-[0.5px] border-solid border-components-card-border bg-components-card-bg shadow-sm transition-all duration-200 ease-in-out hover:shadow-lg'
  109. data-disable-nprogress={true}
  110. onClick={(e) => {
  111. e.preventDefault()
  112. isExternalProvider(dataset.provider)
  113. ? push(`/datasets/${dataset.id}/hitTesting`)
  114. : push(`/datasets/${dataset.id}/documents`)
  115. }}
  116. >
  117. {isExternalProvider(dataset.provider) && <CornerLabel label='External' className='absolute right-0' labelClassName='rounded-tr-xl' />}
  118. <div className='flex h-[66px] shrink-0 grow-0 items-center gap-3 px-[14px] pb-3 pt-[14px]'>
  119. <div className={cn(
  120. 'flex shrink-0 items-center justify-center rounded-md border-[0.5px] border-[#E0EAFF] bg-[#F5F8FF] p-2.5',
  121. !dataset.embedding_available && 'opacity-50 hover:opacity-100',
  122. )}>
  123. <Folder className='h-5 w-5 text-[#444CE7]' />
  124. </div>
  125. <div className='w-0 grow py-[1px]'>
  126. <div className='flex items-center text-sm font-semibold leading-5 text-text-secondary'>
  127. <div className={cn('truncate', !dataset.embedding_available && 'text-text-tertiary opacity-50 hover:opacity-100')} title={dataset.name}>{dataset.name}</div>
  128. {!dataset.embedding_available && (
  129. <Tooltip
  130. popupContent={t('dataset.unavailableTip')}
  131. >
  132. <span className='ml-1 inline-flex w-max shrink-0 rounded-md border border-divider-regular px-1 text-xs font-normal leading-[18px] text-text-tertiary'>{t('dataset.unavailable')}</span>
  133. </Tooltip>
  134. )}
  135. </div>
  136. <div className='mt-[1px] flex items-center text-xs leading-[18px] text-text-tertiary'>
  137. <div
  138. className={cn('truncate', (!dataset.embedding_available || !dataset.document_count) && 'opacity-50')}
  139. title={dataset.provider === 'external' ? `${dataset.app_count}${t('dataset.appCount')}` : `${dataset.document_count}${t('dataset.documentCount')} · ${Math.round(dataset.word_count / 1000)}${t('dataset.wordCount')} · ${dataset.app_count}${t('dataset.appCount')}`}
  140. >
  141. {dataset.provider === 'external'
  142. ? <>
  143. <span>{dataset.app_count}{t('dataset.appCount')}</span>
  144. </>
  145. : <>
  146. <span>{dataset.document_count}{t('dataset.documentCount')}</span>
  147. <span className='mx-0.5 w-1 shrink-0 text-text-tertiary'>·</span>
  148. <span>{Math.round(dataset.word_count / 1000)}{t('dataset.wordCount')}</span>
  149. <span className='mx-0.5 w-1 shrink-0 text-text-tertiary'>·</span>
  150. <span>{dataset.app_count}{t('dataset.appCount')}</span>
  151. </>
  152. }
  153. </div>
  154. </div>
  155. </div>
  156. <div>{optionsType.filter((v: any) => v.value === type)[0]?.name}</div>
  157. </div>
  158. <div
  159. className={cn(
  160. 'mb-2 max-h-[72px] grow px-[14px] text-xs leading-normal text-text-tertiary group-hover:line-clamp-2 group-hover:max-h-[36px]',
  161. tags.length ? 'line-clamp-2' : 'line-clamp-4',
  162. !dataset.embedding_available && 'opacity-50 hover:opacity-100',
  163. )}
  164. title={dataset.description}>
  165. {dataset.description}
  166. </div>
  167. <div className={cn(
  168. 'mt-1 h-[42px] shrink-0 items-center pb-[6px] pl-[14px] pr-[6px] pt-1',
  169. tags.length ? 'flex' : '!hidden group-hover:!flex',
  170. )}>
  171. <div className={cn('flex w-0 grow items-center gap-1', !dataset.embedding_available && 'opacity-50 hover:opacity-100')} onClick={(e) => {
  172. e.stopPropagation()
  173. e.preventDefault()
  174. }}>
  175. <div className={cn(
  176. 'mr-[41px] w-full grow group-hover:!mr-0 group-hover:!block',
  177. tags.length ? '!block' : '!hidden',
  178. )}>
  179. <TagSelector
  180. position='bl'
  181. type='knowledge'
  182. targetID={dataset.id}
  183. value={tags.map(tag => tag.id)}
  184. selectedTags={tags}
  185. onCacheUpdate={setTags}
  186. onChange={onSuccess}
  187. />
  188. </div>
  189. </div>
  190. <div className='mx-1 !hidden h-[14px] w-[1px] shrink-0 bg-divider-regular group-hover:!flex' />
  191. <div className='!hidden shrink-0 group-hover:!flex'>
  192. <CustomPopover
  193. htmlContent={<Operations showDelete={!isCurrentWorkspaceDatasetOperator} />}
  194. position="br"
  195. trigger="click"
  196. btnElement={
  197. <div
  198. className='flex h-8 w-8 cursor-pointer items-center justify-center rounded-md'
  199. >
  200. <RiMoreFill className='h-4 w-4 text-text-secondary' />
  201. </div>
  202. }
  203. btnClassName={open =>
  204. cn(
  205. open ? '!bg-black/5 !shadow-none' : '!bg-transparent',
  206. 'h-8 w-8 rounded-md border-none !p-2 hover:!bg-black/5',
  207. )
  208. }
  209. className={'!z-20 h-fit !w-[128px]'}
  210. />
  211. </div>
  212. </div>
  213. </div>
  214. {showRenameModal && (
  215. <RenameDatasetModal
  216. show={showRenameModal}
  217. dataset={dataset}
  218. onClose={() => setShowRenameModal(false)}
  219. onSuccess={onSuccess}
  220. />
  221. )}
  222. {showConfirmDelete && (
  223. <Confirm
  224. title={t('dataset.deleteDatasetConfirmTitle')}
  225. content={confirmMessage}
  226. isShow={showConfirmDelete}
  227. onConfirm={onConfirmDelete}
  228. onCancel={() => setShowConfirmDelete(false)}
  229. />
  230. )}
  231. </>
  232. )
  233. }
  234. export default DatasetCard