merge main

2026-05-05 01:48:04 +08:00 · 2024-10-28 10:51:02 +08:00
parent c777d55a1c aa11141660
commit 765eb282f3
858 changed files with 16206 additions and 17932 deletions
--- a/web/app/components/base/features/feature-choose/feature-group/index.tsx
+++ b/web/app/components/base/features/feature-choose/feature-group/index.tsx
@ -1,31 +0,0 @@
-'use client'
-import type { FC } from 'react'
-import React from 'react'
-import GroupName from '@/app/components/app/configuration/base/group-name'
-
-export type IFeatureGroupProps = {
-  title: string
-  description?: string
-  children: React.ReactNode
-}
-
-const FeatureGroup: FC<IFeatureGroupProps> = ({
-  title,
-  description,
-  children,
-}) => {
-  return (
-    <div className='mb-6'>
-      <div className='mb-2'>
-        <GroupName name={title} />
-        {description && (
-          <div className='text-xs font-normal text-gray-500'>{description}</div>
-        )}
-      </div>
-      <div className='space-y-2'>
-        {children}
-      </div>
-    </div>
-  )
-}
-export default React.memo(FeatureGroup)
--- a/web/app/components/base/features/feature-choose/feature-item/index.tsx
+++ b/web/app/components/base/features/feature-choose/feature-item/index.tsx
@ -1,96 +0,0 @@
-'use client'
-import type { FC } from 'react'
-import React, { useCallback } from 'react'
-import produce from 'immer'
-import s from './style.module.css'
-import cn from '@/utils/classnames'
-import Switch from '@/app/components/base/switch'
-import { FeatureEnum } from '@/app/components/base/features/types'
-import { useFeaturesStore } from '@/app/components/base/features/hooks'
-import { useModalContext } from '@/context/modal-context'
-
-export type IFeatureItemProps = {
-  icon: React.ReactNode
-  previewImgClassName?: string
-  title: string
-  description: string
-  value: boolean
-  onChange: (type: FeatureEnum, value: boolean) => void
-  type: FeatureEnum
-}
-
-const FeatureItem: FC<IFeatureItemProps> = ({
-  icon,
-  previewImgClassName,
-  title,
-  description,
-  value,
-  onChange,
-  type,
-}) => {
-  const featuresStore = useFeaturesStore()
-  const { setShowModerationSettingModal } = useModalContext()
-
-  const handleChange = useCallback((newValue: boolean) => {
-    const {
-      features,
-      setFeatures,
-    } = featuresStore!.getState()
-
-    if (newValue && !features.moderation?.type && type === FeatureEnum.moderation) {
-      setShowModerationSettingModal({
-        payload: {
-          enabled: true,
-          type: 'keywords',
-          config: {
-            keywords: '',
-            inputs_config: {
-              enabled: true,
-              preset_response: '',
-            },
-          },
-        },
-        onSaveCallback: (newModeration) => {
-          setFeatures(produce(features, (draft) => {
-            draft.moderation = newModeration
-          }))
-        },
-        onCancelCallback: () => {
-          setFeatures(produce(features, (draft) => {
-            draft.moderation = { enabled: false }
-          }))
-        },
-      })
-      return
-    }
-    onChange(type, newValue)
-  }, [type, onChange, featuresStore, setShowModerationSettingModal])
-
-  return (
-    <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
-          className='shrink-0 flex items-center justify-center w-8 h-8 rounded-lg border border-gray-200 bg-white'
-          style={{
-            boxShadow: '0px 1px 2px rgba(16, 24, 40, 0.05)',
-          }}
-        >
-          {icon}
-        </div>
-        <div>
-          <div className='text-sm font-semibold text-gray-800'>{title}</div>
-          <div className='text-xs font-normal text-gray-500'>{description}</div>
-        </div>
-      </div>
-
-      <Switch onChange={handleChange} defaultValue={value} />
-      {
-        previewImgClassName && (
-          <div className={cn(s.preview, s[previewImgClassName])}>
-          </div>)
-      }
-    </div>
-  )
-}
-export default React.memo(FeatureItem)
--- a/web/app/components/base/features/feature-choose/feature-item/preview-imgs/citation.svg
+++ b/web/app/components/base/features/feature-choose/feature-item/preview-imgs/citation.svg
--- a/web/app/components/base/features/feature-choose/feature-item/preview-imgs/citations-and-attributions-preview@2x.png
+++ b/web/app/components/base/features/feature-choose/feature-item/preview-imgs/citations-and-attributions-preview@2x.png
--- a/web/app/components/base/features/feature-choose/feature-item/preview-imgs/conversation-opener-preview@2x.png
+++ b/web/app/components/base/features/feature-choose/feature-item/preview-imgs/conversation-opener-preview@2x.png
--- a/web/app/components/base/features/feature-choose/feature-item/preview-imgs/more-like-this-preview@2x.png
+++ b/web/app/components/base/features/feature-choose/feature-item/preview-imgs/more-like-this-preview@2x.png
--- a/web/app/components/base/features/feature-choose/feature-item/preview-imgs/more-like-this.svg
+++ b/web/app/components/base/features/feature-choose/feature-item/preview-imgs/more-like-this.svg
--- a/web/app/components/base/features/feature-choose/feature-item/preview-imgs/next-question-suggestion-preview@2x.png
+++ b/web/app/components/base/features/feature-choose/feature-item/preview-imgs/next-question-suggestion-preview@2x.png
--- a/web/app/components/base/features/feature-choose/feature-item/preview-imgs/opening-statement.png
+++ b/web/app/components/base/features/feature-choose/feature-item/preview-imgs/opening-statement.png
--- a/web/app/components/base/features/feature-choose/feature-item/preview-imgs/opening-suggestion-preview@2x.png
+++ b/web/app/components/base/features/feature-choose/feature-item/preview-imgs/opening-suggestion-preview@2x.png
--- a/web/app/components/base/features/feature-choose/feature-item/preview-imgs/speech-to-text-preview@2x.png
+++ b/web/app/components/base/features/feature-choose/feature-item/preview-imgs/speech-to-text-preview@2x.png
--- a/web/app/components/base/features/feature-choose/feature-item/preview-imgs/speech-to-text.svg
+++ b/web/app/components/base/features/feature-choose/feature-item/preview-imgs/speech-to-text.svg
--- a/web/app/components/base/features/feature-choose/feature-item/preview-imgs/suggested-questions-after-answer.svg
+++ b/web/app/components/base/features/feature-choose/feature-item/preview-imgs/suggested-questions-after-answer.svg
--- a/web/app/components/base/features/feature-choose/feature-item/preview-imgs/text-to-audio-preview-assistant@2x.png
+++ b/web/app/components/base/features/feature-choose/feature-item/preview-imgs/text-to-audio-preview-assistant@2x.png
--- a/web/app/components/base/features/feature-choose/feature-item/preview-imgs/text-to-audio-preview-completion@2x.png
+++ b/web/app/components/base/features/feature-choose/feature-item/preview-imgs/text-to-audio-preview-completion@2x.png
--- a/web/app/components/base/features/feature-choose/feature-item/style.module.css
+++ b/web/app/components/base/features/feature-choose/feature-item/style.module.css
@ -1,41 +0,0 @@
-.preview {
-  display: none;
-  position: absolute;
-  top: 0;
-  left: 100%;
-  transform: translate(32px, -54px);
-  width: 280px;
-  height: 360px;
-  background: center center no-repeat;
-  background-size: contain;
-  border-radius: 8px;
-}
-
-.wrap:hover .preview {
-  display: block;
-}
-
-.openingStatementPreview {
-  background-image: url(~@/app/components/app/configuration/config/feature/choose-feature/feature-item/preview-imgs/opening-statement.png);
-}
-
-.suggestedQuestionsAfterAnswerPreview {
-  background-image: url(~@/app/components/app/configuration/config/feature/choose-feature/feature-item/preview-imgs/suggested-questions-after-answer.png);
-}
-
-.moreLikeThisPreview {
-  background-image: url(~@/app/components/app/configuration/config/feature/choose-feature/feature-item/preview-imgs/more-like-this.png);
-}
-
-.speechToTextPreview {
-  background-image: url(~@/app/components/app/configuration/config/feature/choose-feature/feature-item/preview-imgs/speech-to-text.png);
-}
-
-.textToSpeechPreview {
-  @apply shadow-lg rounded-lg;
-  background-image: url(~@/app/components/app/configuration/config/feature/choose-feature/feature-item/preview-imgs/text-to-audio-preview-assistant@2x.png);
-}
-
-.citationPreview {
-  background-image: url(~@/app/components/app/configuration/config/feature/choose-feature/feature-item/preview-imgs/citation.png);
-}
--- a/web/app/components/base/features/feature-choose/feature-modal.tsx
+++ b/web/app/components/base/features/feature-choose/feature-modal.tsx
@ -1,147 +0,0 @@
-'use client'
-import type { FC } from 'react'
-import React, { useCallback } from 'react'
-import produce from 'immer'
-import { useTranslation } from 'react-i18next'
-import {
-  useFeatures,
-  useFeaturesStore,
-} from '../hooks'
-import type { OnFeaturesChange } from '../types'
-import FeatureGroup from './feature-group'
-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'
-import { Microphone01, Speaker } from '@/app/components/base/icons/src/vender/solid/mediaAndDevices'
-import { Citations } from '@/app/components/base/icons/src/vender/solid/editor'
-import { FileSearch02 } from '@/app/components/base/icons/src/vender/solid/files'
-import { MessageHeartCircle } from '@/app/components/base/icons/src/vender/solid/communication'
-import { FeatureEnum } from '@/app/components/base/features/types'
-import { useDefaultModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
-import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
-
-export type FeatureModalProps = {
-  onChange?: OnFeaturesChange
-}
-
-const FeatureModal: FC<FeatureModalProps> = ({
-  onChange,
-}) => {
-  const { t } = useTranslation()
-  const { data: speech2textDefaultModel } = useDefaultModel(ModelTypeEnum.speech2text)
-  const { data: text2speechDefaultModel } = useDefaultModel(ModelTypeEnum.tts)
-  const featuresStore = useFeaturesStore()
-  const setShowFeaturesModal = useFeatures(s => s.setShowFeaturesModal)
-  const features = useFeatures(s => s.features)
-
-  const handleCancelModal = useCallback(() => {
-    setShowFeaturesModal(false)
-  }, [setShowFeaturesModal])
-
-  const handleChange = useCallback((type: FeatureEnum, enabled: boolean) => {
-    const {
-      features,
-      setFeatures,
-    } = featuresStore!.getState()
-
-    const newFeatures = produce(features, (draft) => {
-      draft[type] = {
-        ...draft[type],
-        enabled,
-      }
-    })
-    setFeatures(newFeatures)
-    if (onChange)
-      onChange(newFeatures)
-  }, [featuresStore, onChange])
-
-  return (
-    <Modal
-      isShow
-      onClose={handleCancelModal}
-      className='w-[400px]'
-      title={t('appDebug.operation.addFeature')}
-      closable
-      overflowVisible
-    >
-      <div className='pt-5 pb-10'>
-        {/* Chat Feature */}
-        <FeatureGroup
-          title={t('appDebug.feature.groupChat.title')}
-          description={t('appDebug.feature.groupChat.description') as string}
-        >
-          <>
-            <FeatureItem
-              icon={<MessageHeartCircle className='w-4 h-4 text-[#DD2590]' />}
-              previewImgClassName='openingStatementPreview'
-              title={t('appDebug.feature.conversationOpener.title')}
-              description={t('appDebug.feature.conversationOpener.description')}
-              value={!!features.opening?.enabled}
-              onChange={handleChange}
-              type={FeatureEnum.opening}
-            />
-            <FeatureItem
-              icon={<SuggestedQuestionsAfterAnswerIcon />}
-              previewImgClassName='suggestedQuestionsAfterAnswerPreview'
-              title={t('appDebug.feature.suggestedQuestionsAfterAnswer.title')}
-              description={t('appDebug.feature.suggestedQuestionsAfterAnswer.description')}
-              value={!!features.suggested?.enabled}
-              onChange={handleChange}
-              type={FeatureEnum.suggested}
-            />
-            {
-              !!text2speechDefaultModel && (
-                <FeatureItem
-                  icon={<Speaker className='w-4 h-4 text-[#7839EE]' />}
-                  previewImgClassName='textToSpeechPreview'
-                  title={t('appDebug.feature.textToSpeech.title')}
-                  description={t('appDebug.feature.textToSpeech.description')}
-                  value={!!features.text2speech?.enabled}
-                  onChange={handleChange}
-                  type={FeatureEnum.text2speech}
-                />
-              )
-            }
-            {
-              !!speech2textDefaultModel && (
-                <FeatureItem
-                  icon={<Microphone01 className='w-4 h-4 text-[#7839EE]' />}
-                  previewImgClassName='speechToTextPreview'
-                  title={t('appDebug.feature.speechToText.title')}
-                  description={t('appDebug.feature.speechToText.description')}
-                  value={!!features.speech2text?.enabled}
-                  onChange={handleChange}
-                  type={FeatureEnum.speech2text}
-                />
-              )
-            }
-            <FeatureItem
-              icon={<Citations className='w-4 h-4 text-[#FD853A]' />}
-              previewImgClassName='citationPreview'
-              title={t('appDebug.feature.citation.title')}
-              description={t('appDebug.feature.citation.description')}
-              value={!!features.citation?.enabled}
-              onChange={handleChange}
-              type={FeatureEnum.citation}
-            />
-          </>
-        </FeatureGroup>
-
-        <FeatureGroup title={t('appDebug.feature.toolbox.title')}>
-          <>
-            <FeatureItem
-              icon={<FileSearch02 className='w-4 h-4 text-[#039855]' />}
-              previewImgClassName=''
-              title={t('appDebug.feature.moderation.title')}
-              description={t('appDebug.feature.moderation.description')}
-              value={!!features.moderation?.enabled}
-              onChange={handleChange}
-              type={FeatureEnum.moderation}
-            />
-          </>
-        </FeatureGroup>
-      </div>
-    </Modal>
-  )
-}
-export default React.memo(FeatureModal)
--- a/web/app/components/base/features/feature-choose/index.tsx
+++ b/web/app/components/base/features/feature-choose/index.tsx
@ -1,42 +0,0 @@
-'use client'
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-import {
-  RiAddLine,
-} from '@remixicon/react'
-import { useFeatures } from '../hooks'
-import type { OnFeaturesChange } from '../types'
-import FeatureModal from './feature-modal'
-import Button from '@/app/components/base/button'
-
-type ChooseFeatureProps = {
-  onChange?: OnFeaturesChange
-  disabled?: boolean
-}
-const ChooseFeature = ({
-  onChange,
-  disabled,
-}: ChooseFeatureProps) => {
-  const { t } = useTranslation()
-  const showFeaturesModal = useFeatures(s => s.showFeaturesModal)
-  const setShowFeaturesModal = useFeatures(s => s.setShowFeaturesModal)
-  return (
-    <>
-      <Button
-        className={`
-          border-primary-100 bg-primary-25 text-xs font-semibold text-primary-600
-        `}
-        onClick={() => !disabled && setShowFeaturesModal(true)}
-      >
-        <RiAddLine className='mr-1 w-4 h-4' />
-        {t('appDebug.operation.addFeature')}
-      </Button>
-      {
-        showFeaturesModal && (
-          <FeatureModal onChange={onChange} />
-        )
-      }
-    </>
-  )
-}
-export default React.memo(ChooseFeature)
--- a/web/app/components/base/features/feature-panel/citation/index.tsx
+++ b/web/app/components/base/features/feature-panel/citation/index.tsx
@ -1,25 +0,0 @@
-'use client'
-import React, { type FC } from 'react'
-import { useTranslation } from 'react-i18next'
-import Panel from '@/app/components/app/configuration/base/feature-panel'
-import { Citations } from '@/app/components/base/icons/src/vender/solid/editor'
-
-const Citation: FC = () => {
-  const { t } = useTranslation()
-
-  return (
-    <Panel
-      title={
-        <div className='flex items-center gap-2'>
-          <div>{t('appDebug.feature.citation.title')}</div>
-        </div>
-      }
-      headerIcon={<Citations className='w-4 h-4 text-[#FD853A]' />}
-      headerRight={
-        <div className='text-xs text-gray-500'>{t('appDebug.feature.citation.resDes')}</div>
-      }
-      noBodySpacing
-    />
-  )
-}
-export default React.memo(Citation)
--- a/web/app/components/base/features/feature-panel/file-upload/index.tsx
+++ b/web/app/components/base/features/feature-panel/file-upload/index.tsx
@ -1,63 +0,0 @@
-'use client'
-import produce from 'immer'
-import React, { useCallback } from 'react'
-import { useTranslation } from 'react-i18next'
-import type { OnFeaturesChange } from '../../types'
-import {
-  useFeatures,
-  useFeaturesStore,
-} from '../../hooks'
-import ParamConfig from './param-config'
-import Switch from '@/app/components/base/switch'
-import { File05 } from '@/app/components/base/icons/src/vender/solid/files'
-
-type FileUploadProps = {
-  onChange?: OnFeaturesChange
-  disabled?: boolean
-}
-const FileUpload = ({
-  onChange,
-  disabled,
-}: FileUploadProps) => {
-  const { t } = useTranslation()
-  const featuresStore = useFeaturesStore()
-  const file = useFeatures(s => s.features.file)
-
-  const handleSwitch = useCallback((value: boolean) => {
-    const {
-      features,
-      setFeatures,
-    } = featuresStore!.getState()
-    const newFeatures = produce(features, (draft) => {
-      if (draft.file?.image)
-        draft.file.image.enabled = value
-    })
-    setFeatures(newFeatures)
-
-    if (onChange)
-      onChange(newFeatures)
-  }, [featuresStore, onChange])
-
-  return (
-    <div className='flex items-center px-3 h-12 bg-gray-50 rounded-xl overflow-hidden'>
-      <div className='shrink-0 flex items-center justify-center mr-1 w-6 h-6'>
-        <File05 className='shrink-0 w-4 h-4 text-[#6938EF]' />
-      </div>
-      <div className='shrink-0 mr-2 whitespace-nowrap text-sm text-gray-800 font-semibold'>
-        {t('common.imageUploader.imageUpload')}
-      </div>
-      <div className='grow' />
-      <div className='flex items-center'>
-        <ParamConfig onChange={onChange} disabled={disabled} />
-        <div className='ml-4 mr-3 w-[1px] h-3.5 bg-gray-200'></div>
-        <Switch
-          defaultValue={file?.image?.enabled}
-          onChange={handleSwitch}
-          disabled={disabled}
-          size='md'
-        />
-      </div>
-    </div>
-  )
-}
-export default React.memo(FileUpload)
--- a/web/app/components/base/features/feature-panel/file-upload/param-config-content.tsx
+++ b/web/app/components/base/features/feature-panel/file-upload/param-config-content.tsx
@ -1,119 +0,0 @@
-'use client'
-
-import produce from 'immer'
-import React, { useCallback, useMemo } from 'react'
-import { useTranslation } from 'react-i18next'
-import type { OnFeaturesChange } from '../../types'
-import {
-  useFeatures,
-  useFeaturesStore,
-} from '../../hooks'
-import RadioGroup from './radio-group'
-import { TransferMethod } from '@/types/app'
-import ParamItem from '@/app/components/base/param-item'
-
-const MIN = 1
-const MAX = 6
-type ParamConfigContentProps = {
-  onChange?: OnFeaturesChange
-}
-const ParamConfigContent = ({
-  onChange,
-}: ParamConfigContentProps) => {
-  const { t } = useTranslation()
-  const featuresStore = useFeaturesStore()
-  const file = useFeatures(s => s.features.file)
-
-  const transferMethod = useMemo(() => {
-    if (!file?.image?.transfer_methods || file?.image.transfer_methods.length === 2)
-      return TransferMethod.all
-
-    return file.image.transfer_methods[0]
-  }, [file?.image?.transfer_methods])
-
-  const handleTransferMethodsChange = useCallback((value: TransferMethod) => {
-    const {
-      features,
-      setFeatures,
-    } = featuresStore!.getState()
-    const newFeatures = produce(features, (draft) => {
-      if (draft.file?.image) {
-        if (value === TransferMethod.all)
-          draft.file.image.transfer_methods = [TransferMethod.remote_url, TransferMethod.local_file]
-        else
-          draft.file.image.transfer_methods = [value]
-      }
-    })
-    setFeatures(newFeatures)
-    if (onChange)
-      onChange(newFeatures)
-  }, [featuresStore, onChange])
-
-  const handleLimitsChange = useCallback((_key: string, value: number) => {
-    if (!value)
-      return
-
-    const {
-      features,
-      setFeatures,
-    } = featuresStore!.getState()
-    const newFeatures = produce(features, (draft) => {
-      if (draft.file?.image)
-        draft.file.image.number_limits = value
-    })
-    setFeatures(newFeatures)
-    if (onChange)
-      onChange(newFeatures)
-  }, [featuresStore, onChange])
-
-  return (
-    <div>
-      <div>
-        <div className='leading-6 text-base font-semibold text-gray-800'>{t('common.operation.settings')}</div>
-        <div className='pt-3 space-y-6'>
-          <div>
-            <div className='mb-2 leading-[18px] text-[13px] font-semibold text-gray-800'>{t('appDebug.vision.visionSettings.uploadMethod')}</div>
-            <RadioGroup
-              className='space-x-3'
-              options={[
-                {
-                  label: t('appDebug.vision.visionSettings.both'),
-                  value: TransferMethod.all,
-                },
-                {
-                  label: t('appDebug.vision.visionSettings.localUpload'),
-                  value: TransferMethod.local_file,
-                },
-                {
-                  label: t('appDebug.vision.visionSettings.url'),
-                  value: TransferMethod.remote_url,
-                },
-              ]}
-              value={transferMethod}
-              onChange={handleTransferMethodsChange}
-            />
-          </div>
-          <div>
-            <ParamItem
-              id='upload_limit'
-              className=''
-              name={t('appDebug.vision.visionSettings.uploadLimit')}
-              noTooltip
-              {...{
-                default: 2,
-                step: 1,
-                min: MIN,
-                max: MAX,
-              }}
-              value={file?.image?.number_limits || 3}
-              enable={true}
-              onChange={handleLimitsChange}
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default React.memo(ParamConfigContent)
--- a/web/app/components/base/features/feature-panel/file-upload/param-config.tsx
+++ b/web/app/components/base/features/feature-panel/file-upload/param-config.tsx
@ -1,49 +0,0 @@
-'use client'
-
-import { memo, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import type { OnFeaturesChange } from '../../types'
-import ParamConfigContent from './param-config-content'
-import cn from '@/utils/classnames'
-import { Settings01 } from '@/app/components/base/icons/src/vender/line/general'
-import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
-
-type ParamsConfigProps = {
-  onChange?: OnFeaturesChange
-  disabled?: boolean
-}
-const ParamsConfig = ({
-  onChange,
-  disabled,
-}: ParamsConfigProps) => {
-  const { t } = useTranslation()
-  const [open, setOpen] = useState(false)
-
-  return (
-    <PortalToFollowElem
-      open={open}
-      onOpenChange={setOpen}
-      placement='bottom-end'
-      offset={{
-        mainAxis: 4,
-      }}
-    >
-      <PortalToFollowElemTrigger onClick={() => !disabled && setOpen(v => !v)}>
-        <div className={cn('flex items-center rounded-md h-7 px-3 space-x-1 text-gray-700 cursor-pointer hover:bg-gray-200', open && 'bg-gray-200', disabled && 'cursor-not-allowed opacity-50')}>
-          <Settings01 className='w-3.5 h-3.5 ' />
-          <div className='ml-1 leading-[18px] text-xs font-medium '>{t('appDebug.voice.settings')}</div>
-        </div>
-      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent style={{ zIndex: 50 }}>
-        <div className='w-80 sm:w-[412px] p-4 bg-white rounded-lg border-[0.5px] border-gray-200 shadow-lg space-y-3'>
-          <ParamConfigContent onChange={onChange} />
-        </div>
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
-  )
-}
-export default memo(ParamsConfig)
--- a/web/app/components/base/features/feature-panel/file-upload/radio-group/index.tsx
+++ b/web/app/components/base/features/feature-panel/file-upload/radio-group/index.tsx
@ -1,40 +0,0 @@
-'use client'
-import type { FC } from 'react'
-import React from 'react'
-import s from './style.module.css'
-import cn from '@/utils/classnames'
-
-type OPTION = {
-  label: string
-  value: any
-}
-
-type Props = {
-  className?: string
-  options: OPTION[]
-  value: any
-  onChange: (value: any) => void
-}
-
-const RadioGroup: FC<Props> = ({
-  className = '',
-  options,
-  value,
-  onChange,
-}) => {
-  return (
-    <div className={cn(className, 'flex')}>
-      {options.map(item => (
-        <div
-          key={item.value}
-          className={cn(s.item, item.value === value && s.checked)}
-          onClick={() => onChange(item.value)}
-        >
-          <div className={s.radio}></div>
-          <div className='text-[13px] font-medium text-gray-900'>{item.label}</div>
-        </div>
-      ))}
-    </div>
-  )
-}
-export default React.memo(RadioGroup)
--- a/web/app/components/base/features/feature-panel/file-upload/radio-group/style.module.css
+++ b/web/app/components/base/features/feature-panel/file-upload/radio-group/style.module.css
@ -1,24 +0,0 @@
-.item {
-  @apply grow flex items-center h-8 px-2.5 rounded-lg bg-gray-25 border border-gray-100 cursor-pointer space-x-2;
-}
-
-.item:hover {
-  background-color: #ffffff;
-  border-color: #B2CCFF;
-  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
-}
-
-.item.checked {
-  background-color: #ffffff;
-  border-color: #528BFF;
-  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.06), 0px 1px 3px 0px rgba(16, 24, 40, 0.10);
-}
-
-.radio {
-  @apply w-4 h-4 border-[2px] border-gray-200 rounded-full;
-}
-
-.item.checked .radio {
-  border-width: 5px;
-  border-color: #155eef;
-}
--- a/web/app/components/base/features/feature-panel/index.tsx
+++ b/web/app/components/base/features/feature-panel/index.tsx
@ -1,119 +0,0 @@
-import {
-  memo,
-  useMemo,
-} from 'react'
-import { useTranslation } from 'react-i18next'
-import type { OnFeaturesChange } from '../types'
-import { useFeatures } from '../hooks'
-import FileUpload from './file-upload'
-import OpeningStatement from './opening-statement'
-import type { OpeningStatementProps } from './opening-statement'
-import SuggestedQuestionsAfterAnswer from './suggested-questions-after-answer'
-import TextToSpeech from './text-to-speech'
-import SpeechToText from './speech-to-text'
-import Citation from './citation'
-import Moderation from './moderation'
-import type { InputVar } from '@/app/components/workflow/types'
-
-export type FeaturePanelProps = {
-  onChange?: OnFeaturesChange
-  openingStatementProps: OpeningStatementProps
-  disabled?: boolean
-  workflowVariables: InputVar[]
-}
-const FeaturePanel = ({
-  onChange,
-  openingStatementProps,
-  disabled,
-  workflowVariables,
-}: FeaturePanelProps) => {
-  const { t } = useTranslation()
-  const features = useFeatures(s => s.features)
-
-  const showAdvanceFeature = useMemo(() => {
-    return features.opening?.enabled || features.suggested?.enabled || features.speech2text?.enabled || features.text2speech?.enabled || features.citation?.enabled
-  }, [features])
-
-  const showToolFeature = useMemo(() => {
-    return features.moderation?.enabled
-  }, [features])
-
-  return (
-    <div className='space-y-3'>
-      <FileUpload
-        onChange={onChange}
-        disabled={disabled}
-      />
-      {
-        showAdvanceFeature && (
-          <div>
-            <div className='flex items-center'>
-              <div className='shrink-0 text-xs font-semibold text-gray-500'>
-                {t('appDebug.feature.groupChat.title')}
-              </div>
-              <div
-                className='grow ml-3 h-[1px]'
-                style={{ background: 'linear-gradient(270deg, rgba(243, 244, 246, 0) 0%, #F3F4F6 100%)' }}
-              ></div>
-            </div>
-            <div className='py-2 space-y-2'>
-              {
-                features.opening?.enabled && (
-                  <OpeningStatement
-                    {...openingStatementProps}
-                    onChange={onChange}
-                    readonly={disabled}
-                    workflowVariables={workflowVariables}
-                  />
-                )
-              }
-              {
-                features.suggested?.enabled && (
-                  <SuggestedQuestionsAfterAnswer />
-                )
-              }
-              {
-                features.text2speech?.enabled && (
-                  <TextToSpeech onChange={onChange} disabled={disabled} />
-                )
-              }
-              {
-                features.speech2text?.enabled && (
-                  <SpeechToText />
-                )
-              }
-              {
-                features.citation?.enabled && (
-                  <Citation />
-                )
-              }
-            </div>
-          </div>
-        )
-      }
-      {
-        showToolFeature && (
-          <div>
-            <div className='flex items-center'>
-              <div className='shrink-0 text-xs font-semibold text-gray-500'>
-                {t('appDebug.feature.groupChat.title')}
-              </div>
-              <div
-                className='grow ml-3 h-[1px]'
-                style={{ background: 'linear-gradient(270deg, rgba(243, 244, 246, 0) 0%, #F3F4F6 100%)' }}
-              ></div>
-            </div>
-            <div className='py-2 space-y-2'>
-              {
-                features.moderation?.enabled && (
-                  <Moderation onChange={onChange} disabled={disabled} />
-                )
-              }
-            </div>
-          </div>
-        )
-      }
-    </div>
-  )
-}
-export default memo(FeaturePanel)
--- a/web/app/components/base/features/feature-panel/moderation/form-generation.tsx
+++ b/web/app/components/base/features/feature-panel/moderation/form-generation.tsx
@ -1,80 +0,0 @@
-import type { FC } from 'react'
-import { memo } from 'react'
-import { useContext } from 'use-context-selector'
-import type { CodeBasedExtensionForm } from '@/models/common'
-import I18n from '@/context/i18n'
-import { PortalSelect } from '@/app/components/base/select'
-import type { ModerationConfig } from '@/models/debug'
-
-type FormGenerationProps = {
-  forms: CodeBasedExtensionForm[]
-  value: ModerationConfig['config']
-  onChange: (v: Record<string, string>) => void
-}
-const FormGeneration: FC<FormGenerationProps> = ({
-  forms,
-  value,
-  onChange,
-}) => {
-  const { locale } = useContext(I18n)
-
-  const handleFormChange = (type: string, v: string) => {
-    onChange({ ...value, [type]: v })
-  }
-
-  return (
-    <>
-      {
-        forms.map((form, index) => (
-          <div
-            key={index}
-            className='py-2'
-          >
-            <div className='flex items-center h-9 text-sm font-medium text-gray-900'>
-              {locale === 'zh-Hans' ? form.label['zh-Hans'] : form.label['en-US']}
-            </div>
-            {
-              form.type === 'text-input' && (
-                <input
-                  value={value?.[form.variable] || ''}
-                  className='block px-3 w-full h-9 bg-gray-100 rounded-lg text-sm text-gray-900 outline-none appearance-none'
-                  placeholder={form.placeholder}
-                  onChange={e => handleFormChange(form.variable, e.target.value)}
-                />
-              )
-            }
-            {
-              form.type === 'paragraph' && (
-                <div className='relative px-3 py-2 h-[88px] bg-gray-100 rounded-lg'>
-                  <textarea
-                    value={value?.[form.variable] || ''}
-                    className='block w-full h-full bg-transparent text-sm outline-none appearance-none resize-none'
-                    placeholder={form.placeholder}
-                    onChange={e => handleFormChange(form.variable, e.target.value)}
-                  />
-                </div>
-              )
-            }
-            {
-              form.type === 'select' && (
-                <PortalSelect
-                  value={value?.[form.variable]}
-                  items={form.options.map((option) => {
-                    return {
-                      name: option.label[locale === 'zh-Hans' ? 'zh-Hans' : 'en-US'],
-                      value: option.value,
-                    }
-                  })}
-                  onSelect={item => handleFormChange(form.variable, item.value as string)}
-                  popupClassName='w-[576px] !z-[102]'
-                />
-              )
-            }
-          </div>
-        ))
-      }
-    </>
-  )
-}
-
-export default memo(FormGeneration)
--- a/web/app/components/base/features/feature-panel/moderation/index.tsx
+++ b/web/app/components/base/features/feature-panel/moderation/index.tsx
@ -1,108 +0,0 @@
-import { memo } from 'react'
-import { useTranslation } from 'react-i18next'
-import useSWR from 'swr'
-import produce from 'immer'
-import { useContext } from 'use-context-selector'
-import {
-  useFeatures,
-  useFeaturesStore,
-} from '../../hooks'
-import type { OnFeaturesChange } from '../../types'
-import { FileSearch02 } from '@/app/components/base/icons/src/vender/solid/files'
-import { Settings01 } from '@/app/components/base/icons/src/vender/line/general'
-import { useModalContext } from '@/context/modal-context'
-import { fetchCodeBasedExtensionList } from '@/service/common'
-import I18n from '@/context/i18n'
-
-type ModerationProps = {
-  onChange?: OnFeaturesChange
-  disabled?: boolean
-}
-const Moderation = ({
-  onChange,
-  disabled,
-}: ModerationProps) => {
-  const { t } = useTranslation()
-  const { setShowModerationSettingModal } = useModalContext()
-  const { locale } = useContext(I18n)
-  const featuresStore = useFeaturesStore()
-  const moderation = useFeatures(s => s.features.moderation)
-
-  const { data: codeBasedExtensionList } = useSWR(
-    '/code-based-extension?module=moderation',
-    fetchCodeBasedExtensionList,
-  )
-
-  const handleOpenModerationSettingModal = () => {
-    if (disabled)
-      return
-
-    const {
-      features,
-      setFeatures,
-    } = featuresStore!.getState()
-    setShowModerationSettingModal({
-      payload: moderation as any,
-      onSaveCallback: (newModeration) => {
-        const newFeatures = produce(features, (draft) => {
-          draft.moderation = newModeration
-        })
-        setFeatures(newFeatures)
-        if (onChange)
-          onChange(newFeatures)
-      },
-    })
-  }
-
-  const renderInfo = () => {
-    let prefix = ''
-    let suffix = ''
-    if (moderation?.type === 'openai_moderation')
-      prefix = t('appDebug.feature.moderation.modal.provider.openai')
-    else if (moderation?.type === 'keywords')
-      prefix = t('appDebug.feature.moderation.modal.provider.keywords')
-    else if (moderation?.type === 'api')
-      prefix = t('common.apiBasedExtension.selector.title')
-    else
-      prefix = codeBasedExtensionList?.data.find(item => item.name === moderation?.type)?.label[locale] || ''
-
-    if (moderation?.config?.inputs_config?.enabled && moderation.config?.outputs_config?.enabled)
-      suffix = t('appDebug.feature.moderation.allEnabled')
-    else if (moderation?.config?.inputs_config?.enabled)
-      suffix = t('appDebug.feature.moderation.inputEnabled')
-    else if (moderation?.config?.outputs_config?.enabled)
-      suffix = t('appDebug.feature.moderation.outputEnabled')
-
-    return `${prefix} · ${suffix}`
-  }
-
-  return (
-    <div className='flex items-center px-3 h-12 bg-gray-50 rounded-xl overflow-hidden'>
-      <div className='shrink-0 flex items-center justify-center mr-1 w-6 h-6'>
-        <FileSearch02 className='shrink-0 w-4 h-4 text-[#039855]' />
-      </div>
-      <div className='shrink-0 mr-2 whitespace-nowrap text-sm text-gray-800 font-semibold'>
-        {t('appDebug.feature.moderation.title')}
-      </div>
-      <div
-        className='grow block w-0 text-right text-xs text-gray-500 truncate'
-        title={renderInfo()}>
-        {renderInfo()}
-      </div>
-      <div className='shrink-0 ml-4 mr-1 w-[1px] h-3.5 bg-gray-200'></div>
-      <div
-        className={`
-          shrink-0 flex items-center px-3 h-7 cursor-pointer rounded-md
-          text-xs text-gray-700 font-medium hover:bg-gray-200
-          ${disabled && '!cursor-not-allowed'}
-        `}
-        onClick={handleOpenModerationSettingModal}
-      >
-        <Settings01 className='mr-[5px] w-3.5 h-3.5' />
-        {t('common.operation.settings')}
-      </div>
-    </div>
-  )
-}
-
-export default memo(Moderation)
--- a/web/app/components/base/features/feature-panel/moderation/moderation-content.tsx
+++ b/web/app/components/base/features/feature-panel/moderation/moderation-content.tsx
@ -1,73 +0,0 @@
-import type { FC } from 'react'
-import { memo } from 'react'
-import { useTranslation } from 'react-i18next'
-import Switch from '@/app/components/base/switch'
-import type { ModerationContentConfig } from '@/models/debug'
-
-type ModerationContentProps = {
-  title: string
-  info?: string
-  showPreset?: boolean
-  config: ModerationContentConfig
-  onConfigChange: (config: ModerationContentConfig) => void
-}
-const ModerationContent: FC<ModerationContentProps> = ({
-  title,
-  info,
-  showPreset = true,
-  config,
-  onConfigChange,
-}) => {
-  const { t } = useTranslation()
-
-  const handleConfigChange = (field: string, value: boolean | string) => {
-    if (field === 'preset_response' && typeof value === 'string')
-      value = value.slice(0, 100)
-    onConfigChange({ ...config, [field]: value })
-  }
-
-  return (
-    <div className='py-2'>
-      <div className='rounded-lg bg-gray-50 border border-gray-200'>
-        <div className='flex items-center justify-between px-3 h-10 rounded-lg'>
-          <div className='shrink-0 text-sm font-medium text-gray-900'>{title}</div>
-          <div className='grow flex items-center justify-end'>
-            {
-              info && (
-                <div className='mr-2 text-xs text-gray-500 truncate' title={info}>{info}</div>
-              )
-            }
-            <Switch
-              size='l'
-              defaultValue={config.enabled}
-              onChange={v => handleConfigChange('enabled', v)}
-            />
-          </div>
-        </div>
-        {
-          config.enabled && showPreset && (
-            <div className='px-3 pt-1 pb-3 bg-white rounded-lg'>
-              <div className='flex items-center justify-between h-8 text-[13px] font-medium text-gray-700'>
-                {t('appDebug.feature.moderation.modal.content.preset')}
-                <span className='text-xs font-normal text-gray-500'>{t('appDebug.feature.moderation.modal.content.supportMarkdown')}</span>
-              </div>
-              <div className='relative px-3 py-2 h-20 rounded-lg bg-gray-100'>
-                <textarea
-                  value={config.preset_response || ''}
-                  className='block w-full h-full bg-transparent text-sm outline-none appearance-none resize-none'
-                  placeholder={t('appDebug.feature.moderation.modal.content.placeholder') || ''}
-                  onChange={e => handleConfigChange('preset_response', e.target.value)}
-                />
-                <div className='absolute bottom-2 right-2 flex items-center px-1 h-5 rounded-md bg-gray-50 text-xs font-medium text-gray-300'>
-                  <span>{(config.preset_response || '').length}</span>/<span className='text-gray-500'>100</span>
-                </div>
-              </div>
-            </div>
-          )
-        }
-      </div>
-    </div>
-  )
-}
-
-export default memo(ModerationContent)
--- a/web/app/components/base/features/feature-panel/moderation/moderation-setting-modal.tsx
+++ b/web/app/components/base/features/feature-panel/moderation/moderation-setting-modal.tsx
@ -1,376 +0,0 @@
-import type { ChangeEvent, FC } from 'react'
-import {
-  memo,
-  useState,
-} from 'react'
-import useSWR from 'swr'
-import { useContext } from 'use-context-selector'
-import { useTranslation } from 'react-i18next'
-import ModerationContent from './moderation-content'
-import FormGeneration from './form-generation'
-import ApiBasedExtensionSelector from '@/app/components/header/account-setting/api-based-extension-page/selector'
-import Modal from '@/app/components/base/modal'
-import Button from '@/app/components/base/button'
-import { BookOpen01 } from '@/app/components/base/icons/src/vender/line/education'
-import type { ModerationConfig, ModerationContentConfig } from '@/models/debug'
-import { useToastContext } from '@/app/components/base/toast'
-import {
-  fetchCodeBasedExtensionList,
-  fetchModelProviders,
-} from '@/service/common'
-import type { CodeBasedExtensionItem } from '@/models/common'
-import I18n from '@/context/i18n'
-import { LanguagesSupported } from '@/i18n/language'
-import { InfoCircle } from '@/app/components/base/icons/src/vender/line/general'
-import { useModalContext } from '@/context/modal-context'
-import { CustomConfigurationStatusEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
-
-const systemTypes = ['openai_moderation', 'keywords', 'api']
-
-type Provider = {
-  key: string
-  name: string
-  form_schema?: CodeBasedExtensionItem['form_schema']
-}
-
-type ModerationSettingModalProps = {
-  data: ModerationConfig
-  onCancel: () => void
-  onSave: (moderationConfig: ModerationConfig) => void
-}
-
-const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
-  data,
-  onCancel,
-  onSave,
-}) => {
-  const { t } = useTranslation()
-  const { notify } = useToastContext()
-  const { locale } = useContext(I18n)
-  const { data: modelProviders, isLoading, mutate } = useSWR('/workspaces/current/model-providers', fetchModelProviders)
-  const [localeData, setLocaleData] = useState<ModerationConfig>(data)
-  const { setShowAccountSettingModal } = useModalContext()
-  const handleOpenSettingsModal = () => {
-    setShowAccountSettingModal({
-      payload: 'provider',
-      onCancelCallback: () => {
-        mutate()
-      },
-    })
-  }
-  const { data: codeBasedExtensionList } = useSWR(
-    '/code-based-extension?module=moderation',
-    fetchCodeBasedExtensionList,
-  )
-  const openaiProvider = modelProviders?.data.find(item => item.provider === 'openai')
-  const systemOpenaiProviderEnabled = openaiProvider?.system_configuration.enabled
-  const systemOpenaiProviderQuota = systemOpenaiProviderEnabled ? openaiProvider?.system_configuration.quota_configurations.find(item => item.quota_type === openaiProvider.system_configuration.current_quota_type) : undefined
-  const systemOpenaiProviderCanUse = systemOpenaiProviderQuota?.is_valid
-  const customOpenaiProvidersCanUse = openaiProvider?.custom_configuration.status === CustomConfigurationStatusEnum.active
-  const isOpenAIProviderConfigured = customOpenaiProvidersCanUse || systemOpenaiProviderCanUse
-  const providers: Provider[] = [
-    {
-      key: 'openai_moderation',
-      name: t('appDebug.feature.moderation.modal.provider.openai'),
-    },
-    {
-      key: 'keywords',
-      name: t('appDebug.feature.moderation.modal.provider.keywords'),
-    },
-    {
-      key: 'api',
-      name: t('common.apiBasedExtension.selector.title'),
-    },
-    ...(
-      codeBasedExtensionList
-        ? codeBasedExtensionList.data.map((item) => {
-          return {
-            key: item.name,
-            name: locale === 'zh-Hans' ? item.label['zh-Hans'] : item.label['en-US'],
-            form_schema: item.form_schema,
-          }
-        })
-        : []
-    ),
-  ]
-
-  const currentProvider = providers.find(provider => provider.key === localeData.type)
-
-  const handleDataTypeChange = (type: string) => {
-    let config: undefined | Record<string, any>
-    const currProvider = providers.find(provider => provider.key === type)
-
-    if (systemTypes.findIndex(t => t === type) < 0 && currProvider?.form_schema) {
-      config = currProvider?.form_schema.reduce((prev, next) => {
-        prev[next.variable] = next.default
-        return prev
-      }, {} as Record<string, any>)
-    }
-    setLocaleData({
-      ...localeData,
-      type,
-      config,
-    })
-  }
-
-  const handleDataKeywordsChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
-    const value = e.target.value
-
-    const arr = value.split('\n').reduce((prev: string[], next: string) => {
-      if (next !== '')
-        prev.push(next.slice(0, 100))
-      if (next === '' && prev[prev.length - 1] !== '')
-        prev.push(next)
-
-      return prev
-    }, [])
-
-    setLocaleData({
-      ...localeData,
-      config: {
-        ...localeData.config,
-        keywords: arr.slice(0, 100).join('\n'),
-      },
-    })
-  }
-
-  const handleDataContentChange = (contentType: string, contentConfig: ModerationContentConfig) => {
-    setLocaleData({
-      ...localeData,
-      config: {
-        ...localeData.config,
-        [contentType]: contentConfig,
-      },
-    })
-  }
-
-  const handleDataApiBasedChange = (apiBasedExtensionId: string) => {
-    setLocaleData({
-      ...localeData,
-      config: {
-        ...localeData.config,
-        api_based_extension_id: apiBasedExtensionId,
-      },
-    })
-  }
-
-  const handleDataExtraChange = (extraValue: Record<string, string>) => {
-    setLocaleData({
-      ...localeData,
-      config: {
-        ...localeData.config,
-        ...extraValue,
-      },
-    })
-  }
-
-  const formatData = (originData: ModerationConfig) => {
-    const { enabled, type, config } = originData
-    const { inputs_config, outputs_config } = config!
-    const params: Record<string, string | undefined> = {}
-
-    if (type === 'keywords')
-      params.keywords = config?.keywords
-
-    if (type === 'api')
-      params.api_based_extension_id = config?.api_based_extension_id
-
-    if (systemTypes.findIndex(t => t === type) < 0 && currentProvider?.form_schema) {
-      currentProvider.form_schema.forEach((form) => {
-        params[form.variable] = config?.[form.variable]
-      })
-    }
-
-    return {
-      type,
-      enabled,
-      config: {
-        inputs_config: inputs_config || { enabled: false },
-        outputs_config: outputs_config || { enabled: false },
-        ...params,
-      },
-    }
-  }
-
-  const handleSave = () => {
-    if (localeData.type === 'openai_moderation' && !isOpenAIProviderConfigured)
-      return
-
-    if (!localeData.config?.inputs_config?.enabled && !localeData.config?.outputs_config?.enabled) {
-      notify({ type: 'error', message: t('appDebug.feature.moderation.modal.content.condition') })
-      return
-    }
-
-    if (localeData.type === 'keywords' && !localeData.config.keywords) {
-      notify({ type: 'error', message: t('appDebug.errorMessage.valueOfVarRequired', { key: locale !== LanguagesSupported[1] ? 'keywords' : '关键词' }) })
-      return
-    }
-
-    if (localeData.type === 'api' && !localeData.config.api_based_extension_id) {
-      notify({ type: 'error', message: t('appDebug.errorMessage.valueOfVarRequired', { key: locale !== LanguagesSupported[1] ? 'API Extension' : 'API 扩展' }) })
-      return
-    }
-
-    if (systemTypes.findIndex(t => t === localeData.type) < 0 && currentProvider?.form_schema) {
-      for (let i = 0; i < currentProvider.form_schema.length; i++) {
-        if (!localeData.config?.[currentProvider.form_schema[i].variable] && currentProvider.form_schema[i].required) {
-          notify({
-            type: 'error',
-            message: t('appDebug.errorMessage.valueOfVarRequired', { key: locale !== LanguagesSupported[1] ? currentProvider.form_schema[i].label['en-US'] : currentProvider.form_schema[i].label['zh-Hans'] }),
-          })
-          return
-        }
-      }
-    }
-
-    if (localeData.config.inputs_config?.enabled && !localeData.config.inputs_config.preset_response && localeData.type !== 'api') {
-      notify({ type: 'error', message: t('appDebug.feature.moderation.modal.content.errorMessage') })
-      return
-    }
-
-    if (localeData.config.outputs_config?.enabled && !localeData.config.outputs_config.preset_response && localeData.type !== 'api') {
-      notify({ type: 'error', message: t('appDebug.feature.moderation.modal.content.errorMessage') })
-      return
-    }
-
-    onSave(formatData(localeData))
-  }
-
-  return (
-    <Modal
-      isShow
-      onClose={() => { }}
-      className='!p-8 !pb-6 !mt-14 !max-w-none !w-[640px]'
-    >
-      <div className='mb-2 text-xl font-semibold text-[#1D2939]'>
-        {t('appDebug.feature.moderation.modal.title')}
-      </div>
-      <div className='py-2'>
-        <div className='leading-9 text-sm font-medium text-gray-900'>
-          {t('appDebug.feature.moderation.modal.provider.title')}
-        </div>
-        <div className='grid gap-2.5 grid-cols-3'>
-          {
-            providers.map(provider => (
-              <div
-                key={provider.key}
-                className={`
-                  flex items-center px-3 py-2 rounded-lg text-sm text-gray-900 cursor-pointer
-                  ${localeData.type === provider.key ? 'bg-white border-[1.5px] border-primary-400 shadow-sm' : 'border border-gray-100 bg-gray-25'}
-                  ${localeData.type === 'openai_moderation' && provider.key === 'openai_moderation' && !isOpenAIProviderConfigured && 'opacity-50'}
-                `}
-                onClick={() => handleDataTypeChange(provider.key)}
-              >
-                <div className={`
-                  mr-2 w-4 h-4 rounded-full border
-                  ${localeData.type === provider.key ? 'border-[5px] border-primary-600' : 'border border-gray-300'}`} />
-                {provider.name}
-              </div>
-            ))
-          }
-        </div>
-        {
-          !isLoading && !isOpenAIProviderConfigured && localeData.type === 'openai_moderation' && (
-            <div className='flex items-center mt-2 px-3 py-2 bg-[#FFFAEB] rounded-lg border border-[#FEF0C7]'>
-              <InfoCircle className='mr-1 w-4 h-4 text-[#F79009]' />
-              <div className='flex items-center text-xs font-medium text-gray-700'>
-                {t('appDebug.feature.moderation.modal.openaiNotConfig.before')}
-                <span
-                  className='text-primary-600 cursor-pointer'
-                  onClick={handleOpenSettingsModal}
-                >
-                  &nbsp;{t('common.settings.provider')}&nbsp;
-                </span>
-                {t('appDebug.feature.moderation.modal.openaiNotConfig.after')}
-              </div>
-            </div>
-          )
-        }
-      </div>
-      {
-        localeData.type === 'keywords' && (
-          <div className='py-2'>
-            <div className='mb-1 text-sm font-medium text-gray-900'>{t('appDebug.feature.moderation.modal.provider.keywords')}</div>
-            <div className='mb-2 text-xs text-gray-500'>{t('appDebug.feature.moderation.modal.keywords.tip')}</div>
-            <div className='relative px-3 py-2 h-[88px] bg-gray-100 rounded-lg'>
-              <textarea
-                value={localeData.config?.keywords || ''}
-                onChange={handleDataKeywordsChange}
-                className='block w-full h-full bg-transparent text-sm outline-none appearance-none resize-none'
-                placeholder={t('appDebug.feature.moderation.modal.keywords.placeholder') || ''}
-              />
-              <div className='absolute bottom-2 right-2 flex items-center px-1 h-5 rounded-md bg-gray-50 text-xs font-medium text-gray-300'>
-                <span>{(localeData.config?.keywords || '').split('\n').filter(Boolean).length}</span>/<span className='text-gray-500'>100 {t('appDebug.feature.moderation.modal.keywords.line')}</span>
-              </div>
-            </div>
-          </div>
-        )
-      }
-      {
-        localeData.type === 'api' && (
-          <div className='py-2'>
-            <div className='flex items-center justify-between h-9'>
-              <div className='text-sm font-medium text-gray-900'>{t('common.apiBasedExtension.selector.title')}</div>
-              <a
-                href={t('common.apiBasedExtension.linkUrl') || '/'}
-                target='_blank' rel='noopener noreferrer'
-                className='group flex items-center text-xs text-gray-500 hover:text-primary-600'
-              >
-                <BookOpen01 className='mr-1 w-3 h-3 text-gray-500 group-hover:text-primary-600' />
-                {t('common.apiBasedExtension.link')}
-              </a>
-            </div>
-            <ApiBasedExtensionSelector
-              value={localeData.config?.api_based_extension_id || ''}
-              onChange={handleDataApiBasedChange}
-            />
-          </div>
-        )
-      }
-      {
-        systemTypes.findIndex(t => t === localeData.type) < 0
-        && currentProvider?.form_schema
-        && (
-          <FormGeneration
-            forms={currentProvider?.form_schema}
-            value={localeData.config}
-            onChange={handleDataExtraChange}
-          />
-        )
-      }
-      <div className='my-3 h-[1px] bg-gradient-to-r from-[#F3F4F6]'></div>
-      <ModerationContent
-        title={t('appDebug.feature.moderation.modal.content.input') || ''}
-        config={localeData.config?.inputs_config || { enabled: false, preset_response: '' }}
-        onConfigChange={config => handleDataContentChange('inputs_config', config)}
-        info={(localeData.type === 'api' && t('appDebug.feature.moderation.modal.content.fromApi')) || ''}
-        showPreset={!(localeData.type === 'api')}
-      />
-      <ModerationContent
-        title={t('appDebug.feature.moderation.modal.content.output') || ''}
-        config={localeData.config?.outputs_config || { enabled: false, preset_response: '' }}
-        onConfigChange={config => handleDataContentChange('outputs_config', config)}
-        info={(localeData.type === 'api' && t('appDebug.feature.moderation.modal.content.fromApi')) || ''}
-        showPreset={!(localeData.type === 'api')}
-      />
-      <div className='mt-1 mb-8 text-xs font-medium text-gray-500'>{t('appDebug.feature.moderation.modal.content.condition')}</div>
-      <div className='flex items-center justify-end'>
-        <Button
-          onClick={onCancel}
-          className='mr-2'
-        >
-          {t('common.operation.cancel')}
-        </Button>
-        <Button
-          variant='primary'
-          onClick={handleSave}
-          disabled={localeData.type === 'openai_moderation' && !isOpenAIProviderConfigured}
-        >
-          {t('common.operation.save')}
-        </Button>
-      </div>
-    </Modal>
-  )
-}
-
-export default memo(ModerationSettingModal)
--- a/web/app/components/base/features/feature-panel/score-slider/base-slider/index.tsx
+++ b/web/app/components/base/features/feature-panel/score-slider/base-slider/index.tsx
@ -1,38 +0,0 @@
-import ReactSlider from 'react-slider'
-import s from './style.module.css'
-import cn from '@/utils/classnames'
-
-type ISliderProps = {
-  className?: string
-  value: number
-  max?: number
-  min?: number
-  step?: number
-  disabled?: boolean
-  onChange: (value: number) => void
-}
-
-const Slider: React.FC<ISliderProps> = ({ className, max, min, step, value, disabled, onChange }) => {
-  return <ReactSlider
-    disabled={disabled}
-    value={isNaN(value) ? 0 : value}
-    min={min || 0}
-    max={max || 100}
-    step={step || 1}
-    className={cn(className, s.slider)}
-    thumbClassName={cn(s['slider-thumb'], 'top-[-7px] w-2 h-[18px] bg-white border !border-black/8 rounded-[36px] shadow-md cursor-pointer')}
-    trackClassName={s['slider-track']}
-    onChange={onChange}
-    renderThumb={(props, state) => (
-      <div {...props}>
-        <div className='relative w-full h-full'>
-          <div className='absolute top-[-16px] left-[50%] translate-x-[-50%] leading-[18px] text-xs font-medium text-gray-900'>
-            {(state.valueNow / 100).toFixed(2)}
-          </div>
-        </div>
-      </div>
-    )}
-  />
-}
-
-export default Slider
--- a/web/app/components/base/features/feature-panel/score-slider/base-slider/style.module.css
+++ b/web/app/components/base/features/feature-panel/score-slider/base-slider/style.module.css
@ -1,20 +0,0 @@
-.slider {
-    position: relative;
-}
-
-.slider.disabled {
-    opacity: 0.6;
-}
-
-.slider-thumb:focus {
-    outline: none;
-}
-
-.slider-track {
-    background-color: #528BFF;
-    height: 2px;
-}
-
-.slider-track-1 {
-    background-color: #E5E7EB;
-}
--- a/web/app/components/base/features/feature-panel/score-slider/index.tsx
+++ b/web/app/components/base/features/feature-panel/score-slider/index.tsx
@ -1,46 +0,0 @@
-'use client'
-import type { FC } from 'react'
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-import Slider from '@/app/components/app/configuration/toolbox/score-slider/base-slider'
-
-type Props = {
-  className?: string
-  value: number
-  onChange: (value: number) => void
-}
-
-const ScoreSlider: FC<Props> = ({
-  className,
-  value,
-  onChange,
-}) => {
-  const { t } = useTranslation()
-
-  return (
-    <div className={className}>
-      <div className='h-[1px] mt-[14px]'>
-        <Slider
-          max={100}
-          min={80}
-          step={1}
-          value={value}
-          onChange={onChange}
-        />
-      </div>
-      <div className='mt-[10px] flex justify-between items-center leading-4 text-xs font-normal '>
-        <div className='flex space-x-1 text-[#00A286]'>
-          <div>0.8</div>
-          <div>·</div>
-          <div>{t('appDebug.feature.annotation.scoreThreshold.easyMatch')}</div>
-        </div>
-        <div className='flex space-x-1 text-[#0057D8]'>
-          <div>1.0</div>
-          <div>·</div>
-          <div>{t('appDebug.feature.annotation.scoreThreshold.accurateMatch')}</div>
-        </div>
-      </div>
-    </div>
-  )
-}
-export default React.memo(ScoreSlider)
--- a/web/app/components/base/features/feature-panel/speech-to-text/index.tsx
+++ b/web/app/components/base/features/feature-panel/speech-to-text/index.tsx
@ -1,22 +0,0 @@
-'use client'
-import React, { type FC } from 'react'
-import { useTranslation } from 'react-i18next'
-import { Microphone01 } from '@/app/components/base/icons/src/vender/solid/mediaAndDevices'
-
-const SpeechToTextConfig: FC = () => {
-  const { t } = useTranslation()
-
-  return (
-    <div className='flex items-center px-3 h-12 bg-gray-50 rounded-xl overflow-hidden'>
-      <div className='shrink-0 flex items-center justify-center mr-1 w-6 h-6'>
-        <Microphone01 className='w-4 h-4 text-[#7839EE]' />
-      </div>
-      <div className='shrink-0 mr-2 flex items-center whitespace-nowrap text-sm text-gray-800 font-semibold'>
-        <div>{t('appDebug.feature.speechToText.title')}</div>
-      </div>
-      <div className='grow'></div>
-      <div className='text-xs text-gray-500'>{t('appDebug.feature.speechToText.resDes')}</div>
-    </div>
-  )
-}
-export default React.memo(SpeechToTextConfig)
--- a/web/app/components/base/features/feature-panel/suggested-questions-after-answer/index.tsx
+++ b/web/app/components/base/features/feature-panel/suggested-questions-after-answer/index.tsx
@ -1,25 +0,0 @@
-'use client'
-import type { FC } from 'react'
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-import { MessageSmileSquare } from '@/app/components/base/icons/src/vender/solid/communication'
-import Tooltip from '@/app/components/base/tooltip'
-
-const SuggestedQuestionsAfterAnswer: FC = () => {
-  const { t } = useTranslation()
-
-  return (
-    <div className='flex items-center px-3 h-12 bg-gray-50 rounded-xl overflow-hidden'>
-      <div className='shrink-0 flex items-center justify-center mr-1 w-6 h-6'>
-        <MessageSmileSquare className='w-4 h-4 text-[#06AED4]' />
-      </div>
-      <div className='shrink-0 mr-2 flex items-center whitespace-nowrap text-sm text-gray-800 font-semibold'>
-        <div className='mr-2'>{t('appDebug.feature.suggestedQuestionsAfterAnswer.title')}</div>
-        <Tooltip popupContent={t('appDebug.feature.suggestedQuestionsAfterAnswer.description')}/>
-      </div>
-      <div className='grow'></div>
-      <div className='text-xs text-gray-500'>{t('appDebug.feature.suggestedQuestionsAfterAnswer.resDes')}</div>
-    </div>
-  )
-}
-export default React.memo(SuggestedQuestionsAfterAnswer)
--- a/web/app/components/base/features/feature-panel/text-to-speech/index.tsx
+++ b/web/app/components/base/features/feature-panel/text-to-speech/index.tsx
@ -1,62 +0,0 @@
-'use client'
-import useSWR from 'swr'
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-import { usePathname } from 'next/navigation'
-import { useFeatures } from '../../hooks'
-import type { OnFeaturesChange } from '../../types'
-import ParamsConfig from './params-config'
-import { Speaker } from '@/app/components/base/icons/src/vender/solid/mediaAndDevices'
-import { languages } from '@/i18n/language'
-import { fetchAppVoices } from '@/service/apps'
-import AudioBtn from '@/app/components/base/audio-btn'
-
-type TextToSpeechProps = {
-  onChange?: OnFeaturesChange
-  disabled?: boolean
-}
-const TextToSpeech = ({
-  onChange,
-  disabled,
-}: TextToSpeechProps) => {
-  const { t } = useTranslation()
-  const textToSpeech = useFeatures(s => s.features.text2speech)
-
-  const pathname = usePathname()
-  const matched = pathname.match(/\/app\/([^/]+)/)
-  const appId = (matched?.length && matched[1]) ? matched[1] : ''
-  const language = textToSpeech?.language
-  const languageInfo = languages.find(i => i.value === textToSpeech?.language)
-
-  const voiceItems = useSWR({ appId, language }, fetchAppVoices).data
-  const voiceItem = voiceItems?.find(item => item.value === textToSpeech?.voice)
-
-  return (
-    <div className='flex items-center px-3 h-12 bg-gray-50 rounded-xl overflow-hidden'>
-      <div className='shrink-0 flex items-center justify-center mr-1 w-6 h-6'>
-        <Speaker className='w-4 h-4 text-[#7839EE]' />
-      </div>
-      <div className='shrink-0 mr-2 whitespace-nowrap text-sm text-gray-800 font-semibold'>
-        {t('appDebug.feature.textToSpeech.title')}
-      </div>
-      <div
-        className='grow '>
-      </div>
-      <div className='shrink-0 text-xs text-gray-500 inline-flex items-center gap-2'>
-        {languageInfo && (`${languageInfo?.name} - `)}{voiceItem?.name ?? t('appDebug.voice.defaultDisplay')}
-        { languageInfo?.example && (
-          <AudioBtn
-            value={languageInfo?.example}
-            voice={voiceItem?.value}
-            noCache={false}
-            isAudition={true}
-          />
-        )}
-      </div>
-      <div className='shrink-0 flex items-center'>
-        <ParamsConfig onChange={onChange} disabled={disabled} />
-      </div>
-    </div>
-  )
-}
-export default React.memo(TextToSpeech)
--- a/web/app/components/base/features/feature-panel/text-to-speech/param-config-content.tsx
+++ b/web/app/components/base/features/feature-panel/text-to-speech/param-config-content.tsx
@ -1,241 +0,0 @@
-'use client'
-import useSWR from 'swr'
-import produce from 'immer'
-import React, { Fragment } from 'react'
-import { usePathname } from 'next/navigation'
-import { useTranslation } from 'react-i18next'
-import { Listbox, Transition } from '@headlessui/react'
-import { CheckIcon, ChevronDownIcon } from '@heroicons/react/20/solid'
-import {
-  useFeatures,
-  useFeaturesStore,
-} from '../../hooks'
-import type { OnFeaturesChange } from '../../types'
-import classNames from '@/utils/classnames'
-import type { Item } from '@/app/components/base/select'
-import { fetchAppVoices } from '@/service/apps'
-import Tooltip from '@/app/components/base/tooltip'
-import { languages } from '@/i18n/language'
-import RadioGroup from '@/app/components/app/configuration/config-vision/radio-group'
-import { TtsAutoPlay } from '@/types/app'
-
-type VoiceParamConfigProps = {
-  onChange?: OnFeaturesChange
-}
-const VoiceParamConfig = ({
-  onChange,
-}: VoiceParamConfigProps) => {
-  const { t } = useTranslation()
-  const pathname = usePathname()
-  const matched = pathname.match(/\/app\/([^/]+)/)
-  const appId = (matched?.length && matched[1]) ? matched[1] : ''
-  const text2speech = useFeatures(state => state.features.text2speech)
-  const featuresStore = useFeaturesStore()
-
-  let languageItem = languages.find(item => item.value === text2speech?.language)
-  if (languages && !languageItem)
-    languageItem = languages[0]
-  const localLanguagePlaceholder = languageItem?.name || t('common.placeholder.select')
-
-  const language = languageItem?.value
-  const voiceItems = useSWR({ appId, language }, fetchAppVoices).data
-  let voiceItem = voiceItems?.find(item => item.value === text2speech?.voice)
-  if (voiceItems && !voiceItem)
-    voiceItem = voiceItems[0]
-  const localVoicePlaceholder = voiceItem?.name || t('common.placeholder.select')
-
-  const handleChange = (value: Record<string, string>) => {
-    const {
-      features,
-      setFeatures,
-    } = featuresStore!.getState()
-
-    const newFeatures = produce(features, (draft) => {
-      draft.text2speech = {
-        ...draft.text2speech,
-        ...value,
-      }
-    })
-
-    setFeatures(newFeatures)
-    if (onChange)
-      onChange(newFeatures)
-  }
-
-  return (
-    <div>
-      <div>
-        <div className='leading-6 text-base font-semibold text-gray-800'>{t('appDebug.voice.voiceSettings.title')}</div>
-        <div className='pt-3 space-y-6'>
-          <div>
-            <div className='mb-2 flex items-center  space-x-1'>
-              <div
-                className='leading-[18px] text-[13px] font-semibold text-gray-800'>{t('appDebug.voice.voiceSettings.language')}</div>
-              <Tooltip
-                popupContent={
-                  <div className='w-[180px]'>
-                    {t('appDebug.voice.voiceSettings.resolutionTooltip').split('\n').map(item => (
-                      <div key={item}>{item}
-                      </div>
-                    ))}
-                  </div>
-                }
-              />
-            </div>
-            <Listbox
-              value={languageItem}
-              onChange={(value: Item) => {
-                handleChange({
-                  language: String(value.value),
-                })
-              }}
-            >
-              <div className={'relative h-9'}>
-                <Listbox.Button
-                  className={'w-full h-full rounded-lg border-0 bg-gray-100 py-1.5 pl-3 pr-10 sm:text-sm sm:leading-6 focus-visible:outline-none focus-visible:bg-gray-200 group-hover:bg-gray-200 cursor-pointer'}>
-                  <span className={classNames('block truncate text-left', !languageItem?.name && 'text-gray-400')}>
-                    {languageItem?.name ? t(`common.voice.language.${languageItem?.value.replace('-', '')}`) : localLanguagePlaceholder}
-                  </span>
-                  <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
-                    <ChevronDownIcon
-                      className="h-5 w-5 text-gray-400"
-                      aria-hidden="true"
-                    />
-                  </span>
-                </Listbox.Button>
-                <Transition
-                  as={Fragment}
-                  leave="transition ease-in duration-100"
-                  leaveFrom="opacity-100"
-                  leaveTo="opacity-0"
-                >
-
-                  <Listbox.Options
-                    className="absolute z-10 mt-1 px-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg border-gray-200 border-[0.5px] focus:outline-none sm:text-sm">
-                    {languages.map((item: Item) => (
-                      <Listbox.Option
-                        key={item.value}
-                        className={({ active }) =>
-                          `relative cursor-pointer select-none py-2 pl-3 pr-9 rounded-lg hover:bg-gray-100 text-gray-700 ${active ? 'bg-gray-100' : ''
-                          }`
-                        }
-                        value={item}
-                        disabled={false}
-                      >
-                        {({ /* active, */ selected }) => (
-                          <>
-                            <span
-                              className={classNames('block', selected && 'font-normal')}>{t(`common.voice.language.${(item.value).toString().replace('-', '')}`)}</span>
-                            {(selected || item.value === text2speech?.language) && (
-                              <span
-                                className={classNames(
-                                  'absolute inset-y-0 right-0 flex items-center pr-4 text-gray-700',
-                                )}
-                              >
-                                <CheckIcon className="h-5 w-5" aria-hidden="true"/>
-                              </span>
-                            )}
-                          </>
-                        )}
-                      </Listbox.Option>
-                    ))}
-                  </Listbox.Options>
-                </Transition>
-              </div>
-            </Listbox>
-          </div>
-
-          <div>
-            <div
-              className='mb-2 leading-[18px] text-[13px] font-semibold text-gray-800'>{t('appDebug.voice.voiceSettings.voice')}</div>
-            <Listbox
-              value={voiceItem ?? {}}
-              disabled={!languageItem}
-              onChange={(value: Item) => {
-                handleChange({
-                  voice: String(value.value),
-                })
-              }}
-            >
-              <div className={'relative h-9'}>
-                <Listbox.Button
-                  className={'w-full h-full rounded-lg border-0 bg-gray-100 py-1.5 pl-3 pr-10 sm:text-sm sm:leading-6 focus-visible:outline-none focus-visible:bg-gray-200 group-hover:bg-gray-200 cursor-pointer'}>
-                  <span
-                    className={classNames('block truncate text-left', !voiceItem?.name && 'text-gray-400')}>{voiceItem?.name ?? localVoicePlaceholder}</span>
-                  <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
-                    <ChevronDownIcon
-                      className="h-5 w-5 text-gray-400"
-                      aria-hidden="true"
-                    />
-                  </span>
-                </Listbox.Button>
-                <Transition
-                  as={Fragment}
-                  leave="transition ease-in duration-100"
-                  leaveFrom="opacity-100"
-                  leaveTo="opacity-0"
-                >
-
-                  <Listbox.Options
-                    className="absolute z-10 mt-1 px-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg border-gray-200 border-[0.5px] focus:outline-none sm:text-sm">
-                    {voiceItems?.map((item: Item) => (
-                      <Listbox.Option
-                        key={item.value}
-                        className={({ active }) =>
-                          `relative cursor-pointer select-none py-2 pl-3 pr-9 rounded-lg hover:bg-gray-100 text-gray-700 ${active ? 'bg-gray-100' : ''
-                          }`
-                        }
-                        value={item}
-                        disabled={false}
-                      >
-                        {({ /* active, */ selected }) => (
-                          <>
-                            <span className={classNames('block', selected && 'font-normal')}>{item.name}</span>
-                            {(selected || item.value === text2speech?.voice) && (
-                              <span
-                                className={classNames(
-                                  'absolute inset-y-0 right-0 flex items-center pr-4 text-gray-700',
-                                )}
-                              >
-                                <CheckIcon className="h-5 w-5" aria-hidden="true"/>
-                              </span>
-                            )}
-                          </>
-                        )}
-                      </Listbox.Option>
-                    ))}
-                  </Listbox.Options>
-                </Transition>
-              </div>
-            </Listbox>
-          </div>
-          <div>
-            <div
-              className='mb-2 leading-[18px] text-[13px] font-semibold text-gray-800'>{t('appDebug.voice.voiceSettings.autoPlay')}</div>
-            <RadioGroup
-              className='space-x-3'
-              options={[
-                {
-                  label: t('appDebug.voice.voiceSettings.autoPlayEnabled'),
-                  value: TtsAutoPlay.enabled,
-                },
-                {
-                  label: t('appDebug.voice.voiceSettings.autoPlayDisabled'),
-                  value: TtsAutoPlay.disabled,
-                },
-              ]}
-              value={text2speech?.autoPlay ? text2speech?.autoPlay : TtsAutoPlay.disabled}
-              onChange={(value: TtsAutoPlay) => {
-                handleChange({
-                  autoPlay: value,
-                })
-              }}
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default React.memo(VoiceParamConfig)
--- a/web/app/components/base/features/feature-panel/text-to-speech/params-config.tsx
+++ b/web/app/components/base/features/feature-panel/text-to-speech/params-config.tsx
@ -1,48 +0,0 @@
-'use client'
-import { memo, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import type { OnFeaturesChange } from '../../types'
-import ParamConfigContent from './param-config-content'
-import cn from '@/utils/classnames'
-import { Settings01 } from '@/app/components/base/icons/src/vender/line/general'
-import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
-
-type ParamsConfigProps = {
-  onChange?: OnFeaturesChange
-  disabled?: boolean
-}
-const ParamsConfig = ({
-  onChange,
-  disabled,
-}: ParamsConfigProps) => {
-  const { t } = useTranslation()
-  const [open, setOpen] = useState(false)
-
-  return (
-    <PortalToFollowElem
-      open={open}
-      onOpenChange={setOpen}
-      placement='bottom-end'
-      offset={{
-        mainAxis: 4,
-      }}
-    >
-      <PortalToFollowElemTrigger onClick={() => !disabled && setOpen(v => !v)}>
-        <div className={cn('flex items-center rounded-md h-7 px-3 space-x-1 text-gray-700 cursor-pointer hover:bg-gray-200', open && 'bg-gray-200')}>
-          <Settings01 className='w-3.5 h-3.5 ' />
-          <div className='ml-1 leading-[18px] text-xs font-medium '>{t('appDebug.voice.settings')}</div>
-        </div>
-      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent style={{ zIndex: 50 }}>
-        <div className='w-80 sm:w-[412px] p-4 bg-white rounded-lg border-[0.5px] border-gray-200 shadow-lg space-y-3'>
-          <ParamConfigContent onChange={onChange} />
-        </div>
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
-  )
-}
-export default memo(ParamsConfig)
--- a/web/app/components/base/features/index.tsx
+++ b/web/app/components/base/features/index.tsx
@ -1,3 +1 @@
-export { default as FeaturesPanel } from './feature-panel'
-export { default as FeaturesChoose } from './feature-choose'
 export { FeaturesProvider } from './context'
--- a/web/app/components/base/features/store.ts
+++ b/web/app/components/base/features/store.ts
@ -1,17 +1,17 @@
 import { createStore } from 'zustand'
 import type { Features } from './types'
-import { TransferMethod } from '@/types/app'
+import { Resolution, TransferMethod } from '@/types/app'

-export type FeaturesModal = {
+export interface FeaturesModal {
  showFeaturesModal: boolean
  setShowFeaturesModal: (showFeaturesModal: boolean) => void
 }

-export type FeaturesState = {
+export interface FeaturesState {
  features: Features
 }

-export type FeaturesAction = {
+export interface FeaturesAction {
  setFeatures: (features: Features) => void
 }

@ -22,6 +22,9 @@ export type FeaturesStore = ReturnType<typeof createFeaturesStore>
 export const createFeaturesStore = (initProps?: Partial<FeaturesState>) => {
  const DEFAULT_PROPS: FeaturesState = {
    features: {
+      moreLikeThis: {
+        enabled: false,
+      },
      opening: {
        enabled: false,
      },
@ -43,10 +46,14 @@ export const createFeaturesStore = (initProps?: Partial<FeaturesState>) => {
      file: {
        image: {
          enabled: false,
+          detail: Resolution.high,
          number_limits: 3,
          transfer_methods: [TransferMethod.local_file, TransferMethod.remote_url],
        },
      },
+      annotationReply: {
+        enabled: false,
+      },
    },
  }
  return createStore<FeatureStoreState>()(set => ({
--- a/web/app/components/base/features/types.ts
+++ b/web/app/components/base/features/types.ts
@ -1,9 +1,12 @@
-import type { TransferMethod, TtsAutoPlay } from '@/types/app'
+import type { Resolution, TransferMethod, TtsAutoPlay } from '@/types/app'
+import type { FileUploadConfigResponse } from '@/models/common'

-export type EnabledOrDisabled = {
+export interface EnabledOrDisabled {
  enabled?: boolean
 }

+export type MoreLikeThis = EnabledOrDisabled
+
 export type OpeningStatement = EnabledOrDisabled & {
  opening_statement?: string
  suggested_questions?: string[]
@ -28,12 +31,29 @@ export type SensitiveWordAvoidance = EnabledOrDisabled & {

 export type FileUpload = {
  image?: EnabledOrDisabled & {
+    detail?: Resolution
    number_limits?: number
    transfer_methods?: TransferMethod[]
  }
+  allowed_file_types?: string[]
+  allowed_file_extensions?: string[]
+  allowed_file_upload_methods?: TransferMethod[]
+  number_limits?: number
+  fileUploadConfig?: FileUploadConfigResponse
+} & EnabledOrDisabled
+
+export interface AnnotationReplyConfig {
+  enabled: boolean
+  id?: string
+  score_threshold?: number
+  embedding_model?: {
+    embedding_provider_name: string
+    embedding_model_name: string
+  }
 }

 export enum FeatureEnum {
+  moreLikeThis = 'moreLikeThis',
  opening = 'opening',
  suggested = 'suggested',
  text2speech = 'text2speech',
@ -41,9 +61,11 @@ export enum FeatureEnum {
  citation = 'citation',
  moderation = 'moderation',
  file = 'file',
+  annotationReply = 'annotationReply',
 }

-export type Features = {
+export interface Features {
+  [FeatureEnum.moreLikeThis]?: MoreLikeThis
  [FeatureEnum.opening]?: OpeningStatement
  [FeatureEnum.suggested]?: SuggestedQuestionsAfterAnswer
  [FeatureEnum.text2speech]?: TextToSpeech
@ -51,6 +73,7 @@ export type Features = {
  [FeatureEnum.citation]?: RetrieverResource
  [FeatureEnum.moderation]?: SensitiveWordAvoidance
  [FeatureEnum.file]?: FileUpload
+  [FeatureEnum.annotationReply]?: AnnotationReplyConfig
 }

-export type OnFeaturesChange = (features: Features) => void
+export type OnFeaturesChange = (features?: Features) => void