outman/dify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: create datasets step two dark mode

Browse Source
This commit is contained in:
AkaraChen 2024-12-13 13:11:37 +08:00
parent 766f697f83
commit 2fb71dce50
14 changed files with 123 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/app/components/base/input-number/index.tsx
View File

@ -39,7 +39,7 @@ export const InputNumber: FC<InputNumberProps> = (props) => {
}}
/>
{unit && <div className='flex items-center bg-components-input-bg-normal text-[13px] text-text-placeholder pr-2'>{unit}</div>}
<div className='flex flex-col bg-components-input-bg-normal rounded-r-md border-l text-text-tertiary focus:shadow-xs'>
<div className='flex flex-col bg-components-input-bg-normal rounded-r-md border-l border-divider-subtle text-text-tertiary focus:shadow-xs'>
<button onClick={inc} className={classNames(
size === 'sm' ? 'pt-1' : 'pt-1.5',
'px-1.5 hover:bg-components-input-bg-hover',

3
web/app/components/base/param-item/index.tsx
View File

@ -35,7 +35,7 @@ const ParamItem: FC<Props> = ({ className, id, name, noTooltip, tip, step = 0.1,
}}
/>
)}
<span className="mx-1 text-gray-900 text-[13px] leading-[18px] font-medium">{name}</span>
<span className="mx-1 text-text-secondary text-[13px] leading-[18px] font-medium">{name}</span>
{!noTooltip && (
<Tooltip
triggerClassName='w-4 h-4 shrink-0'
@ -59,6 +59,7 @@ const ParamItem: FC<Props> = ({ className, id, name, noTooltip, tip, step = 0.1,
onChange={(value) => {
onChange(id, value)
}}
className='w-8'
/>
</div>
<div className="flex items-center h-7 grow">

6
web/app/components/base/radio-card/index.tsx
View File

@ -41,8 +41,8 @@ const RadioCard: FC<Props> = ({
{icon}
</div>
<div className='grow'>
<div className='leading-5 text-sm font-medium text-gray-900'>{title}</div>
<div className='leading-[18px] text-xs font-normal text-[#667085]'>{description}</div>
<div className='leading-5 text-sm font-medium text-text-secondary'>{title}</div>
<div className='leading-[18px] text-xs font-normal text-text-tertiary'>{description}</div>
</div>
{!noRadio && (
<div className='shrink-0 flex items-center h-8'>
@ -54,7 +54,7 @@ const RadioCard: FC<Props> = ({
)}
</div>
{((isChosen && chosenConfig) || noRadio) && (
<div className={cn(chosenConfigWrapClassName, 'p-3 border-t border-gray-200')}>
<div className={cn(chosenConfigWrapClassName, 'p-3')}>
{chosenConfig}
</div>
)}

2
web/app/components/datasets/common/document-picker/preview-document-picker.tsx
View File

@ -54,7 +54,7 @@ const PreviewDocumentPicker: FC<Props> = ({
<FileIcon name={name} extension={extension} size='md' />
<div className='flex flex-col items-start ml-1'>
<div className='flex items-center space-x-0.5'>
<span className={cn('system-md-semibold max-w-[200px] overflow-clip')}> {name || '--'}</span>
<span className={cn('system-md-semibold max-w-[200px] overflow-clip text-text-primary')}> {name || '--'}</span>
<ArrowIcon className={'h-[18px] w-[18px] text-text-primary'} />
</div>
</div>

2
web/app/components/datasets/common/economical-retrieval-method-config/index.tsx
View File

@ -25,7 +25,7 @@ const EconomicalRetrievalMethodConfig: FC<Props> = ({
<OptionCard icon={<Image className='w-4 h-4' src={retrievalIcon.vector} alt='' />}
title={t('dataset.retrieval.invertedIndex.title')}
description={t('dataset.retrieval.invertedIndex.description')} isActive
activeHeaderClassName='bg-gradient-to-r from-[#F0EEFA] to-[#F9FAFB]'
activeHeaderClassName='dataset-option-card-purple-gradient'
>
<RetrievalParamConfig
type={RETRIEVE_METHOD.invertedIndex}

6
web/app/components/datasets/common/retrieval-method-config/index.tsx
View File

@ -69,7 +69,7 @@ const RetrievalMethodConfig: FC<Props> = ({
search_method: RETRIEVE_METHOD.semantic,
})}
effectImg={Effect.src}
activeHeaderClassName='bg-gradient-to-r from-[#F0EEFA] to-[#F9FAFB]'
activeHeaderClassName='dataset-option-card-purple-gradient'
>
<RetrievalParamConfig
type={RETRIEVE_METHOD.semantic}
@ -90,7 +90,7 @@ const RetrievalMethodConfig: FC<Props> = ({
search_method: RETRIEVE_METHOD.fullText,
})}
effectImg={Effect.src}
activeHeaderClassName='bg-gradient-to-r from-[#F0EEFA] to-[#F9FAFB]'
activeHeaderClassName='dataset-option-card-purple-gradient'
>
<RetrievalParamConfig
type={RETRIEVE_METHOD.fullText}
@ -116,7 +116,7 @@ const RetrievalMethodConfig: FC<Props> = ({
reranking_enable: true,
})}
effectImg={Effect.src}
activeHeaderClassName='bg-gradient-to-r from-[#F0EEFA] to-[#F9FAFB]'
activeHeaderClassName='bg-dataset-option-card-purple-gradient'
>
<RetrievalParamConfig
type={RETRIEVE_METHOD.hybrid}

6
web/app/components/datasets/create/step-two/index.module.css
View File

@ -18,11 +18,10 @@
}
.form .label {
@apply pb-2 flex items-center;
@apply pb-2 flex items-center text-text-secondary;
font-weight: 500;
font-size: 16px;
line-height: 24px;
color: #344054;
}
.segmentationItem {
@ -91,8 +90,7 @@
}
.radioItem {
@apply relative mb-2 rounded-xl border border-gray-100 cursor-pointer;
background-color: #fcfcfd;
@apply relative mb-2 rounded-xl border border-components-option-card-option-border cursor-pointer bg-components-option-card-option-bg;
}
.radioItem.segmentationItem.custom {

101
web/app/components/datasets/create/step-two/index.tsx
View File

@ -588,7 +588,7 @@ const StepTwo = ({
&& <OptionCard
title={t('datasetCreation.stepTwo.general')}
icon={<Image src={SettingCog} alt={t('datasetCreation.stepTwo.general')} />}
activeHeaderClassName='bg-gradient-to-r from-[#EFF0F9] to-[#F9FAFB]'
activeHeaderClassName='bg-dataset-option-card-blue-gradient'
description={t('datasetCreation.stepTwo.generalTip')}
isActive={
[ChuckingMode.text, ChuckingMode.qa].includes(
@ -638,7 +638,7 @@ const StepTwo = ({
<Checkbox
checked={rule.enabled}
/>
<label className="ml-2 text-sm font-normal cursor-pointer text-gray-800">{getRuleName(rule.id)}</label>
<label className="ml-2 text-sm font-normal cursor-pointer text-text-secondary">{getRuleName(rule.id)}</label>
</div>
))}
</div>
@ -692,7 +692,7 @@ const StepTwo = ({
title={t('datasetCreation.stepTwo.parentChild')}
icon={<Image src={FamilyMod} alt={t('datasetCreation.stepTwo.parentChild')} />}
effectImg={OrangeEffect.src}
activeHeaderClassName='bg-gradient-to-r from-[#F9F1EE] to-[#F9FAFB]'
activeHeaderClassName='bg-dataset-option-card-orange-gradient'
description={t('datasetCreation.stepTwo.parentChildTip')}
isActive={
datasetId ? currentDataset!.doc_form === ChuckingMode.parentChild : docForm === ChuckingMode.parentChild
@ -805,7 +805,7 @@ const StepTwo = ({
<Checkbox
checked={rule.enabled}
/>
<label className="ml-2 text-sm font-normal cursor-pointer text-gray-800">{getRuleName(rule.id)}</label>
<label className="ml-2 text-sm font-normal cursor-pointer text-text-secondary">{getRuleName(rule.id)}</label>
</div>
))}
</div>
@ -820,60 +820,27 @@ const StepTwo = ({
<div className='max-w-[640px]'>
<div className='flex items-center gap-3 flex-wrap sm:flex-nowrap'>
{(!hasSetIndexType || (hasSetIndexType && indexingType === IndexingType.QUALIFIED)) && (
<div
className={cn(
s.radioItem,
s.indexItem,
!isAPIKeySet && s.disabled,
!hasSetIndexType && indexType === IndexingType.QUALIFIED && s.active,
hasSetIndexType && s.disabled,
hasSetIndexType && '!w-full !min-h-[96px]',
)}
onClick={() => {
<OptionCard
title={<p className='flex items-center'>
{t('datasetCreation.stepTwo.qualified')}
{!hasSetIndexType && <Badge className='ml-1' uppercase>{t('datasetCreation.stepTwo.recommend')}</Badge>}
<span className='ml-auto'>
{!hasSetIndexType && <span className={cn(s.radio)} />}
</span>
</p>}
description={t('datasetCreation.stepTwo.qualifiedTip')}
icon={<Image src={indexMethodIcon.high_quality} alt='' />}
isActive={!hasSetIndexType && indexType === IndexingType.QUALIFIED}
disabled={!isAPIKeySet || hasSetIndexType}
onSwitched={() => {
if (isAPIKeySet)
setIndexType(IndexingType.QUALIFIED)
}}
>
<div className='h-8 p-1.5 bg-white rounded-lg border border-components-panel-border-subtle justify-center items-center inline-flex absolute left-5 top-[18px]'>
<Image src={indexMethodIcon.high_quality} alt='Gold Icon' width={20} height={20} />
</div>
{!hasSetIndexType && <span className={cn(s.radio)} />}
<div className={s.typeHeader}>
<div className={s.title}>
{t('datasetCreation.stepTwo.qualified')}
{!hasSetIndexType && <span className={s.recommendTag}>{t('datasetCreation.stepTwo.recommend')}</span>}
</div>
<div className={s.tip}>{t('datasetCreation.stepTwo.qualifiedTip')}</div>
</div>
{!isAPIKeySet && (
<div className={s.warningTip}>
<span>{t('datasetCreation.stepTwo.warning')}&nbsp;</span>
<span className={s.click} onClick={onSetting}>{t('datasetCreation.stepTwo.click')}</span>
</div>
)}
</div>
/>
)}
{(!hasSetIndexType || (hasSetIndexType && indexingType === IndexingType.ECONOMICAL)) && (
<PortalToFollowElem
open={
isHoveringEconomy && docForm !== ChuckingMode.text
}
placement={'top'}
>
<PortalToFollowElemTrigger>
<div
className={cn(
s.radioItem,
s.indexItem,
!hasSetIndexType && indexType === IndexingType.ECONOMICAL && s.active,
hasSetIndexType && s.disabled,
hasSetIndexType && '!w-full !min-h-[96px]',
docForm !== ChuckingMode.text && s.disabled,
)}
onClick={changeToEconomicalType}
ref={economyDomRef}
>
<>
<CustomDialog show={isQAConfirmDialogOpen} onClose={() => setIsQAConfirmDialogOpen(false)} className='w-[432px]'>
<header className='pt-6 mb-4'>
<h2 className='text-lg font-semibold'>
@ -898,15 +865,25 @@ const StepTwo = ({
</Button>
</div>
</CustomDialog>
<div className='h-8 p-1.5 bg-white rounded-lg border border-components-panel-border-subtle justify-center items-center inline-flex absolute left-5 top-[18px]'>
<Image src={indexMethodIcon.economical} alt='Economical Icon' width={20} height={20} />
</div>
{!hasSetIndexType && <span className={cn(s.radio)} />}
<div className={s.typeHeader}>
<div className={s.title}>{t('datasetCreation.stepTwo.economical')}</div>
<div className={s.tip}>{t('datasetCreation.stepTwo.economicalTip')}</div>
</div>
</div>
<PortalToFollowElem
open={
isHoveringEconomy && docForm !== ChuckingMode.text
}
placement={'top'}
>
<PortalToFollowElemTrigger>
<OptionCard
title={t('datasetCreation.stepTwo.economical')}
description={t('datasetCreation.stepTwo.economicalTip')}
icon={<Image src={indexMethodIcon.economical} alt='' />}
isActive={!hasSetIndexType && indexType === IndexingType.ECONOMICAL}
disabled={!isAPIKeySet || hasSetIndexType || docForm !== ChuckingMode.text}
ref={economyDomRef}
onSwitched={() => {
if (isAPIKeySet)
setIndexType(IndexingType.ECONOMICAL)
}}
/>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent>
<div className='p-3 bg-white text-xs font-medium text-text-secondary rounded-lg shadow-lg'>
@ -918,7 +895,7 @@ const StepTwo = ({
</div>
</PortalToFollowElemContent>
</PortalToFollowElem>
)}
</>)}
</div>
{hasSetIndexType && indexType === IndexingType.ECONOMICAL && (
<div className='mt-2 text-xs text-gray-500 font-medium'>

4
web/app/components/datasets/create/step-two/language-select/index.tsx
View File

@ -28,7 +28,7 @@ const LanguageSelect: FC<ILanguageSelectProps> = ({
{languages.filter(language => language.supported).map(({ prompt_name }) => (
<div
key={prompt_name}
className='py-2 px-3 mx-1 flex items-center gap-2 hover:bg-gray-100 rounded-lg cursor-pointer text-gray-700 text-sm'
className='py-2 px-3 mx-1 flex items-center gap-2 hover:bg-gray-100 rounded-lg cursor-pointer text-text-secondary text-sm'
onClick={() => onSelect(prompt_name)}>{prompt_name}
</div>
))}
@ -40,7 +40,7 @@ const LanguageSelect: FC<ILanguageSelectProps> = ({
<RiArrowDownSLine className='w-3 h-3 opacity-60' />
</div>
}
btnClassName={open => cn('!border-0 !px-0 !py-0 !bg-inherit !hover:bg-inherit', open ? 'text-blue-600' : 'text-gray-500')}
btnClassName={() => cn('!border-0 !px-0 !py-0 !bg-inherit !hover:bg-inherit text-components-button-tertiary-text')}
className='!w-[120px] h-fit !z-20 !translate-x-0 !left-[-16px]'
/>
)

30
web/app/components/datasets/create/step-two/option-card.tsx
View File

@ -1,12 +1,11 @@
import { type ComponentProps, type FC, type ReactNode } from 'react'
import { type ComponentProps, type FC, type ReactNode, forwardRef } from 'react'
import Image from 'next/image'
import piggyBank from '../assets/piggy-bank-01.svg'
import Effect from '../assets/option-card-effect-blue.svg'
import classNames from '@/utils/classnames'
const TriangleArrow: FC<ComponentProps<'svg'>> = props => (
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="11" viewBox="0 0 24 11" fill="none" {...props}>
<path d="M9.87868 1.12132C11.0503 -0.0502525 12.9497 -0.0502525 14.1213 1.12132L23.3137 10.3137H0.686292L9.87868 1.12132Z" fill="white"/>
<path d="M9.87868 1.12132C11.0503 -0.0502525 12.9497 -0.0502525 14.1213 1.12132L23.3137 10.3137H0.686292L9.87868 1.12132Z" fill="currentColor"/>
</svg>
)
@ -27,12 +26,12 @@ export const OptionCardHeader: FC<OptionCardHeaderProps> = (props) => {
)}>
<div className='size-14 flex items-center justify-center relative overflow-hidden'>
{isActive && <Image src={effectImg || Effect.src} className='absolute top-0 left-0 w-full h-full' alt='' width={56} height={56} />}
<div className='size-8 rounded-lg border p-1.5 shadow border-components-panel-border-subtle justify-center flex bg-white'>
{icon || <Image src={piggyBank.src} className='size-5' alt={description} width={20} height={20} />}
<div className='size-8 rounded-lg border p-1.5 shadow border-components-panel-border-subtle justify-center flex bg-background-default-dodge'>
{icon}
</div>
</div>
<TriangleArrow
className='absolute left-4 -bottom-1.5'
className='absolute left-4 -bottom-1.5 text-components-panel-bg'
/>
<div className='flex-1 space-y-1 py-3 pr-4'>
<div className='text-text-secondary text-sm font-semibold leading-tight'>{title}</div>
@ -52,10 +51,11 @@ type OptionCardProps = {
effectImg?: string
onSwitched?: () => void
noHighlight?: boolean
disabled?: boolean
} & Omit<ComponentProps<'div'>, 'title'>
export const OptionCard: FC<OptionCardProps> = (props) => {
const { icon, className, title, description, isActive, children, actions, activeHeaderClassName, style, effectImg, onSwitched, onClick, noHighlight, ...rest } = props
export const OptionCard: FC<OptionCardProps> = forwardRef((props, ref) => {
const { icon, className, title, description, isActive, children, actions, activeHeaderClassName, style, effectImg, onSwitched, onClick, noHighlight, disabled, ...rest } = props
return <div
className={classNames(
'rounded-xl',
@ -71,7 +71,9 @@ export const OptionCard: FC<OptionCardProps> = (props) => {
onSwitched?.()
onClick?.(e)
}}
{...rest}>
{...rest}
ref={ref}
>
<OptionCardHeader
icon={icon}
title={title}
@ -81,10 +83,14 @@ export const OptionCard: FC<OptionCardProps> = (props) => {
effectImg={effectImg}
/>
{/** Body */}
{isActive && <div className='p-3'>{children}
{isActive && (children || actions) && <div className='p-3'>
{children}
{actions && <div className='flex gap-2 mt-4'>
{actions}
</div>}
</div>}
</div>
}
</div>}
</div>
})
OptionCard.displayName = 'OptionCard'

2
web/app/components/header/account-setting/model-provider-page/model-name/index.tsx
View File

@ -39,7 +39,7 @@ const ModelName: FC<ModelNameProps> = ({
return (
<div
className={`
flex items-center truncate text-[13px] font-medium text-gray-800
flex items-center truncate text-[13px] font-medium text-components-input-text-filled
${className}
`}
>

16
web/app/components/header/account-setting/model-provider-page/model-selector/model-trigger.tsx
View File

@ -13,6 +13,7 @@ import ModelIcon from '../model-icon'
import ModelName from '../model-name'
import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
import Tooltip from '@/app/components/base/tooltip'
import classNames from '@/utils/classnames'
type ModelTriggerProps = {
open: boolean
@ -32,13 +33,13 @@ const ModelTrigger: FC<ModelTriggerProps> = ({
return (
<div
className={`
group flex items-center px-2 h-8 rounded-lg bg-gray-100
${!readonly && 'hover:bg-gray-200 cursor-pointer'}
${className}
${open && '!bg-gray-200'}
${model.status !== ModelStatusEnum.active && '!bg-[#FFFAEB]'}
`}
className={classNames(
'group flex items-center px-2 h-8 rounded-lg bg-components-input-bg-normal',
!readonly && 'hover:bg-components-input-bg-hover cursor-pointer',
className,
open && '!bg-components-input-bg-hover',
model.status !== ModelStatusEnum.active && '!bg-[#FFFAEB]',
)}
>
<ModelIcon
className='shrink-0 mr-1.5'
@ -68,7 +69,6 @@ const ModelTrigger: FC<ModelTriggerProps> = ({
}
</div>
)}
</div>
)
}

3
web/themes/manual-dark.css
View File

@ -6,4 +6,7 @@ html[data-theme="dark"] {
--color-dataset-chunk-process-error-bg: linear-gradient(92deg, rgba(240, 68, 56, 0.30) 0%, rgba(0, 0, 0, 0.00) 100%);
--color-dataset-chunk-detail-card-hover-bg: linear-gradient(180deg, #1D1D20 0%, #222225 100%);
--color-dataset-child-chunk-expand-btn-bg: linear-gradient(90deg, rgba(24, 24, 27, 0.25) 0%, rgba(24, 24, 27, 0.04) 100%);
--color-dataset-option-card-blue-gradient: linear-gradient(180deg, #24252E 0%, #1E1E21 100%);
--color-dataset-option-card-purple-gradient: linear-gradient(180deg, #25242E 0%, #1E1E21 100%);
--color-dataset-option-card-orange-gradient: linear-gradient(180deg, #2B2322 0%, #1E1E21 100%);
}

3
web/themes/manual-light.css
View File

@ -6,4 +6,7 @@ html[data-theme="light"] {
--color-dataset-chunk-process-error-bg: linear-gradient(92deg, rgba(240, 68, 56, 0.25) 0%, rgba(255, 255, 255, 0.00) 100%);
--color-dataset-chunk-detail-card-hover-bg: linear-gradient(180deg, #F2F4F7 0%, #F9FAFB 100%);
--color-dataset-child-chunk-expand-btn-bg: linear-gradient(90deg, rgba(200, 206, 218, 0.20) 0%, rgba(200, 206, 218, 0.04) 100%);
--color-dataset-option-card-blue-gradient: linear-gradient(180deg, #F2F4F7 0%, #F9FAFB 100%);
--color-dataset-option-card-purple-gradient: linear-gradient(180deg, #F0EEFA 0%, #F9FAFB 100%);
--color-dataset-option-card-orange-gradient: linear-gradient(180deg, #F8F2EE 0%, #F9FAFB 100%);
}