| | |
| | | import { useTranslation } from 'react-i18next' |
| | | import { isEqual } from 'lodash-es' |
| | | import { RiCloseLine } from '@remixicon/react' |
| | | import { BookOpenIcon } from '@heroicons/react/24/outline' |
| | | import { ApiConnectionMod } from '@/app/components/base/icons/src/vender/solid/development' |
| | | import cn from '@/utils/classnames' |
| | | import IndexMethodRadio from '@/app/components/datasets/settings/index-method-radio' |
| | |
| | | const { notify } = useToastContext() |
| | | const ref = useRef(null) |
| | | const isExternal = currentDataset.provider === 'external' |
| | | const [topK, setTopK] = useState(currentDataset?.external_retrieval_model.top_k ?? 2) |
| | | const [scoreThreshold, setScoreThreshold] = useState(currentDataset?.external_retrieval_model.score_threshold ?? 0.5) |
| | | const [scoreThresholdEnabled, setScoreThresholdEnabled] = useState(currentDataset?.external_retrieval_model.score_threshold_enabled ?? false) |
| | | const { setShowAccountSettingModal } = useModalContext() |
| | | const [loading, setLoading] = useState(false) |
| | | const { isCurrentWorkspaceDatasetOperator } = useAppContext() |
| | | const [localeCurrentDataset, setLocaleCurrentDataset] = useState({ ...currentDataset }) |
| | | const [topK, setTopK] = useState(localeCurrentDataset?.external_retrieval_model.top_k ?? 2) |
| | | const [scoreThreshold, setScoreThreshold] = useState(localeCurrentDataset?.external_retrieval_model.score_threshold ?? 0.5) |
| | | const [scoreThresholdEnabled, setScoreThresholdEnabled] = useState(localeCurrentDataset?.external_retrieval_model.score_threshold_enabled ?? false) |
| | | const [selectedMemberIDs, setSelectedMemberIDs] = useState<string[]>(currentDataset.partial_member_list || []) |
| | | const [memberList, setMemberList] = useState<Member[]>([]) |
| | | |
| | |
| | | setScoreThreshold(data.score_threshold) |
| | | if (data.score_threshold_enabled !== undefined) |
| | | setScoreThresholdEnabled(data.score_threshold_enabled) |
| | | |
| | | setLocaleCurrentDataset({ |
| | | ...localeCurrentDataset, |
| | | external_retrieval_model: { |
| | | ...localeCurrentDataset?.external_retrieval_model, |
| | | ...data, |
| | | }, |
| | | }) |
| | | } |
| | | |
| | | const handleSave = async () => { |
| | |
| | | retrieval_model_dict: retrievalConfig, |
| | | }) |
| | | } |
| | | catch { |
| | | catch (e) { |
| | | notify({ type: 'error', message: t('common.actionMsg.modifiedUnsuccessfully') }) |
| | | } |
| | | finally { |
| | |
| | | |
| | | return ( |
| | | <div |
| | | className='flex w-full flex-col overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl' |
| | | className='overflow-hidden w-full flex flex-col bg-white border-[0.5px] border-gray-200 rounded-xl shadow-xl' |
| | | style={{ |
| | | height: 'calc(100vh - 72px)', |
| | | }} |
| | | ref={ref} |
| | | > |
| | | <div className='flex h-14 shrink-0 items-center justify-between border-b border-divider-regular pl-6 pr-5'> |
| | | <div className='flex flex-col text-base font-semibold text-text-primary'> |
| | | <div className='shrink-0 flex justify-between items-center pl-6 pr-5 h-14 border-b border-b-gray-100'> |
| | | <div className='flex flex-col text-base font-semibold text-gray-900'> |
| | | <div className='leading-6'>{t('datasetSettings.title')}</div> |
| | | </div> |
| | | <div className='flex items-center'> |
| | | <div |
| | | onClick={onCancel} |
| | | className='flex h-6 w-6 cursor-pointer items-center justify-center' |
| | | className='flex justify-center items-center w-6 h-6 cursor-pointer' |
| | | > |
| | | <RiCloseLine className='h-4 w-4 text-text-tertiary' /> |
| | | <RiCloseLine className='w-4 h-4 text-gray-500' /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | {/* Body */} |
| | | <div className='overflow-y-auto border-b border-divider-regular p-6 pb-[68px] pt-5'> |
| | | <div className='p-6 pt-5 border-b overflow-y-auto pb-[68px]' style={{ |
| | | borderBottom: 'rgba(0, 0, 0, 0.05)', |
| | | }}> |
| | | <div className={cn(rowClass, 'items-center')}> |
| | | <div className={labelClass}> |
| | | <div className='system-sm-semibold text-text-secondary'>{t('datasetSettings.form.name')}</div> |
| | | <div className='text-text-secondary system-sm-semibold'>{t('datasetSettings.form.name')}</div> |
| | | </div> |
| | | <Input |
| | | value={localeCurrentDataset.name} |
| | |
| | | </div> |
| | | <div className={cn(rowClass)}> |
| | | <div className={labelClass}> |
| | | <div className='system-sm-semibold text-text-secondary'>{t('datasetSettings.form.desc')}</div> |
| | | <div className='text-text-secondary system-sm-semibold'>{t('datasetSettings.form.desc')}</div> |
| | | </div> |
| | | <div className='w-full'> |
| | | <Textarea |
| | |
| | | className='resize-none' |
| | | placeholder={t('datasetSettings.form.descPlaceholder') || ''} |
| | | /> |
| | | <a className='mt-2 flex items-center h-[18px] px-3 text-xs text-gray-500' 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 className={rowClass}> |
| | | <div className={labelClass}> |
| | | <div className='system-sm-semibold text-text-secondary'>{t('datasetSettings.form.permissions')}</div> |
| | | <div className='text-text-secondary system-sm-semibold'>{t('datasetSettings.form.permissions')}</div> |
| | | </div> |
| | | <div className='w-full'> |
| | | <PermissionSelector |
| | |
| | | {currentDataset && currentDataset.indexing_technique && ( |
| | | <div className={cn(rowClass)}> |
| | | <div className={labelClass}> |
| | | <div className='system-sm-semibold text-text-secondary'>{t('datasetSettings.form.indexMethod')}</div> |
| | | <div className='text-text-secondary system-sm-semibold'>{t('datasetSettings.form.indexMethod')}</div> |
| | | </div> |
| | | <div className='grow'> |
| | | <IndexMethodRadio |
| | |
| | | {indexMethod === 'high_quality' && ( |
| | | <div className={cn(rowClass)}> |
| | | <div className={labelClass}> |
| | | <div className='system-sm-semibold text-text-secondary'>{t('datasetSettings.form.embeddingModel')}</div> |
| | | <div className='text-text-secondary system-sm-semibold'>{t('datasetSettings.form.embeddingModel')}</div> |
| | | </div> |
| | | <div className='w-full'> |
| | | <div className='h-8 w-full rounded-lg bg-components-input-bg-normal opacity-60'> |
| | | <div className='w-full h-9 rounded-lg bg-gray-100 opacity-60'> |
| | | <ModelSelector |
| | | readonly |
| | | defaultModel={{ |
| | |
| | | modelList={embeddingsModelList} |
| | | /> |
| | | </div> |
| | | <div className='mt-2 w-full text-xs leading-6 text-text-tertiary'> |
| | | <div className='mt-2 w-full text-xs leading-6 text-gray-500'> |
| | | {t('datasetSettings.form.embeddingModelTip')} |
| | | <span className='cursor-pointer text-text-accent' onClick={() => setShowAccountSettingModal({ payload: 'provider' })}>{t('datasetSettings.form.embeddingModelTipLink')}</span> |
| | | <span className='text-[#155eef] cursor-pointer' onClick={() => setShowAccountSettingModal({ payload: 'provider' })}>{t('datasetSettings.form.embeddingModelTipLink')}</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | <div className={rowClass}><Divider /></div> |
| | | <div className={rowClass}> |
| | | <div className={labelClass}> |
| | | <div className='system-sm-semibold text-text-secondary'>{t('datasetSettings.form.retrievalSetting.title')}</div> |
| | | <div className='text-text-secondary system-sm-semibold'>{t('datasetSettings.form.retrievalSetting.title')}</div> |
| | | </div> |
| | | <RetrievalSettings |
| | | topK={topK} |
| | |
| | | <div className={rowClass}><Divider /></div> |
| | | <div className={rowClass}> |
| | | <div className={labelClass}> |
| | | <div className='system-sm-semibold text-text-secondary'>{t('datasetSettings.form.externalKnowledgeAPI')}</div> |
| | | <div className='text-text-secondary system-sm-semibold'>{t('datasetSettings.form.externalKnowledgeAPI')}</div> |
| | | </div> |
| | | <div className='w-full max-w-[480px]'> |
| | | <div className='flex h-full items-center gap-1 rounded-lg bg-components-input-bg-normal px-3 py-2'> |
| | | <ApiConnectionMod className='h-4 w-4 text-text-secondary' /> |
| | | <div className='system-sm-medium overflow-hidden text-ellipsis text-text-secondary'> |
| | | <div className='flex h-full px-3 py-2 items-center gap-1 rounded-lg bg-components-input-bg-normal'> |
| | | <ApiConnectionMod className='w-4 h-4 text-text-secondary' /> |
| | | <div className='overflow-hidden text-text-secondary text-ellipsis system-sm-medium'> |
| | | {currentDataset?.external_knowledge_info.external_knowledge_api_name} |
| | | </div> |
| | | <div className='system-xs-regular text-text-tertiary'>·</div> |
| | | <div className='system-xs-regular text-text-tertiary'>{currentDataset?.external_knowledge_info.external_knowledge_api_endpoint}</div> |
| | | <div className='text-text-tertiary system-xs-regular'>·</div> |
| | | <div className='text-text-tertiary system-xs-regular'>{currentDataset?.external_knowledge_info.external_knowledge_api_endpoint}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div className={rowClass}> |
| | | <div className={labelClass}> |
| | | <div className='system-sm-semibold text-text-secondary'>{t('datasetSettings.form.externalKnowledgeID')}</div> |
| | | <div className='text-text-secondary system-sm-semibold'>{t('datasetSettings.form.externalKnowledgeID')}</div> |
| | | </div> |
| | | <div className='w-full max-w-[480px]'> |
| | | <div className='flex h-full items-center gap-1 rounded-lg bg-components-input-bg-normal px-3 py-2'> |
| | | <div className='system-xs-regular text-text-tertiary'>{currentDataset?.external_knowledge_info.external_knowledge_id}</div> |
| | | <div className='flex h-full px-3 py-2 items-center gap-1 rounded-lg bg-components-input-bg-normal'> |
| | | <div className='text-text-tertiary system-xs-regular'>{currentDataset?.external_knowledge_info.external_knowledge_id}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | : <div className={rowClass}> |
| | | <div className={cn(labelClass, 'w-auto min-w-[168px]')}> |
| | | <div> |
| | | <div className='system-sm-semibold text-text-secondary'>{t('datasetSettings.form.retrievalSetting.title')}</div> |
| | | <div className='text-xs font-normal leading-[18px] text-text-tertiary'> |
| | | <a target='_blank' rel='noopener noreferrer' href='https://docs.dify.ai/guides/knowledge-base/create-knowledge-and-upload-documents#id-4-retrieval-settings' className='text-text-accent'>{t('datasetSettings.form.retrievalSetting.learnMore')}</a> |
| | | <div className='text-text-secondary system-sm-semibold'>{t('datasetSettings.form.retrievalSetting.title')}</div> |
| | | <div className='leading-[18px] text-xs font-normal text-gray-500'> |
| | | <a target='_blank' rel='noopener noreferrer' href='https://docs.dify.ai/guides/knowledge-base/create-knowledge-and-upload-documents#id-4-retrieval-settings' className='text-[#155eef]'>{t('datasetSettings.form.retrievalSetting.learnMore')}</a> |
| | | {t('datasetSettings.form.retrievalSetting.description')} |
| | | </div> |
| | | </div> |
| | |
| | | </div>} |
| | | </div> |
| | | {isRetrievalChanged && !isHideChangedTip && ( |
| | | <div className='absolute bottom-[76px] left-[30px] right-[30px] z-10 flex h-10 items-center justify-between rounded-lg border border-[#FEF0C7] bg-[#FFFAEB] px-3 shadow-lg'> |
| | | <div className='absolute z-10 left-[30px] right-[30px] bottom-[76px] flex h-10 items-center px-3 rounded-lg border border-[#FEF0C7] bg-[#FFFAEB] shadow-lg justify-between'> |
| | | <div className='flex items-center'> |
| | | <AlertTriangle className='mr-1 h-3 w-3 text-[#F79009]' /> |
| | | <div className='text-xs font-medium leading-[18px] text-gray-700'>{t('appDebug.datasetConfig.retrieveChangeTip')}</div> |
| | | <AlertTriangle className='mr-1 w-3 h-3 text-[#F79009]' /> |
| | | <div className='leading-[18px] text-xs font-medium text-gray-700'>{t('appDebug.datasetConfig.retrieveChangeTip')}</div> |
| | | </div> |
| | | <div className='cursor-pointer p-1' onClick={(e) => { |
| | | <div className='p-1 cursor-pointer' onClick={(e) => { |
| | | setIsHideChangedTip(true) |
| | | e.stopPropagation() |
| | | e.nativeEvent.stopImmediatePropagation() |
| | | }}> |
| | | <RiCloseLine className='h-4 w-4 text-gray-500' /> |
| | | <RiCloseLine className='w-4 h-4 text-gray-500 ' /> |
| | | </div> |
| | | </div> |
| | | )} |
| | | |
| | | <div |
| | | className='sticky bottom-0 z-[5] flex w-full justify-end border-t border-divider-regular bg-background-section px-6 py-4' |
| | | className='sticky z-[5] bottom-0 w-full flex justify-end py-4 px-6 border-t bg-white ' |
| | | style={{ |
| | | borderColor: 'rgba(0, 0, 0, 0.05)', |
| | | }} |
| | | > |
| | | <Button |
| | | onClick={onCancel} |