dify/web/app/components/base/features/feature-panel/moderation/index.tsx

import { memo } from 'react'
import { useTranslation } from 'react-i18next'
import useSWR from 'swr'
import produce from 'immer'
import { useContext } from 'use-context-selector'
import {
  useFeatures,
  useFeaturesStore,
} from '../../hooks'
import type { OnFeaturesChange } from '../../types'
import { FileSearch02 } from '@/app/components/base/icons/src/vender/solid/files'
import { Settings01 } from '@/app/components/base/icons/src/vender/line/general'
import { useModalContext } from '@/context/modal-context'
import { fetchCodeBasedExtensionList } from '@/service/common'
import I18n from '@/context/i18n'

type ModerationProps = {
  onChange?: OnFeaturesChange
  disabled?: boolean
}
const Moderation = ({
  onChange,
  disabled,
}: ModerationProps) => {
  const { t } = useTranslation()
  const { setShowModerationSettingModal } = useModalContext()
  const { locale } = useContext(I18n)
  const featuresStore = useFeaturesStore()
  const moderation = useFeatures(s => s.features.moderation)

  const { data: codeBasedExtensionList } = useSWR(
    '/code-based-extension?module=moderation',
    fetchCodeBasedExtensionList,
  )

  const handleOpenModerationSettingModal = () => {
    if (disabled)
      return

    const {
      features,
      setFeatures,
    } = featuresStore!.getState()
    setShowModerationSettingModal({
      payload: moderation as any,
      onSaveCallback: (newModeration) => {
        const newFeatures = produce(features, (draft) => {
          draft.moderation = newModeration
        })
        setFeatures(newFeatures)
        if (onChange)
          onChange(newFeatures)
      },
    })
  }

  const renderInfo = () => {
    let prefix = ''
    let suffix = ''
    if (moderation?.type === 'openai_moderation')
      prefix = t('appDebug.feature.moderation.modal.provider.openai')
    else if (moderation?.type === 'keywords')
      prefix = t('appDebug.feature.moderation.modal.provider.keywords')
    else if (moderation?.type === 'api')
      prefix = t('common.apiBasedExtension.selector.title')
    else
      prefix = codeBasedExtensionList?.data.find(item => item.name === moderation?.type)?.label[locale] || ''

    if (moderation?.config?.inputs_config?.enabled && moderation.config?.outputs_config?.enabled)
      suffix = t('appDebug.feature.moderation.allEnabled')
    else if (moderation?.config?.inputs_config?.enabled)
      suffix = t('appDebug.feature.moderation.inputEnabled')
    else if (moderation?.config?.outputs_config?.enabled)
      suffix = t('appDebug.feature.moderation.outputEnabled')

    return `${prefix} · ${suffix}`
  }

  return (
    <div className='flex items-center px-3 h-12 bg-gray-50 rounded-xl overflow-hidden'>
      <div className='shrink-0 flex items-center justify-center mr-1 w-6 h-6'>
        <FileSearch02 className='shrink-0 w-4 h-4 text-[#039855]' />
      </div>
      <div className='shrink-0 mr-2 whitespace-nowrap text-sm text-gray-800 font-semibold'>
        {t('appDebug.feature.moderation.title')}
      </div>
      <div
        className='grow block w-0 text-right text-xs text-gray-500 truncate'
        title={renderInfo()}>
        {renderInfo()}
      </div>
      <div className='shrink-0 ml-4 mr-1 w-[1px] h-3.5 bg-gray-200'></div>
      <div
        className={`
          shrink-0 flex items-center px-3 h-7 cursor-pointer rounded-md
          text-xs text-gray-700 font-medium hover:bg-gray-200
          ${disabled && '!cursor-not-allowed'}
        `}
        onClick={handleOpenModerationSettingModal}
      >
        <Settings01 className='mr-[5px] w-3.5 h-3.5' />
        {t('common.operation.settings')}
      </div>
    </div>
  )
}

export default memo(Moderation)