Voice audition (#2504)

Co-authored-by: luowei <glpat-EjySCyNjWiLqAED-YmwM>
Co-authored-by: crazywoola <427733928@qq.com>
Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com>

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

@@ -9,6 +9,7 @@ import { Speaker } from '@/app/components/base/icons/src/vender/solid/mediaAndDe
 import ConfigContext from '@/context/debug-configuration'
 import { languages } from '@/utils/language'
 import { fetchAppVoices } from '@/service/apps'
+import AudioBtn from '@/app/components/base/audio-btn'
 
 const TextToSpeech: FC = () => {
   const { t } = useTranslation()
@@ -20,19 +21,28 @@ const TextToSpeech: FC = () => {
   const matched = pathname.match(/\/app\/([^/]+)/)
   const appId = (matched?.length && matched[1]) ? matched[1] : ''
   const language = textToSpeechConfig.language
+  const languageInfo = languages.find(i => i.value === textToSpeechConfig.language)
+
   const voiceItems = useSWR({ appId, language }, fetchAppVoices).data
   const voiceItem = voiceItems?.find(item => item.value === textToSpeechConfig.voice)
+
   return (
     <Panel
       title={
-        <div className='flex items-center gap-2'>
+        <div className='flex items-center'>
           <div>{t('appDebug.feature.textToSpeech.title')}</div>
         </div>
       }
       headerIcon={<Speaker className='w-4 h-4 text-[#7839EE]' />}
       headerRight={
-        <div className='text-xs text-gray-500'>
-          {languages.find(i => i.value === textToSpeechConfig.language)?.name} - {voiceItem?.name ?? t('appDebug.voice.defaultDisplay')}
+        <div className='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}
+              isAudition={true}
+            />
+          )}
         </div>
       }
       noBodySpacing