447 lines
15 KiB
TypeScript
447 lines
15 KiB
TypeScript
import { type FC, type ReactNode, useEffect, useRef, useState, forwardRef, useImperativeHandle } from 'react';
|
|
import clsx from 'clsx'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { useParams } from 'react-router-dom';
|
|
import { Row, Col, Space, Form, Input, Switch, Button, App, Spin } from 'antd'
|
|
import Chat from './components/Chat'
|
|
import RbCard from '@/components/RbCard/Card'
|
|
import Card from './components/Card'
|
|
import ModelConfigModal from './components/ModelConfigModal'
|
|
import type {
|
|
ModelConfigModalRef,
|
|
ChatData,
|
|
Config,
|
|
ModelConfig,
|
|
AgentRef,
|
|
KnowledgeBase,
|
|
KnowledgeConfig,
|
|
Variable,
|
|
MemoryConfig,
|
|
} from './types'
|
|
import type { Model } from '@/views/ModelManagement/types'
|
|
import { getModelList } from '@/api/models';
|
|
import { saveAgentConfig } from '@/api/application'
|
|
import Knowledge from './components/Knowledge'
|
|
import VariableList from './components/VariableList'
|
|
import { getApplicationConfig } from '@/api/application'
|
|
import { getKnowledgeBaseList } from '@/api/knowledgeBase'
|
|
import { memoryConfigListUrl } from '@/api/memory'
|
|
import CustomSelect from '@/components/CustomSelect'
|
|
|
|
|
|
|
|
const DescWrapper: FC<{desc: string, className?: string}> = ({desc, className}) => {
|
|
return (
|
|
<div className={clsx(className, "rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:leading-[16px] ")}>
|
|
{desc}
|
|
</div>
|
|
)
|
|
}
|
|
const LabelWrapper: FC<{title: string, className?: string; children?: ReactNode}> = ({title, className, children}) => {
|
|
return (
|
|
<div className={clsx(className, "rb:text-[14px] rb:font-medium rb:leading-[20px]")}>
|
|
{title}
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|
|
const SwitchWrapper: FC<{ title: string, desc: string, name: string }> = ({ title, desc, name }) => {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<div className="rb:flex rb:items-center rb:justify-between">
|
|
<LabelWrapper title={t(`application.${title}`)}>
|
|
<DescWrapper desc={t(`application.${desc}`)} className="rb:mt-[8px]" />
|
|
</LabelWrapper>
|
|
<Form.Item
|
|
name={name}
|
|
valuePropName="checked"
|
|
className="rb:mb-[0px]!"
|
|
>
|
|
<Switch />
|
|
</Form.Item>
|
|
</div>
|
|
)
|
|
}
|
|
const SelectWrapper: FC<{ title: string, desc: string, name: string, url: string }> = ({ title, desc, name, url }) => {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<>
|
|
<LabelWrapper title={t(`application.${title}`)} className="rb:mb-[8px]">
|
|
</LabelWrapper>
|
|
<Form.Item
|
|
name={name}
|
|
className="rb:mb-[0px]!"
|
|
>
|
|
<CustomSelect
|
|
url={url}
|
|
hasAll={false}
|
|
valueKey='config_id'
|
|
labelKey="config_name"
|
|
/>
|
|
</Form.Item>
|
|
<DescWrapper desc={t(`application.${desc}`)} className="rb:mt-[8px]" />
|
|
</>
|
|
)
|
|
}
|
|
|
|
const Agent = forwardRef<AgentRef>((_props, ref) => {
|
|
const { t } = useTranslation()
|
|
const { id } = useParams();
|
|
const { message } = App.useApp()
|
|
const [form] = Form.useForm()
|
|
const [loading, setLoading] = useState(false)
|
|
const [data, setData] = useState<Config | null>(null);
|
|
const modelConfigModalRef = useRef<ModelConfigModalRef>(null)
|
|
const [modelList, setModelList] = useState<Model[]>([])
|
|
const [defaultModel, setDefaultModel] = useState<Model | null>(null)
|
|
const [chatList, setChatList] = useState<ChatData[]>([])
|
|
const [formData, setFormData] = useState<{
|
|
default_model_config_id?: string,
|
|
model_parameters?: Config['model_parameters'],
|
|
} | null>(null)
|
|
const values = Form.useWatch<{
|
|
memoryEnabled: boolean;
|
|
memory_content?: string | number;
|
|
webSearch: boolean;
|
|
} & Config>([], form)
|
|
|
|
const [knowledgeConfig, setKnowledgeConfig] = useState<KnowledgeConfig>({ knowledge_bases: [] })
|
|
const [variableList, setVariableList] = useState<Variable[]>([])
|
|
const [isSave, setIsSave] = useState(false)
|
|
const initialized = useRef(false)
|
|
|
|
// 初始化完成标记
|
|
useEffect(() => {
|
|
if (data && values && formData) {
|
|
initialized.current = true
|
|
}
|
|
}, [data, values, formData])
|
|
|
|
useEffect(() => {
|
|
if (!initialized.current) return
|
|
if (isSave) return
|
|
setIsSave(true)
|
|
}, [knowledgeConfig])
|
|
useEffect(() => {
|
|
if (!initialized.current) return
|
|
if (isSave) return
|
|
setIsSave(true)
|
|
}, [variableList])
|
|
useEffect(() => {
|
|
if (!initialized.current) return
|
|
if (isSave) return
|
|
setIsSave(true)
|
|
}, [formData])
|
|
useEffect(() => {
|
|
if (!initialized.current) return
|
|
if (isSave) return
|
|
setIsSave(true)
|
|
}, [values])
|
|
|
|
useEffect(() => {
|
|
getModels()
|
|
getData()
|
|
}, [])
|
|
|
|
const getData = () => {
|
|
setLoading(true)
|
|
getApplicationConfig(id as string).then(res => {
|
|
const response = res as Config
|
|
setData(response)
|
|
const { memory, tools } = response
|
|
form.setFieldsValue({
|
|
...response,
|
|
memoryEnabled: memory?.enabled || false,
|
|
memory_content: memory?.memory_content ? Number(memory?.memory_content) : undefined,
|
|
webSearch: tools?.web_search?.enabled || false,
|
|
})
|
|
setFormData({
|
|
default_model_config_id: response.default_model_config_id,
|
|
model_parameters: response.model_parameters || {},
|
|
})
|
|
if (response?.knowledge_retrieval?.knowledge_bases?.length) {
|
|
getDefaultKnowledgeList(response)
|
|
}
|
|
}).finally(() => {
|
|
setLoading(false)
|
|
})
|
|
}
|
|
const getDefaultKnowledgeList = (data: Config) => {
|
|
if (!data || !data.knowledge_retrieval || !data.knowledge_retrieval?.knowledge_bases?.length) {
|
|
return
|
|
}
|
|
const initialList = [...(data?.knowledge_retrieval?.knowledge_bases || [])]
|
|
getKnowledgeBaseList(undefined, {
|
|
kb_ids: initialList.map(vo => vo.kb_id).join(','),
|
|
page: 1,
|
|
pagesize: 100,
|
|
})
|
|
.then(res => {
|
|
const list = res.items || []
|
|
const knowledge_bases: KnowledgeBase[] = list.map(item => {
|
|
const filterItem = initialList.find(vo => vo.kb_id === item.id)
|
|
return {
|
|
...item,
|
|
...filterItem
|
|
}
|
|
})
|
|
setData((prev) => {
|
|
prev = prev as Config
|
|
const knowledge_retrieval: KnowledgeConfig = {
|
|
...(prev?.knowledge_retrieval || {}),
|
|
knowledge_bases: [...knowledge_bases]
|
|
}
|
|
return {
|
|
...(prev || {}),
|
|
knowledge_retrieval
|
|
}
|
|
})
|
|
})
|
|
}
|
|
|
|
const refresh = (vo: ModelConfig, type: 'model' | 'chat') => {
|
|
if (type === 'model') {
|
|
const { default_model_config_id, ...rest } = vo
|
|
form.setFieldsValue({
|
|
default_model_config_id,
|
|
model_parameters: {...rest}
|
|
})
|
|
setFormData((prevState) => {
|
|
const prev = prevState as Config
|
|
return {
|
|
...(prev || {}),
|
|
default_model_config_id,
|
|
model_parameters: {...rest}
|
|
};
|
|
})
|
|
if (default_model_config_id === formData?.default_model_config_id) {
|
|
setChatList([{
|
|
label: vo.label || '',
|
|
model_config_id: default_model_config_id || '',
|
|
model_parameters: {...rest},
|
|
list: []
|
|
}])
|
|
}
|
|
} else if (type === 'chat') {
|
|
if (chatList.length >= 4) {
|
|
message.warning(t('application.maxChatCount'))
|
|
return
|
|
}
|
|
const { label, default_model_config_id, ...reset } = vo
|
|
|
|
setChatList((prev: ChatData[]) => {
|
|
const newChatItem: ChatData = {
|
|
label,
|
|
model_config_id: default_model_config_id || '',
|
|
model_parameters: {...reset},
|
|
list: []
|
|
};
|
|
return [
|
|
...(prev || []).map(item => ({
|
|
...item,
|
|
list: []
|
|
})),
|
|
newChatItem
|
|
];
|
|
})
|
|
}
|
|
}
|
|
|
|
const handleModelConfig = () => {
|
|
modelConfigModalRef.current?.handleOpen('model')
|
|
}
|
|
const handleClearDebugging = () => {
|
|
setChatList([])
|
|
}
|
|
|
|
// 保存Agent配置
|
|
const handleSave = (flag = true) => {
|
|
if (!isSave || !data) return Promise.resolve()
|
|
const { memoryEnabled, memory_content, webSearch, ...rest } = values
|
|
const { knowledge_bases = [], ...knowledgeRest } = knowledgeConfig || {}
|
|
|
|
// 从原数据中获取memory的其他必要属性
|
|
const originalMemory = data.memory || ({} as MemoryConfig)
|
|
|
|
const params: Config = {
|
|
...data,
|
|
...rest,
|
|
...(formData || {}),
|
|
memory: {
|
|
...originalMemory,
|
|
enabled: memoryEnabled,
|
|
memory_content: memory_content ? String(memory_content) : '',
|
|
max_history: originalMemory.max_history || '',
|
|
},
|
|
variables: variableList || [],
|
|
knowledge_retrieval: knowledge_bases.length > 0 ? {
|
|
...data.knowledge_retrieval,
|
|
...knowledgeRest,
|
|
knowledge_bases: knowledge_bases.map(item => ({
|
|
kb_id: item.id,
|
|
...(item.config || {})
|
|
}))
|
|
} as KnowledgeConfig : null,
|
|
tools: {
|
|
web_search: {
|
|
enabled: webSearch,
|
|
config: {
|
|
web_search: webSearch
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
return new Promise((resolve, reject) => {
|
|
saveAgentConfig(data.app_id, params)
|
|
.then(() => {
|
|
if (flag) {
|
|
message.success(t('common.saveSuccess'))
|
|
}
|
|
setIsSave(false)
|
|
resolve(true)
|
|
}).catch(error => {
|
|
reject(error)
|
|
})
|
|
})
|
|
}
|
|
const getModels = () => {
|
|
const requests = [getModelList({ type: 'llm', pagesize: 100, page: 1 }), getModelList({ type: 'chat', pagesize: 100, page: 1 })]
|
|
Promise.all(requests)
|
|
.then(responses => {
|
|
const [chatRes, modelRes] = responses as { items: Model[] }[]
|
|
const chatList = chatRes.items || []
|
|
const modelList = modelRes.items || []
|
|
setModelList([...chatList, ...modelList])
|
|
})
|
|
}
|
|
const handleAddModel = () => {
|
|
modelConfigModalRef.current?.handleOpen('chat')
|
|
}
|
|
useEffect(() => {
|
|
if (formData?.default_model_config_id && modelList.length > 0) {
|
|
const filterValue = modelList.find(item => item.id === formData.default_model_config_id)
|
|
setDefaultModel(filterValue as Model | null)
|
|
setChatList([{
|
|
label: filterValue?.name || '',
|
|
model_config_id: filterValue?.id || '',
|
|
model_parameters: {...(filterValue?.config || {})} as unknown as ModelConfig,
|
|
list: []
|
|
}])
|
|
}
|
|
}, [modelList, formData?.default_model_config_id])
|
|
|
|
useImperativeHandle(ref, () => ({
|
|
handleSave
|
|
}))
|
|
|
|
return (
|
|
<>
|
|
{loading && <Spin fullscreen></Spin>}
|
|
<Row className="rb:h-[calc(100vh-64px)]">
|
|
<Col span={12} className="rb:h-full rb:overflow-x-auto rb:border-r rb:border-[#DFE4ED] rb:p-[20px_16px_24px_16px]">
|
|
<div className="rb:flex rb:items-center rb:justify-end rb:mb-[20px]">
|
|
<Space size={10}>
|
|
<Button onClick={handleModelConfig} className="rb:group">
|
|
{defaultModel?.name ? <div className="rb:w-[16px] rb:h-[16px] rb:bg-[url('@/assets/images/application/model.svg')] rb:group-hover:bg-[url('@/assets/images/application/model_hover.svg')]"></div> : null}
|
|
{defaultModel?.name || t('application.chooseModel')}
|
|
</Button>
|
|
<Button type="primary" onClick={() => handleSave()}>
|
|
{t('common.save')}
|
|
</Button>
|
|
</Space>
|
|
</div>
|
|
<Form form={form}>
|
|
<Space size={16} direction="vertical" style={{ width: '100%' }}>
|
|
{/* 提示词 */}
|
|
<Card title={t('application.promptConfiguration')}>
|
|
<div className="rb:flex rb:items-center rb:justify-between rb:mb-[11px]">
|
|
<div className="rb:font-medium rb:leading-[20px]">
|
|
{t('application.configuration')}
|
|
<span className="rb:font-regular rb:text-[12px] rb:text-[#5B6167]"> ({t('application.configurationDesc')})</span>
|
|
</div>
|
|
</div>
|
|
|
|
<Form.Item name="system_prompt" className="rb:mb-[0]!">
|
|
<Input.TextArea
|
|
placeholder={t('application.promptPlaceholder')}
|
|
styles={{
|
|
textarea: {
|
|
minHeight: '200px',
|
|
borderRadius: '8px'
|
|
},
|
|
}}
|
|
/>
|
|
</Form.Item>
|
|
</Card>
|
|
|
|
{/* 知识库 */}
|
|
<Knowledge
|
|
data={data?.knowledge_retrieval || { knowledge_bases: [] }}
|
|
onUpdate={setKnowledgeConfig}
|
|
/>
|
|
|
|
{/* 记忆配置 */}
|
|
<Card title={t('application.memoryConfiguration')}>
|
|
<Space size={24} direction='vertical' style={{ width: '100%' }}>
|
|
<SwitchWrapper title="dialogueHistoricalMemory" desc="dialogueHistoricalMemoryDesc" name="memoryEnabled" />
|
|
<SelectWrapper
|
|
title="selectMemoryContent"
|
|
desc="selectMemoryContentDesc"
|
|
name="memory_content"
|
|
url={memoryConfigListUrl}
|
|
/>
|
|
</Space>
|
|
</Card>
|
|
|
|
{/* 变量配置 */}
|
|
<VariableList
|
|
data={data?.variables}
|
|
onUpdate={setVariableList}
|
|
/>
|
|
{/* 工具配置 */}
|
|
<Card title={t('application.toolConfiguration')}>
|
|
<Space size={24} direction='vertical' style={{ width: '100%' }}>
|
|
<SwitchWrapper title="webSearch" desc="webSearchDesc" name="webSearch" />
|
|
{/* <SwitchWrapper title="codeExecutor" desc="codeExecutorDesc" name="codeExecutor" />
|
|
<SwitchWrapper title="imageGeneration" desc="imageGenerationDesc" name="imageGeneration" /> */}
|
|
</Space>
|
|
</Card>
|
|
</Space>
|
|
</Form>
|
|
</Col>
|
|
<Col span={12} className="rb:h-full rb:overflow-x-hidden rb:p-[20px_16px_24px_16px]">
|
|
<div className="rb:flex rb:items-center rb:justify-between rb:mb-[20px]">
|
|
{t('application.debuggingAndPreview')}
|
|
|
|
<Space size={10}>
|
|
<Button type="primary" ghost onClick={handleAddModel}>
|
|
+{t('application.addModel')}
|
|
</Button>
|
|
<div className="rb:w-[32px] rb:h-[32px] rb:cursor-pointer rb:bg-[url('@/assets/images/application/clean.svg')]" onClick={handleClearDebugging}></div>
|
|
</Space>
|
|
</div>
|
|
<RbCard height="calc(100vh - 160px)" bodyClassName="rb:p-[0]! rb:h-full rb:overflow-hidden">
|
|
<Chat
|
|
data={data as Config}
|
|
chatList={chatList}
|
|
updateChatList={setChatList}
|
|
handleSave={handleSave}
|
|
/>
|
|
</RbCard>
|
|
</Col>
|
|
</Row>
|
|
|
|
<ModelConfigModal
|
|
modelList={modelList}
|
|
data={formData as Config}
|
|
chatList={chatList}
|
|
ref={modelConfigModalRef}
|
|
refresh={refresh}
|
|
/>
|
|
</>
|
|
);
|
|
});
|
|
|
|
export default Agent;
|