From 0b94218378a23cc6416361971c8d9989adf63fe6 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Wed, 4 Sep 2024 11:43:09 +0800
Subject: [PATCH] remove unused components

---
 .../base/feature-panel/index.tsx              |   6 -
 .../config-voice/param-config-content.tsx     | 220 ------------------
 .../config-voice/param-config.tsx             |  41 ----
 3 files changed, 267 deletions(-)
 delete mode 100644 web/app/components/app/configuration/config-voice/param-config-content.tsx
 delete mode 100644 web/app/components/app/configuration/config-voice/param-config.tsx

diff --git a/web/app/components/app/configuration/base/feature-panel/index.tsx b/web/app/components/app/configuration/base/feature-panel/index.tsx
index 1f6db9dee6..badb2d45f4 100644
--- a/web/app/components/app/configuration/base/feature-panel/index.tsx
+++ b/web/app/components/app/configuration/base/feature-panel/index.tsx
@@ -2,7 +2,6 @@
 import type { FC, ReactNode } from 'react'
 import React from 'react'
 import cn from '@/utils/classnames'
-import ParamsConfig from '@/app/components/app/configuration/config-voice/param-config'
 
 export type IFeaturePanelProps = {
   className?: string
@@ -13,7 +12,6 @@ export type IFeaturePanelProps = {
   isFocus?: boolean
   noBodySpacing?: boolean
   children?: ReactNode
-  isShowTextToSpeech?: boolean
 }
 
 const FeaturePanel: FC<IFeaturePanelProps> = ({
@@ -25,7 +23,6 @@ const FeaturePanel: FC<IFeaturePanelProps> = ({
   isFocus,
   noBodySpacing,
   children,
-  isShowTextToSpeech,
 }) => {
   return (
     <div
@@ -45,9 +42,6 @@ const FeaturePanel: FC<IFeaturePanelProps> = ({
           </div>
           <div className='flex gap-2 items-center'>
             {headerRight && <div>{headerRight}</div>}
-            {isShowTextToSpeech && <div className='flex items-center'>
-              <ParamsConfig />
-            </div>}
           </div>
         </div>
       </div>
diff --git a/web/app/components/app/configuration/config-voice/param-config-content.tsx b/web/app/components/app/configuration/config-voice/param-config-content.tsx
deleted file mode 100644
index 4e70bdda21..0000000000
--- a/web/app/components/app/configuration/config-voice/param-config-content.tsx
+++ /dev/null
@@ -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)
diff --git a/web/app/components/app/configuration/config-voice/param-config.tsx b/web/app/components/app/configuration/config-voice/param-config.tsx
deleted file mode 100644
index f1e2475495..0000000000
--- a/web/app/components/app/configuration/config-voice/param-config.tsx
+++ /dev/null
@@ -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)