diff --git a/web/app/components/base/features/new-feature-panel/citation.tsx b/web/app/components/base/features/new-feature-panel/citation.tsx
new file mode 100644
index 0000000000..e0ab288e0c
--- /dev/null
+++ b/web/app/components/base/features/new-feature-panel/citation.tsx
@@ -0,0 +1,53 @@
+import React, { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import produce from 'immer'
+import { Citations } from '@/app/components/base/icons/src/vender/features'
+import FeatureCard from '@/app/components/base/features/new-feature-panel/feature-card'
+import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
+import type { OnFeaturesChange } from '@/app/components/base/features/types'
+import { FeatureEnum } from '@/app/components/base/features/types'
+
+type Props = {
+  onChange?: OnFeaturesChange
+}
+
+const Citation = ({
+  onChange,
+}: Props) => {
+  const { t } = useTranslation()
+  const features = useFeatures(s => s.features)
+  const featuresStore = useFeaturesStore()
+
+  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 (
+    <FeatureCard
+      icon={
+        <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-warning-warning-500'>
+          <Citations className='w-4 h-4 text-text-primary-on-surface' />
+        </div>
+      }
+      title={t('appDebug.feature.citation.title')}
+      value={!!features.citation?.enabled}
+      description={t('appDebug.feature.citation.description')}
+      onChange={state => handleChange(FeatureEnum.citation, state)}
+    />
+  )
+}
+
+export default Citation
diff --git a/web/app/components/base/features/new-feature-panel/feature-card.tsx b/web/app/components/base/features/new-feature-panel/feature-card.tsx
new file mode 100644
index 0000000000..bc53af75b9
--- /dev/null
+++ b/web/app/components/base/features/new-feature-panel/feature-card.tsx
@@ -0,0 +1,61 @@
+import React from 'react'
+import {
+  RiQuestionLine,
+} from '@remixicon/react'
+import Switch from '@/app/components/base/switch'
+import Tooltip from '@/app/components/base/tooltip'
+
+type Props = {
+  icon: any
+  title: any
+  tooltip?: any
+  value: any
+  description?: string
+  children?: React.ReactNode
+  disabled?: boolean
+  onChange?: (state: any) => void
+  onMouseEnter?: () => void
+  onMouseLeave?: () => void
+}
+
+const FeatureCard = ({
+  icon,
+  title,
+  tooltip,
+  value,
+  description,
+  children,
+  // disabled,
+  onChange,
+  onMouseEnter,
+  onMouseLeave,
+}: Props) => {
+  return (
+    <div
+      className='mb-1 p-3 border-t-[0.5px] border-l-[0.5px] border-effects-highlight rounded-xl bg-background-section-burn'
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+    >
+      <div className='mb-2 flex items-center gap-2'>
+        {icon}
+        <div className='grow flex items-center text-text-secondary system-sm-semibold'>
+          {title}
+          {tooltip && (
+            <Tooltip
+              popupContent={tooltip}
+            >
+              <div className='ml-0.5 p-px'><RiQuestionLine className='w-3.5 h-3.5 text-text-quaternary' /></div>
+            </Tooltip>
+          )}
+        </div>
+        <Switch className='shrink-0' onChange={state => onChange?.(state)} defaultValue={value} />
+      </div>
+      {description && (
+        <div className='min-h-8 text-text-tertiary system-xs-regular line-clamp-2'>{description}</div>
+      )}
+      {children}
+    </div>
+  )
+}
+
+export default FeatureCard
diff --git a/web/app/components/base/features/new-feature-panel/follow-up.tsx b/web/app/components/base/features/new-feature-panel/follow-up.tsx
new file mode 100644
index 0000000000..d658d4d1f4
--- /dev/null
+++ b/web/app/components/base/features/new-feature-panel/follow-up.tsx
@@ -0,0 +1,53 @@
+import React, { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import produce from 'immer'
+import { VirtualAssistant } from '@/app/components/base/icons/src/vender/features'
+import FeatureCard from '@/app/components/base/features/new-feature-panel/feature-card'
+import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
+import type { OnFeaturesChange } from '@/app/components/base/features/types'
+import { FeatureEnum } from '@/app/components/base/features/types'
+
+type Props = {
+  onChange?: OnFeaturesChange
+}
+
+const FollowUp = ({
+  onChange,
+}: Props) => {
+  const { t } = useTranslation()
+  const features = useFeatures(s => s.features)
+  const featuresStore = useFeaturesStore()
+
+  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 (
+    <FeatureCard
+      icon={
+        <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-blue-light-blue-light-500'>
+          <VirtualAssistant className='w-4 h-4 text-text-primary-on-surface' />
+        </div>
+      }
+      title={t('appDebug.feature.suggestedQuestionsAfterAnswer.title')}
+      value={!!features.suggested?.enabled}
+      description={t('appDebug.feature.suggestedQuestionsAfterAnswer.description')}
+      onChange={state => handleChange(FeatureEnum.suggested, state)}
+    />
+  )
+}
+
+export default FollowUp
diff --git a/web/app/components/base/features/new-feature-panel/index.tsx b/web/app/components/base/features/new-feature-panel/index.tsx
index 7323cc25e2..199e1a12b4 100644
--- a/web/app/components/base/features/new-feature-panel/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/index.tsx
@@ -1,17 +1,15 @@
 import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
+import { usePathname, useRouter } from 'next/navigation'
 import produce from 'immer'
 import {
   RiCloseLine,
   RiEqualizer2Line,
-  RiQuestionLine,
-  RiSparklingFill,
+  RiExternalLinkLine,
 } from '@remixicon/react'
 import {
-  Citations,
-  Microphone01,
-  TextToAudio,
-  VirtualAssistant,
+  FolderUpload,
+  MessageFast,
 } from '@/app/components/base/icons/src/vender/features'
 import DialogWrapper from '@/app/components/base/features/new-feature-panel/dialog-wrapper'
 import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
@@ -19,26 +17,38 @@ import { useDefaultModel } from '@/app/components/header/account-setting/model-p
 import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import type { OnFeaturesChange } from '@/app/components/base/features/types'
 import { FeatureEnum } from '@/app/components/base/features/types'
-import { TtsAutoPlay } from '@/types/app'
-import { languages } from '@/i18n/language'
 import Switch from '@/app/components/base/switch'
-import Tooltip from '@/app/components/base/tooltip'
 import Button from '@/app/components/base/button'
 
+import MoreLikeThis from '@/app/components/base/features/new-feature-panel/more-like-this'
+import SpeechToText from '@/app/components/base/features/new-feature-panel/speech-to-text'
+import TextToSpeech from '@/app/components/base/features/new-feature-panel/text-to-speech'
+import FollowUp from '@/app/components/base/features/new-feature-panel/follow-up'
+import Citation from '@/app/components/base/features/new-feature-panel/citation'
+
 type Props = {
   show: boolean
+  showAnnotation?: boolean
   isChatMode: boolean
   disabled: boolean
   onChange?: OnFeaturesChange
   onClose: () => void
 }
 
-const NewFeaturePanel = ({ show, isChatMode, onChange, onClose }: Props) => {
+const NewFeaturePanel = ({
+  show,
+  showAnnotation = false,
+  isChatMode,
+  onChange,
+  onClose,
+}: Props) => {
   const { t } = useTranslation()
+  const router = useRouter()
+  const pathname = usePathname()
+  const matched = pathname.match(/\/app\/([^/]+)/)
+  const appId = (matched?.length && matched[1]) ? matched[1] : ''
   const { data: speech2textDefaultModel } = useDefaultModel(ModelTypeEnum.speech2text)
   const { data: text2speechDefaultModel } = useDefaultModel(ModelTypeEnum.tts)
-  const textToSpeech = useFeatures(s => s.features.text2speech) // .language .voice .autoPlay
-  const languageInfo = languages.find(i => i.value === textToSpeech?.language)
   const features = useFeatures(s => s.features)
   const featuresStore = useFeaturesStore()
 
@@ -75,117 +85,69 @@ const NewFeaturePanel = ({ show, isChatMode, onChange, onClose }: Props) => {
         </div>
         {/* list */}
         <div className='grow overflow-y-auto px-4 pb-4'>
-          {/* more like this */}
           {!isChatMode && (
-            <div className='mb-1 p-3 border-t-[0.5px] border-l-[0.5px] border-effects-highlight rounded-xl bg-background-section-burn'>
-              <div className='mb-2 flex items-center gap-2'>
-                <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-blue-light-blue-light-500'>
-                  <RiSparklingFill className='w-4 h-4 text-text-primary-on-surface' />
-                </div>
-                <div className='grow flex items-center text-text-secondary system-sm-semibold'>
-                  {t('appDebug.feature.moreLikeThis.title')}
-                  <Tooltip
-                    htmlContent={
-                      <div className='w-[180px]'>
-                        {t('appDebug.feature.moreLikeThis.tip')}
-                      </div>
-                    }
-                    selector='feature-more-like-this'
-                  >
-                    <div className='ml-0.5 p-px'><RiQuestionLine className='w-3.5 h-3.5 text-text-quaternary' /></div>
-                  </Tooltip>
-                </div>
-                <Switch className='shrink-0' onChange={value => handleChange(FeatureEnum.moreLikeThis, value)} defaultValue={!!features.moreLikeThis?.enabled} />
-              </div>
-              <div className='min-h-8 text-text-tertiary system-xs-regular line-clamp-2'>{t('appDebug.feature.moreLikeThis.description')}</div>
-            </div>
+            <MoreLikeThis onChange={onChange} />
           )}
-          {/* speech to text */}
           {isChatMode && speech2textDefaultModel && (
-            <div className='mb-1 p-3 border-t-[0.5px] border-l-[0.5px] border-effects-highlight rounded-xl bg-background-section-burn'>
-              <div className='mb-2 flex items-center gap-2'>
-                <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-violet-violet-600'>
-                  <Microphone01 className='w-4 h-4 text-text-primary-on-surface' />
-                </div>
-                <div className='grow flex items-center text-text-secondary system-sm-semibold'>
-                  {t('appDebug.feature.speechToText.title')}
-                </div>
-                <Switch className='shrink-0' onChange={value => handleChange(FeatureEnum.speech2text, value)} defaultValue={!!features.speech2text?.enabled} />
-              </div>
-              <div className='min-h-8 text-text-tertiary system-xs-regular line-clamp-2'>{t('appDebug.feature.speechToText.description')}</div>
-            </div>
+            <SpeechToText onChange={onChange} />
           )}
-          {/* text to speech */}
           {text2speechDefaultModel && (
+            <TextToSpeech onChange={onChange} />
+          )}
+          {/* file upload ##TODO## */}
+          <div className='group mb-1 p-3 border-t-[0.5px] border-l-[0.5px] border-effects-highlight rounded-xl bg-background-section-burn'>
+            <div className='mb-2 flex items-center gap-2'>
+              <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-blue-blue-600'>
+                <FolderUpload className='w-4 h-4 text-text-primary-on-surface' />
+              </div>
+              <div className='grow flex items-center text-text-secondary system-sm-semibold'>
+                File upload
+              </div>
+              <Switch className='shrink-0' onChange={value => handleChange(FeatureEnum.text2speech, value)} defaultValue={!!features.text2speech?.enabled} />
+            </div>
+          </div>
+          {isChatMode && (
+            <FollowUp onChange={onChange} />
+          )}
+          {isChatMode && (
+            <Citation onChange={onChange} />
+          )}
+          {/* annotation reply ##TODO## */}
+          {showAnnotation && (
             <div className='group mb-1 p-3 border-t-[0.5px] border-l-[0.5px] border-effects-highlight rounded-xl bg-background-section-burn'>
               <div className='mb-2 flex items-center gap-2'>
-                <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-violet-violet-600'>
-                  <TextToAudio className='w-4 h-4 text-text-primary-on-surface' />
+                <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-indigo-indigo-600'>
+                  <MessageFast className='w-4 h-4 text-text-primary-on-surface' />
                 </div>
                 <div className='grow flex items-center text-text-secondary system-sm-semibold'>
-                  {t('appDebug.feature.textToSpeech.title')}
+                  {t('appDebug.feature.annotation.title')}
                 </div>
                 <Switch className='shrink-0' onChange={value => handleChange(FeatureEnum.text2speech, value)} defaultValue={!!features.text2speech?.enabled} />
               </div>
-              {!features.text2speech?.enabled && (
-                <div className='min-h-8 text-text-tertiary system-xs-regular line-clamp-2'>{t('appDebug.feature.textToSpeech.description')}</div>
-              )}
-              {!!features.text2speech?.enabled && (
-                <>
-                  <div className='group-hover:hidden pt-0.5 flex items-center gap-4'>
-                    <div className=''>
-                      <div className='mb-0.5 text-text-tertiary system-2xs-medium-uppercase'>{t('appDebug.voice.voiceSettings.language')}</div>
-                      <div className='text-text-secondary system-xs-regular'>{languageInfo?.name || '-'}</div>
-                    </div>
-                    <div className='w-px h-[27px] bg-divider-subtle rotate-12'></div>
-                    <div className=''>
-                      <div className='mb-0.5 text-text-tertiary system-2xs-medium-uppercase'>{t('appDebug.voice.voiceSettings.voice')}</div>
-                      <div className='text-text-secondary system-xs-regular'>{features.text2speech?.voice || t('appDebug.voice.defaultDisplay')}</div>
-                    </div>
-                    <div className='w-px h-[27px] bg-divider-subtle rotate-12'></div>
-                    <div className=''>
-                      <div className='mb-0.5 text-text-tertiary system-2xs-medium-uppercase'>{t('appDebug.voice.voiceSettings.autoPlay')}</div>
-                      <div className='text-text-secondary system-xs-regular'>{features.text2speech?.autoPlay === TtsAutoPlay.enabled ? t('appDebug.voice.voiceSettings.autoPlayEnabled') : t('appDebug.voice.voiceSettings.autoPlayDisabled')}</div>
-                    </div>
-                  </div>
-                  <div className='hidden group-hover:block'>
-                    <Button className='w-full'>
-                      <RiEqualizer2Line className='mr-1 w-4 h-4' />
-                      {t('appDebug.voice.voiceSettings.title')}
-                    </Button>
-                  </div>
-                </>
-              )}
-            </div>
-          )}
-          {/* follow up */}
-          {isChatMode && (
-            <div className='mb-1 p-3 border-t-[0.5px] border-l-[0.5px] border-effects-highlight rounded-xl bg-background-section-burn'>
-              <div className='mb-2 flex items-center gap-2'>
-                <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-blue-light-blue-light-500'>
-                  <VirtualAssistant className='w-4 h-4 text-text-primary-on-surface' />
+              <div className='min-h-8 text-text-tertiary system-xs-regular line-clamp-2'>{t('appDebug.feature.annotation.description')}</div>
+              <div className='group-hover:hidden pt-0.5 flex items-center gap-4'>
+                <div className=''>
+                  <div className='mb-0.5 text-text-tertiary system-2xs-medium-uppercase'>{t('appDebug.feature.annotation.scoreThreshold.title')}</div>
+                  {/* <div className='text-text-secondary system-xs-regular'>{languageInfo?.name || '-'}</div> */}
                 </div>
-                <div className='grow flex items-center text-text-secondary system-sm-semibold'>
-                  {t('appDebug.feature.suggestedQuestionsAfterAnswer.title')}
+                <div className='w-px h-[27px] bg-divider-subtle rotate-12'></div>
+                <div className=''>
+                  <div className='mb-0.5 text-text-tertiary system-2xs-medium-uppercase'>{t('common.modelProvider.embeddingModel.key')}</div>
+                  {/* <div className='text-text-secondary system-xs-regular'>{features.text2speech?.voice || '-'}</div> */}
                 </div>
-                <Switch className='shrink-0' onChange={value => handleChange(FeatureEnum.suggested, value)} defaultValue={!!features.suggested?.enabled} />
               </div>
-              <div className='min-h-8 text-text-tertiary system-xs-regular line-clamp-2'>{t('appDebug.feature.suggestedQuestionsAfterAnswer.description')}</div>
-            </div>
-          )}
-          {/* citations & attributions */}
-          {isChatMode && (
-            <div className='mb-1 p-3 border-t-[0.5px] border-l-[0.5px] border-effects-highlight rounded-xl bg-background-section-burn'>
-              <div className='mb-2 flex items-center gap-2'>
-                <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-warning-warning-500'>
-                  <Citations className='w-4 h-4 text-text-primary-on-surface' />
-                </div>
-                <div className='grow flex items-center text-text-secondary system-sm-semibold'>
-                  {t('appDebug.feature.citation.title')}
-                </div>
-                <Switch className='shrink-0' onChange={value => handleChange(FeatureEnum.citation, value)} defaultValue={!!features.citation?.enabled} />
+              <div className='hidden group-hover:flex items-center justify-between'>
+                <Button className='w-[178px]'>
+                  <RiEqualizer2Line className='mr-1 w-4 h-4' />
+                  {t('common.operation.params')}
+                </Button>
+                <Button className='w-[178px]' onClick={() => {
+                  router.push(`/app/${appId}/annotations`)
+                }}>
+                  <RiExternalLinkLine className='mr-1 w-4 h-4' />
+                  {t('appDebug.feature.annotation.cacheManagement')}
+                </Button>
               </div>
-              <div className='min-h-8 text-text-tertiary system-xs-regular line-clamp-2'>{t('appDebug.feature.citation.description')}</div>
             </div>
           )}
         </div>
diff --git a/web/app/components/base/features/new-feature-panel/more-like-this.tsx b/web/app/components/base/features/new-feature-panel/more-like-this.tsx
new file mode 100644
index 0000000000..9694ca989b
--- /dev/null
+++ b/web/app/components/base/features/new-feature-panel/more-like-this.tsx
@@ -0,0 +1,54 @@
+import React, { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import produce from 'immer'
+import { RiSparklingFill } from '@remixicon/react'
+import FeatureCard from '@/app/components/base/features/new-feature-panel/feature-card'
+import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
+import type { OnFeaturesChange } from '@/app/components/base/features/types'
+import { FeatureEnum } from '@/app/components/base/features/types'
+
+type Props = {
+  onChange?: OnFeaturesChange
+}
+
+const MoreLikeThis = ({
+  onChange,
+}: Props) => {
+  const { t } = useTranslation()
+  const features = useFeatures(s => s.features)
+  const featuresStore = useFeaturesStore()
+
+  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 (
+    <FeatureCard
+      icon={
+        <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-blue-light-blue-light-500'>
+          <RiSparklingFill className='w-4 h-4 text-text-primary-on-surface' />
+        </div>
+      }
+      title={t('appDebug.feature.moreLikeThis.title')}
+      tooltip={t('appDebug.feature.moreLikeThis.tip')}
+      value={!!features.moreLikeThis?.enabled}
+      description={t('appDebug.feature.moreLikeThis.description')}
+      onChange={state => handleChange(FeatureEnum.moreLikeThis, state)}
+    />
+  )
+}
+
+export default MoreLikeThis
diff --git a/web/app/components/base/features/new-feature-panel/speech-to-text.tsx b/web/app/components/base/features/new-feature-panel/speech-to-text.tsx
new file mode 100644
index 0000000000..ee2a065243
--- /dev/null
+++ b/web/app/components/base/features/new-feature-panel/speech-to-text.tsx
@@ -0,0 +1,53 @@
+import React, { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import produce from 'immer'
+import { Microphone01 } from '@/app/components/base/icons/src/vender/features'
+import FeatureCard from '@/app/components/base/features/new-feature-panel/feature-card'
+import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
+import type { OnFeaturesChange } from '@/app/components/base/features/types'
+import { FeatureEnum } from '@/app/components/base/features/types'
+
+type Props = {
+  onChange?: OnFeaturesChange
+}
+
+const SpeechToText = ({
+  onChange,
+}: Props) => {
+  const { t } = useTranslation()
+  const features = useFeatures(s => s.features)
+  const featuresStore = useFeaturesStore()
+
+  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 (
+    <FeatureCard
+      icon={
+        <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-violet-violet-600'>
+          <Microphone01 className='w-4 h-4 text-text-primary-on-surface' />
+        </div>
+      }
+      title={t('appDebug.feature.speechToText.title')}
+      value={!!features.speech2text?.enabled}
+      description={t('appDebug.feature.speechToText.description')!}
+      onChange={state => handleChange(FeatureEnum.speech2text, state)}
+    />
+  )
+}
+
+export default SpeechToText
diff --git a/web/app/components/base/features/new-feature-panel/text-to-speech.tsx b/web/app/components/base/features/new-feature-panel/text-to-speech.tsx
new file mode 100644
index 0000000000..5924bb769e
--- /dev/null
+++ b/web/app/components/base/features/new-feature-panel/text-to-speech.tsx
@@ -0,0 +1,95 @@
+import React, { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import produce from 'immer'
+import { RiEqualizer2Line } from '@remixicon/react'
+import { TextToAudio } from '@/app/components/base/icons/src/vender/features'
+import FeatureCard from '@/app/components/base/features/new-feature-panel/feature-card'
+import Button from '@/app/components/base/button'
+import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
+import type { OnFeaturesChange } from '@/app/components/base/features/types'
+import { FeatureEnum } from '@/app/components/base/features/types'
+import { languages } from '@/i18n/language'
+import { TtsAutoPlay } from '@/types/app'
+
+type Props = {
+  onChange?: OnFeaturesChange
+}
+
+const TextToSpeech = ({
+  onChange,
+}: Props) => {
+  const { t } = useTranslation()
+  const textToSpeech = useFeatures(s => s.features.text2speech) // .language .voice .autoPlay
+  const languageInfo = languages.find(i => i.value === textToSpeech?.language)
+  const [isHovering, setIsHovering] = useState(false)
+  const features = useFeatures(s => s.features)
+  const featuresStore = useFeaturesStore()
+
+  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 (
+    <FeatureCard
+      icon={
+        <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-violet-violet-600'>
+          <TextToAudio className='w-4 h-4 text-text-primary-on-surface' />
+        </div>
+      }
+      title={t('appDebug.feature.textToSpeech.title')}
+      value={!!features.text2speech?.enabled}
+      onChange={state => handleChange(FeatureEnum.text2speech, state)}
+      onMouseEnter={() => setIsHovering(true)}
+      onMouseLeave={() => setIsHovering(false)}
+    >
+      <>
+        {!features.text2speech?.enabled && (
+          <div className='min-h-8 text-text-tertiary system-xs-regular line-clamp-2'>{t('appDebug.feature.textToSpeech.description')}</div>
+        )}
+        {!!features.text2speech?.enabled && (
+          <>
+            {!isHovering && (
+              <div className='pt-0.5 flex items-center gap-4'>
+                <div className=''>
+                  <div className='mb-0.5 text-text-tertiary system-2xs-medium-uppercase'>{t('appDebug.voice.voiceSettings.language')}</div>
+                  <div className='text-text-secondary system-xs-regular'>{languageInfo?.name || '-'}</div>
+                </div>
+                <div className='w-px h-[27px] bg-divider-subtle rotate-12'></div>
+                <div className=''>
+                  <div className='mb-0.5 text-text-tertiary system-2xs-medium-uppercase'>{t('appDebug.voice.voiceSettings.voice')}</div>
+                  <div className='text-text-secondary system-xs-regular'>{features.text2speech?.voice || t('appDebug.voice.defaultDisplay')}</div>
+                </div>
+                <div className='w-px h-[27px] bg-divider-subtle rotate-12'></div>
+                <div className=''>
+                  <div className='mb-0.5 text-text-tertiary system-2xs-medium-uppercase'>{t('appDebug.voice.voiceSettings.autoPlay')}</div>
+                  <div className='text-text-secondary system-xs-regular'>{features.text2speech?.autoPlay === TtsAutoPlay.enabled ? t('appDebug.voice.voiceSettings.autoPlayEnabled') : t('appDebug.voice.voiceSettings.autoPlayDisabled')}</div>
+                </div>
+              </div>
+            )}
+            {isHovering && (
+              <Button className='w-full'>
+                <RiEqualizer2Line className='mr-1 w-4 h-4' />
+                {t('appDebug.voice.voiceSettings.title')}
+              </Button>
+            )}
+          </>
+        )}
+      </>
+    </FeatureCard>
+  )
+}
+
+export default TextToSpeech