feat: feature support UI preview (#269)

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<IFeatureItemProps> = ({
   icon,
+  previewImgClassName,
   title,
   description,
   value,
-  onChange
+  onChange,
 }) => {
   return (
-    <div className='flex justify-between p-3 rounded-xl border border-transparent bg-gray-50 hover:border-gray-200  cursor-pointer'>
+    <div className={cn(s.wrap, 'relative flex justify-between p-3 rounded-xl border border-transparent bg-gray-50 hover:border-gray-200  cursor-pointer')}>
       <div className='flex space-x-3 mr-2'>
         {/* icon */}
         <div
@@ -36,6 +41,11 @@ const FeatureItem: FC<IFeatureItemProps> = ({
       </div>
 
       <Switch onChange={onChange} defaultValue={value} />
+      {
+        previewImgClassName && (
+          <div className={cn(s.preview, s[previewImgClassName])}>
+          </div>)
+      }
     </div>
   )
 }

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);
+}

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'
-
+type IConfig = {
-interface 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<IChooseFeatureProps> = ({
   onClose,
   isChatApp,
   config,
-  onChange
+  onChange,
 }) => {
   const { t } = useTranslation()
 
@@ -43,6 +43,7 @@ const ChooseFeature: FC<IChooseFeatureProps> = ({
       className='w-[400px]'
       title={t('appDebug.operation.addFeature')}
       closable
+      overflowVisible
     >
       <div className='pt-5 pb-10'>
         {/* Chat Feature */}
@@ -54,17 +55,19 @@ const ChooseFeature: FC<IChooseFeatureProps> = ({
             <>
               <FeatureItem
                 icon={OpeningStatementIcon}
+                previewImgClassName='openingStatementPreview'
                 title={t('appDebug.feature.conversationOpener.title')}
                 description={t('appDebug.feature.conversationOpener.description')}
                 value={config.openingStatement}
-                onChange={(value) => onChange('openingStatement', value)}
+                onChange={value => onChange('openingStatement', value)}
               />
               <FeatureItem
                 icon={<SuggestedQuestionsAfterAnswerIcon />}
+                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)}
               />
             </>
           </FeatureGroup>
@@ -76,10 +79,11 @@ const ChooseFeature: FC<IChooseFeatureProps> = ({
             <>
               <FeatureItem
                 icon={<MoreLikeThisIcon />}
+                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)}
               />
             </>
           </FeatureGroup>

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 (
     <Transition appear show={isShow} as={Fragment}>
@@ -50,7 +52,7 @@ export default function Modal({
               leaveFrom="opacity-100 scale-100"
               leaveTo="opacity-0 scale-95"
             >
-              <Dialog.Panel className={`w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all ${className}`}>
+              <Dialog.Panel className={`w-full max-w-md transform ${overflowVisible ? 'overflow-visible' : 'overflow-hidden'} rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all ${className}`}>
                 {title && <Dialog.Title
                   as="h3"
                   className="text-lg font-medium leading-6 text-gray-900"