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

style(web): translate the comments in the src/views directory into English

Browse Source
This commit is contained in:
zhaoying
2026-02-03 18:38:04 +08:00
parent a191e32f71
commit 9e195ea63b
155 changed files with 4169 additions and 586 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
web/src/views/ApiKeyManagement/components/ApiKeyDetailModal.tsx
View File

@@ -1,7 +1,14 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 15:52:44
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 15:54:22
*/
import { forwardRef, useImperativeHandle, useState } from 'react';
import { Switch, Button, Tooltip } from 'antd';
import clsx from 'clsx';
import { useTranslation } from 'react-i18next';
import type { ApiKey, ApiKeyModalRef } from '../types';
import RbModal from '@/components/RbModal'
import { getApiKey } from '@/api/apiKey';
@@ -9,16 +16,29 @@ import { formatDateTime } from '@/utils/format'
import Tag from '@/components/Tag'
import { maskApiKeys } from '@/utils/apiKeyReplacer';
/**
* Modal component for viewing API key details
* Displays read-only information about an API key
*/
const ApiKeyDetailModal = forwardRef<ApiKeyModalRef, { handleCopy: (content: string) => void }>(({ handleCopy }, ref) => {
// Hooks
const { t } = useTranslation();
// State
const [visible, setVisible] = useState(false);
const [data, setData] = useState<ApiKey>({} as ApiKey)
// 封装取消方法，添加关闭弹窗逻辑
/**
* Close the modal
*/
const handleClose = () => {
setVisible(false);
};
/**
* Open modal and fetch API key details
* @param apiKey - API key item to view
*/
const handleOpen = (apiKey?: ApiKey) => {
if (apiKey?.id) {
getApiKey(apiKey.id)
@@ -29,7 +49,9 @@ const ApiKeyDetailModal = forwardRef<ApiKeyModalRef, { handleCopy: (content: str
}
};
// 暴露给父组件的方法
/**
* Expose methods to parent component via ref
*/
useImperativeHandle(ref, () => ({
handleOpen,
handleClose

43
web/src/views/ApiKeyManagement/components/ApiKeyModal.tsx
View File

@@ -1,28 +1,48 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 15:52:47
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 15:52:47
*/
import { forwardRef, useImperativeHandle, useState } from 'react';
import { Form, Input, Switch, App, DatePicker } from 'antd';
import { useTranslation } from 'react-i18next';
import dayjs from 'dayjs'
import type { ApiKey, ApiKeyModalRef } from '../types';
import RbModal from '@/components/RbModal'
import dayjs from 'dayjs'
import { createApiKey, updateApiKey } from '@/api/apiKey';
const FormItem = Form.Item;
/**
* Props for ApiKeyModal component
*/
interface CreateModalProps {
/** Callback to refresh parent list after save */
refresh: () => void;
}
/**
* Modal component for creating or editing API keys
* Handles API key configuration including permissions and expiration
*/
const ApiKeyModal = forwardRef<ApiKeyModalRef, CreateModalProps>(({
refresh,
}, ref) => {
// Hooks
const { t } = useTranslation();
const { message } = App.useApp();
const [visible, setVisible] = useState(false);
const [form] = Form.useForm<ApiKey>();
// State
const [visible, setVisible] = useState(false);
const [loading, setLoading] = useState(false);
const [editVo, setEditVo] = useState<ApiKey | null>(null);
// 封装取消方法，添加关闭弹窗逻辑
/**
* Close modal and reset form state
*/
const handleClose = () => {
setVisible(false);
form.resetFields();
@@ -30,10 +50,14 @@ const ApiKeyModal = forwardRef<ApiKeyModalRef, CreateModalProps>(({
setEditVo(null);
};
/**
* Open modal for creating or editing
* @param apiKey - Optional API key data for edit mode
*/
const handleOpen = (apiKey?: ApiKey) => {
if (apiKey?.id) {
const { scopes = [], expires_at } = apiKey
// 编辑模式，填充表单
// Edit mode - populate form with existing data
form.setFieldsValue({
name: apiKey.name,
description: apiKey.description,
@@ -46,7 +70,10 @@ const ApiKeyModal = forwardRef<ApiKeyModalRef, CreateModalProps>(({
setVisible(true);
};
// 封装保存方法，添加提交逻辑
/**
* Validate and submit form data
* Creates new API key or updates existing one
*/
const handleSave = async () => {
form.validateFields()
.then((values) => {
@@ -59,7 +86,7 @@ const ApiKeyModal = forwardRef<ApiKeyModalRef, CreateModalProps>(({
if (rag) {
scopes.push('rag')
}
// 准备新的/更新的API Key数据
// Prepare new/updated API key data
const apiKeyData = {
...rest,
scopes,
@@ -78,7 +105,9 @@ const ApiKeyModal = forwardRef<ApiKeyModalRef, CreateModalProps>(({
})
}
// 暴露给父组件的方法
/**
* Expose methods to parent component via ref
*/
useImperativeHandle(ref, () => ({
handleOpen,
handleClose

37
web/src/views/ApiKeyManagement/index.tsx
View File

@@ -1,8 +1,16 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 15:52:50
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 15:52:50
*/
import React, { useRef } from 'react';
import { useTranslation } from 'react-i18next';
import { Button, App, Space } from 'antd';
import clsx from 'clsx';
import { DeleteOutlined, EditOutlined, EyeOutlined } from '@ant-design/icons';
import copy from 'copy-to-clipboard'
import type { ApiKey, ApiKeyModalRef } from './types';
import ApiKeyModal from './components/ApiKeyModal';
import ApiKeyDetailModal from './components/ApiKeyDetailModal';
@@ -11,26 +19,49 @@ import { getApiKeyListUrl, deleteApiKey } from '@/api/apiKey';
import PageScrollList, { type PageScrollListRef } from '@/components/PageScrollList'
import { formatDateTime } from '@/utils/format';
import Tag from '@/components/Tag'
import copy from 'copy-to-clipboard'
import { maskApiKeys } from '@/utils/apiKeyReplacer';
/**
* API Key Management page component
* Manages service API keys with CRUD operations
*/
const ApiKeyManagement: React.FC = () => {
// Hooks
const { t } = useTranslation();
const { modal, message } = App.useApp();
// Refs
const apiKeyModalRef = useRef<ApiKeyModalRef>(null);
const apiKeyDetailModalRef = useRef<ApiKeyModalRef>(null)
const scrollListRef = useRef<PageScrollListRef>(null)
/**
* Refresh the API key list
*/
const refresh = () => {
scrollListRef.current?.refresh();
}
/**
* Open modal to create or edit API key
* @param item - Optional API key item for edit mode
*/
const handleEdit = (item?: ApiKey) => {
apiKeyModalRef.current?.handleOpen(item);
}
/**
* Open modal to view API key details
* @param item - API key item to view
*/
const handleView = (item: ApiKey) => {
apiKeyDetailModalRef.current?.handleOpen(item);
}
/**
* Delete API key with confirmation
* @param item - API key item to delete
*/
const handleDelete = (item: ApiKey) => {
modal.confirm({
title: t('common.confirmDeleteDesc', { name: item.name }),
@@ -46,6 +77,10 @@ const ApiKeyManagement: React.FC = () => {
}
})
}
/**
* Copy content to clipboard
* @param content - Content to copy
*/
const handleCopy = (content: string) => {
copy(content)
message.success(t('common.copySuccess'))

43
web/src/views/ApiKeyManagement/types.ts
View File

@@ -1,39 +1,76 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 15:52:53
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 15:52:53
*/
import type { Dayjs } from 'dayjs'
import { maskApiKeys } from '@/utils/apiKeyReplacer'
/**
* API Key data structure
*/
export interface ApiKey {
/** Unique identifier */
id: string;
/** API key name */
name: string;
/** Optional description */
description?: string;
/** API key type */
type: 'agent' | 'multi_agent' | 'workflow' | 'service';
scopes?: string[]; // 'memory' | 'rag' | 'app'
/** Permission scopes: 'memory' | 'rag' | 'app' */
scopes?: string[];
/** The actual API key string */
api_key: string;
/** Whether the key is active */
is_active: boolean;
/** Whether the key has expired */
is_expired: boolean;
/** Creation timestamp */
created_at: number;
/** Expiration timestamp or Dayjs object */
expires_at?: number | Dayjs;
/** Memory engine permission flag */
memory?: boolean;
/** RAG/Knowledge base permission flag */
rag?: boolean;
/** Last update timestamp */
updated_at: string;
/** Queries per second limit */
qps_limit?: number;
/** Daily request limit */
daily_request_limit?: number;
/** Rate limit */
rate_limit?: number;
/** Total number of requests made */
total_requests: number;
/** Quota used */
quota_used: number;
/** Quota limit */
quota_limit: number;
}
/**
* Ref methods exposed by API Key modal components
*/
export interface ApiKeyModalRef {
/**
* Open the modal
* @param apiKey - Optional API key data for edit mode
*/
handleOpen: (apiKey?: ApiKey) => void;
/** Close the modal */
handleClose: () => void;
}
/**
* 获取掩码后的API密钥
* Get masked API key for display
* @param apiKey - The API key to mask
* @returns Masked API key string
*/
export const getMaskedApiKey = (apiKey: string): string => {
return maskApiKeys(apiKey)

75
web/src/views/ApiParameters/index.tsx
View File

@@ -1,75 +0,0 @@
import { useTranslation } from 'react-i18next';
import { type FC, useEffect, useState } from 'react';
import { Row, Col, Skeleton } from 'antd'
import CodeBlock from '@/components/Markdown/CodeBlock';
import { getMemoryApi } from '@/api/memory';
import RbCard from '@/components/RbCard/Card';
import type {
Data,
Section
} from './types';
import Empty from '@/components/Empty'
const ApiParameters: FC = () => {
const { t } = useTranslation();
const [loading, setLoading] = useState<boolean>(false)
// const [data, setData] = useState<Data | null>(null)
const [apiData, setApiData] = useState<Section[]>([])
useEffect(() => {
getApiData()
}, [])
const getApiData = () => {
setLoading(true)
getMemoryApi().then((res) => {
const resp = res as Data || {}
// setData(resp)
setApiData(resp.sections || [])
})
.finally(() => setLoading(false))
}
return (
<div className="rb:pb-[24px]">
<h1 className="rb:text-2xl rb:font-semibold rb:mb-[8px]">{t('api.pageTitle')}</h1>
<p className="rb:text-[#5B6167] rb:text-[14px] rb:mb-[24px] rb:leading-[20px]">{t('api.pageSubTitle')}</p>
{loading
? <Skeleton />
: apiData.length === 0
? <Empty />
: <Row gutter={[24, 24]}>
{apiData.map((api, index) => (
<Col span={24} key={index}>
<RbCard
title={`${index + 1}. ${api.name}`}
>
<>
<div className="rb:mb-[24px] rb:bg-[#F0F3F8] rb:rounded-[8px] rb:shadow-[inset_4px_0px_0px_0px_#155EEF] rb:p-[16px_24px] rb:text-sm">
<span className="rb:bg-[#155EEF] rb:p-[2px_8px] rb:rounded-[6px] rb:text-[#fff] rb:mr-[16px]">{api.method}</span>
{api.path}
</div>
{api.desc &&<>
<div className="rb:text-base rb:font-medium rb:mb-[8px]">{t('api.desc')}</div>
<div className="rb:mb-[24px] rb:text-sm rb:text-[#5B6167]">{api.desc}</div>
</>}
{typeof api.input === 'string' && api.input !== '无' && <>
<div className="rb:text-base rb:font-medium rb:mb-[12px] rb:mt-[24px]">{t('api.input')}</div>
<CodeBlock value={api.input} />
</>}
{typeof api.output === 'string' && api.output !== '无' && <>
<div className="rb:text-base rb:font-medium rb:mb-[12px] rb:mt-[24px]">{t('api.output')}</div>
<CodeBlock value={api.output} />
</>}
</>
</RbCard>
</Col>
))}
</Row>
}
</div>
);
};
export default ApiParameters;

22
web/src/views/ApiParameters/types.ts
View File

@@ -1,22 +0,0 @@
export interface Section {
name: string;
path: string;
method: string;
input: string;
output: string;
desc: string;
}
export interface Data {
title: string;
meta: {
search_switch: {
value: string;
desc: string;
}[];
status_code: {
code: string;
desc: string;
}[];
}
sections: Section[]
}

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

@@ -1,8 +1,15 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:29:21
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:29:21
*/
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'
@@ -33,6 +40,11 @@ import AiPromptModal from './components/AiPromptModal'
import ToolList from './components/ToolList/ToolList'
import ChatVariableConfigModal from './components/ChatVariableConfigModal';
/**
* Description wrapper component
* @param desc - Description text
* @param className - Additional CSS classes
*/
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 ")}>
@@ -40,6 +52,12 @@ const DescWrapper: FC<{desc: string, className?: string}> = ({desc, className})
</div>
)
}
/**
* Label wrapper component
* @param title - Label title
* @param className - Additional CSS classes
* @param children - Child elements
*/
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")}>
@@ -48,6 +66,13 @@ const LabelWrapper: FC<{title: string, className?: string; children?: ReactNode}
</div>
)
}
/**
* Switch wrapper component with label and description
* @param title - Switch title
* @param desc - Optional description
* @param name - Form field name
* @param needTransition - Whether to translate text
*/
const SwitchWrapper: FC<{ title: string, desc?: string, name: string | string[]; needTransition?: boolean; }> = ({ title, desc, name, needTransition = true }) => {
const { t } = useTranslation();
return (
@@ -65,6 +90,13 @@ const SwitchWrapper: FC<{ title: string, desc?: string, name: string | string[];
</div>
)
}
/**
* Select wrapper component with label and description
* @param title - Select title
* @param desc - Description text
* @param name - Form field name
* @param url - API URL for options
*/
const SelectWrapper: FC<{ title: string, desc: string, name: string | string[], url: string }> = ({ title, desc, name, url }) => {
const { t } = useTranslation();
return (
@@ -88,6 +120,10 @@ const SelectWrapper: FC<{ title: string, desc: string, name: string | string[],
)
}
/**
* Agent configuration component
* Manages single agent configuration including prompts, knowledge, memory, variables, and tools
*/
const Agent = forwardRef<AgentRef>((_props, ref) => {
const { t } = useTranslation()
const { id } = useParams();
@@ -103,7 +139,7 @@ const Agent = forwardRef<AgentRef>((_props, ref) => {
const [isSave, setIsSave] = useState(false)
const initialized = useRef(false)
// 初始化完成标记
// Initialization flag
useEffect(() => {
if (data) {
initialized.current = true
@@ -121,6 +157,9 @@ const Agent = forwardRef<AgentRef>((_props, ref) => {
getData()
}, [])
/**
* Fetch agent configuration data
*/
const getData = () => {
setLoading(true)
getApplicationConfig(id as string).then(res => {
@@ -147,6 +186,11 @@ const Agent = forwardRef<AgentRef>((_props, ref) => {
})
}
/**
* Refresh configuration after model changes
* @param vo - Model configuration
* @param type - Source type (model or chat)
*/
const refresh = (vo: ModelConfig, type: Source) => {
if (type === 'model') {
const { default_model_config_id, ...rest } = vo
@@ -188,14 +232,24 @@ const Agent = forwardRef<AgentRef>((_props, ref) => {
}
}
/**
* Open model configuration modal
*/
const handleModelConfig = () => {
modelConfigModalRef.current?.handleOpen('model')
}
/**
* Clear all debugging chat sessions
*/
const handleClearDebugging = () => {
setChatList([])
}
// 保存Agent配置
/**
* Save agent configuration
* @param flag - Whether to show success message
* @returns Promise that resolves when save is complete
*/
const handleSave = (flag = true) => {
if (!isSave || !data) return Promise.resolve()
const { memory, knowledge_retrieval, tools, ...rest } = values
@@ -240,6 +294,9 @@ const Agent = forwardRef<AgentRef>((_props, ref) => {
})
})
}
/**
* Fetch available models list
*/
const getModels = () => {
getModelList({ type: 'llm,chat', pagesize: 100, page: 1, is_active: true })
.then(res => {
@@ -247,6 +304,9 @@ const Agent = forwardRef<AgentRef>((_props, ref) => {
setModelList(response.items)
})
}
/**
* Add new model for debugging
*/
const handleAddModel = () => {
modelConfigModalRef.current?.handleOpen('chat')
}
@@ -268,9 +328,16 @@ const Agent = forwardRef<AgentRef>((_props, ref) => {
}))
const aiPromptModalRef = useRef<AiPromptModalRef>(null)
/**
* Open AI prompt generation modal
*/
const handlePrompt = () => {
aiPromptModalRef.current?.handleOpen()
}
/**
* Update prompt and extract variables
* @param value - New prompt value
*/
const updatePrompt = (value: string) => {
form.setFieldValue('system_prompt', value)
const variables = value.match(/\{\{([^}]+)\}\}/g)?.map(match => match.slice(2, -2)) || []
@@ -285,15 +352,26 @@ const Agent = forwardRef<AgentRef>((_props, ref) => {
updateVariableList(newVariableList)
}
/**
* Update variable list
* @param list - New variable list
*/
const updateVariableList = (list: Variable[]) => {
form.setFieldValue('variables', [...list])
setChatVariables([...list])
}
const chatVariableConfigModalRef = useRef<ChatVariableConfigModalRef>(null)
const [chatVariables, setChatVariables] = useState<Variable[]>([])
/**
* Open chat variable configuration modal
*/
const handleOpenVariableConfig = () => {
chatVariableConfigModalRef.current?.handleOpen(chatVariables)
}
/**
* Save chat variable configuration
* @param values - Variable values
*/
const handleSaveChatVariable = (values: Variable[]) => {
setChatVariables(values)
}

35
web/src/views/ApplicationConfig/Api.tsx
View File

@@ -1,3 +1,9 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:29:29
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:29:29
*/
import { type FC, useState, useRef, useEffect } from 'react';
import clsx from 'clsx';
import { useTranslation } from 'react-i18next';
@@ -14,6 +20,11 @@ import Tag from '@/components/Tag'
import { getApiKeyList, getApiKeyStats, deleteApiKey } from '@/api/apiKey';
import { maskApiKeys } from '@/utils/apiKeyReplacer'
/**
* API configuration page component
* Manages API endpoints and API keys for the application
* @param application - Current application data
*/
const Api: FC<{ application: Application | null }> = ({ application }) => {
const { t } = useTranslation();
const activeMethods = ['POST'];
@@ -23,6 +34,10 @@ const Api: FC<{ application: Application | null }> = ({ application }) => {
const apiKeyConfigModalRef = useRef<ApiKeyConfigModalRef>(null);
const [apiKeyList, setApiKeyList] = useState<ApiKey[]>([])
/**
* Copy content to clipboard
* @param content - Content to copy
*/
const handleCopy = (content: string) => {
copy(content)
message.success(t('common.copySuccess'))
@@ -31,6 +46,9 @@ const Api: FC<{ application: Application | null }> = ({ application }) => {
useEffect(() => {
getApiList()
}, [])
/**
* Fetch API key list for the application
*/
const getApiList = () => {
if (!application) {
return
@@ -48,6 +66,10 @@ const Api: FC<{ application: Application | null }> = ({ application }) => {
getAllStats([...list])
})
}
/**
* Fetch statistics for all API keys
* @param list - List of API keys
*/
const getAllStats = (list: ApiKey[]) => {
const allList: ApiKey[] = []
list.forEach(async item => {
@@ -66,12 +88,23 @@ const Api: FC<{ application: Application | null }> = ({ application }) => {
})
}
/**
* Open modal to add new API key
*/
const handleAdd = () => {
apiKeyModalRef.current?.handleOpen()
}
/**
* Open modal to edit API key
* @param vo - API key to edit
*/
const handleEdit = (vo: ApiKey) => {
apiKeyConfigModalRef.current?.handleOpen(vo)
}
/**
* Delete API key with confirmation
* @param vo - API key to delete
*/
const handleDelete = (vo: ApiKey) => {
modal.confirm({
title: t('common.confirmDeleteDesc', { name: vo.name }),
@@ -89,7 +122,7 @@ const Api: FC<{ application: Application | null }> = ({ application }) => {
})
}
// 计算total_requests总数
// Calculate total requests across all API keys
const totalRequests = apiKeyList.reduce((total, item) => total + item.total_requests, 0);
return (
<div className="rb:w-250 rb:mt-5 rb:pb-5 rb:mx-auto">

40
web/src/views/ApplicationConfig/Cluster.tsx
View File

@@ -1,8 +1,15 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:29:33
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:29:33
*/
import { useEffect, useState, useRef, forwardRef, useImperativeHandle } from 'react'
import { useTranslation } from 'react-i18next'
import { useParams } from 'react-router-dom';
import Card from './components/Card'
import { Form, Space, Row, Col, Button, Flex, App, Select } from 'antd'
import Card from './components/Card'
import Tag, { type TagProps } from './components/Tag'
import CustomSelect from '@/components/CustomSelect';
import { getMultiAgentConfig, saveMultiAgentConfig, getApplicationList } from '@/api/application';
@@ -26,6 +33,10 @@ import type { Application } from '@/views/ApplicationManagement/types'
const tagColors = ['processing', 'warning', 'default']
const MAX_LENGTH = 5;
/**
* Multi-agent cluster configuration component
* Manages multi-agent orchestration, sub-agents, and collaboration modes
*/
const Cluster = forwardRef<ClusterRef>((_props, ref) => {
const { t } = useTranslation()
const { message } = App.useApp()
@@ -41,6 +52,11 @@ const Cluster = forwardRef<ClusterRef>((_props, ref) => {
},
])
/**
* Save cluster configuration
* @param flag - Whether to show success message
* @returns Promise that resolves when save is complete
*/
const handleSave = (flag = true) => {
if (!data) return Promise.resolve()
if (!values.default_model_config_id && values.orchestration_mode === 'supervisor') {
@@ -80,6 +96,9 @@ const Cluster = forwardRef<ClusterRef>((_props, ref) => {
getData()
}, [id])
/**
* Fetch cluster configuration data
*/
const getData = () => {
if (!id) {
return
@@ -113,9 +132,17 @@ const Cluster = forwardRef<ClusterRef>((_props, ref) => {
}
})
}
/**
* Open sub-agent modal for add or edit
* @param agent - Optional agent data for edit mode
*/
const handleSubAgentModal = (agent?: SubAgentItem) => {
subAgentModalRef.current?.handleOpen(agent)
}
/**
* Refresh sub-agents list after add or edit
* @param agent - Agent data to add or update
*/
const refreshSubAgents = (agent: SubAgentItem) => {
const index = subAgents.findIndex(item => item.agent_id === agent.agent_id)
const newSubAgents = [...subAgents]
@@ -130,6 +157,10 @@ const Cluster = forwardRef<ClusterRef>((_props, ref) => {
setSubAgents(newSubAgents)
}
}
/**
* Delete sub-agent from list
* @param agent - Agent to delete
*/
const handleDeleteSubAgent = (agent: SubAgentItem) => {
setSubAgents(prev => prev.filter(item => item.agent_id !== agent.agent_id))
}
@@ -138,9 +169,16 @@ const Cluster = forwardRef<ClusterRef>((_props, ref) => {
}))
const modelConfigModalRef = useRef<ModelConfigModalRef>(null)
/**
* Open model configuration modal
*/
const handleEditModelConfig = () => {
modelConfigModalRef.current?.handleOpen('multi_agent', values.model_parameters)
}
/**
* Save model configuration
* @param values - Model parameters
*/
const handleSaveModelConfig = (values: Config['model_parameters']) => {
form.setFieldsValue({
model_parameters: values

22
web/src/views/ApplicationConfig/ReleasePage.tsx
View File

@@ -1,7 +1,14 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:29:41
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:29:41
*/
import { type FC, useState, useEffect, useRef } from 'react';
import { useTranslation } from 'react-i18next';
import clsx from 'clsx';
import { Button, Space, Input, Form, App } from 'antd';
import Tag, { type TagProps } from './components/Tag'
import RbCard from '@/components/RbCard/Card'
import { getReleaseList, rollbackRelease } from '@/api/application'
@@ -12,12 +19,21 @@ import type { Application } from '@/views/ApplicationManagement/types'
import Empty from '@/components/Empty'
import { formatDateTime } from '@/utils/format';
import Markdown from '@/components/Markdown'
/**
* Tag color mapping for release versions
*/
const tagColors: Record<Release['tagKey'], TagProps['color']> = {
current: 'processing',
rolledBack: 'warning',
history: 'default',
}
/**
* Release page component
* Manages application version releases, rollbacks, and version history
* @param data - Application data
* @param refresh - Function to refresh application data
*/
const ReleasePage: FC<{data: Application; refresh: () => void}> = ({data, refresh}) => {
const { t } = useTranslation();
const { message } = App.useApp()
@@ -30,6 +46,9 @@ const ReleasePage: FC<{data: Application; refresh: () => void}> = ({data, refres
getData()
}, [data.id])
/**
* Fetch release list data
*/
const getData = () => {
refresh()
getReleaseList(data.id).then(res => {
@@ -38,6 +57,9 @@ const ReleasePage: FC<{data: Application; refresh: () => void}> = ({data, refres
setSelectedVersion(response?.[0])
})
}
/**
* Rollback to selected version
*/
const handleRollback = () => {
if (!selectedVersion) return
rollbackRelease(data.id, selectedVersion.version).then(() => {

22
web/src/views/ApplicationConfig/Statistics.tsx
View File

@@ -1,3 +1,9 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:29:45
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:29:45
*/
import { type FC, useState, useEffect } from 'react';
import { Row, Col, Flex, DatePicker } from 'antd';
import type { Dayjs } from 'dayjs'
@@ -10,12 +16,21 @@ import { getAppStatistics } from '@/api/application';
import LineCard from './components/LineCard'
import type { StatisticsData, StatisticsItem } from './types'
/**
* Mapping of daily statistics keys to total statistics keys
*/
const TotalObj: Record<string, keyof StatisticsData> = {
daily_conversations: 'total_conversations',
daily_new_users: 'total_new_users',
daily_api_calls: 'total_api_calls',
daily_tokens: 'total_tokens',
}
/**
* Statistics page component
* Displays application usage statistics with charts and date range filtering
* @param application - Application data
*/
const Statistics: FC<{ application: Application | null }> = ({ application }) => {
const [data, setData] = useState<StatisticsData>({
daily_conversations: [],
@@ -35,6 +50,9 @@ const Statistics: FC<{ application: Application | null }> = ({ application }) =>
useEffect(() => {
getData()
}, [application, query])
/**
* Fetch statistics data
*/
const getData = () => {
if (!application?.id) {
return
@@ -49,6 +67,10 @@ const Statistics: FC<{ application: Application | null }> = ({ application }) =>
setData(res as StatisticsData)
})
}
/**
* Handle date range change
* @param date - Selected date range
*/
const handleChange = (date: [Dayjs | null, Dayjs | null] | null) => {
if (!date || !date[0] || !date[1]) return
setQuery({

33
web/src/views/ApplicationConfig/components/AiPromptModal.tsx
View File

@@ -1,3 +1,15 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:26:44
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:26:44
*/
/**
* AI Prompt Assistant Modal
* Provides an interactive chat interface to help users optimize their prompts using AI
* Features model selection, chat history, and variable insertion
*/
import { forwardRef, useImperativeHandle, useState, useRef } from 'react';
import { Button, Form, Input, App, Row, Col } from 'antd';
import { useTranslation } from 'react-i18next';
@@ -19,11 +31,20 @@ import AiPromptVariableModal from './AiPromptVariableModal'
import { type SSEMessage } from '@/utils/stream'
import Editor from './Editor'
/**
* Component props
*/
interface AiPromptModalProps {
/** Callback to refresh prompt with optimized value */
refresh: (value: string) => void;
/** Default model to pre-select */
defaultModel: ModelListItem | null;
}
/**
* AI Prompt Assistant Modal Component
* Helps users create and optimize prompts through AI-powered conversation
*/
const AiPromptModal = forwardRef<AiPromptModalRef, AiPromptModalProps>(({
refresh,
defaultModel,
@@ -42,7 +63,7 @@ const AiPromptModal = forwardRef<AiPromptModalRef, AiPromptModalProps>(({
const values = Form.useWatch([], form)
// 封装取消方法，添加关闭弹窗逻辑
/** Close modal and reset state */
const handleClose = () => {
setVisible(false);
setLoading(false)
@@ -54,6 +75,7 @@ const AiPromptModal = forwardRef<AiPromptModalRef, AiPromptModalProps>(({
})
};
/** Open modal and create new prompt session */
const handleOpen = () => {
createPromptSessions()
.then(res => {
@@ -66,6 +88,7 @@ const AiPromptModal = forwardRef<AiPromptModalRef, AiPromptModalProps>(({
setVisible(true);
})
};
/** Send user message and get AI response */
const handleSend = () => {
if (!promptSession) return
if (!values.model_id) {
@@ -115,7 +138,7 @@ const AiPromptModal = forwardRef<AiPromptModalRef, AiPromptModalProps>(({
break;
case 'end':
setLoading(false)
// 流结束时同步表单值
// Sync form value when stream ends
form.setFieldsValue({ current_prompt: currentPromptValueRef.current })
break
}
@@ -134,14 +157,17 @@ const AiPromptModal = forwardRef<AiPromptModalRef, AiPromptModalProps>(({
setLoading(false)
})
}
/** Copy current prompt to clipboard */
const handleCopy = () => {
if (!values.current_prompt || values?.current_prompt?.trim() === '') return
copy(values.current_prompt)
message.success(t('common.copySuccess'))
}
/** Open variable selection modal */
const handleAdd = () => {
aiPromptVariableModalRef.current?.handleOpen()
}
/** Insert variable into prompt editor */
const handleVariableApply = (value: string) => {
if (editorRef.current?.insertText) {
editorRef.current.insertText(value)
@@ -149,6 +175,7 @@ const AiPromptModal = forwardRef<AiPromptModalRef, AiPromptModalProps>(({
form.setFieldValue('current_prompt', (values.current_prompt || '') + value)
}
}
/** Apply optimized prompt and close modal */
const handleApply = () => {
if (!values.current_prompt) {
return
@@ -157,7 +184,7 @@ const AiPromptModal = forwardRef<AiPromptModalRef, AiPromptModalProps>(({
handleClose()
}
// 暴露给父组件的方法
/** Expose methods to parent component */
useImperativeHandle(ref, () => ({
handleOpen,
}));

33
web/src/views/ApplicationConfig/components/AiPromptVariableModal.tsx
View File

@@ -1,25 +1,42 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:27:14
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:27:14
*/
/**
* AI Prompt Variable Modal
* Allows users to insert variables into AI-generated prompts
* Supports autocomplete with existing variables
*/
import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
import { Form, Input, App, Select, AutoComplete, type AutoCompleteProps } from 'antd';
import { Form, AutoComplete, type AutoCompleteProps } from 'antd';
import { useTranslation } from 'react-i18next';
import type { Application } from '@/views/ApplicationManagement/types'
import type { AiPromptVariableModalRef } from '../types'
import { createApiKey } from '@/api/apiKey';
import RbModal from '@/components/RbModal'
const FormItem = Form.Item;
/**
* Component props
*/
interface AiPromptVariableModalProps {
/** Callback to insert variable into prompt */
refresh: (value: string) => void;
/** List of available variables */
variables: string[];
}
/**
* Variable selection modal for AI prompt assistant
*/
const AiPromptVariableModal = forwardRef<AiPromptVariableModalRef, AiPromptVariableModalProps>(({
refresh,
variables
}, ref) => {
const { t } = useTranslation();
const { message } = App.useApp();
const [visible, setVisible] = useState(false);
const [form] = Form.useForm();
const [loading, setLoading] = useState(false)
@@ -31,6 +48,7 @@ const AiPromptVariableModal = forwardRef<AiPromptVariableModalRef, AiPromptVaria
label: `{{${key}}}`
})))
}, [variables])
/** Search and filter variables */
const handleSearch = (value: string) => {
const filterKeys = variables?.filter(key => key.includes(value))
@@ -47,18 +65,19 @@ const AiPromptVariableModal = forwardRef<AiPromptVariableModalRef, AiPromptVaria
}
}
// 封装取消方法，添加关闭弹窗逻辑
/** Close modal and reset form */
const handleClose = () => {
setVisible(false);
form.resetFields();
setLoading(false)
};
/** Open modal */
const handleOpen = () => {
setVisible(true);
form.resetFields();
};
// 封装保存方法，添加提交逻辑
/** Apply selected variable */
const handleSave = () => {
const variableName = form.getFieldValue('variableName')
@@ -68,7 +87,7 @@ const AiPromptVariableModal = forwardRef<AiPromptVariableModalRef, AiPromptVaria
handleClose()
}
// 暴露给父组件的方法
/** Expose methods to parent component */
useImperativeHandle(ref, () => ({
handleOpen,
handleClose

31
web/src/views/ApplicationConfig/components/ApiKeyConfigModal.tsx
View File

@@ -1,3 +1,14 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:27:22
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:27:22
*/
/**
* API Key Configuration Modal
* Allows configuring rate limits and daily usage limits for API keys
*/
import { forwardRef, useImperativeHandle, useState } from 'react';
import { Form, Slider } from 'antd';
import { useTranslation } from 'react-i18next';
@@ -7,10 +18,17 @@ import RbModal from '@/components/RbModal'
import { updateApiKey } from '@/api/apiKey';
import type { ApiKey } from '@/views/ApiKeyManagement/types'
/**
* Component props
*/
interface ApiKeyConfigModalProps {
/** Callback to refresh API key list */
refresh: () => void;
}
const ApiKeyConfigModal = forwardRef<ApiKeyConfigModalRef, ApiKeyConfigModalProps>(({
/**
* Modal for configuring API key limits
*/const ApiKeyConfigModal = forwardRef<ApiKeyConfigModalRef, ApiKeyConfigModalProps>(({
refresh
}, ref) => {
const { t } = useTranslation();
@@ -20,7 +38,7 @@ const ApiKeyConfigModal = forwardRef<ApiKeyConfigModalRef, ApiKeyConfigModalProp
const values = Form.useWatch<ApiKey>([], form)
const [editVo, setEditVo] = useState<ApiKey | null>(null)
// 封装取消方法，添加关闭弹窗逻辑
/** Close modal and reset state */
const handleClose = () => {
form.resetFields();
setLoading(false)
@@ -28,6 +46,7 @@ const ApiKeyConfigModal = forwardRef<ApiKeyConfigModalRef, ApiKeyConfigModalProp
setVisible(false);
};
/** Open modal with API key data */
const handleOpen = (apiKey: ApiKey) => {
setVisible(true);
setEditVo(apiKey)
@@ -36,7 +55,7 @@ const ApiKeyConfigModal = forwardRef<ApiKeyConfigModalRef, ApiKeyConfigModalProp
rate_limit: apiKey.rate_limit
});
};
// 封装保存方法，添加提交逻辑
/** Save API key configuration */
const handleSave = () => {
if (!editVo?.id) return
form.validateFields()
@@ -52,7 +71,7 @@ const ApiKeyConfigModal = forwardRef<ApiKeyConfigModalRef, ApiKeyConfigModalProp
})
}
// 暴露给父组件的方法
/** Expose methods to parent component */
useImperativeHandle(ref, () => ({
handleOpen,
handleClose
@@ -73,7 +92,7 @@ const ApiKeyConfigModal = forwardRef<ApiKeyConfigModalRef, ApiKeyConfigModalProp
className="rb:px-2.5!"
scrollToFirstError={{ behavior: 'instant', block: 'end', focus: true }}
>
{/* QPS 限制（每秒请求数） */}
{/* QPS limit (requests per second) */}
<>
<div className="rb:text-[14px] rb:font-medium rb:leading-5 rb:mb-2">
{t(`application.qpsLimit`)}({t('application.qpsLimitTip')})
@@ -98,7 +117,7 @@ const ApiKeyConfigModal = forwardRef<ApiKeyConfigModalRef, ApiKeyConfigModalProp
</div>
</div>
</>
{/* 日调用量限制 */}
{/* Daily usage limit */}
<>
<div className="rb:text-[14px] rb:font-medium rb:leading-5 rb:mt-6 rb:mb-2">
{t(`application.dailyUsageLimit`)}

30
web/src/views/ApplicationConfig/components/ApiKeyModal.tsx
View File

@@ -1,3 +1,14 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:27:25
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:27:25
*/
/**
* API Key Creation Modal
* Allows creating new API keys for application access
*/
import { forwardRef, useImperativeHandle, useState } from 'react';
import { Form, Input, App } from 'antd';
import { useTranslation } from 'react-i18next';
@@ -9,11 +20,19 @@ import RbModal from '@/components/RbModal'
const FormItem = Form.Item;
/**
* Component props
*/
interface ApiKeyModalProps {
/** Callback to refresh API key list */
refresh: () => void;
/** Application data */
application?: Application | null;
}
/**
* Modal for creating new API keys
*/
const ApiKeyModal = forwardRef<ApiKeyModalRef, ApiKeyModalProps>(({
refresh,
application
@@ -24,18 +43,19 @@ const ApiKeyModal = forwardRef<ApiKeyModalRef, ApiKeyModalProps>(({
const [form] = Form.useForm();
const [loading, setLoading] = useState(false)
// 封装取消方法，添加关闭弹窗逻辑
/** Close modal and reset form */
const handleClose = () => {
setVisible(false);
form.resetFields();
setLoading(false)
};
/** Open modal */
const handleOpen = () => {
setVisible(true);
form.resetFields();
};
// 封装保存方法，添加提交逻辑
/** Create new API key */
const handleSave = () => {
if (!application) return
form.validateFields()
@@ -58,7 +78,7 @@ const ApiKeyModal = forwardRef<ApiKeyModalRef, ApiKeyModalProps>(({
})
}
// 暴露给父组件的方法
/** Expose methods to parent component */
useImperativeHandle(ref, () => ({
handleOpen,
handleClose
@@ -78,7 +98,7 @@ const ApiKeyModal = forwardRef<ApiKeyModalRef, ApiKeyModalProps>(({
layout="vertical"
scrollToFirstError={{ behavior: 'instant', block: 'end', focus: true }}
>
{/* Key 名称 */}
{/* Key name */}
<FormItem
name="name"
label={t('application.apiKeyName')}
@@ -89,7 +109,7 @@ const ApiKeyModal = forwardRef<ApiKeyModalRef, ApiKeyModalProps>(({
>
<Input placeholder={t('application.apiKeyNamePlaceholder')} />
</FormItem>
{/* 描述 */}
{/* Description */}
<FormItem
name="description"
label={t('application.description')}

18
web/src/views/ApplicationConfig/components/Card.tsx
View File

@@ -1,13 +1,31 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:27:31
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:27:31
*/
import { type FC, type ReactNode } from 'react'
import RbCard from '@/components/RbCard/Card'
/**
* Props for Card component
*/
interface CardProps {
/** Card title */
title?: string | ReactNode;
/** Card subtitle */
subTitle?: string | ReactNode;
/** Card content */
children: ReactNode;
/** Extra content in header */
extra?: ReactNode;
}
/**
* Card component wrapper
* Styled card with left border accent for application configuration sections
*/
const Card: FC<CardProps> = ({
title,
subTitle,

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

@@ -1,7 +1,20 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:27:39
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:27:39
*/
/**
* Chat debugging component for application testing
* Supports both single agent and multi-agent cluster modes
* Provides real-time streaming responses and conversation history
*/
import { type FC, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import clsx from 'clsx'
import { Input, Form } from 'antd'
import ChatIcon from '@/assets/images/application/chat.png'
import ChatSendIcon from '@/assets/images/application/chatSend.svg'
import DebuggingEmpty from '@/assets/images/application/debuggingEmpty.png'
@@ -12,13 +25,26 @@ import ChatContent from '@/components/Chat/ChatContent'
import type { ChatItem } from '@/components/Chat/types'
import { type SSEMessage } from '@/utils/stream'
/**
* Component props
*/
interface ChatProps {
/** List of chat configurations for comparison */
chatList: ChatData[];
/** Application configuration data */
data: Config;
/** Update chat list state */
updateChatList: React.Dispatch<React.SetStateAction<ChatData[]>>;
/** Save configuration before running */
handleSave: (flag?: boolean) => Promise<unknown>;
/** Source type: multi-agent cluster or single agent */
source?: 'multi_agent' | 'agent';
}
/**
* Chat debugging component
* Allows testing application with different model configurations side-by-side
*/
const Chat: FC<ChatProps> = ({ chatList, data, updateChatList, handleSave, source = 'agent' }) => {
const { t } = useTranslation();
const [form] = Form.useForm<{ message: string }>()
@@ -31,6 +57,7 @@ const Chat: FC<ChatProps> = ({ chatList, data, updateChatList, handleSave, sourc
setIsCluster(source === 'multi_agent')
}, [source])
/** Add user message to all chat lists */
const addUserMessage = (message: string) => {
const newUserMessage: ChatItem = {
role: 'user',
@@ -42,6 +69,7 @@ const Chat: FC<ChatProps> = ({ chatList, data, updateChatList, handleSave, sourc
list: [...(item.list || []), newUserMessage]
})))
}
/** Add empty assistant message placeholder */
const addAssistantMessage = () => {
const assistantMessage: ChatItem = {
role: 'assistant',
@@ -65,6 +93,7 @@ const Chat: FC<ChatProps> = ({ chatList, data, updateChatList, handleSave, sourc
})))
}
}
/** Update assistant message with streaming content */
const updateAssistantMessage = (content?: string, model_config_id?: string, conversation_id?: string) => {
if (!content || !model_config_id) return
updateChatList(prev => {
@@ -92,6 +121,7 @@ const Chat: FC<ChatProps> = ({ chatList, data, updateChatList, handleSave, sourc
return prev;
})
}
/** Update assistant message when error occurs */
const updateErrorAssistantMessage = (message_length: number, model_config_id?: string) => {
if (message_length > 0 || !model_config_id) return
@@ -120,6 +150,7 @@ const Chat: FC<ChatProps> = ({ chatList, data, updateChatList, handleSave, sourc
return prev
})
}
/** Send message for agent comparison mode */
const handleSend = () => {
if (loading) return
setLoading(true)
@@ -176,6 +207,7 @@ const Chat: FC<ChatProps> = ({ chatList, data, updateChatList, handleSave, sourc
})
}
/** Add assistant message for cluster mode */
const addClusterAssistantMessage = () => {
const assistantMessage: ChatItem = {
role: 'assistant',
@@ -187,6 +219,7 @@ const Chat: FC<ChatProps> = ({ chatList, data, updateChatList, handleSave, sourc
list: [...(item.list || []), assistantMessage]
})))
}
/** Update cluster assistant message with content */
const updateClusterAssistantMessage = (content?: string) => {
if (!content) return
updateChatList(prev => {
@@ -209,6 +242,7 @@ const Chat: FC<ChatProps> = ({ chatList, data, updateChatList, handleSave, sourc
return [...modelChatList]
})
}
/** Update cluster message when error occurs */
const updateClusterErrorAssistantMessage = (message_length: number) => {
if (message_length > 0) return
@@ -232,6 +266,7 @@ const Chat: FC<ChatProps> = ({ chatList, data, updateChatList, handleSave, sourc
return [...modelChatList]
})
}
/** Send message for cluster mode */
const handleClusterSend = () => {
if (loading) return
setLoading(true)
@@ -291,6 +326,7 @@ const Chat: FC<ChatProps> = ({ chatList, data, updateChatList, handleSave, sourc
})
}
/** Delete chat configuration from list */
const handleDelete = (index: number) => {
updateChatList(chatList.filter((_, voIndex) => voIndex !== index))
}

25
web/src/views/ApplicationConfig/components/ChatVariableConfigModal.tsx
View File

@@ -1,3 +1,14 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:27:44
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:27:44
*/
/**
* Chat Variable Configuration Modal
* Allows users to configure variable values before starting a chat session
*/
import { forwardRef, useImperativeHandle, useState } from 'react';
import { Form, Input, InputNumber } from 'antd';
import { useTranslation } from 'react-i18next';
@@ -6,10 +17,17 @@ import type { ChatVariableConfigModalRef } from '../types'
import type { Variable } from './VariableList/types'
import RbModal from '@/components/RbModal'
/**
* Component props
*/
interface VariableEditModalProps {
/** Callback to update variables */
refresh: (values: Variable[]) => void;
}
/**
* Modal for configuring chat variables
*/
const ChatVariableConfigModal = forwardRef<ChatVariableConfigModalRef, VariableEditModalProps>(({
refresh,
}, ref) => {
@@ -19,20 +37,21 @@ const ChatVariableConfigModal = forwardRef<ChatVariableConfigModalRef, VariableE
const [loading, setLoading] = useState(false)
const [initialValues, setInitialValues] = useState<Variable[]>([])
// 封装取消方法，添加关闭弹窗逻辑
/** Close modal and reset form */
const handleClose = () => {
setVisible(false);
form.resetFields();
setLoading(false)
};
/** Open modal with variable list */
const handleOpen = (values: Variable[]) => {
console.log('values', values)
setVisible(true);
form.setFieldsValue({variables: values})
setInitialValues([...values])
};
// 封装保存方法，添加提交逻辑
/** Save variable configuration */
const handleSave = () => {
form.validateFields().then((values) => {
refresh([
@@ -42,7 +61,7 @@ const ChatVariableConfigModal = forwardRef<ChatVariableConfigModalRef, VariableE
})
}
// 暴露给父组件的方法
/** Expose methods to parent component */
useImperativeHandle(ref, () => ({
handleOpen,
handleClose

56
web/src/views/ApplicationConfig/components/ConfigHeader.tsx
View File

@@ -1,8 +1,15 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:27:52
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:27:52
*/
import { type FC, useRef } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { Layout, Tabs, Dropdown, Button, Flex } from 'antd';
import type { MenuProps } from 'antd';
import { useTranslation } from 'react-i18next';
import styles from '../index.module.css'
import logoutIcon from '@/assets/images/logout.svg'
import editIcon from '@/assets/images/edit_hover.svg'
@@ -17,21 +24,43 @@ import CopyModal from './CopyModal'
const { Header } = Layout;
/**
* Tab keys for application configuration
*/
const tabKeys = ['arrangement', 'api', 'release', 'statistics']
/**
* Menu icon mapping
*/
const menuIcons: Record<string, string> = {
edit: editIcon,
copy: copyIcon,
export: exportIcon,
delete: deleteIcon
}
/**
* Props for ConfigHeader component
*/
interface ConfigHeaderProps {
/** Application data */
application?: Application;
/** Active tab key */
activeTab: string;
/** Tab change handler */
handleChangeTab: (key: string) => void;
/** Refresh application data */
refresh: () => void;
/** Workflow component ref */
workflowRef: React.RefObject<WorkflowRef>
/** App component ref (Agent/Cluster/Workflow) */
appRef?: React.RefObject<AgentRef | ClusterRef | WorkflowRef>
}
/**
* Configuration header component
* Displays application name, tabs, and action buttons
*/
const ConfigHeader: FC<ConfigHeaderProps> = ({
application, activeTab, handleChangeTab, refresh,
workflowRef,
@@ -42,12 +71,18 @@ const ConfigHeader: FC<ConfigHeaderProps> = ({
const applicationModalRef = useRef<ApplicationModalRef>(null);
const copyModalRef = useRef<CopyModalRef>(null);
/**
* Format tab items for display
*/
const formatTabItems = () => {
return tabKeys.map(key => ({
key,
label: t(`application.${key}`),
}))
}
/**
* Format dropdown menu items
*/
const formatMenuItems = () => {
const items = ['edit', 'copy', 'export', 'delete'].map(key => ({
key,
@@ -59,6 +94,9 @@ const ConfigHeader: FC<ConfigHeaderProps> = ({
onClick: handleClick
}
}
/**
* Handle menu item click
*/
const handleClick: MenuProps['onClick'] = ({ key }) => {
switch (key) {
case 'edit':
@@ -74,6 +112,9 @@ const ConfigHeader: FC<ConfigHeaderProps> = ({
break;
}
}
/**
* Delete application with confirmation
*/
const handleDelete = () => {
if (!id) {
return
@@ -86,21 +127,36 @@ const ConfigHeader: FC<ConfigHeaderProps> = ({
console.error('Failed to delete application');
});
}
/**
* Navigate to application list
*/
const goToApplication = () => {
navigate('/application', { replace: true })
}
/**
* Save workflow configuration
*/
const save = () => {
workflowRef.current?.handleSave()
}
/**
* Run workflow
*/
const run = () => {
workflowRef.current?.handleSave(false)
.then(() => {
workflowRef.current?.handleRun()
})
}
/**
* Clear workflow canvas
*/
const clear = () => {
workflowRef?.current?.graphRef?.current?.clearCells()
}
/**
* Add variable to workflow
*/
const addvariable = () => {
workflowRef?.current?.addVariable()
}

27
web/src/views/ApplicationConfig/components/CopyModal.tsx
View File

@@ -1,3 +1,14 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:27:56
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:27:56
*/
/**
* Copy Application Modal
* Allows users to duplicate an existing application with a new name
*/
import { forwardRef, useImperativeHandle, useState } from 'react';
import { Form, Input } from 'antd';
import { useTranslation } from 'react-i18next';
@@ -10,10 +21,17 @@ import type { Application } from '@/views/ApplicationManagement/types'
const FormItem = Form.Item;
/**
* Component props
*/
interface CopyModalProps {
/** Application data to copy */
data: Application
}
/**
* Modal for copying applications
*/
const CopyModal = forwardRef<CopyModalRef, CopyModalProps>(({
data
}, ref) => {
@@ -23,17 +41,18 @@ const CopyModal = forwardRef<CopyModalRef, CopyModalProps>(({
const [form] = Form.useForm();
const [loading, setLoading] = useState(false)
// 封装取消方法，添加关闭弹窗逻辑
/** Close modal and reset form */
const handleClose = () => {
setVisible(false);
form.resetFields();
setLoading(false)
};
/** Open modal */
const handleOpen = () => {
setVisible(true);
};
// 封装保存方法，添加提交逻辑
/** Copy application with new name */
const handleSave = () => {
setVisible(false);
setLoading(true)
@@ -48,7 +67,7 @@ const CopyModal = forwardRef<CopyModalRef, CopyModalProps>(({
})
}
// 暴露给父组件的方法
/** Expose methods to parent component */
useImperativeHandle(ref, () => ({
handleOpen,
handleClose
@@ -68,7 +87,7 @@ const CopyModal = forwardRef<CopyModalRef, CopyModalProps>(({
form={form}
layout="vertical"
>
{/* 应用名 */}
{/* Application name */}
<FormItem
name="new_name"
label={t('application.applicationName')}

44
web/src/views/ApplicationConfig/components/Editor/index.tsx
View File

@@ -1,3 +1,14 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:25:17
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:25:17
*/
/**
* Rich text editor component using Lexical framework
* Provides text editing with insert, append, clear, and scroll capabilities
*/
import {forwardRef, useImperativeHandle } from 'react';
import clsx from 'clsx';
import { LexicalComposer } from '@lexical/react/LexicalComposer';
@@ -6,25 +17,44 @@ import { ContentEditable } from '@lexical/react/LexicalContentEditable';
import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
import { $getSelection, $getRoot, $createParagraphNode, $createTextNode, $isParagraphNode, $isTextNode } from 'lexical';
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
import InitialValuePlugin from './plugin/InitialValuePlugin'
import LineBreakPlugin from './plugin/LineBreakPlugin';
import InsertTextPlugin from './plugin/InsertTextPlugin';
/**
* Editor ref methods exposed to parent components
*/
export interface EditorRef {
/** Insert text at current cursor position */
insertText: (text: string) => void;
/** Append text to the end of content */
appendText: (text: string) => void;
/** Clear all editor content */
clear: () => void;
/** Scroll editor to bottom */
scrollToBottom: () => void;
}
/**
* Editor component props
*/
interface LexicalEditorProps {
/** Additional CSS class names */
className?: string;
/** Placeholder text when editor is empty */
placeholder?: string;
/** Initial editor value */
value?: string;
/** Callback when content changes */
onChange?: (value: string) => void;
/** Editor height in pixels */
height?: number;
}
/**
* Lexical editor theme configuration
*/
const theme = {
paragraph: 'editor-paragraph',
text: {
@@ -33,6 +63,9 @@ const theme = {
},
};
/**
* Editor content component with Lexical context
*/
const EditorContent = forwardRef<EditorRef, LexicalEditorProps>(({
className = '',
value,
@@ -41,6 +74,13 @@ const EditorContent = forwardRef<EditorRef, LexicalEditorProps>(({
}, ref) => {
const [editor] = useLexicalComposerContext();
/**
* Expose editor methods to parent component
* - insertText: Insert at cursor position
* - appendText: Append to end of content
* - clear: Clear all content
* - scrollToBottom: Scroll to bottom
*/
useImperativeHandle(ref, () => ({
insertText: (text: string) => {
editor.update(() => {
@@ -109,6 +149,10 @@ const EditorContent = forwardRef<EditorRef, LexicalEditorProps>(({
);
});
/**
* Main editor wrapper component
* Initializes Lexical composer with configuration
*/
const Editor = forwardRef<EditorRef, LexicalEditorProps>((props, ref) => {
const initialConfig = {
namespace: 'Editor',

22
web/src/views/ApplicationConfig/components/Editor/plugin/InitialValuePlugin.tsx
View File

@@ -1,20 +1,34 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:24:59
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:24:59
*/
/**
* Initial Value Plugin
* Sets the initial content of the Lexical editor
* Only updates when the value prop changes
*/
import { type FC, useEffect, useRef } from 'react';
import { $getRoot, $createParagraphNode, $createTextNode } from 'lexical';
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
// 设置初始值的插件
/**
* Plugin to set initial editor value
*/
const InitialValuePlugin: FC<{ value?: string }> = ({ value }) => {
const [editor] = useLexicalComposerContext();
const lastValueRef = useRef<string | undefined>(undefined);
useEffect(() => {
// 只有当value真正发生变化时才更新
// Only update when value actually changes
if (lastValueRef.current !== value) {
editor.update(() => {
const root = $getRoot();
const currentText = root.getTextContent();
// 如果当前内容和新值相同，则不更新
// If current content matches new value, don't update
if (currentText === (value || '')) {
return;
}
@@ -26,7 +40,7 @@ const InitialValuePlugin: FC<{ value?: string }> = ({ value }) => {
paragraph.append(textNode);
root.append(paragraph);
} else {
// 当value为undefined或空时，创建一个空段落
// When value is undefined or empty, create an empty paragraph
const paragraph = $createParagraphNode();
root.append(paragraph);
}

18
web/src/views/ApplicationConfig/components/Editor/plugin/InsertTextPlugin.tsx
View File

@@ -1,10 +1,22 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:25:05
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:25:05
*/
/**
* Insert Text Plugin
* Provides functionality to insert text at the current cursor position
*/
import { forwardRef, useImperativeHandle } from 'react';
import { $getSelection } from 'lexical';
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
import type { EditorRef } from '../index'
// 插入文本的插件
const InsertTextPlugin = forwardRef<EditorRef>((_, ref) => {
/**
* Plugin to insert text at cursor position
*/
const InsertTextPlugin = forwardRef<{ insertText: (text: string) => void; }>((_, ref) => {
const [editor] = useLexicalComposerContext();
useImperativeHandle(ref, () => ({

18
web/src/views/ApplicationConfig/components/Editor/plugin/LineBreakPlugin.tsx
View File

@@ -1,8 +1,22 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:25:09
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:25:09
*/
/**
* Line Break Plugin
* Handles line breaks and triggers onChange callback when editor content changes
* Converts \n escape sequences to actual line breaks
*/
import { type FC, useEffect } from 'react';
import { $getRoot } from 'lexical';
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
// 处理换行的插件
/**
* Plugin to handle line breaks and content changes
*/
const LineBreakPlugin: FC<{ onChange?: (value: string) => void }> = ({ onChange }) => {
const [editor] = useLexicalComposerContext();
@@ -11,7 +25,7 @@ const LineBreakPlugin: FC<{ onChange?: (value: string) => void }> = ({ onChange
editorState.read(() => {
const root = $getRoot();
const textContent = root.getTextContent();
// 将\n转换为实际换行
// Convert \n to actual line breaks
const processedContent = textContent.replace(/\\n/g, '\n');
onChange?.(processedContent);
});

27
web/src/views/ApplicationConfig/components/Knowledge/Knowledge.tsx
View File

@@ -1,6 +1,19 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:25:32
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:25:32
*/
/**
* Knowledge Base Component
* Manages knowledge base associations for the application
* Allows adding, configuring, and removing knowledge bases
*/
import { type FC, useRef, useState, useEffect } from 'react'
import { useTranslation } from 'react-i18next'
import { Space, Button, List } from 'antd'
import knowledgeEmpty from '@/assets/images/application/knowledgeEmpty.svg'
import type {
KnowledgeConfigForm,
@@ -19,6 +32,11 @@ import Tag from '@/components/Tag'
import { getKnowledgeBaseList } from '@/api/knowledgeBase'
import Card from '../Card'
/**
* Knowledge base management component
* @param value - Current knowledge configuration
* @param onChange - Callback when configuration changes
*/
const Knowledge: FC<{value?: KnowledgeConfig; onChange?: (config: KnowledgeConfig) => void}> = ({value = {knowledge_bases: []}, onChange}) => {
const { t } = useTranslation()
const knowledgeModalRef = useRef<KnowledgeModalRef>(null)
@@ -32,10 +50,10 @@ const Knowledge: FC<{value?: KnowledgeConfig; onChange?: (config: KnowledgeConfi
setEditConfig({ ...(value || {}) })
const knowledge_bases = [...(value.knowledge_bases || [])]
// 检查是否有knowledge_bases缺少name字段
// Check if knowledge_bases are missing name field
const basesWithoutName = knowledge_bases.filter(base => !base.name)
if (basesWithoutName.length > 0) {
// 调用接口获取完整的知识库信息
// Call API to get complete knowledge base information
getKnowledgeBaseList().then(res => {
const fullBases = knowledge_bases.map(base => {
if (!base.name) {
@@ -54,12 +72,15 @@ const Knowledge: FC<{value?: KnowledgeConfig; onChange?: (config: KnowledgeConfi
}
}, [value])
/** Open global knowledge configuration modal */
const handleKnowledgeConfig = () => {
knowledgeGlobalConfigModalRef.current?.handleOpen()
}
/** Open knowledge base selection modal */
const handleAddKnowledge = () => {
knowledgeModalRef.current?.handleOpen()
}
/** Remove knowledge base from list */
const handleDeleteKnowledge = (id: string) => {
const list = knowledgeList.filter(item => item.id !== id)
setKnowledgeList([...list])
@@ -68,9 +89,11 @@ const Knowledge: FC<{value?: KnowledgeConfig; onChange?: (config: KnowledgeConfi
knowledge_bases: [...list],
})
}
/** Open knowledge base configuration modal */
const handleEditKnowledge = (item: KnowledgeBase) => {
knowledgeConfigModalRef.current?.handleOpen(item)
}
/** Update knowledge configuration */
const refresh = (values: KnowledgeBase[] | KnowledgeConfigForm | RerankerConfig, type: 'knowledge' | 'knowledgeConfig' | 'rerankerConfig') => {
if (type === 'knowledge') {
let list = [...knowledgeList]

38
web/src/views/ApplicationConfig/components/Knowledge/KnowledgeConfigModal.tsx
View File

@@ -1,3 +1,15 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:25:37
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:25:37
*/
/**
* Knowledge Configuration Modal
* Configures retrieval settings for individual knowledge bases
* Supports different retrieval modes: participle, semantic, and hybrid
*/
import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
import { Form, Select, InputNumber } from 'antd';
import { useTranslation } from 'react-i18next';
@@ -9,11 +21,22 @@ import { formatDateTime } from '@/utils/format';
const FormItem = Form.Item;
/**
* Component props
*/
interface KnowledgeConfigModalProps {
/** Callback to update knowledge configuration */
refresh: (values: KnowledgeConfigForm, type: 'knowledgeConfig') => void;
}
/**
* Available retrieval types
*/
const retrieveTypes: RetrieveType[] = ['participle', 'semantic', 'hybrid']
/**
* Modal for configuring knowledge base retrieval settings
*/
const KnowledgeConfigModal = forwardRef<KnowledgeConfigModalRef, KnowledgeConfigModalProps>(({
refresh,
}, ref) => {
@@ -24,13 +47,14 @@ const KnowledgeConfigModal = forwardRef<KnowledgeConfigModalRef, KnowledgeConfig
const values = Form.useWatch<KnowledgeConfigForm>([], form);
// 封装取消方法，添加关闭弹窗逻辑
/** Close modal and reset form */
const handleClose = () => {
setVisible(false);
form.resetFields();
setData(null)
};
/** Open modal with knowledge base data */
const handleOpen = (data: KnowledgeBase) => {
form.setFieldsValue({
retrieve_type: data?.config?.retrieve_type || retrieveTypes[0],
@@ -44,7 +68,7 @@ const KnowledgeConfigModal = forwardRef<KnowledgeConfigModalRef, KnowledgeConfig
setData({...data})
setVisible(true);
};
// 封装保存方法，添加提交逻辑
/** Save knowledge configuration */
const handleSave = () => {
form
.validateFields()
@@ -57,7 +81,7 @@ const KnowledgeConfigModal = forwardRef<KnowledgeConfigModalRef, KnowledgeConfig
});
}
// 暴露给父组件的方法
/** Expose methods to parent component */
useImperativeHandle(ref, () => ({
handleOpen,
handleClose
@@ -94,7 +118,7 @@ const KnowledgeConfigModal = forwardRef<KnowledgeConfigModalRef, KnowledgeConfig
</div>
)}
<FormItem name="kb_id" hidden />
{/* 检索模式 */}
{/* Retrieval mode */}
<FormItem
name="retrieve_type"
label={t('application.retrieve_type')}
@@ -124,7 +148,7 @@ const KnowledgeConfigModal = forwardRef<KnowledgeConfigModalRef, KnowledgeConfig
onChange={(value) => form.setFieldValue('top_k', value)}
/>
</FormItem>
{/* 语义相似度阈值 similarity_threshold */}
{/* Semantic similarity threshold */}
{values?.retrieve_type === 'semantic' && (
<FormItem
name="similarity_threshold"
@@ -139,7 +163,7 @@ const KnowledgeConfigModal = forwardRef<KnowledgeConfigModalRef, KnowledgeConfig
/>
</FormItem>
)}
{/* 分词匹配度阈值 vector_similarity_weight */}
{/* Word segmentation matching threshold */}
{values?.retrieve_type === 'participle' && (
<FormItem
name="vector_similarity_weight"
@@ -154,7 +178,7 @@ const KnowledgeConfigModal = forwardRef<KnowledgeConfigModalRef, KnowledgeConfig
/>
</FormItem>
)}
{/* 混合检索权重 */}
{/* Hybrid retrieval weight */}
{values?.retrieve_type === 'hybrid' && (
<>
<FormItem

28
web/src/views/ApplicationConfig/components/Knowledge/KnowledgeGlobalConfigModal.tsx
View File

@@ -1,3 +1,14 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:25:42
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:25:42
*/
/**
* Knowledge Global Configuration Modal
* Configures global reranker settings for all knowledge bases
*/
import { forwardRef, useImperativeHandle, useState, useEffect } from 'react';
import { Form, InputNumber, Switch } from 'antd';
import { useTranslation } from 'react-i18next';
@@ -9,11 +20,19 @@ import { getModelListUrl } from '@/api/models'
const FormItem = Form.Item;
/**
* Component props
*/
interface KnowledgeGlobalConfigModalProps {
/** Current reranker configuration */
data: RerankerConfig;
/** Callback to update reranker configuration */
refresh: (values: RerankerConfig, type: 'rerankerConfig') => void;
}
/**
* Modal for configuring global reranker settings
*/
const KnowledgeGlobalConfigModal = forwardRef<KnowledgeGlobalConfigModalRef, KnowledgeGlobalConfigModalProps>(({
refresh,
data,
@@ -23,17 +42,18 @@ const KnowledgeGlobalConfigModal = forwardRef<KnowledgeGlobalConfigModalRef, Kno
const [form] = Form.useForm<RerankerConfig>();
const values = Form.useWatch<RerankerConfig>([], form);
// 封装取消方法，添加关闭弹窗逻辑
/** Close modal and reset form */
const handleClose = () => {
setVisible(false);
form.resetFields();
};
/** Open modal with current configuration */
const handleOpen = () => {
form.setFieldsValue({ ...data, rerank_model: !!data?.reranker_id })
setVisible(true);
};
// 封装保存方法，添加提交逻辑
/** Save reranker configuration */
const handleSave = () => {
form
.validateFields()
@@ -54,7 +74,7 @@ const KnowledgeGlobalConfigModal = forwardRef<KnowledgeGlobalConfigModalRef, Kno
}
}, [values?.rerank_model])
// 暴露给父组件的方法
/** Expose methods to parent component */
useImperativeHandle(ref, () => ({
handleOpen,
}));
@@ -73,7 +93,7 @@ const KnowledgeGlobalConfigModal = forwardRef<KnowledgeGlobalConfigModalRef, Kno
>
<div className="rb:text-[#5B6167] rb:mb-6">{t('application.globalConfigDesc')}</div>
{/* 结果重排 */}
{/* Result reranking */}
<div className="rb:flex rb:items-center rb:justify-between rb:my-6">
<div className="rb:text-[14px] rb:font-medium rb:leading-5">
{t('application.rerankModel')}

30
web/src/views/ApplicationConfig/components/Knowledge/KnowledgeListModal.tsx
View File

@@ -1,7 +1,19 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:25:49
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:25:49
*/
/**
* Knowledge List Modal
* Displays and allows selection of knowledge bases to associate with the application
*/
import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
import { Space, List } from 'antd';
import { useTranslation } from 'react-i18next';
import clsx from 'clsx'
import type { KnowledgeModalRef, KnowledgeBase } from './types'
import type { KnowledgeBaseListItem } from '@/views/KnowledgeBase/types'
import RbModal from '@/components/RbModal'
@@ -9,11 +21,19 @@ import { getKnowledgeBaseList } from '@/api/knowledgeBase'
import SearchInput from '@/components/SearchInput'
import Empty from '@/components/Empty'
import { formatDateTime } from '@/utils/format';
/**
* Component props
*/
interface KnowledgeModalProps {
/** Callback to add selected knowledge bases */
refresh: (rows: KnowledgeBase[], type: 'knowledge') => void;
/** Currently selected knowledge bases */
selectedList: KnowledgeBase[];
}
/**
* Modal for selecting knowledge bases
*/
const KnowledgeListModal = forwardRef<KnowledgeModalRef, KnowledgeModalProps>(({
refresh,
selectedList
@@ -26,7 +46,7 @@ const KnowledgeListModal = forwardRef<KnowledgeModalRef, KnowledgeModalProps>(({
const [selectedIds, setSelectedIds] = useState<string[]>([])
const [selectedRows, setSelectedRows] = useState<KnowledgeBase[]>([])
// 封装取消方法，添加关闭弹窗逻辑
/** Close modal and reset state */
const handleClose = () => {
setVisible(false);
setQuery({})
@@ -34,6 +54,7 @@ const KnowledgeListModal = forwardRef<KnowledgeModalRef, KnowledgeModalProps>(({
setSelectedRows([])
};
/** Open modal */
const handleOpen = () => {
setVisible(true);
setQuery({})
@@ -46,6 +67,7 @@ const KnowledgeListModal = forwardRef<KnowledgeModalRef, KnowledgeModalProps>(({
getList()
}
}, [query.keywords, visible])
/** Fetch knowledge base list */
const getList = () => {
getKnowledgeBaseList(undefined, {
...query,
@@ -58,7 +80,7 @@ const KnowledgeListModal = forwardRef<KnowledgeModalRef, KnowledgeModalProps>(({
setList(response.items || [])
})
}
// 封装保存方法，添加提交逻辑
/** Save selected knowledge bases */
const handleSave = () => {
refresh(selectedRows.map(item => ({
...item,
@@ -72,16 +94,18 @@ const KnowledgeListModal = forwardRef<KnowledgeModalRef, KnowledgeModalProps>(({
setVisible(false);
}
// 暴露给父组件的方法
/** Expose methods to parent component */
useImperativeHandle(ref, () => ({
handleOpen,
handleClose
}));
/** Search knowledge bases */
const handleSearch = (value?: string) => {
setQuery({keywords: value})
setSelectedIds([])
setSelectedRows([])
}
/** Toggle knowledge base selection */
const handleSelect = (item: KnowledgeBase) => {
const index = selectedIds.indexOf(item.id)
if (index === -1) {

57
web/src/views/ApplicationConfig/components/Knowledge/types.ts
View File

@@ -1,30 +1,87 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:25:53
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:25:53
*/
/**
* Type definitions for knowledge base configuration in application settings
*/
import type { KnowledgeBaseListItem } from '@/views/KnowledgeBase/types'
/**
* Reranker configuration for knowledge retrieval
*/
export interface RerankerConfig {
/** Whether to enable rerank model */
rerank_model?: boolean | undefined;
/** Reranker model ID */
reranker_id?: string | undefined;
/** Top K results for reranking */
reranker_top_k?: number | undefined;
}
/**
* Knowledge retrieval type
* - participle: Word segmentation based retrieval
* - semantic: Semantic similarity based retrieval
* - hybrid: Combination of both methods
*/
export type RetrieveType = 'participle' | 'semantic' | 'hybrid'
/**
* Knowledge base configuration form data
*/
export interface KnowledgeConfigForm {
/** Knowledge base ID */
kb_id?: string;
/** Similarity threshold for retrieval (0-1) */
similarity_threshold?: number;
/** Weight for vector similarity in hybrid mode (0-1) */
vector_similarity_weight?: number;
/** Number of top results to retrieve */
top_k?: number;
/** Retrieval strategy type */
retrieve_type?: RetrieveType;
}
/**
* Knowledge base with configuration
*/
export interface KnowledgeBase extends KnowledgeBaseListItem, KnowledgeConfigForm {
/** Additional configuration object */
config?: KnowledgeConfigForm
}
/**
* Complete knowledge configuration including reranker settings
*/
export interface KnowledgeConfig extends RerankerConfig {
/** List of configured knowledge bases */
knowledge_bases: KnowledgeBase[];
}
/**
* Modal ref for individual knowledge base configuration
*/
export interface KnowledgeConfigModalRef {
/** Open modal with knowledge base data */
handleOpen: (data: KnowledgeBase) => void;
}
/**
* Modal ref for global knowledge configuration
*/
export interface KnowledgeGlobalConfigModalRef {
/** Open global configuration modal */
handleOpen: () => void;
}
/**
* Modal ref for knowledge base selection
*/
export interface KnowledgeModalRef {
/** Open modal with optional existing configuration */
handleOpen: (config?: KnowledgeConfig[]) => void;
}

29
web/src/views/ApplicationConfig/components/LineCard.tsx
View File

@@ -1,18 +1,38 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:28:03
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:28:03
*/
/**
* Line chart card component for displaying statistics
* Uses ECharts to render time-series data with gradient area fill
*/
import { type FC, useEffect, useRef } from 'react'
import { useTranslation } from 'react-i18next'
import ReactEcharts from 'echarts-for-react';
import * as echarts from 'echarts';
import Empty from '@/components/Empty'
import Empty from '@/components/Empty'
import Card from './Card'
import type { StatisticsItem } from '../types'
/**
* Component props
*/
interface LineCardProps {
/** Chart data points */
chartData: StatisticsItem[];
/** Statistics type key */
type: string;
/** Total count to display */
total: number;
}
/**
* ECharts series configuration
*/
const SeriesConfig = {
type: 'line',
stack: 'Total',
@@ -30,6 +50,9 @@ const SeriesConfig = {
},
}
/**
* Color mapping for different statistic types
*/
const ColorObj: Record<string, string> = {
daily_conversations: '#FFB048',
daily_new_users: '#4DA8FF',
@@ -37,6 +60,10 @@ const ColorObj: Record<string, string> = {
daily_tokens: '#AD88FF'
}
/**
* Line chart card component
* Displays time-series statistics with gradient area chart
*/
const LineCard: FC<LineCardProps> = ({ chartData, type, total }) => {
const { t } = useTranslation()
const chartRef = useRef<ReactEcharts>(null);

32
web/src/views/ApplicationConfig/components/ModelConfigModal.tsx
View File

@@ -1,3 +1,15 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:28:07
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:28:07
*/
/**
* Model Configuration Modal
* Allows configuring model parameters like temperature, max_tokens, top_p, etc.
* Supports different sources: model, chat, and multi_agent
*/
import { forwardRef, useImperativeHandle, useState, useEffect } from 'react';
import { Form, Select } from 'antd';
import { useTranslation } from 'react-i18next';
@@ -9,12 +21,24 @@ import RbSlider from '@/components/RbSlider'
const FormItem = Form.Item;
/**
* Component props
*/
interface ModelConfigModalProps {
/** List of available models */
modelList?: ModelListItem[];
/** Callback to update model configuration */
refresh: (values: ModelConfig, type: Source) => void;
/** Application configuration data */
data: Config;
}
/**
* Modal for configuring model parameters
*/
/**
* Model parameter configuration fields
*/
const configFields = [
{ key: 'temperature', max: 2, min: 0, step: 0.1, defaultValue: 0.7 },
{ key: 'max_tokens', max: 32000, min: 256, step: 1, defaultValue: 2000 },
@@ -36,12 +60,13 @@ const ModelConfigModal = forwardRef<ModelConfigModalRef, ModelConfigModalProps>(
const values = Form.useWatch([], form);
// 封装取消方法，添加关闭弹窗逻辑
/** Close modal and reset form */
const handleClose = () => {
setVisible(false);
form.resetFields();
};
/** Open modal with configuration source */
const handleOpen = (source: Source, model?: any) => {
setSource(source)
if (source === 'model') {
@@ -64,7 +89,7 @@ const ModelConfigModal = forwardRef<ModelConfigModalRef, ModelConfigModalProps>(
}
setVisible(true);
};
// 封装保存方法，添加提交逻辑
/** Save model configuration */
const handleSave = () => {
form
.validateFields()
@@ -76,13 +101,14 @@ const ModelConfigModal = forwardRef<ModelConfigModalRef, ModelConfigModalProps>(
console.log('err', err)
});
}
/** Handle model selection change */
const handleChange = (_value: string, option: ModelListItem | ModelListItem[] | undefined) => {
if (source === 'chat') {
form.setFieldValue('label', (option as ModelListItem).name)
}
}
// 暴露给父组件的方法
/** Expose methods to parent component */
useImperativeHandle(ref, () => ({
handleOpen,
handleClose

30
web/src/views/ApplicationConfig/components/ReleaseModal.tsx
View File

@@ -1,3 +1,14 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:28:11
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:28:11
*/
/**
* Release Modal
* Allows publishing a new version of the application
*/
import { forwardRef, useImperativeHandle, useState } from 'react';
import { Form, Input } from 'antd';
import { useTranslation } from 'react-i18next';
@@ -9,11 +20,19 @@ import type { Application } from '@/views/ApplicationManagement/types'
const FormItem = Form.Item;
/**
* Component props
*/
interface ReleaseModalProps {
/** Callback to refresh release list */
refreshTable: () => void;
/** Application data */
data: Application
}
/**
* Modal for publishing new application versions
*/
const ReleaseModal = forwardRef<ReleaseModalRef, ReleaseModalProps>(({
refreshTable,
data
@@ -23,17 +42,18 @@ const ReleaseModal = forwardRef<ReleaseModalRef, ReleaseModalProps>(({
const [form] = Form.useForm();
const [loading, setLoading] = useState(false)
// 封装取消方法，添加关闭弹窗逻辑
/** Close modal and reset form */
const handleClose = () => {
setVisible(false);
form.resetFields();
setLoading(false)
};
/** Open modal */
const handleOpen = () => {
setVisible(true);
};
// 封装保存方法，添加提交逻辑
/** Publish new release */
const handleSave = () => {
form.validateFields().then(() => {
setLoading(true)
@@ -49,7 +69,7 @@ const ReleaseModal = forwardRef<ReleaseModalRef, ReleaseModalProps>(({
})
}
// 暴露给父组件的方法
/** Expose methods to parent component */
useImperativeHandle(ref, () => ({
handleOpen,
handleClose
@@ -69,7 +89,7 @@ const ReleaseModal = forwardRef<ReleaseModalRef, ReleaseModalProps>(({
form={form}
layout="vertical"
>
{/* 版本名 */}
{/* Version name */}
<FormItem
name="version_name"
label={t('application.versionName')}
@@ -80,7 +100,7 @@ const ReleaseModal = forwardRef<ReleaseModalRef, ReleaseModalProps>(({
>
<Input placeholder={t('common.enter')} />
</FormItem>
{/* 版本描述 */}
{/* Version description */}
<FormItem
name="release_notes"
label={t('application.versionDescription')}

30
web/src/views/ApplicationConfig/components/ReleaseShareModal.tsx
View File

@@ -1,3 +1,14 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:28:46
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:28:46
*/
/**
* Release Share Modal
* Generates and displays a shareable link for a specific application version
*/
import { forwardRef, useImperativeHandle, useState } from 'react';
import { Button, App } from 'antd';
import { ExclamationCircleFilled } from '@ant-design/icons';
@@ -9,10 +20,17 @@ import RbModal from '@/components/RbModal'
import { shareRelease } from '@/api/application'
import RbAlert from '@/components/RbAlert'
/**
* Component props
*/
interface ReleaseShareModalProps {
/** Version to share */
version: Release | null
}
/**
* Modal for sharing application versions
*/
const ReleaseShareModal = forwardRef<ReleaseShareModalRef, ReleaseShareModalProps>(({
version
}, ref) => {
@@ -22,12 +40,13 @@ const ReleaseShareModal = forwardRef<ReleaseShareModalRef, ReleaseShareModalProp
const [loading, setLoading] = useState(false)
const [shareLink, setShareLink] = useState<string | null>(null)
// 封装取消方法，添加关闭弹窗逻辑
/** Close modal */
const handleClose = () => {
setVisible(false);
setLoading(false)
};
/** Open modal and generate share link */
const handleOpen = () => {
if (!version) {
return
@@ -45,13 +64,14 @@ const ReleaseShareModal = forwardRef<ReleaseShareModalRef, ReleaseShareModalProp
setLoading(false)
})
};
/** Copy share link to clipboard */
const handleCopy = () => {
if (!shareLink) return
copy(shareLink)
message.success(t('common.copySuccess'))
}
// 暴露给父组件的方法
/** Expose methods to parent component */
useImperativeHandle(ref, () => ({
handleOpen,
handleClose
@@ -65,9 +85,9 @@ const ReleaseShareModal = forwardRef<ReleaseShareModalRef, ReleaseShareModalProp
footer={false}
>
<>
<div className="rb:leading-[20px] rb:mb-[8px]">{t('application.shareLink')}</div>
<div className="rb:mb-[12px] rb:flex rb:items-center rb:gap-[10px] rb:justify-between">
<div className="rb:overflow-hidden rb:whitespace-nowrap rb:text-ellipsis rb:cursor-pointer rb:h-[32px] rb:p-[6px_10px] rb:bg-[#FFFFFF] rb:border rb:border-[#EBEBEB] rb:rounded-[6px] rb:leading-[20px]">{shareLink}</div>
<div className="rb:leading-5 rb:mb-2">{t('application.shareLink')}</div>
<div className="rb:mb-3 rb:flex rb:items-center rb:gap-2.5 rb:justify-between">
<div className="rb:overflow-hidden rb:whitespace-nowrap rb:text-ellipsis rb:cursor-pointer rb:h-8 rb:p-[6px_10px] rb:bg-[#FFFFFF] rb:border rb:border-[#EBEBEB] rb:rounded-md rb:leading-5">{shareLink}</div>
<Button type="primary" loading={loading} disabled={!shareLink} onClick={handleCopy}>
{t('common.copy')}

32
web/src/views/ApplicationConfig/components/SubAgentModal.tsx
View File

@@ -1,3 +1,14 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:28:51
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:28:51
*/
/**
* Sub-Agent Modal
* Allows adding or editing sub-agents in multi-agent cluster configuration
*/
import { forwardRef, useImperativeHandle, useState, type Key } from 'react';
import { Form, Select, Input } from 'antd';
import type { DefaultOptionType } from 'antd/es/select'
@@ -10,10 +21,17 @@ import { getApplicationListUrl } from '@/api/application';
const FormItem = Form.Item;
/**
* Component props
*/
interface SubAgentModalProps {
/** Callback to update sub-agent */
refresh: (agent: SubAgentItem) => void;
}
/**
* Modal for managing sub-agents
*/
const SubAgentModal = forwardRef<SubAgentModalRef, SubAgentModalProps>(({
refresh,
}, ref) => {
@@ -24,19 +42,20 @@ const SubAgentModal = forwardRef<SubAgentModalRef, SubAgentModalProps>(({
const [editVo, setEditVo] = useState<SubAgentItem>()
const values = Form.useWatch([], form)
// 封装取消方法，添加关闭弹窗逻辑
/** Close modal and reset form */
const handleClose = () => {
setVisible(false);
form.resetFields();
setLoading(false)
};
/** Open modal with optional agent data */
const handleOpen = (agent?: SubAgentItem) => {
setVisible(true);
form.setFieldsValue(agent)
setEditVo(agent)
};
// 封装保存方法，添加提交逻辑
/** Save sub-agent configuration */
const handleSave = () => {
form.validateFields().then(() => {
setLoading(false)
@@ -47,6 +66,7 @@ const SubAgentModal = forwardRef<SubAgentModalRef, SubAgentModalProps>(({
handleClose()
})
}
/** Handle agent selection change */
const handleChange = (value: Key, option?: DefaultOptionType | DefaultOptionType[] | undefined) => {
console.log(value, option)
if (option && !Array.isArray(option)) {
@@ -54,7 +74,7 @@ const SubAgentModal = forwardRef<SubAgentModalRef, SubAgentModalProps>(({
}
}
// 暴露给父组件的方法
/** Expose methods to parent component */
useImperativeHandle(ref, () => ({
handleOpen,
handleClose
@@ -73,7 +93,7 @@ const SubAgentModal = forwardRef<SubAgentModalRef, SubAgentModalProps>(({
form={form}
layout="vertical"
>
{/* Agent名称 */}
{/* Agent name */}
<FormItem
name="agent_id"
label={t('application.agentName')}
@@ -93,14 +113,14 @@ const SubAgentModal = forwardRef<SubAgentModalRef, SubAgentModalProps>(({
/>
</FormItem>
<FormItem name="name" hidden />
{/* 描述 */}
{/* Description */}
<FormItem
name="role"
label={t('application.description')}
>
<Input.TextArea placeholder={t('common.pleaseEnter')} />
</FormItem>
{/* 关键词 */}
{/* Keywords */}
<FormItem
name="capabilities"
label={t('application.capabilities')}

25
web/src/views/ApplicationConfig/components/Tag.tsx
View File

@@ -1,11 +1,31 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:29:17
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:29:17
*/
/**
* Tag Component
* Displays colored status tags with different color schemes
*/
import { type FC, type ReactNode } from 'react'
/**
* Tag component props
*/
export interface TagProps {
/** Tag color scheme */
color?: 'processing' | 'warning' | 'default' | 'success';
/** Tag content */
children: ReactNode;
/** Additional CSS classes */
className?: string;
}
/**
* Color scheme mapping
*/
const colors = {
processing: 'rb:text-[#155EEF] rb:border-[rgba(21,94,239,0.25)] rb:bg-[rgba(21,94,239,0.06)]',
warning: 'rb:text-[#FF5D34] rb:border-[rgba(255,93,52,0.08)] rb:bg-[rgba(255,93,52,0.08)]',
@@ -13,9 +33,12 @@ const colors = {
success: 'rb:text-[#369F21] rb:border-[rgba(54,159,33,0.30)] rb:bg-[rgba(54,159,33,0.08)]',
}
/**
* Tag component for displaying status labels
*/
const Tag: FC<TagProps> = ({ color = 'processing', children, className }) => {
return (
<span className={`rb:inline-block rb:px-[8px] rb:py-[2px] rb:rounded-[11px] rb:text-[12px] rb:font-regular rb:leading-[16px] rb:border-[1px] ${colors[color]} ${className || ''}`}>
<span className={`rb:inline-block rb:px-2 rb:py-0.5 rb:rounded-[11px] rb:text-[12px] rb:font-regular rb:leading-4 rb:border ${colors[color]} ${className || ''}`}>
{children}
</span>
)

22
web/src/views/ApplicationConfig/components/ToolList/ToolList.tsx
View File

@@ -1,6 +1,19 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:26:03
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:26:03
*/
/**
* Tool List Component
* Manages tool configurations for the application
* Allows adding, removing, and enabling/disabling tools
*/
import { type FC, useRef, useState, useEffect } from 'react'
import { useTranslation } from 'react-i18next'
import { Space, Button, List, Switch } from 'antd'
import Card from '../Card'
import type {
ToolModalRef,
@@ -10,6 +23,11 @@ import Empty from '@/components/Empty'
import ToolModal from './ToolModal'
import { getToolMethods, getToolDetail } from '@/api/tools'
/**
* Tool list management component
* @param value - Current tool configurations
* @param onChange - Callback when tools change
*/
const ToolList: FC<{ value?: ToolOption[]; onChange?: (config: ToolOption[]) => void}> = ({value, onChange}) => {
const { t } = useTranslation()
const toolModalRef = useRef<ToolModalRef>(null)
@@ -79,19 +97,23 @@ const ToolList: FC<{ value?: ToolOption[]; onChange?: (config: ToolOption[]) =>
}
}, [value])
/** Open tool selection modal */
const handleAddTool = () => {
toolModalRef.current?.handleOpen()
}
/** Add new tool to list */
const updateTools = (tool: ToolOption) => {
const list = [...toolList, tool]
setToolList(list)
onChange && onChange(list)
}
/** Remove tool from list */
const handleDeleteTool = (index: number) => {
const list = toolList.filter((_item, idx) => idx !== index)
setToolList([...list])
onChange && onChange(list)
}
/** Toggle tool enabled state */
const handleChangeEnabled = (index: number) => {
const list = toolList.map((item, idx) => {
if (idx === index) {

30
web/src/views/ApplicationConfig/components/ToolList/ToolModal.tsx
View File

@@ -1,18 +1,37 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:26:06
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:26:06
*/
/**
* Tool Selection Modal
* Provides cascading selection of tools by type, tool, and method
* Supports MCP, builtin, and custom tool types
*/
import { forwardRef, useImperativeHandle, useState } from 'react';
import { Form, Cascader, type CascaderProps } from 'antd';
import { useTranslation } from 'react-i18next';
import type { ToolModalRef, ToolOption } from '../types'
import type { ToolModalRef, ToolOption } from './types'
import RbModal from '@/components/RbModal'
import { getToolMethods, getTools } from '@/api/tools'
import type { ToolType, ToolItem } from '@/views/ToolManagement/types'
const FormItem = Form.Item;
/**
* Component props
*/
interface ToolModalProps {
/** Callback to add selected tool */
refresh: (tool: ToolOption) => void;
}
/**
* Modal for selecting tools
*/
const ToolModal = forwardRef<ToolModalRef, ToolModalProps>(({
refresh,
}, ref) => {
@@ -27,7 +46,7 @@ const ToolModal = forwardRef<ToolModalRef, ToolModalProps>(({
])
const [selectdTools, setSelectedTools] = useState<ToolOption[]>([])
// 封装取消方法，添加关闭弹窗逻辑
/** Close modal and reset state */
const handleClose = () => {
setVisible(false);
form.resetFields();
@@ -35,12 +54,13 @@ const ToolModal = forwardRef<ToolModalRef, ToolModalProps>(({
setSelectedTools([])
};
/** Open modal */
const handleOpen = () => {
setVisible(true);
form.resetFields();
setSelectedTools([])
};
// 封装保存方法，添加提交逻辑
/** Save selected tool */
const handleSave = () => {
form.validateFields().then(() => {
setLoading(false)
@@ -64,6 +84,7 @@ const ToolModal = forwardRef<ToolModalRef, ToolModalProps>(({
handleClose()
})
}
/** Load cascader options dynamically */
const loadData = (selectedOptions: ToolOption[]) => {
const targetOption = selectedOptions[selectedOptions.length - 1];
if (selectedOptions.length === 1) {
@@ -98,12 +119,13 @@ const ToolModal = forwardRef<ToolModalRef, ToolModalProps>(({
}
};
/** Handle cascader selection change */
const handleChange: CascaderProps<ToolOption>['onChange'] = (_value, selectedOptions) => {
console.log('selectedOptions', selectedOptions)
setSelectedTools(selectedOptions)
}
// 暴露给父组件的方法
/** Expose methods to parent component */
useImperativeHandle(ref, () => ({
handleOpen,
handleClose

41
web/src/views/ApplicationConfig/components/ToolList/types.ts
View File

@@ -1,26 +1,67 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:26:10
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:26:10
*/
/**
* Type definitions for tool configuration in application settings
*/
/**
* Tool option for cascader selection
*/
export interface ToolOption {
/** Option value */
value?: string | number | null;
/** Display label */
label?: React.ReactNode;
/** Tool description */
description?: string;
/** Child options for nested selection */
children?: ToolOption[];
/** Whether this is a leaf node */
isLeaf?: boolean;
/** Method ID for API operations */
method_id?: string;
/** Operation name */
operation?: string;
/** Method parameters */
parameters?: Parameter[];
/** Tool ID */
tool_id?: string;
/** Whether tool is enabled */
enabled?: boolean;
}
/**
* Parameter definition for tool methods
*/
export interface Parameter {
/** Parameter name */
name: string;
/** Parameter data type */
type: string;
/** Parameter description */
description: string;
/** Whether parameter is required */
required: boolean;
/** Default value */
default: any;
/** Enum values if applicable */
enum: null | string[];
/** Minimum value for numeric types */
minimum: number;
/** Maximum value for numeric types */
maximum: number;
/** Regex pattern for validation */
pattern: null | string;
}
/**
* Modal ref for tool selection
*/
export interface ToolModalRef {
/** Open tool selection modal */
handleOpen: () => void;
}

25
web/src/views/ApplicationConfig/components/VariableList/ApiExtensionModal.tsx
View File

@@ -1,3 +1,14 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:26:18
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:26:18
*/
/**
* API Extension Modal
* Allows configuring external API endpoints for dynamic variable options
*/
import { forwardRef, useImperativeHandle, useState } from 'react';
import { Form, Input } from 'antd';
import { useTranslation } from 'react-i18next';
@@ -7,10 +18,17 @@ import RbModal from '@/components/RbModal'
const FormItem = Form.Item;
/**
* Component props
*/
interface ApiExtensionModalProps {
/** Callback to refresh API extension list */
refresh: () => void;
}
/**
* Modal for adding API extensions
*/
const ApiExtensionModal = forwardRef<ApiExtensionModalRef, ApiExtensionModalProps>(({
refresh
}, ref) => {
@@ -21,18 +39,19 @@ const ApiExtensionModal = forwardRef<ApiExtensionModalRef, ApiExtensionModalProp
const values = Form.useWatch([], form);
// 封装取消方法，添加关闭弹窗逻辑
/** Close modal and reset form */
const handleClose = () => {
setVisible(false);
form.resetFields();
setLoading(false)
};
/** Open modal */
const handleOpen = () => {
form.resetFields();
setVisible(true);
};
// 封装保存方法，添加提交逻辑
/** Save API extension configuration */
const handleSave = () => {
form
.validateFields()
@@ -46,7 +65,7 @@ const ApiExtensionModal = forwardRef<ApiExtensionModalRef, ApiExtensionModalProp
});
}
// 暴露给父组件的方法
/** Expose methods to parent component */
useImperativeHandle(ref, () => ({
handleOpen,
handleClose

36
web/src/views/ApplicationConfig/components/VariableList/VariableEditModal.tsx
View File

@@ -1,3 +1,15 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:26:27
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:26:27
*/
/**
* Variable Edit Modal
* Allows creating and editing application input variables
* Supports multiple variable types: text, paragraph, number, dropdown, checkbox, API variable
*/
import { forwardRef, useImperativeHandle, useState, useRef } from 'react';
import { Form, Input, Select, InputNumber, Checkbox, Tag, Divider, Button } from 'antd';
import { useTranslation } from 'react-i18next';
@@ -9,10 +21,17 @@ import ApiExtensionModal from './ApiExtensionModal'
const FormItem = Form.Item;
/**
* Component props
*/
interface VariableEditModalProps {
/** Callback to update variable */
refreshTable: (values: Variable) => void;
}
/**
* Supported variable types
*/
const types = [
'text',
'paragraph',
@@ -21,6 +40,9 @@ const types = [
// 'checkbox',
// 'apiVariable'
]
/**
* Variable type to data type mapping
*/
const variableType = {
text: 'string',
paragraph: 'string',
@@ -30,6 +52,9 @@ const variableType = {
apiVariable: 'string',
}
/**
* Modal for editing variables
*/
const VariableEditModal = forwardRef<VariableEditModalRef, VariableEditModalProps>(({
refreshTable
}, ref) => {
@@ -42,7 +67,7 @@ const VariableEditModal = forwardRef<VariableEditModalRef, VariableEditModalProp
const values = Form.useWatch([], form);
// 封装取消方法，添加关闭弹窗逻辑
/** Close modal and reset form */
const handleClose = () => {
setVisible(false);
form.resetFields();
@@ -50,6 +75,7 @@ const VariableEditModal = forwardRef<VariableEditModalRef, VariableEditModalProp
setEditVo(null)
};
/** Open modal with optional variable data */
const handleOpen = (variable?: Variable) => {
setVisible(true);
if (variable) {
@@ -59,7 +85,7 @@ const VariableEditModal = forwardRef<VariableEditModalRef, VariableEditModalProp
form.resetFields();
}
};
// 封装保存方法，添加提交逻辑
/** Save variable configuration */
const handleSave = () => {
form.validateFields().then((values) => {
refreshTable({
@@ -70,12 +96,12 @@ const VariableEditModal = forwardRef<VariableEditModalRef, VariableEditModalProp
})
}
// 暴露给父组件的方法
/** Expose methods to parent component */
useImperativeHandle(ref, () => ({
handleOpen,
handleClose
}));
// 变量类型改变时，更新初始化其他字段值
/** Handle variable type change */
const handleChangeType = (value: Variable['type']) => {
if (value) {
form.setFieldsValue({
@@ -90,7 +116,7 @@ const VariableEditModal = forwardRef<VariableEditModalRef, VariableEditModalProp
})
}
}
// 添加 API 扩展
/** Add API extension */
const addApiExtension = () => {
apiExtensionModalRef.current?.handleOpen()
}

25
web/src/views/ApplicationConfig/components/VariableList/VariableList.tsx
View File

@@ -1,6 +1,19 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:26:32
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:26:32
*/
/**
* Variable List Component
* Manages application input variables configuration
* Allows adding, editing, and removing variables
*/
import { type FC, useRef } from 'react'
import { useTranslation } from 'react-i18next'
import { Space, Button, Switch, Form } from 'antd'
import variablesEmpty from '@/assets/images/application/variablesEmpty.svg'
import Card from '../Card'
import Table from '@/components/Table';
@@ -8,17 +21,27 @@ import type { Variable, VariableEditModalRef } from './types'
import Empty from '@/components/Empty'
import VariableEditModal from './VariableEditModal'
/**
* Component props
*/
interface VariableListProps {
/** Current variable list */
value?: Variable[];
/** Callback when variables change */
onChange?: (value: Variable[]) => void;
}
const VariableList: FC<VariableListProps> = ({value = [], onChange}) => {
/**
* Variable list management component
*/const VariableList: FC<VariableListProps> = ({value = [], onChange}) => {
const { t } = useTranslation()
const variableEditModalRef = useRef<VariableEditModalRef>(null)
/** Open variable edit modal */
const handleAddVariable = () => {
variableEditModalRef.current?.handleOpen()
}
/** Save variable changes */
const handleSaveVariable = (variable: Variable) => {
const newList = [...(value || [])]
if (variable.index !== undefined && variable.index >= 0) {

57
web/src/views/ApplicationConfig/components/VariableList/types.ts
View File

@@ -1,28 +1,69 @@
export interface Variable {
index?: number;
name: string;
display_name: string;
type: string;
required: boolean;
max_length?: number;
description?: string;
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:26:21
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:26:21
*/
/**
* Type definitions for variable configuration in application settings
*/
/**
* Variable definition for application input
*/
export interface Variable {
/** Variable index in list */
index?: number;
/** Variable name (identifier) */
name: string;
/** Display name shown to users */
display_name: string;
/** Variable data type (string, number, select, etc.) */
type: string;
/** Whether variable is required */
required: boolean;
/** Maximum length for string types */
max_length?: number;
/** Variable description */
description?: string;
/** Unique key for React rendering */
key?: string;
/** Default value */
default_value?: string;
/** Options for select type variables */
options?: string[];
/** API extension for dynamic options */
api_extension?: string;
/** Whether variable is hidden from UI */
hidden?: boolean;
/** Current value */
value?: any;
}
/**
* Modal ref for variable editing
*/
export interface VariableEditModalRef {
/** Open modal with optional existing variable data */
handleOpen: (values?: Variable) => void;
}
/**
* API extension configuration data
*/
export interface ApiExtensionModalData {
/** Extension name */
name: string;
/** API endpoint URL */
apiEndpoint: string;
/** API authentication key */
apiKey: string;
}
/**
* Modal ref for API extension configuration
*/
export interface ApiExtensionModalRef {
/** Open API extension modal */
handleOpen: () => void;
}

24
web/src/views/ApplicationConfig/index.tsx
View File

@@ -1,5 +1,12 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:29:37
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:29:37
*/
import React, { useEffect, useState, useRef } from 'react';
import { useParams } from 'react-router-dom';
import ConfigHeader from './components/ConfigHeader'
import type { AgentRef, ClusterRef, WorkflowRef } from './types'
import type { Application } from '@/views/ApplicationManagement/types'
@@ -11,14 +18,28 @@ import { getApplication } from '@/api/application'
import Workflow from '@/views/Workflow';
import Statistics from './Statistics'
/**
* Application configuration page component
* Main container for configuring agents, workflows, multi-agent clusters
* Manages tabs for arrangement, API, release, and statistics
*/
const ApplicationConfig: React.FC = () => {
// Hooks
const { id } = useParams();
// Refs for different application types
const agentRef = useRef<AgentRef>(null)
const clusterRef = useRef<ClusterRef>(null)
const workflowRef = useRef<WorkflowRef>(null)
// State
const [application, setApplication] = useState<Application | null>(null);
const [activeTab, setActiveTab] = useState('arrangement');
/**
* Handle tab change with auto-save for arrangement tab
* @param key - New tab key
*/
const handleChangeTab = async (key: string) => {
if (activeTab === 'arrangement' && application?.type === 'agent' && agentRef.current) {
agentRef.current.handleSave(false)
@@ -44,6 +65,9 @@ const ApplicationConfig: React.FC = () => {
getApplicationInfo()
}, [id])
/**
* Fetch application information
*/
const getApplicationInfo = () => {
if (!id) {
return

351
web/src/views/ApplicationConfig/types.ts
View File

@@ -1,3 +1,9 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:29:49
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:29:49
*/
import type { KnowledgeConfig } from './components/Knowledge/types'
import type { Variable } from './components/VariableList/types'
import type { ToolOption } from './components/ToolList/types'
@@ -5,164 +11,389 @@ import type { ChatItem } from '@/components/Chat/types'
import type { GraphRef } from '@/views/Workflow/types';
import type { ApiKey } from '@/views/ApiKeyManagement/types'
/**
* Model configuration parameters
*/
export interface ModelConfig {
/** Model label */
label?: string;
/** Default model configuration ID */
default_model_config_id?: string;
/** Temperature for response randomness (0-2) */
temperature: number;
/** Maximum tokens in response */
max_tokens: number;
/** Top-p sampling parameter */
top_p: number;
/** Frequency penalty */
frequency_penalty: number;
/** Presence penalty */
presence_penalty: number;
/** Number of completions to generate */
n: number;
/** Stop sequences */
stop?: string;
}
/**
* Memory configuration
*/
export interface MemoryConfig {
/** Whether memory is enabled */
enabled: boolean;
/** Memory content */
memory_content?: string;
/** Maximum history length */
max_history?: number | string;
}
/**
* Application configuration
*/
export interface Config extends MultiAgentConfig {
/** Configuration ID */
id: string;
/** Application ID */
app_id: string;
/** System prompt */
system_prompt: string;
/** Default model configuration ID */
default_model_config_id?: string;
/** Model parameters */
model_parameters: ModelConfig;
/** Knowledge retrieval configuration */
knowledge_retrieval: KnowledgeConfig | null;
/** Memory configuration */
memory?: MemoryConfig;
/** Variables list */
variables: Variable[];
/** Tools list */
tools: ToolOption[];
/** Whether configuration is active */
is_active: boolean;
/** Creation timestamp */
created_at: number;
/** Last update timestamp */
updated_at: number;
}
/**
* Multi-agent configuration
*/
export interface MultiAgentConfig {
/** Configuration ID */
id: string;
/** Application ID */
app_id: string;
/** Default model configuration ID */
default_model_config_id?: string;
/** Model parameters */
model_parameters: ModelConfig;
/** Sub-agents list */
sub_agents?: SubAgentItem[];
/** Routing rules */
routing_rules: null;
/** Orchestration mode */
orchestration_mode: 'supervisor' | 'collaboration';
/** Execution configuration */
execution_config: {
/** Sub-agent execution mode */
sub_agent_execution_mode: 'sequential' | 'parallel';
};
/** Aggregation strategy */
aggregation_strategy: 'merge' | 'vote' | 'priority'
}
// 创建表单数据类型
/**
* Application modal form data
*/
export interface ApplicationModalData {
/** Application name */
name: string;
/** Application type */
type: string;
/** Application icon */
icon: string;
}
// 定义组件暴露的方法接口
/**
* Agent component ref methods
*/
export interface AgentRef {
/**
* Save agent configuration
* @param flag - Whether to show success message
*/
handleSave: (flag?: boolean) => Promise<unknown>;
}
/**
* Cluster component ref methods
*/
export interface ClusterRef {
/**
* Save cluster configuration
* @param flag - Whether to show success message
*/
handleSave: (flag?: boolean) => Promise<unknown>;
}
/**
* Workflow component ref methods
*/
export interface WorkflowRef {
/**
* Save workflow configuration
* @param flag - Whether to show success message
*/
handleSave: (flag?: boolean) => Promise<unknown>;
/** Run workflow */
handleRun: () => void;
/** Graph reference */
graphRef: GraphRef;
/** Add variable */
addVariable: () => void;
}
/**
* Application modal ref methods
*/
export interface ApplicationModalRef {
/**
* Open application modal
* @param application - Optional application data for edit mode
*/
handleOpen: (application?: Config) => void;
}
/**
* Model configuration source type
*/
export type Source = 'chat' | 'model' | 'multi_agent'
/**
* Model configuration modal ref methods
*/
export interface ModelConfigModalRef {
/**
* Open model configuration modal
* @param source - Configuration source
* @param model - Optional model data
*/
handleOpen: (source: Source, model?: any) => void;
}
/**
* Model configuration modal form data
*/
export interface ModelConfigModalData {
/** Model identifier */
model: string;
/** Additional configuration fields */
[key: string]: string;
}
/**
* AI prompt modal ref methods
*/
export interface AiPromptModalRef {
handleOpen: () => void;
}
export interface ChatData {
label?: string;
model_config_id?: string;
model_parameters?: ModelConfig;
list?: ChatItem[];
conversation_id?: string | null;
}
export interface Release {
id: string;
app_id: string;
version: string;
release_notes: string;
name: string;
description?: string;
icon: string;
icon_type?: string;
type: string;
visibility: string;
config: Config;
default_model_config_id?: string;
published_by?: string;
published_at: number;
publisher_name?: string;
is_active?: boolean;
created_at?: number;
updated_at?: number;
status?: string;
version_name?: string;
tagKey: 'current' | 'rolledBack' | 'history';
}
export interface ReleaseModalRef {
handleOpen: () => void;
}
export interface ReleaseShareModalRef {
handleOpen: () => void;
}
export interface CopyModalRef {
handleOpen: () => void;
}
export interface SubAgentItem {
agent_id: string;
name: string;
role: string;
capabilities: string[];
is_active?: boolean;
}
export interface SubAgentModalRef {
handleOpen: (agent?: SubAgentItem) => void;
}
export interface ApiKeyModalRef {
handleOpen: () => void;
}
export interface ApiKeyConfigModalRef {
handleOpen: (apiKey: ApiKey) => void;
}
export interface AiPromptVariableModalRef {
/** Open AI prompt modal */
handleOpen: () => void;
}
/**
* Chat data structure
*/
export interface ChatData {
/** Chat label */
label?: string;
/** Model configuration ID */
model_config_id?: string;
/** Model parameters */
model_parameters?: ModelConfig;
/** Chat messages list */
list?: ChatItem[];
/** Conversation ID */
conversation_id?: string | null;
}
/**
* Release version data
*/
export interface Release {
/** Release ID */
id: string;
/** Application ID */
app_id: string;
/** Version number */
version: string;
/** Release notes */
release_notes: string;
/** Release name */
name: string;
/** Release description */
description?: string;
/** Application icon */
icon: string;
/** Icon type */
icon_type?: string;
/** Application type */
type: string;
/** Visibility setting */
visibility: string;
/** Configuration snapshot */
config: Config;
/** Default model configuration ID */
default_model_config_id?: string;
/** Publisher user ID */
published_by?: string;
/** Publication timestamp */
published_at: number;
/** Publisher name */
publisher_name?: string;
/** Whether release is active */
is_active?: boolean;
/** Creation timestamp */
created_at?: number;
/** Last update timestamp */
updated_at?: number;
/** Release status */
status?: string;
/** Version name */
version_name?: string;
/** Tag key for UI display */
tagKey: 'current' | 'rolledBack' | 'history';
}
/**
* Release modal ref methods
*/
export interface ReleaseModalRef {
/** Open release modal */
handleOpen: () => void;
}
/**
* Release share modal ref methods
*/
export interface ReleaseShareModalRef {
/** Open release share modal */
handleOpen: () => void;
}
/**
* Copy modal ref methods
*/
export interface CopyModalRef {
/** Open copy modal */
handleOpen: () => void;
}
/**
* Sub-agent item data
*/
export interface SubAgentItem {
/** Agent ID */
agent_id: string;
/** Agent name */
name: string;
/** Agent role */
role: string;
/** Agent capabilities */
capabilities: string[];
/** Whether agent is active */
is_active?: boolean;
}
/**
* Sub-agent modal ref methods
*/
export interface SubAgentModalRef {
/**
* Open sub-agent modal
* @param agent - Optional agent data for edit mode
*/
handleOpen: (agent?: SubAgentItem) => void;
}
/**
* API key modal ref methods
*/
export interface ApiKeyModalRef {
/** Open API key modal */
handleOpen: () => void;
}
/**
* API key configuration modal ref methods
*/
export interface ApiKeyConfigModalRef {
/**
* Open API key configuration modal
* @param apiKey - API key data
*/
handleOpen: (apiKey: ApiKey) => void;
}
/**
* AI prompt variable modal ref methods
*/
export interface AiPromptVariableModalRef {
/** Open AI prompt variable modal */
handleOpen: () => void;
}
/**
* AI prompt form data
*/
export interface AiPromptForm {
/** Model ID */
model_id?: string;
/** Message content */
message?: string;
/** Current prompt */
current_prompt?: string;
}
/**
* Chat variable configuration modal ref methods
*/
export interface ChatVariableConfigModalRef {
/**
* Open chat variable configuration modal
* @param values - Variables list
*/
handleOpen: (values: Variable[]) => void;
}
/**
* Statistics item data
*/
export interface StatisticsItem {
/** Count value */
count: number;
/** Date string */
date: string;
}
/**
* Statistics data structure
*/
export interface StatisticsData {
/** Daily conversations statistics */
daily_conversations: StatisticsItem[];
/** Daily new users statistics */
daily_new_users: StatisticsItem[];
/** Daily API calls statistics */
daily_api_calls: StatisticsItem[];
/** Daily tokens usage statistics */
daily_tokens: StatisticsItem[];
/** Total conversations count */
total_conversations: number;
/** Total new users count */
total_new_users: number;
/** Total API calls count */
total_api_calls: number;
/** Total tokens used */
total_tokens: number;
}

34
web/src/views/ApplicationManagement/components/ApplicationModal.tsx
View File

@@ -1,32 +1,57 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:34:09
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:35:30
*/
/**
* Application Modal
* Modal for creating and editing applications
* Supports three application types: agent, multi_agent, and workflow
*/
import { forwardRef, useImperativeHandle, useState } from 'react';
import { Form, Input } from 'antd';
import { useTranslation } from 'react-i18next';
import RadioGroupCard from '@/components/RadioGroupCard'
import AgentIcon from '@/assets/images/application/agent.svg'
import ClusterIcon from '@/assets/images/application/cluster.svg'
import WorkflowIcon from '@/assets/images/application/workflow.svg'
import type { ApplicationModalData, ApplicationModalRef, Application } from '../types'
import RbModal from '@/components/RbModal'
import { addApplication, updateApplication } from '@/api/application'
const FormItem = Form.Item;
/**
* Component props
*/
interface ApplicationModalProps {
/** Callback to refresh application list */
refresh: () => void;
}
/**
* Supported application types
*/
const types = [
'agent',
'multi_agent',
'workflow'
]
/**
* Application type icon mapping
*/
const typeIcons: Record<string, string> = {
agent: AgentIcon,
multi_agent: ClusterIcon,
workflow: WorkflowIcon
}
/**
* Modal for creating and editing applications
*/
const ApplicationModal = forwardRef<ApplicationModalRef, ApplicationModalProps>(({
refresh
}, ref) => {
@@ -38,7 +63,7 @@ const ApplicationModal = forwardRef<ApplicationModalRef, ApplicationModalProps>(
const values = Form.useWatch([], form);
// 封装取消方法，添加关闭弹窗逻辑
/** Close modal and reset form */
const handleClose = () => {
setVisible(false);
form.resetFields();
@@ -46,6 +71,7 @@ const ApplicationModal = forwardRef<ApplicationModalRef, ApplicationModalProps>(
setEditVo(null)
};
/** Open modal with optional application data for editing */
const handleOpen = (application?: Application) => {
if (application) {
setEditVo(application || null)
@@ -59,7 +85,7 @@ const ApplicationModal = forwardRef<ApplicationModalRef, ApplicationModalProps>(
}
setVisible(true);
};
// 封装保存方法，添加提交逻辑
/** Save application (create or update) */
const handleSave = () => {
form
.validateFields()
@@ -83,7 +109,7 @@ const ApplicationModal = forwardRef<ApplicationModalRef, ApplicationModalProps>(
});
}
// 暴露给父组件的方法
/** Expose methods to parent component */
useImperativeHandle(ref, () => ({
handleOpen,
handleClose

20
web/src/views/ApplicationManagement/index.tsx
View File

@@ -1,8 +1,21 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:34:12
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:34:12
*/
/**
* Application Management Page
* Displays and manages all applications in the workspace
* Supports creating, editing, and deleting applications
*/
import React, { useState, useRef } from 'react';
import { useTranslation } from 'react-i18next';
import { Button, Row, Col, App } from 'antd';
import clsx from 'clsx';
import { DeleteOutlined } from '@ant-design/icons';
import type { Application, ApplicationModalRef, Query } from './types';
import ApplicationModal from './components/ApplicationModal';
import SearchInput from '@/components/SearchInput'
@@ -11,6 +24,9 @@ import { getApplicationListUrl, deleteApplication } from '@/api/application'
import PageScrollList, { type PageScrollListRef } from '@/components/PageScrollList'
import { formatDateTime } from '@/utils/format';
/**
* Application management main component
*/
const ApplicationManagement: React.FC = () => {
const { t } = useTranslation();
const { modal } = App.useApp();
@@ -18,16 +34,20 @@ const ApplicationManagement: React.FC = () => {
const applicationModalRef = useRef<ApplicationModalRef>(null);
const scrollListRef = useRef<PageScrollListRef>(null)
/** Refresh application list */
const refresh = () => {
scrollListRef.current?.refresh();
}
/** Open create application modal */
const handleCreate = () => {
applicationModalRef.current?.handleOpen();
}
/** Navigate to application configuration page */
const handleEdit = (item: Application) => {
window.open(`/#/application/config/${item.id}`);
}
/** Delete application with confirmation */
const handleDelete = (item: Application) => {
modal.confirm({
title: t('common.confirmDeleteDesc', { name: item.name }),

104
web/src/views/ApplicationManagement/types.ts
View File

@@ -1,76 +1,174 @@
// 应用数据类型
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:34:15
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:34:15
*/
/**
* Type definitions for Application Management
*/
/**
* Search query parameters
*/
export interface Query {
/** Search keyword */
search: string;
}
/**
* Application data structure
*/
export interface Application {
/** Application ID */
id: string;
/** Workspace ID */
workspace_id: string;
/** Creator user ID */
created_by: string;
/** Application name */
name: string;
/** Application description */
description?: string;
/** Icon URL */
icon?: string;
/** Icon type */
icon_type?: string;
/** Application type: agent, multi_agent, or workflow */
type: 'agent' | 'multi_agent' | 'workflow';
/** Visibility setting */
visibility: string;
/** Application status */
status: string;
/** Application tags */
tags: string[];
/** Current release version ID */
current_release_id?: string;
/** Whether application is active */
is_active: boolean;
/** Whether application is shared */
is_shared: boolean;
/** Creation timestamp */
created_at: number;
/** Last update timestamp */
updated_at: number;
}
// 创建表单数据类型
/**
* Application creation/edit form data
*/
export interface ApplicationModalData {
/** Application name */
name: string;
/** Application type */
type: string;
/** Application description */
description?: string;
/** Icon upload data */
icon: {
url: string;
uid: string | number;
}[];
}
// 定义组件暴露的方法接口
/**
* Application modal ref interface
*/
export interface ApplicationModalRef {
/** Open modal with optional application data for editing */
handleOpen: (application?: Application) => void;
}
/**
* Model configuration modal ref interface
*/
export interface ModelConfigModalRef {
/** Open modal with application data */
handleOpen: (application?: Application) => void;
}
/**
* Model configuration form data
*/
export interface ModelConfigModalData {
/** Selected model */
model: string;
/** Additional configuration fields */
[key: string]: string;
}
/**
* AI prompt modal ref interface
*/
export interface AiPromptModalRef {
/** Open modal with application data */
handleOpen: (application?: Application) => void;
}
/**
* Variable modal ref interface
*/
export interface VariableModalRef {
/** Open modal with application data */
handleOpen: (application?: Application) => void;
}
/**
* Variable modal props
*/
export interface VariableModalProps {
/** Callback to refresh variable list */
refresh: () => void;
}
/**
* Variable edit modal ref interface
*/
export interface VariableEditModalRef {
/** Open modal with optional variable data */
handleOpen: (values?: Variable) => void;
}
/**
* Variable data structure
*/
export interface Variable {
/** Variable index */
index?: number;
/** Variable type */
type: string;
/** Variable key */
key: string;
/** Variable name */
name: string;
/** Maximum length for string types */
maxLength?: number;
/** Default value */
defaultValue?: string;
/** Options for select type */
options?: string[];
/** Whether variable is required */
required: boolean;
/** Whether variable is hidden */
hidden?: boolean;
}
/**
* API extension configuration data
*/
export interface ApiExtensionModalData {
/** Extension name */
name: string;
/** API endpoint URL */
apiEndpoint: string;
/** API authentication key */
apiKey: string;
}
/**
* API extension modal ref interface
*/
export interface ApiExtensionModalRef {
/** Open API extension modal */
handleOpen: () => void;
}

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

@@ -1,10 +1,23 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:58:03
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:58:35
*/
/**
* Conversation Page
* Public conversation interface for shared applications
* Supports conversation history, streaming responses, and memory/web search features
*/
import { type FC, useState, useEffect, useRef } from 'react'
import { useParams, useLocation } from 'react-router-dom'
import { useTranslation } from 'react-i18next'
import InfiniteScroll from 'react-infinite-scroll-component';
import { Flex, Skeleton, Form } from 'antd'
import clsx from 'clsx'
import AnalysisEmptyIcon from '@/assets/images/conversation/analysisEmpty.svg'
import dayjs from 'dayjs'
import { getConversationHistory, sendConversation, getConversationDetail, getShareToken } from '@/api/application'
import type { HistoryItem, QueryParams } from './types'
import Empty from '@/components/Empty'
@@ -19,9 +32,11 @@ import MemoryFunctionIcon from '@/assets/images/conversation/memoryFunction.svg'
import OnlineIcon from '@/assets/images/conversation/online.svg'
import OnlineCheckedIcon from '@/assets/images/conversation/onlineChecked.svg'
import MemoryFunctionCheckedIcon from '@/assets/images/conversation/memoryFunctionChecked.svg'
import dayjs from 'dayjs'
import { type SSEMessage } from '@/utils/stream'
/**
* Conversation component for shared applications
*/
const Conversation: FC = () => {
const { t } = useTranslation()
const { token } = useParams()
@@ -61,7 +76,7 @@ const Conversation: FC = () => {
}
}, [token, shareToken, page, hasMore, historyList])
// 按日期分组历史记录
/** Group conversation history by date */
const groupHistoryByDate = (items: HistoryItem[]): Record<string, HistoryItem[]> => {
return items.reduce((groups: Record<string, HistoryItem[]>, item) => {
const date = formatDateTime(item.created_at, 'YYYY-MM-DD')
@@ -74,6 +89,7 @@ const Conversation: FC = () => {
}, {});
}
/** Fetch conversation history with pagination */
const getHistory = (flag: boolean = false) => {
if (!token || (pageLoading || !hasMore) && !flag) {
return
@@ -104,6 +120,7 @@ const Conversation: FC = () => {
setPageLoading(false);
})
}
/** Switch to different conversation or start new one */
const handleChangeHistory = (id: string | null) => {
if (id !== conversation_id) {
setConversationId(id)
@@ -124,6 +141,7 @@ const Conversation: FC = () => {
}
}, [conversation_id])
/** Add user message to chat */
const addUserMessage = (message: string = '') => {
const newUserMessage: ChatItem = {
conversation_id,
@@ -133,6 +151,7 @@ const Conversation: FC = () => {
};
setChatList(prev => [...prev, newUserMessage])
}
/** Add empty assistant message placeholder */
const addAssistantMessage = () => {
const newAssistantMessage: ChatItem = {
created_at: Date.now(),
@@ -141,6 +160,7 @@ const Conversation: FC = () => {
}
setChatList(prev => [...prev, newAssistantMessage])
}
/** Update assistant message with streaming content */
const updateAssistantMessage = (content: string = '') => {
if (!content) return
if (streamLoading) {
@@ -164,6 +184,7 @@ const Conversation: FC = () => {
})
}
/** Send message and handle streaming response */
const handleSend = () => {
if (!token || !shareToken) {
return
@@ -261,7 +282,7 @@ const Conversation: FC = () => {
</div>
<div className="rb:relative rb:h-screen rb:px-4 rb:flex-[1_1_auto]">
<div className='rb:w-[760px] rb:h-screen rb:mx-auto rb:pt-10'>
<div className='rb:w-190 rb:h-screen rb:mx-auto rb:pt-10'>
<Chat
empty={<Empty url={ChatEmpty} className="rb:h-full" size={[320,180]} title={t('memoryConversation.chatEmpty')} subTitle={t('memoryConversation.emptyDesc')} />}
contentClassName="rb:h-[calc(100%-152px)] "

32
web/src/views/Conversation/types.ts
View File

@@ -1,21 +1,53 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:57:46
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:57:46
*/
/**
* Type definitions for Conversation
*/
/**
* Conversation history item
*/
export interface HistoryItem {
/** Conversation ID */
id: string;
/** Application ID */
app_id: string;
/** Workspace ID */
workspace_id: string;
/** User ID */
user_id: string | null;
/** Conversation title */
title: string;
/** Conversation summary */
summary?: string
/** Whether conversation is draft */
is_draft: boolean;
/** Number of messages */
message_count: number;
/** Whether conversation is active */
is_active: boolean;
/** Creation timestamp */
created_at: number;
/** Update timestamp */
updated_at: number;
}
/**
* Query parameters for sending messages
*/
export interface QueryParams {
/** Message content */
message?: string;
/** Whether to enable web search */
web_search?: boolean;
/** Whether to enable memory */
memory?: boolean;
/** Whether to use streaming response */
stream: boolean;
/** Current conversation ID */
conversation_id?: string | null;
}

22
web/src/views/EmotionEngine/index.tsx
View File

@@ -1,7 +1,20 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:56:54
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:57:17
*/
/**
* Emotion Engine Configuration Page
* Configures emotion analysis settings for memory system
* Includes model selection, intensity threshold, and feature toggles
*/
import React, { useState, useEffect } from 'react';
import { Row, Col, Form, Slider, Button, Alert, message, Space } from 'antd';
import { useParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import RbCard from '@/components/RbCard/Card';
import strategyImpactSimulator from '@/assets/images/memory/strategyImpactSimulator.svg'
import { getMemoryEmotionConfig, updateMemoryEmotionConfig } from '@/api/memory'
@@ -11,6 +24,9 @@ import { getModelListUrl } from '@/api/models'
import Tag from '@/components/Tag'
import SwitchFormItem from '@/components/FormItem/SwitchFormItem'
/**
* Configuration field definitions
*/
const configList = [
{
key: 'emotion_enabled',
@@ -41,6 +57,9 @@ const configList = [
},
]
/**
* Emotion engine configuration component
*/
const EmotionEngine: React.FC = () => {
const { t } = useTranslation();
const { id } = useParams();
@@ -55,6 +74,7 @@ const EmotionEngine: React.FC = () => {
getConfigData()
}, [id])
/** Fetch emotion engine configuration */
const getConfigData = () => {
if (!id) {
return
@@ -72,9 +92,11 @@ const EmotionEngine: React.FC = () => {
console.error('Failed to load data');
})
}
/** Reset form to saved configuration */
const handleReset = () => {
form.setFieldsValue(configData);
}
/** Save emotion engine configuration */
const handleSave = () => {
if (!id) {
return

61
web/src/views/EmotionEngine/types.ts
View File

@@ -1,48 +1,99 @@
// 标签表单数据类型
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:57:37
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:57:37
*/
/**
* Type definitions for Emotion Engine
*/
/**
* Tag form data (legacy, not used in current implementation)
*/
export interface TagFormData {
/** Tag name */
tagName: string;
/** Tag type */
type: string;
/** Tag color */
color: string;
/** Tag description */
description?: string;
/** Applicable scope */
applicableScope?: string[];
/** Semantic expansion */
semanticExpansion?: string;
/** Whether tag is active */
isActive?: boolean;
// 扩展字段用于区分编辑和新增操作
/** Whether in editing mode */
isEditing?: boolean;
/** Tag ID */
tagId?: string;
}
// 记忆总览数据类型
/**
* Memory overview record (legacy, not used in current implementation)
*/
export interface MemoryOverviewRecord {
/** Record ID */
id: number;
/** Memory ID */
memoryID: string,
/** Content summary */
contentSummary: string;
/** Memory type */
type: string;
/** Creation time */
createTime: string;
/** Last call time */
lastCallTime: string;
/** Retention degree */
retentionDegree: string;
/** Status */
status: string;
}
// 定义组件暴露的方法接口
/**
* Memory overview form ref interface (legacy)
*/
export interface MemoryOverviewFormRef {
/** Open form with optional record */
handleOpen: (memoryOverview?: MemoryOverviewRecord | null) => void;
}
// 遗忘曲线数据类型
/**
* Forgetting curve record (legacy, not used in current implementation)
*/
export interface CurveRecord {
/** Memory ID */
memoryID: string;
/** Memory type */
type: string;
/** Current retention rate */
currentRetentionRate: string;
/** Finally activated time */
finallyActivated: string;
/** Expected forgetting time */
expectedForgettingTime: string;
/** Reinforcement count */
reinforcementCount: string;
}
/**
* Emotion engine configuration form
*/
export interface ConfigForm {
/** Configuration ID */
config_id: number | string;
/** Whether emotion engine is enabled */
emotion_enabled: boolean;
/** Emotion analysis model ID */
emotion_model_id: string;
/** Whether to extract keywords */
emotion_extract_keywords: boolean;
/** Minimum emotion intensity threshold (0-1) */
emotion_min_intensity: number;
/** Whether to enable subject extraction */
emotion_enable_subject: boolean;
}

48
web/src/views/ForgettingEngine/components/LineChart.tsx
View File

@@ -1,9 +1,24 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 17:00:20
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 17:00:20
*/
/**
* Line Chart Component
* Visualizes forgetting curves based on different configurations
* Compares current config with quick/slow forgetting presets
*/
import { type FC, useRef, useEffect, useState, useMemo, useCallback } from 'react'
import { useTranslation } from 'react-i18next'
import ReactEcharts from 'echarts-for-react';
import type { ConfigForm } from '../types'
// 定义当前数据类型
/**
* Current data item type
*/
type CurrentDataItem = {
name: string;
data: number[];
@@ -16,7 +31,9 @@ type CurrentDataItem = {
emphasis: { focus: string };
};
// 定义图表系列数据类型
/**
* Chart series data item type
*/
type SeriesDataItem = {
name: string;
data: number[];
@@ -29,17 +46,26 @@ type SeriesDataItem = {
emphasis: { focus: string };
};
// 定义简化的配置类型，只包含图表计算需要的属性
/**
* Simplified config type for chart calculations
*/
interface ChartConfig {
lambda_mem: number;
lambda_time: number;
offset: number;
}
/**
* Component props
*/
interface LineCardProps {
/** Forgetting engine configuration */
config: ConfigForm
}
/**
* ECharts series configuration
*/
const SeriesConfig = {
type: 'line',
smooth: true,
@@ -55,10 +81,18 @@ const SeriesConfig = {
focus: 'series'
},
}
/**
* Chart color palette
*/
const Colors = ['#155EEF', '#4DA8FF', '#FFB048']
// 快速遗忘：lambda_mem=0.3，lambda_time=1，offset=0.05； 慢速遗忘：lambda_mem=1，lambda_time=0.3，offset=0.2
/**
* Line chart component for forgetting curves
* Formula: R = offset + (1 - offset) × e^(-λ_time × t / λ_mem)
* Quick forgetting: λ_mem=0.3, λ_time=1, offset=0.05
* Slow forgetting: λ_mem=1, λ_time=0.3, offset=0.2
*/
const LineChart: FC<LineCardProps> = ({ config }) => {
const { t } = useTranslation()
const chartRef = useRef<ReactEcharts>(null);
@@ -131,8 +165,7 @@ const LineChart: FC<LineCardProps> = ({ config }) => {
}
}, [config])
// 快速遗忘：lambda_mem=0.3，lambda_time=1，offset=0.05；
// 慢速遗忘：lambda_mem=1，lambda_time=0.3，offset=0.2
/** Initialize preset forgetting curves */
const getInitData = useCallback(() => {
const list = seriesData.map(item => ({
...item,
@@ -141,6 +174,7 @@ const LineChart: FC<LineCardProps> = ({ config }) => {
setInitialData(list)
}, [seriesData])
/** Calculate retention rate for given days and config */
const calculateSeriesData = useCallback((days: number, data: ChartConfig | ConfigForm) => {
const offset = Number(data.offset)
const lambda_time = Number(data.lambda_time)
@@ -148,10 +182,12 @@ const LineChart: FC<LineCardProps> = ({ config }) => {
// R = offset + (1 - offset) × e^(-λtime × t / (λmem × S))
return +(offset + (1 - offset) * Math.exp(-lambda_time * days / lambda_mem)).toFixed(4)
}, [])
/** Format data for all x-axis points */
const formatData = useCallback((data: ChartConfig | ConfigForm) => {
return xAxisData.map(days => Number(calculateSeriesData(days, data)))
}, [calculateSeriesData])
/** Calculate current configuration curve data */
const getCaculateData = useCallback((data: ConfigForm) => {
if (!data) {
return

22
web/src/views/ForgettingEngine/index.tsx
View File

@@ -1,7 +1,20 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 17:00:12
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 17:00:12
*/
/**
* Forgetting Engine Configuration Page
* Configures memory forgetting curve parameters
* Uses Ebbinghaus forgetting curve formula: R = offset + (1 - offset) × e^(-λ_time × t / λ_mem)
*/
import React, { useState, useEffect } from 'react';
import { Row, Col, Form, Slider, Button, Space, message } from 'antd';
import { useParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import RbCard from '@/components/RbCard/Card';
import strategyImpactSimulator from '@/assets/images/memory/strategyImpactSimulator.svg'
import LineChart from './components/LineChart'
@@ -9,6 +22,9 @@ import { getMemoryForgetConfig, updateMemoryForgetConfig } from '@/api/memory'
import type { ConfigForm } from './types'
import SwitchFormItem from '@/components/FormItem/SwitchFormItem'
/**
* Configuration field definitions
*/
const configList = [
{
key: 'minimumRetention',
@@ -82,6 +98,9 @@ const configList = [
},
]
/**
* Forgetting engine configuration component
*/
const ForgettingEngine: React.FC = () => {
const { t } = useTranslation();
const { id } = useParams();
@@ -96,6 +115,7 @@ const ForgettingEngine: React.FC = () => {
getConfigData()
}, [])
/** Fetch forgetting engine configuration */
const getConfigData = () => {
getMemoryForgetConfig(id as string)
.then((res) => {
@@ -113,9 +133,11 @@ const ForgettingEngine: React.FC = () => {
console.error('Failed to load data');
})
}
/** Reset form to saved configuration */
const handleReset = () => {
form.setFieldsValue(configData || {});
}
/** Save forgetting engine configuration */
const handleSave = () => {
setLoading(true)
updateMemoryForgetConfig({

69
web/src/views/ForgettingEngine/types.ts
View File

@@ -1,56 +1,111 @@
// 标签表单数据类型
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 17:00:08
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 17:00:08
*/
/**
* Type definitions for Forgetting Engine
*/
/**
* Tag form data (legacy, not used in current implementation)
*/
export interface TagFormData {
/** Tag name */
tagName: string;
/** Tag type */
type: string;
/** Tag color */
color: string;
/** Tag description */
description?: string;
/** Applicable scope */
applicableScope?: string[];
/** Semantic expansion */
semanticExpansion?: string;
/** Whether tag is active */
isActive?: boolean;
// 扩展字段用于区分编辑和新增操作
/** Whether in editing mode */
isEditing?: boolean;
/** Tag ID */
tagId?: string;
}
// 记忆总览数据类型
/**
* Memory overview record (legacy, not used in current implementation)
*/
export interface MemoryOverviewRecord {
/** Record ID */
id: number;
/** Memory ID */
memoryID: string,
/** Content summary */
contentSummary: string;
/** Memory type */
type: string;
/** Creation time */
createTime: string;
/** Last call time */
lastCallTime: string;
/** Retention degree */
retentionDegree: string;
/** Status */
status: string;
}
// 定义组件暴露的方法接口
/**
* Memory overview form ref interface (legacy)
*/
export interface MemoryOverviewFormRef {
/** Open form with optional record */
handleOpen: (memoryOverview?: MemoryOverviewRecord | null) => void;
}
// 遗忘曲线数据类型
/**
* Forgetting curve record (legacy, not used in current implementation)
*/
export interface CurveRecord {
/** Memory ID */
memoryID: string;
/** Memory type */
type: string;
/** Current retention rate */
currentRetentionRate: string;
/** Finally activated time */
finallyActivated: string;
/** Expected forgetting time */
expectedForgettingTime: string;
/** Reinforcement count */
reinforcementCount: string;
}
/**
* Forgetting engine configuration form
*/
export interface ConfigForm {
/** Configuration ID */
config_id?: string;
/** Time decay factor (λ_time) */
lambda_time: string | number;
/** Memory strength factor (λ_mem) */
lambda_mem: string | number;
/** Minimum retention offset */
offset: string | number;
/** Decay constant */
decay_constant: string | number;
/** Maximum history length */
max_history_length: string | number;
/** Forgetting threshold */
forgetting_threshold: string | number;
/** Minimum days since last access */
min_days_since_access: string | number;
/** Whether to enable LLM summary */
enable_llm_summary: boolean;
/** Maximum merge batch size */
max_merge_batch_size: string | number;
/** Forgetting interval in hours */
forgetting_interval_hours: string | number;
/** Additional dynamic fields */
[key: string]: any;
}

15
web/src/views/Home/components/Card.tsx
View File

@@ -1,6 +1,21 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 17:27:28
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 17:27:28
*/
/**
* Card Component
* Reusable card wrapper for dashboard sections
*/
import { type FC, type ReactNode } from 'react'
import RbCard from '@/components/RbCard/Card'
/**
* Component props
*/
interface CardProps {
children: ReactNode;
title: string;

27
web/src/views/Home/components/LineCard.tsx
View File

@@ -1,13 +1,28 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 17:17:05
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 17:18:32
*/
/**
* Line Chart Card Component
* Displays time-series data with ECharts line chart
* Supports multiple series and date range selection
*/
import { type FC, useRef } from 'react'
import { useTranslation } from 'react-i18next'
import { Select } from 'antd'
import ReactEcharts from 'echarts-for-react';
import * as echarts from 'echarts';
import { formatDateTime } from '@/utils/format';
import Empty from '@/components/Empty'
import Card from './Card'
/**
* Component props
*/
interface LineCardProps {
chartData: Array<Record<string, string | number>>;
limit: number;
@@ -17,6 +32,7 @@ interface LineCardProps {
seriesList: string[];
}
/** ECharts series configuration */
const SeriesConfig = {
type: 'line',
stack: 'Total',
@@ -34,6 +50,7 @@ const SeriesConfig = {
},
data: [220, 302, 181, 234, 210, 290, 150]
}
/** Chart color palette */
const Colors = ['#FFB048', '#4DA8FF', '#155EEF']
const LineCard: FC<LineCardProps> = ({ chartData, limit, onChange, type, className, seriesList }) => {
@@ -47,6 +64,7 @@ const LineCard: FC<LineCardProps> = ({ chartData, limit, onChange, type, classNa
{ label: t('dashboard.lastYear'), value: 365 },
]
/** Generate series data with gradient colors */
const getSeries = () => {
const list = seriesList.map((key, index) => {
return {
@@ -71,6 +89,7 @@ const LineCard: FC<LineCardProps> = ({ chartData, limit, onChange, type, classNa
return list
}
/** Format series list for legend */
const formatSeriesList = () => {
return seriesList.map(key => ({
...SeriesConfig,
@@ -85,11 +104,11 @@ const LineCard: FC<LineCardProps> = ({ chartData, limit, onChange, type, classNa
<Select
value={limit}
options={options}
onChange={(value) => onChange(value, type)}
onChange={(value) => onChange(String(value), type)}
style={{ width: '150px' }}
/>
}
className={`rb:pb-[24px] ${className}`}
className={`rb:pb-6 ${className}`}
>
{chartData && chartData.length > 0 ? (
<ReactEcharts
@@ -157,7 +176,7 @@ const LineCard: FC<LineCardProps> = ({ chartData, limit, onChange, type, classNa
notMerge={true}
lazyUpdate={true}
/>
) : <Empty size={120} className="rb:mt-[48px] rb:mb-[81px]" />}
) : <Empty size={120} className="rb:mt-12 rb:mb-20.25" />}
</Card>
)
}

18
web/src/views/Home/components/PieCard.tsx
View File

@@ -1,14 +1,30 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 17:16:45
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 17:16:45
*/
/**
* Pie Chart Card Component
* Displays knowledge base type distribution with ECharts donut chart
*/
import { type FC, useRef, useEffect } from 'react'
import { useTranslation } from 'react-i18next'
import ReactEcharts from 'echarts-for-react';
import Card from './Card'
import Loading from '@/components/Empty/Loading'
import Empty from '@/components/Empty'
/**
* Component props
*/
interface PieCardProps {
chartData: Array<Record<string, string | number>>;
loading: boolean;
}
/** Chart color palette */
const Colors = ['#155EEF', '#31E8FF', '#AD88FF', '#FFB048', '#4DA8FF', '#03BDFF']
const PieCard: FC<PieCardProps> = ({ chartData, loading }) => {
@@ -45,7 +61,7 @@ const PieCard: FC<PieCardProps> = ({ chartData, loading }) => {
{loading
? <Loading size={249} />
: !chartData || chartData.length === 0
? <Empty size={120} className="rb:mt-[48px] rb:mb-[81px]" />
? <Empty size={120} className="rb:mt-12 rb:mb-20.25" />
: <ReactEcharts
option={{
color: Colors,

34
web/src/views/Home/components/QuickOperation.tsx
View File

@@ -1,14 +1,19 @@
/*
* @Description:
* @Version: 0.0.1
* @Author: yujiangping
* @Date: 2026-01-05 17:22:23
* @LastEditors: yujiangping
* @LastEditTime: 2026-01-15 14:55:51
* @Author: ZhaoYing
* @Date: 2026-02-03 17:16:38
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 17:16:38
*/
/**
* Quick Operation Component
* Displays shortcut cards for common operations
* Includes navigation to application, knowledge base, memory conversation, and help center
*/
import { type FC } from 'react'
import { useTranslation } from 'react-i18next'
import { useNavigate } from 'react-router-dom';
import Card from './Card';
import applicationIcon from '@/assets/images/menu/application_active.svg';
import knowledgeIcon from '@/assets/images/menu/knowledge_active.svg';
@@ -16,6 +21,7 @@ import memoryConversationIcon from '@/assets/images/menu/memoryConversation_acti
import helpCenterIcon from '@/assets/images/menu/helpCenter_active.svg'
import arrowTopRight from '@/assets/images/home/arrow_top_right.svg';
/** Quick operation items configuration */
const quickOperations = [
{ key: 'createNewApplication', url: '/application' },
{ key: 'createNewKnowledge', url: '/knowledge-base' },
@@ -23,6 +29,7 @@ const quickOperations = [
{ key: 'helpCenter', url: '' },
]
/** Icon mapping for quick operations */
const quickOperationIcons: {[key: string]: string | undefined} = {
createNewApplication: applicationIcon,
createNewKnowledge: knowledgeIcon,
@@ -33,6 +40,7 @@ const QuickOperation:FC = () => {
const { t, i18n } = useTranslation()
const navigate = useNavigate();
/** Handle navigation or external link */
const handleJump = (url: string | null) => {
if (url) {
navigate(url)
@@ -41,7 +49,7 @@ const QuickOperation:FC = () => {
const lang = currentLang === 'zh' ? 'zh' : 'en';
const helpUrl = `https://docs.redbearai.com/s/${lang}-memorybear`;
// 创建隐藏的 a 标签来避免弹窗拦截
/** Create hidden link to avoid popup blocking */
const link = document.createElement('a');
link.href = helpUrl;
link.target = '_blank';
@@ -55,15 +63,15 @@ const QuickOperation:FC = () => {
<Card
title={t('dashboard.quickOperation')}
>
<div className="rb:grid rb:grid-cols-4 rb:gap-[16px]">
<div className="rb:grid rb:grid-cols-4 rb:gap-4">
{quickOperations.map(item => (
<div key={item.key} className="rb:rounded-[8px] rb:p-[20px_16px] rb:border-1 rb:border-[#DFE4ED] rb:cursor-pointer rb:hover:border-[#155EEF]" onClick={() => handleJump(item.url)}>
<div key={item.key} className="rb:rounded-lg rb:p-[20px_16px] rb:border rb:border-[#DFE4ED] rb:cursor-pointer rb:hover:border-[#155EEF]" onClick={() => handleJump(item.url)}>
<div className="rb:flex rb:justify-between">
<img className="rb:w-[32px] rb:h-[32px]" src={quickOperationIcons[item.key]} />
<img className="rb:w-[16px] rb:h-[16px]" src={arrowTopRight} />
<img className="rb:w-8 rb:h-8" src={quickOperationIcons[item.key]} />
<img className="rb:w-4 rb:h-4" src={arrowTopRight} />
</div>
<div className="rb:mt-[24px] rb:text-[#212332] rb:text-[16px] rb:leading-[20px] rb:font-medium">{t(`dashboard.${item.key}`)}</div>
<div className="rb:mt-[8px] rb:text-[#5B6167] rb:text-[12px] rb:font-regular">{t(`dashboard.${item.key}Desc`)}</div>
<div className="rb:mt-6 rb:text-[#212332] rb:text-[16px] rb:leading-5 rb:font-medium">{t(`dashboard.${item.key}`)}</div>
<div className="rb:mt-2 rb:text-[#5B6167] rb:text-[12px] rb:font-regular">{t(`dashboard.${item.key}Desc`)}</div>
</div>
))}
</div>

43
web/src/views/Home/components/RecentActivity.tsx
View File

@@ -1,7 +1,20 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 17:15:33
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 17:15:33
*/
/**
* Recent Activity Component
* Displays recent memory processing activities with statistics
* Shows chunk count, statements, entity relations, and temporal data
*/
import { type FC, useEffect, useState } from 'react'
import clsx from 'clsx'
import { useTranslation } from 'react-i18next'
import { Skeleton } from 'antd';
import chunkCountIcon from '@/assets/images/home/chunk_count.svg';
import statementsCountIcon from '@/assets/images/home/statements_count.svg';
import tripletCountIcon from '@/assets/images/home/triplet_count.svg';
@@ -11,18 +24,30 @@ import Empty from '@/components/Empty';
import Card from './Card';
import { getRecentActivityStats } from '@/api/memory';
/**
* API response data structure
*/
interface Data {
latest_relative: string;
stats: RecentActivities;
}
/**
* Recent activity statistics
*/
interface RecentActivities {
"chunk_count": number; // 数据分块
"statements_count": number; // 语句提取
"triplet_entities_count": number; // 实体关系萃取-实体节点
"triplet_relations_count": number; // 实体关系萃取 - 关系连接
"temporal_count": number; // 时间萃取
/** Data chunk count */
"chunk_count": number;
/** Statement extraction count */
"statements_count": number;
/** Entity node count */
"triplet_entities_count": number;
/** Relation connection count */
"triplet_relations_count": number;
/** Temporal extraction count */
"temporal_count": number;
}
/** Activity list configuration */
const activityList = [
{ key: 'chunk_count', icon: chunkCountIcon },
{ key: 'statements_count', icon: statementsCountIcon },
@@ -40,7 +65,7 @@ const RecentActivity:FC = () => {
getRecentActivityList()
}, [])
// 最近活动统计
/** Fetch recent activity statistics */
const getRecentActivityList = () => {
setLoading(true)
getRecentActivityStats().then(res => {
@@ -58,13 +83,13 @@ const RecentActivity:FC = () => {
{loading
? <Skeleton />
: !recentActivities || Object.keys(recentActivities).length === 0
? <Empty url={activityEmpty} subTitle={t('dashboard.activityEmpty')} size={120} className="rb:mt-[45px] rb:mb-[81px]" />
? <Empty url={activityEmpty} subTitle={t('dashboard.activityEmpty')} size={120} className="rb:mt-11.25 rb:mb-20.25" />
: activityList.map((item, index) => (
<div key={item.key} className={clsx("rb:flex rb:justify-between rb:items-center rb:not-italic", {
'rb:mt-[24px]': index !== 0
'rb:mt-6': index !== 0
})}>
<div className="rb:flex rb:items-center rb:text-[#060419] rb:text-[16px] rb:font-medium">
<img className="rb:w-[40px] rb:h-[40px] rb:mr-[16px]" src={item.icon} />
<img className="rb:w-10 rb:h-10 rb:mr-4" src={item.icon} />
<div>
{t(`dashboard.${item.key}`)}
<div className="rb:text-[#5B6167] rb:text-[14px] rb:font-normal">

20
web/src/views/Home/components/TagList.tsx
View File

@@ -1,7 +1,19 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 17:15:04
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 17:15:04
*/
/**
* Tag List Component
* Displays popular memory tags with frequency counts
*/
import { type FC, useEffect, useState } from 'react'
import clsx from 'clsx'
import { useTranslation } from 'react-i18next'
import { Skeleton } from 'antd';
import tagEmpty from '@/assets/images/home/tagEmpty.svg'
import Empty from '@/components/Empty';
import Card from './Card';
@@ -16,7 +28,7 @@ const TagList:FC = () => {
getTagList()
}, [])
// 热门记忆标签
/** Fetch popular memory tags */
const getTagList = () => {
setLoading(true)
getHotMemoryTags().then(res => {
@@ -30,12 +42,12 @@ const TagList:FC = () => {
{loading
? <Skeleton />
: !tagList || tagList.length === 0
? <Empty url={tagEmpty} title={t('dashboard.activityEmpty')} size={120} className="rb:mt-[36px] rb:mb-[81px]" />
: <div className="rb:gap-[12px] rb:flex rb:flex-wrap">
? <Empty url={tagEmpty} title={t('dashboard.activityEmpty')} size={120} className="rb:mt-9 rb:mb-20.25" />
: <div className="rb:gap-3 rb:flex rb:flex-wrap">
{tagList.map((item, index) => (
<div
key={item.name}
className={clsx("rb:pt-[6px] rb:pb-[6px] rb:pr-[23px] rb:pl-[20px] rb:border-1 rb:leading-[20px] rb:bg-white rb:rounded-[17px]", {
className={clsx("rb:pt-1.5 rb:pb-1.5 rb:pr-5.75 rb:pl-5 rb:border rb:leading-5 rb:bg-white rb:rounded-[17px]", {
'rb:border-[rgba(21,94,239,0.4)] rb:text-[#155EEF]': index % 3 === 0,
'rb:border-[rgba(255,138,76,0.4)] rb:text-[#FF5D34]': index % 3 === 1,
'rb:border-[rgba(54,159,33,0.4)] rb:text-[#369F21]': index % 3 === 2,

27
web/src/views/Home/components/TopCardList/index.tsx
View File

@@ -1,13 +1,26 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 17:28:07
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 17:28:07
*/
/**
* Top Card List Component
* Displays dashboard summary cards for key metrics
* Shows total memory capacity, applications, knowledge bases, and API calls
*/
import { type FC } from 'react'
import { useTranslation } from 'react-i18next'
import totalMemoryCapacity from '@/assets/images/home/totalMemoryCapacity.svg';
import userMemory from '@/assets/images/home/userMemory.svg';
import knowledgeBaseCount from '@/assets/images/home/knowledgeBaseCount.svg';
import apiCallCount from '@/assets/images/home/apiCallCount.svg';
import styles from './index.module.css'
import clsx from 'clsx';
import type { DashboardData } from '../../index'
/** Card configuration with styling */
const list = [
{
key: 'totalMemoryCapacity',
@@ -46,10 +59,14 @@ const list = [
background: 'linear-gradient( 180deg, #F8F6F5 0%, #FAFDFF 100%)',
},
]
/**
* Component props
* @param data - Dashboard statistics data
*/
const TopCardList: FC<{data?: DashboardData}> = ({ data }) => {
const { t } = useTranslation()
return (
<div className="rb:grid rb:grid-cols-4 rb:gap-[16px]">
<div className="rb:grid rb:grid-cols-4 rb:gap-4">
{list.map((item) => {
return (
<div
@@ -65,11 +82,7 @@ const TopCardList: FC<{data?: DashboardData}> = ({ data }) => {
</div>
<div className={styles.content}>
{data?.[item.key] || item.value || 0}
<div className={styles.contentRight}>
{item.trendValue && <div className={clsx(styles.trend, styles[item.trend])}>{item.trendValue}</div>}
{item.trendDesc && <div>{t(`dashboard.${item.trendDesc}`)}</div>}
</div>
{data?.[item.key as keyof DashboardData] || 0}
</div>
</div>
)

48
web/src/views/Home/index.tsx
View File

@@ -1,5 +1,16 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 17:12:43
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 17:26:04
*/
/**
* Home Dashboard Page
* Main dashboard displaying memory statistics, charts, activities, and quick operations
*/
import { useEffect, useState } from 'react';
import { Row, Col, Space } from 'antd';
import { Row, Col } from 'antd';
import TopCardList from './components/TopCardList'
import LineCard from './components/LineCard'
@@ -9,6 +20,9 @@ import RecentActivity from './components/RecentActivity'
import TagList from './components/TagList'
import QuickOperation from './components/QuickOperation'
/**
* Dashboard statistics data
*/
export interface DashboardData {
totalMemoryCapacity?: number;
application?: number;
@@ -25,12 +39,12 @@ const Home = () => {
const [memoryIncrement, setMemoryIncrement] = useState<Array<{ updated_at: string; total_num: number; }>>([]);
const [limit, setLimit] = useState(7);
// 模拟API获取数据
/** Simulate API data fetch */
useEffect(() => {
getData()
getKnowledgeTypeDistribution()
}, []);
// 记忆总量 / 应用数量 / 知识库数量 / API调用次数
/** Fetch memory total, app count, knowledge base count, API call count */
const getData = () => {
getDashboardData().then(res => {
const response = res as {
@@ -49,16 +63,16 @@ const Home = () => {
}
}
const { storage_type = 'neo4j' } = response || {}
const responseData = response[storage_type + '_data'] || {}
const responseData = storage_type === 'neo4j' ? response.neo4j_data : response.rag_data
setDashboardData({
totalMemoryCapacity: responseData.total_memory || 0,
application: responseData.total_app || 0,
knowledgeBaseCount: responseData.total_knowledge || 0,
apiCallCount: responseData.total_api_call || 0
totalMemoryCapacity: responseData?.total_memory || 0,
application: responseData?.total_app || 0,
knowledgeBaseCount: responseData?.total_knowledge || 0,
apiCallCount: responseData?.total_api_call || 0
})
})
}
// 知识库类型分布 / 知识库数量
/** Fetch knowledge base type distribution */
const getKnowledgeTypeDistribution = () => {
setLoading({
...loading,
@@ -86,7 +100,7 @@ const Home = () => {
})
})
}
// 记忆增长趋势
/** Fetch memory growth trend data */
const getMemoryIncrementData = () => {
getMemoryIncrement(limit).then(res => {
const response = res as { updated_at: string; total_num: number; }[]
@@ -106,12 +120,10 @@ const Home = () => {
}
return (
<div className="rb:pb-[24px]">
{/* 统计卡片 */}
<div className="rb:pb-6">
<TopCardList data={dashboardData} />
<Row className="rb:mt-[16px]" gutter={16}>
{/* 记忆增长趋势 */}
<Row className="rb:mt-4" gutter={16}>
<Col span={12}>
<LineCard
chartData={memoryIncrement}
@@ -121,7 +133,6 @@ const Home = () => {
seriesList={['total_num']}
/>
</Col>
{/* 知识库类型分布 */}
<Col span={12}>
<PieCard
loading={loading.knowledgeTypeDistribution}
@@ -130,20 +141,17 @@ const Home = () => {
</Col>
</Row>
<Row className="rb:mt-[16px]" gutter={16}>
<Row className="rb:mt-4" gutter={16}>
<Col span={12}>
{/* 最近记忆活动 */}
<RecentActivity />
</Col>
<Col span={12}>
{/* 热门记忆标签 */}
<TagList />
</Col>
</Row>
<Row className="rb:mt-[16px]" gutter={16}>
<Row className="rb:mt-4" gutter={16}>
<Col span={24}>
{/* 快速操作 */}
<QuickOperation />
</Col>
</Row>

72
web/src/views/InviteRegister/index.tsx
View File

@@ -1,10 +1,23 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:37:12
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:37:12
*/
/**
* Invite Register Page
* Handles user registration via workspace invitation link
* Validates invite token and allows new users to set up their account
*/
import React, { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate, useParams } from 'react-router-dom';
import { Button, Input, Form, Progress, App } from 'antd';
import { ExclamationCircleFilled } from '@ant-design/icons';
import { useUser, type LoginInfo } from '@/store/user';
import type { FormProps } from 'antd';
import { useUser, type LoginInfo } from '@/store/user';
import { login } from '@/api/user'
import inviteBg from '@/assets/images/login/inviteBg.png'
import checkBg from '@/assets/images/login/checkBg.png'
@@ -13,13 +26,19 @@ import { validateInviteToken } from '@/api/member'
import RbAlert from '@/components/RbAlert'
import styles from './index.module.css'
/**
* Alert extra content wrapper
*/
const Extra = ({ children }: { children: React.ReactNode }) => (
<div className="rb:flex rb:items-start">
<ExclamationCircleFilled className="rb:mr-[4px] rb:mt-[3px]" />
<ExclamationCircleFilled className="rb:mr-1 rb:mt-0.75" />
{children}
</div>
)
/**
* Invite registration component
*/
const InviteRegister: React.FC = () => {
const navigate = useNavigate();
const { t } = useTranslation();
@@ -36,6 +55,7 @@ const InviteRegister: React.FC = () => {
getInitalData()
}, []);
/** Fetch and validate invite token */
const getInitalData = () => {
if (!token) {
message.warning(t('user.inviteLinkInvalid'))
@@ -49,39 +69,39 @@ const InviteRegister: React.FC = () => {
})
}
// 密码强度校验函数
/** Validate password strength and return score */
const validatePasswordStrength = (password: string): { strength: 'weak' | 'medium' | 'strong', error: string } => {
let strength: 'weak' | 'medium' | 'strong' = 'weak';
let score = 0;
let error = '';
// 密码长度检查
// Password length check
if (password.length < 8) {
error = t('login.lengthDesc');
return { strength, error };
}
score += 1;
// 包含数字
// Contains number
if (/\d/.test(password)) score += 1;
// 包含小写字母
// Contains lowercase letter
if (/[a-z]/.test(password)) score += 1;
// 包含大写字母
// Contains uppercase letter
if (/[A-Z]/.test(password)) score += 1;
// 包含特殊字符
// Contains special character
if (/[^A-Za-z0-9]/.test(password)) score += 1;
// 判断强度
// Determine strength
if (score >= 4) {
strength = 'strong';
} else if (score >= 3) {
strength = 'medium';
}
// 根据强度返回提示
// Return message based on strength
if (strength === 'weak' && score >= 1) {
error = t('login.weakDesc');
} else if (strength === 'medium') {
@@ -91,7 +111,7 @@ const InviteRegister: React.FC = () => {
return { strength, error };
};
// 监听密码变化，更新强度
/** Update password strength indicator on change */
const handlePasswordChange = (value: string) => {
if (!value) {
setPasswordStrength(null);
@@ -101,19 +121,19 @@ const InviteRegister: React.FC = () => {
setPasswordStrength(strength);
};
// 密码一致性校验
/** Validate password confirmation matches */
const validateConfirmPassword = (_: unknown, value: string) => {
const password = values.password;
if (!value) {
return Promise.reject(new Error('请确认密码'));
return Promise.reject(new Error('Please confirm password'));
}
if (value !== password) {
return Promise.reject(new Error('两次输入的密码不一致'));
return Promise.reject(new Error('Passwords do not match'));
}
return Promise.resolve();
};
// 处理注册提交
/** Handle registration form submission */
const handleRegister: FormProps<LoginForm>['onFinish'] = async (values) => {
setLoading(true);
login({
@@ -133,12 +153,12 @@ const InviteRegister: React.FC = () => {
return (
<div className="rb:w-screen rb:h-screen rb:flex rb:items-center rb:justify-center">
<img src={inviteBg} className="rb:w-screen rb:h-screen rb:fixed rb:top-0 rb:left-0 rb:z-[0]" />
<img src={inviteBg} className="rb:w-screen rb:h-screen rb:fixed rb:top-0 rb:left-0 rb:z-0" />
<div className="rb:relative rb:z-[1] rb:w-[480px] rb:max-h-full rb:overflow-y-auto rb:bg-[#FFFFFF] rb:rounded-[12px] rb:shadow-[0px_2px_10px_0px_rgba(11,49,124,0.2)]">
<div className="rb:bg-[url('@/assets/images/login/inviteForm.png')] rb:bg-cover rb:bg-no-repeat rb:text-[24px] rb:font-bold rb:leading-[32px] rb:p-[28px_24px]">
<div className="rb:relative rb:z-1 rb:w-120 rb:max-h-full rb:overflow-y-auto rb:bg-[#FFFFFF] rb:rounded-xl rb:shadow-[0px_2px_10px_0px_rgba(11,49,124,0.2)]">
<div className="rb:bg-[url('@/assets/images/login/inviteForm.png')] rb:bg-cover rb:bg-no-repeat rb:text-[24px] rb:font-bold rb:leading-8 rb:p-[28px_24px]">
{t('login.welcomeTeam')}
<div className="rb:text-[#5B6167] rb:text-[12px] rb:font-regular rb:leading-[16px] rb:mt-[10px]">{t('login.welcomeTeamSubTitle')}</div>
<div className="rb:text-[#5B6167] rb:text-[12px] rb:font-regular rb:leading-4 rb:mt-2.5">{t('login.welcomeTeamSubTitle')}</div>
</div>
<Form
form={form}
@@ -146,10 +166,10 @@ const InviteRegister: React.FC = () => {
layout="vertical"
className={styles.form}
>
<RbAlert icon={<img src={checkBg} className="rb:w-[24px] rb:h-[24px]" />} className="rb:mb-[24px]">
<div className="rb:text-[14px] rb:font-medium rb:leading-[20px]">
<RbAlert icon={<img src={checkBg} className="rb:w-6 rb:h-6" />} className="rb:mb-6">
<div className="rb:text-[14px] rb:font-medium rb:leading-5">
{t('login.invitationVerified')}
<div className="rb:text-[12px] rb:font-regular rb:leading-[16px] rb:mt-[4px]">{t('login.account')}: {values?.email || '-'}</div>
<div className="rb:text-[12px] rb:font-regular rb:leading-4 rb:mt-1">{t('login.account')}: {values?.email || '-'}</div>
</div>
</RbAlert>
<Form.Item
@@ -164,14 +184,14 @@ const InviteRegister: React.FC = () => {
label={t('login.setPassword')}
extra={
<div>
<div className="rb:mb-[12px]">
<div className="rb:mb-3">
<Progress
percent={passwordStrength === 'weak' ? 33 : passwordStrength === 'medium' ? 66 : passwordStrength === 'strong' ? 100 : 0}
steps={3}
showInfo={false}
style={{width: '100%'}}
/>
<div className="rb:font-medium rb:mt-[8px]">
<div className="rb:font-medium rb:mt-2">
{t('login.passwordStrength')}:
{passwordStrength
? <span className="rb:text-[#155EEF]">{t(`login.${passwordStrength}`)}</span>
@@ -221,7 +241,7 @@ const InviteRegister: React.FC = () => {
</Form.Item>
<Form.Item
name="username"
label={<>{t('login.name')}<span className="rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:leading-[20px]"> {t('login.nameSubTitle')}</span></>}
label={<>{t('login.name')}<span className="rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:leading-5"> {t('login.nameSubTitle')}</span></>}
>
<Input placeholder={t('login.namePlaceholder')} />
</Form.Item>
@@ -230,7 +250,7 @@ const InviteRegister: React.FC = () => {
block
loading={loading}
htmlType="submit"
className="rb:h-[40px]! rb:rounded-[8px]!"
className="rb:h-10! rb:rounded-lg!"
>
{t('login.register')}
</Button>

27
web/src/views/InviteRegister/types.ts
View File

@@ -1,14 +1,41 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:37:20
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:37:20
*/
/**
* Type definitions for Invite Register
*/
/**
* Registration form data
*/
export interface LoginForm {
/** User email address */
email: string;
/** User password */
password: string;
/** Password confirmation */
confirmPassword: string;
/** User display name */
username: string;
}
/**
* Invite token validation response
*/
export interface ValidateToken {
/** Workspace name */
workspace_name: string;
/** Workspace ID */
workspace_id: string;
/** Invited user email */
email: string;
/** User role in workspace */
role: string;
/** Whether token is expired */
is_expired: boolean;
/** Whether token is valid */
is_valid: boolean;
}

51
web/src/views/Login/index.tsx
View File

@@ -1,8 +1,21 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:40:01
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:40:32
*/
/**
* Login Page
* Handles user authentication and login
* Features split-screen design with branding and login form
*/
import React, { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { Button, Input, Form, App } from 'antd';
import { useUser, type LoginInfo } from '@/store/user';
import type { FormProps } from 'antd';
import { useUser, type LoginInfo } from '@/store/user';
import { login } from '@/api/user'
import loginBg from '@/assets/images/login/loginBg.png'
import check from '@/assets/images/login/check.png'
@@ -10,8 +23,14 @@ import email from '@/assets/images/login/email.svg'
import lock from '@/assets/images/login/lock.svg'
import type { LoginForm } from './types';
/**
* Input field styling
*/
const inputClassName = "rb:rounded-[8px]! rb:p-[12px]! rb:h-[44px]!"
const LoginPage: React.FC = () => {
/**
* Login page component
*/const LoginPage: React.FC = () => {
const { t } = useTranslation();
const { clearUserInfo, updateLoginInfo, getUserInfo } = useUser();
const [loading, setLoading] = useState(false);
@@ -22,7 +41,7 @@ const LoginPage: React.FC = () => {
clearUserInfo();
}, []);
// 处理登录提交
/** Handle login form submission */
const handleLogin: FormProps<LoginForm>['onFinish'] = async (values) => {
if (!values.email) {
message.warning(t('login.emailPlaceholder'));
@@ -48,18 +67,18 @@ const LoginPage: React.FC = () => {
<div className="rb:min-h-screen rb:flex rb:h-screen">
<div className="rb:relative rb:w-1/2 rb:h-screen rb:overflow-hidden">
<img src={loginBg} alt="loginBg" className="rb:w-full rb:h-full rb:object-cover rb:absolute rb:top-1/2 rb:-translate-y-1/2 rb:left-0" />
<div className="rb:absolute rb:top-[56px] rb:left-[64px]">
<div className="rb:text-[28px] rb:leading-[33px] rb:font-bold rb:font-[AlimamaShuHeiTi,AlimamaShuHeiTi] rb:mb-[16px]">{t('login.title')}</div>
<div className="rb:text-[18px] rb:leading-[25px] rb:font-regular">{t('login.subTitle')}</div>
<div className="rb:absolute rb:top-14 rb:left-16">
<div className="rb:text-[28px] rb:leading-8.25 rb:font-bold rb:font-[AlimamaShuHeiTi,AlimamaShuHeiTi] rb:mb-4">{t('login.title')}</div>
<div className="rb:text-[18px] rb:leading-6.25 rb:font-regular">{t('login.subTitle')}</div>
</div>
<div className="rb:absolute rb:bottom-[81px] rb:left-[64px] rb:grid rb:grid-cols-2 rb:gap-x-[120px] rb:gap-y-[43px]">
<div className="rb:absolute rb:bottom-20.25 rb:left-16 rb:grid rb:grid-cols-2 rb:gap-x-30 rb:gap-y-10.75">
{['intelligentMemory', 'instantRecall', 'knowledgeAssociation'].map(key => (
<div key={key} className="rb:flex">
<img src={check} className="rb:w-[16px] rb:h-[16px] rb:mr-[8px] rb:mt-[3px]" />
<div className="rb:text-[16px] rb:leading-[22px]">
<img src={check} className="rb:w-4 rb:h-4 rb:mr-2 rb:mt-0.75" />
<div className="rb:text-[16px] rb:leading-5.5">
<div className="rb:font-medium">{t(`login.${key}`)}</div>
<div className="rb:text-[#5B6167] rb:text-[14px] rb:leading-[20px] rb:font-regular! rb:mt-[8px]">{t(`login.${key}Desc`)}</div>
<div className="rb:text-[#5B6167] rb:text-[14px] rb:leading-5 rb:font-regular! rb:mt-2">{t(`login.${key}Desc`)}</div>
</div>
</div>
))}
@@ -67,22 +86,22 @@ const LoginPage: React.FC = () => {
</div>
<div className="rb:bg-[#FFFFFF] rb:flex rb:items-center rb:justify-center rb:flex-[1_1_auto]">
<div className="rb:w-[400px] rb:mx-auto">
<div className="rb:text-center rb:text-[28px] rb:font-semibold rb:leading-[32px] rb:mb-[48px]">{t('login.welcome')}</div>
<div className="rb:w-100 rb:mx-auto">
<div className="rb:text-center rb:text-[28px] rb:font-semibold rb:leading-8 rb:mb-12">{t('login.welcome')}</div>
<Form
form={form}
onFinish={handleLogin}
>
<Form.Item name="email" className="rb:mb-[20px]!">
<Form.Item name="email" className="rb:mb-5!">
<Input
prefix={<img src={email} className="rb:w-[20px] rb:h-[20px] rb:mr-[8px]" />}
prefix={<img src={email} className="rb:w-5 rb:h-5 rb:mr-2" />}
placeholder={t('login.emailPlaceholder')}
className={inputClassName}
/>
</Form.Item>
<Form.Item name="password">
<Input.Password
prefix={<img src={lock} className="rb:w-[20px] rb:h-[20px] rb:mr-[8px]" />}
prefix={<img src={lock} className="rb:w-5 rb:h-5 rb:mr-2" />}
placeholder={t('login.passwordPlaceholder')}
className={inputClassName}
/>
@@ -92,7 +111,7 @@ const LoginPage: React.FC = () => {
block
loading={loading}
htmlType="submit"
className="rb:h-[40px]! rb:rounded-[8px]! rb:mt-[16px]"
className="rb:h-10! rb:rounded-lg! rb:mt-4"
>
{t('login.loginIn')}
</Button>

15
web/src/views/Login/types.ts
View File

@@ -1,4 +1,19 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:40:06
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:40:06
*/
/**
* Type definitions for Login
*/
/**
* Login form data
*/
export interface LoginForm {
/** User email address */
email: string;
/** User password */
password: string;
}

29
web/src/views/MemberManagement/components/MemberModal.tsx
View File

@@ -1,3 +1,15 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:42:17
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:42:17
*/
/**
* Member Modal
* Modal for inviting new members or editing existing member roles
* Generates invitation links for new members
*/
import { forwardRef, useImperativeHandle, useState } from 'react';
import { Form, Input, Select, Modal, App } from 'antd';
import type { SelectProps } from 'antd';
@@ -12,10 +24,17 @@ const FormItem = Form.Item;
const { Option } = Select;
type LabelRender = SelectProps['labelRender'];
/**
* Component props
*/
interface MemberModalProps {
/** Callback to refresh member list */
refreshTable: () => void;
}
/**
* Modal for member invitation and editing
*/
const MemberModal = forwardRef<MemberModalRef, MemberModalProps>(({
refreshTable
}, ref) => {
@@ -36,7 +55,7 @@ const MemberModal = forwardRef<MemberModalRef, MemberModalProps>(({
]
const values: MemberModalData = Form.useWatch([], form);
// 封装取消方法，添加关闭弹窗逻辑
/** Close modal and reset form */
const handleClose = () => {
setVisible(false);
setEditingUser(null);
@@ -44,10 +63,11 @@ const MemberModal = forwardRef<MemberModalRef, MemberModalProps>(({
setLoading(false)
};
/** Open modal with optional member data for editing */
const handleOpen = (member?: Member | null) => {
if (member) {
setEditingUser(member);
// 设置表单值
// Set form values
form.setFieldsValue({
email: member.account,
role: member.role
@@ -57,7 +77,7 @@ const MemberModal = forwardRef<MemberModalRef, MemberModalProps>(({
}
setVisible(true);
};
// 封装保存方法，添加提交逻辑
/** Save member (invite or update) */
const handleSave = () => {
form
.validateFields()
@@ -100,11 +120,12 @@ const MemberModal = forwardRef<MemberModalRef, MemberModalProps>(({
});
}
// 暴露给父组件的方法
/** Expose methods to parent component */
useImperativeHandle(ref, () => ({
handleOpen,
handleClose
}));
/** Custom label renderer for role select */
const labelRender: LabelRender = (props) => {
const { label, value } = props;

24
web/src/views/MemberManagement/index.tsx
View File

@@ -1,35 +1,49 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:42:12
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:42:12
*/
/**
* Member Management Page
* Manages workspace members with invite, edit, and delete functionality
*/
import React, { useRef } from 'react';
import { App, Button, Space } from 'antd';
import { useTranslation } from 'react-i18next';
import type { ColumnsType } from 'antd/es/table';
import type { AnyObject } from 'antd/es/_util/type';
import { deleteMember, memberListUrl } from '@/api/member';
import { deleteMember, memberListUrl } from '@/api/member';
import MemberModal from './components/MemberModal';
import type { Member, MemberModalRef } from './types'
import Tag from '@/components/Tag';
import Table, { type TableRef } from '@/components/Table'
import { formatDateTime } from '@/utils/format';
/**
* Member management main component
*/
const MemberManagement: React.FC = () => {
const { t } = useTranslation();
const { message, modal } = App.useApp();
const memberFormRef = useRef<MemberModalRef>(null);
const tableRef = useRef<TableRef>(null);
// 打开新增用户弹窗
/** Open member modal for create or edit */
const handleEdit = (member?: Member) => {
if (memberFormRef.current) {
memberFormRef.current.handleOpen(member);
}
}
// 刷新列表数据
/** Refresh member list */
const refreshTable = () => {
tableRef.current?.loadData()
}
// 单个删除用户
/** Delete member with confirmation */
const handleDelete = async (member: Member) => {
modal.confirm({
title: t('common.confirmDeleteDesc', { name: member.username }),
@@ -46,7 +60,7 @@ const MemberManagement: React.FC = () => {
})
};
// 表格列配置
/** Table column configuration */
const columns: ColumnsType = [
{
title: t('member.username'),

32
web/src/views/MemberManagement/types.ts
View File

@@ -1,17 +1,43 @@
// 用户数据类型
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:42:00
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:42:00
*/
/**
* Type definitions for Member Management
*/
/**
* Member data structure
*/
export interface Member {
/** Member ID */
id: string;
/** Member username */
username: string;
/** Member account (email) */
account: string;
/** Member role */
role: string;
/** Last login timestamp */
last_login_at: string | number;
}
// 用户表单数据类型
/**
* Member invitation/edit form data
*/
export interface MemberModalData {
/** Member email address */
email: string;
/** Member role */
role: string;
}
// 定义组件暴露的方法接口
/**
* Member modal ref interface
*/
export interface MemberModalRef {
/** Open modal with optional member data for editing */
handleOpen: (user?: Member | null) => void;
}

9
web/src/views/MemoryConversation/components/Card.tsx
View File

@@ -1,6 +1,15 @@
/**
* Card Component
* Styled wrapper for conversation and analysis panels
* Provides consistent layout and styling
*/
import { Card } from 'antd'
import { type FC, type ReactNode } from 'react'
/**
* Component props
*/
interface RbCardProps {
children: ReactNode;
title: string;

45
web/src/views/MemoryConversation/index.tsx
View File

@@ -1,6 +1,20 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 17:09:03
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 17:09:03
*/
/**
* Memory Conversation Page
* Interactive conversation interface with memory analysis
* Supports deep thinking, normal reply, and quick reply modes
*/
import { type FC, type ReactNode, useState, useEffect } from 'react'
import { useTranslation } from 'react-i18next'
import { Col, Row, App, Skeleton, Space, Select, Flex } from 'antd'
import dayjs from 'dayjs'
import type { AnyObject } from 'antd/es/_util/type';
import clsx from 'clsx'
import ConversationEmptyIcon from '@/assets/images/conversation/conversationEmpty.svg'
@@ -19,46 +33,61 @@ import DeepThinkingCheckedIcon from '@/assets/images/conversation/deepThinkingCh
import OnlineCheckedIcon from '@/assets/images/conversation/onlineChecked.svg'
import MemoryFunctionCheckedIcon from '@/assets/images/conversation/memoryFunctionChecked.svg'
import type { ChatItem } from '@/components/Chat/types'
import dayjs from 'dayjs'
import type { AnyObject } from 'antd/es/_util/type';
/** Search mode configuration */
const searchSwitchList = [
{
icon: DeepThinkingIcon,
checkedIcon: DeepThinkingCheckedIcon,
value: '0',
label: 'deepThinking' // 深度思考
label: 'deepThinking'
},
{
icon: MemoryFunctionIcon,
checkedIcon: MemoryFunctionCheckedIcon,
value: '1',
label: 'normalReply' // 普通回复
label: 'normalReply'
},
{
icon: OnlineIcon,
checkedIcon: OnlineCheckedIcon,
value: '2',
label: 'quickReply' // 快速回复
label: 'quickReply'
},
]
/**
* Test parameters for conversation API
*/
export interface TestParams {
/** End user identifier */
end_user_id: string;
/** User message content */
message: string;
/** Search mode switch (0: deep thinking, 1: normal, 2: quick) */
search_switch: string;
/** Conversation history */
history: { role: string; content: string }[];
/** Enable web search */
web_search?: boolean;
/** Enable memory function */
memory?: boolean;
/** Conversation ID */
conversation_id?: string;
}
/**
* Data item in analysis logs
*/
interface DataItem {
id: string;
question: string;
type: string;
reason: string;
}
/**
* Log item for conversation analysis
*/
export interface LogItem {
type: string;
title: string;
@@ -72,6 +101,9 @@ export interface LogItem {
index?: number;
}
/**
* Content wrapper component for analysis items
*/
const ContentWrapper: FC<{ children: ReactNode }> = ({ children }) => (
<div className="rb:p-3 rb:bg-[#F6F8FC] rb:border rb:border-[#DFE4ED] rb:rounded-lg">
{children}
@@ -89,6 +121,7 @@ const MemoryConversation: FC = () => {
const [search_switch, setSearchSwitch] = useState('0')
const [msg, setMsg] = useState<string>('')
/** Load user list on mount */
useEffect(() => {
getUserMemoryList().then(res => {
setUserList((res as Data[] || []).map(item => ({
@@ -98,6 +131,7 @@ const MemoryConversation: FC = () => {
})
}, [])
/** Handle message send */
const handleSend = () => {
if(!userId) {
message.warning(t('common.inputPlaceholder', { title: t('memoryConversation.userID') }))
@@ -121,6 +155,7 @@ const MemoryConversation: FC = () => {
})
}
/** Handle search mode change */
const handleChange = (value: string) => {
setSearchSwitch(value)
}

0
web/src/views/MemoryConversation/types.ts
View File

17
web/src/views/MemoryExtractionEngine/components/Card.tsx
View File

@@ -1,9 +1,24 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 17:30:51
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 17:30:51
*/
/**
* Card Component
* Collapsible card wrapper for configuration sections
*/
import { type FC, type ReactNode } from 'react'
import { useTranslation } from 'react-i18next'
import clsx from 'clsx';
import RbCard from '@/components/RbCard/Card'
import down from '@/assets/images/userMemory/down.svg'
/**
* Component props
*/
interface CardProps {
type?: string;
title: string | ReactNode;
@@ -35,7 +50,7 @@ const Card: FC<CardProps> = ({
headerType="borderless"
extra={type && handleExpand && (
<div
className="rb:flex rb:items-center rb:text-[14px] rb:text-[#5B6167] rb:cursor-pointer rb:font-regular rb:leading-[20px]"
className="rb:flex rb:items-center rb:text-[14px] rb:text-[#5B6167] rb:cursor-pointer rb:font-regular rb:leading-5"
onClick={() => handleExpand(type)}
>
{expanded ? t('common.foldUp') : t('common.expanded')}

30
web/src/views/MemoryExtractionEngine/components/Result.tsx
View File

@@ -1,9 +1,23 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 17:30:11
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 17:30:11
*/
/**
* Result Component
* Displays real-time extraction results with progress tracking
* Shows text preprocessing, knowledge extraction, node/edge creation, and deduplication
*/
import { type FC, useState } from 'react'
import { useParams } from 'react-router-dom'
import { useTranslation } from 'react-i18next'
import { Space, Button, Progress } from 'antd'
import { ExclamationCircleFilled, CheckCircleFilled, ClockCircleOutlined, LoadingOutlined } from '@ant-design/icons'
import clsx from 'clsx'
import type { AnyObject } from 'antd/es/_util/type';
import Card from './Card'
import RbCard from '@/components/RbCard/Card'
import RbAlert from '@/components/RbAlert'
@@ -13,18 +27,24 @@ import { type SSEMessage } from '@/utils/stream'
import Tag, { type TagProps } from '@/components/Tag'
import Markdown from '@/components/Markdown'
import { groupDataByType } from '../constant'
import type { AnyObject } from 'antd/es/_util/type';
/** Result metric mapping */
const resultObj = {
extractTheNumberOfEntities: 'entities.extracted_count',
numberOfEntityDisambiguation: 'disambiguation.block_count',
memoryFragments: 'memory.chunks',
numberOfRelationalTriples: 'triplets.count'
}
/**
* Component props
*/
interface ResultProps {
loading: boolean;
handleSave: () => void;
}
/**
* Module processing item
*/
interface ModuleItem {
status: 'pending' | 'processing' | 'completed' | 'failed';
data: any[],
@@ -32,6 +52,7 @@ interface ModuleItem {
start_at?: number;
end_at?: number;
}
/** Tag color mapping by status */
const tagColors: {
[key: string]: TagProps['color']
} = {
@@ -40,6 +61,7 @@ const tagColors: {
completed: 'success',
failed: 'error'
}
/** Initial module state */
const initObj = {
data: [],
status: 'pending',
@@ -57,6 +79,7 @@ const Result: FC<ResultProps> = ({ loading, handleSave }) => {
const [creatingNodesEdges, setCreatingNodesEdges] = useState<ModuleItem>(initObj as ModuleItem)
const [deduplication, setDeduplication] = useState<ModuleItem>(initObj as ModuleItem)
/** Run pilot test */
const handleRun = () => {
if(!id) return
setTextPreprocessing({...initObj} as ModuleItem)
@@ -172,6 +195,7 @@ const Result: FC<ResultProps> = ({ loading, handleSave }) => {
const completedNum = [textPreprocessing, knowledgeExtraction, creatingNodesEdges, deduplication].filter(item => item.status === 'completed').length
const deduplicationData = groupDataByType(deduplication.data, 'result_type')
/** Format status tag */
const formatTag = (status: string) => {
return (
<Tag color={tagColors[status]}>
@@ -181,12 +205,14 @@ const Result: FC<ResultProps> = ({ loading, handleSave }) => {
</Tag>
)
}
/** Format processing time */
const formatTime = (data: ModuleItem, color?: string) => {
if (typeof data.end_at === 'number' && typeof data.start_at === 'number') {
return <div className={`rb:mt-3 rb:text-[${color ?? '#155EEF'}]`}>{t('memoryExtractionEngine.time')}{data.end_at - data.start_at}ms</div>
}
return null
}
/** Convert first character to lowercase */
const lowercaseFirst = (str: string) => str.charAt(0).toLowerCase() + str.slice(1)
return (
<Card
@@ -307,7 +333,7 @@ const Result: FC<ResultProps> = ({ loading, handleSave }) => {
const keys = (resultObj as Record<string, string>)[key].split('.')
return (
<div key={index}>
<div className="rb:text-[24px] rb:leading-[30px] rb:font-extrabold">{(testResult?.[keys[0] as keyof TestResult] as any)?.[keys[1]]}</div>
<div className="rb:text-[24px] rb:leading-7.5 rb:font-extrabold">{(testResult?.[keys[0] as keyof TestResult] as any)?.[keys[1]]}</div>
<div className="rb:text-[12px] rb:text-[#5B6167] rb:leading-4 rb:font-regular">{t(`memoryExtractionEngine.${key}`)}</div>
<div className="rb:mt-1 rb:text-[12px] rb:text-[#369F21] rb:leading-3.5 rb:font-regular">
{}

20
web/src/views/MemoryExtractionEngine/constant.ts
View File

@@ -1,5 +1,17 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 17:30:06
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 17:30:06
*/
/**
* Memory Extraction Engine Configuration Constants
* Defines configuration structure for storage and arrangement layer modules
*/
import type { ConfigVo } from './types'
/** Configuration list for memory extraction engine */
export const configList: ConfigVo[] = [
{
type: 'storageLayerModule',
@@ -206,6 +218,7 @@ export const configList: ConfigVo[] = [
}
]
/** Mock module data for testing */
export const mockModuleData = [
{
"data": [
@@ -1074,7 +1087,12 @@ export const mockModuleData = [
}
}
]
// 按type聚合数据的处理函数
/**
* Group data by specified key
* @param data - Array of data items
* @param groupKey - Key to group by
* @returns Grouped data object
*/
export const groupDataByType = (data: any[], groupKey: string) => {
const grouped: { [key: string]: any[] } = {}

20
web/src/views/MemoryExtractionEngine/index.tsx
View File

@@ -1,3 +1,15 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 17:30:02
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 17:30:02
*/
/**
* Memory Extraction Engine Configuration Page
* Configures entity deduplication, disambiguation, semantic anchoring, and pruning
* Supports real-time testing with example data
*/
import { type FC, useState, useEffect } from 'react'
import { useTranslation } from 'react-i18next'
import { useParams } from 'react-router-dom'
@@ -14,12 +26,15 @@ import Result from './components/Result'
import SwitchFormItem from '@/components/FormItem/SwitchFormItem'
import CustomSelect from '@/components/CustomSelect'
/** Available configuration section keys */
const keys = [
// 'example',
'storageLayerModule',
'arrangementLayerModule'
]
/**
* Configuration description component
*/
const ConfigDesc: FC<{ config: Variable, className?: string }> = ({config, className}) => {
const { t } = useTranslation();
return (
@@ -54,6 +69,7 @@ const MemoryExtractionEngine: FC = () => {
}
}, [values])
/** Fetch configuration data */
const getConfig = () => {
if (!id) {
return
@@ -79,11 +95,13 @@ const MemoryExtractionEngine: FC = () => {
}
}, [id])
/** Toggle section expansion */
const handleExpand = (key: string) => {
const newKeys = expandedKeys.includes(key) ? expandedKeys.filter(item => item !== key) : [...expandedKeys, key]
setExpandedKeys(newKeys)
}
/** Save configuration */
const handleSave = () => {
if (!id) {
return

18
web/src/views/MemoryExtractionEngine/types.ts
View File

@@ -1,3 +1,12 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 17:29:55
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 17:29:55
*/
/**
* Memory Extraction Engine Configuration Form Types
*/
export interface ConfigForm {
llm_id: string;
config_id?: number | string;
@@ -19,6 +28,9 @@ export interface ConfigForm {
baseline: string;
}
/**
* Configuration variable definition
*/
export interface Variable {
label: string;
variableName: string;
@@ -33,6 +45,9 @@ export interface Variable {
max?: number;
step?: number;
}
/**
* Configuration section structure
*/
export interface ConfigVo {
type: string;
data: {
@@ -41,6 +56,9 @@ export interface ConfigVo {
}[]
}
/**
* Test result data structure
*/
export interface TestResult {
generated_at: string;
entities: Record<string, number>;

23
web/src/views/MemoryManagement/components/MemoryForm.tsx
View File

@@ -1,3 +1,14 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 17:33:22
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 17:33:22
*/
/**
* Memory Form Component
* Modal form for creating and editing memory configurations
*/
import { forwardRef, useImperativeHandle, useState } from 'react';
import { Form, Input, App } from 'antd';
import { useTranslation } from 'react-i18next';
@@ -10,6 +21,9 @@ import CustomSelect from '@/components/CustomSelect';
const FormItem = Form.Item;
/**
* Component props
*/
interface MemoryFormProps {
refresh: () => void;
}
@@ -26,7 +40,7 @@ const MemoryForm = forwardRef<MemoryFormRef, MemoryFormProps>(({
const values = Form.useWatch([], form);
// 封装取消方法，添加关闭弹窗逻辑
/** Close modal and reset form */
const handleClose = () => {
setVisible(false);
setEditingMemory(null);
@@ -34,10 +48,11 @@ const MemoryForm = forwardRef<MemoryFormRef, MemoryFormProps>(({
setLoading(false);
};
/** Open modal with optional data */
const handleOpen = (memory?: Memory | null) => {
if (memory) {
setEditingMemory(memory);
// 设置表单值
/** Set form values */
form.setFieldsValue({
config_name: memory.config_name,
config_desc: memory.config_desc,
@@ -48,7 +63,7 @@ const MemoryForm = forwardRef<MemoryFormRef, MemoryFormProps>(({
}
setVisible(true);
};
// 封装保存方法，添加提交逻辑
/** Save configuration */
const handleSave = () => {
form
.validateFields()
@@ -73,7 +88,7 @@ const MemoryForm = forwardRef<MemoryFormRef, MemoryFormProps>(({
});
}
// 暴露给父组件的方法
/** Expose methods to parent component */
useImperativeHandle(ref, () => ({
handleOpen,
handleClose

21
web/src/views/MemoryManagement/index.tsx
View File

@@ -1,15 +1,27 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 17:33:15
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 17:33:15
*/
/**
* Memory Management Page
* Manages memory configurations with extraction, forgetting, emotion, and reflection engines
* Displays configuration cards with navigation to engine settings
*/
import React, { useState, useEffect, useRef } from 'react';
import { List, Button, Space, App, Tooltip } from 'antd';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import clsx from 'clsx'
import MemoryForm from './components/MemoryForm';
import type { Memory, MemoryFormRef } from '@/views/MemoryManagement/types'
import RbCard from '@/components/RbCard/Card'
// import StatusTag from '@/components/StatusTag'
import { getMemoryConfigList, deleteMemoryConfig } from '@/api/memory'
import BodyWrapper from '@/components/Empty/BodyWrapper'
import { formatDateTime } from '@/utils/format';
import clsx from 'clsx'
import RbAlert from '@/components/RbAlert'
const MemoryManagement: React.FC = () => {
@@ -25,6 +37,7 @@ const MemoryManagement: React.FC = () => {
loadMoreData()
}, []);
/** Load configuration list */
const loadMoreData = () => {
setLoading(true);
getMemoryConfigList()
@@ -41,10 +54,11 @@ const MemoryManagement: React.FC = () => {
});
};
// 打开新增标签弹窗
/** Open create/edit modal */
const handleEdit = (config?: Memory) => {
memoryFormRef.current?.handleOpen(config);
}
/** Delete configuration */
const handleDelete = (item: Memory) => {
modal.confirm({
title: t('common.confirmDeleteDesc', { name: item.config_name }),
@@ -61,6 +75,7 @@ const MemoryManagement: React.FC = () => {
})
};
/** Navigate to engine configuration page */
const handleClick = (id: number, type: string) => {
switch (type) {
case 'memoryExtractionEngine':

18
web/src/views/MemoryManagement/types.ts
View File

@@ -1,4 +1,12 @@
// 内存管理表单数据类型
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 17:33:01
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 17:33:24
*/
/**
* Memory management form data type
*/
export interface MemoryFormData {
config_id?: number;
config_name: string;
@@ -6,7 +14,9 @@ export interface MemoryFormData {
scene_id?: string;
}
// 内存数据类型
/**
* Memory configuration data type
*/
export interface Memory {
config_id: number;
config_name: string;
@@ -34,7 +44,9 @@ export interface Memory {
scene_name: string;
[key: string]: string | number | boolean;
}
// 定义组件暴露的方法接口
/**
* Component exposed methods interface
*/
export interface MemoryFormRef {
handleOpen: (memory?: Memory | null) => void;
}

18
web/src/views/ModelManagement/Group.tsx
View File

@@ -1,3 +1,15 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:50:00
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:50:00
*/
/**
* Group Model View
* Displays composite/group models in card grid layout
* Supports filtering and configuration
*/
import { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
import clsx from 'clsx'
import { Button } from 'antd'
@@ -9,12 +21,16 @@ import { getModelNewList } from '@/api/models'
import PageEmpty from '@/components/Empty/PageEmpty';
import { formatDateTime } from '@/utils/format';
/**
* Group model list component
*/
const Group = forwardRef <BaseRef,{ query: any; handleEdit: (data: ModelListItem) => void; }>(({ query, handleEdit }, ref) => {
const { t } = useTranslation();
const [list, setList] = useState<ModelListItem[]>([])
useEffect(() => {
getList()
}, [query])
/** Fetch group model list */
const getList = () => {
getModelNewList({
...query,
@@ -26,6 +42,7 @@ const Group = forwardRef <BaseRef,{ query: any; handleEdit: (data: ModelListItem
setList(response[0]?.models || [])
})
}
/** Format model data for display */
const formatData = (data: ModelListItem) => {
return [
{
@@ -46,6 +63,7 @@ const Group = forwardRef <BaseRef,{ query: any; handleEdit: (data: ModelListItem
]
}
/** Expose methods to parent component */
useImperativeHandle(ref, () => ({
getList,
}));

18
web/src/views/ModelManagement/List.tsx
View File

@@ -1,3 +1,15 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:50:10
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:50:10
*/
/**
* Model List View
* Displays models grouped by provider with key configuration
* Shows model tags and allows viewing model details
*/
import { useRef, useState, useEffect, type FC } from 'react';
import { Button, Flex, Row, Col } from 'antd'
import { useTranslation } from 'react-i18next';
@@ -11,6 +23,9 @@ import KeyConfigModal from './components/KeyConfigModal'
import ModelListDetail from './components/ModelListDetail'
import { getLogoUrl } from './utils'
/**
* Model list component
*/
const ModelList: FC<{ query: any }> = ({ query }) => {
const { t } = useTranslation();
const keyConfigModalRef = useRef<KeyConfigModalRef>(null)
@@ -19,6 +34,7 @@ const ModelList: FC<{ query: any }> = ({ query }) => {
useEffect(() => {
getList()
}, [query])
/** Fetch model list grouped by provider */
const getList = () => {
getModelNewList({
...query,
@@ -29,9 +45,11 @@ const ModelList: FC<{ query: any }> = ({ query }) => {
})
}
/** Open model detail drawer */
const handleShowModel = (vo: ProviderModelItem) => {
modelListDetailRef.current?.handleOpen(vo)
}
/** Open key configuration modal */
const handleKeyConfig = (vo: ProviderModelItem) => {
keyConfigModalRef.current?.handleOpen(vo)
}

19
web/src/views/ModelManagement/Square.tsx
View File

@@ -1,3 +1,15 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:50:14
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:50:14
*/
/**
* Model Square View
* Displays public model marketplace grouped by provider
* Allows adding models and viewing details
*/
import { useRef, useState, useEffect, forwardRef, useImperativeHandle } from 'react';
import { Button, Space, App, Divider, Flex, Tooltip } from 'antd'
import { UsergroupAddOutlined } from '@ant-design/icons';
@@ -11,6 +23,9 @@ import Tag from '@/components/Tag';
import ModelSquareDetail from './components/ModelSquareDetail'
import { getLogoUrl } from './utils'
/**
* Model square component
*/
const ModelSquare = forwardRef <BaseRef, { query: any; handleEdit: (vo?: ModelPlazaItem) => void; }>(({ query, handleEdit }, ref) => {
const { t } = useTranslation();
const { message } = App.useApp()
@@ -19,6 +34,7 @@ const ModelSquare = forwardRef <BaseRef, { query: any; handleEdit: (vo?: ModelPl
useEffect(() => {
getList()
}, [query])
/** Fetch model plaza list */
const getList = () => {
getModelPlaza(query)
.then(res => {
@@ -26,9 +42,11 @@ const ModelSquare = forwardRef <BaseRef, { query: any; handleEdit: (vo?: ModelPl
})
}
/** Open model detail drawer */
const handleMore = (vo: ModelPlaza) => {
modelSquareDetailRef.current?.handleOpen(vo)
}
/** Add model to workspace */
const handleAdd = (item: ModelPlazaItem) => {
addModelPlaza(item.id)
.then(() => {
@@ -37,6 +55,7 @@ const ModelSquare = forwardRef <BaseRef, { query: any; handleEdit: (vo?: ModelPl
})
}
/** Expose methods to parent component */
useImperativeHandle(ref, () => ({
getList,
}));

20
web/src/views/ModelManagement/components/CustomModelModal.tsx
View File

@@ -1,3 +1,15 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:49:28
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:49:28
*/
/**
* Custom Model Modal
* Modal for creating and editing custom models in the model square
* Supports logo upload, type/provider selection, and tagging
*/
import { forwardRef, useImperativeHandle, useState } from 'react';
import { Form, Input, App, Select } from 'antd';
import { useTranslation } from 'react-i18next';
@@ -9,6 +21,9 @@ import UploadImages from '@/components/Upload/UploadImages'
import { updateCustomModel, addCustomModel, modelTypeUrl, modelProviderUrl } from '@/api/models'
import { getFileLink } from '@/api/fileStorage'
/**
* Custom model modal component
*/
const CustomModelModal = forwardRef<CustomModelModalRef, CustomModelModalProps>(({
refresh
}, ref) => {
@@ -21,6 +36,7 @@ const CustomModelModal = forwardRef<CustomModelModalRef, CustomModelModalProps>(
const [loading, setLoading] = useState(false)
const formValues = Form.useWatch([], form)
/** Close modal and reset state */
const handleClose = () => {
setModel({} as ModelPlazaItem);
form.resetFields();
@@ -28,6 +44,7 @@ const CustomModelModal = forwardRef<CustomModelModalRef, CustomModelModalProps>(
setVisible(false);
};
/** Open modal with optional model data for editing */
const handleOpen = (model?: ModelPlazaItem) => {
if (model) {
setIsEdit(true);
@@ -42,6 +59,7 @@ const CustomModelModal = forwardRef<CustomModelModalRef, CustomModelModalProps>(
}
setVisible(true);
};
/** Update or create custom model */
const handleUpdate = (data: CustomModelForm) => {
setLoading(true)
const { type, provider, ...rest} = data
@@ -56,6 +74,7 @@ const CustomModelModal = forwardRef<CustomModelModalRef, CustomModelModalProps>(
setLoading(false)
});
}
/** Validate and save custom model */
const handleSave = () => {
form
.validateFields()
@@ -87,6 +106,7 @@ const CustomModelModal = forwardRef<CustomModelModalRef, CustomModelModalProps>(
});
}
/** Expose methods to parent component */
useImperativeHandle(ref, () => ({
handleOpen,
}));

20
web/src/views/ModelManagement/components/GroupModelModal.tsx
View File

@@ -1,3 +1,15 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:49:33
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:49:33
*/
/**
* Group Model Modal
* Modal for creating and editing composite/group models
* Supports multiple API key configuration and load balancing
*/
import { forwardRef, useImperativeHandle, useState } from 'react';
import { Form, Input, App, Select } from 'antd';
import { useTranslation } from 'react-i18next';
@@ -10,6 +22,9 @@ import UploadImages from '@/components/Upload/UploadImages'
import ModelImplement from './ModelImplement'
import { getFileLink } from '@/api/fileStorage'
/**
* Group model modal component
*/
const GroupModelModal = forwardRef<GroupModelModalRef, GroupModelModalProps>(({
refresh
}, ref) => {
@@ -22,6 +37,7 @@ const GroupModelModal = forwardRef<GroupModelModalRef, GroupModelModalProps>(({
const [loading, setLoading] = useState(false)
const type = Form.useWatch(['type'], form)
/** Close modal and reset state */
const handleClose = () => {
setModel({} as ModelListItem);
form.resetFields();
@@ -29,6 +45,7 @@ const GroupModelModal = forwardRef<GroupModelModalRef, GroupModelModalProps>(({
setVisible(false);
};
/** Open modal with optional model data for editing */
const handleOpen = (model?: ModelListItem) => {
if (model) {
setIsEdit(true);
@@ -44,6 +61,7 @@ const GroupModelModal = forwardRef<GroupModelModalRef, GroupModelModalProps>(({
}
setVisible(true);
};
/** Validate and save group model */
const handleSave = () => {
form
.validateFields()
@@ -73,6 +91,7 @@ const GroupModelModal = forwardRef<GroupModelModalRef, GroupModelModalProps>(({
});
}
/** Update or create group model */
const handleUpdate = (data: CompositeModelForm) => {
setLoading(true)
const { type, ...rest } = data
@@ -90,6 +109,7 @@ const GroupModelModal = forwardRef<GroupModelModalRef, GroupModelModalProps>(({
});
}
/** Expose methods to parent component */
useImperativeHandle(ref, () => ({
handleOpen,
handleClose

20
web/src/views/ModelManagement/components/KeyConfigModal.tsx
View File

@@ -1,10 +1,26 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:49:40
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:49:40
*/
/**
* Key Configuration Modal
* Modal for configuring API keys for model providers
* Allows setting API key and base URL
*/
import { forwardRef, useImperativeHandle, useState } from 'react';
import { Form, Input, App } from 'antd';
import { useTranslation } from 'react-i18next';
import type { KeyConfigModalForm, ProviderModelItem, KeyConfigModalRef, KeyConfigModalProps } from '../types';
import RbModal from '@/components/RbModal'
import { updateProviderApiKeys } from '@/api/models'
/**
* Key configuration modal component
*/
const KeyConfigModal = forwardRef<KeyConfigModalRef, KeyConfigModalProps>(({
refresh
}, ref) => {
@@ -15,6 +31,7 @@ const KeyConfigModal = forwardRef<KeyConfigModalRef, KeyConfigModalProps>(({
const [form] = Form.useForm<KeyConfigModalForm>();
const [loading, setLoading] = useState(false)
/** Close modal and reset state */
const handleClose = () => {
setModel({} as ProviderModelItem);
form.resetFields();
@@ -22,10 +39,12 @@ const KeyConfigModal = forwardRef<KeyConfigModalRef, KeyConfigModalProps>(({
setVisible(false);
};
/** Open modal with provider model data */
const handleOpen = (vo: ProviderModelItem) => {
setVisible(true);
setModel(vo);
};
/** Save API key configuration */
const handleSave = () => {
form
.validateFields()
@@ -51,6 +70,7 @@ const KeyConfigModal = forwardRef<KeyConfigModalRef, KeyConfigModalProps>(({
});
}
/** Expose methods to parent component */
useImperativeHandle(ref, () => ({
handleOpen,
handleClose

29
web/src/views/ModelManagement/components/ModelImplement/SubModelModal.tsx
View File

@@ -1,3 +1,15 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:49:20
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:54:54
*/
/**
* Sub-Model Modal
* Modal for selecting models and API keys to add to group model
* Uses cascader for hierarchical selection
*/
import { forwardRef, useImperativeHandle, useState, useEffect } from 'react';
import { Form, Cascader, App, type CascaderProps } from 'antd';
import { useTranslation } from 'react-i18next';
@@ -10,12 +22,19 @@ import type { ProviderModelItem } from '../../types'
const { SHOW_CHILD } = Cascader;
/**
* Cascader option interface
*/
interface Option {
value: string | number;
label: string;
children?: Option[];
[key: string]: any;
}
/**
* Sub-model modal component
*/
const SubModelModal = forwardRef<SubModelModalRef, SubModelModalProps>(({
refresh,
type,
@@ -38,7 +57,7 @@ const SubModelModal = forwardRef<SubModelModalRef, SubModelModalProps>(({
}
}, [groupedByProvider, provider])
// 封装取消方法，添加关闭弹窗逻辑
/** Close modal and reset state */
const handleClose = () => {
form.resetFields();
setVisible(false);
@@ -46,11 +65,12 @@ const SubModelModal = forwardRef<SubModelModalRef, SubModelModalProps>(({
setModelList([])
};
/** Open modal */
const handleOpen = () => {
form.resetFields()
setVisible(true);
};
// 封装保存方法，添加提交逻辑
/** Save selected models and API keys */
const handleSave = () => {
form
.validateFields()
@@ -65,6 +85,7 @@ const SubModelModal = forwardRef<SubModelModalRef, SubModelModalProps>(({
handleClose()
})
}
/** Handle cascader selection change */
const handleChange = (value: (string | number)[][], selectedOptions: Option[][]) => {
const filterList = selectedOptions.filter(vo => vo.length === 1).map(item => item[0])
const lastFilterLit = value.filter(vo => vo.length !== 1)
@@ -75,6 +96,7 @@ const SubModelModal = forwardRef<SubModelModalRef, SubModelModalProps>(({
setSelecteds(selectedOptions)
}
/** Handle provider change and load models */
const handleChangeProvider = (provider: string, api_key_ids?: any[]) => {
form.setFieldValue('api_key_ids', undefined)
if (provider) {
@@ -110,6 +132,7 @@ const SubModelModal = forwardRef<SubModelModalRef, SubModelModalProps>(({
setModelList([])
}
}
/** Custom display renderer for cascader */
const displayRender: CascaderProps<Option>['displayRender'] = (labels, selectedOptions = []) =>
labels.map((label, i) => {
const option = selectedOptions[i];
@@ -123,7 +146,7 @@ const SubModelModal = forwardRef<SubModelModalRef, SubModelModalProps>(({
return <span key={option?.value || i}>{label} / </span>;
});
// 暴露给父组件的方法
/** Expose methods to parent component */
useImperativeHandle(ref, () => ({
handleOpen,
}));

26
web/src/views/ModelManagement/components/ModelImplement/index.tsx
View File

@@ -1,3 +1,15 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:49:12
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:49:12
*/
/**
* Model Implementation Component
* Manages model implementations with API keys for group models
* Allows adding and removing model-API key associations
*/
import { type FC, useRef } from "react";
import { useTranslation } from 'react-i18next';
import { Flex, Button, Space, App } from 'antd'
@@ -7,16 +19,27 @@ import SubModelModal from './SubModelModal'
import Empty from '@/components/Empty'
import Tag from '@/components/Tag'
/**
* Component props
*/
interface ModelImplementProps {
/** Model type */
type?: string;
/** Current model list value */
value?: any;
/** Callback when value changes */
onChange?: (value: any) => void;
}
/**
* Model implementation management component
*/
const ModelImplement: FC<ModelImplementProps> = ({ type, value, onChange }) => {
const { t } = useTranslation();
const { modal, message } = App.useApp();
const subModelModalRef = useRef<SubModelModalRef>(null)
/** Open add implementation modal */
const handleAdd = () => {
if (!type || type.trim() === '') {
message.warning(t('common.selectPlaceholder', { title: t('modelNew.type') }))
@@ -24,6 +47,7 @@ const ModelImplement: FC<ModelImplementProps> = ({ type, value, onChange }) => {
}
subModelModalRef.current?.handleOpen()
}
/** Delete model implementation */
const handleDelete = (vo: any) => {
modal.confirm({
title: t('common.confirmDeleteDesc', { name: [vo.model_name, vo.api_key].join(' / ') }),
@@ -36,6 +60,7 @@ const ModelImplement: FC<ModelImplementProps> = ({ type, value, onChange }) => {
}
})
}
/** Refresh model list after adding implementations */
const handleRefresh = (list: ModelList[]) => {
const existingModels = value || [];
let updatedModels = [...existingModels];
@@ -48,6 +73,7 @@ const ModelImplement: FC<ModelImplementProps> = ({ type, value, onChange }) => {
onChange?.([...updatedModels]);
}
/** Group models by provider */
const groupedByProvider: Record<string, ModelList[]> = (value || []).reduce((acc: Record<string, ModelList[]>, item: ModelList) => {
const provider = item.provider || 'unknown';
if (!acc[provider]) acc[provider] = [];

32
web/src/views/ModelManagement/components/ModelImplement/types.ts
View File

@@ -1,17 +1,49 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:49:24
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:49:24
*/
/**
* Type definitions for Model Implementation
*/
import type { ModelListItem } from '../../types'
/**
* Model list item with API key ID
*/
export interface ModelList extends ModelListItem {
/** Associated API key ID */
api_key_id: string;
}
/**
* Sub-model modal form data
*/
export interface SubModelModalForm {
/** Model provider */
provider: string;
/** Selected API key IDs (nested array for cascader) */
api_key_ids: string[][];
}
/**
* Sub-model modal ref interface
*/
export interface SubModelModalRef {
/** Open modal */
handleOpen: () => void;
}
/**
* Sub-model modal props
*/
export interface SubModelModalProps {
/** Model type filter */
type?: string;
/** Callback to update model list */
refresh?: (vo: ModelList[]) => void;
/** Existing models grouped by provider */
groupedByProvider?: Record<string, ModelList[]>
}

28
web/src/views/ModelManagement/components/ModelListDetail.tsx
View File

@@ -1,3 +1,15 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:49:45
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:49:45
*/
/**
* Model List Detail Drawer
* Displays detailed list of models from a specific provider
* Allows filtering by type and configuring API keys
*/
import { useState, useImperativeHandle, forwardRef, useRef, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { Button, Switch, Row, Col, Space, Tooltip } from 'antd'
@@ -12,10 +24,17 @@ import { getModelNewList, updateModelStatus, modelTypeUrl } from '@/api/models'
import { getLogoUrl } from '../utils'
import CustomSelect from '@/components/CustomSelect'
/**
* Component props
*/
interface ModelListDetailProps {
/** Callback to refresh parent list */
refresh?: () => void;
}
/**
* Model list detail drawer component
*/
const ModelListDetail = forwardRef<ModelListDetailRef, ModelListDetailProps>(({ refresh }, ref) => {
const { t } = useTranslation();
const [open, setOpen] = useState(false);
@@ -25,12 +44,14 @@ const ModelListDetail = forwardRef<ModelListDetailRef, ModelListDetailProps>(({
const [loading, setLoading] = useState(false)
const [type, setType] = useState<string | undefined | null>(null)
/** Open drawer with provider model data */
const handleOpen = (vo: ProviderModelItem) => {
setType(null)
setOpen(true)
getData(vo)
}
/** Fetch model data for provider */
const getData = (vo: ProviderModelItem) => {
if (!vo.provider) return
@@ -43,9 +64,11 @@ const ModelListDetail = forwardRef<ModelListDetailRef, ModelListDetailProps>(({
setList(response[0].models)
})
}
/** Open key configuration modal */
const handleKeyConfig = (vo: ModelListItem) => {
multiKeyConfigModalRef.current?.handleOpen(vo, data.provider)
}
/** Toggle model active status */
const handleChange = (vo: ModelListItem) => {
setLoading(true)
updateModelStatus(vo.id, { is_active: !vo.is_active })
@@ -55,22 +78,27 @@ const ModelListDetail = forwardRef<ModelListDetailRef, ModelListDetailProps>(({
})
}
/** Close drawer */
const handleClose = () => {
setType(null)
setOpen(false)
refresh?.()
}
/** Refresh model list */
const handleRefresh = () => {
getData(data)
}
/** Handle type filter change */
const handleTypeChange = (value: string) => {
setType(value)
}
/** Expose methods to parent component */
useImperativeHandle(ref, () => ({
handleOpen,
}));
/** Filter models by selected type */
const filterList = useMemo(() => {
if (!type) return list
return list.filter(vo => vo.type === type)

26
web/src/views/ModelManagement/components/ModelSquareDetail.tsx
View File

@@ -1,3 +1,15 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:49:49
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:54:26
*/
/**
* Model Square Detail Drawer
* Displays all models from a specific provider in the model square
* Allows adding models and editing custom models
*/
import { useState, useImperativeHandle, forwardRef } from 'react';
import { useTranslation } from 'react-i18next';
import { Button, Space, App, Flex, Tooltip, Divider } from 'antd'
@@ -11,10 +23,19 @@ import Tag from '@/components/Tag';
import PageEmpty from '@/components/Empty/PageEmpty';
import { getLogoUrl } from '../utils'
/**
* Component props
*/
interface ModelSquareDetailProps {
/** Callback to refresh parent list */
refresh: () => void;
/** Callback to edit model */
handleEdit: (vo: ModelPlazaItem) => void;
}
/**
* Model square detail drawer component
*/
const ModelSquareDetail = forwardRef<ModelSquareDetailRef, ModelSquareDetailProps>(({ refresh, handleEdit }, ref) => {
const { t } = useTranslation();
const { message } = App.useApp()
@@ -23,15 +44,18 @@ const ModelSquareDetail = forwardRef<ModelSquareDetailRef, ModelSquareDetailProp
const [list, setList] = useState<ModelPlazaItem[]>([])
/** Open drawer with model plaza data */
const handleOpen = (vo: ModelPlaza) => {
setModel(vo)
setOpen(true)
getList(vo)
}
/** Close drawer */
const handleClose = () => {
setOpen(false)
refresh()
}
/** Fetch model list for provider */
const getList = (vo: ModelPlaza) => {
getModelPlaza({ provider: vo.provider })
.then(res => {
@@ -39,6 +63,7 @@ const ModelSquareDetail = forwardRef<ModelSquareDetailRef, ModelSquareDetailProp
setList(response.length > 0 ? response[0].models : [])
})
}
/** Add model to workspace */
const handleAdd = (item: ModelPlazaItem) => {
addModelPlaza(item.id)
.then(() => {
@@ -47,6 +72,7 @@ const ModelSquareDetail = forwardRef<ModelSquareDetailRef, ModelSquareDetailProp
})
}
/** Expose methods to parent component */
useImperativeHandle(ref, () => ({
handleOpen,
}));

22
web/src/views/ModelManagement/components/MultiKeyConfigModal.tsx
View File

@@ -1,10 +1,26 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:49:55
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:49:55
*/
/**
* Multi-Key Configuration Modal
* Modal for managing multiple API keys for a single model
* Allows adding and removing API keys
*/
import { forwardRef, useImperativeHandle, useState } from 'react';
import { Form, Input, App, Button } from 'antd';
import { useTranslation } from 'react-i18next';
import type { ModelListItem, MultiKeyForm, MultiKeyConfigModalRef, MultiKeyConfigModalProps } from '../types';
import RbModal from '@/components/RbModal'
import { addModelApiKey, deleteModelApiKey, getModelInfo } from '@/api/models'
/**
* Multi-key configuration modal component
*/
const MultiKeyConfigModal = forwardRef<MultiKeyConfigModalRef, MultiKeyConfigModalProps>(({ refresh }, ref) => {
const { t } = useTranslation();
const { message } = App.useApp();
@@ -13,6 +29,7 @@ const MultiKeyConfigModal = forwardRef<MultiKeyConfigModalRef, MultiKeyConfigMod
const [form] = Form.useForm<MultiKeyForm>();
const [loading, setLoading] = useState(false)
/** Close modal and refresh parent */
const handleClose = () => {
setModel({} as ModelListItem);
refresh?.()
@@ -22,11 +39,13 @@ const MultiKeyConfigModal = forwardRef<MultiKeyConfigModalRef, MultiKeyConfigMod
setVisible(false);
};
/** Open modal with model data */
const handleOpen = (vo: ModelListItem) => {
setVisible(true);
getData(vo)
};
/** Fetch model information */
const getData = (vo: ModelListItem) => {
if (!vo.id) return
@@ -35,6 +54,7 @@ const MultiKeyConfigModal = forwardRef<MultiKeyConfigModalRef, MultiKeyConfigMod
setModel(res as ModelListItem)
})
}
/** Add new API key */
const handleSave = () => {
form
.validateFields()
@@ -58,6 +78,7 @@ const MultiKeyConfigModal = forwardRef<MultiKeyConfigModalRef, MultiKeyConfigMod
console.log('err', err)
});
}
/** Delete API key */
const handleDelete = (api_key_id: string) => {
deleteModelApiKey(api_key_id)
.then(() => {
@@ -66,6 +87,7 @@ const MultiKeyConfigModal = forwardRef<MultiKeyConfigModalRef, MultiKeyConfigMod
})
}
/** Expose methods to parent component */
useImperativeHandle(ref, () => ({
handleOpen,
}));

24
web/src/views/ModelManagement/index.tsx
View File

@@ -1,3 +1,15 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:50:05
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:50:05
*/
/**
* Model Management Main Page
* Manages AI models with three views: group models, model list, and model square
* Supports filtering, searching, and CRUD operations
*/
import { useState, useRef, type FC } from 'react';
import { Button, Flex, Space, type SegmentedProps, Form } from 'antd'
import { useTranslation } from 'react-i18next';
@@ -13,8 +25,14 @@ import CustomModelModal from './components/CustomModelModal'
import CustomSelect from '@/components/CustomSelect'
import { modelTypeUrl, modelProviderUrl } from '@/api/models'
/**
* Available tab keys
*/
const tabKeys = ['group', 'list', 'square']
const ModelManagement: FC = () => {
/**
* Model management main component
*/const ModelManagement: FC = () => {
const { t } = useTranslation();
const [activeTab, setActiveTab] = useState('group');
const configModalRef = useRef<GroupModelModalRef>(null)
@@ -24,17 +42,20 @@ const ModelManagement: FC = () => {
const [form] = Form.useForm<Query>()
const query = Form.useWatch([], form)
/** Format tab items with translations */
const formatTabItems = () => {
return tabKeys.map(value => ({
value,
label: t(`modelNew.${value}`),
}))
}
/** Handle tab change */
const handleChangeTab = (value: SegmentedProps['value']) => {
setActiveTab(value as string);
form.resetFields()
}
/** Open edit modal based on active tab */
const handleEdit = (vo?: ModelListItem | ModelPlazaItem) => {
switch(activeTab) {
case 'group':
@@ -45,6 +66,7 @@ const ModelManagement: FC = () => {
break
}
}
/** Refresh list based on active tab */
const handleRefresh = () => {
switch (activeTab) {
case 'group':

196
web/src/views/ModelManagement/types.ts
View File

@@ -1,139 +1,315 @@
export interface Query {
type?: string;
provider?: string;
is_active?: boolean;
is_public?: boolean;
is_composite?: boolean;
search?: string;
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:50:18
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:50:18
*/
/**
* Type definitions for Model Management
*/
/**
* Query parameters for model filtering
*/
export interface Query {
/** Model type filter */
type?: string;
/** Model provider filter */
provider?: string;
/** Active status filter */
is_active?: boolean;
/** Public status filter */
is_public?: boolean;
/** Composite model filter */
is_composite?: boolean;
/** Search keyword */
search?: string;
/** Page size */
pagesize?: number;
/** Page number */
page?: number;
}
/**
* Description item for model details
*/
export interface DescriptionItem {
/** Item key */
key: string;
/** Item label */
label: string;
/** Item content */
children: string;
}
/**
* Composite model form data
*/
export interface CompositeModelForm {
/** Model logo */
logo?: any;
/** Model name */
name: string;
/** Model type */
type?: string;
/** Model description */
description: string;
/** Associated API key IDs */
api_key_ids: ModelApiKey[] | string[];
}
/**
* Group model modal ref interface
*/
export interface GroupModelModalRef {
/** Open modal with optional model data */
handleOpen: (model?: ModelListItem) => void;
}
/**
* Group model modal props
*/
export interface GroupModelModalProps {
/** Callback to refresh model list */
refresh?: () => void;
}
/**
* Model list detail ref interface
*/
export interface ModelListDetailRef {
/** Open detail drawer with provider model data */
handleOpen: (vo: ProviderModelItem) => void;
}
/**
* Model API key configuration
*/
export interface ModelApiKey {
/** Model name */
model_name: string;
/** API key description */
description: string | null;
/** Model provider */
provider: string;
/** API key value */
api_key: string;
/** API base URL */
api_base: string;
/** Additional configuration */
config: any;
/** Whether API key is active */
is_active: boolean;
/** Priority level */
priority: string;
/** API key ID */
id: string;
/** Usage count */
usage_count: string;
/** Last used timestamp */
last_used_at: number;
/** Creation timestamp */
created_at: number;
/** Update timestamp */
updated_at: number;
/** Associated model config IDs */
model_config_ids: string[];
}
/**
* Model list item data structure
*/
export interface ModelListItem {
/** Model name */
model_name?: string;
/** Associated model config IDs */
model_config_ids: string[];
/** Display name */
name: string;
/** Model type */
type: string;
/** Model logo URL */
logo: string;
/** Model description */
description: string;
/** Model provider */
provider: string;
/** Model configuration */
config: any;
/** Whether model is active */
is_active: boolean;
/** Whether model is public */
is_public: boolean;
/** Model ID */
id: string;
/** Creation timestamp */
created_at: number;
/** Update timestamp */
updated_at: number;
/** Associated API keys */
api_keys: ModelApiKey[]
}
/**
* Provider model item grouping
*/
export interface ProviderModelItem {
/** Provider name */
provider: string;
/** Provider logo URL */
logo?: string;
/** Provider tags */
tags: string[];
/** Models from this provider */
models: ModelListItem[];
}
/**
* Key configuration modal form data
*/
export interface KeyConfigModalForm {
/** Model provider */
provider: string;
/** API key value */
api_key: string;
/** API base URL */
api_base: string;
}
/**
* Key configuration modal ref interface
*/
export interface KeyConfigModalRef {
/** Open modal with provider model data */
handleOpen: (vo: ProviderModelItem) => void;
}
/**
* Key configuration modal props
*/
export interface KeyConfigModalProps {
/** Callback to refresh model list */
refresh?: () => void;
}
/**
* Multi-key configuration form data
*/
export interface MultiKeyForm {
/** Model config ID */
model_config_id?: string;
/** Model name */
model_name: string;
/** Model provider */
provider: string;
/** API key value */
api_key: string;
/** API base URL */
api_base: string;
}
/**
* Multi-key configuration modal ref interface
*/
export interface MultiKeyConfigModalRef {
/** Open modal with model data */
handleOpen: (vo: ModelListItem, provider?: string) => void;
}
/**
* Multi-key configuration modal props
*/
export interface MultiKeyConfigModalProps {
/** Callback to refresh model list */
refresh?: () => void;
}
/**
* Model plaza grouping by provider
*/
export interface ModelPlaza {
/** Provider name */
provider: string;
/** Models from this provider */
models: ModelPlazaItem[];
}
/**
* Model plaza item data structure
*/
export interface ModelPlazaItem {
/** Model ID */
id: string;
/** Model name */
name: string;
/** Model type */
type: string;
/** Model provider */
provider: string;
/** Model logo URL */
logo: string;
/** Model description */
description: string;
/** Whether model is deprecated */
is_deprecated: boolean;
/** Whether model is official */
is_official: boolean;
/** Model tags */
tags: string[];
/** Number of times added */
add_count: number;
/** Whether user has added this model */
is_added: boolean;
}
/**
* Model square detail ref interface
*/
export interface ModelSquareDetailRef {
/** Open detail drawer with model plaza data */
handleOpen: (vo: ModelPlaza) => void;
}
/**
* Custom model form data
*/
export interface CustomModelForm {
/** Model name */
name: string;
/** Model type */
type?: string;
/** Model provider */
provider?: string;
/** Model logo */
logo?: any;
/** Model description */
description: string;
/** Whether model is official */
is_official: boolean;
/** Model tags */
tags: string[];
}
/**
* Custom model modal ref interface
*/
export interface CustomModelModalRef {
/** Open modal with optional model plaza item */
handleOpen: (vo?: ModelPlazaItem) => void;
}
/**
* Custom model modal props
*/
export interface CustomModelModalProps {
/** Callback to refresh model list */
refresh?: () => void;
}
/**
* Base ref interface for list components
*/
export interface BaseRef {
/** Refresh list data */
getList: () => void;
}

18
web/src/views/ModelManagement/utils.ts
View File

@@ -1,3 +1,13 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:50:22
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 16:50:22
*/
/**
* Utility functions for Model Management
*/
import bedrockIcon from '@/assets/images/model/bedrock.svg'
import dashscopeIcon from '@/assets/images/model/dashscope.png'
import gpustackIcon from '@/assets/images/model/gpustack.png'
@@ -5,6 +15,9 @@ import ollamaIcon from '@/assets/images/model/ollama.svg'
import openaiIcon from '@/assets/images/model/openai.svg'
import xinferenceIcon from '@/assets/images/model/xinference.svg'
/**
* Provider icon mapping
*/
export const ICONS = {
bedrock: bedrockIcon,
dashscope: dashscopeIcon,
@@ -14,6 +27,11 @@ export const ICONS = {
xinference: xinferenceIcon
}
/**
* Get logo URL from provider name or URL
* @param logo - Provider name or logo URL
* @returns Logo URL or undefined
*/
export const getLogoUrl = (logo?: string) => {
if (!logo) {
return undefined

12
web/src/views/NoPermission/index.tsx
View File

@@ -1,4 +1,16 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 17:34:18
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 17:34:18
*/
/**
* No Permission Page
* Displays when user lacks access rights to a resource
*/
import { useTranslation } from 'react-i18next';
import noPermission from '@/assets/images/empty/noPermission.png';
import Empty from '@/components/Empty';

12
web/src/views/NotFound/index.tsx
View File

@@ -1,4 +1,16 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 17:35:01
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 17:35:01
*/
/**
* Not Found Page (404)
* Displays when requested route or resource does not exist
*/
import { useTranslation } from 'react-i18next';
import notFoundImg from '@/assets/images/empty/404.png';
import Empty from '@/components/Empty';

21
web/src/views/OrderHistory/components/OrderDetail.tsx
View File

@@ -1,3 +1,14 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 17:35:49
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 17:35:49
*/
/**
* Order Detail Component
* Modal displaying detailed order information including payment details
*/
import { forwardRef, useImperativeHandle, useState, useCallback } from 'react';
import { Descriptions } from 'antd';
import { useTranslation } from 'react-i18next';
@@ -14,11 +25,12 @@ const OrderDetail = forwardRef<OrderDetailRef, { getProductType: (type: string)
const [visible, setVisible] = useState(false);
const [data, setData] = useState({})
// 封装取消方法，添加关闭弹窗逻辑
/** Close modal */
const handleClose = () => {
setVisible(false);
};
/** Open modal and fetch order details */
const handleOpen = (order: Order) => {
setVisible(true);
getOrderDetail(order.order_no)
@@ -26,6 +38,7 @@ const OrderDetail = forwardRef<OrderDetailRef, { getProductType: (type: string)
setData(res as Order)
})
};
/** Format order information items */
const formatItems = useCallback(() => {
if (!data) return []
return ['order_no', 'product_type', 'payable_amount', 'status', 'pay_time', 'create_time'].map(key => {
@@ -43,6 +56,7 @@ const OrderDetail = forwardRef<OrderDetailRef, { getProductType: (type: string)
}
})
}, [data])
/** Format payment information items */
const formatPayItems = useCallback(() => {
if (!data) return []
return ['pay_txn_id', 'payer'].map(key => ({
@@ -52,13 +66,12 @@ const OrderDetail = forwardRef<OrderDetailRef, { getProductType: (type: string)
}))
}, [data])
// 暴露给父组件的方法
/** Expose methods to parent component */
useImperativeHandle(ref, () => ({
handleOpen,
handleClose
}));
// ['pay_txn_id', 'payer']
// ['pay_txn_id', 'payer']
return (
<RbModal
title={t('pricing.orderDetail')}

21
web/src/views/OrderHistory/index.tsx
View File

@@ -1,3 +1,15 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 17:35:41
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 17:35:41
*/
/**
* Order History Page
* Displays order list with filtering by status, product type, and time range
* Supports order detail viewing
*/
import React, { useRef, useState, useEffect } from 'react';
import { Button, Space, Select, Flex } from 'antd';
import { useTranslation } from 'react-i18next';
@@ -12,9 +24,9 @@ import { formatDateTime } from '@/utils/format';
import type { Order, OrderDetailRef, Query } from './types'
import OrderDetail from './components/OrderDetail'
import SearchInput from '@/components/SearchInput'
import { PRICE_LIST } from '@/views/Pricing'
/** Order status mapping */
export const STATUS = {
100: {
status: 'warning',
@@ -64,6 +76,7 @@ const OrderHistory: React.FC = () => {
useEffect(() => {
getStatus()
}, [])
/** Fetch order status options */
const getStatus = () => {
getOrderStatus()
.then(res => {
@@ -80,6 +93,7 @@ const OrderHistory: React.FC = () => {
])
})
}
/** Handle status filter change */
const handleChangeStatus = (value: string) => {
if (value !== query.status) {
setQuery(prev => ({
@@ -88,6 +102,7 @@ const OrderHistory: React.FC = () => {
}))
}
}
/** Handle product type filter change */
const handleChangeType = (value: string) => {
if (value !== query.product_type) {
setQuery(prev => ({
@@ -96,6 +111,7 @@ const OrderHistory: React.FC = () => {
}))
}
}
/** Handle time range filter change */
const handleChangeTime = (value: string) => {
setTimeType(value)
let start_time = null;
@@ -129,6 +145,7 @@ const OrderHistory: React.FC = () => {
}))
}
/** Map product type to translation key */
const getProductType = (type: string) => {
const typeMap: Record<string, string> = {
'FREE': 'personal',
@@ -138,7 +155,7 @@ const OrderHistory: React.FC = () => {
};
return typeMap[type] || 'ENTERPRISE';
};
// 表格列配置
/** Table column configuration */
const columns: ColumnsType = [
{
title: t('pricing.order_no'),

15
web/src/views/OrderHistory/types.ts
View File

@@ -1,3 +1,12 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 17:35:32
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 17:35:32
*/
/**
* Order query parameters
*/
export interface Query {
product_type?: string | null;
status?: string | null;
@@ -8,6 +17,9 @@ export interface Query {
end_time?: number | null;
[key: string]: string | number | null | undefined;
}
/**
* Order data structure
*/
export interface Order {
order_no: string;
user_id: string;
@@ -38,6 +50,9 @@ export interface Order {
deleted: number;
}
/**
* Order detail component ref interface
*/
export interface OrderDetailRef {
handleOpen: (order: Order) => void;
}

Some files were not shown because too many files have changed in this diff Show More