tts add voice choose (#2391)

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/base/feature-panel/index.tsx

@@ -2,6 +2,7 @@
 import type { FC, ReactNode } from 'react'
 import React from 'react'
 import cn from 'classnames'
+import ParamsConfig from '@/app/components/app/configuration/config-voice/param-config'
 
 export type IFeaturePanelProps = {
   className?: string
@@ -12,6 +13,7 @@ export type IFeaturePanelProps = {
   isFocus?: boolean
   noBodySpacing?: boolean
   children?: ReactNode
+  isShowTextToSpeech?: boolean
 }
 
 const FeaturePanel: FC<IFeaturePanelProps> = ({
@@ -23,6 +25,7 @@ const FeaturePanel: FC<IFeaturePanelProps> = ({
   isFocus,
   noBodySpacing,
   children,
+  isShowTextToSpeech,
 }) => {
   return (
     <div
@@ -41,7 +44,13 @@ const FeaturePanel: FC<IFeaturePanelProps> = ({
             <div className='text-sm font-semibold text-gray-800'>{title}</div>
           </div>
           <div>
-            {headerRight}
+            {isShowTextToSpeech
+              ? (
+                <div className='flex items-center'>
+                  <ParamsConfig/>
+                </div>
+              )
+              : headerRight}
           </div>
         </div>
       </div>

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

@@ -0,0 +1,187 @@
+'use client'
+import useSWR from 'swr'
+import type { FC } from 'react'
+import { useContext } from 'use-context-selector'
+import React, { Fragment } from 'react'
+import classNames from 'classnames'
+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 type { Item } from '@/app/components/base/select'
+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'
+
+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-CN', name: '中文' },
+    { value: 'en-US', name: '英语' },
+    { value: 'de-DE', name: '德语' },
+    { value: 'fr-FR', name: '法语' },
+    { value: 'es-ES', name: '西班牙语' },
+    { value: 'it-IT', name: '意大利语' },
+    { value: 'th-TH', name: '泰语' },
+    { value: 'id-ID', name: '印尼语' },
+  ]
+  const {
+    textToSpeechConfig,
+    setTextToSpeechConfig,
+  } = useContext(ConfigContext)
+
+  const languageItem = LanguageItems.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 : 'zh-CN'}` }, fetchAppVoices).data
+  const voiceItem = voiceItems?.find(item => item.value === textToSpeechConfig.voice)
+  const localVoicePlaceholder = voiceItem?.name || t('common.placeholder.select')
+
+  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 htmlContent={<div className='w-[180px]' >
+                {t('appDebug.voice.voiceSettings.resolutionTooltip').split('\n').map(item => (
+                  <div key={item}>{item}</div>
+                ))}
+              </div>} selector='config-resolution-tooltip'>
+                <HelpCircle className='w-[14px] h-[14px] text-gray-400' />
+              </Tooltip>
+            </div>
+            <Listbox
+              value={languageItem}
+              onChange={(value: Item) => {
+                setTextToSpeechConfig({
+                  ...textToSpeechConfig,
+                  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 ?? 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">
+                    {LanguageItems.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 === textToSpeechConfig.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) => {
+                setTextToSpeechConfig({
+                  ...textToSpeechConfig,
+                  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 === textToSpeechConfig.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>
+    </div>
+  )
+}
+
+export default React.memo(VoiceParamConfig)

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

@@ -0,0 +1,41 @@
+'use client'
+import type { FC } from 'react'
+import { memo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import cn from 'classnames'
+import VoiceParamConfig from './param-config-content'
+import { Settings01 } from '@/app/components/base/icons/src/vender/line/general'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+
+const ParamsConfig: FC = () => {
+  const { t } = useTranslation()
+  const [open, setOpen] = useState(false)
+
+  return (
+    <PortalToFollowElem
+      open={open}
+      onOpenChange={setOpen}
+      placement='bottom-end'
+      offset={{
+        mainAxis: 4,
+      }}
+    >
+      <PortalToFollowElemTrigger onClick={() => 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'>
+          <VoiceParamConfig />
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+export default memo(ParamsConfig)

web/app/components/app/configuration/config/index.tsx

@@ -119,6 +119,8 @@ const Config: FC = () => {
     setTextToSpeech: (value) => {
       setTextToSpeechConfig(produce(textToSpeechConfig, (draft: TextToSpeechConfig) => {
         draft.enabled = value
+        draft.voice = textToSpeechConfig?.voice
+        draft.language = textToSpeechConfig?.language
       }))
     },
     citation: citationConfig.enabled,
@@ -245,6 +247,7 @@ const Config: FC = () => {
         {(isAgent && isChatApp) && (
           <AgentTools />
         )}
+
         <ConfigVision />
 
         {/* Chat History */}

web/app/components/app/configuration/debug/debug-with-multiple-model/text-generation-item.tsx

@@ -61,6 +61,11 @@ const TextGenerationItem: FC<TextGenerationItemProps> = ({
     sensitive_word_avoidance: moderationConfig,
     external_data_tools: externalDataToolsConfig,
     more_like_this: moreLikeThisConfig,
+    text_to_speech: {
+      enabled: false,
+      voice: '',
+      language: '',
+    },
     agent_mode: {
       enabled: false,
       tools: [],

web/app/components/app/configuration/debug/index.tsx

@@ -213,9 +213,6 @@ const Debug: FC<IDebug> = ({
     const contextVar = modelConfig.configs.prompt_variables.find(item => item.is_context_var)?.key
 
     const postModelConfig: BackendModelConfig = {
-      text_to_speech: {
-        enabled: false,
-      },
       pre_prompt: !isAdvancedMode ? modelConfig.configs.prompt_template : '',
       prompt_type: promptMode,
       chat_prompt_config: {},
@@ -234,6 +231,11 @@ const Debug: FC<IDebug> = ({
         mode: modelConfig.mode,
         completion_params: completionParams as any,
       },
+      text_to_speech: {
+        enabled: false,
+        voice: '',
+        language: '',
+      },
       agent_mode: {
         enabled: false,
         tools: [],

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

@@ -19,6 +19,7 @@ const TextToSpeech: FC = () => {
         <div className='text-xs text-gray-500'>{t('appDebug.feature.textToSpeech.resDes')}</div>
       }
       noBodySpacing
+      isShowTextToSpeech={true}
     />
   )
 }

web/app/components/app/configuration/index.tsx

@@ -30,6 +30,7 @@ import type {
   MoreLikeThisConfig,
   PromptConfig,
   PromptVariable,
+  TextToSpeechConfig,
 } from '@/models/debug'
 import type { ExternalDataTool } from '@/models/common'
 import type { DataSet } from '@/models/datasets'
@@ -98,8 +99,10 @@ const Configuration: FC = () => {
   const [speechToTextConfig, setSpeechToTextConfig] = useState<MoreLikeThisConfig>({
     enabled: false,
   })
-  const [textToSpeechConfig, setTextToSpeechConfig] = useState<MoreLikeThisConfig>({
+  const [textToSpeechConfig, setTextToSpeechConfig] = useState<TextToSpeechConfig>({
     enabled: false,
+    voice: '',
+    language: '',
   })
   const [citationConfig, setCitationConfig] = useState<MoreLikeThisConfig>({
     enabled: false,
@@ -246,6 +249,8 @@ const Configuration: FC = () => {
     })
     setTextToSpeechConfig(modelConfig.text_to_speech || {
       enabled: false,
+      voice: '',
+      language: '',
     })
     setCitationConfig(modelConfig.retriever_resource || {
       enabled: false,

web/app/components/base/chat/chat/answer/operation.tsx

@@ -73,7 +73,8 @@ const Operation: FC<OperationProps> = ({
           />
         )
       }
-      {!isOpeningStatement && config?.text_to_speech && (
+
+      {(!isOpeningStatement && config?.text_to_speech.enabled) && (
         <AudioBtn
           value={content}
           className='hidden group-hover:block'