104 lines
3.6 KiB
TypeScript
104 lines
3.6 KiB
TypeScript
'use client'
|
|
import type { FC } from 'react'
|
|
import React, { useEffect } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import Item from './item'
|
|
import FeaturePanel from '@/app/components/app/configuration/base/feature-panel'
|
|
import { Google, WebReader, Wikipedia } from '@/app/components/base/icons/src/public/plugins'
|
|
import { getToolProviders } from '@/service/explore'
|
|
import Loading from '@/app/components/base/loading'
|
|
import { useModalContext } from '@/context/modal-context'
|
|
|
|
export type IPluginsProps = {
|
|
readonly?: boolean
|
|
config: Record<string, boolean>
|
|
onChange?: (key: string, value: boolean) => void
|
|
}
|
|
|
|
const plugins = [
|
|
{ key: 'google_search', icon: <Google /> },
|
|
{ key: 'web_reader', icon: <WebReader /> },
|
|
{ key: 'wikipedia', icon: <Wikipedia /> },
|
|
] as const
|
|
|
|
const Plugins: FC<IPluginsProps> = ({
|
|
readonly,
|
|
config,
|
|
onChange,
|
|
}) => {
|
|
const { t } = useTranslation()
|
|
const { setShowAccountSettingModal } = useModalContext()
|
|
const [isLoading, setIsLoading] = React.useState(!readonly)
|
|
const [isSerpApiValid, setIsSerpApiValid] = React.useState(false)
|
|
const checkSerpApiKey = async () => {
|
|
if (readonly)
|
|
return
|
|
|
|
const provides: any = await getToolProviders()
|
|
const isSerpApiValid = !!provides.find((v: any) => v.tool_name === 'serpapi' && v.is_enabled)
|
|
setIsSerpApiValid(isSerpApiValid)
|
|
setIsLoading(false)
|
|
}
|
|
useEffect(() => {
|
|
checkSerpApiKey()
|
|
}, [])
|
|
|
|
const itemConfigs = plugins.map((plugin) => {
|
|
const res: Record<string, any> = { ...plugin }
|
|
const { key } = plugin
|
|
res.name = t(`explore.universalChat.plugins.${key}.name`)
|
|
if (key === 'web_reader')
|
|
res.description = t(`explore.universalChat.plugins.${key}.description`)
|
|
|
|
if (key === 'google_search' && !isSerpApiValid && !readonly) {
|
|
res.readonly = true
|
|
res.more = (
|
|
<div className='border-t border-[#FEF0C7] flex items-center h-[34px] pl-2 bg-[#FFFAEB] text-gray-700 text-xs '>
|
|
<span className='whitespace-pre'>{t('explore.universalChat.plugins.google_search.more.left')}</span>
|
|
<span className='cursor-pointer text-[#155EEF]' onClick={() => setShowAccountSettingModal({ payload: 'plugin', onCancelCallback: async () => await checkSerpApiKey() })}>{t('explore.universalChat.plugins.google_search.more.link')}</span>
|
|
<span className='whitespace-pre'>{t('explore.universalChat.plugins.google_search.more.right')}</span>
|
|
</div>
|
|
)
|
|
}
|
|
return res
|
|
})
|
|
|
|
const enabledPluginNum = Object.values(config).filter(v => v).length
|
|
|
|
return (
|
|
<>
|
|
<FeaturePanel
|
|
className='mt-3'
|
|
title={
|
|
<div className='flex space-x-1'>
|
|
<div>{t('explore.universalChat.plugins.name')}</div>
|
|
<div className='text-[13px] font-normal text-gray-500'>({enabledPluginNum}/{plugins.length})</div>
|
|
</div>}
|
|
hasHeaderBottomBorder={false}
|
|
>
|
|
{isLoading
|
|
? (
|
|
<div className='flex items-center h-[166px]'>
|
|
<Loading type='area' />
|
|
</div>
|
|
)
|
|
: (<div className='space-y-2'>
|
|
{itemConfigs.map(item => (
|
|
<Item
|
|
key={item.key}
|
|
icon={item.icon}
|
|
name={item.name}
|
|
description={item.description}
|
|
more={item.more}
|
|
enabled={config[item.key]}
|
|
onChange={enabled => onChange?.(item.key, enabled)}
|
|
readonly={readonly || item.readonly}
|
|
/>
|
|
))}
|
|
</div>)}
|
|
</FeaturePanel>
|
|
</>
|
|
)
|
|
}
|
|
export default React.memo(Plugins)
|