From 2fb71dce50c554295254cf82c82feb4a7d6d11fb Mon Sep 17 00:00:00 2001 From: AkaraChen Date: Fri, 13 Dec 2024 13:11:37 +0800 Subject: [PATCH] feat: create datasets step two dark mode --- .../components/base/input-number/index.tsx | 2 +- web/app/components/base/param-item/index.tsx | 3 +- web/app/components/base/radio-card/index.tsx | 6 +- .../preview-document-picker.tsx | 2 +- .../index.tsx | 2 +- .../common/retrieval-method-config/index.tsx | 6 +- .../datasets/create/step-two/index.module.css | 6 +- .../datasets/create/step-two/index.tsx | 169 ++++++++---------- .../create/step-two/language-select/index.tsx | 4 +- .../datasets/create/step-two/option-card.tsx | 30 ++-- .../model-provider-page/model-name/index.tsx | 2 +- .../model-selector/model-trigger.tsx | 16 +- web/themes/manual-dark.css | 5 +- web/themes/manual-light.css | 5 +- 14 files changed, 123 insertions(+), 135 deletions(-) diff --git a/web/app/components/base/input-number/index.tsx b/web/app/components/base/input-number/index.tsx index b32cc4e0fb..7492e0814c 100644 --- a/web/app/components/base/input-number/index.tsx +++ b/web/app/components/base/input-number/index.tsx @@ -39,7 +39,7 @@ export const InputNumber: FC = (props) => { }} /> {unit &&
{unit}
} -
+
diff --git a/web/app/components/base/radio-card/index.tsx b/web/app/components/base/radio-card/index.tsx index 0c03f3be08..8ca7e8ee02 100644 --- a/web/app/components/base/radio-card/index.tsx +++ b/web/app/components/base/radio-card/index.tsx @@ -41,8 +41,8 @@ const RadioCard: FC = ({ {icon}
-
{title}
-
{description}
+
{title}
+
{description}
{!noRadio && (
@@ -54,7 +54,7 @@ const RadioCard: FC = ({ )}
{((isChosen && chosenConfig) || noRadio) && ( -
+
{chosenConfig}
)} diff --git a/web/app/components/datasets/common/document-picker/preview-document-picker.tsx b/web/app/components/datasets/common/document-picker/preview-document-picker.tsx index 6d61cc4c69..0177177665 100644 --- a/web/app/components/datasets/common/document-picker/preview-document-picker.tsx +++ b/web/app/components/datasets/common/document-picker/preview-document-picker.tsx @@ -54,7 +54,7 @@ const PreviewDocumentPicker: FC = ({
- {name || '--'} + {name || '--'}
diff --git a/web/app/components/datasets/common/economical-retrieval-method-config/index.tsx b/web/app/components/datasets/common/economical-retrieval-method-config/index.tsx index 8c46747b63..49f090786e 100644 --- a/web/app/components/datasets/common/economical-retrieval-method-config/index.tsx +++ b/web/app/components/datasets/common/economical-retrieval-method-config/index.tsx @@ -25,7 +25,7 @@ const EconomicalRetrievalMethodConfig: FC = ({ } 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' > = ({ search_method: RETRIEVE_METHOD.semantic, })} effectImg={Effect.src} - activeHeaderClassName='bg-gradient-to-r from-[#F0EEFA] to-[#F9FAFB]' + activeHeaderClassName='dataset-option-card-purple-gradient' > = ({ search_method: RETRIEVE_METHOD.fullText, })} effectImg={Effect.src} - activeHeaderClassName='bg-gradient-to-r from-[#F0EEFA] to-[#F9FAFB]' + activeHeaderClassName='dataset-option-card-purple-gradient' > = ({ reranking_enable: true, })} effectImg={Effect.src} - activeHeaderClassName='bg-gradient-to-r from-[#F0EEFA] to-[#F9FAFB]' + activeHeaderClassName='bg-dataset-option-card-purple-gradient' > } - 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 = ({ - +
))}
@@ -692,7 +692,7 @@ const StepTwo = ({ title={t('datasetCreation.stepTwo.parentChild')} icon={{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 = ({ - + ))} @@ -820,105 +820,82 @@ const StepTwo = ({
{(!hasSetIndexType || (hasSetIndexType && indexingType === IndexingType.QUALIFIED)) && ( -
{ + + {t('datasetCreation.stepTwo.qualified')} + {!hasSetIndexType && {t('datasetCreation.stepTwo.recommend')}} + + {!hasSetIndexType && } + +

} + description={t('datasetCreation.stepTwo.qualifiedTip')} + icon={} + isActive={!hasSetIndexType && indexType === IndexingType.QUALIFIED} + disabled={!isAPIKeySet || hasSetIndexType} + onSwitched={() => { if (isAPIKeySet) setIndexType(IndexingType.QUALIFIED) }} - > -
- Gold Icon -
- {!hasSetIndexType && } -
-
- {t('datasetCreation.stepTwo.qualified')} - {!hasSetIndexType && {t('datasetCreation.stepTwo.recommend')}} -
-
{t('datasetCreation.stepTwo.qualifiedTip')}
-
- {!isAPIKeySet && ( -
- {t('datasetCreation.stepTwo.warning')}  - {t('datasetCreation.stepTwo.click')} -
- )} -
+ /> )} {(!hasSetIndexType || (hasSetIndexType && indexingType === IndexingType.ECONOMICAL)) && ( - - -
- setIsQAConfirmDialogOpen(false)} className='w-[432px]'> -
-

- {t('datasetCreation.stepTwo.qaSwitchHighQualityTipTitle')} -

-

- {t('datasetCreation.stepTwo.qaSwitchHighQualityTipContent')} -

-
-
- - -
- -
- Economical Icon -
- {!hasSetIndexType && } -
-
{t('datasetCreation.stepTwo.economical')}
-
{t('datasetCreation.stepTwo.economicalTip')}
-
+ <> + setIsQAConfirmDialogOpen(false)} className='w-[432px]'> +
+

+ {t('datasetCreation.stepTwo.qaSwitchHighQualityTipTitle')} +

+

+ {t('datasetCreation.stepTwo.qaSwitchHighQualityTipContent')} +

+
+
+ +
- - -
- { - docForm === ChuckingMode.qa - ? t('datasetCreation.stepTwo.notAvailableForQA') - : t('datasetCreation.stepTwo.notAvailableForParentChild') - } -
- - - )} + + + + } + isActive={!hasSetIndexType && indexType === IndexingType.ECONOMICAL} + disabled={!isAPIKeySet || hasSetIndexType || docForm !== ChuckingMode.text} + ref={economyDomRef} + onSwitched={() => { + if (isAPIKeySet) + setIndexType(IndexingType.ECONOMICAL) + }} + /> + + +
+ { + docForm === ChuckingMode.qa + ? t('datasetCreation.stepTwo.notAvailableForQA') + : t('datasetCreation.stepTwo.notAvailableForParentChild') + } +
+ + + )}
{hasSetIndexType && indexType === IndexingType.ECONOMICAL && (
diff --git a/web/app/components/datasets/create/step-two/language-select/index.tsx b/web/app/components/datasets/create/step-two/language-select/index.tsx index 1e0f2db030..016f2a5f20 100644 --- a/web/app/components/datasets/create/step-two/language-select/index.tsx +++ b/web/app/components/datasets/create/step-two/language-select/index.tsx @@ -28,7 +28,7 @@ const LanguageSelect: FC = ({ {languages.filter(language => language.supported).map(({ prompt_name }) => (
onSelect(prompt_name)}>{prompt_name}
))} @@ -40,7 +40,7 @@ const LanguageSelect: FC = ({
} - 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]' /> ) diff --git a/web/app/components/datasets/create/step-two/option-card.tsx b/web/app/components/datasets/create/step-two/option-card.tsx index ba84d335c3..12f4ecd0ca 100644 --- a/web/app/components/datasets/create/step-two/option-card.tsx +++ b/web/app/components/datasets/create/step-two/option-card.tsx @@ -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> = props => ( - + ) @@ -27,12 +26,12 @@ export const OptionCardHeader: FC = (props) => { )}>
{isActive && } -
- {icon || {description}} +
+ {icon}
{title}
@@ -52,10 +51,11 @@ type OptionCardProps = { effectImg?: string onSwitched?: () => void noHighlight?: boolean + disabled?: boolean } & Omit, 'title'> -export const OptionCard: FC = (props) => { - const { icon, className, title, description, isActive, children, actions, activeHeaderClassName, style, effectImg, onSwitched, onClick, noHighlight, ...rest } = props +export const OptionCard: FC = forwardRef((props, ref) => { + const { icon, className, title, description, isActive, children, actions, activeHeaderClassName, style, effectImg, onSwitched, onClick, noHighlight, disabled, ...rest } = props return
= (props) => { onSwitched?.() onClick?.(e) }} - {...rest}> + {...rest} + ref={ref} + > = (props) => { effectImg={effectImg} /> {/** Body */} - {isActive &&
{children} + {isActive && (children || actions) &&
+ {children} {actions &&
{actions} -
} +
+ }
}
-} +}) + +OptionCard.displayName = 'OptionCard' diff --git a/web/app/components/header/account-setting/model-provider-page/model-name/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-name/index.tsx index c5b7e8395c..2107f98a9a 100644 --- a/web/app/components/header/account-setting/model-provider-page/model-name/index.tsx +++ b/web/app/components/header/account-setting/model-provider-page/model-name/index.tsx @@ -39,7 +39,7 @@ const ModelName: FC = ({ return (
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/model-trigger.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/model-trigger.tsx index 023c6a5cd2..556a2ef66f 100644 --- a/web/app/components/header/account-setting/model-provider-page/model-selector/model-trigger.tsx +++ b/web/app/components/header/account-setting/model-provider-page/model-selector/model-trigger.tsx @@ -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 = ({ return (
= ({ }
)} -
) } diff --git a/web/themes/manual-dark.css b/web/themes/manual-dark.css index 269f306efa..9a342897b2 100644 --- a/web/themes/manual-dark.css +++ b/web/themes/manual-dark.css @@ -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%); -} \ No newline at end of file + --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%); +} diff --git a/web/themes/manual-light.css b/web/themes/manual-light.css index 8f3ee5d3ff..2de9edda1e 100644 --- a/web/themes/manual-light.css +++ b/web/themes/manual-light.css @@ -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%); -} \ No newline at end of file + --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%); +}