adai/MemoryBear
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): agent feature add config

Browse Source
This commit is contained in:
zhaoying
2026-03-26 14:18:40 +08:00
parent 4cab6317de
commit 9ae1d2f0d9
13 changed files with 428 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
web/src/views/ApplicationConfig/Agent.tsx
View File

@@ -2,7 +2,7 @@
* @Author: ZhaoYing
* @Date: 2026-02-03 16:29:21
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-03-25 16:32:26
* @Last Modified time: 2026-03-26 12:13:33
*/
import { useEffect, useRef, useState, forwardRef, useImperativeHandle, useMemo } from 'react';
import { useTranslation } from 'react-i18next'
@@ -335,8 +335,24 @@ const Agent = forwardRef<AgentRef, { onFeaturesLoad?: (features: FeaturesConfigF
* Save chat variable configuration
* @param values - Variable values
*/
const handleSaveChatVariable = (values: Variable[]) => {
setChatVariables(values)
const handleSaveChatVariable = (variables: Variable[]) => {
setChatVariables(variables)
const opening_statement = form.getFieldValue(['features', 'opening_statement'])
if (opening_statement?.statement && opening_statement?.statement.trim() !== '') {
const statement = opening_statement.statement as string
const replacedContent = statement.replace(/\{\{([^}]+)\}\}/g, (match, name) => {
const v = variables.find(item => item.name === name)
return v?.value != null && v.value !== '' ? String(v.value) : match
})
setChatList(prev => prev.map(item => {
const list = [...(item.list || [])]
if (list.length > 0 && list[0].role === 'assistant') {
list[0] = { ...list[0], content: replacedContent }
}
return { ...item, list }
}))
}
}
useEffect(() => {
setChatVariables(values?.variables || [])
@@ -344,11 +360,36 @@ const Agent = forwardRef<AgentRef, { onFeaturesLoad?: (features: FeaturesConfigF
const handleSaveFeaturesConfig = (value: FeaturesConfigForm) => {
form.setFieldValue('features', value)
if (value?.opening_statement?.statement && value?.opening_statement?.statement.trim() !== '') {
setChatList(prev => (prev.map(item => {
const firstMsg = item.list?.[0]
if (firstMsg?.role === 'assistant') {
firstMsg.meta_data = {
suggested_questions: value.opening_statement?.suggested_questions || []
}
return item
} else {
return {
...item,
list: [{
role: 'assistant',
content: value.opening_statement?.statement,
meta_data: {
suggested_questions: value.opening_statement?.suggested_questions || []
}
}, ...(item.list || [])]
}
}
})))
}
}
const modelLogo = useMemo(() => {
return defaultModel?.name && getListLogoUrl(defaultModel.provider, defaultModel.logo as string)
}, [defaultModel])
console.log('values', values, defaultModel)
console.log('agent values', values)
return (
<>
{loading && <Spin fullscreen></Spin>}
@@ -365,7 +406,12 @@ const Agent = forwardRef<AgentRef, { onFeaturesLoad?: (features: FeaturesConfigF
{defaultModel?.name || t('application.chooseModel')}
</Button>
<Space size={12}>
<FeaturesConfig value={values?.features as FeaturesConfigForm} capability={values?.capability || []} refresh={handleSaveFeaturesConfig} />
<FeaturesConfig
value={values?.features as FeaturesConfigForm}
capability={values?.capability || []}
refresh={handleSaveFeaturesConfig}
chatVariables={chatVariables}
/>
<Button type="primary" onClick={() => handleSave()}>
{t('common.save')}
</Button>
@@ -393,19 +439,19 @@ const Agent = forwardRef<AgentRef, { onFeaturesLoad?: (features: FeaturesConfigF
<span className="rb:font-regular rb:text-[#5B6167]"> ({t('application.configurationDesc')})</span>
</div>
<Form.Item name="system_prompt" className="rb:mb-0!">
<Input.TextArea
placeholder={t('application.promptPlaceholder')}
styles={{
textarea: {
minHeight: '200px',
borderRadius: '8px',
padding: '12px'
},
}}
/>
</Form.Item>
</Card>
<Form.Item name="system_prompt" className="rb:mb-0!">
<Input.TextArea
placeholder={t('application.promptPlaceholder')}
styles={{
textarea: {
minHeight: '200px',
borderRadius: '8px',
padding: '12px'
},
}}
/>
</Form.Item>
</Card>
<Form.Item name="knowledge_retrieval" noStyle>
<Knowledge />

53
web/src/views/ApplicationConfig/TestChat/index.tsx
View File

@@ -2,7 +2,7 @@
* @Author: ZhaoYing
* @Date: 2026-03-13 17:27:52
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-03-24 10:19:31
* @Last Modified time: 2026-03-26 13:43:02
*/
import { type FC, useState, useRef, useEffect } from 'react'
import { useTranslation } from 'react-i18next'
@@ -88,11 +88,31 @@ const TestChat: FC<TestChatProps> = ({
getVariables()
}, [application, config])
useEffect(() => {
return () => {
audioPollingRef.current.forEach(timer => clearInterval(timer))
audioPollingRef.current.clear()
}
}, [])
const getVariables = () => {
if (!application || !config) return
setFeatures(config?.features || {} as FeaturesConfigForm)
if (config?.features?.opening_statement?.statement && config?.features?.opening_statement?.statement.trim() !== '') {
setChatList(prev => [...prev, {
role: 'assistant',
created_at: Date.now(),
content: config?.features?.opening_statement?.statement,
meta_data: {
suggested_questions: config?.features?.opening_statement?.suggested_questions || []
}
}])
}
let initVariables: Variable[] = []
switch (application.type) {
@@ -142,7 +162,7 @@ const TestChat: FC<TestChatProps> = ({
}])
}
const updateAssistantMessage = (content: string, audio_url?: string) => {
const updateAssistantMessage = (content: string, audio_url?: string, audio_status?: string, citations?: any[]) => {
setChatList(prev => {
const newList = [...prev]
const lastMsg = newList[newList.length - 1]
@@ -150,7 +170,11 @@ const TestChat: FC<TestChatProps> = ({
newList[newList.length - 1] = {
...lastMsg,
content: lastMsg.content + content,
...(audio_url !== undefined ? { meta_data: { ...lastMsg.meta_data, audio_url, audio_status: 'pending' } } : {})
meta_data: {
audio_url: audio_url || lastMsg.meta_data?.audio_url,
audio_status: audio_status || lastMsg.meta_data?.audio_status,
citations: citations || lastMsg.meta_data?.citations
}
}
}
return newList
@@ -188,14 +212,14 @@ const TestChat: FC<TestChatProps> = ({
return { isCanSend, params }
}
const handleSend = () => {
if (loading || !application || !message || !message?.trim()) return
const handleSend = (msg?: string) => {
if (loading || !application || !((message && message?.trim() !== '') || (msg && msg?.trim() !== ''))) return
const files = (toolbarRef.current?.getFiles() || []).filter(item => !['uploading', 'error'].includes(item.status))
const variables = toolbarRef.current?.getVariables() || []
const { isCanSend, params } = buildVariableParams(variables)
if (!isCanSend) return
addUserMessage(message, files)
addUserMessage((msg || message) as string, files)
setMessage(undefined)
toolbarRef.current?.setFiles([])
setFileList([])
@@ -205,7 +229,7 @@ const TestChat: FC<TestChatProps> = ({
draftRun(
application.id,
formatParams(message, conversationId, files, params),
formatParams((msg || message) as string, conversationId, files, params),
handleStreamMessage
)
.catch(() => {
@@ -236,7 +260,15 @@ const TestChat: FC<TestChatProps> = ({
const handleStreamMessage = (data: SSEMessage[]) => {
data.map(item => {
const { conversation_id, content, message_length, audio_url } = item.data as { conversation_id: string, content: string, message_length: number; audio_url?: string; };
const { conversation_id, content, message_length, audio_url, citations } = item.data as {
conversation_id: string, content: string, message_length: number; audio_url?: string;
citations?: {
document_id: string;
file_name: string;
knowledge_id: string;
score: string;
}[]
};
switch (item.event) {
case 'start':
if (conversation_id && conversationId !== conversation_id) setConversationId(conversation_id)
@@ -253,7 +285,7 @@ const TestChat: FC<TestChatProps> = ({
}))
}
if (audio_url) {
updateAssistantMessage(content || '', audio_url)
updateAssistantMessage(content || '', audio_url, 'pending')
const { file_id } = item.data as { file_id?: string }
const idToPoll = file_id || audio_url || ''
const fileId = audio_url.split('/').pop()
@@ -279,6 +311,9 @@ const TestChat: FC<TestChatProps> = ({
audioPollingRef.current.set(idToPoll, timer)
}
}
if (citations && citations.length > 0) {
updateAssistantMessage(content, audio_url, undefined, citations)
}
updateErrorAssistantMessage(message_length)
setStreamLoading(false)
break

41
web/src/views/ApplicationConfig/components/Chat.tsx
View File

@@ -2,7 +2,7 @@
* @Author: ZhaoYing
* @Date: 2026-02-03 16:27:39
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-03-24 10:12:09
* @Last Modified time: 2026-03-26 13:41:44
*/
/**
* Chat debugging component for application testing
@@ -77,8 +77,19 @@ const Chat: FC<ChatProps> = ({
useEffect(() => {
setCompareLoading(false)
setLoading(false)
return () => {
audioPollingRef.current.forEach(timer => clearInterval(timer))
audioPollingRef.current.clear()
}
}, [chatList.map(item => item.label).join(',')])
useEffect(() => {
return () => {
audioPollingRef.current.forEach(timer => clearInterval(timer))
audioPollingRef.current.clear()
}
}, [])
useEffect(() => {
if (data?.features) setFeatures(data.features)
}, [data?.features])
@@ -130,8 +141,8 @@ const Chat: FC<ChatProps> = ({
}
}
/** Update assistant message with streaming content */
const updateAssistantMessage = (content?: string, model_config_id?: string, conversation_id?: string, audio_url?: string) => {
if ((!content && !audio_url) || !model_config_id) return
const updateAssistantMessage = (content?: string, model_config_id?: string, conversation_id?: string, audio_url?: string, citations?: any[]) => {
if ((!content && !audio_url && (!citations || citations?.length < 1)) || !model_config_id) return
updateChatList(prev => {
const targetIndex = prev.findIndex(item => item.model_config_id === model_config_id);
if (targetIndex !== -1) {
@@ -148,7 +159,10 @@ const Chat: FC<ChatProps> = ({
{
...lastMsg,
content: lastMsg.content + (content || ''),
...(audio_url !== undefined ? { meta_data: { audio_url, audio_status: 'pending' } } : {})
meta_data: {
...(audio_url !== undefined ? { audio_url, audio_status: 'pending' } : {}),
citations: citations || lastMsg.meta_data?.citations
}
}
]
}
@@ -249,7 +263,15 @@ const Chat: FC<ChatProps> = ({
setCompareLoading(false)
data.map(item => {
const { model_config_id, conversation_id, content, message_length, audio_url } = item.data as { model_config_id: string; conversation_id: string; content: string; message_length: number; audio_url: string };
const { model_config_id, conversation_id, content, message_length, audio_url, citations } = item.data as {
model_config_id: string; conversation_id: string; content: string; message_length: number; audio_url: string;
citations?: {
document_id: string;
file_name: string;
knowledge_id: string;
score: string;
}[]
};
switch (item.event) {
case 'model_message':
@@ -264,7 +286,7 @@ const Chat: FC<ChatProps> = ({
}))
}
if (audio_url) {
updateAssistantMessage(content, model_config_id, conversation_id, audio_url)
updateAssistantMessage(content, model_config_id, conversation_id, audio_url, citations)
const fileId = audio_url.split('/').pop()
if (fileId && idToPoll && !audioPollingRef.current.has(idToPoll)) {
const timer = setInterval(() => {
@@ -289,6 +311,10 @@ const Chat: FC<ChatProps> = ({
audioPollingRef.current.set(idToPoll, timer)
}
}
if (citations && citations.length > 0) {
updateAssistantMessage(content, model_config_id, conversation_id, audio_url, citations)
}
updateErrorAssistantMessage(message_length, model_config_id)
break;
case 'compare_end':
@@ -481,6 +507,8 @@ const Chat: FC<ChatProps> = ({
const handleDelete = (index: number) => {
updateChatList(chatList.filter((_, voIndex) => voIndex !== index))
}
console.log('chatList', chatList)
const isHasLabel = useMemo(() => chatList.some(item => item.label), [chatList])
const isNeedVariableConfig = useMemo(() => chatVariables?.some(vo => vo.required && !vo.value), [chatVariables])
return (
@@ -539,6 +567,7 @@ const Chat: FC<ChatProps> = ({
"rb:h-[calc(100vh-292px)]": !isHasLabel,
})}
/>}
onSend={isCluster ? handleClusterSend : handleSend}
data={chat.list || []}
streamLoading={compareLoading}
labelPosition="top"

50
web/src/views/ApplicationConfig/components/FeaturesConfig/FeaturesConfigModal.tsx
View File

@@ -2,7 +2,7 @@
* @Author: ZhaoYing
* @Date: 2026-02-03 16:27:56
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-03-24 10:59:37
* @Last Modified time: 2026-03-26 14:03:01
*/
/**
* Copy Application Modal
@@ -20,11 +20,14 @@ import SwitchFormItem from '@/components/FormItem/SwitchFormItem'
import FileUploadSettingModal from './FileUploadSettingModal'
import type { Application } from '@/views/ApplicationManagement/types';
import type { Capability } from '@/views/ModelManagement/types'
import OpenStatementSettingModal, { type OpenStatementSettingModalRef } from './OpenStatementSettingModal'
import type { Variable } from '../VariableList/types'
interface FeaturesConfigModalProps {
refresh: (value: FeaturesConfigForm) => void;
source?: Application['type'];
capability?: Capability[];
chatVariables: Variable[];
}
const max_file_count = 1;
/**
@@ -34,12 +37,14 @@ const FeaturesConfigModal = forwardRef<FeaturesConfigModalRef, FeaturesConfigMod
refresh,
source,
capability,
chatVariables
}, ref) => {
const { t } = useTranslation();
const [visible, setVisible] = useState(false);
const [form] = Form.useForm<FeaturesConfigForm>();
const values = Form.useWatch([], form)
const fileUploadSettingModalRef = useRef<any>(null)
const openStatementSettingModalRef = useRef<OpenStatementSettingModalRef>(null)
/** Close modal and reset form */
const handleClose = () => {
@@ -54,8 +59,10 @@ const FeaturesConfigModal = forwardRef<FeaturesConfigModalRef, FeaturesConfigMod
};
/** Copy application with new name */
const handleSave = () => {
setVisible(false);
refresh(form.getFieldsValue())
form.validateFields().then((values) => {
setVisible(false);
refresh(values)
})
}
const handleOpenSettings = () => {
@@ -82,6 +89,13 @@ const FeaturesConfigModal = forwardRef<FeaturesConfigModalRef, FeaturesConfigMod
return options.filter(item => item.enabled)
}
const handleOpenStatementSettings = () => {
openStatementSettingModalRef.current?.handleOpen(values?.opening_statement)
}
const handleSaveStatement = (settings: FeaturesConfigForm['opening_statement']) => {
form.setFieldValue('opening_statement', settings)
}
/** Expose methods to parent component */
useImperativeHandle(ref, () => ({
handleOpen,
@@ -103,6 +117,23 @@ const FeaturesConfigModal = forwardRef<FeaturesConfigModalRef, FeaturesConfigMod
>
<Flex vertical gap={12}>
{source !== 'workflow' && <>
<div className="rb:relative rb:border rb:border-[#DFE4ED] rb:p-3 rb:rounded-lg rb:bg-[#f5f7fc]">
<SwitchFormItem
title={t('application.opening_statement')}
name={['opening_statement', "enabled"]}
desc={values?.opening_statement?.enabled ? undefined : t('application.opening_statement_desc')}
/>
{values?.opening_statement?.enabled && (() => {
const statement = values.opening_statement?.statement
return statement && statement.trim() !== '' ? <>
<div className="rb:bg-white rb:rounded-lg rb:py-1 rb:px-3 rb:mb-1">
{statement}
</div>
<Button block onClick={handleOpenStatementSettings}>{t('application.editOpeningStatement')}</Button>
</> : <Button block onClick={handleOpenStatementSettings}>{t('application.editOpeningStatement')}</Button>
})()}
<Form.Item name="opening_statement" hidden />
</div>
<div className="rb:relative rb:border rb:border-[#DFE4ED] rb:p-3 rb:rounded-lg rb:bg-[#f5f7fc]">
<SwitchFormItem
title={t(`memoryConversation.web_search`)}
@@ -117,6 +148,13 @@ const FeaturesConfigModal = forwardRef<FeaturesConfigModalRef, FeaturesConfigMod
desc={t('application.text_to_speech_desc')}
/>
</div>
<div className="rb:relative rb:border rb:border-[#DFE4ED] rb:p-3 rb:rounded-lg rb:bg-[#f5f7fc]">
<SwitchFormItem
title={t(`application.citation`)}
name={['citation', "enabled"]}
desc={t('application.citation_desc')}
/>
</div>
</>}
<div className="rb:relative rb:border rb:border-[#DFE4ED] rb:p-3 rb:rounded-lg rb:bg-[#f5f7fc]">
@@ -129,7 +167,6 @@ const FeaturesConfigModal = forwardRef<FeaturesConfigModalRef, FeaturesConfigMod
const fu = values.file_upload
// 'vision' | 'audio' | 'video'
const filterTypes = formatFileTypeOptions(fu)
console.log('filterTypes', filterTypes)
return filterTypes.length > 0 ? <>
<Flex gap={12} className="rb:py-2!">
<div className="rb:flex-1 rb:border rb:border-[#DFE4ED] rb:rounded-lg rb:bg-white rb:text-[12px]">
@@ -165,6 +202,11 @@ const FeaturesConfigModal = forwardRef<FeaturesConfigModalRef, FeaturesConfigMod
onSave={handleSaveSettings}
capability={capability}
/>
<OpenStatementSettingModal
ref={openStatementSettingModalRef}
chatVariables={chatVariables}
onSave={handleSaveStatement}
/>
</>
);
});

125
web/src/views/ApplicationConfig/components/FeaturesConfig/OpenStatementSettingModal.tsx Normal file
View File

@@ -0,0 +1,125 @@
/*
* @Author: ZhaoYing
* @Date: 2026-03-05
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-03-26 14:12:11
*/
import { forwardRef, useImperativeHandle, useState } from 'react';
import { Button, Form, Input, Flex, App } from 'antd';
import { useTranslation } from 'react-i18next';
import RbModal from '@/components/RbModal';
import type { FeaturesConfigForm } from '../../types'
import type { Variable } from '../VariableList/types'
import Tag from '@/components/Tag'
export interface OpenStatementSettingModalRef {
handleOpen: (values?: FeaturesConfigForm['opening_statement']) => void;
handleClose: () => void;
}
interface OpenStatementSettingModalProps {
onSave: (values: FeaturesConfigForm['opening_statement']) => void;
chatVariables?: Variable[];
}
const OpenStatementSettingModal = forwardRef<OpenStatementSettingModalRef, OpenStatementSettingModalProps>(({
onSave,
chatVariables = []
}, ref) => {
const { t } = useTranslation();
const { modal } = App.useApp()
const [visible, setVisible] = useState(false);
const [form] = Form.useForm<FeaturesConfigForm['opening_statement']>();
const handleClose = () => {
setVisible(false);
form.resetFields();
};
const handleOpen = (values?: FeaturesConfigForm['opening_statement']) => {
setVisible(true);
form.setFieldsValue(values || {});
};
const handleSave = async () => {
form.validateFields().then(values => {
if (values?.enabled && values?.statement && values?.statement?.trim() !== '') {
const usedVars = [...new Set([...values.statement?.matchAll(/\{\{(\w+)\}\}/g)].map(m => m[1]))]
const validNames = new Set(chatVariables.map(v => v.name))
const invalid = usedVars.filter(v => !validNames.has(v))
console.log('invalid', invalid)
if (invalid.length > 0) {
modal.confirm({
title: t('application.invalidVariablesTitle'),
content: invalid.map((vo, index) => <Tag key={index}>{'{{'}{vo}{'}}'}</Tag>),
okText: t('common.confirm'),
cancelText: t('common.cancel'),
onOk: () => {
onSave(values);
handleClose();
},
})
} else {
onSave(values);
handleClose();
}
}
});
};
useImperativeHandle(ref, () => ({
handleOpen,
handleClose
}));
return (
<RbModal
title={t('application.settings')}
open={visible}
onCancel={handleClose}
onOk={handleSave}
>
<Form form={form} layout="vertical">
<Form.Item name="enabled" hidden />
<Form.Item
label={t('application.opening_statement')}
name="statement"
>
<Input.TextArea
placeholder={t('common.pleaseEnter')}
/>
</Form.Item>
<Form.List name="suggested_questions">
{(fields, { add, remove }) => (
<Form.Item label={t('application.suggested_questions')}>
<Flex vertical gap={4}>
{fields.map((field, index) => (
<Flex key={field.key} align="center" justify="space-between" gap={4}>
<Form.Item name={field.name} noStyle>
<Input
placeholder={t('common.pleaseEnter')}
/>
</Form.Item>
<div
className="rb:size-4 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/workflow/deleteBg.svg')] rb:hover:bg-[url('@/assets/images/workflow/deleteBg_hover.svg')]"
onClick={() => remove(index)}
></div>
</Flex>
))}
<Button type="dashed" block onClick={() => add()}>
+ {t('common.addOption')}
</Button>
</Flex>
</Form.Item>
)}
</Form.List>
</Form>
</RbModal>
);
});
export default OpenStatementSettingModal;

6
web/src/views/ApplicationConfig/components/FeaturesConfig/index.tsx
View File

@@ -12,6 +12,7 @@ import FeaturesConfigModal from './FeaturesConfigModal'
import type { FeaturesConfigModalRef, FeaturesConfigForm } from '../../types'
import type { Application } from '@/views/ApplicationManagement/types';
import type { Capability } from '@/views/ModelManagement/types'
import type { Variable } from '../VariableList/types'
/** Props for the FeaturesConfig component */
interface FeaturesConfigProps {
@@ -21,13 +22,15 @@ interface FeaturesConfigProps {
refresh: (value: FeaturesConfigForm) => void;
source?: Application['type'];
capability?: Capability[];
chatVariables: Variable[];
}
const FeaturesConfig: FC<FeaturesConfigProps> = ({
value,
refresh,
source,
capability
capability,
chatVariables
}) => {
const { t } = useTranslation();
// Ref used to imperatively open the config modal
@@ -50,6 +53,7 @@ const FeaturesConfig: FC<FeaturesConfigProps> = ({
refresh={refresh}
source={source}
capability={capability}
chatVariables={chatVariables}
/>
</>
)