| | |
| | | import { omit } from 'lodash-es' |
| | | import { useBoolean } from 'ahooks' |
| | | import { useContext } from 'use-context-selector' |
| | | import { RiApps2Line, RiFocus2Line, RiHistoryLine } from '@remixicon/react' |
| | | import { RiApps2Line, RiFocus2Line } from '@remixicon/react' |
| | | import SegmentCard from '../documents/detail/completed/SegmentCard' |
| | | import Textarea from './textarea' |
| | | import s from './style.module.css' |
| | | import ModifyRetrievalModal from './modify-retrieval-modal' |
| | |
| | | import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints' |
| | | import useTimestamp from '@/hooks/use-timestamp' |
| | | import docStyle from '@/app/components/datasets/documents/detail/completed/style.module.css' |
| | | import { CardSkelton } from '../documents/detail/completed/skeleton/general-list-skeleton' |
| | | |
| | | const limit = 10 |
| | | |
| | |
| | | |
| | | const RecordsEmpty: FC = () => { |
| | | const { t } = useTranslation() |
| | | return <div className='rounded-2xl bg-workflow-process-bg p-5'> |
| | | <div className='flex h-10 w-10 items-center justify-center rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg p-1 shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px]'> |
| | | <RiHistoryLine className='h-5 w-5 text-text-tertiary' /> |
| | | return <div className='bg-gray-50 rounded-2xl p-5'> |
| | | <div className={s.clockWrapper}> |
| | | <div className={cn(s.clockIcon, 'w-5 h-5')}></div> |
| | | </div> |
| | | <div className='my-2 text-[13px] font-medium leading-4 text-text-tertiary'>{t('datasetHitTesting.noRecentTip')}</div> |
| | | <div className='my-2 text-gray-500 text-sm'>{t('datasetHitTesting.noRecentTip')}</div> |
| | | </div> |
| | | } |
| | | |
| | |
| | | const [isShowModifyRetrievalModal, setIsShowModifyRetrievalModal] = useState(false) |
| | | const [isShowRightPanel, { setTrue: showRightPanel, setFalse: hideRightPanel, set: setShowRightPanel }] = useBoolean(!isMobile) |
| | | const renderHitResults = (results: HitTesting[] | ExternalKnowledgeBaseHitTesting[]) => ( |
| | | <div className='flex h-full flex-col rounded-t-2xl bg-background-body px-4 py-3'> |
| | | <div className='mb-2 shrink-0 pl-2 font-semibold leading-6 text-text-primary'> |
| | | <div className='h-full flex flex-col py-3 px-4 rounded-t-2xl bg-background-body'> |
| | | <div className='shrink-0 pl-2 text-text-primary font-semibold leading-6 mb-2'> |
| | | {t('datasetHitTesting.hit.title', { num: results.length })} |
| | | </div> |
| | | <div className='grow space-y-2 overflow-y-auto'> |
| | | <div className='grow overflow-y-auto space-y-2'> |
| | | {results.map((record, idx) => |
| | | isExternal |
| | | ? ( |
| | |
| | | ) |
| | | |
| | | const renderEmptyState = () => ( |
| | | <div className='flex h-full flex-col items-center justify-center rounded-t-2xl bg-background-body px-4 py-3'> |
| | | <div className={cn(docStyle.commonIcon, docStyle.targetIcon, '!h-14 !w-14 !bg-text-quaternary')} /> |
| | | <div className='mt-3 text-[13px] text-text-quaternary'> |
| | | <div className='h-full flex flex-col justify-center items-center py-3 px-4 rounded-t-2xl bg-background-body'> |
| | | <div className={cn(docStyle.commonIcon, docStyle.targetIcon, '!bg-text-quaternary !h-14 !w-14')} /> |
| | | <div className='text-text-quaternary text-[13px] mt-3'> |
| | | {t('datasetHitTesting.hit.emptyTip')} |
| | | </div> |
| | | </div> |
| | |
| | | |
| | | return ( |
| | | <div className={s.container}> |
| | | <div className='flex flex-col px-6 py-3'> |
| | | <div className='mb-4 flex flex-col justify-center'> |
| | | <div className='px-6 py-3 flex flex-col'> |
| | | <div className='flex flex-col justify-center mb-4'> |
| | | <h1 className='text-base font-semibold text-text-primary'>{t('datasetHitTesting.title')}</h1> |
| | | <p className='mt-0.5 text-[13px] font-normal leading-4 text-text-tertiary'>{t('datasetHitTesting.desc')}</p> |
| | | <p className='mt-0.5 text-[13px] leading-4 font-normal text-text-tertiary'>{t('datasetHitTesting.desc')}</p> |
| | | </div> |
| | | <Textarea |
| | | datasetId={datasetId} |
| | |
| | | retrievalConfig={retrievalConfig} |
| | | isEconomy={currentDataset?.indexing_technique === 'economy'} |
| | | /> |
| | | <div className='mb-3 mt-6 text-base font-semibold text-text-primary'>{t('datasetHitTesting.records')}</div> |
| | | <div className='text-base font-semibold text-text-primary mt-6 mb-3'>{t('datasetHitTesting.records')}</div> |
| | | {(!recordsRes && !error) |
| | | ? ( |
| | | <div className='flex-1'><Loading type='app' /></div> |
| | |
| | | <> |
| | | <div className='grow overflow-y-auto'> |
| | | <table className={'w-full border-collapse border-0 text-[13px] leading-4 text-text-secondary '}> |
| | | <thead className='sticky top-0 h-7 text-xs font-medium uppercase leading-7 text-text-tertiary'> |
| | | <thead className='sticky top-0 h-7 leading-7 text-xs text-text-tertiary font-medium uppercase'> |
| | | <tr> |
| | | <td className='w-[128px] rounded-l-lg bg-background-section-burn pl-3'>{t('datasetHitTesting.table.header.source')}</td> |
| | | <td className='pl-3 w-[128px] rounded-l-lg bg-background-section-burn'>{t('datasetHitTesting.table.header.source')}</td> |
| | | <td className='bg-background-section-burn'>{t('datasetHitTesting.table.header.text')}</td> |
| | | <td className='w-48 rounded-r-lg bg-background-section-burn pl-2'>{t('datasetHitTesting.table.header.time')}</td> |
| | | <td className='pl-2 w-48 rounded-r-lg bg-background-section-burn'>{t('datasetHitTesting.table.header.time')}</td> |
| | | </tr> |
| | | </thead> |
| | | <tbody> |
| | |
| | | const SourceIcon = record.source === 'app' ? RiApps2Line : RiFocus2Line |
| | | return <tr |
| | | key={record.id} |
| | | className='group h-10 cursor-pointer border-b border-divider-subtle hover:bg-background-default-hover' |
| | | className='group border-b border-divider-subtle h-10 hover:bg-background-default-hover cursor-pointer' |
| | | onClick={() => setText(record.content)} |
| | | > |
| | | <td className='w-[128px] pl-3'> |
| | | <td className='pl-3 w-[128px]'> |
| | | <div className='flex items-center'> |
| | | <SourceIcon className='mr-1 size-4 text-text-tertiary' /> |
| | | <span className='capitalize'>{record.source.replace('_', ' ').replace('hit testing', 'retrieval test')}</span> |
| | | </div> |
| | | </td> |
| | | <td className='max-w-xs py-2'>{record.content}</td> |
| | | <td className='w-36 pl-2'> |
| | | <td className='pl-2 w-36'> |
| | | {formatTime(record.created_at, t('datasetHitTesting.dateTimeFormat') as string)} |
| | | </td> |
| | | </tr> |
| | |
| | | <RecordsEmpty /> |
| | | )} |
| | | </div> |
| | | <FloatRightContainer panelClassName='!justify-start !overflow-y-auto' showClose isMobile={isMobile} isOpen={isShowRightPanel} onClose={hideRightPanel} footer={null}> |
| | | <FloatRightContainer panelClassname='!justify-start !overflow-y-auto' showClose isMobile={isMobile} isOpen={isShowRightPanel} onClose={hideRightPanel} footer={null}> |
| | | <div className='flex flex-col pt-3'> |
| | | {/* {renderHitResults(generalResultData)} */} |
| | | {submitLoading |
| | | ? <div className='flex h-full flex-col rounded-t-2xl bg-background-body px-4 py-3'> |
| | | <CardSkelton /> |
| | | </div> |
| | | ? <SegmentCard |
| | | loading={true} |
| | | scene='hitTesting' |
| | | className='h-[216px]' |
| | | /> |
| | | : ( |
| | | (() => { |
| | | if (!hitResult?.records.length && !externalHitResult?.records.length) |
| | |
| | | } |
| | | </div> |
| | | </FloatRightContainer> |
| | | <Drawer unmount={true} isOpen={isShowModifyRetrievalModal} onClose={() => setIsShowModifyRetrievalModal(false)} footer={null} mask={isMobile} panelClassName='mt-16 mx-2 sm:mr-2 mb-3 !p-0 !max-w-[640px] rounded-xl'> |
| | | <Drawer unmount={true} isOpen={isShowModifyRetrievalModal} onClose={() => setIsShowModifyRetrievalModal(false)} footer={null} mask={isMobile} panelClassname='mt-16 mx-2 sm:mr-2 mb-3 !p-0 !max-w-[640px] rounded-xl'> |
| | | <ModifyRetrievalModal |
| | | indexMethod={currentDataset?.indexing_technique || ''} |
| | | value={retrievalConfig} |