opensource/dify
2
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-04-29 04:26:30 +08:00
Code Issues 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>} {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( <button onClick={inc} className={classNames(
size === 'sm' ? 'pt-1' : 'pt-1.5', size === 'sm' ? 'pt-1' : 'pt-1.5',
'px-1.5 hover:bg-components-input-bg-hover', '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 && ( {!noTooltip && (
<Tooltip <Tooltip
triggerClassName='w-4 h-4 shrink-0' 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={(value) => {
onChange(id, value) onChange(id, value)
}} }}
className='w-8'
/> />
</div> </div>
<div className="flex items-center h-7 grow"> <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} {icon}
</div> </div>
<div className='grow'> <div className='grow'>
<div className='leading-5 text-sm font-medium text-gray-900'>{title}</div> <div className='leading-5 text-sm font-medium text-text-secondary'>{title}</div>
<div className='leading-[18px] text-xs font-normal text-[#667085]'>{description}</div> <div className='leading-[18px] text-xs font-normal text-text-tertiary'>{description}</div>
</div> </div>
{!noRadio && ( {!noRadio && (
<div className='shrink-0 flex items-center h-8'> <div className='shrink-0 flex items-center h-8'>
@ -54,7 +54,7 @@ const RadioCard: FC<Props> = ({
)} )}
</div> </div>
{((isChosen && chosenConfig) || noRadio) && ( {((isChosen && chosenConfig) || noRadio) && (
<div className={cn(chosenConfigWrapClassName, 'p-3 border-t border-gray-200')}> <div className={cn(chosenConfigWrapClassName, 'p-3')}>
{chosenConfig} {chosenConfig}
</div> </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' /> <FileIcon name={name} extension={extension} size='md' />
<div className='flex flex-col items-start ml-1'> <div className='flex flex-col items-start ml-1'>
<div className='flex items-center space-x-0.5'> <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'} /> <ArrowIcon className={'h-[18px] w-[18px] text-text-primary'} />
</div> </div>
</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='' />} <OptionCard icon={<Image className='w-4 h-4' src={retrievalIcon.vector} alt='' />}
title={t('dataset.retrieval.invertedIndex.title')} title={t('dataset.retrieval.invertedIndex.title')}
description={t('dataset.retrieval.invertedIndex.description')} isActive description={t('dataset.retrieval.invertedIndex.description')} isActive
activeHeaderClassName='bg-gradient-to-r from-[#F0EEFA] to-[#F9FAFB]' activeHeaderClassName='dataset-option-card-purple-gradient'
> >
<RetrievalParamConfig <RetrievalParamConfig
type={RETRIEVE_METHOD.invertedIndex} 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, search_method: RETRIEVE_METHOD.semantic,
})} })}
effectImg={Effect.src} effectImg={Effect.src}
activeHeaderClassName='bg-gradient-to-r from-[#F0EEFA] to-[#F9FAFB]' activeHeaderClassName='dataset-option-card-purple-gradient'
> >
<RetrievalParamConfig <RetrievalParamConfig
type={RETRIEVE_METHOD.semantic} type={RETRIEVE_METHOD.semantic}
@ -90,7 +90,7 @@ const RetrievalMethodConfig: FC<Props> = ({
search_method: RETRIEVE_METHOD.fullText, search_method: RETRIEVE_METHOD.fullText,
})} })}
effectImg={Effect.src} effectImg={Effect.src}
activeHeaderClassName='bg-gradient-to-r from-[#F0EEFA] to-[#F9FAFB]' activeHeaderClassName='dataset-option-card-purple-gradient'
> >
<RetrievalParamConfig <RetrievalParamConfig
type={RETRIEVE_METHOD.fullText} type={RETRIEVE_METHOD.fullText}
@ -116,7 +116,7 @@ const RetrievalMethodConfig: FC<Props> = ({
reranking_enable: true, reranking_enable: true,
})} })}
effectImg={Effect.src} effectImg={Effect.src}
activeHeaderClassName='bg-gradient-to-r from-[#F0EEFA] to-[#F9FAFB]' activeHeaderClassName='bg-dataset-option-card-purple-gradient'
> >
<RetrievalParamConfig <RetrievalParamConfig
type={RETRIEVE_METHOD.hybrid} type={RETRIEVE_METHOD.hybrid}

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

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

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

