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

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}
/>
</>
)