text to speech card

web/app/components/base/features/new-feature-panel/index.tsx

@@ -3,20 +3,27 @@ import { useTranslation } from 'react-i18next'
 import produce from 'immer'
 import {
   RiCloseLine,
+  RiEqualizer2Line,
   RiQuestionLine,
   RiSparklingFill,
 } from '@remixicon/react'
 import {
   Citations,
   Microphone01,
+  TextToAudio,
   VirtualAssistant,
 } 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'
+import { useDefaultModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
+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'
 
 type Props = {
   show: boolean
@@ -28,6 +35,10 @@ type Props = {
 
 const NewFeaturePanel = ({ show, isChatMode, onChange, onClose }: Props) => {
   const { t } = useTranslation()
+  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()
 
@@ -90,7 +101,7 @@ const NewFeaturePanel = ({ show, isChatMode, onChange, onClose }: Props) => {
             </div>
           )}
           {/* speech to text */}
-          {isChatMode && (
+          {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'>
@@ -104,6 +115,49 @@ const NewFeaturePanel = ({ show, isChatMode, onChange, onClose }: Props) => {
               <div className='min-h-8 text-text-tertiary system-xs-regular line-clamp-2'>{t('appDebug.feature.speechToText.description')}</div>
             </div>
           )}
+          {/* text to speech */}
+          {text2speechDefaultModel && (
+            <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>
+                <div className='grow flex items-center text-text-secondary system-sm-semibold'>
+                  {t('appDebug.feature.textToSpeech.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'>

web/i18n/en-US/app-debug.ts

@@ -68,17 +68,17 @@ const translation = {
     },
     speechToText: {
       title: 'Speech to Text',
-      description: 'Once enabled, you can use voice input.',
+      description: 'Voice input can be used in chat.',
       resDes: 'Voice input is enabled',
     },
     textToSpeech: {
       title: 'Text to Speech',
-      description: 'Once enabled, text can be converted to speech.',
+      description: 'Conversation messages can be converted to speech.',
       resDes: 'Text to Audio is enabled',
     },
     citation: {
       title: 'Citations and Attributions',
-      description: 'Once enabled, show source document and attributed section of the generated content.',
+      description: 'Show source document and attributed section of the generated content.',
       resDes: 'Citations and Attributions is enabled',
     },
     annotation: {
@@ -384,8 +384,8 @@ const translation = {
       resolutionTooltip: 'Text-to-speech voice support language。',
       voice: 'Voice',
       autoPlay: 'Auto Play',
-      autoPlayEnabled: 'Turn On',
-      autoPlayDisabled: 'Turn Off',
+      autoPlayEnabled: 'On',
+      autoPlayDisabled: 'Off',
     },
   },
   openingStatement: {

web/i18n/zh-Hans/app-debug.ts

@@ -68,17 +68,17 @@ const translation = {
     },
     speechToText: {
       title: '语音转文字',
-      description: '启用后，您可以使用语音输入。',
+      description: '您可以使用语音输入。',
       resDes: '语音输入已启用',
     },
     textToSpeech: {
       title: '文字转语音',
-      description: '启用后，文本可以转换成语音。',
+      description: '文本可以转换成语音。',
       resDes: '文本转音频已启用',
     },
     citation: {
       title: '引用和归属',
-      description: '启用后，显示源文档和生成内容的归属部分。',
+      description: '显示源文档和生成内容的归属部分。',
       resDes: '引用和归属已启用',
     },
     annotation: {