|  | @@ -0,0 +1,78 @@
 | 
	
		
			
				|  |  | +'use client'
 | 
	
		
			
				|  |  | +import type { FC } from 'react'
 | 
	
		
			
				|  |  | +import React, { useCallback } from 'react'
 | 
	
		
			
				|  |  | +import { useTranslation } from 'react-i18next'
 | 
	
		
			
				|  |  | +import produce from 'immer'
 | 
	
		
			
				|  |  | +import { useContext } from 'use-context-selector'
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +import { Document } from '@/app/components/base/icons/src/vender/features'
 | 
	
		
			
				|  |  | +import Tooltip from '@/app/components/base/tooltip'
 | 
	
		
			
				|  |  | +import ConfigContext from '@/context/debug-configuration'
 | 
	
		
			
				|  |  | +import { SupportUploadFileTypes } from '@/app/components/workflow/types'
 | 
	
		
			
				|  |  | +import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
 | 
	
		
			
				|  |  | +import Switch from '@/app/components/base/switch'
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +const ConfigDocument: FC = () => {
 | 
	
		
			
				|  |  | +  const { t } = useTranslation()
 | 
	
		
			
				|  |  | +  const file = useFeatures(s => s.features.file)
 | 
	
		
			
				|  |  | +  const featuresStore = useFeaturesStore()
 | 
	
		
			
				|  |  | +  const { isShowDocumentConfig } = useContext(ConfigContext)
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +  const isDocumentEnabled = file?.allowed_file_types?.includes(SupportUploadFileTypes.document) ?? false
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +  const handleChange = useCallback((value: boolean) => {
 | 
	
		
			
				|  |  | +    const {
 | 
	
		
			
				|  |  | +      features,
 | 
	
		
			
				|  |  | +      setFeatures,
 | 
	
		
			
				|  |  | +    } = featuresStore!.getState()
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +    const newFeatures = produce(features, (draft) => {
 | 
	
		
			
				|  |  | +      if (value) {
 | 
	
		
			
				|  |  | +        draft.file!.allowed_file_types = Array.from(new Set([
 | 
	
		
			
				|  |  | +          ...(draft.file?.allowed_file_types || []),
 | 
	
		
			
				|  |  | +          SupportUploadFileTypes.document,
 | 
	
		
			
				|  |  | +        ]))
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +      else {
 | 
	
		
			
				|  |  | +        draft.file!.allowed_file_types = draft.file!.allowed_file_types?.filter(
 | 
	
		
			
				|  |  | +          type => type !== SupportUploadFileTypes.document,
 | 
	
		
			
				|  |  | +        )
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +      if (draft.file)
 | 
	
		
			
				|  |  | +        draft.file.enabled = (draft.file.allowed_file_types?.length ?? 0) > 0
 | 
	
		
			
				|  |  | +    })
 | 
	
		
			
				|  |  | +    setFeatures(newFeatures)
 | 
	
		
			
				|  |  | +  }, [featuresStore])
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +  if (!isShowDocumentConfig)
 | 
	
		
			
				|  |  | +    return null
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +  return (
 | 
	
		
			
				|  |  | +    <div className='mt-2 flex items-center gap-2 p-2 rounded-xl border-t-[0.5px] border-l-[0.5px] bg-background-section-burn'>
 | 
	
		
			
				|  |  | +      <div className='shrink-0 p-1'>
 | 
	
		
			
				|  |  | +        <div className='p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-indigo-indigo-600'>
 | 
	
		
			
				|  |  | +          <Document className='w-4 h-4 text-text-primary-on-surface' />
 | 
	
		
			
				|  |  | +        </div>
 | 
	
		
			
				|  |  | +      </div>
 | 
	
		
			
				|  |  | +      <div className='grow flex items-center'>
 | 
	
		
			
				|  |  | +        <div className='mr-1 text-text-secondary system-sm-semibold'>{t('appDebug.feature.documentUpload.title')}</div>
 | 
	
		
			
				|  |  | +        <Tooltip
 | 
	
		
			
				|  |  | +          popupContent={
 | 
	
		
			
				|  |  | +            <div className='w-[180px]' >
 | 
	
		
			
				|  |  | +              {t('appDebug.feature.documentUpload.description')}
 | 
	
		
			
				|  |  | +            </div>
 | 
	
		
			
				|  |  | +          }
 | 
	
		
			
				|  |  | +        />
 | 
	
		
			
				|  |  | +      </div>
 | 
	
		
			
				|  |  | +      <div className='shrink-0 flex items-center'>
 | 
	
		
			
				|  |  | +        <div className='ml-1 mr-3 w-[1px] h-3.5 bg-divider-subtle'></div>
 | 
	
		
			
				|  |  | +        <Switch
 | 
	
		
			
				|  |  | +          defaultValue={isDocumentEnabled}
 | 
	
		
			
				|  |  | +          onChange={handleChange}
 | 
	
		
			
				|  |  | +          size='md'
 | 
	
		
			
				|  |  | +        />
 | 
	
		
			
				|  |  | +      </div>
 | 
	
		
			
				|  |  | +    </div>
 | 
	
		
			
				|  |  | +  )
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +export default React.memo(ConfigDocument)
 |