mirror of
http://112.124.100.131/huang.ze/ebiz-dify-ai.git
synced 2025-12-15 05:46:52 +08:00
Chore: frontend infrastructure upgrade (#16420)
Co-authored-by: NFish <douxc512@gmail.com> Co-authored-by: zxhlyh <jasonapring2015@outlook.com> Co-authored-by: twwu <twwu@dify.ai> Co-authored-by: jZonG <jzongcode@gmail.com>
This commit is contained in:
Joel
@@ -19,11 +19,11 @@ const ChildChunks: FC<Props> = ({
|
||||
<div
|
||||
className={!isShowAll ? 'line-clamp-2 break-all' : ''}
|
||||
>
|
||||
<div className='inline-flex items-center relative top-[-2px]'>
|
||||
<div className='flex items-center h-[20.5px] bg-state-accent-solid system-2xs-semibold-uppercase text-text-primary-on-surface px-1'>C-{position}</div>
|
||||
<div className='relative top-[-2px] inline-flex items-center'>
|
||||
<div className='system-2xs-semibold-uppercase flex h-[20.5px] items-center bg-state-accent-solid px-1 text-text-primary-on-surface'>C-{position}</div>
|
||||
<Score value={score} besideChunkName />
|
||||
</div>
|
||||
<SliceContent className='py-0.5 bg-state-accent-hover group-hover:bg-state-accent-hover text-sm text-text-secondary font-normal'>{content}</SliceContent>
|
||||
<SliceContent className='bg-state-accent-hover py-0.5 text-sm font-normal text-text-secondary group-hover:bg-state-accent-hover'>{content}</SliceContent>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -42,17 +42,17 @@ const ChunkDetailModal: FC<Props> = ({
|
||||
<div className='mt-4 flex'>
|
||||
<div className={cn('flex-1', isParentChildRetrieval && 'pr-6')}>
|
||||
{/* Meta info */}
|
||||
<div className='flex justify-between items-center'>
|
||||
<div className='grow flex items-center space-x-2'>
|
||||
<div className='flex items-center justify-between'>
|
||||
<div className='flex grow items-center space-x-2'>
|
||||
<SegmentIndexTag
|
||||
labelPrefix={`${isParentChildRetrieval ? 'Parent-' : ''}Chunk`}
|
||||
positionId={position}
|
||||
className={cn('w-fit group-hover:opacity-100')}
|
||||
/>
|
||||
<Dot />
|
||||
<div className='grow flex items-center space-x-1'>
|
||||
<div className='flex grow items-center space-x-1'>
|
||||
<FileIcon type={extension} size='sm' />
|
||||
<span className='grow w-0 truncate text-text-secondary text-[13px] font-normal'>{document.name}</span>
|
||||
<span className='w-0 grow truncate text-[13px] font-normal text-text-secondary'>{document.name}</span>
|
||||
</div>
|
||||
</div>
|
||||
<Score value={score} />
|
||||
@@ -64,7 +64,7 @@ const ChunkDetailModal: FC<Props> = ({
|
||||
/>
|
||||
{!isParentChildRetrieval && keywords && keywords.length > 0 && (
|
||||
<div className='mt-6'>
|
||||
<div className='font-medium text-xs text-text-tertiary uppercase'>{t(`${i18nPrefix}.keyword`)}</div>
|
||||
<div className='text-xs font-medium uppercase text-text-tertiary'>{t(`${i18nPrefix}.keyword`)}</div>
|
||||
<div className='mt-1 flex flex-wrap'>
|
||||
{keywords.map(keyword => (
|
||||
<Tag key={keyword} text={keyword} className='mr-2' />
|
||||
@@ -75,7 +75,7 @@ const ChunkDetailModal: FC<Props> = ({
|
||||
</div>
|
||||
|
||||
{isParentChildRetrieval && (
|
||||
<div className='flex-1 pl-6 pb-6'>
|
||||
<div className='flex-1 pb-6 pl-6'>
|
||||
<div className='system-xs-semibold-uppercase text-text-secondary'>{t(`${i18nPrefix}.hitChunks`, { num: child_chunks.length })}</div>
|
||||
<div className={cn('mt-1 space-y-2', heighClassName)}>
|
||||
{child_chunks.map(item => (
|
||||
|
||||
@@ -25,13 +25,13 @@ const ResultItemExternal: FC<Props> = ({ payload, positionId }) => {
|
||||
] = useBoolean(false)
|
||||
|
||||
return (
|
||||
<div className={cn('pt-3 bg-chat-bubble-bg rounded-xl hover:shadow-lg cursor-pointer')} onClick={showDetailModal}>
|
||||
<div className={cn('cursor-pointer rounded-xl bg-chat-bubble-bg pt-3 hover:shadow-lg')} onClick={showDetailModal}>
|
||||
{/* Meta info */}
|
||||
<ResultItemMeta className='px-3' labelPrefix={'Chunk'} positionId={positionId} wordCount={content.length} score={score} />
|
||||
|
||||
{/* Main */}
|
||||
<div className='mt-1 px-3'>
|
||||
<div className='line-clamp-2 body-md-regular break-all'>{content}</div>
|
||||
<div className='body-md-regular line-clamp-2 break-all'>{content}</div>
|
||||
</div>
|
||||
|
||||
{/* Foot */}
|
||||
@@ -47,7 +47,7 @@ const ResultItemExternal: FC<Props> = ({ payload, positionId }) => {
|
||||
>
|
||||
<div className='mt-4 flex-1'>
|
||||
<ResultItemMeta labelPrefix={'Chunk'} positionId={positionId} wordCount={content.length} score={score} />
|
||||
<div className={cn('mt-2 body-md-regular text-text-secondary break-all', 'h-[min(539px,_80vh)] overflow-y-auto')}>
|
||||
<div className={cn('body-md-regular mt-2 break-all text-text-secondary', 'h-[min(539px,_80vh)] overflow-y-auto')}>
|
||||
{content}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -21,15 +21,15 @@ const ResultItemFooter: FC<Props> = ({
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<div className="mt-3 flex justify-between items-center h-10 pl-3 pr-2 border-t border-divider-subtle">
|
||||
<div className="grow flex items-center space-x-1">
|
||||
<div className="mt-3 flex h-10 items-center justify-between border-t border-divider-subtle pl-3 pr-2">
|
||||
<div className="flex grow items-center space-x-1">
|
||||
<FileIcon type={docType} size="sm" />
|
||||
<span className="grow w-0 truncate text-text-secondary text-[13px] font-normal">
|
||||
<span className="w-0 grow truncate text-[13px] font-normal text-text-secondary">
|
||||
{docTitle}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="flex items-center space-x-1 cursor-pointer text-text-tertiary"
|
||||
className="flex cursor-pointer items-center space-x-1 text-text-tertiary"
|
||||
onClick={showDetailModal}
|
||||
>
|
||||
<div className="text-xs uppercase">{t(`${i18nPrefix}.open`)}</div>
|
||||
|
||||
@@ -25,7 +25,7 @@ const ResultItemMeta: FC<Props> = ({
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<div className={cn('flex justify-between items-center', className)}>
|
||||
<div className={cn('flex items-center justify-between', className)}>
|
||||
<div className="flex items-center space-x-2">
|
||||
<SegmentIndexTag
|
||||
labelPrefix={labelPrefix}
|
||||
|
||||
@@ -41,7 +41,7 @@ const ResultItem: FC<Props> = ({
|
||||
}] = useBoolean(false)
|
||||
|
||||
return (
|
||||
<div className={cn('pt-3 bg-chat-bubble-bg rounded-xl hover:shadow-lg cursor-pointer')} onClick={showDetailModal}>
|
||||
<div className={cn('cursor-pointer rounded-xl bg-chat-bubble-bg pt-3 hover:shadow-lg')} onClick={showDetailModal}>
|
||||
{/* Meta info */}
|
||||
<ResultItemMeta className='px-3' labelPrefix={`${isParentChildRetrieval ? 'Parent-' : ''}Chunk`} positionId={position} wordCount={word_count} score={score} />
|
||||
|
||||
@@ -55,19 +55,19 @@ const ResultItem: FC<Props> = ({
|
||||
{isParentChildRetrieval && (
|
||||
<div className='mt-1'>
|
||||
<div
|
||||
className={cn('inline-flex items-center h-6 space-x-0.5 text-text-secondary select-none rounded-lg cursor-pointer', isFold && 'pl-1 bg-workflow-process-bg')}
|
||||
className={cn('inline-flex h-6 cursor-pointer select-none items-center space-x-0.5 rounded-lg text-text-secondary', isFold && 'bg-workflow-process-bg pl-1')}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
toggleFold()
|
||||
}}
|
||||
>
|
||||
<Icon className={cn('w-4 h-4', isFold && 'opacity-50')} />
|
||||
<Icon className={cn('h-4 w-4', isFold && 'opacity-50')} />
|
||||
<div className='text-xs font-semibold uppercase'>{t(`${i18nPrefix}.hitChunks`, { num: child_chunks.length })}</div>
|
||||
</div>
|
||||
{!isFold && (
|
||||
<div className='space-y-2'>
|
||||
{child_chunks.map(item => (
|
||||
<div key={item.id} className='ml-[7px] pl-[7px] border-l-[2px] border-text-accent-secondary'>
|
||||
<div key={item.id} className='ml-[7px] border-l-[2px] border-text-accent-secondary pl-[7px]'>
|
||||
<ChildChunkItem payload={item} isShowAll={false} />
|
||||
</div>
|
||||
))}
|
||||
|
||||
@@ -15,10 +15,10 @@ const Score: FC<Props> = ({
|
||||
if (!value || isNaN(value))
|
||||
return null
|
||||
return (
|
||||
<div className={cn('relative items-center px-[5px] border border-components-progress-bar-border overflow-hidden',
|
||||
besideChunkName ? 'border-l-0 h-[20.5px]' : 'h-[20px] rounded-md')}>
|
||||
<div className={cn('absolute top-0 left-0 h-full bg-util-colors-blue-brand-blue-brand-100 border-r-[1.5px] border-components-progress-brand-progress', value === 1 && 'border-r-0')} style={{ width: `${value * 100}%` }} />
|
||||
<div className={cn('relative flex items-center h-full space-x-0.5 text-util-colors-blue-brand-blue-brand-700')}>
|
||||
<div className={cn('relative items-center overflow-hidden border border-components-progress-bar-border px-[5px]',
|
||||
besideChunkName ? 'h-[20.5px] border-l-0' : 'h-[20px] rounded-md')}>
|
||||
<div className={cn('absolute left-0 top-0 h-full border-r-[1.5px] border-components-progress-brand-progress bg-util-colors-blue-brand-blue-brand-100', value === 1 && 'border-r-0')} style={{ width: `${value * 100}%` }} />
|
||||
<div className={cn('relative flex h-full items-center space-x-0.5 text-util-colors-blue-brand-blue-brand-700')}>
|
||||
<div className='system-2xs-medium-uppercase'>score</div>
|
||||
<div className='system-xs-semibold'>{value?.toFixed(2)}</div>
|
||||
</div>
|
||||
|
||||
@@ -34,11 +34,11 @@ type Props = {
|
||||
|
||||
const RecordsEmpty: FC = () => {
|
||||
const { t } = useTranslation()
|
||||
return <div className='bg-workflow-process-bg rounded-2xl p-5'>
|
||||
<div className='flex items-center justify-center w-10 h-10 p-1 rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px]'>
|
||||
<RiHistoryLine className='w-5 h-5 text-text-tertiary' />
|
||||
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' />
|
||||
</div>
|
||||
<div className='my-2 text-text-tertiary text-[13px] leading-4 font-medium'>{t('datasetHitTesting.noRecentTip')}</div>
|
||||
<div className='my-2 text-[13px] font-medium leading-4 text-text-tertiary'>{t('datasetHitTesting.noRecentTip')}</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -70,11 +70,11 @@ const HitTestingPage: FC<Props> = ({ datasetId }: Props) => {
|
||||
const [isShowModifyRetrievalModal, setIsShowModifyRetrievalModal] = useState(false)
|
||||
const [isShowRightPanel, { setTrue: showRightPanel, setFalse: hideRightPanel, set: setShowRightPanel }] = useBoolean(!isMobile)
|
||||
const renderHitResults = (results: HitTesting[] | ExternalKnowledgeBaseHitTesting[]) => (
|
||||
<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'>
|
||||
<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'>
|
||||
{t('datasetHitTesting.hit.title', { num: results.length })}
|
||||
</div>
|
||||
<div className='grow overflow-y-auto space-y-2'>
|
||||
<div className='grow space-y-2 overflow-y-auto'>
|
||||
{results.map((record, idx) =>
|
||||
isExternal
|
||||
? (
|
||||
@@ -93,9 +93,9 @@ const HitTestingPage: FC<Props> = ({ datasetId }: Props) => {
|
||||
)
|
||||
|
||||
const renderEmptyState = () => (
|
||||
<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'>
|
||||
<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'>
|
||||
{t('datasetHitTesting.hit.emptyTip')}
|
||||
</div>
|
||||
</div>
|
||||
@@ -107,10 +107,10 @@ const HitTestingPage: FC<Props> = ({ datasetId }: Props) => {
|
||||
|
||||
return (
|
||||
<div className={s.container}>
|
||||
<div className='px-6 py-3 flex flex-col'>
|
||||
<div className='flex flex-col justify-center mb-4'>
|
||||
<div className='flex flex-col px-6 py-3'>
|
||||
<div className='mb-4 flex flex-col justify-center'>
|
||||
<h1 className='text-base font-semibold text-text-primary'>{t('datasetHitTesting.title')}</h1>
|
||||
<p className='mt-0.5 text-[13px] leading-4 font-normal text-text-tertiary'>{t('datasetHitTesting.desc')}</p>
|
||||
<p className='mt-0.5 text-[13px] font-normal leading-4 text-text-tertiary'>{t('datasetHitTesting.desc')}</p>
|
||||
</div>
|
||||
<Textarea
|
||||
datasetId={datasetId}
|
||||
@@ -127,7 +127,7 @@ const HitTestingPage: FC<Props> = ({ datasetId }: Props) => {
|
||||
retrievalConfig={retrievalConfig}
|
||||
isEconomy={currentDataset?.indexing_technique === 'economy'}
|
||||
/>
|
||||
<div className='text-base font-semibold text-text-primary mt-6 mb-3'>{t('datasetHitTesting.records')}</div>
|
||||
<div className='mb-3 mt-6 text-base font-semibold text-text-primary'>{t('datasetHitTesting.records')}</div>
|
||||
{(!recordsRes && !error)
|
||||
? (
|
||||
<div className='flex-1'><Loading type='app' /></div>
|
||||
@@ -137,11 +137,11 @@ const HitTestingPage: FC<Props> = ({ datasetId }: Props) => {
|
||||
<>
|
||||
<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 leading-7 text-xs text-text-tertiary font-medium uppercase'>
|
||||
<thead className='sticky top-0 h-7 text-xs font-medium uppercase leading-7 text-text-tertiary'>
|
||||
<tr>
|
||||
<td className='pl-3 w-[128px] rounded-l-lg bg-background-section-burn'>{t('datasetHitTesting.table.header.source')}</td>
|
||||
<td className='w-[128px] rounded-l-lg bg-background-section-burn pl-3'>{t('datasetHitTesting.table.header.source')}</td>
|
||||
<td className='bg-background-section-burn'>{t('datasetHitTesting.table.header.text')}</td>
|
||||
<td className='pl-2 w-48 rounded-r-lg bg-background-section-burn'>{t('datasetHitTesting.table.header.time')}</td>
|
||||
<td className='w-48 rounded-r-lg bg-background-section-burn pl-2'>{t('datasetHitTesting.table.header.time')}</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -149,17 +149,17 @@ const HitTestingPage: FC<Props> = ({ datasetId }: Props) => {
|
||||
const SourceIcon = record.source === 'app' ? RiApps2Line : RiFocus2Line
|
||||
return <tr
|
||||
key={record.id}
|
||||
className='group border-b border-divider-subtle h-10 hover:bg-background-default-hover cursor-pointer'
|
||||
className='group h-10 cursor-pointer border-b border-divider-subtle hover:bg-background-default-hover'
|
||||
onClick={() => setText(record.content)}
|
||||
>
|
||||
<td className='pl-3 w-[128px]'>
|
||||
<td className='w-[128px] pl-3'>
|
||||
<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='pl-2 w-36'>
|
||||
<td className='w-36 pl-2'>
|
||||
{formatTime(record.created_at, t('datasetHitTesting.dateTimeFormat') as string)}
|
||||
</td>
|
||||
</tr>
|
||||
@@ -180,7 +180,7 @@ const HitTestingPage: FC<Props> = ({ datasetId }: Props) => {
|
||||
<div className='flex flex-col pt-3'>
|
||||
{/* {renderHitResults(generalResultData)} */}
|
||||
{submitLoading
|
||||
? <div className='h-full flex flex-col py-3 px-4 rounded-t-2xl bg-background-body'>
|
||||
? <div className='flex h-full flex-col rounded-t-2xl bg-background-body px-4 py-3'>
|
||||
<CardSkelton />
|
||||
</div>
|
||||
: (
|
||||
|
||||
@@ -42,16 +42,16 @@ const ModifyExternalRetrievalModal: React.FC<ModifyExternalRetrievalModalProps>
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='absolute z-10 top-[36px] right-[14px] flex w-[320px] flex-col items-start rounded-2xl border-[0.5px]
|
||||
border-components-panel-border bg-components-panel-bg shadows-shadow-2xl'
|
||||
<div className='shadows-shadow-2xl absolute right-[14px] top-[36px] z-10 flex w-[320px] flex-col items-start rounded-2xl
|
||||
border-[0.5px] border-components-panel-border bg-components-panel-bg'
|
||||
>
|
||||
<div className='flex p-4 pb-2 items-center justify-between self-stretch'>
|
||||
<div className='text-text-primary system-xl-semibold flex-grow'>{t('datasetHitTesting.settingTitle')}</div>
|
||||
<div className='flex items-center justify-between self-stretch p-4 pb-2'>
|
||||
<div className='system-xl-semibold grow text-text-primary'>{t('datasetHitTesting.settingTitle')}</div>
|
||||
<ActionButton className='ml-auto' onClick={onClose}>
|
||||
<RiCloseLine className='w-4 h-4 flex-shrink-0' />
|
||||
<RiCloseLine className='h-4 w-4 shrink-0' />
|
||||
</ActionButton>
|
||||
</div>
|
||||
<div className='flex p-4 pt-2 flex-col justify-center items-start gap-4 self-stretch'>
|
||||
<div className='flex flex-col items-start justify-center gap-4 self-stretch p-4 pt-2'>
|
||||
<RetrievalSettings
|
||||
topK={topK}
|
||||
scoreThreshold={scoreThreshold}
|
||||
@@ -60,9 +60,9 @@ const ModifyExternalRetrievalModal: React.FC<ModifyExternalRetrievalModalProps>
|
||||
isInHitTesting={true}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex p-4 pt-2 justify-end items-end gap-1 w-full'>
|
||||
<Button className='flex-shrink-0 min-w-[72px]' onClick={onClose}>{t('common.operation.cancel')}</Button>
|
||||
<Button variant='primary' className='flex-shrink-0 min-w-[72px]' onClick={handleSave}>{t('common.operation.save')}</Button>
|
||||
<div className='flex w-full items-end justify-end gap-1 p-4 pt-2'>
|
||||
<Button className='min-w-[72px] shrink-0' onClick={onClose}>{t('common.operation.cancel')}</Button>
|
||||
<Button variant='primary' className='min-w-[72px] shrink-0' onClick={handleSave}>{t('common.operation.save')}</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -59,16 +59,16 @@ const ModifyRetrievalModal: FC<Props> = ({
|
||||
|
||||
return (
|
||||
<div
|
||||
className='w-full flex flex-col bg-components-panel-bg border-[0.5px] border-components-panel-border rounded-2xl shadow-2xl shadow-shadow-shadow-9'
|
||||
className='flex w-full flex-col rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-2xl shadow-shadow-shadow-9'
|
||||
style={{
|
||||
height: 'calc(100vh - 72px)',
|
||||
}}
|
||||
ref={ref}
|
||||
>
|
||||
<div className='shrink-0 flex justify-between pt-3.5 pb-1 px-3 h-15'>
|
||||
<div className='h-15 flex shrink-0 justify-between px-3 pb-1 pt-3.5'>
|
||||
<div className='text-base font-semibold text-text-primary'>
|
||||
<div>{t('datasetSettings.form.retrievalSetting.title')}</div>
|
||||
<div className='leading-[18px] text-xs font-normal text-text-tertiary'>
|
||||
<div className='text-xs font-normal leading-[18px] text-text-tertiary'>
|
||||
<a
|
||||
target='_blank'
|
||||
rel='noopener noreferrer'
|
||||
@@ -83,15 +83,15 @@ const ModifyRetrievalModal: FC<Props> = ({
|
||||
<div className='flex'>
|
||||
<div
|
||||
onClick={onHide}
|
||||
className='flex justify-center items-center w-8 h-8 cursor-pointer'
|
||||
className='flex h-8 w-8 cursor-pointer items-center justify-center'
|
||||
>
|
||||
<RiCloseLine className='w-4 h-4 text-text-tertiary' />
|
||||
<RiCloseLine className='h-4 w-4 text-text-tertiary' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='px-4 py-2'>
|
||||
<div className='mb-1 text-text-secondary text-[13px] leading-6 font-semibold'>
|
||||
<div className='mb-1 text-[13px] font-semibold leading-6 text-text-secondary'>
|
||||
{t('datasetSettings.form.retrievalSetting.method')}
|
||||
</div>
|
||||
{indexMethod === 'high_quality'
|
||||
@@ -109,8 +109,8 @@ const ModifyRetrievalModal: FC<Props> = ({
|
||||
)}
|
||||
</div>
|
||||
<div className='flex justify-end p-4 pt-2'>
|
||||
<Button className='mr-2 flex-shrink-0' onClick={onHide}>{t('common.operation.cancel')}</Button>
|
||||
<Button variant='primary' className='flex-shrink-0' onClick={handleSave} >{t('common.operation.save')}</Button>
|
||||
<Button className='mr-2 shrink-0' onClick={onHide}>{t('common.operation.cancel')}</Button>
|
||||
<Button variant='primary' className='shrink-0' onClick={handleSave} >{t('common.operation.save')}</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -108,9 +108,9 @@ const TextAreaWithButton = ({
|
||||
return (
|
||||
<>
|
||||
<div className={cn('relative rounded-xl', promptS.gradientBorder)}>
|
||||
<div className='relative pt-1.5 rounded-t-xl bg-background-section-burn'>
|
||||
<div className="pl-4 pr-1.5 pb-1 flex justify-between h-8 items-center">
|
||||
<span className="text-text-secondary font-semibold text-[13px] leading-4 uppercase">
|
||||
<div className='relative rounded-t-xl bg-background-section-burn pt-1.5'>
|
||||
<div className="flex h-8 items-center justify-between pb-1 pl-4 pr-1.5">
|
||||
<span className="text-[13px] font-semibold uppercase leading-4 text-text-secondary">
|
||||
{t('datasetHitTesting.input.title')}
|
||||
</span>
|
||||
{isExternal
|
||||
@@ -119,17 +119,17 @@ const TextAreaWithButton = ({
|
||||
size='small'
|
||||
onClick={() => setIsSettingsOpen(!isSettingsOpen)}
|
||||
>
|
||||
<RiEqualizer2Line className='text-components-button-secondary-text w-3.5 h-3.5' />
|
||||
<div className='flex px-[3px] justify-center items-center gap-1'>
|
||||
<span className='text-components-button-secondary-text system-xs-medium'>{t('datasetHitTesting.settingTitle')}</span>
|
||||
<RiEqualizer2Line className='h-3.5 w-3.5 text-components-button-secondary-text' />
|
||||
<div className='flex items-center justify-center gap-1 px-[3px]'>
|
||||
<span className='system-xs-medium text-components-button-secondary-text'>{t('datasetHitTesting.settingTitle')}</span>
|
||||
</div>
|
||||
</Button>
|
||||
: <div
|
||||
onClick={onClickRetrievalMethod}
|
||||
className='flex px-1.5 h-7 items-center bg-components-button-secondary-bg hover:bg-components-button-secondary-bg-hover rounded-lg border-[0.5px] border-components-button-secondary-bg shadow-xs backdrop-blur-[5px] cursor-pointer space-x-0.5'
|
||||
className='flex h-7 cursor-pointer items-center space-x-0.5 rounded-lg border-[0.5px] border-components-button-secondary-bg bg-components-button-secondary-bg px-1.5 shadow-xs backdrop-blur-[5px] hover:bg-components-button-secondary-bg-hover'
|
||||
>
|
||||
{icon}
|
||||
<div className='text-text-secondary text-xs font-medium uppercase'>{t(`dataset.retrieval.${retrievalMethod}.title`)}</div>
|
||||
<div className='text-xs font-medium uppercase text-text-secondary'>{t(`dataset.retrieval.${retrievalMethod}.title`)}</div>
|
||||
<RiEqualizer2Line className='size-4 text-components-menu-item-text'></RiEqualizer2Line>
|
||||
</div>
|
||||
}
|
||||
@@ -147,34 +147,34 @@ const TextAreaWithButton = ({
|
||||
}
|
||||
<div className='h-2 rounded-t-xl bg-background-default'></div>
|
||||
</div>
|
||||
<div className='px-4 pb-11 bg-background-default rounded-b-xl'>
|
||||
<div className='rounded-b-xl bg-background-default px-4 pb-11'>
|
||||
<textarea
|
||||
className='h-[220px] border-none resize-none font-normal caret-[#295EFF] text-text-secondary text-sm w-full focus-visible:outline-none placeholder:text-components-input-text-placeholder placeholder:text-sm placeholder:font-normal bg-transparent'
|
||||
className='h-[220px] w-full resize-none border-none bg-transparent text-sm font-normal text-text-secondary caret-[#295EFF] placeholder:text-sm placeholder:font-normal placeholder:text-components-input-text-placeholder focus-visible:outline-none'
|
||||
value={text}
|
||||
onChange={handleTextChange}
|
||||
placeholder={t('datasetHitTesting.input.placeholder') as string}
|
||||
/>
|
||||
<div className="absolute inset-x-0 bottom-0 flex items-center justify-between mx-4 mt-2 mb-2">
|
||||
<div className="absolute inset-x-0 bottom-0 mx-4 mb-2 mt-2 flex items-center justify-between">
|
||||
{text?.length > 200
|
||||
? (
|
||||
<Tooltip
|
||||
popupContent={t('datasetHitTesting.input.countWarning')}
|
||||
>
|
||||
<div
|
||||
className={cn('flex items-center h-5 px-1 rounded-md bg-background-section-burn text-red-600 text-xs font-medium', !text?.length && 'opacity-50')}
|
||||
className={cn('flex h-5 items-center rounded-md bg-background-section-burn px-1 text-xs font-medium text-red-600', !text?.length && 'opacity-50')}
|
||||
>
|
||||
{text?.length}
|
||||
<span className="text-red-300 mx-0.5">/</span>
|
||||
<span className="mx-0.5 text-red-300">/</span>
|
||||
200
|
||||
</div>
|
||||
</Tooltip>
|
||||
)
|
||||
: (
|
||||
<div
|
||||
className={cn('flex items-center h-5 px-1 rounded-md bg-background-section-burn text-text-tertiary text-xs font-medium', !text?.length && 'opacity-50')}
|
||||
className={cn('flex h-5 items-center rounded-md bg-background-section-burn px-1 text-xs font-medium text-text-tertiary', !text?.length && 'opacity-50')}
|
||||
>
|
||||
{text?.length}
|
||||
<span className="text-divider-deep mx-0.5">/</span>
|
||||
<span className="mx-0.5 text-divider-deep">/</span>
|
||||
200
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user