From 554570dc220cf995540365df0bd9ebb9e0d7300a Mon Sep 17 00:00:00 2001 From: Joel Date: Wed, 31 May 2023 14:10:59 +0800 Subject: [PATCH] feat: feature support UI preview (#269) --- .../choose-feature/feature-item/index.tsx | 18 +- .../preview-imgs/more-like-this.svg | 188 ++++++++++++++++++ .../preview-imgs/opening-statement.svg | 144 ++++++++++++++ .../suggested-questions-after-answer.svg | 163 +++++++++++++++ .../feature-item/style.module.css | 25 +++ .../config/feature/choose-feature/index.tsx | 24 ++- web/app/components/base/modal/index.tsx | 4 +- 7 files changed, 551 insertions(+), 15 deletions(-) create mode 100644 web/app/components/app/configuration/config/feature/choose-feature/feature-item/preview-imgs/more-like-this.svg create mode 100644 web/app/components/app/configuration/config/feature/choose-feature/feature-item/preview-imgs/opening-statement.svg create mode 100644 web/app/components/app/configuration/config/feature/choose-feature/feature-item/preview-imgs/suggested-questions-after-answer.svg create mode 100644 web/app/components/app/configuration/config/feature/choose-feature/feature-item/style.module.css diff --git a/web/app/components/app/configuration/config/feature/choose-feature/feature-item/index.tsx b/web/app/components/app/configuration/config/feature/choose-feature/feature-item/index.tsx index cfb3159e1a..0d7ab4e02c 100644 --- a/web/app/components/app/configuration/config/feature/choose-feature/feature-item/index.tsx +++ b/web/app/components/app/configuration/config/feature/choose-feature/feature-item/index.tsx @@ -1,9 +1,13 @@ 'use client' -import React, { FC } from 'react' +import type { FC } from 'react' +import React from 'react' +import cn from 'classnames' +import s from './style.module.css' import Switch from '@/app/components/base/switch' -export interface IFeatureItemProps { +export type IFeatureItemProps = { icon: React.ReactNode + previewImgClassName?: string title: string description: string value: boolean @@ -12,13 +16,14 @@ export interface IFeatureItemProps { const FeatureItem: FC = ({ icon, + previewImgClassName, title, description, value, - onChange + onChange, }) => { return ( -
+
{/* icon */}
= ({
+ { + previewImgClassName && ( +
+
) + }
) } diff --git a/web/app/components/app/configuration/config/feature/choose-feature/feature-item/preview-imgs/more-like-this.svg b/web/app/components/app/configuration/config/feature/choose-feature/feature-item/preview-imgs/more-like-this.svg new file mode 100644 index 0000000000..6ccc84e70f --- /dev/null +++ b/web/app/components/app/configuration/config/feature/choose-feature/feature-item/preview-imgs/more-like-this.svg @@ -0,0 +1,188 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/app/components/app/configuration/config/feature/choose-feature/feature-item/preview-imgs/opening-statement.svg b/web/app/components/app/configuration/config/feature/choose-feature/feature-item/preview-imgs/opening-statement.svg new file mode 100644 index 0000000000..153382c8ff --- /dev/null +++ b/web/app/components/app/configuration/config/feature/choose-feature/feature-item/preview-imgs/opening-statement.svg @@ -0,0 +1,144 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/app/components/app/configuration/config/feature/choose-feature/feature-item/preview-imgs/suggested-questions-after-answer.svg b/web/app/components/app/configuration/config/feature/choose-feature/feature-item/preview-imgs/suggested-questions-after-answer.svg new file mode 100644 index 0000000000..c0102b7e08 --- /dev/null +++ b/web/app/components/app/configuration/config/feature/choose-feature/feature-item/preview-imgs/suggested-questions-after-answer.svg @@ -0,0 +1,163 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/app/components/app/configuration/config/feature/choose-feature/feature-item/style.module.css b/web/app/components/app/configuration/config/feature/choose-feature/feature-item/style.module.css new file mode 100644 index 0000000000..c11fc217c8 --- /dev/null +++ b/web/app/components/app/configuration/config/feature/choose-feature/feature-item/style.module.css @@ -0,0 +1,25 @@ +.preview { + display: none; + position: fixed; + transform: translate(410px, -54px); + width: 280px; + height: 360px; + background: center center no-repeat; + background-size: contain; +} + +.wrap:hover .preview { + display: block; +} + +.openingStatementPreview { + background-image: url(./preview-imgs/opening-statement.svg); +} + +.suggestedQuestionsAfterAnswerPreview { + background-image: url(./preview-imgs/suggested-questions-after-answer.svg); +} + +.moreLikeThisPreview { + background-image: url(./preview-imgs/more-like-this.svg); +} \ No newline at end of file diff --git a/web/app/components/app/configuration/config/feature/choose-feature/index.tsx b/web/app/components/app/configuration/config/feature/choose-feature/index.tsx index 174104663d..ab7badb1a2 100644 --- a/web/app/components/app/configuration/config/feature/choose-feature/index.tsx +++ b/web/app/components/app/configuration/config/feature/choose-feature/index.tsx @@ -1,19 +1,19 @@ 'use client' -import React, { FC } from 'react' +import type { FC } from 'react' +import React from 'react' import { useTranslation } from 'react-i18next' -import Modal from '@/app/components/base/modal' -import FeatureItem from './feature-item' import FeatureGroup from '../feature-group' import MoreLikeThisIcon from '../../../base/icons/more-like-this-icon' +import FeatureItem from './feature-item' +import Modal from '@/app/components/base/modal' import SuggestedQuestionsAfterAnswerIcon from '@/app/components/app/configuration/base/icons/suggested-questions-after-answer-icon' - -interface IConfig { +type IConfig = { openingStatement: boolean moreLikeThis: boolean suggestedQuestionsAfterAnswer: boolean } -export interface IChooseFeatureProps { +export type IChooseFeatureProps = { isShow: boolean onClose: () => void config: IConfig @@ -32,7 +32,7 @@ const ChooseFeature: FC = ({ onClose, isChatApp, config, - onChange + onChange, }) => { const { t } = useTranslation() @@ -43,6 +43,7 @@ const ChooseFeature: FC = ({ className='w-[400px]' title={t('appDebug.operation.addFeature')} closable + overflowVisible >
{/* Chat Feature */} @@ -54,17 +55,19 @@ const ChooseFeature: FC = ({ <> onChange('openingStatement', value)} + onChange={value => onChange('openingStatement', value)} /> } + previewImgClassName='suggestedQuestionsAfterAnswerPreview' title={t('appDebug.feature.suggestedQuestionsAfterAnswer.title')} description={t('appDebug.feature.suggestedQuestionsAfterAnswer.description')} value={config.suggestedQuestionsAfterAnswer} - onChange={(value) => onChange('suggestedQuestionsAfterAnswer', value)} + onChange={value => onChange('suggestedQuestionsAfterAnswer', value)} /> @@ -76,10 +79,11 @@ const ChooseFeature: FC = ({ <> } + previewImgClassName='moreLikeThisPreview' title={t('appDebug.feature.moreLikeThis.title')} description={t('appDebug.feature.moreLikeThis.description')} value={config.moreLikeThis} - onChange={(value) => onChange('moreLikeThis', value)} + onChange={value => onChange('moreLikeThis', value)} /> diff --git a/web/app/components/base/modal/index.tsx b/web/app/components/base/modal/index.tsx index 7c11089769..3eea042ef8 100644 --- a/web/app/components/base/modal/index.tsx +++ b/web/app/components/base/modal/index.tsx @@ -12,6 +12,7 @@ type IModal = { description?: React.ReactNode children: React.ReactNode closable?: boolean + overflowVisible?: boolean } export default function Modal({ @@ -23,6 +24,7 @@ export default function Modal({ description, children, closable = false, + overflowVisible = false, }: IModal) { return ( @@ -50,7 +52,7 @@ export default function Modal({ leaveFrom="opacity-100 scale-100" leaveTo="opacity-0 scale-95" > - + {title &&