| | |
| | | }, [onRemove]) |
| | | |
| | | return ( |
| | | <div className={`group/dataset-item flex h-10 cursor-pointer items-center justify-between rounded-lg |
| | | border-[0.5px] border-components-panel-border-subtle px-2 |
| | | <div className={`flex items-center h-10 justify-between rounded-xl px-2 border-[0.5px] |
| | | border-components-panel-border-subtle cursor-pointer group/dataset-item |
| | | ${isDeleteHovered |
| | | ? 'border-state-destructive-border bg-state-destructive-hover' |
| | | ? 'bg-state-destructive-hover border-state-destructive-border' |
| | | : 'bg-components-panel-on-panel-item-bg hover:bg-components-panel-on-panel-item-bg-hover' |
| | | }`}> |
| | | <div className='flex w-0 grow items-center space-x-1.5'> |
| | | <div className='w-0 grow flex items-center space-x-1.5'> |
| | | { |
| | | payload.data_source_type === DataSourceType.NOTION |
| | | ? ( |
| | | <div className='flex h-6 w-6 shrink-0 items-center justify-center rounded-md border-[0.5px] border-[#EAECF5]'> |
| | | <FileIcon type='notion' className='h-4 w-4' /> |
| | | <div className='shrink-0 flex items-center justify-center w-6 h-6 rounded-md border-[0.5px] border-[#EAECF5]'> |
| | | <FileIcon type='notion' className='w-4 h-4' /> |
| | | </div> |
| | | ) |
| | | : <div className='flex h-6 w-6 shrink-0 items-center justify-center rounded-md border-[0.5px] border-[#E0EAFF] bg-[#F5F8FF]'> |
| | | <Folder className='h-4 w-4 text-[#444CE7]' /> |
| | | : <div className='shrink-0 flex items-center justify-center w-6 h-6 bg-[#F5F8FF] rounded-md border-[0.5px] border-[#E0EAFF]'> |
| | | <Folder className='w-4 h-4 text-[#444CE7]' /> |
| | | </div> |
| | | } |
| | | <div className='system-sm-medium w-0 grow truncate text-text-secondary'>{payload.name}</div> |
| | | <div className='w-0 grow text-text-secondary system-sm-medium truncate'>{payload.name}</div> |
| | | </div> |
| | | {!readonly && ( |
| | | <div className='ml-2 hidden shrink-0 items-center space-x-1 group-hover/dataset-item:flex'> |
| | | <div className='hidden group-hover/dataset-item:flex shrink-0 ml-2 items-center space-x-1'> |
| | | { |
| | | editable && <ActionButton |
| | | onClick={(e) => { |
| | |
| | | showSettingsModal() |
| | | }} |
| | | > |
| | | <RiEditLine className='h-4 w-4 shrink-0 text-text-tertiary' /> |
| | | <RiEditLine className='w-4 h-4 flex-shrink-0 text-text-tertiary' /> |
| | | </ActionButton> |
| | | } |
| | | <ActionButton |
| | | onClick={handleRemove} |
| | | state={isDeleteHovered ? ActionButtonState.Destructive : ActionButtonState.Default} |
| | | state={ActionButtonState.Destructive} |
| | | onMouseEnter={() => setIsDeleteHovered(true)} |
| | | onMouseLeave={() => setIsDeleteHovered(false)} |
| | | > |
| | | <RiDeleteBinLine className={`h-4 w-4 shrink-0 ${isDeleteHovered ? 'text-text-destructive' : 'text-text-tertiary'}`} /> |
| | | <RiDeleteBinLine className={`w-4 h-4 flex-shrink-0 ${isDeleteHovered ? 'text-text-destructive' : 'text-text-tertiary'}`} /> |
| | | </ActionButton> |
| | | </div> |
| | | )} |
| | | { |
| | | payload.indexing_technique && <Badge |
| | | className='shrink-0 group-hover/dataset-item:hidden' |
| | | className='group-hover/dataset-item:hidden shrink-0' |
| | | text={formatIndexingTechniqueAndMethod(payload.indexing_technique, payload.retrieval_model_dict?.search_method)} |
| | | /> |
| | | } |
| | | { |
| | | payload.provider === 'external' && <Badge |
| | | className='shrink-0 group-hover/dataset-item:hidden' |
| | | className='group-hover/dataset-item:hidden shrink-0' |
| | | text={t('dataset.externalTag') as string} |
| | | /> |
| | | } |
| | | |
| | | {isShowSettingsModal && ( |
| | | <Drawer isOpen={isShowSettingsModal} onClose={hideSettingsModal} footer={null} mask={isMobile} panelClassName='mt-16 mx-2 sm:mr-2 mb-3 !p-0 !max-w-[640px] rounded-xl'> |
| | | <Drawer isOpen={isShowSettingsModal} onClose={hideSettingsModal} footer={null} mask={isMobile} panelClassname='mt-16 mx-2 sm:mr-2 mb-3 !p-0 !max-w-[640px] rounded-xl'> |
| | | <SettingsModal |
| | | currentDataset={payload} |
| | | onCancel={hideSettingsModal} |