ngskcloud
/
gcgj-dify-1.7.0
17
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: create datasets now supports horizontal scroll

Browse Source
pull/18656/head
NFish 1 year ago
parent c91398883c
commit 1126b9d1ec
1 changed files with 191 additions and 165 deletions
Show Stats Download Patch File Download Diff File

78
web/app/components/datasets/create/step-one/index.tsx
Unescape Escape View File

@ -18,12 +18,12 @@ import { NotionPageSelector } from '@/app/components/base/notion-page-selector'
import { useDatasetDetailContext } from '@/context/dataset-detail' import { useDatasetDetailContext } from '@/context/dataset-detail'
import { useProviderContext } from '@/context/provider-context' import { useProviderContext } from '@/context/provider-context'
import VectorSpaceFull from '@/app/components/billing/vector-space-full' import VectorSpaceFull from '@/app/components/billing/vector-space-full'
import classNames from '@/utils/classnames' import { Icon3Dots } from '@/app/components/base/icons/src/vender/line/others'
type IStepOneProps = { type IStepOneProps = {
datasetId?: string datasetId?: string
dataSourceType?: DataSourceType dataSourceType?: DataSourceType
dataSourceTypeDisable: Boolean dataSourceTypeDisable: boolean
hasConnection: boolean hasConnection: boolean
onSetting: () => void onSetting: () => void
files: FileItem[] files: FileItem[]
@ -44,14 +44,20 @@ type IStepOneProps = {
type NotionConnectorProps = { type NotionConnectorProps = {
onSetting: () => void onSetting: () => void
} }
export const NotionConnector = ({ onSetting }: NotionConnectorProps) => { export const NotionConnector = (props: NotionConnectorProps) => {
const { onSetting } = props
const { t } = useTranslation() const { t } = useTranslation()
return ( return (
<div className={s.notionConnectionTip}> <div className='flex w-[640px] flex-col items-start rounded-2xl bg-workflow-process-bg p-6'>
<span className={s.notionIcon} /> <span className={cn(s.notionIcon, 'mb-2 h-12 w-12 rounded-[10px] border-[0.5px] border-components-card-border p-3 shadow-lg shadow-shadow-shadow-5')} />
<div className={s.title}>{t('datasetCreation.stepOne.notionSyncTitle')}</div> <div className='mb-1 flex flex-col gap-y-1 pb-3 pt-1'>
<div className={s.tip}>{t('datasetCreation.stepOne.notionSyncTip')}</div> <span className='system-md-semibold text-text-secondary'>
{t('datasetCreation.stepOne.notionSyncTitle')}
<Icon3Dots className='relative -left-1.5 -top-2.5 inline h-4 w-4 text-text-secondary' />
</span>
<div className='system-sm-regular text-text-tertiary'>{t('datasetCreation.stepOne.notionSyncTip')}</div>
</div>
<Button className='h-8' variant='primary' onClick={onSetting}>{t('datasetCreation.stepOne.connect')}</Button> <Button className='h-8' variant='primary' onClick={onSetting}>{t('datasetCreation.stepOne.connect')}</Button>
</div> </div>
) )
@ -120,27 +126,29 @@ const StepOne = ({
return true return true
if (files.some(file => !file.file.id)) if (files.some(file => !file.file.id))
return true return true
if (isShowVectorSpaceFull) return isShowVectorSpaceFull
return true
return false
}, [files, isShowVectorSpaceFull]) }, [files, isShowVectorSpaceFull])
return ( return (
<div className='flex w-full h-full'> <div className='h-full w-full overflow-x-auto'>
<div className='w-1/2 h-full overflow-y-auto relative'> <div className='flex h-full w-full min-w-[1440px]'>
<div className='relative h-full w-1/2 overflow-y-auto'>
<div className='flex justify-end'> <div className='flex justify-end'>
<div className={classNames(s.form)}> <div className={cn(s.form)}>
{ {
shouldShowDataSourceTypeList && ( shouldShowDataSourceTypeList && (
<div className={classNames(s.stepHeader, 'z-10 text-text-secondary bg-components-panel-bg-blur')}>{t('datasetCreation.steps.one')}</div> <div className={cn(s.stepHeader, 'text-text-secondary system-md-semibold')}>
{t('datasetCreation.steps.one')}
</div>
) )
} }
{ {
shouldShowDataSourceTypeList && ( shouldShowDataSourceTypeList && (
<div className='flex items-center mb-8 flex-wrap gap-4'> <div className='mb-8 grid grid-cols-3 gap-4'>
<div <div
className={cn( className={cn(
s.dataSourceItem, s.dataSourceItem,
'system-sm-medium',
dataSourceType === DataSourceType.FILE && s.active, dataSourceType === DataSourceType.FILE && s.active,
dataSourceTypeDisable && dataSourceType !== DataSourceType.FILE && s.disabled, dataSourceTypeDisable && dataSourceType !== DataSourceType.FILE && s.disabled,
)} )}
@ -153,11 +161,17 @@ const StepOne = ({
}} }}
> >
<span className={cn(s.datasetIcon)} /> <span className={cn(s.datasetIcon)} />
<span
title={t('datasetCreation.stepOne.dataSourceType.file')!}
className='truncate'
>
{t('datasetCreation.stepOne.dataSourceType.file')} {t('datasetCreation.stepOne.dataSourceType.file')}
</span>
</div> </div>
<div <div
className={cn( className={cn(
s.dataSourceItem, s.dataSourceItem,
'system-sm-medium',
dataSourceType === DataSourceType.NOTION && s.active, dataSourceType === DataSourceType.NOTION && s.active,
dataSourceTypeDisable && dataSourceType !== DataSourceType.NOTION && s.disabled, dataSourceTypeDisable && dataSourceType !== DataSourceType.NOTION && s.disabled,
)} )}
@ -170,18 +184,29 @@ const StepOne = ({
}} }}
> >
<span className={cn(s.datasetIcon, s.notion)} /> <span className={cn(s.datasetIcon, s.notion)} />
<span
title={t('datasetCreation.stepOne.dataSourceType.notion')!}
className='truncate'
>
{t('datasetCreation.stepOne.dataSourceType.notion')} {t('datasetCreation.stepOne.dataSourceType.notion')}
</span>
</div> </div>
<div <div
className={cn( className={cn(
s.dataSourceItem, s.dataSourceItem,
'system-sm-medium',
dataSourceType === DataSourceType.WEB && s.active, dataSourceType === DataSourceType.WEB && s.active,
dataSourceTypeDisable && dataSourceType !== DataSourceType.WEB && s.disabled, dataSourceTypeDisable && dataSourceType !== DataSourceType.WEB && s.disabled,
)} )}
onClick={() => changeType(DataSourceType.WEB)} onClick={() => changeType(DataSourceType.WEB)}
> >
<span className={cn(s.datasetIcon, s.web)} /> <span className={cn(s.datasetIcon, s.web)} />
<span
title={t('datasetCreation.stepOne.dataSourceType.web')!}
className='truncate'
>
{t('datasetCreation.stepOne.dataSourceType.web')} {t('datasetCreation.stepOne.dataSourceType.web')}
</span>
</div> </div>
</div> </div>
) )
@ -190,7 +215,7 @@ const StepOne = ({
<> <>
<FileUploader <FileUploader
fileList={files} fileList={files}
titleClassName={!shouldShowDataSourceTypeList ? 'mt-[30px] !mb-[44px] !text-lg !font-semibold !text-gray-900' : undefined} titleClassName={!shouldShowDataSourceTypeList ? 'mt-[30px] !mb-[44px] !text-lg' : undefined}
prepareFileList={updateFileList} prepareFileList={updateFileList}
onFileListUpdate={updateFileList} onFileListUpdate={updateFileList}
onFileUpdate={updateFile} onFileUpdate={updateFile}
@ -198,11 +223,11 @@ const StepOne = ({
notSupportBatchUpload={notSupportBatchUpload} notSupportBatchUpload={notSupportBatchUpload}
/> />
{isShowVectorSpaceFull && ( {isShowVectorSpaceFull && (
<div className='max-w-[640px] mb-4'> <div className='mb-4 max-w-[640px]'>
<VectorSpaceFull /> <VectorSpaceFull />
</div> </div>
)} )}
<div className="flex justify-end gap-2 max-w-[640px]"> <div className="flex max-w-[640px] justify-end gap-2">
{/* <Button>{t('datasetCreation.stepOne.cancel')}</Button> */} {/* <Button>{t('datasetCreation.stepOne.cancel')}</Button> */}
<Button disabled={nextDisabled} variant='primary' onClick={onStepChange}> <Button disabled={nextDisabled} variant='primary' onClick={onStepChange}>
<span className="flex gap-0.5 px-[10px]"> <span className="flex gap-0.5 px-[10px]">
@ -226,11 +251,11 @@ const StepOne = ({
/> />
</div> </div>
{isShowVectorSpaceFull && ( {isShowVectorSpaceFull && (
<div className='max-w-[640px] mb-4'> <div className='mb-4 max-w-[640px]'>
<VectorSpaceFull /> <VectorSpaceFull />
</div> </div>
)} )}
<div className="flex justify-end gap-2 max-w-[640px]"> <div className="flex max-w-[640px] justify-end gap-2">
{/* <Button>{t('datasetCreation.stepOne.cancel')}</Button> */} {/* <Button>{t('datasetCreation.stepOne.cancel')}</Button> */}
<Button disabled={isShowVectorSpaceFull || !notionPages.length} variant='primary' onClick={onStepChange}> <Button disabled={isShowVectorSpaceFull || !notionPages.length} variant='primary' onClick={onStepChange}>
<span className="flex gap-0.5 px-[10px]"> <span className="flex gap-0.5 px-[10px]">
@ -257,11 +282,11 @@ const StepOne = ({
/> />
</div> </div>
{isShowVectorSpaceFull && ( {isShowVectorSpaceFull && (
<div className='max-w-[640px] mb-4'> <div className='mb-4 max-w-[640px]'>
<VectorSpaceFull /> <VectorSpaceFull />
</div> </div>
)} )}
<div className="flex justify-end gap-2 max-w-[640px]"> <div className="flex max-w-[640px] justify-end gap-2">
{/* <Button>{t('datasetCreation.stepOne.cancel')}</Button> */} {/* <Button>{t('datasetCreation.stepOne.cancel')}</Button> */}
<Button disabled={isShowVectorSpaceFull || !websitePages.length} variant='primary' onClick={onStepChange}> <Button disabled={isShowVectorSpaceFull || !websitePages.length} variant='primary' onClick={onStepChange}>
<span className="flex gap-0.5 px-[10px]"> <span className="flex gap-0.5 px-[10px]">
@ -274,9 +299,9 @@ const StepOne = ({
)} )}
{!datasetId && ( {!datasetId && (
<> <>
<div className={s.dividerLine} /> <div className='my-8 h-px max-w-[640px] bg-divider-regular' />
<span className="inline-flex items-center cursor-pointer text-[13px] leading-4 text-text-accent" onClick={modalShowHandle}> <span className="inline-flex cursor-pointer items-center text-[13px] leading-4 text-text-accent" onClick={modalShowHandle}>
<RiFolder6Line className="size-4 mr-1" /> <RiFolder6Line className="mr-1 size-4" />
{t('datasetCreation.stepOne.emptyDatasetCreation')} {t('datasetCreation.stepOne.emptyDatasetCreation')}
</span> </span>
</> </>
@ -285,12 +310,13 @@ const StepOne = ({
<EmptyDatasetCreationModal show={showModal} onHide={modalCloseHandle} /> <EmptyDatasetCreationModal show={showModal} onHide={modalCloseHandle} />
</div> </div>
</div> </div>
<div className='w-1/2 h-full overflow-y-auto'> <div className='h-full w-1/2 overflow-y-auto'>
{currentFile && <FilePreview file={currentFile} hidePreview={hideFilePreview} />} {currentFile && <FilePreview file={currentFile} hidePreview={hideFilePreview} />}
{currentNotionPage && <NotionPagePreview currentPage={currentNotionPage} hidePreview={hideNotionPagePreview} />} {currentNotionPage && <NotionPagePreview currentPage={currentNotionPage} hidePreview={hideNotionPagePreview} />}
{currentWebsite && <WebsitePreview payload={currentWebsite} hidePreview={hideWebsitePreview} />} {currentWebsite && <WebsitePreview payload={currentWebsite} hidePreview={hideWebsitePreview} />}
</div> </div>
</div> </div>
</div>
) )
} }

Write Preview
Loading…
Cancel
Save