Knowledge optimization (#3755)

Co-authored-by: crazywoola <427733928@qq.com> Co-authored-by: JzoNg <jzongcode@gmail.com>
2024-04-24 15:02:29 +08:00
parent 3cd8e6f5c6
commit f257f2c396
75 changed files with 2756 additions and 266 deletions
--- a/web/app/components/datasets/rename-modal/index.tsx
+++ b/web/app/components/datasets/rename-modal/index.tsx
@@ -0,0 +1,106 @@
+'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