415 lines
14 KiB
TypeScript
415 lines
14 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,
|
|
MemoryConfig,
|
|
AiPromptModalRef,
|
|
Source,
|
|
ChatVariableConfigModalRef
|
|
} from './types'
|
|
import type { Variable } from './components/VariableList/types'
|
|
import type { KnowledgeConfig } from './components/Knowledge/types'
|
|
import type { ModelListItem } from '@/views/ModelManagement/types'
|
|
import { getModelList } from '@/api/models';
|
|
import { saveAgentConfig } from '@/api/application'
|
|
import Knowledge from './components/Knowledge/Knowledge'
|
|
import VariableList from './components/VariableList/VariableList'
|
|
import { getApplicationConfig } from '@/api/application'
|
|
import { memoryConfigListUrl } from '@/api/memory'
|
|
import CustomSelect from '@/components/CustomSelect'
|
|
import aiPrompt from '@/assets/images/application/aiPrompt.png'
|
|
import AiPromptModal from './components/AiPromptModal'
|
|
import ToolList from './components/ToolList/ToolList'
|
|
import ChatVariableConfigModal from './components/ChatVariableConfigModal';
|
|
|
|
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-4 ")}>
|
|
{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-5")}>
|
|
{title}
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|
|
const SwitchWrapper: FC<{ title: string, desc?: string, name: string | string[]; needTransition?: boolean; }> = ({ title, desc, name, needTransition = true }) => {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<div className="rb:flex rb:items-center rb:justify-between">
|
|
<LabelWrapper title={needTransition ? t(`application.${title}`) : title}>
|
|
{desc && <DescWrapper desc={needTransition ? t(`application.${desc}`) : desc} className="rb:mt-2" />}
|
|
</LabelWrapper>
|
|
<Form.Item
|
|
name={name}
|
|
valuePropName="checked"
|
|
className="rb:mb-0!"
|
|
>
|
|
<Switch />
|
|
</Form.Item>
|
|
</div>
|
|
)
|
|
}
|
|
const SelectWrapper: FC<{ title: string, desc: string, name: string | string[], url: string }> = ({ title, desc, name, url }) => {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<>
|
|
<LabelWrapper title={t(`application.${title}`)} className="rb:mb-2">
|
|
</LabelWrapper>
|
|
<Form.Item
|
|
name={name}
|
|
className="rb:mb-0!"
|
|
>
|
|
<CustomSelect
|
|
placeholder={t('common.pleaseSelect')}
|
|
url={url}
|
|
hasAll={false}
|
|
valueKey='config_id'
|
|
labelKey="config_name"
|
|
/>
|
|
</Form.Item>
|
|
<DescWrapper desc={t(`application.${desc}`)} className="rb:mt-2" />
|
|
</>
|
|
)
|
|
}
|
|
|
|
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<ModelListItem[]>([])
|
|
const [defaultModel, setDefaultModel] = useState<ModelListItem | null>(null)
|
|
const [chatList, setChatList] = useState<ChatData[]>([])
|
|
const values = Form.useWatch<Config>([], form)
|
|
const [isSave, setIsSave] = useState(false)
|
|
const initialized = useRef(false)
|
|
|
|
// 初始化完成标记
|
|
useEffect(() => {
|
|
if (data) {
|
|
initialized.current = true
|
|
}
|
|
}, [data])
|
|
|
|
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
|
|
let allTools = Array.isArray(response.tools) ? response.tools : []
|
|
form.setFieldsValue({
|
|
...response,
|
|
tools: allTools,
|
|
memory: {
|
|
...response.memory,
|
|
memory_content: response.memory?.memory_content ? Number(response.memory?.memory_content) : undefined
|
|
}
|
|
})
|
|
setData({
|
|
...response,
|
|
tools: allTools
|
|
})
|
|
}).finally(() => {
|
|
setLoading(false)
|
|
})
|
|
}
|
|
|
|
const refresh = (vo: ModelConfig, type: Source) => {
|
|
if (type === 'model') {
|
|
const { default_model_config_id, ...rest } = vo
|
|
form.setFieldsValue({
|
|
default_model_config_id,
|
|
model_parameters: {...rest}
|
|
})
|
|
if (default_model_config_id === values?.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,
|
|
conversation_id: undefined,
|
|
list: []
|
|
})),
|
|
newChatItem
|
|
];
|
|
})
|
|
}
|
|
}
|
|
|
|
const handleModelConfig = () => {
|
|
modelConfigModalRef.current?.handleOpen('model')
|
|
}
|
|
const handleClearDebugging = () => {
|
|
setChatList([])
|
|
}
|
|
|
|
// 保存Agent配置
|
|
const handleSave = (flag = true) => {
|
|
if (!isSave || !data) return Promise.resolve()
|
|
const { memory, knowledge_retrieval, tools, ...rest } = values
|
|
const { knowledge_bases = [], ...knowledgeRest } = knowledge_retrieval || {}
|
|
const { memory_content } = memory || {}
|
|
// 从原数据中获取memory的其他必要属性
|
|
const originalMemory = data.memory || ({} as MemoryConfig)
|
|
|
|
const params: Config = {
|
|
...data,
|
|
...rest,
|
|
memory: {
|
|
...originalMemory,
|
|
...memory,
|
|
memory_content: memory_content ? String(memory_content) : '',
|
|
},
|
|
knowledge_retrieval: knowledge_bases.length > 0 ? {
|
|
...data.knowledge_retrieval,
|
|
...knowledgeRest,
|
|
knowledge_bases: knowledge_bases.map(item => ({
|
|
kb_id: item.kb_id || item.id,
|
|
...(item.config || {})
|
|
}))
|
|
} as KnowledgeConfig : null,
|
|
tools: tools.map(vo => ({
|
|
tool_id: vo.tool_id,
|
|
operation: vo.operation,
|
|
enabled: vo.enabled
|
|
}))
|
|
}
|
|
|
|
return new Promise((resolve, reject) => {
|
|
saveAgentConfig(data.app_id, params)
|
|
.then((res) => {
|
|
if (flag) {
|
|
message.success(t('common.saveSuccess'))
|
|
}
|
|
setIsSave(false)
|
|
resolve(res)
|
|
}).catch(error => {
|
|
reject(error)
|
|
})
|
|
})
|
|
}
|
|
const getModels = () => {
|
|
getModelList({ type: 'llm,chat', pagesize: 100, page: 1, is_active: true })
|
|
.then(res => {
|
|
const response = res as { items: ModelListItem[] }
|
|
setModelList(response.items)
|
|
})
|
|
}
|
|
const handleAddModel = () => {
|
|
modelConfigModalRef.current?.handleOpen('chat')
|
|
}
|
|
useEffect(() => {
|
|
if (values?.default_model_config_id && modelList.length > 0) {
|
|
const filterValue = modelList.find(item => item.id === values.default_model_config_id)
|
|
setDefaultModel(filterValue as ModelListItem | null)
|
|
setChatList([{
|
|
label: filterValue?.name || '',
|
|
model_config_id: filterValue?.id || '',
|
|
model_parameters: {...(filterValue?.config || {})} as unknown as ModelConfig,
|
|
list: []
|
|
}])
|
|
}
|
|
}, [modelList, values?.default_model_config_id])
|
|
|
|
useImperativeHandle(ref, () => ({
|
|
handleSave
|
|
}))
|
|
|
|
const aiPromptModalRef = useRef<AiPromptModalRef>(null)
|
|
const handlePrompt = () => {
|
|
aiPromptModalRef.current?.handleOpen()
|
|
}
|
|
const updatePrompt = (value: string) => {
|
|
form.setFieldValue('system_prompt', value)
|
|
const variables = value.match(/\{\{([^}]+)\}\}/g)?.map(match => match.slice(2, -2)) || []
|
|
const uniqueVariables = [...new Set(variables)]
|
|
const newVariableList: Variable[] = uniqueVariables.map((name, index) => ({
|
|
index,
|
|
type: 'text',
|
|
name,
|
|
display_name: name,
|
|
required: false
|
|
}))
|
|
updateVariableList(newVariableList)
|
|
}
|
|
|
|
const updateVariableList = (list: Variable[]) => {
|
|
form.setFieldValue('variables', [...list])
|
|
setChatVariables([...list])
|
|
}
|
|
const chatVariableConfigModalRef = useRef<ChatVariableConfigModalRef>(null)
|
|
const [chatVariables, setChatVariables] = useState<Variable[]>([])
|
|
const handleOpenVariableConfig = () => {
|
|
chatVariableConfigModalRef.current?.handleOpen(chatVariables)
|
|
}
|
|
const handleSaveChatVariable = (values: Variable[]) => {
|
|
setChatVariables(values)
|
|
}
|
|
console.log('values', values)
|
|
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-5">
|
|
<Space size={10}>
|
|
<Button onClick={handleModelConfig} className="rb:group">
|
|
{defaultModel?.name ? <div className="rb:w-4 rb:h-4 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}>
|
|
<Form.Item name="default_model_config_id" hidden noStyle></Form.Item>
|
|
<Form.Item name="model_parameters" hidden noStyle></Form.Item>
|
|
<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-2.75">
|
|
<div className="rb:font-medium rb:leading-5">
|
|
{t('application.configuration')}
|
|
<span className="rb:font-regular rb:text-[12px] rb:text-[#5B6167]"> ({t('application.configurationDesc')})</span>
|
|
</div>
|
|
<Button style={{ padding: '0 8px', height: '24px' }} onClick={handlePrompt}>
|
|
<img src={aiPrompt} className="rb:size-5" />
|
|
{t('application.aiPrompt')}
|
|
</Button>
|
|
</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>
|
|
|
|
<Form.Item name="knowledge_retrieval" noStyle>
|
|
<Knowledge />
|
|
</Form.Item>
|
|
|
|
{/* 记忆配置 */}
|
|
<Card title={t('application.memoryConfiguration')}>
|
|
<Space size={24} direction='vertical' style={{ width: '100%' }}>
|
|
<SwitchWrapper title="dialogueHistoricalMemory" desc="dialogueHistoricalMemoryDesc" name={['memory', 'enabled']} />
|
|
<SelectWrapper
|
|
title="selectMemoryContent"
|
|
desc="selectMemoryContentDesc"
|
|
name={['memory', 'memory_content']}
|
|
url={memoryConfigListUrl}
|
|
/>
|
|
</Space>
|
|
</Card>
|
|
|
|
<Form.Item name="variables">
|
|
<VariableList />
|
|
</Form.Item>
|
|
|
|
{/* 工具配置 */}
|
|
<Form.Item name="tools">
|
|
<ToolList />
|
|
</Form.Item>
|
|
</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-5">
|
|
{t('application.debuggingAndPreview')}
|
|
|
|
<Space size={10}>
|
|
<Button type="primary" ghost onClick={handleOpenVariableConfig}>
|
|
{t('application.variableConfig')}
|
|
</Button>
|
|
<Button type="primary" ghost onClick={handleAddModel}>
|
|
+ {t('application.addModel')}
|
|
</Button>
|
|
<div className="rb:w-8 rb:h-8 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={values}
|
|
ref={modelConfigModalRef}
|
|
refresh={refresh}
|
|
/>
|
|
<AiPromptModal
|
|
ref={aiPromptModalRef}
|
|
defaultModel={defaultModel}
|
|
refresh={updatePrompt}
|
|
/>
|
|
<ChatVariableConfigModal
|
|
ref={chatVariableConfigModalRef}
|
|
refresh={handleSaveChatVariable}
|
|
/>
|
|
</>
|
|
);
|
|
});
|
|
|
|
export default Agent;
|