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

Merge pull request #764 from SuanmoSuanyangTechnology/feature/ui_upgrade_zy

Browse Source 
Feature/UI upgrade zy
This commit is contained in:
yingzhao
2026-04-01 18:06:58 +08:00
committed by GitHub
parent 7b5b2ab31a 767f9ab17c
commit 853ce6f4e1
53 changed files with 945 additions and 693 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
web/src/assets/images/common/return.svg
View File

@@ -1,17 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>退出</title>
<g id="空间里层页面优化" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="记忆库-个人记忆-遗忘记忆" transform="translate(-1357, -24)" stroke="#171719">
<g id="返回空间" transform="translate(1349, 16)">
<g id="退出" transform="translate(16, 16) scale(-1, 1) translate(-16, -16)translate(8, 8)">
<g id="编组-7" transform="translate(3.5, 2.5)">
<path d="M3.47826087,11 L1.8,11 C0.80588745,11 0,10.1941125 0,9.2 L0,1.8 C-2.22044605e-16,0.80588745 0.80588745,-2.22044605e-16 1.8,-4.4408921e-16 L3.47826087,0 L3.47826087,0" id="路径"></path>
<line x1="9.56521739" y1="5.5" x2="2.60869565" y2="5.5" id="路径-6"></line>
<polyline id="路径" points="7.82608696 3.20833333 10 5.5 7.82608696 7.79166667"></polyline>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 KiB

18
web/src/assets/images/conversation/compress.svg Normal file
View File

@@ -0,0 +1,18 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 35</title>
<g id="空间里层页面优化" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="多模态对话-3" transform="translate(-1228, -338)" stroke="#171719" stroke-width="1.2">
<g id="编组-34备份" transform="translate(540, 320)">
<g id="编组-33" transform="translate(683, 13)">
<g id="编组-35" transform="translate(5, 5)">
<g id="编组-63" transform="translate(3, 3)">
<polyline id="路径" points="10 4 6 4 6 0"></polyline>
<polyline id="路径备份-3" transform="translate(2, 8) scale(-1, -1) translate(-2, -8)" points="4 10 0 10 0 6"></polyline>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

15
web/src/assets/images/conversation/expand.svg Normal file
View File

@@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 36</title>
<g id="空间里层页面优化" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="多模态对话-3" transform="translate(-763, -266)" stroke="#171719" stroke-width="1.2">
<g id="编组-34" transform="translate(540, 248)">
<g id="编组-33" transform="translate(218, 13)">
<g id="编组-36" transform="translate(5, 5)">
<path d="M9.02271937,3 L13,3 L13,7.07419434 M6.96571644,13 L3,13 L3,9.04391117" id="形状"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 877 B

8
web/src/components/BtnTabs/index.tsx
View File

