feat: chat in explore support agent (#647)
Co-authored-by: StyleZhang <jasonapring2015@outlook.com>
This commit is contained in:
Joel
@@ -0,0 +1,95 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useBoolean } from 'ahooks'
|
||||
import { isEqual } from 'lodash-es'
|
||||
import produce from 'immer'
|
||||
import FeaturePanel from '@/app/components/app/configuration/base/feature-panel'
|
||||
import OperationBtn from '@/app/components/app/configuration/base/operation-btn'
|
||||
import CardItem from '@/app/components/app/configuration/dataset-config/card-item'
|
||||
import SelectDataSet from '@/app/components/app/configuration/dataset-config/select-dataset'
|
||||
import type { DataSet } from '@/models/datasets'
|
||||
|
||||
type Props = {
|
||||
readonly?: boolean
|
||||
dataSets: DataSet[]
|
||||
onChange?: (data: DataSet[]) => void
|
||||
}
|
||||
|
||||
const DatasetConfig: FC<Props> = ({
|
||||
readonly,
|
||||
dataSets,
|
||||
onChange,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
const selectedIds = dataSets.map(item => item.id)
|
||||
|
||||
const hasData = dataSets.length > 0
|
||||
const [isShowSelectDataSet, { setTrue: showSelectDataSet, setFalse: hideSelectDataSet }] = useBoolean(false)
|
||||
const handleSelect = (data: DataSet[]) => {
|
||||
if (isEqual(data.map(item => item.id), dataSets.map(item => item.id))) {
|
||||
hideSelectDataSet()
|
||||
return
|
||||
}
|
||||
|
||||
if (data.find(item => !item.name)) { // has not loaded selected dataset
|
||||
const newSelected = produce(data, (draft) => {
|
||||
data.forEach((item, index) => {
|
||||
if (!item.name) { // not fetched database
|
||||
const newItem = dataSets.find(i => i.id === item.id)
|
||||
if (newItem)
|
||||
draft[index] = newItem
|
||||
}
|
||||
})
|
||||
})
|
||||
onChange?.(newSelected)
|
||||
}
|
||||
else {
|
||||
onChange?.(data)
|
||||
}
|
||||
hideSelectDataSet()
|
||||
}
|
||||
const onRemove = (id: string) => {
|
||||
onChange?.(dataSets.filter(item => item.id !== id))
|
||||
}
|
||||
|
||||
return (
|
||||
<FeaturePanel
|
||||
className='mt-3'
|
||||
title={t('appDebug.feature.dataSet.title')}
|
||||
headerRight={!readonly && <OperationBtn type="add" onClick={showSelectDataSet} />}
|
||||
hasHeaderBottomBorder={!hasData}
|
||||
>
|
||||
{hasData
|
||||
? (
|
||||
<div className='max-h-[220px] overflow-y-auto'>
|
||||
{dataSets.map(item => (
|
||||
<CardItem
|
||||
className="mb-2 !w-full"
|
||||
key={item.id}
|
||||
config={item}
|
||||
onRemove={onRemove}
|
||||
readonly={readonly}
|
||||
// TODO: readonly remove btn
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
: (
|
||||
<div className='pt-2 pb-1 text-xs text-gray-500'>{t('appDebug.feature.dataSet.noData')}</div>
|
||||
)}
|
||||
|
||||
{isShowSelectDataSet && (
|
||||
<SelectDataSet
|
||||
isShow={isShowSelectDataSet}
|
||||
onClose={hideSelectDataSet}
|
||||
selectedIds={selectedIds}
|
||||
onSelect={handleSelect}
|
||||
/>
|
||||
)}
|
||||
</FeaturePanel>
|
||||
)
|
||||
}
|
||||
export default React.memo(DatasetConfig)
|
||||
51
web/app/components/explore/universal-chat/config/index.tsx
Normal file
51
web/app/components/explore/universal-chat/config/index.tsx
Normal file
@@ -0,0 +1,51 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
import ModelConfig from './model-config'
|
||||
import DataConfig from './data-config'
|
||||
import PluginConfig from './plugins-config'
|
||||
|
||||
export type IConfigProps = {
|
||||
className?: string
|
||||
readonly?: boolean
|
||||
modelId: string
|
||||
onModelChange?: (modelId: string) => void
|
||||
plugins: Record<string, boolean>
|
||||
onPluginChange?: (key: string, value: boolean) => void
|
||||
dataSets: any[]
|
||||
onDataSetsChange?: (contexts: any[]) => void
|
||||
}
|
||||
|
||||
const Config: FC<IConfigProps> = ({
|
||||
className,
|
||||
readonly,
|
||||
modelId,
|
||||
onModelChange,
|
||||
plugins,
|
||||
onPluginChange,
|
||||
dataSets,
|
||||
onDataSetsChange,
|
||||
}) => {
|
||||
return (
|
||||
<div className={className}>
|
||||
<ModelConfig
|
||||
readonly={readonly}
|
||||
modelId={modelId}
|
||||
onChange={onModelChange}
|
||||
/>
|
||||
<PluginConfig
|
||||
readonly={readonly}
|
||||
config={plugins}
|
||||
onChange={onPluginChange}
|
||||
/>
|
||||
{(!readonly || (readonly && dataSets.length > 0)) && (
|
||||
<DataConfig
|
||||
readonly={readonly}
|
||||
dataSets={dataSets}
|
||||
onChange={onDataSetsChange}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default React.memo(Config)
|
||||
@@ -0,0 +1,61 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
import cn from 'classnames'
|
||||
import { useBoolean, useClickAway } from 'ahooks'
|
||||
import { ChevronDownIcon } from '@heroicons/react/24/outline'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import ModelIcon from '@/app/components/app/configuration/config-model/model-icon'
|
||||
import { UNIVERSAL_CHAT_MODEL_LIST as MODEL_LIST } from '@/config'
|
||||
import { Checked as CheckedIcon } from '@/app/components/base/icons/src/public/model'
|
||||
export type IModelConfigProps = {
|
||||
modelId: string
|
||||
onChange?: (model: string) => void
|
||||
readonly?: boolean
|
||||
}
|
||||
|
||||
const ModelConfig: FC<IModelConfigProps> = ({
|
||||
modelId,
|
||||
onChange,
|
||||
readonly,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
const currModel = MODEL_LIST.find(item => item.id === modelId)
|
||||
const [isShowOption, { setFalse: hideOption, toggle: toogleOption }] = useBoolean(false)
|
||||
const triggerRef = React.useRef(null)
|
||||
useClickAway(() => {
|
||||
hideOption()
|
||||
}, triggerRef)
|
||||
|
||||
return (
|
||||
<div className='flex items-center justify-between h-[52px] px-3 rounded-xl bg-gray-50'>
|
||||
<div className='text-sm font-semibold text-gray-800'>{t('explore.universalChat.model')}</div>
|
||||
<div className="relative z-10">
|
||||
<div
|
||||
ref={triggerRef}
|
||||
onClick={() => !readonly && toogleOption()}
|
||||
className={cn(
|
||||
readonly ? 'cursor-not-allowed' : 'cursor-pointer', 'flex items-center h-9 px-3 space-x-2 rounded-lg',
|
||||
isShowOption && 'bg-gray-100',
|
||||
)}>
|
||||
<ModelIcon modelId={currModel?.id as string} />
|
||||
<div className="text-sm gray-900">{currModel?.name}</div>
|
||||
{!readonly && <ChevronDownIcon className={cn(isShowOption && 'rotate-180', 'w-[14px] h-[14px] text-gray-500')} />}
|
||||
</div>
|
||||
{isShowOption && (
|
||||
<div className={cn('absolute top-10 right-0 bg-white rounded-lg shadow')}>
|
||||
{MODEL_LIST.map(item => (
|
||||
<div key={item.id} onClick={() => onChange?.(item.id)} className="w-[232px] flex items-center h-9 px-4 rounded-lg cursor-pointer hover:bg-gray-100">
|
||||
<ModelIcon className='shrink-0 mr-2' modelId={item?.id} />
|
||||
<div className="text-sm gray-900 whitespace-nowrap">{item.name}</div>
|
||||
{(item.id === currModel?.id) && <CheckedIcon className='absolute right-4' />}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default React.memo(ModelConfig)
|
||||
@@ -0,0 +1,111 @@
|
||||
'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 AccountSetting from '@/app/components/header/account-setting'
|
||||
|
||||
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 /> },
|
||||
]
|
||||
const Plugins: FC<IPluginsProps> = ({
|
||||
readonly,
|
||||
config,
|
||||
onChange,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
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 [showSetSerpAPIKeyModal, setShowSetAPIKeyModal] = React.useState(false)
|
||||
|
||||
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={() => setShowSetAPIKeyModal(true)}>{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>
|
||||
{
|
||||
showSetSerpAPIKeyModal && (
|
||||
<AccountSetting activeTab="plugin" onCancel={async () => {
|
||||
setShowSetAPIKeyModal(false)
|
||||
await checkSerpApiKey()
|
||||
}} />
|
||||
)
|
||||
}
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default React.memo(Plugins)
|
||||
@@ -0,0 +1,3 @@
|
||||
.shadow {
|
||||
box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
import cn from 'classnames'
|
||||
import s from './item.module.css'
|
||||
import Switch from '@/app/components/base/switch'
|
||||
|
||||
export type IItemProps = {
|
||||
icon: React.ReactNode
|
||||
name: string
|
||||
description?: string
|
||||
more?: React.ReactNode
|
||||
enabled: boolean
|
||||
onChange: (enabled: boolean) => void
|
||||
readonly?: boolean
|
||||
}
|
||||
|
||||
const Item: FC<IItemProps> = ({
|
||||
icon,
|
||||
name,
|
||||
description,
|
||||
more,
|
||||
enabled,
|
||||
onChange,
|
||||
readonly,
|
||||
}) => {
|
||||
return (
|
||||
<div className={cn('bg-white rounded-xl border border-gray-200 overflow-hidden', s.shadow)}>
|
||||
<div className='flex justify-between items-center min-h-[48px] px-2'>
|
||||
<div className='flex items-center space-x-2'>
|
||||
{icon}
|
||||
<div className='leading-[18px]'>
|
||||
<div className='text-[13px] font-medium text-gray-800'>{name}</div>
|
||||
{description && <div className='text-xs leading-[18px] text-gray-500'>{description}</div>}
|
||||
</div>
|
||||
</div>
|
||||
<Switch size='md' defaultValue={enabled} onChange={onChange} disabled={readonly} />
|
||||
</div>
|
||||
{more}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default React.memo(Item)
|
||||
Reference in New Issue
Block a user