|
|
|
|
@ -66,11 +66,11 @@ const VoiceParamConfig = ({
|
|
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
<div className='mb-4 flex items-center justify-between'>
|
|
|
|
|
<div className='text-text-primary system-xl-semibold'>{t('appDebug.voice.voiceSettings.title')}</div>
|
|
|
|
|
<div className='p-1 cursor-pointer' onClick={onClose}><RiCloseLine className='w-4 h-4 text-text-tertiary' /></div>
|
|
|
|
|
<div className='system-xl-semibold text-text-primary'>{t('appDebug.voice.voiceSettings.title')}</div>
|
|
|
|
|
<div className='cursor-pointer p-1' onClick={onClose}><RiCloseLine className='h-4 w-4 text-text-tertiary' /></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div className='mb-3'>
|
|
|
|
|
<div className='mb-1 py-1 flex items-center text-text-secondary system-sm-semibold'>
|
|
|
|
|
<div className='system-sm-semibold mb-1 flex items-center py-1 text-text-secondary'>
|
|
|
|
|
{t('appDebug.voice.voiceSettings.language')}
|
|
|
|
|
<Tooltip
|
|
|
|
|
popupContent={
|
|
|
|
|
@ -93,7 +93,7 @@ const VoiceParamConfig = ({
|
|
|
|
|
>
|
|
|
|
|
<div className='relative h-8'>
|
|
|
|
|
<ListboxButton
|
|
|
|
|
className={'w-full h-full rounded-lg border-0 bg-components-input-bg-normal py-1.5 pl-3 pr-10 sm:text-sm sm:leading-6 focus-visible:outline-none focus-visible:bg-state-base-hover group-hover:bg-state-base-hover cursor-pointer'}>
|
|
|
|
|
className={'h-full w-full cursor-pointer rounded-lg border-0 bg-components-input-bg-normal py-1.5 pl-3 pr-10 focus-visible:bg-state-base-hover focus-visible:outline-none group-hover:bg-state-base-hover sm:text-sm sm:leading-6'}>
|
|
|
|
|
<span className={classNames('block truncate text-left text-text-secondary', !languageItem?.name && 'text-text-tertiary')}>
|
|
|
|
|
{languageItem?.name ? t(`common.voice.language.${languageItem?.value.replace('-', '')}`) : localLanguagePlaceholder}
|
|
|
|
|
</span>
|
|
|
|
|
@ -112,11 +112,11 @@ const VoiceParamConfig = ({
|
|
|
|
|
>
|
|
|
|
|
|
|
|
|
|
<ListboxOptions
|
|
|
|
|
className="absolute z-10 mt-1 px-1 max-h-60 w-full overflow-auto rounded-md bg-components-panel-bg py-1 text-base shadow-lg border-components-panel-border border-[0.5px] focus:outline-none sm:text-sm">
|
|
|
|
|
className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md border-[0.5px] border-components-panel-border bg-components-panel-bg px-1 py-1 text-base shadow-lg focus:outline-none sm:text-sm">
|
|
|
|
|
{languages.map((item: Item) => (
|
|
|
|
|
<ListboxOption
|
|
|
|
|
key={item.value}
|
|
|
|
|
className='relative cursor-pointer select-none py-2 pl-3 pr-9 rounded-lg hover:bg-state-base-hover text-text-secondary data-[active]:bg-state-base-active'
|
|
|
|
|
className='relative cursor-pointer select-none rounded-lg py-2 pl-3 pr-9 text-text-secondary hover:bg-state-base-hover data-[active]:bg-state-base-active'
|
|
|
|
|
value={item}
|
|
|
|
|
disabled={false}
|
|
|
|
|
>
|
|
|
|
|
@ -135,15 +135,15 @@ const VoiceParamConfig = ({
|
|
|
|
|
)}
|
|
|
|
|
</>
|
|
|
|
|
)}
|
|
|
|
|
</ListboxOption >
|
|
|
|
|
</ListboxOption>
|
|
|
|
|
))}
|
|
|
|
|
</ListboxOptions >
|
|
|
|
|
</Transition >
|
|
|
|
|
</ListboxOptions>
|
|
|
|
|
</Transition>
|
|
|
|
|
</div >
|
|
|
|
|
</Listbox >
|
|
|
|
|
</div >
|
|
|
|
|
<div className='mb-3'>
|
|
|
|
|
<div className='mb-1 py-1 text-text-secondary system-sm-semibold'>
|
|
|
|
|
<div className='system-sm-semibold mb-1 py-1 text-text-secondary'>
|
|
|
|
|
{t('appDebug.voice.voiceSettings.voice')}
|
|
|
|
|
</div>
|
|
|
|
|
<div className='flex items-center gap-1'>
|
|
|
|
|
@ -156,9 +156,9 @@ const VoiceParamConfig = ({
|
|
|
|
|
})
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<div className={'grow relative h-8'}>
|
|
|
|
|
<div className={'relative h-8 grow'}>
|
|
|
|
|
<ListboxButton
|
|
|
|
|
className={'w-full h-full rounded-lg border-0 bg-components-input-bg-normal py-1.5 pl-3 pr-10 sm:text-sm sm:leading-6 focus-visible:outline-none focus-visible:bg-state-base-hover group-hover:bg-state-base-hover cursor-pointer'}>
|
|
|
|
|
className={'h-full w-full cursor-pointer rounded-lg border-0 bg-components-input-bg-normal py-1.5 pl-3 pr-10 focus-visible:bg-state-base-hover focus-visible:outline-none group-hover:bg-state-base-hover sm:text-sm sm:leading-6'}>
|
|
|
|
|
<span
|
|
|
|
|
className={classNames('block truncate text-left text-text-secondary', !voiceItem?.name && 'text-text-tertiary')}>{voiceItem?.name ?? localVoicePlaceholder}</span>
|
|
|
|
|
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
|
|
|
|
|
@ -176,35 +176,36 @@ const VoiceParamConfig = ({
|
|
|
|
|
>
|
|
|
|
|
|
|
|
|
|
<ListboxOptions
|
|
|
|
|
className="absolute z-10 mt-1 px-1 max-h-60 w-full overflow-auto rounded-md bg-components-panel-bg py-1 text-base shadow-lg border-components-panel-border border-[0.5px] focus:outline-none sm:text-sm">
|
|
|
|
|
className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md border-[0.5px] border-components-panel-border bg-components-panel-bg px-1 py-1 text-base shadow-lg focus:outline-none sm:text-sm">
|
|
|
|
|
{voiceItems?.map((item: Item) => (
|
|
|
|
|
<ListboxOption
|
|
|
|
|
key={item.value}
|
|
|
|
|
className='relative cursor-pointer select-none py-2 pl-3 pr-9 rounded-lg hover:bg-state-base-hover text-text-secondary data-[active]:bg-state-base-active'
|
|
|
|
|
className='relative cursor-pointer select-none rounded-lg py-2 pl-3 pr-9 text-text-secondary hover:bg-state-base-hover data-[active]:bg-state-base-active'
|
|
|
|
|
value={item}
|
|
|
|
|
disabled={false}
|
|
|
|
|
>
|
|
|
|
|
<>
|
|
|
|
|
<span className={classNames('block', selected && 'font-normal')}>{item.name}</span>
|
|
|
|
|
{(selected || item.value === text2speech?.voice) && (
|
|
|
|
|
<span
|
|
|
|
|
className={classNames(
|
|
|
|
|
'absolute inset-y-0 right-0 flex items-center pr-4 text-text-secondary',
|
|
|
|
|
)}
|
|
|
|
|
>
|
|
|
|
|
<CheckIcon className="h-4 w-4" aria-hidden="true" />
|
|
|
|
|
</span>
|
|
|
|
|
)}
|
|
|
|
|
</>
|
|
|
|
|
{({ /* active, */ selected }) => (
|
|
|
|
|
<>
|
|
|
|
|
<span className={classNames('block', selected && 'font-normal')}>{item.name}</span>
|
|
|
|
|
{(selected || item.value === text2speech?.voice) && (
|
|
|
|
|
<span
|
|
|
|
|
className={classNames(
|
|
|
|
|
'absolute inset-y-0 right-0 flex items-center pr-4 text-text-secondary',
|
|
|
|
|
)}
|
|
|
|
|
>
|
|
|
|
|
<CheckIcon className="h-4 w-4" aria-hidden="true" />
|
|
|
|
|
</span>
|
|
|
|
|
)}
|
|
|
|
|
</>
|
|
|
|
|
)}
|
|
|
|
|
</ListboxOption >
|
|
|
|
|
</ListboxOption>
|
|
|
|
|
))}
|
|
|
|
|
</ListboxOptions >
|
|
|
|
|
</Transition >
|
|
|
|
|
</ListboxOptions>
|
|
|
|
|
</Transition>
|
|
|
|
|
</div >
|
|
|
|
|
</Listbox >
|
|
|
|
|
{languageItem?.example && (
|
|
|
|
|
<div className='shrink-0 h-8 p-1 rounded-lg bg-components-button-tertiary-bg'>
|
|
|
|
|
<div className='h-8 shrink-0 rounded-lg bg-components-button-tertiary-bg p-1'>
|
|
|
|
|
<AudioBtn
|
|
|
|
|
value={languageItem?.example}
|
|
|
|
|
isAudition
|
|
|
|
|
@ -216,7 +217,7 @@ const VoiceParamConfig = ({
|
|
|
|
|
</div >
|
|
|
|
|
</div >
|
|
|
|
|
<div>
|
|
|
|
|
<div className='mb-1 py-1 text-text-secondary system-sm-semibold'>
|
|
|
|
|
<div className='system-sm-semibold mb-1 py-1 text-text-secondary'>
|
|
|
|
|
{t('appDebug.voice.voiceSettings.autoPlay')}
|
|
|
|
|
</div>
|
|
|
|
|
<Switch className='shrink-0'
|
|
|
|
|
|