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

28
web/src/components/Chat/ChatContent.tsx
View File

@@ -2,15 +2,15 @@
* @Author: ZhaoYing
* @Date: 2025-12-10 16:46:17
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-03-23 18:24:33
* @Last Modified time: 2026-03-26 13:32:29
*/
import { type FC, useRef, useEffect, useState } from 'react'
import clsx from 'clsx'
import Markdown from '@/components/Markdown'
import type { ChatContentProps } from './types'
import { Spin, Divider, Space, Image, Flex } from 'antd'
import { Spin, Divider, Space, Image, Flex, Button } from 'antd'
import { SoundOutlined } from '@ant-design/icons'
import { t } from 'i18next'
const getFileUrl = (file: any) => {
return file.thumbUrl || file.url || (file.originFileObj ? URL.createObjectURL(file.originFileObj) : undefined)
@@ -29,7 +29,8 @@ const ChatContent: FC<ChatContentProps> = ({
labelPosition = 'bottom',
labelFormat,
errorDesc,
renderRuntime
renderRuntime,
onSend
}) => {
// Scroll container reference for controlling auto-scroll to bottom
const scrollContainerRef = useRef<(HTMLDivElement | null)>(null)
@@ -178,6 +179,25 @@ const ChatContent: FC<ChatContentProps> = ({
{/* Render message content using Markdown component */}
<Markdown content={renderRuntime ? item.content ?? '' : item.content ?? errorDesc ?? ''} />
{item.meta_data?.suggested_questions && item.meta_data?.suggested_questions?.length > 0 && <Flex wrap className="rb:my-1!">
{item.meta_data?.suggested_questions?.map((question, idx) => (
<Button key={idx} size="small" className="rb:text-[12px]! rb:text-[#155EEF]!"
onClick={() => onSend?.(question)}
>{question}</Button>
))}
</Flex>}
{item.meta_data?.citations && item.meta_data?.citations.length > 0 && <div className="rb:mt-2 rb:pt-2 rb:border-t rb:border-[#E3EBFD]">
<div className="rb:text-[12px] rb:text-[#5B6167] rb:font-medium">{t('memoryConversation.citations')}</div>
{item.meta_data?.citations?.map((citation, idx) => (
<Button
type="link"
key={idx}
size="small"
className="rb:text-[12px]!"
onClick={() => window.open(`/knowledge/${citation.knowledge_id}/document/${citation.document_id}`, '_blank')}
>{citation.file_name}</Button>
))}
</div>}
{item.meta_data?.audio_url && <>
<Divider className="rb:my-3!" />
<Space size={12} className="rb:pb-2 rb:pl-1">

3
web/src/components/Chat/index.tsx
View File

@@ -2,7 +2,7 @@
* @Author: ZhaoYing
* @Date: 2025-12-10 16:46:09
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-03-19 20:47:27
* @Last Modified time: 2026-03-26 13:32:46
*/
import { type FC } from 'react'
import ChatInput from './ChatInput'
@@ -40,6 +40,7 @@ const Chat: FC<ChatProps> = ({
labelFormat={labelFormat}
errorDesc={errorDesc}
renderRuntime={renderRuntime}
onSend={onSend}
/>
{/* Chat input area */}

11
web/src/components/Chat/types.ts
View File

@@ -2,7 +2,7 @@
* @Author: ZhaoYing
* @Date: 2025-12-10 16:45:54
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-03-23 18:15:05
* @Last Modified time: 2026-03-26 12:30:51
*/
import { type ReactNode } from 'react'
@@ -27,6 +27,13 @@ export interface ChatItem {
audio_url?: string;
audio_status?: string;
files?: any[];
suggested_questions?: string[];
citations?: {
document_id: string;
file_name: string;
knowledge_id: string;
score: string;
}[]
},
}
@@ -101,4 +108,6 @@ export interface ChatContentProps {
labelFormat: (item: ChatItem) => any;
errorDesc?: string;
renderRuntime?: (item: ChatItem, index: number) => ReactNode;
/** Send message callback */
onSend?: (msg: string) => void;
}

4
web/src/components/SortableList/index.tsx
View File

@@ -1,8 +1,8 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-02 15:27:36
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-02 15:27:36
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-03-26 12:02:23
*/
/**
* SortableList Component

8
web/src/i18n/en.ts
View File

@@ -1412,6 +1412,14 @@ export const en = {
unix: 'items',
text_to_speech: 'Text to Speech',
text_to_speech_desc: 'Text can be converted to speech',
opening_statement: 'Conversation Opening',
opening_statement_desc: 'Set the conversation opening content',
editOpeningStatement: 'Edit Opening Statement',
suggested_questions: 'Opening Questions',
add_questions: 'Add Option',
citation: 'Citation and Attribution',
citation_desc: 'Display the attribution of source documents and generated content',
invalidVariablesTitle: "The following undefined variables are referenced in the conversation opening. Do you want to save the opening configuration?",
apps: 'My Apps',
sharing: 'Sharing',

9
web/src/i18n/zh.ts
View File

@@ -787,6 +787,14 @@ export const zh = {
unix: '个',
text_to_speech: '文字转语音',
text_to_speech_desc: '文本可以转换成语音',
opening_statement: '对话开场白',
opening_statement_desc: '设置对话开场白内容',
editOpeningStatement: '编辑开场白',
suggested_questions: '开场问题',
add_questions: '添加选项',
citation: '引用和归属',
citation_desc: '显示源文档和生成内容的归属部分',
invalidVariablesTitle: "对话开场白中引用了以下未定义的变量，是否保存开场白配置？",
apps: '我的应用',
sharing: '共享',
@@ -1815,6 +1823,7 @@ export const zh = {
memoryTipTitle: '确定打开对话记忆功能吗？打开后对话将会保存到记忆库中',
stopAudioRecorder: '停止录音',
startAudioRecorder: '开始录音',
citations: '引用',
},
login: {
title: '红熊记忆科学',

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

69
web/src/views/Conversation/index.tsx
View File

@@ -2,7 +2,7 @@
* @Author: ZhaoYing
* @Date: 2026-02-03 16:58:03
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-03-24 10:19:34
* @Last Modified time: 2026-03-26 13:35:42
*/
/**
* Conversation Page
@@ -142,6 +142,8 @@ const Conversation: FC = () => {
}
useEffect(() => {
audioPollingRef.current.forEach((timer) => clearInterval(timer))
audioPollingRef.current.clear()
if (conversation_id) {
getConversationDetail(token as string, conversation_id)
.then(res => {
@@ -149,9 +151,20 @@ const Conversation: FC = () => {
setChatList(response?.messages || [])
})
} else {
setChatList([])
if (features?.opening_statement?.statement) {
setChatList([{
role: 'assistant',
content: features.opening_statement.statement,
created_at: Date.now(),
meta_data: {
suggested_questions: features.opening_statement?.suggested_questions
}
}])
} else {
setChatList([])
}
}
}, [conversation_id])
}, [conversation_id, features?.opening_statement?.statement])
const addUserMessage = (message: string = '', files?: any[]) => {
setChatList(prev => [...prev, {
@@ -173,8 +186,8 @@ const Conversation: FC = () => {
}])
}
const updateAssistantMessage = (content: string = '', audio_url?: string, audio_status?: string) => {
if (!content && !audio_url) return
const updateAssistantMessage = (content: string = '', audio_url?: string, audio_status?: string, citations?: any[]) => {
if (!content && !audio_url && (!citations || citations?.length < 1)) return
if (streamLoading) setStreamLoading(false)
setChatList(prev => {
const lastList = [...prev]
@@ -186,7 +199,11 @@ const Conversation: FC = () => {
{
...lastMsg,
content: lastMsg.content + content,
meta_data: { audio_url, audio_status }
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
}
}
]
}
@@ -210,7 +227,7 @@ const Conversation: FC = () => {
}, [audioStatusMap, chatList.length])
/** Send message and handle streaming response */
const handleSend = () => {
const handleSend = (msg?: string) => {
if (!token || !shareToken) return
const files = (toolbarRef.current?.getFiles() || []).filter(item => !['uploading', 'error'].includes(item.status))
const variables = toolbarRef.current?.getVariables() || []
@@ -234,7 +251,7 @@ const Conversation: FC = () => {
setLoading(true)
setStreamLoading(true)
addUserMessage(message, files)
addUserMessage(msg || message, files)
addAssistantMessage()
toolbarRef.current?.setFiles([])
setFileList([])
@@ -242,7 +259,15 @@ const Conversation: FC = () => {
let currentConversationId: string | null = null
const handleStreamMessage = (data: SSEMessage[]) => {
data.forEach((item) => {
const { content, conversation_id: curId, audio_url } = item.data as { content: string; conversation_id: string; audio_url?: string; }
const { content, conversation_id: curId, audio_url, citations } = item.data as {
content: string; conversation_id: string; audio_url?: string;
citations?: {
document_id: string;
file_name: string;
knowledge_id: string;
score: string;
}[]
}
switch (item.event) {
case 'start':
case 'node_start':
@@ -256,7 +281,7 @@ const Conversation: FC = () => {
case 'end':
case 'workflow_end':
if (audio_url) {
updateAssistantMessage(content, audio_url, 'pending')
updateAssistantMessage(content, audio_url, 'pending', citations)
const { file_id } = item.data as { file_id?: string }
const idToPoll = file_id || audio_url || ''
const fileId = audio_url.split('/').pop()
@@ -273,21 +298,33 @@ const Conversation: FC = () => {
}))
clearInterval(audioPollingRef.current.get(idToPoll))
audioPollingRef.current.delete(idToPoll)
getHistory(true)
if (currentConversationId && currentConversationId !== conversation_id) {
setConversationId(currentConversationId)
}
}
})
.catch(() => {
clearInterval(audioPollingRef.current.get(idToPoll))
audioPollingRef.current.delete(idToPoll)
getHistory(true)
if (currentConversationId && currentConversationId !== conversation_id) {
setConversationId(currentConversationId)
}
})
}, 2000)
audioPollingRef.current.set(idToPoll, timer)
}
} else {
getHistory(true)
if (currentConversationId && currentConversationId !== conversation_id) {
setConversationId(currentConversationId)
}
}
if (citations && citations.length > 0) {
updateAssistantMessage(content, audio_url, undefined, citations)
}
setLoading(false)
if (currentConversationId && currentConversationId !== conversation_id) {
setConversationId(currentConversationId)
}
getHistory(true)
break
}
})
@@ -296,7 +333,7 @@ const Conversation: FC = () => {
sendConversation({
web_search: webSearch,
memory,
message: message || '',
message: msg || message || '',
stream: true,
conversation_id: conversation_id || null,
files: files.map(file => {
@@ -338,6 +375,8 @@ const Conversation: FC = () => {
})
}
console.log('chatList', chatList)
return (
<Flex className="rb:w-full rb:p-[-16px]!">
<div className="rb:w-80 rb:h-screen rb:bg-[#F6F6F6] rb:overflow-hidden">