@@ -24,10 +24,11 @@ interface BtnTabsProps {
onChange: (key: string) => void;
/** Optional extra class name for the container */
className?: string;
variant?: 'outline' | 'borderless'
}
/** Button-style tab switcher — renders tabs as pill-shaped buttons with active highlight */
const BtnTabs: FC<BtnTabsProps> = ({ items, activeKey, onChange, className }) => {
const BtnTabs: FC<BtnTabsProps> = ({ items, activeKey, onChange, className, variant = 'borderless' }) => {
return (
<Flex align="center" gap={8} className={className || ''}>
{items.map((tab) => (
@@ -35,8 +36,9 @@ const BtnTabs: FC<BtnTabsProps> = ({ items, activeKey, onChange, className }) =>
key={tab.key}
onClick={() => onChange(tab.key)}
className={clsx('rb:px-2 rb:py-1 rb:rounded-[13px] rb:text-[12px] rb:leading-4.5 rb:cursor-pointer', {
'rb:bg-[#F6F6F6]': activeKey !== tab.key,
'rb:bg-[#171719] rb:text-white': activeKey === tab.key,
'rb:bg-[#F6F6F6]': activeKey !== tab.key && variant === 'borderless',
'rb-border rb:bg-white': activeKey !== tab.key && variant === 'outline',
'rb:bg-[#171719] rb:text-white rb:border-[#171719]': activeKey === tab.key,
})}
>
{tab.label}

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

@@ -74,9 +74,9 @@ const ButtonCheckbox: FC<ButtonCheckboxProps> = ({
onClick={handleChange}
>
{/* Display unchecked icon when not checked */}
{icon && !checked && <img src={icon} className="rb:size-4" />}
{icon && !checked && <img src={icon} alt={icon} className="rb:size-4" />}
{/* Display checked icon when checked */}
{checkedIcon && checked && <img src={checkedIcon} className="rb:w-4 rb:h-4 rb:mr-1" />}
{checkedIcon && checked && <img src={checkedIcon} alt={checkedIcon} className="rb:w-4 rb:h-4 rb:mr-1" />}
{children}
</Flex>
);

152
web/src/components/Chat/AudioPlayer.tsx Normal file
View File

@@ -0,0 +1,152 @@
/*
* @Author: ZhaoYing
* @Date: 2026-03-16 15:00:07
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-03-27 15:23:14
*/
import { type FC, useRef, useState, useEffect } from 'react'
import { Flex, Dropdown, type MenuProps, Slider } from 'antd'
import clsx from 'clsx'
import { useTranslation } from 'react-i18next'
/** Available playback speed options. */
const SPEEDS = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2]
/** Format seconds into "MM:SS" display string. */
const fmt = (s: number) => `${String(Math.floor(s / 60)).padStart(2, '0')}:${String(Math.floor(s % 60)).padStart(2, '0')}`
/**
* Props for the AudioPlayer component.
* @property src - Audio file URL to play.
* @property fileName - Display name shown beside the file icon.
* @property fileSize - Human-readable file size string (e.g. "3.2 MB").
*/
interface AudioPlayerProps {
src: string
fileName?: string
fileSize?: string
}
/**
* AudioPlayer – A compact inline audio player with playback controls.
*
* Displays file metadata (name & size), a play/pause toggle, a seekable
* progress slider, elapsed/total time, and a dropdown menu for downloading
* the file or changing playback speed.
*
* @example
* <AudioPlayer src="/audio/demo.mp3" fileName="demo.mp3" fileSize="3.2 MB" />
*/
const AudioPlayer: FC<AudioPlayerProps> = ({ src, fileName, fileSize }) => {
const { t } = useTranslation()
const audioRef = useRef<HTMLAudioElement>(null)
const [playing, setPlaying] = useState(false)
const [current, setCurrent] = useState(0)
const [duration, setDuration] = useState(0)
const [speed, setSpeed] = useState(1)
/* Bind native audio events to sync React state; re-binds when src changes. */
useEffect(() => {
const audio = audioRef.current
if (!audio) return
const onTime = () => setCurrent(audio.currentTime)
const onMeta = () => setDuration(audio.duration)
const onEnd = () => setPlaying(false)
audio.addEventListener('timeupdate', onTime)
audio.addEventListener('loadedmetadata', onMeta)
audio.addEventListener('ended', onEnd)
return () => {
audio.removeEventListener('timeupdate', onTime)
audio.removeEventListener('loadedmetadata', onMeta)
audio.removeEventListener('ended', onEnd)
}
}, [src])
/** Toggle between play and pause. */
const togglePlay = () => {
const audio = audioRef.current
if (!audio) return
if (playing) { audio.pause(); setPlaying(false) }
else { audio.play(); setPlaying(true) }
}
/** Seek to a specific position (in seconds) on the audio timeline. */
const handleSeek = (val: number) => {
if (audioRef.current) audioRef.current.currentTime = val
setCurrent(val)
}
/** Update playback speed on both React state and the native audio element. */
const setPlaybackSpeed = (s: number) => {
setSpeed(s)
if (audioRef.current) audioRef.current.playbackRate = s
}
/** Open the audio source URL in a new tab to trigger download. */
const handleDownload = () => window.open(src, '_blank')
/** Dropdown menu items: download and playback speed sub-menu. */
const mainMenu: MenuProps = {
items: [
{
key: 'download',
icon: <div className="rb:size-6 rb:bg-cover rb:cursor-pointer rb:bg-[url('@/assets/images/userMemory/download.svg')]" />,
label: t('common.download'),
onClick: handleDownload,
},
{
key: 'speed',
icon: <div className="rb:size-6 rb:bg-cover rb:cursor-pointer rb:bg-[url('@/assets/images/userMemory/play_speed.svg')]" />,
label: t('perceptualDetail.playbackSpeed'),
children: SPEEDS.map(s => ({
key: String(s),
label: <span className={s === speed ? 'rb:font-bold rb:text-[#171719]' : ''}>{s === 1 ? 'normal' : s}</span>,
onClick: () => setPlaybackSpeed(s),
})),
},
],
}
return (
<div className="rb-border rb:rounded-xl rb:py-2 rb:px-2.5 rb:w-full">
<audio ref={audioRef} src={src} preload="metadata" />
<Flex align="center" justify="space-between" className="rb:mb-2">
<Flex align="center" gap={12}>
<div className="rb:size-5 rb:bg-cover rb:bg-[url('@/assets/images/file/audio.svg')]" />
<div className="rb:flex-1">
<div className="rb:font-medium rb:leading-5 rb:text-[14px] rb:wrap-break-word rb:line-clamp-1">{fileName}</div>
<div className="rb:text-[#5B6167] rb:text-[12px] rb:leading-4.5">{fileSize || '-'}</div>
</div>
</Flex>
<Flex align="center" gap={12}>
<div
className={clsx("rb:cursor-pointer rb:size-5 rb:bg-cover", {
"rb:bg-[url('@/assets/images/userMemory/play.svg')]": !playing,
"rb:bg-[url('@/assets/images/userMemory/pause.svg')]": playing,
})}
onClick={togglePlay}
></div>
<Dropdown menu={mainMenu} trigger={['click']} placement="bottomRight">
<div className="rb:cursor-pointer rb:size-5 rb:bg-[url('@/assets/images/common/more.svg')] rb:hover:bg-[url('@/assets/images/common/more_hover.svg')]"></div>
</Dropdown>
</Flex>
</Flex>
<Flex align="center" gap={8} className="rb:mt-3!">
<Slider
min={0}
max={duration || 0}
step={0.1}
value={current}
onChange={handleSeek}
tooltip={{ formatter: null }}
className="rb:flex-1 rb:m-0!"
styles={{ track: { background: '#171719' }, rail: { background: '#E4E4E4' }, handle: { display: 'none' } }}
/>
<span className="rb:text-[12px] rb:leading-4.5 rb:text-[#5B6167] rb:whitespace-nowrap">{fmt(current)} / {fmt(duration)}</span>
</Flex>
</div>
)
}
export default AudioPlayer

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

@@ -8,9 +8,12 @@ import { type FC, useRef, useEffect, useState } from 'react'
import clsx from 'clsx'
import Markdown from '@/components/Markdown'
import type { ChatContentProps } from './types'
import { Spin, Divider, Space, Image, Flex, Button } from 'antd'
import { Spin, Image, Flex, Button } from 'antd'
import { SoundOutlined } from '@ant-design/icons'
import { t } from 'i18next'
import { useTranslation } from 'react-i18next'
import AudioPlayer from './AudioPlayer'
import VideoPlayer from './VideoPlayer'
const getFileUrl = (file: any) => {
return file.thumbUrl || file.url || (file.originFileObj ? URL.createObjectURL(file.originFileObj) : undefined)
@@ -32,6 +35,7 @@ const ChatContent: FC<ChatContentProps> = ({
renderRuntime,
onSend
}) => {
const { t } = useTranslation()
// Scroll container reference for controlling auto-scroll to bottom
const scrollContainerRef = useRef<(HTMLDivElement | null)>(null)
const prevDataLengthRef = useRef(data.length);
@@ -151,65 +155,101 @@ const ChatContent: FC<ChatContentProps> = ({
}
if (file.type.includes('video')) {
return (
<div key={file.url || file.uid} className="rb:inline-block rb:group rb:relative rb:rounded-lg">
<video src={getFileUrl(file)} controls className="rb:max-w-80 rb:rounded-lg rb:object-cover rb:cursor-pointer" />
<div key={file.url || file.uid} className="rb:w-50">
{/* <video src={getFileUrl(file)} controls className="rb:max-w-80 rb:rounded-lg rb:object-cover rb:cursor-pointer" /> */}
<VideoPlayer key={file.url || file.uid} src={getFileUrl(file)} />
</div>
)
}
if (file.type.includes('audio')) {
return (
<div key={file.url || file.uid} className="rb:inline-flex rb:items-center rb:group rb:relative rb:rounded-lg rb:bg-[#F0F3F8] rb:py-2 rb:px-2.5 rb:gap-2">
<audio src={getFileUrl(file)} controls className="rb:max-w-80" />
<div key={file.url || file.uid} className="rb:w-50">
<AudioPlayer key={file.url || file.uid} src={getFileUrl(file)} />
</div>
)
}
return (
<div key={file.url || file.uid} className="rb:relative rb:rounded-lg rb:bg-[#F0F3F8] rb:p-1! rb:cursor-pointer" onClick={() => handleDownload(file)}>
{(file.type.includes('excel') || file.type.includes('spreadsheetml.sheet') || file.type.includes('csv'))
? <div
className="rb:size-10 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/excel.svg')]"
></div>
:(file.type.includes('pdf'))
? <div
className="rb:size-10 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/pdf.svg')]"
></div>
: (file.type.includes('doc') || file.type.includes('docx') || file.type.includes('word') || file.type.includes('wordprocessingml.document'))
? <div
className="rb:size-10 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/word.svg')]"
></div>
: null
}
</div>
<Flex
key={file.url || file.uid}
align="center"
gap={10}
className="rb:text-left rb:w-45 rb:text-[12px] rb:group rb:relative rb:rounded-lg rb-border rb:py-2! rb:px-2.5! rb:border rb:border-[#F6F6F6]"
onClick={() => handleDownload(file)}
>
<div
className={clsx(
"rb:size-5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/pdf_disabled.svg')]",
file.type?.includes('pdf')
? "rb:bg-[url('@/assets/images/file/pdf.svg')]"
: (file.type?.includes('excel') || file.type?.includes('spreadsheetml.sheet'))
? "rb:bg-[url('@/assets/images/file/excel.svg')]"
: file.type?.includes('csv')
? "rb:bg-[url('@/assets/images/file/csv.svg')]"
: file.type?.includes('html')
? "rb:bg-[url('@/assets/images/file/html.svg')]"
: file.type?.includes('json')
? "rb:bg-[url('@/assets/images/file/json.svg')]"
: file.type?.includes('ppt')
? "rb:bg-[url('@/assets/images/file/ppt.svg')]"
: file.type?.includes('text')
? "rb:bg-[url('@/assets/images/file/txt.svg')]"
: file.type?.includes('markdown')
? "rb:bg-[url('@/assets/images/file/md.svg')]"
: (file.type?.includes('doc') || file.type?.includes('docx') || file.type?.includes('word') || file.type?.includes('wordprocessingml.document'))
? "rb:bg-[url('@/assets/images/file/word.svg')]"
: null
)}
></div>
<div className="rb:flex-1 rb:w-32.5">
<div className="rb:leading-4 rb:text-ellipsis rb:overflow-hidden rb:whitespace-nowrap">{file.name}</div>
<div className="rb:leading-3.5 rb:mt-0.5 rb:text-[#5B6167] rb:text-ellipsis rb:overflow-hidden rb:whitespace-nowrap">{file.type?.split('/')[file.type?.split('/').length - 1]} · {file.size}</div>
</div>
</Flex>
)
})}
</Flex>}
{/* Message bubble */}
<div className={clsx('rb:text-left rb:rounded-lg rb:leading-5 rb:p-[10px_12px_2px_12px] rb:inline-block rb:max-w-130 rb:wrap-break-word rb:relative', contentClassNames, {
<div className={clsx('rb:text-left rb:leading-5 rb:inline-block rb:wrap-break-word rb:relative', item.role === 'user' ? contentClassNames : '', {
// Error message style (content is null and not assistant message)
'rb:bg-[rgba(255,93,52,0.08)] rb:text-[#FF5D34]': (item.status && item.status !== 'completed') || (errorDesc && item.role === 'assistant' && item.content === null && !renderRuntime),
// Assistant message style
'rb:bg-[#E3EBFD]': item.role === 'user',
'rb:bg-[#E3EBFD] rb:p-[10px_12px_2px_12px] rb:rounded-lg rb:max-w-130': item.role === 'user',
'rb:max-w-full': item.role === 'assistant',
// User message style
'rb:bg-[#F6F6F6] rb:text-[#212332]': item.role === 'assistant' && (item.content || item.content === '' || typeof renderRuntime === 'function'),
'rb:mt-1.5': labelPosition === 'top',
'rb:mb-1.5': labelPosition === 'bottom',
'rb:text-[#212332]': item.role === 'assistant' && (item.content || item.content === '' || typeof renderRuntime === 'function'),
'rb:mt-1': labelPosition === 'top',
'rb:mb-1': labelPosition === 'bottom',
})}>
{item.meta_data?.reasoning_content && <div className="rb:mb-2 rb:border rb:rounded-md rb:px-3 rb:pt-2 rb:bg-white rb:text-[12px]">
<Flex
align="center"
justify="space-between"
className="rb:text-[#5B6167] rb:font-medium rb:cursor-pointer rb:pb-2!"
onClick={() => toggleReasoning(index)}
>
<span>{t('memoryConversation.reasoning_content')}</span>
<div
className={clsx("rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/common/arrow_up.svg')]", {
'rb:rotate-180': !isReasoningExpanded(index),
})}
></div>
</Flex>
{isReasoningExpanded(index) && <Markdown content={item.meta_data.reasoning_content} />}
</div>}
{item.meta_data?.reasoning_content &&
<div className={clsx("rb:mb-4 rb-border rb:rounded-xl rb:px-4 rb:pt-4 rb:bg-white", {
'rb:hover:bg-[#F6F6F6] rb:w-64': !isReasoningExpanded(index)
})}>
<Flex
align="center"
justify="space-between"
className="rb:font-medium rb:pb-4!"
>
<span>{t('memoryConversation.reasoning_content')}</span>
<Flex
align="center"
justify="center"
className={clsx("rb:size-6.5 rb:cursor-pointer rb-border rb:rounded-lg", {
'rb:hover:bg-[#F6F6F6]!': isReasoningExpanded(index)
})}
onClick={() => toggleReasoning(index)}
>
<div
className={clsx("rb:size-4 rb:bg-cover", {
'rb:bg-[url("@/assets/images/conversation/compress.svg")]': isReasoningExpanded(index),
'rb:bg-[url("@/assets/images/conversation/expand.svg")]': !isReasoningExpanded(index)
})}
></div>
</Flex>
</Flex>
{isReasoningExpanded(index) && <Markdown content={item.meta_data.reasoning_content} className="rb:text-[#5B6167] rb:text-[12px]" />}
</div>
}
{item.status && <div className="rb:size-5 rb:bg-cover rb:bg-[url('@/assets/images/conversation/exclamation_circle.svg')] rb:absolute rb:-left-7"></div>}
{item.subContent && renderRuntime && renderRuntime(item, index)}
{/* Render message content using Markdown component */}
@@ -222,44 +262,42 @@ const ChatContent: FC<ChatContentProps> = ({
>{question}</Button>
))}
</Flex>}
{item.meta_data?.citations && item.meta_data?.citations.length > 0 && <div className="rb:mt-2 rb:pt-2 rb:border-t rb:border-[#E3EBFD]">
<div className="rb:text-[12px] rb:text-[#5B6167] rb:font-medium">{t('memoryConversation.citations')}</div>
{item.meta_data?.citations?.map((citation, idx) => (
<Button
type="link"
key={idx}
size="small"
className="rb:text-[12px]!"
onClick={() => {
const params = new URLSearchParams({ documentId: citation.document_id, parentId: citation.knowledge_id });
window.open(`/#/knowledge-base/${citation.knowledge_id}/DocumentDetails?${params}`, '_blank');
}}
>{citation.file_name}</Button>
))}
</div>}
{item.meta_data?.citations && item.meta_data?.citations.length > 0 &&
<Flex vertical gap={4} className="rb:mt-1! rb:pt-3! rb-border-t rb:mb-2!">
<div className="rb:font-medium">{t('memoryConversation.citations')}</div>
{item.meta_data?.citations?.map((citation, idx) => (
<div
key={idx}
className="rb:text-[#155EEF] rb:leading-5 rb:underline rb:cursor-pointer"
onClick={() => {
const params = new URLSearchParams({ documentId: citation.document_id, parentId: citation.knowledge_id });
window.open(`/#/knowledge-base/${citation.knowledge_id}/DocumentDetails?${params}`, '_blank');
}}
>{citation.file_name}</div>
))}
</Flex>
}
</div>
{/* Bottom label (such as timestamp, username, etc.) */}
{labelPosition === 'bottom' && <Flex gap={16} align="center" justify={item.role === 'user' ? 'end' : 'start'}>
{item.meta_data?.audio_url && <>
<Divider className="rb:my-3!" />
<Space size={12} className="rb:pb-2 rb:pl-1">
{playingIndex !== item.meta_data?.audio_url && item.meta_data?.audio_status === 'pending'
? <Spin />
: playingIndex !== item.meta_data?.audio_url
{playingIndex !== item.meta_data?.audio_url && item.meta_data?.audio_status === 'pending'
? <Spin />
: playingIndex !== item.meta_data?.audio_url
? <SoundOutlined className={clsx("rb:cursor-pointer rb:size-5.5", {
'rb:text-[#FF5D34]': item.meta_data?.audio_status === 'error',
'rb:hover:text-[#155EEF]!': !item.meta_data?.audio_status || !['pending', 'error'].includes(item.meta_data?.audio_status)
})} onClick={() => handlePlay(item.meta_data?.audio_url!, item.meta_data?.audio_status)} />
: <div
className="rb:size-5.5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/audio_ing.gif')]"
onClick={() => handlePlay(item.meta_data?.audio_url!, item.meta_data?.audio_status)}
/>
}
</Space>
className="rb:size-5.5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/audio_ing.gif')]"
onClick={() => handlePlay(item.meta_data?.audio_url!, item.meta_data?.audio_status)}
/>
}
</>}
</div>
{/* Bottom label (such as timestamp, username, etc.) */}
{labelPosition === 'bottom' &&
<div className="rb:text-[#5B6167] rb:text-[12px] rb:leading-4 rb:font-regular">
{labelFormat(item)}
</div>
</Flex>
}
</>
}

62
web/src/components/Chat/VideoPlayer.tsx Normal file
View File

@@ -0,0 +1,62 @@
/*
* @Author: ZhaoYing
* @Date: 2026-03-24 12:21:56
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-03-24 12:21:56
*/
import { type FC, useRef, useState } from 'react'
import { CloseOutlined } from '@ant-design/icons'
interface VideoPlayerProps {
src: string
}
const VideoPlayer: FC<VideoPlayerProps> = ({ src }) => {
const [open, setOpen] = useState(false)
const videoRef = useRef<HTMLVideoElement>(null)
const handleOpen = () => setOpen(true)
const handleClose = () => {
videoRef.current?.pause()
setOpen(false)
}
return (
<>
{/* Thumbnail with play overlay */}
<div
className="rb:relative rb:w-full rb:h-full rb:rounded-xl rb:overflow-hidden rb:cursor-pointer rb:group"
onClick={handleOpen}
>
<video src={src} className="rb:w-full rb:h-full rb:object-cover" preload="metadata" />
<div className="rb:absolute rb:inset-0 rb:bg-black/20 rb:flex rb:items-center rb:justify-center rb:transition-colors group-hover:rb:bg-black/30">
<div className="rb:size-10 rb:rounded-full rb:bg-white/80 rb:flex rb:items-center rb:justify-center">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
<path d="M5 3.5L14.5 9L5 14.5V3.5Z" fill="#171719" />
</svg>
</div>
</div>
</div>
{/* Fullscreen modal */}
{open && (
<div
className="rb:fixed rb:inset-0 rb:z-1000 rb:bg-black/80 rb:flex rb:items-center rb:justify-center"
onClick={handleClose}
>
<button className="ant-image-preview-close"><CloseOutlined /></button>
<video
ref={videoRef}
src={src}
controls
autoPlay
className="rb:max-w-[90vw] rb:max-h-[90vh] rb:rounded-xl"
onClick={e => e.stopPropagation()}
/>
</div>
)}
</>
)
}
export default VideoPlayer

5
web/src/components/Layout/BasicAuthLayout.tsx
View File

@@ -19,6 +19,7 @@
import { Outlet } from 'react-router-dom';
import { useEffect, type FC } from 'react';
import { Layout } from 'antd';
import { useUser } from '@/store/user';
@@ -35,10 +36,10 @@ const BasicAuthLayout: FC = () => {
}, [getUserInfo]);
return (
<div className="rb:relative rb:min-h-screen rb:w-screen">
<Layout className="rb:min-h-screen!">
{/* Render child routes without additional UI */}
<Outlet />
</div>
</Layout>
)
};

11
web/src/components/Markdown/index.tsx
View File

@@ -62,7 +62,7 @@ const components = {
ul: ({ children, ...props }: any) => <ul className="rb:list-disc rb:ml-6 rb:mb-2" {...props}>{children}</ul>,
ol: ({ children, ...props }: any) => <ol className="rb:list-decimal rb:ml-6 rb:mb-2" {...props}>{children}</ol>,
li: ({ children, ...props }: any) => <li className="rb:mb-1" {...props}>{children}</li>,
blockquote: ({ children, ...props }: any) => <blockquote className="rb:border-l-4 rb:border-[#D9D9D9] rb:pl-4 rb:mb-2" {...props}>{children}</blockquote>,
blockquote: ({ children, ...props }: any) => <blockquote className="rb:bg-[#F6F6F6] rb:rounded-lg rb:pt-2.5 rb:pb-0.5 rb:px-3 rb:mb-3 rb:mt-1" {...props}>{children}</blockquote>,
p: ({ children, ...props }: any) => <p className="rb:mb-2" {...props}>{children}</p>,
strong: ({ children, ...props }: any) => <strong className="rb:font-bold" {...props}>{children}</strong>,
em: ({ children, ...props }: any) => <em className="rb:italic" {...props}>{children}</em>,
@@ -81,10 +81,10 @@ const components = {
audio: ({ src, ...props }: any) => <AudioBlock node={{ children: [{ properties: { src: src || '' } }] }} {...props} />,
a: ({ href, children, ...props }: any) => <Link href={href || '#'} {...props}>{children}</Link>,
button: ({ children }: any) => <RbButton node={{ children }}>{[children]}</RbButton>,
table: ({ children, ...props }: any) => <div className="rb:overflow-x-auto rb:max-w-full"><table className="rb:border rb:border-[#D9D9D9] rb:mb-2" {...props}>{children}</table></div>,
tr: ({ children, ...props }: any) => <tr className="rb:border rb:border-[#D9D9D9]" {...props}>{children}</tr>,
th: ({ children, ...props }: any) => <th className="rb:border rb:border-[#D9D9D9] rb:px-2 rb:py-1 rb:text-left rb:font-bold" {...props}>{children}</th>,
td: ({ children, ...props }: any) => <td className="rb:border rb:border-[#D9D9D9] rb:px-2 rb:py-1 rb:text-left" {...props}>{children}</td>,
table: ({ children, ...props }: any) => <div className="rb:overflow-x-auto rb:max-w-full"><table className="rb:border rb:border-[#EBEBEB] rb:mb-2" {...props}>{children}</table></div>,
tr: ({ children, ...props }: any) => <tr className="rb:border rb:border-[#EBEBEB]" {...props}>{children}</tr>,
th: ({ children, ...props }: any) => <th className="rb:border rb:border-[#EBEBEB] rb:px-2 rb:py-1 rb:text-left rb:font-bold" {...props}>{children}</th>,
td: ({ children, ...props }: any) => <td className="rb:border rb:border-[#EBEBEB] rb:px-2 rb:py-1 rb:text-left" {...props}>{children}</td>,
input: ({ children, ...props }: any) => {
switch (props.type) {
case 'color':
@@ -122,6 +122,7 @@ const components = {
select: ({ children, ...props }: any) => <Select style={{width: '100%'}} {...props}>{children}</Select>,
textarea: ({ children, ...props }: any) => <Input.TextArea {...props}>{children}</Input.TextArea>,
form: ({ children, ...props }: any) => <Form {...props}>{children}</Form>,
hr: (props: any) => <hr className="rb:border-t rb:border-[#EBEBEB] rb:my-3" {...props} />
}
const RbMarkdown: FC<RbMarkdownProps> = ({

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

@@ -54,7 +54,7 @@ const ModelSelect: FC<ModelSelectProps> = ({
const logo = getListLogoUrl(item.provider, item.logo as string);
return (
<Flex align="center" gap={8}>
{logo && <img src={logo} className="rb:size-5 rb:rounded-md" alt="" />}
{logo && <img src={logo} className="rb:size-5 rb:rounded-md" alt={logo} />}
<div className={`rb:flex-1 rb:text-ellipsis rb:overflow-hidden rb:whitespace-nowrap ${fontClassName}`}>{item.name}</div>
</Flex>
);
@@ -75,7 +75,7 @@ const ModelSelect: FC<ModelSelectProps> = ({
return (
<Flex align="center" gap={8}>
<Flex align="center" gap={8}>
{logo && <img src={logo} className="rb:size-5 rb:rounded-md" alt="" />}
{logo && <img src={logo} className="rb:size-5 rb:rounded-md" alt={logo} />}
<span className="rb:wrap-break-word rb:line-clamp-1">{data.name as string}</span>
</Flex>
{data.capability?.length > 0 && (

2
web/src/components/RadioGroupCard/index.tsx
View File

@@ -106,7 +106,7 @@ const RadioGroupCard: FC<RadioCardProps> = ({
{/* Use custom render or default card layout */}
{itemRender ? itemRender(option) : (
<>
{option.icon && <img src={option.icon} className={clsx("rb:size-10", {
{option.icon && <img src={option.icon} alt={option.icon} className={clsx("rb:size-10", {
'rb:m-[0_auto] rb:mb-3': !block,
})} />}
<div>

2
web/src/components/RbModal/index.tsx
View File

@@ -44,7 +44,7 @@ const RbModal: FC<ModalProps> = ({
{...props}
>
{/* Scrollable content container */}
<div className='rb:max-h-137.5 rb:overflow-y-auto rb:overflow-x-hidden'>
<div className='rb:max-h-[calc(100vh-202px)] rb:overflow-y-auto rb:overflow-x-hidden'>
{children}
</div>
</Modal>

2
web/src/components/Table/index.tsx
View File

@@ -91,7 +91,7 @@ const RbTable = forwardRef(<T = Record<string, unknown>, Q = Record<string, unkn
initialData,
emptySize = 160,
emptyText,
isScroll = false,
isScroll = true,
scrollX,
scrollY,
currentPageKey = 'page',

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

@@ -131,15 +131,15 @@ export const en = {
desc_spaces: 'compared to last week',
desc_users: 'New additions this week',
desc_running_apps: "Today's success rate",
totalMemoryCapacity: 'Total Stored Memories',
total_memory: 'Total Stored Memories',
userMemory: 'User Memory',
knowledgeBaseCount: 'Knowledge Bases',
apiCallCount: 'API Calls',
total_knowledge: 'Knowledge Bases',
total_api_call: 'API Calls',
comparedToYesterday: 'compared to yesterday',
thisWeek: 'this week',
thisDay: 'day on day',
failureRate: 'Failure Rate',
application: 'Applications',
total_app: 'Applications',
total_num: 'Total Memory Capacity',
lastDays: 'last {{days}} days',
@@ -195,7 +195,7 @@ export const en = {
createNewApplicationDesc: 'Build an app in 3 minutes, no code.',
createNewKnowledge: 'Create New Knowledge',
createNewKnowledgeDesc: 'Create a searchable knowledge base instantly.',
memoryConversation: 'Memory Conversation',
memoryConversation: 'Memory Validation',
memoryConversationDesc: 'The more you use it, the better AI knows you.',
helpCenter: 'Help Center',
helpCenterDesc: 'One place to get help and start fast.',
@@ -1457,6 +1457,7 @@ export const en = {
appCount: '{{count}} apps shared to this space',
resetFeaturesTip: 'Please reconfigure the [Conversation Features - File Upload] settings',
logTitle: 'Description',
range: 'Range',
},
userMemory: {
userMemory: 'User Memory',

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

@@ -829,6 +829,7 @@ export const zh = {
appCount: '{{count}}个应用共享到此空间',
resetFeaturesTip: '请重新配置【对话功能-文件上传】功能',
logTitle: '描述',
range: '范围',
},
table: {
totalRecords: '共 {{total}} 条记录'
@@ -842,15 +843,15 @@ export const zh = {
desc_spaces: '多于上周',
desc_users: '本周新增',
desc_running_apps: '今日成功率',
totalMemoryCapacity: '总记忆容量',
total_memory: '总记忆容量',
userMemory: '用户记忆',
knowledgeBaseCount: '知识库数量',
apiCallCount: 'API调用次数',
total_knowledge: '知识库数量',
total_api_call: 'API调用次数',
comparedToYesterday: '与昨天相比',
thisWeek: '本周',
thisDay: '本日',
failureRate: '故障率',
application: '应用数量',
total_app: '应用数量',
total_num: '总记忆容量',
lastDays: '最近{{days}}天',
@@ -906,7 +907,7 @@ export const zh = {
createNewApplicationDesc: '零代码，3 分钟搭建应用',
createNewKnowledge: '创建知识库',
createNewKnowledgeDesc: '秒级生成可搜索知识库',
memoryConversation: '记忆对话',
memoryConversation: '记忆验证',
memoryConversationDesc: '越用越懂你的 AI',
helpCenter: '帮助中心',
helpCenterDesc: '一站式上手与支持',

3
web/src/styles/antdThemeConfig.ts
View File

@@ -149,6 +149,9 @@ export const lightTheme: ThemeConfig = {
},
Segmented: {
trackBg: '#E1E2E7',
},
Pagination: {
itemSizeSM: 28,
}
}
};

11
web/src/styles/index.css
View File

@@ -271,6 +271,13 @@ body {
.ant-pagination .ant-pagination-item.ant-pagination-item-active {
font-weight: 400;
}
.ant-pagination.ant-pagination-mini .ant-pagination-item {
margin-right: 8px;
}
.ant-pagination.ant-pagination-mini .ant-pagination-options-quick-jumper input,
.ant-pagination.ant-pagination-mini .ant-select-single.ant-select-sm {
height: 28px;
}
.ant-modal .ant-modal-content {
padding: 24px;
@@ -409,4 +416,8 @@ body {
.upload-block,
.upload-block.ant-upload-wrapper .ant-upload-select {
display: block;
}
.ant-picker-outlined:focus,
.ant-picker-outlined:focus-within {
box-shadow: none;
}

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

@@ -405,7 +405,7 @@ const Agent = forwardRef<AgentRef, { onFeaturesLoad?: (features: FeaturesConfigF
<Flex align="center" justify="space-between" className="rb:p-3! rb:bg-white rb:rounded-xl">
<Button type="primary" ghost onClick={handleModelConfig} className="rb:group">
{modelLogo
? <img src={modelLogo} className="rb:size-4 rb:rounded-md" alt="" />
? <img src={modelLogo} className="rb:size-4 rb:rounded-md" alt={modelLogo} />
: defaultModel?.name
? <div className="rb:size-4 rb:bg-[url('@/assets/images/application/model.svg')]"></div> : null}
{defaultModel?.name || t('application.chooseModel')}

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

@@ -12,10 +12,6 @@ import { useTranslation } from 'react-i18next';
import clsx from 'clsx';
import styles from '../index.module.css'
import editIcon from '@/assets/images/edit_hover.svg'
import copyIcon from '@/assets/images/copy_hover.svg'
import exportIcon from '@/assets/images/export_hover.svg'
import deleteIcon from '@/assets/images/delete_hover.svg'
import type { Application, ApplicationModalRef } from '@/views/ApplicationManagement/types';
import ApplicationModal from '@/views/ApplicationManagement/components/ApplicationModal'
import type { CopyModalRef, AgentRef, ClusterRef, WorkflowRef, FeaturesConfigForm } from '../types'
@@ -38,10 +34,10 @@ const sharingTabKeys = [
* Menu icon mapping
*/
const menuIcons: Record<string, string> = {
edit: editIcon,
copy: copyIcon,
export: exportIcon,
delete: deleteIcon
edit: "rb:bg-[url('@/assets/images/common/edit_bold.svg')]",
copy: "rb:bg-[url('@/assets/images/copy_hover.svg')]",
export: "rb:bg-[url('@/assets/images/export_hover.svg')]",
delete: "rb:bg-[url('@/assets/images/common/delete_red_big.svg')]"
}
/**
@@ -70,7 +66,7 @@ interface ConfigHeaderProps {
* Configuration header component
* Displays application name, tabs, and action buttons
*/
const ConfigHeader: FC<ConfigHeaderProps> = ({
const ConfigHeader: FC<ConfigHeaderProps> = ({
application, activeTab, handleChangeTab, refresh,
workflowRef,
appRef,
@@ -172,7 +168,8 @@ const ConfigHeader: FC<ConfigHeaderProps> = ({
const formatMenuItems = useMemo(() => {
const items = (application?.type !== 'multi_agent' ? ['edit', 'copy', 'export', 'delete'] : ['edit', 'copy', 'delete']).map(key => ({
key,
icon: <img src={menuIcons[key]} className="rb:w-4 rb:h-4 rb:mr-2" />,
icon: <div className={`rb:size-4 rb:mr-2 ${menuIcons[key]}`} />,
danger: key === 'delete',
label: t(`common.${key}`),
}))
return items
@@ -182,7 +179,7 @@ const ConfigHeader: FC<ConfigHeaderProps> = ({
appRef?.current?.handleSaveFeaturesConfig?.(value)
onFeaturesChange?.(value)
}, [appRef, onFeaturesChange])
return (
<>
<PageHeader
@@ -250,9 +247,9 @@ const ConfigHeader: FC<ConfigHeaderProps> = ({
</Popover>
</Flex>
: <Flex justify="flex-end">
<Flex align="center" className="rb:leading-5 rb:text-[14px] rb:text-[#5B6167] rb:font-regular rb:cursor-pointer" onClick={goToApplication}>
<Flex align="center" gap={8} className="rb:leading-5 rb:text-[14px] rb:text-[#5B6167] rb:font-regular rb:cursor-pointer" onClick={goToApplication}>
<div
className="rb:mr-2 rb:size-4 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/logout.svg')]"
className="rb:size-4 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/logout.svg')]"
></div>
{t('common.return')}
</Flex>

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

@@ -171,12 +171,13 @@ const ModelConfigModal = forwardRef<ModelConfigModalRef, ModelConfigModalProps>(
key={item.key}
name={item.key}
label={t(`application.${item.key}`)}
extra={t(`application.${item.key}_desc`)}
extra={<>{t(`application.${item.key}_desc`)} | {t('application.range')}: [{item.min}, {item.max}]</>}
>
<RbSlider
max={item.max}
step={item.step}
min={item.min}
isInput={true}
/>
</FormItem>
))}

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

@@ -17,10 +17,6 @@ import { useNavigate } from 'react-router-dom';
import { Flex } from 'antd';
import Card from './Card';
import applicationIcon from '@/assets/images/home/application.svg';
import knowledgeIcon from '@/assets/images/home/knowledge.svg';
import memoryConversationIcon from '@/assets/images/home/memoryConversation.svg';
import helpCenterIcon from '@/assets/images/menu/helpCenter_active.svg'
/** Quick operation items configuration */
const quickOperations = [
@@ -37,12 +33,11 @@ const bgStyleList = [
'rb:bg-[rgba(77,168,255,0.1)]'
]
/** Icon mapping for quick operations */
const quickOperationIcons: {[key: string]: string | undefined} = {
createNewApplication: applicationIcon,
createNewKnowledge: knowledgeIcon,
memoryConversation: memoryConversationIcon,
helpCenter: helpCenterIcon
const quickOperationIconsClassNames: Record<string, string> = {
createNewApplication: 'rb:bg-[url("@/assets/images/home/application.svg")]',
createNewKnowledge: 'rb:bg-[url("@/assets/images/home/knowledge.svg")]',
memoryConversation: 'rb:bg-[url("@/assets/images/home/memoryConversation.svg")]',
helpCenter: 'rb:bg-[url("@/assets/images/menu/helpCenter_active.svg")]'
}
const QuickOperation:FC = () => {
const { t, i18n } = useTranslation()
@@ -76,7 +71,7 @@ const QuickOperation:FC = () => {
{quickOperations.map((item, index) => (
<Flex key={item.key} align="center" gap={20} className={clsx("rb:relative rb:rounded-xl rb:py-2! rb:px-3! rb:cursor-pointer", bgStyleList[index])} onClick={() => handleJump(item.url)}>
<div className="rb:size-8 rb:rounded-lg rb:p-1 rb:bg-[#FFFFFF]">
<img className="rb:size-6" src={quickOperationIcons[item.key]} />
<div className={`rb:size-6 rb:bg-cover ${quickOperationIconsClassNames[item.key]}`}></div>
</div>
<div>
<div className="rb:text-[14px] rb:leading-5 rb:font-medium">{t(`dashboard.${item.key}`)}</div>

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

@@ -15,10 +15,6 @@ import clsx from 'clsx'
import { useTranslation } from 'react-i18next'
import { Skeleton, Flex } 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';
import temporalCountIcon from '@/assets/images/home/temporal_count.svg';
import activityEmpty from '@/assets/images/home/ActivityEmpty.svg'
import Empty from '@/components/Empty';
import Card from './Card';
@@ -49,10 +45,10 @@ interface RecentActivities {
/** Activity list configuration */
const activityList = [
{ key: 'chunk_count', icon: chunkCountIcon },
{ key: 'statements_count', icon: statementsCountIcon },
{ key: 'triplet_count', icon: tripletCountIcon },
{ key: 'temporal_count', icon: temporalCountIcon },
{ key: 'chunk_count', iconClass: "rb:bg-[url('@/assets/images/home/chunk_count.svg')]" },
{ key: 'statements_count', iconClass: "rb:bg-[url('@/assets/images/home/statements_count.svg')]" },
{ key: 'triplet_count', iconClass: "rb:bg-[url('@/assets/images/home/triplet_count.svg')]" },
{ key: 'temporal_count', iconClass: "rb:bg-[url('@/assets/images/home/temporal_count.svg')]" },
]
const RecentActivity:FC = () => {
@@ -89,7 +85,7 @@ const RecentActivity:FC = () => {
{activityList.map((item) => (
<Flex key={item.key} align="center" justify="space-between" className={clsx("rb:not-italic")}>
<Flex align="center" gap={20}>
<img className="rb:size-10" src={item.icon} />
<div className={clsx("rb:size-6 rb:bg-cover", item.iconClass)}></div>
<div>
<div className="rb:text-[16px] rb:leading-5.5 rb:font-medium">{t(`dashboard.${item.key}`)}</div>
<div className="rb:text-[#7B8085] rb:text-[14px] rb:font-regular rb:mt-1 rb:leading-4.5">

59
web/src/views/Home/components/TopCardList.tsx
View File

@@ -15,49 +15,22 @@ import { useTranslation } from 'react-i18next'
import clsx from 'clsx';
import { Flex } from 'antd';
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 type { DashboardData } from '../index'
/** Card configuration with styling */
const list = [
{
key: 'totalMemoryCapacity',
icon: totalMemoryCapacity,
// value: '45,678',
// trendValue: '12.5%',
// trend: 'up',
// trendDesc: 'comparedToYesterday',
key: 'total_memory',
background: 'rb:bg-[url("@/assets/images/home/totalMemoryCapacity.png")] rb:bg-cover rb:bg-no-repeat',
},
{
key: 'application',
icon: userMemory,
// value: '32,145',
// trendValue: '12.5%',
// trend: 'down',
// trendDesc: 'comparedToYesterday',
// background: 'linear-gradient( 180deg, #F1FBF5 0%, #F9FDFF 100%)',
key: 'total_app',
},
{
key: 'knowledgeBaseCount',
icon: knowledgeBaseCount,
// value: '13,533',
// trendValue: '15.7%',
// trend: 'up',
// trendDesc: 'thisWeek',
// background: 'linear-gradient( 180deg, #E6F5FE 0%, #FBFDFF 100%)',
key: 'total_knowledge',
},
{
key: 'apiCallCount',
icon: apiCallCount,
// value: '856.2k',
// trendValue: '23.1%',
// trend: 'up',
// trendDesc: 'comparedToYesterday',
// background: 'linear-gradient( 180deg, #F8F6F5 0%, #FAFDFF 100%)',
key: 'total_api_call',
},
]
/**
@@ -75,30 +48,32 @@ const TopCardList: FC<{data?: DashboardData}> = ({ data }) => {
className={`rb:rounded-2xl rb:bg-[#FFFFFF] rb:py-4 rb:px-3 ${item.background || ''}`}
>
<div className={clsx("rb:text-[12px] rb:leading-4", {
'rb:text-[#FFFFFF]': item.key === 'totalMemoryCapacity',
'rb:text-[#5B6167]': item.key !== 'totalMemoryCapacity',
'rb:text-[#FFFFFF]': item.key === 'total_memory',
'rb:text-[#5B6167]': item.key !== 'total_memory',
})}>{t(`dashboard.${item.key}`)}</div>
<div className={clsx("rb:text-[20px] rb:font-bold rb:leading-7 rb:mt-1 rb:font-[MiSans-Bold]", {
'rb:text-[#FFFFFF]': item.key === 'totalMemoryCapacity',
// 'rb:text-[#171719]': item.key !== 'totalMemoryCapacity',
'rb:text-[#FFFFFF]': item.key === 'total_memory',
})}>
{data?.[item.key as keyof DashboardData] || 0}
</div>
<Flex align="center" className={clsx('rb:font-medium rb:mt-7.5!', {
'rb:text-[#FFFFFF]': item.key === 'totalMemoryCapacity',
'rb:text-[#369F21]': item.key !== 'totalMemoryCapacity',
'rb:text-[#FF5D34]': data?.[`${item.key}_change` as keyof DashboardData] && data?.[`${item.key}_change` as keyof DashboardData] < 0,
'rb:text-[#369F21]': !data?.[`${item.key}_change` as keyof DashboardData] || data?.[`${item.key}_change` as keyof DashboardData] >= 0,
})}>
0%
{data?.[`${item.key}_change` as keyof DashboardData] && data?.[item.key as keyof DashboardData] > 0
? (100 * data?.[`${item.key}_change` as keyof DashboardData] / data?.[item.key as keyof DashboardData]).toFixed(2)
: 0
}%
<div className={clsx("rb:size-3.5 rb:cursor-pointer rb:bg-cover", {
"rb:bg-[url('@/assets/images/home/arrow_up.svg')]": item.key === 'totalMemoryCapacity',
"rb:bg-[url('@/assets/images/home/arrow_up_success.svg')]": item.key !== 'totalMemoryCapacity',
"rb:bg-[url('@/assets/images/home/arrow_down.png')]": data?.[`${item.key}_change` as keyof DashboardData] && data?.[`${item.key}_change` as keyof DashboardData] < 0,
"rb:bg-[url('@/assets/images/home/arrow_up_success.svg')]": !data?.[`${item.key}_change` as keyof DashboardData] || data?.[`${item.key}_change` as keyof DashboardData] >= 0,
})}></div>
</Flex>
<div className={clsx("rb:text-[12px] rb:leading-4 rb:mt-0.5", {
'rb:text-[#FFFFFF]': item.key === 'totalMemoryCapacity',
'rb:text-[#5B6167]': item.key !== 'totalMemoryCapacity',
'rb:text-[#FFFFFF]': item.key === 'total_memory',
'rb:text-[#5B6167]': item.key !== 'total_memory',
})}>
{t('dashboard.comparedToYesterday')}
</div>

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

@@ -25,14 +25,18 @@ import ApiLineCard from './components/ApiLineCard'
* Dashboard statistics data
*/
export interface DashboardData {
totalMemoryCapacity?: number;
application?: number;
knowledgeBaseCount?: number;
apiCallCount?: number;
total_memory: number;
total_app: number;
total_knowledge: number;
total_api_call: number;
total_memory_change: number;
total_app_change: number;
total_knowledge_change: number;
total_api_call_change: number;
}
const Home = () => {
const [dashboardData, setDashboardData] = useState<DashboardData>({});
const [dashboardData, setDashboardData] = useState<DashboardData>({} as DashboardData);
const [loading, setLoading] = useState({
knowledgeTypeDistribution: true,
});
@@ -65,12 +69,7 @@ const Home = () => {
}
const { storage_type = 'neo4j' } = response || {}
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
})
setDashboardData(responseData as DashboardData)
})
}
/** Fetch knowledge base type distribution */

41
web/src/views/Index/components/QuickActions.tsx
View File

@@ -2,13 +2,9 @@ import { type FC } from 'react';
import { useTranslation } from 'react-i18next';
import { Flex } from 'antd'
import modelIcon from '@/assets/images/index/model_mgt.svg'
import spaceIcon from '@/assets/images/index/space_mgt.svg'
import userIcon from '@/assets/images/index/user_mgt.svg'
import helpCenterIcon from '@/assets/images/index/help_center.svg'
interface QuickAction {
key: string;
icon: string;
iconClass: string;
title: string;
onClick?: () => void;
}
@@ -40,50 +36,25 @@ const QuickActions: FC<QuickActionsProps> = ({ onNavigate }) => {
const quickActions: QuickAction[] = [
{
key: 'model-management',
icon: modelIcon,
iconClass: "rb:bg-[url('@/assets/images/index/model_mgt.svg')]",
title: t('quickActions.modelManagement'),
onClick: () => onNavigate?.('/model')
},
{
key: 'space-management',
icon: spaceIcon,
iconClass: "rb:bg-[url('@/assets/images/index/space_mgt.svg')]",
title: t('quickActions.spaceManagement'),
onClick: () => onNavigate?.('/space')
},
// {
// key: 'workflow-orchestration',
// icon: workflowIcon,
// title: t('quickActions.workflowOrchestration'),
// onClick: () => onNavigate?.('/workflow')
// },
{
key: 'user-management',
icon: userIcon,
iconClass: "rb:bg-[url('@/assets/images/index/user_mgt.svg')]",
title: t('quickActions.userManagement'),
onClick: () => onNavigate?.('/user-management')
},
// {
// key: 'data-export',
// icon: dataExportIcon,
// title: t('quickActions.dataExport'),
// onClick: () => onNavigate?.('/')
// },
// {
// key: 'log-query',
// icon: logIcon,
// title: t('quickActions.logQuery'),
// onClick: () => onNavigate?.('/log')
// },
// {
// key: 'notification-reminder',
// icon: noteIcon,
// title: t('quickActions.notificationReminder'),
// onClick: () => onNavigate?.('/notification-reminder')
// },
{
key: 'help-center',
icon: helpCenterIcon,
iconClass: "rb:bg-[url('@/assets/images/index/help_center.svg')]",
title: t('quickActions.helpCenter'),
onClick: openHelpCenter
}
@@ -105,7 +76,7 @@ const QuickActions: FC<QuickActionsProps> = ({ onNavigate }) => {
className="rb:cursor-pointer"
onClick={action.onClick}
>
<img src={action.icon} className='rb:size-10 rb:mx-auto' />
<div className={`rb:size-10 rb:mx-auto ${action.iconClass}`}></div>
<div className="rb:text-[12px] rb:max-w-18.25 rb:text-[#5B6167] rb:text-center rb:leading-3.5">
{action.title}
</div>

2
web/src/views/Index/index.tsx
View File

@@ -102,7 +102,7 @@ const Index = () => {
<Row gutter={12}>
<Col flex="1">
<Flex vertical>
<div className='rb:w-full rb:h-26 rb:p-4 rb:bg-cover rb:bg-[url("@/assets/images/index/index_bg@2x.png")]'>
<div className='rb:w-full rb:h-26 rb:p-4 rb:bg-cover rb:bg-[url("@/assets/images/index/index_bg@2x.png")] rb:rounded-xl rb:overflow-hidden'>
<div className="rb:font-[MiSans-Bold] rb:font-bold rb:text-white rb:text-[18px] rb:leading-7">
{t('index.spaceTitle')}
</div>

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

@@ -10,9 +10,9 @@
* Supports deep thinking, normal reply, and quick reply modes
*/
import { type FC, type ReactNode, useState, useEffect } from 'react'
import { type FC, type ReactNode, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { Col, Row, App, Skeleton, Segmented, Tooltip, Flex } from 'antd'
import { Col, Row, App, Skeleton, Segmented, Tooltip, Flex, Image } from 'antd'
import dayjs from 'dayjs'
import type { AnyObject } from 'antd/es/_util/type';
@@ -29,6 +29,8 @@ import type { ChatItem } from '@/components/Chat/types'
import RbCard from '@/components/RbCard/Card';
import styles from './index.module.css'
import ResultCard from '@/components/RbCard/ResultCard'
import AudioPlayer from '@/views/UserMemoryDetail/components/AudioPlayer'
import VideoPlayer from '@/views/UserMemoryDetail/components/VideoPlayer'
/** Search mode configuration */
@@ -92,6 +94,7 @@ export interface LogItem {
result?: string;
original_query: string;
index?: number;
result_count?: number;
}
/**
@@ -144,6 +147,10 @@ const MemoryConversation: FC = () => {
const handleChange = (value: string) => {
setSearchSwitch(value)
}
const handleDownload = (file_path?: string) => {
if (!file_path) return
window.open(file_path, '_blank')
}
return (
<>
@@ -168,7 +175,7 @@ const MemoryConversation: FC = () => {
</Col>
</Row>
<Row gutter={16} className="rb:h-[calc(100%-48px)]!">
<Col span={12}>
<Col span={12} className="rb:h-full!">
<RbCard
title={t('memoryConversation.conversationContent')}
headerType="borderless"
@@ -200,7 +207,7 @@ const MemoryConversation: FC = () => {
</Chat>
</RbCard>
</Col>
<Col span={12}>
<Col span={12} className="rb:h-full!">
<RbCard
title={t('memoryConversation.memoryConversationAnalysis')}
headerType="borderless"
@@ -235,7 +242,7 @@ const MemoryConversation: FC = () => {
<ContentWrapper key={vo.id}>
<>
<div className="rb:font-medium rb:text-[#212332]">{vo.id}. {vo.question}</div>
<div className="rb:mt-2 rb:text-[12px] rb:text-[#5B6167]">{vo.reason}</div>
<div className="rb:mt-2 rb:text-[#5B6167]">{vo.reason}</div>
</>
</ContentWrapper>
))}
@@ -247,7 +254,7 @@ const MemoryConversation: FC = () => {
<>
<div className="rb:font-medium rb:text-[#212332]">{key}</div>
{(log.data as Record<string, string[]>)[key].map((item, index) => (
<div key={index} className="rb:mt-2 rb:text-[#5B6167] rb:text-[12px]">{item}</div>
<div key={index} className="rb:mt-2 rb:text-[#5B6167]">{item}</div>
))}
</>
</ContentWrapper>
@@ -257,16 +264,16 @@ const MemoryConversation: FC = () => {
? <ContentWrapper>
<div className="rb:font-medium rb:text-[#212332] rb:mb-2">{log.query}</div>
{(log.raw_results.reranked_results as AnyObject)?.communities?.length > 0 && <>
<div className="rb:font-medium rb:text-[#212332] rb:text-[12px]">{t('memoryConversation.communities')}</div>
<ul className='rb:mt-2 rb:text-[12px] rb:text-[#5B6167] rb:list-disc rb:pl-4'>
<div className="rb:font-medium rb:text-[#212332]">{t('memoryConversation.communities')}</div>
<ul className='rb:mt-2 rb:text-[#5B6167] rb:list-disc rb:pl-4'>
{((log.raw_results.reranked_results as AnyObject)?.communities as { content: string }[]).map((item, index: number) => (
<li key={index}>{item.content}</li>
))}
</ul>
</>}
{(log.raw_results.reranked_results as AnyObject)?.summaries?.length > 0 && <>
<div className="rb:font-medium rb:text-[#212332] rb:text-[12px]">{t('memoryConversation.summaries')}</div>
<ul className='rb:mt-2 rb:text-[12px] rb:text-[#5B6167] rb:list-disc rb:pl-4'>
<div className="rb:font-medium rb:text-[#212332]">{t('memoryConversation.summaries')}</div>
<ul className='rb:mt-2 rb:text-[#5B6167] rb:list-disc rb:pl-4'>
{((log.raw_results.reranked_results as AnyObject)?.summaries as { content: string }[]).map((item, index: number) => (
<li key={index}>{item.content}</li>
))}
@@ -280,8 +287,8 @@ const MemoryConversation: FC = () => {
: log.type === 'verification'
? <ContentWrapper>
<div className="rb:font-medium rb:text-[#212332]">{log.query}</div>
<div className="rb:mt-2 rb:text-[12px] rb:text-[#5B6167]">{log.reason}</div>
<div className="rb:mt-2 rb:text-[12px] rb:text-[#5B6167]">{log.result}</div>
<div className="rb:mt-2 rb:text-[#5B6167]">{log.reason}</div>
<div className="rb:mt-2 rb:text-[#5B6167]">{log.result}</div>
</ContentWrapper>
: log.type === 'output_type'
? <ContentWrapper>
@@ -291,8 +298,8 @@ const MemoryConversation: FC = () => {
: log.type === 'input_summary' && log.raw_results
? <ContentWrapper>
<div className="rb:font-medium rb:text-[#212332] rb:mb-2">{log.query}</div>
<div className="rb:font-medium rb:text-[12px] rb:text-[#5B6167] rb:mb-2">{log.summary}</div>
<div className='rb:mt-2 rb:text-[12px] rb:text-[#5B6167]'>
<div className="rb:font-medium rb:text-[#5B6167] rb:mb-2">{log.summary}</div>
<div className='rb:mt-2 rb:text-[#5B6167]'>
{typeof log.raw_results === 'string'
? <Markdown content={log.raw_results} />
: <>
@@ -306,7 +313,65 @@ const MemoryConversation: FC = () => {
}
</div>
</ContentWrapper>
: null
: log.type === 'perceptual_retrieve' && log.data && log.data?.length > 0
? <Flex gap={12} vertical>
{log.data.map((vo: any) => (
<ContentWrapper key={vo.id}>
<Flex vertical gap={16}>
{vo.file_path
? <>
{/(jpg|jpeg|png|gif|webp|svg)$/i.test(vo.file_type)
? <Image src={vo.file_path} alt={vo.file_name} width={432} className="rb:rounded-xl rb:h-45!" />
: /(mp4|webm|ogg|mov)$/i.test(vo.file_type)
? <VideoPlayer src={vo.file_path} />
: /(mp3|wav|ogg|m4a|aac)$/i.test(vo.file_type)
? <AudioPlayer src={vo.file_path} fileName={vo.file_name} fileSize='-' />
: <Flex gap={11} align="center" justify="space-between" className="rb:bg-[#F6F6F6] rb:min-h-15.5! rb:rounded-xl rb:p-3!">
<Flex gap={12} align="center">
<div className="rb:w-7.5 rb:h-9 rb:bg-cover rb:bg-[url('@/assets/images/userMemory/file.svg')]"></div>
<div>
<div className="rb:leading-5 rb:font-medium rb:mb-1 rb:wrap-break-word rb:line-clamp-1">{vo.file_name}</div>
<div className="rb:text-[#5B6167] rb:leading-4.5">
-
</div>
</div>
</Flex>
<div
className="rb:size-6 rb:bg-cover rb:cursor-pointer rb:bg-[url('@/assets/images/userMemory/download.svg')] rb:hover:bg-[url('@/assets/images/userMemory/download_hover.svg')]"
onClick={() => handleDownload(vo.file_path)}
></div>
</Flex>
}
</>
: <div className="rb:bg-[#F6F6F6] rb:min-h-15.5! rb:rounded-xl rb:p-3!">
<Empty size={44} />
</div>
}
{['summary', 'keywords', 'topic', 'domain', 'scene', 'speaker_count', 'section_count'].map(key => {
const value = vo[key]
if (value) {
return (
<div key={key} className="rb:leading-5">
<div className="rb:text-[#5B6167] rb:mb-1">{t(`perceptualDetail.${key}`)}</div>
{typeof value === 'string'
? <div>{value}</div>
: Array.isArray(value)
? <Flex wrap gap={11}>
{value.map((vo, index) => <div key={index} className="rb:bg-[#F6F6F6] rb:rounded-[13px] rb:py-1 rb:px-2 rb:font-medium rb:leading-4.5">{vo}</div>)}
</Flex>
: '-'
}
</div>
)
}
return null
})}
</Flex>
</ContentWrapper>
))}
</Flex>
: null
}
</ResultCard>
))}

2
web/src/views/Ontology/components/PageHeader.tsx
View File

@@ -54,7 +54,7 @@ const PageHeader: FC<ConfigHeaderProps> = ({
<div className="rb:flex rb:items-center rb:gap-3">
<Button type="primary" ghost className="rb:h-6! rb:px-2! rb:leading-5.5!" onClick={goBack}>
<img src={logoutIcon} className="rb:w-4 rb:h-4" />
<div className="rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/logout_hover.svg')]" />
{t('common.return')}
</Button>
{extra}

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

@@ -205,35 +205,33 @@ const OrderHistory: React.FC = () => {
];
return (
<div className="rb:h-[calc(100vh-80px)] rb:overflow-hidden">
<Flex justify="space-between" className="rb:mb-4!">
<Space size={10}>
<Select
defaultValue={query.status}
placeholder={t('common.select')}
options={statusOptions}
className="rb:w-30"
onChange={handleChangeStatus}
/>
<Select
defaultValue={query.product_type}
placeholder={t('common.select')}
options={productTypeOptions}
className="rb:w-30"
onChange={handleChangeType}
/>
<Select
defaultValue={timeType}
placeholder={t('common.select')}
options={timeOptions}
className="rb:w-30"
onChange={handleChangeTime}
/>
</Space>
<div className="rb:h-full rb:overflow-hidden rb:bg-white rb:rounded-lg rb:pt-3 rb:px-3">
<Flex className="rb:mb-3!" gap={10}>
<Select
defaultValue={query.status}
placeholder={t('common.select')}
options={statusOptions}
className="rb:w-30"
onChange={handleChangeStatus}
/>
<Select
defaultValue={query.product_type}
placeholder={t('common.select')}
options={productTypeOptions}
className="rb:w-30"
onChange={handleChangeType}
/>
<Select
defaultValue={timeType}
placeholder={t('common.select')}
options={timeOptions}
className="rb:w-30"
onChange={handleChangeTime}
/>
<SearchInput
placeholder={t('pricing.searchPlaceholder')}
onSearch={(value) => setQuery(prev => ({ ...prev, search: value }))}
className="rb:w-70"
variant="outlined"
/>
</Flex>
<Table

199
web/src/views/SelfReflectionEngine/index.tsx
View File

@@ -11,19 +11,20 @@
*/
import React, { useState, useEffect } from 'react';
import { Row, Col, Form, App, Button, Space, Select, Flex } from 'antd';
import { Row, Col, Form, App, Button, Space, Select, Flex, Divider } from 'antd';
import { useParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import clsx from 'clsx';
import RbCard from '@/components/RbCard/Card';
import { getMemoryReflectionConfig, updateMemoryReflectionConfig, pilotRunMemoryReflectionConfig } from '@/api/memory'
import type { ConfigForm, Result, ReflexionData, MemoryVerify, QualityAssessment } from './types'
import Tag from '@/components/Tag'
import type { ConfigForm, Result, ReflexionData } from './types'
import { useI18n } from '@/store/locale';
import SwitchFormItem from '@/components/FormItem/SwitchFormItem'
import LabelWrapper from '@/components/FormItem/LabelWrapper'
import DescWrapper from '@/components/FormItem/DescWrapper'
import ModelSelect from '@/components/ModelSelect';
import BtnTabs from '@/components/BtnTabs'
/** Configuration list */
const configList = [
@@ -91,6 +92,8 @@ const SelfReflectionEngine: React.FC = () => {
const { message } = App.useApp();
const [loading, setLoading] = useState(false)
const [runLoading, setRunLoading] = useState(false)
const [activeTabMap, setActiveTabMap] = useState<Record<number, string>>({});
const [expanded, setExpanded] = useState({ conflict: true, quality: true, privacy: true });
const [result, setResult] = useState<Result | null>(null)
const { language } = useI18n()
@@ -158,6 +161,8 @@ const SelfReflectionEngine: React.FC = () => {
})
.then((res) => {
setResult(res as Result)
setExpanded({ conflict: true, quality: true, privacy: true })
setActiveTabMap({})
})
.finally(() => {
setRunLoading(false)
@@ -174,8 +179,8 @@ const SelfReflectionEngine: React.FC = () => {
<RbCard
title={t('reflectionEngine.reflectionEngineConfig')}
extra={<Space>
<Button block onClick={handleReset}>{t('common.reset')}</Button>
<Button type="primary" loading={loading} block onClick={handleSave}>{t('common.save')}</Button>
<Button onClick={handleReset}>{t('common.reset')}</Button>
<Button type="primary" loading={loading} onClick={handleSave}>{t('common.save')}</Button>
</Space>}
headerType="borderless"
headerClassName="rb:min-h-[54px]! rb:font-[MiSans-Bold] rb:font-bold"
@@ -253,100 +258,110 @@ const SelfReflectionEngine: React.FC = () => {
</RbCard>
</Col>
<Col span={12} className="rb:h-full!">
<Flex gap={16} vertical className="rb:h-full!">
<RbCard
title={t('memoryExtractionEngine.example')}
>
<div className="rb:text-[14px] rb:text-[#5B6167] rb:font-regular rb:leading-5 rb:mb-6">
<RbCard
title={t('memoryExtractionEngine.example')}
extra={<Space>
<Button type="primary" loading={runLoading} disabled={!values?.reflection_enabled} onClick={handleRun}>{t('reflectionEngine.run')}</Button>
</Space>}
headerType="borderless"
headerClassName="rb:min-h-[54px]! rb:font-[MiSans-Bold] rb:font-bold"
className="rb:h-full!"
bodyClassName="rb:h-[calc(100%-54px)] rb:overflow-y-auto! rb:p-4! rb:pt-0!"
>
<Flex vertical gap={12}>
<div className="rb:bg-[#F6F6F6] rb:rounded-xl rb:py-2.5 rb:px-3 rb:leading-5.5">
{t('reflectionEngine.exampleText')}
</div>
<Button type="primary" block loading={runLoading} disabled={!values?.reflection_enabled} onClick={handleRun}>{t('reflectionEngine.run')}</Button>
</RbCard>
{result && <>
<RbCard
title={t('reflectionEngine.runTitle')}
>
<div
className="rb:flex rb:gap-4 rb:justify-start rb:text-[#5B6167] rb:text-[14px] rb:leading-5 rb:mb-3"
>
<div className="rb:whitespace-nowrap rb:w-45 rb:font-medium">{t(`reflectionEngine.baseline`)}</div>
<div className='rb:flex-inline rb:text-left rb:py-px rb:rounded rb:text-[#5B6167] rb:flex-1'>
{result.baseline}
</div>
</div>
</RbCard>
{result.reflexion_data.length > 0 && (
<RbCard
title={t('reflectionEngine.conflictDetection')}
>
<Space size={12} direction="vertical" className="rb:w-full">
{result.reflexion_data.map((item, index) => (
<div key={index} className="rb:bg-[#F0F3F8] rb:px-3 rb:py-2.5 rb:rounded-md rb:text-[12px]">
{['reason', 'solution'].map(key => (
<div
key={key}
className="rb:flex rb:gap-4 rb:justify-start rb:text-[14px] rb:leading-5 rb:mb-3"
>
<div className="rb:whitespace-nowrap rb:w-45 rb:font-medium">{t(`reflectionEngine.${key}`)}</div>
<div className='rb:flex-inline rb:text-left rb:py-px rb:rounded rb:text-[#5B6167] rb:flex-1'>
{item[key as keyof ReflexionData]}
</div>
</div>
))}
{result && <>
<Flex justify="space-between" className="rb:bg-[#F6F6F6] rb:rounded-xl rb:py-2.5! rb:px-3! rb:leading-5">
<span className="rb:font-medium rb:text-[#212332]">{t('reflectionEngine.runTitle')}</span>
<span className="rb:text-[#5B6167]">{t(`reflectionEngine.baseline`)}: {t(`reflectionEngine.${result.baseline}`)}</span>
</Flex>
{result.reflexion_data.length > 0 &&
<Flex vertical gap={12} className="rb:bg-[#F6F6F6] rb:rounded-xl rb:py-2.5! rb:px-3! rb:leading-5.5">
<Flex justify="space-between" className="rb:font-medium rb:text-[#212332] rb:cursor-pointer" onClick={() => setExpanded(p => ({ ...p, conflict: !p.conflict }))}>
{t('reflectionEngine.conflictDetection')}
<div className={clsx("rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/common/arrow_up.svg')] rb:transition-transform", {
'rb:rotate-180': !expanded.conflict,
})}></div>
</Flex>
{expanded.conflict && result.reflexion_data.map((item, index) => (
<div key={index} className="rb:bg-white rb:rounded-xl rb:py-2.5! rb:px-3!">
<BtnTabs
className="rb:mb-3!"
variant="outline"
activeKey={activeTabMap[index] ?? 'reason'}
items={['reason', 'solution'].map(key => ({
label: t(`reflectionEngine.${key}`),
key
}))}
onChange={(key) => setActiveTabMap(prev => ({ ...prev, [index]: key }))}
/>
<div className="rb:leading-5.5">{item[(activeTabMap[index] ?? 'reason') as keyof ReflexionData]}</div>
</div>
))}
</Space>
</RbCard>
)}
{result.quality_assessments.length > 0 && (
<RbCard
title={t('reflectionEngine.qualityAssessment')}
>
{result.quality_assessments.map((item, index) => (
<div key={index} className="rb:bg-[#F0F3F8] rb:px-3 rb:py-2.5 rb:rounded-md rb:text-[12px]">
{['score', 'summary'].map(key => (
<div
key={key}
className="rb:flex rb:gap-4 rb:justify-start rb:text-[14px] rb:leading-5 rb:mb-3"
>
<div className="rb:whitespace-nowrap rb:w-45 rb:font-medium">{t(`reflectionEngine.qualityAssessmentObj.${key}`)}</div>
<div className='rb:flex-inline rb:text-left rb:py-px rb:rounded rb:text-[#5B6167] rb:flex-1'>
{item[key as keyof QualityAssessment]}
</div>
</Flex>
}
{result.quality_assessments.length > 0 &&
<Flex vertical gap={12} className="rb:bg-[#F6F6F6] rb:rounded-xl rb:py-2.5! rb:px-3! rb:leading-5.5">
<Flex justify="space-between" className="rb:font-medium rb:text-[#212332] rb:cursor-pointer" onClick={() => setExpanded(p => ({ ...p, quality: !p.quality }))}>
{t('reflectionEngine.qualityAssessment')}
<div className={clsx("rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/common/arrow_up.svg')] rb:transition-transform", {
'rb:rotate-180': !expanded.quality,
})}></div>
</Flex>
{expanded.quality && result.quality_assessments.map((item, index) => (
<div key={index} className="rb:bg-white rb:rounded-xl rb:py-2.5! rb:px-3!">
<div>
<span className="rb:font-medium rb:text-[#212332] rb:leading-5 rb:mr-4.5">{t(`reflectionEngine.qualityAssessmentObj.score`)}</span>
<span className="rb:font-[MiSans-Bold] rb:font-bold rb:text-[#155EEF] rb:leading-5">{item.score}</span>
</div>
))}
</div>
))}
</RbCard>
)}
{result.memory_verifies.length > 0 && (
<RbCard
title={t('reflectionEngine.privacyAudit')}
>
{result.memory_verifies.map((item, index) => (
<div key={index} className="rb:bg-[#F0F3F8] rb:px-3 rb:py-2.5 rb:rounded-md rb:text-[12px]">
{['has_privacy', 'privacy_types', 'summary'].map(key => (
<div
key={key}
className="rb:flex rb:gap-4 rb:justify-start rb:text-[14px] rb:leading-5 rb:mb-3"
>
<div className="rb:whitespace-nowrap rb:w-45 rb:font-medium">{t(`reflectionEngine.privacyAuditObj.${key}`)}</div>
<div className='rb:flex-inline rb:text-left rb:py-px rb:rounded rb:text-[#5B6167] rb:flex-1'>
{key === 'has_privacy'
? <Tag color={item[key as keyof MemoryVerify] ? 'success' : 'error'}>{t(`reflectionEngine.privacyAuditObj.${item[key as keyof MemoryVerify]}`)}</Tag>
: key === 'privacy_types' ? (item[key as keyof MemoryVerify] as string[]).join('、')
: item[key as keyof MemoryVerify]
}
</div>
<Divider className="rb:my-3!" />
<div className="rb:font-medium rb:text-[#212332] rb:leading-5 rb:mb-2">{t(`reflectionEngine.qualityAssessmentObj.summary`)}</div>
<div className="rb:mt-1 rb:leading-5.5">{item.summary}</div>
</div>
))}
</Flex>
}
{result.memory_verifies.length > 0 &&
<Flex vertical gap={12} className="rb:bg-[#F6F6F6] rb:rounded-xl rb:py-2.5! rb:px-3! rb:leading-5.5">
<Flex justify="space-between" className="rb:font-medium rb:text-[#212332] rb:cursor-pointer" onClick={() => setExpanded(p => ({ ...p, privacy: !p.privacy }))}>
{t('reflectionEngine.privacyAudit')}
<div className={clsx("rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/common/arrow_up.svg')] rb:transition-transform", {
'rb:rotate-180': !expanded.privacy,
})}></div>
</Flex>
{expanded.privacy && result.memory_verifies.map((item, index) => (
<div key={index} className="rb:bg-white rb:rounded-xl rb:py-2.5! rb:px-3!">
<div>
<span className="rb:font-medium rb:text-[#212332] rb:leading-5 rb:mr-4.5">{t(`reflectionEngine.privacyAuditObj.has_privacy`)}</span>
<span className="rb:font-[MiSans-Bold] rb:font-bold rb:text-[#155EEF] rb:leading-5">{item.has_privacy}</span>
</div>
))}
</div>
))}
</RbCard>
)}
</>}
</Flex>
<Divider className="rb:my-3!" />
<div className="rb:font-medium rb:text-[#212332] rb:leading-5 rb:mb-2">{t(`reflectionEngine.privacyAuditObj.privacy_types`)}</div>
<div className="rb:mt-1 rb:leading-5.5">{item.privacy_types.join(', ')}</div>
<Divider className="rb:my-3!" />
<div className="rb:font-medium rb:text-[#212332] rb:leading-5 rb:mb-2">{t(`reflectionEngine.privacyAuditObj.summary`)}</div>
<div className="rb:mt-1 rb:leading-5.5">{item.summary}</div>
</div>
))}
</Flex>
}
</>}
</Flex>
</RbCard>
</Col>
</Row>
);

63
web/src/views/Skills/components/ToolList/ToolList.tsx
View File

@@ -12,7 +12,7 @@
import { type FC, useRef, useState, useEffect } from 'react'
import { useTranslation } from 'react-i18next'
import { Space, Button, List } from 'antd'
import { Space, Button, Flex } from 'antd'
import Card from '@/views/ApplicationConfig/components/Card'
import type {
@@ -22,6 +22,7 @@ import type {
import Empty from '@/components/Empty'
import ToolModal from './ToolModal'
import { getToolMethods, getToolDetail } from '@/api/tools'
import Tag from '@/components/Tag'
/**
* Tool List Component Props
@@ -61,6 +62,7 @@ const ToolList: FC<ToolListProps> = ({value, onChange}) => {
const mcpFilterItem = (methods as any[]).find(vo => vo.name === item.operation)
return {
...item,
is_active: (toolDetail as any).is_active,
label: mcpFilterItem?.description,
method_id: mcpFilterItem?.method_id,
value: mcpFilterItem?.name,
@@ -74,6 +76,7 @@ const ToolList: FC<ToolListProps> = ({value, onChange}) => {
const builtinFilterItem = (methods as any[]).find(vo => vo.name === item.operation)
return {
...item,
is_active: (toolDetail as any).is_active,
label: builtinFilterItem?.description,
method_id: builtinFilterItem?.method_id,
value: builtinFilterItem?.name,
@@ -84,6 +87,7 @@ const ToolList: FC<ToolListProps> = ({value, onChange}) => {
// Single method: Use first method
return {
...item,
is_active: (toolDetail as any).is_active,
label: (methods as any[])[0]?.description,
method_id: (methods as any[])[0]?.method_id,
value: (methods as any[])[0]?.name,
@@ -96,6 +100,7 @@ const ToolList: FC<ToolListProps> = ({value, onChange}) => {
const customFilterItem = (methods as any[]).find(vo => vo.method_id === item.operation)
return {
...item,
is_active: (toolDetail as any).is_active,
label: customFilterItem?.name,
method_id: customFilterItem?.method_id,
value: customFilterItem?.name,
@@ -129,7 +134,10 @@ const ToolList: FC<ToolListProps> = ({value, onChange}) => {
* @param tool - Tool to add
*/
const updateTools = (tool: ToolOption) => {
const list = [...toolList, tool]
const list = [...toolList, {
...tool,
is_active: true,
}]
setToolList(list)
onChange && onChange(list)
}
@@ -146,42 +154,35 @@ const ToolList: FC<ToolListProps> = ({value, onChange}) => {
}
return (
<Card
<Card
title={t('application.toolConfiguration')}
extra={
<Button style={{ padding: '0 8px', height: '24px' }} onClick={handleAddTool}>
+ {t('application.addTool')}
</Button>
<Button className="rb:h-6! rb:py-0! rb:px-2! rb:rounded-md! rb:text-[#21233" onClick={handleAddTool}>+ {t('application.addTool')}</Button>
}
>
{/* Show empty state or tool list */}
{toolList.length === 0
? <Empty size={88} />
:
<List
grid={{ gutter: 12, column: 1 }}
dataSource={toolList}
renderItem={(item, index) => (
<List.Item>
{/* Tool card with delete button */}
<div key={index} className="rb:flex rb:items-center rb:justify-between rb:p-[12px_16px] rb:bg-[#FBFDFF] rb:border rb:border-[#DFE4ED] rb:rounded-lg">
{/* Tool label/description */}
<div className="rb:font-medium rb:leading-4">
{item.label}
</div>
<Space size={12}>
{/* Delete button with hover effect */}
<div
className="rb:w-6 rb:h-6 rb:cursor-pointer rb:bg-[url('@/assets/images/deleteBorder.svg')] rb:hover:bg-[url('@/assets/images/deleteBg.svg')]"
onClick={() => handleDeleteTool(index)}
></div>
</Space>
? <div className="rb-border rb:rounded-xl rb:pt-4 rb:pb-6"><Empty size={88} /></div>
: <Flex vertical gap={12}>
{toolList.map((item, index) => (
<Flex key={index} align="center" justify="space-between" className="rb:py-2.5! rb:pl-4! rb:pr-3! rb-border rb:rounded-lg">
<div>
<div className="rb:font-medium rb:leading-4">
{item.label}
</div>
</List.Item>
)}
/>
<Tag color={item.is_active ? 'success' : 'error'} className="rb:mt-1">
{item.is_active ? t('common.enable') : t('common.deleted')}
</Tag>
</div>
<Space size={12}>
<div
className="rb:w-6 rb:h-6 rb:cursor-pointer rb:bg-[url('@/assets/images/deleteBorder.svg')] rb:hover:bg-[url('@/assets/images/deleteBg.svg')]"
onClick={() => handleDeleteTool(index)}
></div>
</Space>
</Flex>
))}
</Flex>
}
{/* Tool selection modal */}
<ToolModal
ref={toolModalRef}
refresh={updateTools}

1
web/src/views/Skills/components/ToolList/types.ts
View File

@@ -32,6 +32,7 @@ export interface ToolOption {
tool_id?: string;
/** Whether tool is enabled */
enabled?: boolean;
is_active?: boolean;
}
/**

177
web/src/views/Skills/pages/SkillConfig.tsx
View File

@@ -7,17 +7,16 @@
import { type FC, useEffect, useRef, useState } from "react";
import { useTranslation } from 'react-i18next';
import { useNavigate, useParams } from 'react-router-dom';
import { Form, Input, Button, Space, Select, App } from 'antd'
import { Form, Input, Button, Space, Select, App, Flex } from 'antd'
import Card from '@/views/ApplicationConfig/components/Card'
import aiPrompt from '@/assets/images/application/aiPrompt.png'
import AiPromptModal from '@/views/ApplicationConfig/components/AiPromptModal'
import ToolList from '../components/ToolList/ToolList'
import type { AiPromptModalRef } from '@/views/ApplicationConfig/types'
import exitIcon from '@/assets/images/knowledgeBase/exit.png';
import type { SkillFormData } from '../types'
import { getSkillDetail, createSkill, updateSkill } from '@/api/skill'
import { stringRegExp } from '@/utils/validator';
import PageHeader from '@/components/Layout/PageHeader'
/**
* Skill Configuration Page Component
@@ -43,6 +42,7 @@ const SkillConfig: FC = () => {
const { message } = App.useApp()
const [loading, setLoading] = useState(false)
const [form] = Form.useForm<SkillFormData>();
const [data, setData] = useState<SkillFormData | null>(null)
/**
* Effect: Load skill data if editing existing skill
@@ -70,6 +70,7 @@ const SkillConfig: FC = () => {
getSkillDetail(id)
.then(res => {
form.setFieldsValue(res as SkillFormData)
setData(res as SkillFormData)
})
.finally(() => {
setLoading(false)
@@ -131,93 +132,103 @@ const SkillConfig: FC = () => {
}
return (
<div className="rb:w-250 rb:mt-5 rb:pb-5 rb:mx-auto">
{/* Back button */}
<div className='rb:flex rb:items-center rb:gap-2 rb:mb-4 rb:cursor-pointer' onClick={handleBack}>
<img src={exitIcon} alt='exit' className='rb:w-4 rb:h-4' />
<span className='rb:text-gray-500 rb:text-sm'>{t('common.exit')}</span>
</div>
<Form form={form} layout="vertical">
<Space size={16} direction="vertical" className="rb:w-full">
{/* Manifest Section: Basic skill information */}
<Card title={t('skills.mainfest')}>
<Form.Item
name="name"
label={t('skills.name')}
rules={[
{ required: true, message: t('common.inputPlaceholder', { title: t('skills.name') }) },
{ max: 50 },
{ pattern: stringRegExp, message: t('common.nameInvalid') },
]}
<Flex vertical className="rb:h-screen!">
<PageHeader
title={data?.name}
extra={
<Flex gap={12} align="center">
{/* Save button */}
<Button type="primary" className="rb:px-2! rb:gap-0.5!" disabled={loading} onClick={handleSave}>{t('skills.save')}</Button>
<Button
className="rb:px-2! rb:gap-0.5!"
icon={<div className="rb:bg-[url('@/assets/images/workflow/return.svg')] rb:size-4 rb:bg-cover"></div>}
onClick={handleBack}
>
<Input placeholder={t('common.pleaseEnter')} />
</Form.Item>
<Form.Item
name="description"
label={t('skills.description')}
rules={[{ max: 500 }]}
>
<Input.TextArea placeholder={t('skills.descriptionPlaceholder')} />
</Form.Item>
<Form.Item
name={['config', 'keywords']}
label={t('skills.keywords')}
rules={[{ required: true, message: t('common.inputPlaceholder', { title: t('skills.keywords') }) }]}
>
<Select
mode="tags"
placeholder={t('common.pleaseEnter')}
/>
</Form.Item>
</Card>
{t('common.return')}
</Button>
</Flex>
}
/>
<div className="rb:w-250 rb:my-3 rb:mx-auto rb:flex-1 rb:overflow-y-auto">
<Form form={form} layout="vertical">
<Space size={16} direction="vertical" className="rb:w-full">
{/* Manifest Section: Basic skill information */}
<Card title={t('skills.mainfest')}>
<Form.Item
name="name"
label={t('skills.name')}
rules={[
{ required: true, message: t('common.inputPlaceholder', { title: t('skills.name') }) },
{ max: 50 },
{ pattern: stringRegExp, message: t('common.nameInvalid') },
]}
>
<Input placeholder={t('common.pleaseEnter')} />
</Form.Item>
<Form.Item
name="description"
label={t('skills.description')}
rules={[{ max: 500 }]}
>
<Input.TextArea placeholder={t('skills.descriptionPlaceholder')} />
</Form.Item>
<Form.Item
name={['config', 'keywords']}
label={t('skills.keywords')}
rules={[{ required: true, message: t('common.inputPlaceholder', { title: t('skills.keywords') }) }]}
>
<Select
mode="tags"
placeholder={t('common.pleaseEnter')}
/>
</Form.Item>
</Card>
{/* Prompt Configuration Section: AI instructions */}
<Card title={t('skills.promptConfiguration')}
extra={
<Button style={{ padding: '0 8px', height: '24px' }} onClick={handlePrompt}>
<img src={aiPrompt} className="rb:size-5" />
{t('skills.aiPrompt')}
</Button>
}
>
{/* Prompt Configuration Section: AI instructions */}
<Card title={t('skills.promptConfiguration')}
extra={
<Button style={{ padding: '0 8px', height: '24px' }} onClick={handlePrompt}>
<div className="rb:size-5 rb:bg-cover rb:bg-[url('@/assets/images/application/aiPrompt.png')] rb:mr-1!" />
{t('skills.aiPrompt')}
</Button>
}
>
<Form.Item
name="prompt"
className="rb:mb-0!"
>
<Input.TextArea
placeholder={t('skills.promptPlaceholder')}
styles={{
textarea: {
minHeight: '200px',
borderRadius: '8px'
},
}}
/>
</Form.Item>
</Card>
{/* Tool Configuration Section */}
<Form.Item
name="prompt"
name="tools"
rules={[{ required: true, message: t('common.selectPlaceholder', { title: t('skills.tools') }) }]}
className="rb:mb-0!"
>
<Input.TextArea
placeholder={t('skills.promptPlaceholder')}
styles={{
textarea: {
minHeight: '200px',
borderRadius: '8px'
},
}}
/>
<ToolList />
</Form.Item>
</Card>
{/* Tool Configuration Section */}
<Form.Item
name="tools"
rules={[{ required: true, message: t('common.selectPlaceholder', { title: t('skills.tools') }) }]}
className="rb:mb-0!"
>
<ToolList />
</Form.Item>
{/* Save button */}
<Button type="primary" block disabled={loading} onClick={handleSave}>{t('skills.save')}</Button>
</Space>
</Form>
{/* AI Prompt Generation Modal */}
<AiPromptModal
ref={aiPromptModalRef}
refresh={updatePrompt}
source="skills"
/>
</div>
</Space>
</Form>
{/* AI Prompt Generation Modal */}
<AiPromptModal
ref={aiPromptModalRef}
refresh={updatePrompt}
source="skills"
/>
</div>
</Flex>
)
}

12
web/src/views/UserMemoryDetail/Rag.tsx
View File

@@ -16,8 +16,6 @@ import { Row, Col, Skeleton, Spin, Flex, Tooltip } from 'antd'
import { LoadingOutlined } from '@ant-design/icons';
import { useParams } from 'react-router-dom'
import aboutUs from '@/assets/images/userMemory/aboutUs.svg'
import memoryInsight from '@/assets/images/userMemory/memoryInsight.svg'
import RbCard from '@/components/RbCard/Card'
import type { Data } from './types'
import {
@@ -34,12 +32,12 @@ import ConversationMemory from './components/ConversationMemory'
*/
interface TitleProps {
title: string
icon: string
iconClassName: string
}
/** Collapsible section title */
const Title: FC<TitleProps> = ({ title, icon }) => (
const Title: FC<TitleProps> = ({ title, iconClassName }) => (
<Flex align="center" gap={4} className="rb:font-medium rb:leading-5 rb:mb-2.25!">
<img src={icon} className="rb:size-4.5 rb:ml-0.5" />
<div className={`rb:size-4.5 rb:ml-0.5 rb:bg-cover ${iconClassName}`} />
{title}
</Flex>
)
@@ -143,7 +141,7 @@ const Rag: FC = () => {
<>
<Title
title={t('userMemory.aboutMe')}
icon={aboutUs}
iconClassName="rb:bg-[url('@/assets/images/userMemory/aboutUs.svg')]"
/>
<div className="rb:bg-[#F6F6F6] rb:rounded-lg rb:py-2.5 rb:px-3 rb:mb-4">
{loading.summary
@@ -160,7 +158,7 @@ const Rag: FC = () => {
<>
<Title
title={t('userMemory.memoryInsight')}
icon={memoryInsight}
iconClassName="rb:bg-[url('@/assets/images/userMemory/memoryInsight.svg')]"
/>
<div className="rb:bg-[#F6F6F6] rb:rounded-lg rb:py-2.5 rb:px-3">
{loading.insight

65
web/src/views/UserMemoryDetail/components/PageHeader.tsx
View File

@@ -1,65 +0,0 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 18:32:30
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 18:32:30
*/
/**
* Page Header Component
* Header with navigation and operation buttons
*/
import { type FC, type ReactNode } from 'react';
import { useNavigate } from 'react-router-dom';
import { Layout, Button } from 'antd';
import { useTranslation } from 'react-i18next';
import logoutIcon from '@/assets/images/logout_hover.svg'
const { Header } = Layout;
/**
* Component props
*/
interface ConfigHeaderProps {
name?: string;
operation?: ReactNode;
source?: 'detail' | 'node';
extra?: ReactNode;
}
const PageHeader: FC<ConfigHeaderProps> = ({
name,
operation,
source = 'detail',
extra
}) => {
const { t } = useTranslation();
const navigate = useNavigate();
/** Navigate back */
const goBack = () => {
if (source === 'detail') {
navigate('/user-memory', { replace: true })
} else {
navigate(-1)
}
}
return (
<Header className="rb:w-full rb:h-16 rb:flex rb:justify-between rb:p-[16px_16px_16px_24px]! rb:border-b rb:border-[#EAECEE] rb:leading-8">
<div className="rb:h-8 rb:flex rb:items-center rb:font-medium">
{t('userMemory.memoryWindow', { name: name })}
{operation}
</div>
<div className="rb:flex rb:items-center rb:gap-3">
<Button type="primary" ghost className="rb:h-6! rb:px-2! rb:leading-5.5!" onClick={goBack}>
<img src={logoutIcon} className="rb:w-4 rb:h-4" />
{t('common.return')}
</Button>
{extra}
</div>
</Header>
);
};
export default PageHeader;

98
web/src/views/UserMemoryDetail/pages/ExplicitDetail.tsx
View File

@@ -7,7 +7,8 @@
import { type FC, useEffect, useState, useRef } from 'react'
import { useTranslation } from 'react-i18next'
import { useParams } from 'react-router-dom'
import { Skeleton, Row, Col, Flex } from 'antd'
import { Skeleton, Row, Col, Flex, DatePicker, Pagination } from 'antd'
import type { Dayjs } from 'dayjs'
import * as echarts from 'echarts'
import 'echarts-wordcloud'
@@ -41,6 +42,7 @@ export interface SemanticMemory {
/** Combined API response containing both memory categories. */
interface Data {
total: number;
episodic_memories: EpisodicMemory[];
semantic_memories: SemanticMemory[]
}
@@ -71,7 +73,19 @@ const ExplicitDetail: FC = () => {
/** Keeps a stable reference to the ECharts instance for cleanup. */
const chartInstance = useRef<echarts.ECharts | null>(null)
const [loading, setLoading] = useState<boolean>(false)
const [data, setData] = useState<Data>({ episodic_memories: [], semantic_memories: [] })
const [data, setData] = useState<Data>({ episodic_memories: [], semantic_memories: [], total: 0 })
const [dateRange, setDateRange] = useState<[Dayjs | null, Dayjs | null] | null>(null)
const [page, setPage] = useState(1)
const PAGE_SIZE = 10
const filteredEpisodic = dateRange?.[0] && dateRange?.[1]
? data.episodic_memories.filter(item => {
const ts = item.created_at
return ts >= dateRange[0]!.startOf('day').valueOf() && ts <= dateRange[1]!.endOf('day').valueOf()
})
: data.episodic_memories
const pagedEpisodic = filteredEpisodic.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE)
/* Fetch data whenever the route user ID changes. */
useEffect(() => {
@@ -131,35 +145,77 @@ const ExplicitDetail: FC = () => {
})
return () => { chartInstance.current?.dispose(); chartInstance.current = null }
}, [data.semantic_memories])
/* Redraw the word cloud when the container dimensions change. */
useEffect(() => {
const target = wordCloudRef.current?.parentElement
if (!target) return
const observer = new ResizeObserver(() => {
if (!chartInstance.current) return
chartInstance.current.resize()
chartInstance.current.setOption({ series: [{ type: 'wordCloud' }] })
})
observer.observe(target)
return () => {
observer.disconnect()
chartInstance.current?.dispose();
chartInstance.current = null
}
}, [])
return (
<Row gutter={12} className="rb:h-full!">
<Col span={12} className="rb:h-full!">
<RbCard
title={t('explicitDetail.episodic_memories')}
title={() => <span className="rb:font-[MiSans-Bold] rb:font-bold">{t('explicitDetail.episodic_memories')}</span>}
extra={<span className="rb:text-[#5B6167]">{t('table.totalRecords', { total: data.total })}</span>}
headerType="borderless"
headerClassName="rb:min-h-[50px]! rb:font-[MiSans-Bold] rb:font-bold"
bodyClassName="rb:p-3! rb:pt-0! rb:h-[calc(100%-50px)] rb:overflow-y-auto!"
headerClassName="rb:min-h-[50px]!"
bodyClassName="rb:p-3! rb:pt-0! rb:h-[calc(100%-50px)]"
className="rb:h-full!"
>
{loading ?
<Skeleton active />
: data.episodic_memories?.length > 0 ? (
<Flex gap={12} vertical>
{data.episodic_memories.map(item => (
<div
key={item.id}
className="rb:cursor-pointer rb:bg-[#F6F6F6] rb:rounded-xl rb:pt-2.5 rb:px-3 rb:pb-3"
onClick={() => handleView(item)}
>
<Flex align="center" justify="space-between">
<span className="rb:font-medium rb:pl-1">{item.title}</span>
<div className="rb:textt-[#5B6167] rb:leading-4.25 rb:text-[12px]">{formatDateTime(item.created_at)}</div>
</Flex>
<div className="rb:bg-white rb:rounded-lg rb:py-2.5 rb:px-3 rb:mt-2.5 rb:leading-5">{item.content}</div>
</div>
))}
: (
<Flex gap={12} vertical className="rb:h-full!">
<Row gutter={12}>
<Col span={12}>
<DatePicker.RangePicker
value={dateRange}
onChange={(val) => { setDateRange(val); setPage(1) }}
allowClear
/>
</Col>
</Row>
<div className="rb:max-h-[calc(100%-92px)] rb:overflow-y-auto">
{pagedEpisodic.length > 0 ? pagedEpisodic.map(item => (
<div
key={item.id}
className="rb:cursor-pointer rb:bg-[#F6F6F6] rb:rounded-xl rb:pt-2.5 rb:px-3 rb:pb-3"
onClick={() => handleView(item)}
>
<Flex align="center" justify="space-between">
<span className="rb:font-medium rb:pl-1">{item.title}</span>
<div className="rb:text-[#5B6167] rb:leading-4.25 rb:text-[12px]">{formatDateTime(item.created_at)}</div>
</Flex>
<div className="rb:bg-white rb:rounded-lg rb:py-2.5 rb:px-3 rb:mt-2.5 rb:leading-5">{item.content}</div>
</div>
)) : <Empty />}
</div>
{filteredEpisodic.length > PAGE_SIZE && (
<Pagination
current={page}
pageSize={PAGE_SIZE}
total={filteredEpisodic.length}
onChange={setPage}
size="small"
showSizeChanger={true}
showQuickJumper={true}
className="rb:mt-1!"
/>
)}
</Flex>
) : <Empty />
)
}
</RbCard>
</Col>

2
web/src/views/UserMemoryDetail/pages/GraphDetail.tsx
View File

@@ -104,7 +104,7 @@ const GraphDetail = forwardRef<GraphDetailRef>((_props, ref) => {
<Space size={12}>
<Button
className="rb:px-2! rb:gap-0.5!"
icon={<div className="rb:size-4 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/common/return.svg')]"></div>}
icon={<div className="rb:bg-[url('@/assets/images/workflow/return.svg')] rb:size-4 rb:bg-cover"></div>}
onClick={() => navigate(-1)}
>
{t('common.return')}

2
web/src/views/UserMemoryDetail/pages/WorkingDetail.tsx
View File

@@ -197,7 +197,7 @@ const WorkingDetail: FC = () => {
</RbCard>
</Col>
{selected && <>
<Col flex="auto" className="rb:h-full!">
<Col flex="1" className="rb:h-full!">
<RbCard
title={selected.title}
headerType="borderless"

2
web/src/views/UserMemoryDetail/pages/index.tsx
View File

@@ -106,7 +106,7 @@ const Detail: FC = () => {
}
<Button
className="rb:px-2! rb:gap-0.5!"
icon={<div className="rb:size-4 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/common/return.svg')]"></div>}
icon={<div className="rb:bg-[url('@/assets/images/workflow/return.svg')] rb:size-4 rb:bg-cover"></div>}
onClick={handleGoBack}
>
{t('common.return')}

2
web/src/views/Workflow/components/Chat/Runtime.tsx
View File

@@ -137,7 +137,7 @@ const Runtime: FC<{ item: ChatItem; index: number;}> = ({
key: vo.node_id,
label: <div className={clsx("rb:flex rb:justify-between rb:items-center", getStatus(vo.status))}>
<div className="rb:flex rb:items-center rb:gap-1 rb:flex-1">
{vo.icon && <img src={vo.icon} className="rb:size-4" />}
{vo.icon && <div className={`rb:size-4 rb:bg-cover ${vo.icon}`} />}
<div className="rb:wrap-break-word rb:line-clamp-1">{vo.node_name}</div>
</div>
<span>

6
web/src/views/Workflow/components/Editor/nodes/VariableNode.tsx
View File

@@ -45,11 +45,7 @@ const VariableComponent: React.FC<{ nodeKey: NodeKey; data: Suggestion }> = ({
{data.isContext ? (
<span style={{ fontSize: '12px', marginRight: '4px' }}>📄</span>
) : data.group !== 'CONVERSATION' ? (
<img
src={data.nodeData?.icon}
style={{ width: '12px', height: '12px', marginRight: '4px' }}
alt=""
/>
<div className={`rb:size-4 rb:mr-1 rb:bg-cover ${data.nodeData?.icon}`} />
) : null}
{!data.isContext && data.group !== 'CONVERSATION' && (
<>

6
web/src/views/Workflow/components/Editor/plugin/AutocompletePlugin.tsx
View File

@@ -288,11 +288,7 @@ const AutocompletePlugin: FC<{ options: Suggestion[], enableJinja2?: boolean }>
return (
<div key={nodeId}>
<Flex align="center" gap={4} className="rb:px-3! rb:text-[12px] rb:py-1.25! rb:font-medium rb:text-[#5B6167]">
{nodeIcon && <img
src={nodeIcon}
className="rb:size-3"
alt=""
/>}
{nodeIcon && <div className={`rb:size-3 rb:bg-cover ${nodeIcon}`} />}
{nodeName}
</Flex>
{nodeOptions.map((option) => {

4
web/src/views/Workflow/components/NodeLibrary.tsx
View File

@@ -49,7 +49,7 @@ const NodeLibrary: FC<{ collapsed: boolean; handleToggle: () => void }> = ({ col
e.dataTransfer.setData('application/json', JSON.stringify(node));
}}
>
<img src={node.icon} className="rb:size-6 rb:cursor-pointer" />
<div className={`rb:size-6 rb:cursor-pointer rb:bg-cover ${node.icon}`} />
</div>
</Tooltip>
))
@@ -77,7 +77,7 @@ const NodeLibrary: FC<{ collapsed: boolean; handleToggle: () => void }> = ({ col
e.dataTransfer.setData('application/json', JSON.stringify(node));
}}
>
<img src={node.icon} className="rb:size-6" />
<div className={`rb:size-6 rb:bg-cover ${node.icon}`} />
<span className="rb:font-medium rb:text-[12px] rb:leading-4">{t(`workflow.${node.type}`)}</span>
</Flex>
))}

2
web/src/views/Workflow/components/Nodes/AddNode.tsx
View File

@@ -151,7 +151,7 @@ const AddNode: ReactShapeConfig['component'] = ({ node, graph }) => {
e.currentTarget.style.background = 'white';
}}
>
<img src={nodeType.icon} className="rb:w-4 rb:h-4" />
<div className={`rb:size-4 rb:bg-cover ${nodeType.icon}`} />
<span style={{ fontSize: '14px' }}>{t(`workflow.${nodeType.type}`)}</span>
</div>
))}

2
web/src/views/Workflow/components/Nodes/ConditionNode.tsx
View File

@@ -52,7 +52,7 @@ const ConditionNode: ReactShapeConfig['component'] = ({ node }) => {
})}>
<NodeTools node={node} />
<Flex align="center" gap={8} className="rb:flex-1">
<img src={data.icon} className="rb:size-6" />
<div className={`rb:size-6 rb:bg-cover ${data.icon}`} />
<div className="rb:wrap-break-word rb:line-clamp-1">{data.name ?? t(`workflow.${data.type}`)}</div>
</Flex>

2
web/src/views/Workflow/components/Nodes/LoopNode.tsx
View File

@@ -126,7 +126,7 @@ const LoopNode: ReactShapeConfig['component'] = ({ node, graph }) => {
})}>
<NodeTools node={node} />
<Flex align="center" gap={8} className="rb:flex-1">
<img src={data.icon} className="rb:size-6" />
<div className={`rb:size-6 rb:bg-cover ${data.icon}`} />
<div className="rb:wrap-break-word rb:line-clamp-1">{data.name ?? t(`workflow.${data.type}`)}</div>
</Flex>
<div className="rb:mt-3 rb:min-h-[calc(100%-36px)] rb:w-full rb:bg-[radial-gradient(circle,#939AB1_1px,#F0F3F8_1px)] rb:shadow-[0px_2px_4px_0px_rgba(23,23,25,0.03)] rb:rounded-[10px] rb:bg-size-[12px_12px]"></div>

2
web/src/views/Workflow/components/Nodes/NormalNode.tsx
View File

@@ -16,7 +16,7 @@ const NormalNode: ReactShapeConfig['component'] = ({ node }) => {
})}>
<NodeTools node={node} />
<Flex align="center" gap={8} className="rb:flex-1">
<img src={data.icon} className="rb:size-6" />
<div className={`rb:size-6 rb:bg-cover ${data.icon}`} />
<div className="rb:wrap-break-word rb:line-clamp-1">{data.name ?? t(`workflow.${data.type}`)}</div>
</Flex>

54
web/src/views/Workflow/components/PortClickHandler.tsx
View File

@@ -5,7 +5,7 @@
* @Last Modified time: 2026-03-30 15:14:02
*/
import { useEffect, useState } from 'react';
import { Popover } from 'antd';
import { Flex, Popover } from 'antd';
import { useTranslation } from 'react-i18next';
import { nodeLibrary, graphNodeLibrary, edgeAttrs, nodeWidth } from '../constant';
@@ -286,21 +286,16 @@ const PortClickHandler: React.FC<PortClickHandlerProps> = ({ graph }) => {
};
const content = (
<div style={{ maxHeight: '300px', overflowY: 'auto', minWidth: `${nodeWidth}px` }}>
{nodeLibrary.map((category, categoryIndex) => {
<Flex vertical gap={16} className="rb:max-h-[300px] rb:overflow-y-auto rb:p-3" style={{ minWidth: `${nodeWidth}px` }}>
{nodeLibrary.map((category) => {
const sourceNodeData = sourceNode?.getData();
const isChildOfLoop = sourceNodeData?.cycle && graph?.getNodes().find((n: any) => n.getData()?.id === sourceNodeData.cycle && n.getData()?.type === 'loop');
const isChildOfIteration = sourceNodeData?.cycle && graph?.getNodes().find((n: any) => n.getData()?.id === sourceNodeData.cycle && n.getData()?.type === 'iteration');
let filteredNodes;
if (isChildOfLoop) {
// Use same filtering as AddNode for child nodes of loop, but allow break
filteredNodes = category.nodes.filter(nodeType => !['start', 'end', 'loop', 'cycle-start', 'iteration'].includes(nodeType.type));
} else if (isChildOfIteration) {
// Filter out loop and iteration nodes for children of iteration nodes, but allow break
if (isChildOfLoop || isChildOfIteration) {
filteredNodes = category.nodes.filter(nodeType => !['start', 'end', 'loop', 'cycle-start', 'iteration'].includes(nodeType.type));
} else {
// Original filtering for non-loop child nodes
filteredNodes = category.nodes.filter(nodeType =>
nodeType.type !== 'start' && nodeType.type !== 'cycle-start' && nodeType.type !== 'break'
);
@@ -310,36 +305,27 @@ const PortClickHandler: React.FC<PortClickHandlerProps> = ({ graph }) => {
return (
<div key={category.category}>
{categoryIndex > 0 && <div style={{ height: '1px', background: '#f0f0f0', margin: '4px 0' }} />}
<div style={{ padding: '4px 12px', fontSize: '12px', color: '#999', fontWeight: 'bold' }}>
<div className="rb:font-semibold rb:mb-2 rb:text-[12px] rb:leading-4.5 rb:pl-1">
{t(`workflow.${category.category}`)}
</div>
{filteredNodes.map((nodeType) => (
<div
key={nodeType.type}
style={{
padding: '8px 12px',
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
gap: '8px',
}}
onClick={() => handleNodeSelect(nodeType)}
onMouseEnter={(e) => {
e.currentTarget.style.background = '#f0f8ff';
}}
onMouseLeave={(e) => {
e.currentTarget.style.background = 'white';
}}
>
<img src={nodeType.icon} className="rb:w-4 rb:h-4" />
<span style={{ fontSize: '14px' }}>{t(`workflow.${nodeType.type}`)}</span>
</div>
))}
<Flex gap={6} vertical>
{filteredNodes.map((nodeType) => (
<Flex
key={nodeType.type}
align="center"
gap={8}
className="rb:rounded-xl rb:p-2! rb:border rb:border-[#EBEBEB] rb:cursor-pointer rb:hover:border rb:hover:border-[#171719]!"
onClick={() => handleNodeSelect(nodeType)}
>
<div className={`rb:size-6 rb:bg-cover ${nodeType.icon}`} />
<span className="rb:font-medium rb:text-[12px] rb:leading-4">{t(`workflow.${nodeType.type}`)}</span>
</Flex>
))}
</Flex>
</div>
);
})}
</div>
</Flex>
);
if (!tempElement) return null;

12
web/src/views/Workflow/components/Properties/VariableSelect.tsx
View File

@@ -73,11 +73,7 @@ const VariableSelect: FC<VariableSelectProps> = ({
>
{filterOption.nodeData?.icon && filterOption.nodeData?.name && (
<>
<img
src={filterOption.nodeData.icon}
style={{ width: '12px', height: '12px', marginRight: '4px' }}
alt=""
/>
<div className={`rb:size-3 rb:mr-1 rb:bg-cover ${filterOption.nodeData.icon}`} />
{filterOption.nodeData.name}
<span className="rb:text-[#DFE4ED] rb:mx-0.5">/</span>
</>
@@ -111,11 +107,7 @@ const VariableSelect: FC<VariableSelectProps> = ({
*/
const groupedOptions = Object.entries(groupedSuggestions).map(([_nodeId, suggestions]) => ({
label: <Flex align="center" gap={4}>
{suggestions[0].nodeData.icon && <img
src={suggestions[0].nodeData.icon}
className="rb:size-3"
alt=""
/>}
{suggestions[0].nodeData.icon && <div className={`rb:size-3 ${suggestions[0].nodeData.icon}`} />}
{suggestions[0].nodeData.name}
</Flex>,
options: suggestions.map(s => ({

2
web/src/views/Workflow/components/Properties/index.tsx
View File

@@ -474,7 +474,7 @@ const Properties: FC<PropertiesProps> = ({
label: t(`workflow.${category.category}`),
options: category.nodes.filter(item => !['cycle-start', 'break'].includes(item.type)).map(node => ({
label: <div className="rb:flex rb:items-center rb:gap-2 rb:flex-1">
<img src={node.icon} className="rb:size-3.5" />
<div className={`rb:size-3.5 rb:bg-cover ${node.icon}`} />
<div className="rb:wrap-break-word rb:line-clamp-1">{t(`workflow.${node.type}`)}</div>
</div>,
value: node.type

74
web/src/views/Workflow/constant.ts
View File

@@ -13,28 +13,6 @@ import NoteNode from './components/Nodes/NoteNode';
import type { PortMetadata, GroupMetadata } from '@antv/x6/lib/model/port';
import type { ReactShapeConfig } from '@antv/x6-react-shape';
// Import workflow icons
import startIcon from '@/assets/images/workflow/start.svg';
import endIcon from '@/assets/images/workflow/end.svg';
import llmIcon from '@/assets/images/workflow/llm.svg';
import ragIcon from '@/assets/images/workflow/rag.svg';
import parameterExtractionIcon from '@/assets/images/workflow/parameter_extraction.svg';
import conditionIcon from '@/assets/images/workflow/condition.svg';
import iterationIcon from '@/assets/images/workflow/iteration.svg';
import loopIcon from '@/assets/images/workflow/loop.svg';
import aggregatorIcon from '@/assets/images/workflow/aggregator.svg';
import httpRequestIcon from '@/assets/images/workflow/http_request.svg';
import toolsIcon from '@/assets/images/workflow/tools.svg';
import codeExecutionIcon from '@/assets/images/workflow/code_execution.svg';
import templateRenderingIcon from '@/assets/images/workflow/template_rendering.svg';
import questionClassifierIcon from '@/assets/images/workflow/question-classifier.svg'
import breakIcon from '@/assets/images/workflow/break.svg'
import assignerIcon from '@/assets/images/workflow/assigner.svg'
import memoryReadIcon from '@/assets/images/workflow/memory-read.svg'
import memoryWriteIcon from '@/assets/images/workflow/memory-write.svg'
import unknownIcon from '@/assets/images/workflow/unknown.svg'
import documentExtractorIcon from '@/assets/images/workflow/document-extractor.svg'
import { memoryConfigListUrl } from '@/api/memory'
import type { NodeLibrary } from './types'
@@ -46,7 +24,7 @@ export const nodeLibrary: NodeLibrary[] = [
{
category: "coreNode",
nodes: [
{ type: "start", icon: startIcon,
{ type: "start", icon: 'rb:bg-[url("@/assets/images/workflow/start.svg")]',
config: {
variables: {
type: 'define',
@@ -87,7 +65,7 @@ export const nodeLibrary: NodeLibrary[] = [
}
},
{
type: "end", icon: endIcon,
type: "end", icon: 'rb:bg-[url("@/assets/images/workflow/end.svg")]',
config: {
output: {
type: 'editor'
@@ -100,7 +78,7 @@ export const nodeLibrary: NodeLibrary[] = [
{
category: "aiAndCognitiveProcessing",
nodes: [
{ type: "llm", icon: llmIcon,
{ type: "llm", icon: 'rb:bg-[url("@/assets/images/workflow/llm.svg")]',
config: {
model_id: {
type: 'define',
@@ -154,7 +132,7 @@ export const nodeLibrary: NodeLibrary[] = [
}
}
},
{ type: "knowledge-retrieval", icon: ragIcon,
{ type: "knowledge-retrieval", icon: 'rb:bg-[url("@/assets/images/workflow/rag.svg")]',
config: {
query: {
type: 'variableList',
@@ -164,7 +142,7 @@ export const nodeLibrary: NodeLibrary[] = [
}
}
},
{ type: "parameter-extractor", icon: parameterExtractionIcon,
{ type: "parameter-extractor", icon: 'rb:bg-[url("@/assets/images/workflow/parameter_extraction.svg")]',
config: {
model_id: {
type: 'modelSelect',
@@ -191,7 +169,7 @@ export const nodeLibrary: NodeLibrary[] = [
{
category: "cognitiveUpgrading",
nodes: [
{ type: "memory-read", icon: memoryReadIcon,
{ type: "memory-read", icon: 'rb:bg-[url("@/assets/images/workflow/memory-read.svg")]',
config: {
message: {
type: 'editor',
@@ -214,7 +192,7 @@ export const nodeLibrary: NodeLibrary[] = [
}
}
},
{ type: "memory-write", icon: memoryWriteIcon,
{ type: "memory-write", icon: 'rb:bg-[url("@/assets/images/workflow/memory-write.svg")]',
config: {
message: {
type: 'editor',
@@ -240,7 +218,7 @@ export const nodeLibrary: NodeLibrary[] = [
{
category: "flowControl",
nodes: [
{ type: "if-else", icon: conditionIcon,
{ type: "if-else", icon: 'rb:bg-[url("@/assets/images/workflow/condition.svg")]',
config: {
cases: {
type: 'caseList',
@@ -253,7 +231,7 @@ export const nodeLibrary: NodeLibrary[] = [
}
}
},
{ type: "question-classifier", icon: questionClassifierIcon,
{ type: "question-classifier", icon: 'rb:bg-[url("@/assets/images/workflow/question-classifier.svg")]',
config: {
model_id: {
type: 'modelSelect',
@@ -277,7 +255,7 @@ export const nodeLibrary: NodeLibrary[] = [
}
}
},
{ type: "iteration", icon: iterationIcon,
{ type: "iteration", icon: 'rb:bg-[url("@/assets/images/workflow/iteration.svg")]',
config: {
input: {
type: 'variableList',
@@ -310,7 +288,7 @@ export const nodeLibrary: NodeLibrary[] = [
}
},
},
{ type: "loop", icon: loopIcon,
{ type: "loop", icon: 'rb:bg-[url("@/assets/images/workflow/loop.svg")]',
config: {
cycle_vars: {
type: 'cycleVarsList',
@@ -333,9 +311,10 @@ export const nodeLibrary: NodeLibrary[] = [
},
}
},
{ type: "cycle-start", icon: startIcon },
{ type: "break", icon: breakIcon },
{ type: "var-aggregator", icon: aggregatorIcon,
{ type: "cycle-start", icon: 'rb:bg-[url("@/assets/images/workflow/start.svg")]'},
{ type: "break", icon: 'rb:bg-[url("@/assets/images/workflow/break.svg")]'},
{
type: "var-aggregator", icon: 'rb:bg-[url("@/assets/images/workflow/aggregator.svg")]',
config: {
group: {
type: 'switch',
@@ -350,7 +329,7 @@ export const nodeLibrary: NodeLibrary[] = [
}
}
},
{ type: "assigner", icon: assignerIcon,
{ type: "assigner", icon: 'rb:bg-[url("@/assets/images/workflow/assigner.svg")]',
config: {
assignments: {
type: 'assignmentList',
@@ -363,7 +342,7 @@ export const nodeLibrary: NodeLibrary[] = [
{
category: "externalInteraction",
nodes: [
{ type: "http-request", icon: httpRequestIcon,
{ type: "http-request", icon: 'rb:bg-[url("@/assets/images/workflow/http_request.svg")]',
config: {
method: {
type: 'select',
@@ -423,7 +402,7 @@ export const nodeLibrary: NodeLibrary[] = [
}
}
},
{ type: "tool", icon: toolsIcon,
{ type: "tool", icon: 'rb:bg-[url("@/assets/images/workflow/tools.svg")]',
config: {
tool_id: {
type: 'cascader'
@@ -433,7 +412,7 @@ export const nodeLibrary: NodeLibrary[] = [
}
}
},
{ type: "code", icon: codeExecutionIcon,
{ type: "code", icon: 'rb:bg-[url("@/assets/images/workflow/code_execution.svg")]',
config: {
input_variables: {
type: 'inputList',
@@ -459,7 +438,7 @@ export const nodeLibrary: NodeLibrary[] = [
},
}
},
{ type: "jinja-render", icon: templateRenderingIcon,
{ type: "jinja-render", icon: 'rb:bg-[url("@/assets/images/workflow/template_rendering.svg")]',
config: {
mapping: {
type: 'mappingList',
@@ -474,7 +453,7 @@ export const nodeLibrary: NodeLibrary[] = [
},
}
},
{ type: "document-extractor", icon: documentExtractorIcon,
{ type: "document-extractor", icon: 'rb:bg-[url("@/assets/images/workflow/document-extractor.svg")]',
config: {
file_selector: {
type: 'variableList',
@@ -527,7 +506,8 @@ export const THEME_MAP: Record<string, { outer: string; title: string; bg: strin
}
export const notesConfig = {
type: "notes", icon: templateRenderingIcon,
type: "notes",
icon: 'rb:bg-[url("@/assets/images/workflow/unknown.svg")]',
config: {
text: {
type: 'define',
@@ -555,11 +535,11 @@ export const notesConfig = {
}
export const unknownNode = {
type: 'unknown',
icon: unknownIcon
icon: 'rb:bg-[url("@/assets/images/workflow/unknown.svg")]'
}
export const noteNode = {
type: 'notes',
icon: unknownIcon
icon: 'rb:bg-[url("@/assets/images/workflow/unknown.svg")]'
}
export const nodeWidth = 240;
@@ -702,7 +682,7 @@ const defaultPortGroup = {
body: {
width: 1,
height: 8,
x: -1,
x: 0.75,
magnet: true,
stroke: port_color,
strokeWidth: edge_width,
@@ -738,7 +718,7 @@ const leftPortGroup = {
body: {
width: 1,
height: 8,
x: -1,
x: -1.75,
y: -4,
magnet: true,
stroke: port_color,

2
web/src/views/Workflow/index.tsx
View File

@@ -68,7 +68,7 @@ const Workflow = forwardRef<WorkflowRef, { onFeaturesLoad?: (features: FeaturesC
{/* 右侧画布区域 */}
<div
className={clsx(`rb:fixed rb:top-18.5 rb:bottom-2.5 rb:left-0 rb:right-0 rb:transition-all`)}
className={clsx(`rb:fixed rb:top-16 rb:bottom-0 rb:left-0 rb:right-0 rb:transition-all`)}
onDrop={onDrop}
onDragOver={onDragOver}
>