dify

dify/web/app/components/datasets/create/empty-dataset-creation-modal/index.module.css

@@ -0,0 +1,35 @@
+.modal {
+  position: relative;
+}
+
+.modalHeader {
+  @apply flex items-center place-content-between h-8;
+}
+.modalHeader .title {
+  @apply grow text-text-primary;
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 32px;
+}
+.modalHeader .close {
+  @apply shrink-0 h-4 w-4 bg-center bg-no-repeat cursor-pointer;
+  background-image: url(../assets/close.svg);
+  background-size: 16px;
+}
+
+.modal .tip {
+  @apply mt-1 mb-8 text-text-tertiary;
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 18px;
+}
+
+.form {
+  @apply mb-8;
+}
+.form .label {
+  @apply mb-2 text-text-primary;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 20px;
+}

dify/web/app/components/datasets/create/empty-dataset-creation-modal/index.tsx

@@ -0,0 +1,74 @@
+'use client'
+import React, { useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { useTranslation } from 'react-i18next'
+import { useContext } from 'use-context-selector'
+import s from './index.module.css'
+import cn from '@/utils/classnames'
+import Modal from '@/app/components/base/modal'
+import Input from '@/app/components/base/input'
+import Button from '@/app/components/base/button'
+
+import { ToastContext } from '@/app/components/base/toast'
+import { createEmptyDataset } from '@/service/datasets'
+import { useInvalidDatasetList } from '@/service/knowledge/use-dataset'
+
+type IProps = {
+  show: boolean
+  onHide: () => void
+}
+
+const EmptyDatasetCreationModal = ({
+  show = false,
+  onHide,
+}: IProps) => {
+  const [inputValue, setInputValue] = useState('')
+  const { t } = useTranslation()
+  const { notify } = useContext(ToastContext)
+  const router = useRouter()
+  const invalidDatasetList = useInvalidDatasetList()
+
+  const submit = async () => {
+    if (!inputValue) {
+      notify({ type: 'error', message: t('datasetCreation.stepOne.modal.nameNotEmpty') })
+      return
+    }
+    if (inputValue.length > 40) {
+      notify({ type: 'error', message: t('datasetCreation.stepOne.modal.nameLengthInvalid') })
+      return
+    }
+    try {
+      const dataset = await createEmptyDataset({ name: inputValue })
+      invalidDatasetList()
+      onHide()
+      router.push(`/datasets/${dataset.id}/documents`)
+    }
+    catch {
+      notify({ type: 'error', message: t('datasetCreation.stepOne.modal.failed') })
+    }
+  }
+
+  return (
+    <Modal
+      isShow={show}
+      onClose={onHide}
+      className={cn(s.modal, '!max-w-[520px]', 'px-8')}
+    >
+      <div className={s.modalHeader}>
+        <div className={s.title}>{t('datasetCreation.stepOne.modal.title')}</div>
+        <span className={s.close} onClick={onHide} />
+      </div>
+      <div className={s.tip}>{t('datasetCreation.stepOne.modal.tip')}</div>
+      <div className={s.form}>
+        <div className={s.label}>{t('datasetCreation.stepOne.modal.input')}</div>
+        <Input value={inputValue} placeholder={t('datasetCreation.stepOne.modal.placeholder') || ''} onChange={e => setInputValue(e.target.value)} />
+      </div>
+      <div className='flex flex-row-reverse'>
+        <Button className='ml-2 w-24' variant='primary' onClick={submit}>{t('datasetCreation.stepOne.modal.confirmButton')}</Button>
+        <Button className='w-24' onClick={onHide}>{t('datasetCreation.stepOne.modal.cancelButton')}</Button>
+      </div>
+    </Modal>
+  )
+}
+
+export default EmptyDatasetCreationModal