@ -588,7 +588,7 @@ const StepTwo = ({
&& <OptionCard && <OptionCard
title={t('datasetCreation.stepTwo.general')} title={t('datasetCreation.stepTwo.general')}
icon={<Image src={SettingCog} alt={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')} description={t('datasetCreation.stepTwo.generalTip')}
isActive={ isActive={
[ChuckingMode.text, ChuckingMode.qa].includes( [ChuckingMode.text, ChuckingMode.qa].includes(
@ -638,7 +638,7 @@ const StepTwo = ({
<Checkbox <Checkbox
checked={rule.enabled} 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>
))} ))}
</div> </div>
@ -692,7 +692,7 @@ const StepTwo = ({
title={t('datasetCreation.stepTwo.parentChild')} title={t('datasetCreation.stepTwo.parentChild')}
icon={<Image src={FamilyMod} alt={t('datasetCreation.stepTwo.parentChild')} />} icon={<Image src={FamilyMod} alt={t('datasetCreation.stepTwo.parentChild')} />}
effectImg={OrangeEffect.src} effectImg={OrangeEffect.src}
activeHeaderClassName='bg-gradient-to-r from-[#F9F1EE] to-[#F9FAFB]' activeHeaderClassName='bg-dataset-option-card-orange-gradient'
description={t('datasetCreation.stepTwo.parentChildTip')} description={t('datasetCreation.stepTwo.parentChildTip')}
isActive={ isActive={
datasetId ? currentDataset!.doc_form === ChuckingMode.parentChild : docForm === ChuckingMode.parentChild datasetId ? currentDataset!.doc_form === ChuckingMode.parentChild : docForm === ChuckingMode.parentChild
@ -805,7 +805,7 @@ const StepTwo = ({
<Checkbox <Checkbox
checked={rule.enabled} 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>
))} ))}
</div> </div>
@ -820,105 +820,82 @@ const StepTwo = ({
<div className='max-w-[640px]'> <div className='max-w-[640px]'>
<div className='flex items-center gap-3 flex-wrap sm:flex-nowrap'> <div className='flex items-center gap-3 flex-wrap sm:flex-nowrap'>
{(!hasSetIndexType || (hasSetIndexType && indexingType === IndexingType.QUALIFIED)) && ( {(!hasSetIndexType || (hasSetIndexType && indexingType === IndexingType.QUALIFIED)) && (
<div <OptionCard
className={cn( title={<p className='flex items-center'>
s.radioItem, {t('datasetCreation.stepTwo.qualified')}
s.indexItem, {!hasSetIndexType && <Badge className='ml-1' uppercase>{t('datasetCreation.stepTwo.recommend')}</Badge>}
!isAPIKeySet && s.disabled, <span className='ml-auto'>
!hasSetIndexType && indexType === IndexingType.QUALIFIED && s.active, {!hasSetIndexType && <span className={cn(s.radio)} />}
hasSetIndexType && s.disabled, </span>
hasSetIndexType && '!w-full !min-h-[96px]', </p>}
)} description={t('datasetCreation.stepTwo.qualifiedTip')}
onClick={() => { icon={<Image src={indexMethodIcon.high_quality} alt='' />}
isActive={!hasSetIndexType && indexType === IndexingType.QUALIFIED}
disabled={!isAPIKeySet || hasSetIndexType}
onSwitched={() => {
if (isAPIKeySet) if (isAPIKeySet)
setIndexType(IndexingType.QUALIFIED) 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)) && ( {(!hasSetIndexType || (hasSetIndexType && indexingType === IndexingType.ECONOMICAL)) && (
<PortalToFollowElem <>
open={ <CustomDialog show={isQAConfirmDialogOpen} onClose={() => setIsQAConfirmDialogOpen(false)} className='w-[432px]'>
isHoveringEconomy && docForm !== ChuckingMode.text <header className='pt-6 mb-4'>
} <h2 className='text-lg font-semibold'>
placement={'top'} {t('datasetCreation.stepTwo.qaSwitchHighQualityTipTitle')}
> </h2>
<PortalToFollowElemTrigger> <p className='font-normal text-sm mt-2'>
<div {t('datasetCreation.stepTwo.qaSwitchHighQualityTipContent')}
className={cn( </p>
s.radioItem, </header>
s.indexItem, <div className='flex gap-2 pb-6'>
!hasSetIndexType && indexType === IndexingType.ECONOMICAL && s.active, <Button className='ml-auto' onClick={() => {
hasSetIndexType && s.disabled, setIsQAConfirmDialogOpen(false)
hasSetIndexType && '!w-full !min-h-[96px]', }}>
docForm !== ChuckingMode.text && s.disabled, {t('datasetCreation.stepTwo.cancel')}
)} </Button>
onClick={changeToEconomicalType} <Button variant={'primary'} onClick={() => {
ref={economyDomRef} setIsQAConfirmDialogOpen(false)
> setIndexType(IndexingType.QUALIFIED)
<CustomDialog show={isQAConfirmDialogOpen} onClose={() => setIsQAConfirmDialogOpen(false)} className='w-[432px]'> setDocForm(ChuckingMode.qa)
<header className='pt-6 mb-4'> }}>
<h2 className='text-lg font-semibold'> {t('datasetCreation.stepTwo.switch')}
{t('datasetCreation.stepTwo.qaSwitchHighQualityTipTitle')} </Button>
</h2>
<p className='font-normal text-sm mt-2'>
{t('datasetCreation.stepTwo.qaSwitchHighQualityTipContent')}
</p>
</header>
<div className='flex gap-2 pb-6'>
<Button className='ml-auto' onClick={() => {
setIsQAConfirmDialogOpen(false)
}}>
{t('datasetCreation.stepTwo.cancel')}
</Button>
<Button variant={'primary'} onClick={() => {
setIsQAConfirmDialogOpen(false)
setIndexType(IndexingType.QUALIFIED)
setDocForm(ChuckingMode.qa)
}}>
{t('datasetCreation.stepTwo.switch')}
</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> </div>
</PortalToFollowElemTrigger> </CustomDialog>
<PortalToFollowElemContent> <PortalToFollowElem
<div className='p-3 bg-white text-xs font-medium text-text-secondary rounded-lg shadow-lg'> open={
{ isHoveringEconomy && docForm !== ChuckingMode.text
docForm === ChuckingMode.qa }
? t('datasetCreation.stepTwo.notAvailableForQA') placement={'top'}
: t('datasetCreation.stepTwo.notAvailableForParentChild') >
} <PortalToFollowElemTrigger>
</div> <OptionCard
</PortalToFollowElemContent> title={t('datasetCreation.stepTwo.economical')}
</PortalToFollowElem> 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'>
{
docForm === ChuckingMode.qa
? t('datasetCreation.stepTwo.notAvailableForQA')
: t('datasetCreation.stepTwo.notAvailableForParentChild')
}
</div>
</PortalToFollowElemContent>
</PortalToFollowElem>
</>)}
</div> </div>
{hasSetIndexType && indexType === IndexingType.ECONOMICAL && ( {hasSetIndexType && indexType === IndexingType.ECONOMICAL && (
<div className='mt-2 text-xs text-gray-500 font-medium'> <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 }) => ( {languages.filter(language => language.supported).map(({ prompt_name }) => (
<div <div
key={prompt_name} 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} onClick={() => onSelect(prompt_name)}>{prompt_name}
</div> </div>
))} ))}
@ -40,7 +40,7 @@ const LanguageSelect: FC<ILanguageSelectProps> = ({
<RiArrowDownSLine className='w-3 h-3 opacity-60' /> <RiArrowDownSLine className='w-3 h-3 opacity-60' />
</div> </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]' 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 Image from 'next/image'
import piggyBank from '../assets/piggy-bank-01.svg'
import Effect from '../assets/option-card-effect-blue.svg' import Effect from '../assets/option-card-effect-blue.svg'
import classNames from '@/utils/classnames' import classNames from '@/utils/classnames'
const TriangleArrow: FC<ComponentProps<'svg'>> = props => ( 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}> <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> </svg>
) )
@ -27,12 +26,12 @@ export const OptionCardHeader: FC<OptionCardHeaderProps> = (props) => {
)}> )}>
<div className='size-14 flex items-center justify-center relative overflow-hidden'> <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} />} {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'> <div className='size-8 rounded-lg border p-1.5 shadow border-components-panel-border-subtle justify-center flex bg-background-default-dodge'>
{icon || <Image src={piggyBank.src} className='size-5' alt={description} width={20} height={20} />} {icon}
</div> </div>
</div> </div>
<TriangleArrow <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='flex-1 space-y-1 py-3 pr-4'>
<div className='text-text-secondary text-sm font-semibold leading-tight'>{title}</div> <div className='text-text-secondary text-sm font-semibold leading-tight'>{title}</div>
@ -52,10 +51,11 @@ type OptionCardProps = {
effectImg?: string effectImg?: string
onSwitched?: () => void onSwitched?: () => void
noHighlight?: boolean noHighlight?: boolean
disabled?: boolean
} & Omit<ComponentProps<'div'>, 'title'> } & Omit<ComponentProps<'div'>, 'title'>
export const OptionCard: FC<OptionCardProps> = (props) => { export const OptionCard: FC<OptionCardProps> = forwardRef((props, ref) => {
const { icon, className, title, description, isActive, children, actions, activeHeaderClassName, style, effectImg, onSwitched, onClick, noHighlight, ...rest } = props const { icon, className, title, description, isActive, children, actions, activeHeaderClassName, style, effectImg, onSwitched, onClick, noHighlight, disabled, ...rest } = props
return <div return <div
className={classNames( className={classNames(
'rounded-xl', 'rounded-xl',
@ -71,7 +71,9 @@ export const OptionCard: FC<OptionCardProps> = (props) => {
onSwitched?.() onSwitched?.()
onClick?.(e) onClick?.(e)
}} }}
{...rest}> {...rest}
ref={ref}
>
<OptionCardHeader <OptionCardHeader
icon={icon} icon={icon}
title={title} title={title}
@ -81,10 +83,14 @@ export const OptionCard: FC<OptionCardProps> = (props) => {
effectImg={effectImg} effectImg={effectImg}
/> />
{/** Body */} {/** 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 className='flex gap-2 mt-4'>
{actions} {actions}
</div>} </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 ( return (
<div <div
className={` 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} ${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 ModelName from '../model-name'
import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback' import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
import Tooltip from '@/app/components/base/tooltip' import Tooltip from '@/app/components/base/tooltip'
import classNames from '@/utils/classnames'
type ModelTriggerProps = { type ModelTriggerProps = {
open: boolean open: boolean
@ -32,13 +33,13 @@ const ModelTrigger: FC<ModelTriggerProps> = ({
return ( return (
<div <div
className={` className={classNames(
group flex items-center px-2 h-8 rounded-lg bg-gray-100 'group flex items-center px-2 h-8 rounded-lg bg-components-input-bg-normal',
${!readonly && 'hover:bg-gray-200 cursor-pointer'} !readonly && 'hover:bg-components-input-bg-hover cursor-pointer',
${className} className,
${open && '!bg-gray-200'} open && '!bg-components-input-bg-hover',
${model.status !== ModelStatusEnum.active && '!bg-[#FFFAEB]'} model.status !== ModelStatusEnum.active && '!bg-[#FFFAEB]',
`} )}
> >
<ModelIcon <ModelIcon
className='shrink-0 mr-1.5' className='shrink-0 mr-1.5'
@ -68,7 +69,6 @@ const ModelTrigger: FC<ModelTriggerProps> = ({
} }
</div> </div>
)} )}
</div> </div>
) )
} }

5
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-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-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-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%);
}

5
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-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-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-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%);
}