mirror of
http://112.124.100.131/huang.ze/ebiz-dify-ai.git
synced 2025-12-15 22:06: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
@@ -59,46 +59,46 @@ const ExternalApiSelect: React.FC<ExternalApiSelectProps> = ({ items, value, onS
|
||||
return (
|
||||
<div className="relative w-full">
|
||||
<div
|
||||
className={`flex items-center justify-between cursor-pointer px-2 py-1 gap-0.5 self-stretch rounded-lg
|
||||
bg-components-input-bg-normal hover:bg-state-base-hover-alt ${isOpen && 'bg-state-base-hover-alt'}`}
|
||||
className={`flex cursor-pointer items-center justify-between gap-0.5 self-stretch rounded-lg bg-components-input-bg-normal px-2
|
||||
py-1 hover:bg-state-base-hover-alt ${isOpen && 'bg-state-base-hover-alt'}`}
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
>
|
||||
{selectedItem
|
||||
? (
|
||||
<div className="flex p-1 items-center gap-2 self-stretch rounded-lg">
|
||||
<ApiConnectionMod className='text-text-secondary w-4 h-4' />
|
||||
<div className='flex items-center flex-grow'>
|
||||
<span className='text-components-input-text-filled text-ellipsis system-sm-regular overflow-hidden'>{selectedItem.name}</span>
|
||||
<div className="flex items-center gap-2 self-stretch rounded-lg p-1">
|
||||
<ApiConnectionMod className='h-4 w-4 text-text-secondary' />
|
||||
<div className='flex grow items-center'>
|
||||
<span className='system-sm-regular overflow-hidden text-ellipsis text-components-input-text-filled'>{selectedItem.name}</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
: (
|
||||
<span className='text-components-input-text-placeholder system-sm-regular'>{t('dataset.selectExternalKnowledgeAPI.placeholder')}</span>
|
||||
<span className='system-sm-regular text-components-input-text-placeholder'>{t('dataset.selectExternalKnowledgeAPI.placeholder')}</span>
|
||||
)}
|
||||
<RiArrowDownSLine className={`w-4 h-4 text-text-quaternary transition-transform ${isOpen ? 'text-text-secondary' : ''}`} />
|
||||
<RiArrowDownSLine className={`h-4 w-4 text-text-quaternary transition-transform ${isOpen ? 'text-text-secondary' : ''}`} />
|
||||
</div>
|
||||
{isOpen && (
|
||||
<div className="absolute z-10 w-full mt-1 bg-components-panel-bg-blur border rounded-xl shadow-lg">
|
||||
<div className="absolute z-10 mt-1 w-full rounded-xl border bg-components-panel-bg-blur shadow-lg">
|
||||
{items.map(item => (
|
||||
<div
|
||||
key={item.value}
|
||||
className="flex p-1 items-center cursor-pointer"
|
||||
className="flex cursor-pointer items-center p-1"
|
||||
onClick={() => handleSelect(item)}
|
||||
>
|
||||
<div className="flex p-2 items-center gap-2 self-stretch rounded-lg hover:bg-state-base-hover w-full">
|
||||
<ApiConnectionMod className='text-text-secondary w-4 h-4' />
|
||||
<span className='text-text-secondary text-ellipsis system-sm-medium overflow-hidden flex-grow'>{item.name}</span>
|
||||
<span className='text-text-tertiary overflow-hidden text-right text-ellipsis system-xs-regular'>{item.url}</span>
|
||||
<div className="flex w-full items-center gap-2 self-stretch rounded-lg p-2 hover:bg-state-base-hover">
|
||||
<ApiConnectionMod className='h-4 w-4 text-text-secondary' />
|
||||
<span className='system-sm-medium grow overflow-hidden text-ellipsis text-text-secondary'>{item.name}</span>
|
||||
<span className='system-xs-regular overflow-hidden text-ellipsis text-right text-text-tertiary'>{item.url}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<div className='flex p-1 flex-col items-start self-stretch'>
|
||||
<div className='flex flex-col items-start self-stretch p-1'>
|
||||
<div
|
||||
className='flex p-2 items-center gap-2 self-stretch rounded-lg cursor-pointer hover:bg-state-base-hover'
|
||||
className='flex cursor-pointer items-center gap-2 self-stretch rounded-lg p-2 hover:bg-state-base-hover'
|
||||
onClick={handleAddNewAPI}
|
||||
>
|
||||
<RiAddLine className='text-text-secondary w-4 h-4' />
|
||||
<span className='flex-grow overflow-hidden text-text-secondary text-ellipsis system-sm-medium'>{t('dataset.createNewExternalAPI')}</span>
|
||||
<RiAddLine className='h-4 w-4 text-text-secondary' />
|
||||
<span className='system-sm-medium grow overflow-hidden text-ellipsis text-text-secondary'>{t('dataset.createNewExternalAPI')}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -62,7 +62,7 @@ const ExternalApiSelection: React.FC<ExternalApiSelectionProps> = ({ external_kn
|
||||
<form className='flex flex-col gap-4 self-stretch'>
|
||||
<div className='flex flex-col gap-1 self-stretch'>
|
||||
<div className='flex flex-col self-stretch'>
|
||||
<label className='text-text-secondary system-sm-semibold'>{t('dataset.externalAPIPanelTitle')}</label>
|
||||
<label className='system-sm-semibold text-text-secondary'>{t('dataset.externalAPIPanelTitle')}</label>
|
||||
</div>
|
||||
{apiItems.length > 0
|
||||
? <ExternalApiSelect
|
||||
@@ -74,14 +74,14 @@ const ExternalApiSelection: React.FC<ExternalApiSelectionProps> = ({ external_kn
|
||||
}}
|
||||
/>
|
||||
: <Button variant={'tertiary'} onClick={handleAddNewAPI} className='justify-start gap-0.5'>
|
||||
<RiAddLine className='w-4 h-4 text-text-tertiary' />
|
||||
<span className='text-text-tertiary system-sm-regular'>{t('dataset.noExternalKnowledge')}</span>
|
||||
<RiAddLine className='h-4 w-4 text-text-tertiary' />
|
||||
<span className='system-sm-regular text-text-tertiary'>{t('dataset.noExternalKnowledge')}</span>
|
||||
</Button>
|
||||
}
|
||||
</div>
|
||||
<div className='flex flex-col gap-1 self-stretch'>
|
||||
<div className='flex flex-col self-stretch'>
|
||||
<label className='text-text-secondary system-sm-semibold'>{t('dataset.externalKnowledgeId')}</label>
|
||||
<label className='system-sm-semibold text-text-secondary'>{t('dataset.externalKnowledgeId')}</label>
|
||||
</div>
|
||||
<Input
|
||||
value={external_knowledge_id}
|
||||
|
||||
@@ -5,23 +5,23 @@ const InfoPanel = () => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<div className='flex w-[360px] pt-[108px] pb-2 pr-8 flex-col items-start'>
|
||||
<div className='flex min-w-[240px] w-full p-6 flex-col items-start gap-3 self-stretch rounded-xl bg-background-section'>
|
||||
<div className='flex p-1 w-10 h-10 justify-center items-center gap-2 flex-grow self-stretch rounded-lg border-[0.5px] border-components-card-border bg-components-card-bg'>
|
||||
<RiBookOpenLine className='w-5 h-5 text-text-accent' />
|
||||
<div className='flex w-[360px] flex-col items-start pb-2 pr-8 pt-[108px]'>
|
||||
<div className='flex w-full min-w-[240px] flex-col items-start gap-3 self-stretch rounded-xl bg-background-section p-6'>
|
||||
<div className='flex h-10 w-10 grow items-center justify-center gap-2 self-stretch rounded-lg border-[0.5px] border-components-card-border bg-components-card-bg p-1'>
|
||||
<RiBookOpenLine className='h-5 w-5 text-text-accent' />
|
||||
</div>
|
||||
<p className='flex flex-col items-start gap-2 self-stretch'>
|
||||
<span className='self-stretch text-text-secondary system-xl-semibold'>
|
||||
<span className='system-xl-semibold self-stretch text-text-secondary'>
|
||||
{t('dataset.connectDatasetIntro.title')}
|
||||
</span>
|
||||
<span className='text-text-tertiary system-sm-regular'>
|
||||
<span className='system-sm-regular text-text-tertiary'>
|
||||
{t('dataset.connectDatasetIntro.content.front')}
|
||||
<a className='text-text-accent system-sm-regular ml-1' href='https://docs.dify.ai/guides/knowledge-base/external-knowledge-api-documentation' target='_blank' rel="noopener noreferrer">
|
||||
<a className='system-sm-regular ml-1 text-text-accent' href='https://docs.dify.ai/guides/knowledge-base/external-knowledge-api-documentation' target='_blank' rel="noopener noreferrer">
|
||||
{t('dataset.connectDatasetIntro.content.link')}
|
||||
</a>
|
||||
{t('dataset.connectDatasetIntro.content.end')}
|
||||
</span>
|
||||
<a className='self-stretch text-text-accent system-sm-regular' href='https://docs.dify.ai/guides/knowledge-base/connect-external-knowledge' target='_blank' rel="noopener noreferrer">
|
||||
<a className='system-sm-regular self-stretch text-text-accent' href='https://docs.dify.ai/guides/knowledge-base/connect-external-knowledge' target='_blank' rel="noopener noreferrer">
|
||||
{t('dataset.connectDatasetIntro.learnMore')}
|
||||
</a>
|
||||
</p>
|
||||
|
||||
@@ -24,7 +24,7 @@ const KnowledgeBaseInfo: React.FC<KnowledgeBaseInfoProps> = ({ name, description
|
||||
<div className='flex flex-col gap-4 self-stretch'>
|
||||
<div className='flex flex-col gap-1 self-stretch'>
|
||||
<div className='flex flex-col justify-center self-stretch'>
|
||||
<label className='text-text-secondary system-sm-semibold'>{t('dataset.externalKnowledgeName')}</label>
|
||||
<label className='system-sm-semibold text-text-secondary'>{t('dataset.externalKnowledgeName')}</label>
|
||||
</div>
|
||||
<Input
|
||||
value={name}
|
||||
@@ -34,14 +34,14 @@ const KnowledgeBaseInfo: React.FC<KnowledgeBaseInfoProps> = ({ name, description
|
||||
</div>
|
||||
<div className='flex flex-col gap-1 self-stretch'>
|
||||
<div className='flex flex-col justify-center self-stretch'>
|
||||
<label className='text-text-secondary system-sm-semibold'>{t('dataset.externalKnowledgeDescription')}</label>
|
||||
<label className='system-sm-semibold text-text-secondary'>{t('dataset.externalKnowledgeDescription')}</label>
|
||||
</div>
|
||||
<div className='flex flex-col gap-1 self-stretch'>
|
||||
<textarea
|
||||
value={description}
|
||||
onChange={ e => handleDescriptionChange(e)}
|
||||
placeholder={t('dataset.externalKnowledgeDescriptionPlaceholder') ?? ''}
|
||||
className={`flex h-20 py-2 p-3 self-stretch items-start rounded-lg bg-components-input-bg-normal ${description ? 'text-components-input-text-filled' : 'text-components-input-text-placeholder'} system-sm-regular`}
|
||||
className={`flex h-20 items-start self-stretch rounded-lg bg-components-input-bg-normal p-3 py-2 ${description ? 'text-components-input-text-filled' : 'text-components-input-text-placeholder'} system-sm-regular`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -30,8 +30,8 @@ const RetrievalSettings: FC<RetrievalSettingsProps> = ({
|
||||
|
||||
return (
|
||||
<div className={cn('flex flex-col gap-2 self-stretch', isInRetrievalSetting && 'w-full max-w-[480px]')}>
|
||||
{!isInHitTesting && !isInRetrievalSetting && <div className='flex h-7 pt-1 flex-col gap-2 self-stretch'>
|
||||
<label className='text-text-secondary system-sm-semibold'>{t('dataset.retrievalSettings')}</label>
|
||||
{!isInHitTesting && !isInRetrievalSetting && <div className='flex h-7 flex-col gap-2 self-stretch pt-1'>
|
||||
<label className='system-sm-semibold text-text-secondary'>{t('dataset.retrievalSettings')}</label>
|
||||
</div>}
|
||||
<div className={cn(
|
||||
'flex gap-4 self-stretch',
|
||||
@@ -41,7 +41,7 @@ const RetrievalSettings: FC<RetrievalSettingsProps> = ({
|
||||
'flex-col sm:flex-row': !isInHitTesting && !isInRetrievalSetting,
|
||||
},
|
||||
)}>
|
||||
<div className='flex flex-col gap-1 flex-grow'>
|
||||
<div className='flex grow flex-col gap-1'>
|
||||
<TopKItem
|
||||
className='grow'
|
||||
value={topK}
|
||||
@@ -49,7 +49,7 @@ const RetrievalSettings: FC<RetrievalSettingsProps> = ({
|
||||
enable={true}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col gap-1 flex-grow'>
|
||||
<div className='flex grow flex-col gap-1'>
|
||||
<ScoreThresholdItem
|
||||
className='grow'
|
||||
value={scoreThreshold}
|
||||
|
||||
@@ -49,27 +49,27 @@ const ExternalKnowledgeBaseCreate: React.FC<ExternalKnowledgeBaseCreateProps> =
|
||||
&& formData.external_retrieval_model.score_threshold !== undefined
|
||||
|
||||
return (
|
||||
<div className='flex flex-col flex-grow self-stretch rounded-t-2xl border-t border-effects-highlight bg-components-panel-bg'>
|
||||
<div className='flex justify-center flex-grow self-stretch'>
|
||||
<div className='flex w-full max-w-[960px] px-14 py-0 flex-col items-center'>
|
||||
<div className='flex w-full max-w-[640px] pt-6 pb-8 flex-col grow items-center gap-4'>
|
||||
<div className='relative flex flex-col py-2 items-center gap-[2px] self-stretch'>
|
||||
<div className='flex-grow text-text-primary system-xl-semibold self-stretch'>{t('dataset.connectDataset')}</div>
|
||||
<p className='text-text-tertiary system-sm-regular'>
|
||||
<div className='flex grow flex-col self-stretch rounded-t-2xl border-t border-effects-highlight bg-components-panel-bg'>
|
||||
<div className='flex grow justify-center self-stretch'>
|
||||
<div className='flex w-full max-w-[960px] flex-col items-center px-14 py-0'>
|
||||
<div className='flex w-full max-w-[640px] grow flex-col items-center gap-4 pb-8 pt-6'>
|
||||
<div className='relative flex flex-col items-center gap-[2px] self-stretch py-2'>
|
||||
<div className='system-xl-semibold grow self-stretch text-text-primary'>{t('dataset.connectDataset')}</div>
|
||||
<p className='system-sm-regular text-text-tertiary'>
|
||||
<span>{t('dataset.connectHelper.helper1')}</span>
|
||||
<span className='text-text-secondary system-sm-medium'>{t('dataset.connectHelper.helper2')}</span>
|
||||
<span className='system-sm-medium text-text-secondary'>{t('dataset.connectHelper.helper2')}</span>
|
||||
<span>{t('dataset.connectHelper.helper3')}</span>
|
||||
<a className='self-stretch text-text-accent system-sm-regular' href='https://docs.dify.ai/guides/knowledge-base/connect-external-knowledge' target='_blank' rel="noopener noreferrer">
|
||||
<a className='system-sm-regular self-stretch text-text-accent' href='https://docs.dify.ai/guides/knowledge-base/connect-external-knowledge' target='_blank' rel="noopener noreferrer">
|
||||
{t('dataset.connectHelper.helper4')}
|
||||
</a>
|
||||
<span>{t('dataset.connectHelper.helper5')} </span>
|
||||
</p>
|
||||
<Button
|
||||
className='flex w-8 h-8 p-2 items-center justify-center absolute left-[-44px] top-1 rounded-full'
|
||||
className='absolute left-[-44px] top-1 flex h-8 w-8 items-center justify-center rounded-full p-2'
|
||||
variant='tertiary'
|
||||
onClick={navBackHandle}
|
||||
>
|
||||
<RiArrowLeftLine className='w-4 h-4 text-text-tertiary' />
|
||||
<RiArrowLeftLine className='h-4 w-4 text-text-tertiary' />
|
||||
</Button>
|
||||
</div>
|
||||
<KnowledgeBaseInfo
|
||||
@@ -101,9 +101,9 @@ const ExternalKnowledgeBaseCreate: React.FC<ExternalKnowledgeBaseCreateProps> =
|
||||
},
|
||||
})}
|
||||
/>
|
||||
<div className='flex py-2 justify-end items-center gap-2 self-stretch'>
|
||||
<div className='flex items-center justify-end gap-2 self-stretch py-2'>
|
||||
<Button variant='secondary' onClick={navBackHandle}>
|
||||
<div className='text-components-button-secondary-text system-sm-medium'>{t('dataset.externalKnowledgeForm.cancel')}</div>
|
||||
<div className='system-sm-medium text-components-button-secondary-text'>{t('dataset.externalKnowledgeForm.cancel')}</div>
|
||||
</Button>
|
||||
<Button
|
||||
variant='primary'
|
||||
@@ -113,8 +113,8 @@ const ExternalKnowledgeBaseCreate: React.FC<ExternalKnowledgeBaseCreateProps> =
|
||||
disabled={!isFormValid}
|
||||
loading={loading}
|
||||
>
|
||||
<div className='text-components-button-primary-text system-sm-medium'>{t('dataset.externalKnowledgeForm.connect')}</div>
|
||||
<RiArrowRightLine className='w-4 h-4 text-components-button-primary-text' />
|
||||
<div className='system-sm-medium text-components-button-primary-text'>{t('dataset.externalKnowledgeForm.connect')}</div>
|
||||
<RiArrowRightLine className='h-4 w-4 text-components-button-primary-text' />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user