Feature/display selected info for tts (#2454)

web/app/components/app/configuration/base/feature-panel/index.tsx

@@ -43,14 +43,11 @@ const FeaturePanel: FC<IFeaturePanelProps> = ({
             {headerIcon && <div className='flex items-center justify-center w-6 h-6'>{headerIcon}</div>}
             <div className='text-sm font-semibold text-gray-800'>{title}</div>
           </div>
-          <div>
-            {isShowTextToSpeech
-              ? (
-                <div className='flex items-center'>
-                  <ParamsConfig/>
-                </div>
-              )
-              : headerRight}
+          <div className='flex gap-2 items-center'>
+            {headerRight && <div>{headerRight}</div>}
+            {isShowTextToSpeech && <div className='flex items-center'>
+              <ParamsConfig/>
+            </div>}
           </div>
         </div>
       </div>

web/app/components/app/configuration/config-voice/param-config-content.tsx

@@ -13,29 +13,19 @@ import ConfigContext from '@/context/debug-configuration'
 import { fetchAppVoices } from '@/service/apps'
 import Tooltip from '@/app/components/base/tooltip'
 import { HelpCircle } from '@/app/components/base/icons/src/vender/line/general'
-
+import { languages } from '@/utils/language'
 const VoiceParamConfig: FC = () => {
   const { t } = useTranslation()
   const pathname = usePathname()
   const matched = pathname.match(/\/app\/([^/]+)/)
   const appId = (matched?.length && matched[1]) ? matched[1] : ''
 
-  const LanguageItems = [
-    { value: 'zh-Hans', name: 'Chinese' },
-    { value: 'en-US', name: 'English' },
-    { value: 'de-DE', name: 'German' },
-    { value: 'fr-FR', name: 'French' },
-    { value: 'es-ES', name: 'Spanish' },
-    { value: 'it-IT', name: 'Italian' },
-    { value: 'th-TH', name: 'Thai' },
-    { value: 'id-ID', name: 'Indonesian' },
-  ]
   const {
     textToSpeechConfig,
     setTextToSpeechConfig,
   } = useContext(ConfigContext)
 
-  const languageItem = LanguageItems.find(item => item.value === textToSpeechConfig.language)
+  const languageItem = languages.find(item => item.value === textToSpeechConfig.language)
   const localLanguagePlaceholder = languageItem?.name || t('common.placeholder.select')
 
   const voiceItems = useSWR({ url: `/apps/${appId}/text-to-audio/voices?language=${languageItem ? languageItem.value : 'en-US'}` }, fetchAppVoices).data
@@ -87,7 +77,7 @@ const VoiceParamConfig: FC = () => {
                 >
 
                   <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">
-                    {LanguageItems.map((item: Item) => (
+                    {languages.map((item: Item) => (
                       <Listbox.Option
                         key={item.value}
                         className={({ active }) =>

web/app/components/app/configuration/features/chat-group/text-to-speech/index.tsx

@@ -1,12 +1,17 @@
 'use client'
 import React, { type FC } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useContext } from 'use-context-selector'
 import Panel from '@/app/components/app/configuration/base/feature-panel'
 import { Speaker } from '@/app/components/base/icons/src/vender/solid/mediaAndDevices'
+import ConfigContext from '@/context/debug-configuration'
+import { languages } from '@/utils/language'
 
 const TextToSpeech: FC = () => {
   const { t } = useTranslation()
-
+  const {
+    textToSpeechConfig,
+  } = useContext(ConfigContext)
   return (
     <Panel
       title={
@@ -16,7 +21,9 @@ const TextToSpeech: FC = () => {
       }
       headerIcon={<Speaker className='w-4 h-4 text-[#7839EE]' />}
       headerRight={
-        <div className='text-xs text-gray-500'>{t('appDebug.feature.textToSpeech.resDes')}</div>
+        <div className='text-xs text-gray-500'>
+          {languages.find(i => i.value === textToSpeechConfig.language)?.name} {textToSpeechConfig.voice}
+        </div>
       }
       noBodySpacing
       isShowTextToSpeech={true}