mirror of
https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git
synced 2025-08-19 02:25:55 +08:00
remove unused components
This commit is contained in:
JzoNg
parent
97cc9a5615
commit
0b94218378
@ -2,7 +2,6 @@
|
|||||||
import type { FC, ReactNode } from 'react'
|
import type { FC, ReactNode } from 'react'
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import cn from '@/utils/classnames'
|
import cn from '@/utils/classnames'
|
||||||
import ParamsConfig from '@/app/components/app/configuration/config-voice/param-config'
|
|
||||||
|
|
||||||
export type IFeaturePanelProps = {
|
export type IFeaturePanelProps = {
|
||||||
className?: string
|
className?: string
|
||||||
@ -13,7 +12,6 @@ export type IFeaturePanelProps = {
|
|||||||
isFocus?: boolean
|
isFocus?: boolean
|
||||||
noBodySpacing?: boolean
|
noBodySpacing?: boolean
|
||||||
children?: ReactNode
|
children?: ReactNode
|
||||||
isShowTextToSpeech?: boolean
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const FeaturePanel: FC<IFeaturePanelProps> = ({
|
const FeaturePanel: FC<IFeaturePanelProps> = ({
|
||||||
@ -25,7 +23,6 @@ const FeaturePanel: FC<IFeaturePanelProps> = ({
|
|||||||
isFocus,
|
isFocus,
|
||||||
noBodySpacing,
|
noBodySpacing,
|
||||||
children,
|
children,
|
||||||
isShowTextToSpeech,
|
|
||||||
}) => {
|
}) => {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
@ -45,9 +42,6 @@ const FeaturePanel: FC<IFeaturePanelProps> = ({
|
|||||||
</div>
|
</div>
|
||||||
<div className='flex gap-2 items-center'>
|
<div className='flex gap-2 items-center'>
|
||||||
{headerRight && <div>{headerRight}</div>}
|
{headerRight && <div>{headerRight}</div>}
|
||||||
{isShowTextToSpeech && <div className='flex items-center'>
|
|
||||||
<ParamsConfig />
|
|
||||||
</div>}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,220 +0,0 @@
|
|||||||
'use client'
|
|
||||||
import useSWR from 'swr'
|
|
||||||
import type { FC } from 'react'
|
|
||||||
import { useContext } from 'use-context-selector'
|
|
||||||
import React, { Fragment } from 'react'
|
|
||||||
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 classNames from '@/utils/classnames'
|
|
||||||
import RadioGroup from '@/app/components/app/configuration/config-vision/radio-group'
|
|
||||||
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 { languages } from '@/i18n/language'
|
|
||||||
import { TtsAutoPlay } from '@/types/app'
|
|
||||||
const VoiceParamConfig: FC = () => {
|
|
||||||
const { t } = useTranslation()
|
|
||||||
const pathname = usePathname()
|
|
||||||
const matched = pathname.match(/\/app\/([^/]+)/)
|
|
||||||
const appId = (matched?.length && matched[1]) ? matched[1] : ''
|
|
||||||
|
|
||||||
const {
|
|
||||||
textToSpeechConfig,
|
|
||||||
setTextToSpeechConfig,
|
|
||||||
} = useContext(ConfigContext)
|
|
||||||
|
|
||||||
let languageItem = languages.find(item => item.value === textToSpeechConfig.language)
|
|
||||||
const localLanguagePlaceholder = languageItem?.name || t('common.placeholder.select')
|
|
||||||
if (languages && !languageItem && languages.length > 0)
|
|
||||||
languageItem = languages[0]
|
|
||||||
const language = languageItem?.value
|
|
||||||
const voiceItems = useSWR({ appId, language }, fetchAppVoices).data
|
|
||||||
let voiceItem = voiceItems?.find(item => item.value === textToSpeechConfig.voice)
|
|
||||||
if (voiceItems && !voiceItem && voiceItems.length > 0)
|
|
||||||
voiceItem = voiceItems[0]
|
|
||||||
|
|
||||||
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
|
|
||||||
popupContent={
|
|
||||||
<div className='w-[180px]'>
|
|
||||||
{t('appDebug.voice.voiceSettings.resolutionTooltip').split('\n').map(item => (
|
|
||||||
<div key={item}>{item}</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</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 ? t(`common.voice.language.${languageItem?.value.replace('-', '')}`) : 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">
|
|
||||||
{languages.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')}>{t(`common.voice.language.${(item.value).toString().replace('-', '')}`)}</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) => {
|
|
||||||
if (!value.value)
|
|
||||||
return
|
|
||||||
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
|
|
||||||
className='mb-2 leading-[18px] text-[13px] font-semibold text-gray-800'>{t('appDebug.voice.voiceSettings.autoPlay')}</div>
|
|
||||||
<RadioGroup
|
|
||||||
className='space-x-3'
|
|
||||||
options={[
|
|
||||||
{
|
|
||||||
label: t('appDebug.voice.voiceSettings.autoPlayEnabled'),
|
|
||||||
value: TtsAutoPlay.enabled,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: t('appDebug.voice.voiceSettings.autoPlayDisabled'),
|
|
||||||
value: TtsAutoPlay.disabled,
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
value={textToSpeechConfig.autoPlay ? textToSpeechConfig.autoPlay : TtsAutoPlay.disabled}
|
|
||||||
onChange={(value: TtsAutoPlay) => {
|
|
||||||
setTextToSpeechConfig({
|
|
||||||
...textToSpeechConfig,
|
|
||||||
autoPlay: value,
|
|
||||||
})
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default React.memo(VoiceParamConfig)
|
|
||||||
@ -1,41 +0,0 @@
|
|||||||
'use client'
|
|
||||||
import type { FC } from 'react'
|
|
||||||
import { memo, useState } from 'react'
|
|
||||||
import { useTranslation } from 'react-i18next'
|
|
||||||
import VoiceParamConfig from './param-config-content'
|
|
||||||
import cn from '@/utils/classnames'
|
|
||||||
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)
|
|
||||||
Loading…
x
Reference in New Issue
Block a user