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; onChange: (key: string) => void;
/** Optional extra class name for the container */ /** Optional extra class name for the container */
className?: string; className?: string;
variant?: 'outline' | 'borderless'
} }
/** Button-style tab switcher — renders tabs as pill-shaped buttons with active highlight */ /** 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 ( return (
<Flex align="center" gap={8} className={className || ''}> <Flex align="center" gap={8} className={className || ''}>
{items.map((tab) => ( {items.map((tab) => (
@@ -35,8 +36,9 @@ const BtnTabs: FC<BtnTabsProps> = ({ items, activeKey, onChange, className }) =>
key={tab.key} key={tab.key}
onClick={() => onChange(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', { 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-[#F6F6F6]': activeKey !== tab.key && variant === 'borderless',
'rb:bg-[#171719] rb:text-white': activeKey === tab.key, 'rb-border rb:bg-white': activeKey !== tab.key && variant === 'outline',
'rb:bg-[#171719] rb:text-white rb:border-[#171719]': activeKey === tab.key,
})} })}
> >
{tab.label} {tab.label}

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

@@ -74,9 +74,9 @@ const ButtonCheckbox: FC<ButtonCheckboxProps> = ({
onClick={handleChange} onClick={handleChange}
> >
{/* Display unchecked icon when not checked */} {/* 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 */} {/* 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} {children}
</Flex> </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 clsx from 'clsx'
import Markdown from '@/components/Markdown' import Markdown from '@/components/Markdown'
import type { ChatContentProps } from './types' 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 { 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) => { const getFileUrl = (file: any) => {
return file.thumbUrl || file.url || (file.originFileObj ? URL.createObjectURL(file.originFileObj) : undefined) return file.thumbUrl || file.url || (file.originFileObj ? URL.createObjectURL(file.originFileObj) : undefined)
@@ -32,6 +35,7 @@ const ChatContent: FC<ChatContentProps> = ({
renderRuntime, renderRuntime,
onSend onSend
}) => { }) => {
const { t } = useTranslation()
// Scroll container reference for controlling auto-scroll to bottom // Scroll container reference for controlling auto-scroll to bottom
const scrollContainerRef = useRef<(HTMLDivElement | null)>(null) const scrollContainerRef = useRef<(HTMLDivElement | null)>(null)
const prevDataLengthRef = useRef(data.length); const prevDataLengthRef = useRef(data.length);
@@ -151,65 +155,101 @@ const ChatContent: FC<ChatContentProps> = ({
} }
if (file.type.includes('video')) { if (file.type.includes('video')) {
return ( return (
<div key={file.url || file.uid} className="rb:inline-block rb:group rb:relative rb:rounded-lg"> <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" /> {/* <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> </div>
) )
} }
if (file.type.includes('audio')) { if (file.type.includes('audio')) {
return ( 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"> <div key={file.url || file.uid} className="rb:w-50">
<audio src={getFileUrl(file)} controls className="rb:max-w-80" /> <AudioPlayer key={file.url || file.uid} src={getFileUrl(file)} />
</div> </div>
) )
} }
return ( 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)}> <Flex
{(file.type.includes('excel') || file.type.includes('spreadsheetml.sheet') || file.type.includes('csv')) key={file.url || file.uid}
? <div align="center"
className="rb:size-10 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/excel.svg')]" gap={10}
></div> 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]"
:(file.type.includes('pdf')) onClick={() => handleDownload(file)}
? <div >
className="rb:size-10 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/pdf.svg')]" <div
></div> className={clsx(
: (file.type.includes('doc') || file.type.includes('docx') || file.type.includes('word') || file.type.includes('wordprocessingml.document')) "rb:size-5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/pdf_disabled.svg')]",
? <div file.type?.includes('pdf')
className="rb:size-10 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/word.svg')]" ? "rb:bg-[url('@/assets/images/file/pdf.svg')]"
></div> : (file.type?.includes('excel') || file.type?.includes('spreadsheetml.sheet'))
: null ? "rb:bg-[url('@/assets/images/file/excel.svg')]"
} : file.type?.includes('csv')
</div> ? "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>} </Flex>}
{/* Message bubble */} {/* 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) // 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), '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 // 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 // User message style
'rb:bg-[#F6F6F6] rb:text-[#212332]': item.role === 'assistant' && (item.content || item.content === '' || typeof renderRuntime === 'function'), 'rb:text-[#212332]': item.role === 'assistant' && (item.content || item.content === '' || typeof renderRuntime === 'function'),
'rb:mt-1.5': labelPosition === 'top', 'rb:mt-1': labelPosition === 'top',
'rb:mb-1.5': labelPosition === 'bottom', '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]"> {item.meta_data?.reasoning_content &&
<Flex <div className={clsx("rb:mb-4 rb-border rb:rounded-xl rb:px-4 rb:pt-4 rb:bg-white", {
align="center" 'rb:hover:bg-[#F6F6F6] rb:w-64': !isReasoningExpanded(index)
justify="space-between" })}>
className="rb:text-[#5B6167] rb:font-medium rb:cursor-pointer rb:pb-2!" <Flex
onClick={() => toggleReasoning(index)} align="center"
> justify="space-between"
<span>{t('memoryConversation.reasoning_content')}</span> className="rb:font-medium rb:pb-4!"
<div >
className={clsx("rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/common/arrow_up.svg')]", { <span>{t('memoryConversation.reasoning_content')}</span>
'rb:rotate-180': !isReasoningExpanded(index), <Flex
})} align="center"
></div> justify="center"
</Flex> className={clsx("rb:size-6.5 rb:cursor-pointer rb-border rb:rounded-lg", {
{isReasoningExpanded(index) && <Markdown content={item.meta_data.reasoning_content} />} 'rb:hover:bg-[#F6F6F6]!': isReasoningExpanded(index)
</div>} })}
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.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)} {item.subContent && renderRuntime && renderRuntime(item, index)}
{/* Render message content using Markdown component */} {/* Render message content using Markdown component */}
@@ -222,44 +262,42 @@ const ChatContent: FC<ChatContentProps> = ({
>{question}</Button> >{question}</Button>
))} ))}
</Flex>} </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]"> {item.meta_data?.citations && item.meta_data?.citations.length > 0 &&
<div className="rb:text-[12px] rb:text-[#5B6167] rb:font-medium">{t('memoryConversation.citations')}</div> <Flex vertical gap={4} className="rb:mt-1! rb:pt-3! rb-border-t rb:mb-2!">
{item.meta_data?.citations?.map((citation, idx) => ( <div className="rb:font-medium">{t('memoryConversation.citations')}</div>
<Button {item.meta_data?.citations?.map((citation, idx) => (
type="link" <div
key={idx} key={idx}
size="small" className="rb:text-[#155EEF] rb:leading-5 rb:underline rb:cursor-pointer"
className="rb:text-[12px]!" onClick={() => {
onClick={() => { const params = new URLSearchParams({ documentId: citation.document_id, parentId: citation.knowledge_id });
const params = new URLSearchParams({ documentId: citation.document_id, parentId: citation.knowledge_id }); window.open(`/#/knowledge-base/${citation.knowledge_id}/DocumentDetails?${params}`, '_blank');
window.open(`/#/knowledge-base/${citation.knowledge_id}/DocumentDetails?${params}`, '_blank'); }}
}} >{citation.file_name}</div>
>{citation.file_name}</Button> ))}
))} </Flex>
</div>} }
</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 && <> {item.meta_data?.audio_url && <>
<Divider className="rb:my-3!" /> {playingIndex !== item.meta_data?.audio_url && item.meta_data?.audio_status === 'pending'
<Space size={12} className="rb:pb-2 rb:pl-1"> ? <Spin />
{playingIndex !== item.meta_data?.audio_url && item.meta_data?.audio_status === 'pending' : playingIndex !== item.meta_data?.audio_url
? <Spin />
: playingIndex !== item.meta_data?.audio_url
? <SoundOutlined className={clsx("rb:cursor-pointer rb:size-5.5", { ? <SoundOutlined className={clsx("rb:cursor-pointer rb:size-5.5", {
'rb:text-[#FF5D34]': item.meta_data?.audio_status === 'error', '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) '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)} /> })} onClick={() => handlePlay(item.meta_data?.audio_url!, item.meta_data?.audio_status)} />
: <div : <div
className="rb:size-5.5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/audio_ing.gif')]" 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)} onClick={() => handlePlay(item.meta_data?.audio_url!, item.meta_data?.audio_status)}
/> />
} }
</Space>
</>} </>}
</div>
{/* Bottom label (such as timestamp, username, etc.) */}
{labelPosition === 'bottom' &&
<div className="rb:text-[#5B6167] rb:text-[12px] rb:leading-4 rb:font-regular"> <div className="rb:text-[#5B6167] rb:text-[12px] rb:leading-4 rb:font-regular">
{labelFormat(item)} {labelFormat(item)}
</div> </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 { Outlet } from 'react-router-dom';
import { useEffect, type FC } from 'react'; import { useEffect, type FC } from 'react';
import { Layout } from 'antd';
import { useUser } from '@/store/user'; import { useUser } from '@/store/user';
@@ -35,10 +36,10 @@ const BasicAuthLayout: FC = () => {
}, [getUserInfo]); }, [getUserInfo]);
return ( return (
<div className="rb:relative rb:min-h-screen rb:w-screen"> <Layout className="rb:min-h-screen!">
{/* Render child routes without additional UI */} {/* Render child routes without additional UI */}
<Outlet /> <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>, 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>, 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>, 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>, p: ({ children, ...props }: any) => <p className="rb:mb-2" {...props}>{children}</p>,
strong: ({ children, ...props }: any) => <strong className="rb:font-bold" {...props}>{children}</strong>, strong: ({ children, ...props }: any) => <strong className="rb:font-bold" {...props}>{children}</strong>,
em: ({ children, ...props }: any) => <em className="rb:italic" {...props}>{children}</em>, 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} />, audio: ({ src, ...props }: any) => <AudioBlock node={{ children: [{ properties: { src: src || '' } }] }} {...props} />,
a: ({ href, children, ...props }: any) => <Link href={href || '#'} {...props}>{children}</Link>, a: ({ href, children, ...props }: any) => <Link href={href || '#'} {...props}>{children}</Link>,
button: ({ children }: any) => <RbButton node={{ children }}>{[children]}</RbButton>, 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>, 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-[#D9D9D9]" {...props}>{children}</tr>, tr: ({ children, ...props }: any) => <tr className="rb:border rb:border-[#EBEBEB]" {...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>, 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-[#D9D9D9] rb:px-2 rb:py-1 rb:text-left" {...props}>{children}</td>, 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) => { input: ({ children, ...props }: any) => {
switch (props.type) { switch (props.type) {
case 'color': case 'color':
@@ -122,6 +122,7 @@ const components = {
select: ({ children, ...props }: any) => <Select style={{width: '100%'}} {...props}>{children}</Select>, select: ({ children, ...props }: any) => <Select style={{width: '100%'}} {...props}>{children}</Select>,
textarea: ({ children, ...props }: any) => <Input.TextArea {...props}>{children}</Input.TextArea>, textarea: ({ children, ...props }: any) => <Input.TextArea {...props}>{children}</Input.TextArea>,
form: ({ children, ...props }: any) => <Form {...props}>{children}</Form>, 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> = ({ 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); const logo = getListLogoUrl(item.provider, item.logo as string);
return ( 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} />}
<div className={`rb:flex-1 rb:text-ellipsis rb:overflow-hidden rb:whitespace-nowrap ${fontClassName}`}>{item.name}</div> <div className={`rb:flex-1 rb:text-ellipsis rb:overflow-hidden rb:whitespace-nowrap ${fontClassName}`}>{item.name}</div>
</Flex> </Flex>
); );
@@ -75,7 +75,7 @@ const ModelSelect: FC<ModelSelectProps> = ({
return ( return (
<Flex align="center" gap={8}> <Flex align="center" gap={8}>
<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> <span className="rb:wrap-break-word rb:line-clamp-1">{data.name as string}</span>
</Flex> </Flex>
{data.capability?.length > 0 && ( {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 */} {/* Use custom render or default card layout */}
{itemRender ? itemRender(option) : ( {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, 'rb:m-[0_auto] rb:mb-3': !block,
})} />} })} />}
<div> <div>

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

@@ -44,7 +44,7 @@ const RbModal: FC<ModalProps> = ({
{...props} {...props}
> >
{/* Scrollable content container */} {/* 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} {children}
</div> </div>
</Modal> </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, initialData,
emptySize = 160, emptySize = 160,
emptyText, emptyText,
isScroll = false, isScroll = true,
scrollX, scrollX,
scrollY, scrollY,
currentPageKey = 'page', currentPageKey = 'page',

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

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

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

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

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

@@ -149,6 +149,9 @@ export const lightTheme: ThemeConfig = {
}, },
Segmented: { Segmented: {
trackBg: '#E1E2E7', 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 { .ant-pagination .ant-pagination-item.ant-pagination-item-active {
font-weight: 400; 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 { .ant-modal .ant-modal-content {
padding: 24px; padding: 24px;
@@ -409,4 +416,8 @@ body {
.upload-block, .upload-block,
.upload-block.ant-upload-wrapper .ant-upload-select { .upload-block.ant-upload-wrapper .ant-upload-select {
display: block; 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"> <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"> <Button type="primary" ghost onClick={handleModelConfig} className="rb:group">
{modelLogo {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 : defaultModel?.name
? <div className="rb:size-4 rb:bg-[url('@/assets/images/application/model.svg')]"></div> : null} ? <div className="rb:size-4 rb:bg-[url('@/assets/images/application/model.svg')]"></div> : null}
{defaultModel?.name || t('application.chooseModel')} {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 clsx from 'clsx';
import styles from '../index.module.css' 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 type { Application, ApplicationModalRef } from '@/views/ApplicationManagement/types';
import ApplicationModal from '@/views/ApplicationManagement/components/ApplicationModal' import ApplicationModal from '@/views/ApplicationManagement/components/ApplicationModal'
import type { CopyModalRef, AgentRef, ClusterRef, WorkflowRef, FeaturesConfigForm } from '../types' import type { CopyModalRef, AgentRef, ClusterRef, WorkflowRef, FeaturesConfigForm } from '../types'
@@ -38,10 +34,10 @@ const sharingTabKeys = [
* Menu icon mapping * Menu icon mapping
*/ */
const menuIcons: Record<string, string> = { const menuIcons: Record<string, string> = {
edit: editIcon, edit: "rb:bg-[url('@/assets/images/common/edit_bold.svg')]",
copy: copyIcon, copy: "rb:bg-[url('@/assets/images/copy_hover.svg')]",
export: exportIcon, export: "rb:bg-[url('@/assets/images/export_hover.svg')]",
delete: deleteIcon delete: "rb:bg-[url('@/assets/images/common/delete_red_big.svg')]"
} }
/** /**
@@ -70,7 +66,7 @@ interface ConfigHeaderProps {
* Configuration header component * Configuration header component
* Displays application name, tabs, and action buttons * Displays application name, tabs, and action buttons
*/ */
const ConfigHeader: FC<ConfigHeaderProps> = ({ const ConfigHeader: FC<ConfigHeaderProps> = ({
application, activeTab, handleChangeTab, refresh, application, activeTab, handleChangeTab, refresh,
workflowRef, workflowRef,
appRef, appRef,
@@ -172,7 +168,8 @@ const ConfigHeader: FC<ConfigHeaderProps> = ({
const formatMenuItems = useMemo(() => { const formatMenuItems = useMemo(() => {
const items = (application?.type !== 'multi_agent' ? ['edit', 'copy', 'export', 'delete'] : ['edit', 'copy', 'delete']).map(key => ({ const items = (application?.type !== 'multi_agent' ? ['edit', 'copy', 'export', 'delete'] : ['edit', 'copy', 'delete']).map(key => ({
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}`), label: t(`common.${key}`),
})) }))
return items return items
@@ -182,7 +179,7 @@ const ConfigHeader: FC<ConfigHeaderProps> = ({
appRef?.current?.handleSaveFeaturesConfig?.(value) appRef?.current?.handleSaveFeaturesConfig?.(value)
onFeaturesChange?.(value) onFeaturesChange?.(value)
}, [appRef, onFeaturesChange]) }, [appRef, onFeaturesChange])
return ( return (
<> <>
<PageHeader <PageHeader
@@ -250,9 +247,9 @@ const ConfigHeader: FC<ConfigHeaderProps> = ({
</Popover> </Popover>
</Flex> </Flex>
: <Flex justify="flex-end"> : <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 <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> ></div>
{t('common.return')} {t('common.return')}
</Flex> </Flex>

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

@@ -171,12 +171,13 @@ const ModelConfigModal = forwardRef<ModelConfigModalRef, ModelConfigModalProps>(
key={item.key} key={item.key}
name={item.key} name={item.key}
label={t(`application.${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 <RbSlider
max={item.max} max={item.max}
step={item.step} step={item.step}
min={item.min} min={item.min}
isInput={true}
/> />
</FormItem> </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 { Flex } from 'antd';
import Card from './Card'; 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 */ /** Quick operation items configuration */
const quickOperations = [ const quickOperations = [
@@ -37,12 +33,11 @@ const bgStyleList = [
'rb:bg-[rgba(77,168,255,0.1)]' 'rb:bg-[rgba(77,168,255,0.1)]'
] ]
/** Icon mapping for quick operations */ const quickOperationIconsClassNames: Record<string, string> = {
const quickOperationIcons: {[key: string]: string | undefined} = { createNewApplication: 'rb:bg-[url("@/assets/images/home/application.svg")]',
createNewApplication: applicationIcon, createNewKnowledge: 'rb:bg-[url("@/assets/images/home/knowledge.svg")]',
createNewKnowledge: knowledgeIcon, memoryConversation: 'rb:bg-[url("@/assets/images/home/memoryConversation.svg")]',
memoryConversation: memoryConversationIcon, helpCenter: 'rb:bg-[url("@/assets/images/menu/helpCenter_active.svg")]'
helpCenter: helpCenterIcon
} }
const QuickOperation:FC = () => { const QuickOperation:FC = () => {
const { t, i18n } = useTranslation() const { t, i18n } = useTranslation()
@@ -76,7 +71,7 @@ const QuickOperation:FC = () => {
{quickOperations.map((item, index) => ( {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)}> <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]"> <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> <div>
<div className="rb:text-[14px] rb:leading-5 rb:font-medium">{t(`dashboard.${item.key}`)}</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 { useTranslation } from 'react-i18next'
import { Skeleton, Flex } from 'antd'; 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 activityEmpty from '@/assets/images/home/ActivityEmpty.svg'
import Empty from '@/components/Empty'; import Empty from '@/components/Empty';
import Card from './Card'; import Card from './Card';
@@ -49,10 +45,10 @@ interface RecentActivities {
/** Activity list configuration */ /** Activity list configuration */
const activityList = [ const activityList = [
{ key: 'chunk_count', icon: chunkCountIcon }, { key: 'chunk_count', iconClass: "rb:bg-[url('@/assets/images/home/chunk_count.svg')]" },
{ key: 'statements_count', icon: statementsCountIcon }, { key: 'statements_count', iconClass: "rb:bg-[url('@/assets/images/home/statements_count.svg')]" },
{ key: 'triplet_count', icon: tripletCountIcon }, { key: 'triplet_count', iconClass: "rb:bg-[url('@/assets/images/home/triplet_count.svg')]" },
{ key: 'temporal_count', icon: temporalCountIcon }, { key: 'temporal_count', iconClass: "rb:bg-[url('@/assets/images/home/temporal_count.svg')]" },
] ]
const RecentActivity:FC = () => { const RecentActivity:FC = () => {
@@ -89,7 +85,7 @@ const RecentActivity:FC = () => {
{activityList.map((item) => ( {activityList.map((item) => (
<Flex key={item.key} align="center" justify="space-between" className={clsx("rb:not-italic")}> <Flex key={item.key} align="center" justify="space-between" className={clsx("rb:not-italic")}>
<Flex align="center" gap={20}> <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>
<div className="rb:text-[16px] rb:leading-5.5 rb:font-medium">{t(`dashboard.${item.key}`)}</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"> <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 clsx from 'clsx';
import { Flex } from 'antd'; 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' import type { DashboardData } from '../index'
/** Card configuration with styling */ /** Card configuration with styling */
const list = [ const list = [
{ {
key: 'totalMemoryCapacity', key: 'total_memory',
icon: totalMemoryCapacity,
// value: '45,678',
// trendValue: '12.5%',
// trend: 'up',
// trendDesc: 'comparedToYesterday',
background: 'rb:bg-[url("@/assets/images/home/totalMemoryCapacity.png")] rb:bg-cover rb:bg-no-repeat', background: 'rb:bg-[url("@/assets/images/home/totalMemoryCapacity.png")] rb:bg-cover rb:bg-no-repeat',
}, },
{ {
key: 'application', key: 'total_app',
icon: userMemory,
// value: '32,145',
// trendValue: '12.5%',
// trend: 'down',
// trendDesc: 'comparedToYesterday',
// background: 'linear-gradient( 180deg, #F1FBF5 0%, #F9FDFF 100%)',
}, },
{ {
key: 'knowledgeBaseCount', key: 'total_knowledge',
icon: knowledgeBaseCount,
// value: '13,533',
// trendValue: '15.7%',
// trend: 'up',
// trendDesc: 'thisWeek',
// background: 'linear-gradient( 180deg, #E6F5FE 0%, #FBFDFF 100%)',
}, },
{ {
key: 'apiCallCount', key: 'total_api_call',
icon: apiCallCount,
// value: '856.2k',
// trendValue: '23.1%',
// trend: 'up',
// trendDesc: 'comparedToYesterday',
// background: 'linear-gradient( 180deg, #F8F6F5 0%, #FAFDFF 100%)',
}, },
] ]
/** /**
@@ -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 || ''}`} className={`rb:rounded-2xl rb:bg-[#FFFFFF] rb:py-4 rb:px-3 ${item.background || ''}`}
> >
<div className={clsx("rb:text-[12px] rb:leading-4", { <div className={clsx("rb:text-[12px] rb:leading-4", {
'rb:text-[#FFFFFF]': item.key === 'totalMemoryCapacity', 'rb:text-[#FFFFFF]': item.key === 'total_memory',
'rb:text-[#5B6167]': item.key !== 'totalMemoryCapacity', 'rb:text-[#5B6167]': item.key !== 'total_memory',
})}>{t(`dashboard.${item.key}`)}</div> })}>{t(`dashboard.${item.key}`)}</div>
<div className={clsx("rb:text-[20px] rb:font-bold rb:leading-7 rb:mt-1 rb:font-[MiSans-Bold]", { <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-[#FFFFFF]': item.key === 'total_memory',
// 'rb:text-[#171719]': item.key !== 'totalMemoryCapacity',
})}> })}>
{data?.[item.key as keyof DashboardData] || 0} {data?.[item.key as keyof DashboardData] || 0}
</div> </div>
<Flex align="center" className={clsx('rb:font-medium rb:mt-7.5!', { <Flex align="center" className={clsx('rb:font-medium rb:mt-7.5!', {
'rb:text-[#FFFFFF]': item.key === 'totalMemoryCapacity', 'rb:text-[#FF5D34]': data?.[`${item.key}_change` as keyof DashboardData] && data?.[`${item.key}_change` as keyof DashboardData] < 0,
'rb:text-[#369F21]': item.key !== 'totalMemoryCapacity', '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", { <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_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')]": item.key !== 'totalMemoryCapacity', "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> })}></div>
</Flex> </Flex>
<div className={clsx("rb:text-[12px] rb:leading-4 rb:mt-0.5", { <div className={clsx("rb:text-[12px] rb:leading-4 rb:mt-0.5", {
'rb:text-[#FFFFFF]': item.key === 'totalMemoryCapacity', 'rb:text-[#FFFFFF]': item.key === 'total_memory',
'rb:text-[#5B6167]': item.key !== 'totalMemoryCapacity', 'rb:text-[#5B6167]': item.key !== 'total_memory',
})}> })}>
{t('dashboard.comparedToYesterday')} {t('dashboard.comparedToYesterday')}
</div> </div>

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

@@ -25,14 +25,18 @@ import ApiLineCard from './components/ApiLineCard'
* Dashboard statistics data * Dashboard statistics data
*/ */
export interface DashboardData { export interface DashboardData {
totalMemoryCapacity?: number; total_memory: number;
application?: number; total_app: number;
knowledgeBaseCount?: number; total_knowledge: number;
apiCallCount?: 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 Home = () => {
const [dashboardData, setDashboardData] = useState<DashboardData>({}); const [dashboardData, setDashboardData] = useState<DashboardData>({} as DashboardData);
const [loading, setLoading] = useState({ const [loading, setLoading] = useState({
knowledgeTypeDistribution: true, knowledgeTypeDistribution: true,
}); });
@@ -65,12 +69,7 @@ const Home = () => {
} }
const { storage_type = 'neo4j' } = response || {} const { storage_type = 'neo4j' } = response || {}
const responseData = storage_type === 'neo4j' ? response.neo4j_data : response.rag_data const responseData = storage_type === 'neo4j' ? response.neo4j_data : response.rag_data
setDashboardData({ setDashboardData(responseData as DashboardData)
totalMemoryCapacity: responseData?.total_memory || 0,
application: responseData?.total_app || 0,
knowledgeBaseCount: responseData?.total_knowledge || 0,
apiCallCount: responseData?.total_api_call || 0
})
}) })
} }
/** Fetch knowledge base type distribution */ /** 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 { useTranslation } from 'react-i18next';
import { Flex } from 'antd' 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 { interface QuickAction {
key: string; key: string;
icon: string; iconClass: string;
title: string; title: string;
onClick?: () => void; onClick?: () => void;
} }
@@ -40,50 +36,25 @@ const QuickActions: FC<QuickActionsProps> = ({ onNavigate }) => {
const quickActions: QuickAction[] = [ const quickActions: QuickAction[] = [
{ {
key: 'model-management', key: 'model-management',
icon: modelIcon, iconClass: "rb:bg-[url('@/assets/images/index/model_mgt.svg')]",
title: t('quickActions.modelManagement'), title: t('quickActions.modelManagement'),
onClick: () => onNavigate?.('/model') onClick: () => onNavigate?.('/model')
}, },
{ {
key: 'space-management', key: 'space-management',
icon: spaceIcon, iconClass: "rb:bg-[url('@/assets/images/index/space_mgt.svg')]",
title: t('quickActions.spaceManagement'), title: t('quickActions.spaceManagement'),
onClick: () => onNavigate?.('/space') onClick: () => onNavigate?.('/space')
}, },
// {
// key: 'workflow-orchestration',
// icon: workflowIcon,
// title: t('quickActions.workflowOrchestration'),
// onClick: () => onNavigate?.('/workflow')
// },
{ {
key: 'user-management', key: 'user-management',
icon: userIcon, iconClass: "rb:bg-[url('@/assets/images/index/user_mgt.svg')]",
title: t('quickActions.userManagement'), title: t('quickActions.userManagement'),
onClick: () => onNavigate?.('/user-management') 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', key: 'help-center',
icon: helpCenterIcon, iconClass: "rb:bg-[url('@/assets/images/index/help_center.svg')]",
title: t('quickActions.helpCenter'), title: t('quickActions.helpCenter'),
onClick: openHelpCenter onClick: openHelpCenter
} }
@@ -105,7 +76,7 @@ const QuickActions: FC<QuickActionsProps> = ({ onNavigate }) => {
className="rb:cursor-pointer" className="rb:cursor-pointer"
onClick={action.onClick} 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"> <div className="rb:text-[12px] rb:max-w-18.25 rb:text-[#5B6167] rb:text-center rb:leading-3.5">
{action.title} {action.title}
</div> </div>

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

@@ -102,7 +102,7 @@ const Index = () => {
<Row gutter={12}> <Row gutter={12}>
<Col flex="1"> <Col flex="1">
<Flex vertical> <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"> <div className="rb:font-[MiSans-Bold] rb:font-bold rb:text-white rb:text-[18px] rb:leading-7">
{t('index.spaceTitle')} {t('index.spaceTitle')}
</div> </div>

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

@@ -10,9 +10,9 @@
* Supports deep thinking, normal reply, and quick reply modes * 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 { 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 dayjs from 'dayjs'
import type { AnyObject } from 'antd/es/_util/type'; 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 RbCard from '@/components/RbCard/Card';
import styles from './index.module.css' import styles from './index.module.css'
import ResultCard from '@/components/RbCard/ResultCard' import ResultCard from '@/components/RbCard/ResultCard'
import AudioPlayer from '@/views/UserMemoryDetail/components/AudioPlayer'
import VideoPlayer from '@/views/UserMemoryDetail/components/VideoPlayer'
/** Search mode configuration */ /** Search mode configuration */
@@ -92,6 +94,7 @@ export interface LogItem {
result?: string; result?: string;
original_query: string; original_query: string;
index?: number; index?: number;
result_count?: number;
} }
/** /**
@@ -144,6 +147,10 @@ const MemoryConversation: FC = () => {
const handleChange = (value: string) => { const handleChange = (value: string) => {
setSearchSwitch(value) setSearchSwitch(value)
} }
const handleDownload = (file_path?: string) => {
if (!file_path) return
window.open(file_path, '_blank')
}
return ( return (
<> <>
@@ -168,7 +175,7 @@ const MemoryConversation: FC = () => {
</Col> </Col>
</Row> </Row>
<Row gutter={16} className="rb:h-[calc(100%-48px)]!"> <Row gutter={16} className="rb:h-[calc(100%-48px)]!">
<Col span={12}> <Col span={12} className="rb:h-full!">
<RbCard <RbCard
title={t('memoryConversation.conversationContent')} title={t('memoryConversation.conversationContent')}
headerType="borderless" headerType="borderless"
@@ -200,7 +207,7 @@ const MemoryConversation: FC = () => {
</Chat> </Chat>
</RbCard> </RbCard>
</Col> </Col>
<Col span={12}> <Col span={12} className="rb:h-full!">
<RbCard <RbCard
title={t('memoryConversation.memoryConversationAnalysis')} title={t('memoryConversation.memoryConversationAnalysis')}
headerType="borderless" headerType="borderless"
@@ -235,7 +242,7 @@ const MemoryConversation: FC = () => {
<ContentWrapper key={vo.id}> <ContentWrapper key={vo.id}>
<> <>
<div className="rb:font-medium rb:text-[#212332]">{vo.id}. {vo.question}</div> <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> </ContentWrapper>
))} ))}
@@ -247,7 +254,7 @@ const MemoryConversation: FC = () => {
<> <>
<div className="rb:font-medium rb:text-[#212332]">{key}</div> <div className="rb:font-medium rb:text-[#212332]">{key}</div>
{(log.data as Record<string, string[]>)[key].map((item, index) => ( {(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> </ContentWrapper>
@@ -257,16 +264,16 @@ const MemoryConversation: FC = () => {
? <ContentWrapper> ? <ContentWrapper>
<div className="rb:font-medium rb:text-[#212332] rb:mb-2">{log.query}</div> <div className="rb:font-medium rb:text-[#212332] rb:mb-2">{log.query}</div>
{(log.raw_results.reranked_results as AnyObject)?.communities?.length > 0 && <> {(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> <div className="rb:font-medium rb:text-[#212332]">{t('memoryConversation.communities')}</div>
<ul className='rb:mt-2 rb:text-[12px] rb:text-[#5B6167] rb:list-disc rb:pl-4'> <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) => ( {((log.raw_results.reranked_results as AnyObject)?.communities as { content: string }[]).map((item, index: number) => (
<li key={index}>{item.content}</li> <li key={index}>{item.content}</li>
))} ))}
</ul> </ul>
</>} </>}
{(log.raw_results.reranked_results as AnyObject)?.summaries?.length > 0 && <> {(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> <div className="rb:font-medium rb:text-[#212332]">{t('memoryConversation.summaries')}</div>
<ul className='rb:mt-2 rb:text-[12px] rb:text-[#5B6167] rb:list-disc rb:pl-4'> <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) => ( {((log.raw_results.reranked_results as AnyObject)?.summaries as { content: string }[]).map((item, index: number) => (
<li key={index}>{item.content}</li> <li key={index}>{item.content}</li>
))} ))}
@@ -280,8 +287,8 @@ const MemoryConversation: FC = () => {
: log.type === 'verification' : log.type === 'verification'
? <ContentWrapper> ? <ContentWrapper>
<div className="rb:font-medium rb:text-[#212332]">{log.query}</div> <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-[#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.result}</div>
</ContentWrapper> </ContentWrapper>
: log.type === 'output_type' : log.type === 'output_type'
? <ContentWrapper> ? <ContentWrapper>
@@ -291,8 +298,8 @@ const MemoryConversation: FC = () => {
: log.type === 'input_summary' && log.raw_results : log.type === 'input_summary' && log.raw_results
? <ContentWrapper> ? <ContentWrapper>
<div className="rb:font-medium rb:text-[#212332] rb:mb-2">{log.query}</div> <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:font-medium rb:text-[#5B6167] rb:mb-2">{log.summary}</div>
<div className='rb:mt-2 rb:text-[12px] rb:text-[#5B6167]'> <div className='rb:mt-2 rb:text-[#5B6167]'>
{typeof log.raw_results === 'string' {typeof log.raw_results === 'string'
? <Markdown content={log.raw_results} /> ? <Markdown content={log.raw_results} />
: <> : <>
@@ -306,7 +313,65 @@ const MemoryConversation: FC = () => {
} }
</div> </div>
</ContentWrapper> </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> </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"> <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}> <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')} {t('common.return')}
</Button> </Button>
{extra} {extra}

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

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

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

@@ -11,19 +11,20 @@
*/ */
import React, { useState, useEffect } from 'react'; 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 { useParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import clsx from 'clsx';
import RbCard from '@/components/RbCard/Card'; import RbCard from '@/components/RbCard/Card';
import { getMemoryReflectionConfig, updateMemoryReflectionConfig, pilotRunMemoryReflectionConfig } from '@/api/memory' import { getMemoryReflectionConfig, updateMemoryReflectionConfig, pilotRunMemoryReflectionConfig } from '@/api/memory'
import type { ConfigForm, Result, ReflexionData, MemoryVerify, QualityAssessment } from './types' import type { ConfigForm, Result, ReflexionData } from './types'
import Tag from '@/components/Tag'
import { useI18n } from '@/store/locale'; import { useI18n } from '@/store/locale';
import SwitchFormItem from '@/components/FormItem/SwitchFormItem' import SwitchFormItem from '@/components/FormItem/SwitchFormItem'
import LabelWrapper from '@/components/FormItem/LabelWrapper' import LabelWrapper from '@/components/FormItem/LabelWrapper'
import DescWrapper from '@/components/FormItem/DescWrapper' import DescWrapper from '@/components/FormItem/DescWrapper'
import ModelSelect from '@/components/ModelSelect'; import ModelSelect from '@/components/ModelSelect';
import BtnTabs from '@/components/BtnTabs'
/** Configuration list */ /** Configuration list */
const configList = [ const configList = [
@@ -91,6 +92,8 @@ const SelfReflectionEngine: React.FC = () => {
const { message } = App.useApp(); const { message } = App.useApp();
const [loading, setLoading] = useState(false) const [loading, setLoading] = useState(false)
const [runLoading, setRunLoading] = 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 [result, setResult] = useState<Result | null>(null)
const { language } = useI18n() const { language } = useI18n()
@@ -158,6 +161,8 @@ const SelfReflectionEngine: React.FC = () => {
}) })
.then((res) => { .then((res) => {
setResult(res as Result) setResult(res as Result)
setExpanded({ conflict: true, quality: true, privacy: true })
setActiveTabMap({})
}) })
.finally(() => { .finally(() => {
setRunLoading(false) setRunLoading(false)
@@ -174,8 +179,8 @@ const SelfReflectionEngine: React.FC = () => {
<RbCard <RbCard
title={t('reflectionEngine.reflectionEngineConfig')} title={t('reflectionEngine.reflectionEngineConfig')}
extra={<Space> extra={<Space>
<Button block onClick={handleReset}>{t('common.reset')}</Button> <Button onClick={handleReset}>{t('common.reset')}</Button>
<Button type="primary" loading={loading} block onClick={handleSave}>{t('common.save')}</Button> <Button type="primary" loading={loading} onClick={handleSave}>{t('common.save')}</Button>
</Space>} </Space>}
headerType="borderless" headerType="borderless"
headerClassName="rb:min-h-[54px]! rb:font-[MiSans-Bold] rb:font-bold" headerClassName="rb:min-h-[54px]! rb:font-[MiSans-Bold] rb:font-bold"
@@ -253,100 +258,110 @@ const SelfReflectionEngine: React.FC = () => {
</RbCard> </RbCard>
</Col> </Col>
<Col span={12} className="rb:h-full!"> <Col span={12} className="rb:h-full!">
<Flex gap={16} vertical className="rb:h-full!"> <RbCard
<RbCard title={t('memoryExtractionEngine.example')}
title={t('memoryExtractionEngine.example')} extra={<Space>
> <Button type="primary" loading={runLoading} disabled={!values?.reflection_enabled} onClick={handleRun}>{t('reflectionEngine.run')}</Button>
<div className="rb:text-[14px] rb:text-[#5B6167] rb:font-regular rb:leading-5 rb:mb-6"> </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')} {t('reflectionEngine.exampleText')}
</div> </div>
<Button type="primary" block loading={runLoading} disabled={!values?.reflection_enabled} onClick={handleRun}>{t('reflectionEngine.run')}</Button> {result && <>
</RbCard> <Flex justify="space-between" className="rb:bg-[#F6F6F6] rb:rounded-xl rb:py-2.5! rb:px-3! rb:leading-5">
{result && <> <span className="rb:font-medium rb:text-[#212332]">{t('reflectionEngine.runTitle')}</span>
<RbCard <span className="rb:text-[#5B6167]">{t(`reflectionEngine.baseline`)}: {t(`reflectionEngine.${result.baseline}`)}</span>
title={t('reflectionEngine.runTitle')} </Flex>
>
<div {result.reflexion_data.length > 0 &&
className="rb:flex rb:gap-4 rb:justify-start rb:text-[#5B6167] rb:text-[14px] rb:leading-5 rb:mb-3" <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 }))}>
<div className="rb:whitespace-nowrap rb:w-45 rb:font-medium">{t(`reflectionEngine.baseline`)}</div> {t('reflectionEngine.conflictDetection')}
<div className='rb:flex-inline rb:text-left rb:py-px rb:rounded rb:text-[#5B6167] rb:flex-1'> <div className={clsx("rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/common/arrow_up.svg')] rb:transition-transform", {
{result.baseline} 'rb:rotate-180': !expanded.conflict,
</div> })}></div>
</div> </Flex>
</RbCard>
{result.reflexion_data.length > 0 && ( {expanded.conflict && result.reflexion_data.map((item, index) => (
<RbCard <div key={index} className="rb:bg-white rb:rounded-xl rb:py-2.5! rb:px-3!">
title={t('reflectionEngine.conflictDetection')} <BtnTabs
> className="rb:mb-3!"
<Space size={12} direction="vertical" className="rb:w-full"> variant="outline"
{result.reflexion_data.map((item, index) => ( activeKey={activeTabMap[index] ?? 'reason'}
<div key={index} className="rb:bg-[#F0F3F8] rb:px-3 rb:py-2.5 rb:rounded-md rb:text-[12px]"> items={['reason', 'solution'].map(key => ({
{['reason', 'solution'].map(key => ( label: t(`reflectionEngine.${key}`),
<div key
key={key} }))}
className="rb:flex rb:gap-4 rb:justify-start rb:text-[14px] rb:leading-5 rb:mb-3" onChange={(key) => setActiveTabMap(prev => ({ ...prev, [index]: key }))}
> />
<div className="rb:whitespace-nowrap rb:w-45 rb:font-medium">{t(`reflectionEngine.${key}`)}</div> <div className="rb:leading-5.5">{item[(activeTabMap[index] ?? 'reason') as keyof ReflexionData]}</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>
))}
</div> </div>
))} ))}
</Space>
</RbCard> </Flex>
)} }
{result.quality_assessments.length > 0 && ( {result.quality_assessments.length > 0 &&
<RbCard <Flex vertical gap={12} className="rb:bg-[#F6F6F6] rb:rounded-xl rb:py-2.5! rb:px-3! rb:leading-5.5">
title={t('reflectionEngine.qualityAssessment')} <Flex justify="space-between" className="rb:font-medium rb:text-[#212332] rb:cursor-pointer" onClick={() => setExpanded(p => ({ ...p, quality: !p.quality }))}>
> {t('reflectionEngine.qualityAssessment')}
{result.quality_assessments.map((item, index) => ( <div className={clsx("rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/common/arrow_up.svg')] rb:transition-transform", {
<div key={index} className="rb:bg-[#F0F3F8] rb:px-3 rb:py-2.5 rb:rounded-md rb:text-[12px]"> 'rb:rotate-180': !expanded.quality,
{['score', 'summary'].map(key => ( })}></div>
<div </Flex>
key={key}
className="rb:flex rb:gap-4 rb:justify-start rb:text-[14px] rb:leading-5 rb:mb-3" {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 className="rb:whitespace-nowrap rb:w-45 rb:font-medium">{t(`reflectionEngine.qualityAssessmentObj.${key}`)}</div> <div>
<div className='rb:flex-inline rb:text-left rb:py-px rb:rounded rb:text-[#5B6167] rb:flex-1'> <span className="rb:font-medium rb:text-[#212332] rb:leading-5 rb:mr-4.5">{t(`reflectionEngine.qualityAssessmentObj.score`)}</span>
{item[key as keyof QualityAssessment]} <span className="rb:font-[MiSans-Bold] rb:font-bold rb:text-[#155EEF] rb:leading-5">{item.score}</span>
</div>
</div> </div>
))} <Divider className="rb:my-3!" />
</div> <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>
</RbCard> </div>
)} ))}
{result.memory_verifies.length > 0 && (
<RbCard </Flex>
title={t('reflectionEngine.privacyAudit')} }
> {result.memory_verifies.length > 0 &&
{result.memory_verifies.map((item, index) => ( <Flex vertical gap={12} className="rb:bg-[#F6F6F6] rb:rounded-xl rb:py-2.5! rb:px-3! rb:leading-5.5">
<div key={index} className="rb:bg-[#F0F3F8] rb:px-3 rb:py-2.5 rb:rounded-md rb:text-[12px]"> <Flex justify="space-between" className="rb:font-medium rb:text-[#212332] rb:cursor-pointer" onClick={() => setExpanded(p => ({ ...p, privacy: !p.privacy }))}>
{['has_privacy', 'privacy_types', 'summary'].map(key => ( {t('reflectionEngine.privacyAudit')}
<div <div className={clsx("rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/common/arrow_up.svg')] rb:transition-transform", {
key={key} 'rb:rotate-180': !expanded.privacy,
className="rb:flex rb:gap-4 rb:justify-start rb:text-[14px] rb:leading-5 rb:mb-3" })}></div>
> </Flex>
<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'> {expanded.privacy && result.memory_verifies.map((item, index) => (
{key === 'has_privacy' <div key={index} className="rb:bg-white rb:rounded-xl rb:py-2.5! rb:px-3!">
? <Tag color={item[key as keyof MemoryVerify] ? 'success' : 'error'}>{t(`reflectionEngine.privacyAuditObj.${item[key as keyof MemoryVerify]}`)}</Tag> <div>
: key === 'privacy_types' ? (item[key as keyof MemoryVerify] as string[]).join('、') <span className="rb:font-medium rb:text-[#212332] rb:leading-5 rb:mr-4.5">{t(`reflectionEngine.privacyAuditObj.has_privacy`)}</span>
: item[key as keyof MemoryVerify] <span className="rb:font-[MiSans-Bold] rb:font-bold rb:text-[#155EEF] rb:leading-5">{item.has_privacy}</span>
}
</div>
</div> </div>
))}
</div> <Divider className="rb:my-3!" />
))}
</RbCard> <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>
</>}
</Flex> <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> </Col>
</Row> </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 { type FC, useRef, useState, useEffect } from 'react'
import { useTranslation } from 'react-i18next' 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 Card from '@/views/ApplicationConfig/components/Card'
import type { import type {
@@ -22,6 +22,7 @@ import type {
import Empty from '@/components/Empty' import Empty from '@/components/Empty'
import ToolModal from './ToolModal' import ToolModal from './ToolModal'
import { getToolMethods, getToolDetail } from '@/api/tools' import { getToolMethods, getToolDetail } from '@/api/tools'
import Tag from '@/components/Tag'
/** /**
* Tool List Component Props * 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) const mcpFilterItem = (methods as any[]).find(vo => vo.name === item.operation)
return { return {
...item, ...item,
is_active: (toolDetail as any).is_active,
label: mcpFilterItem?.description, label: mcpFilterItem?.description,
method_id: mcpFilterItem?.method_id, method_id: mcpFilterItem?.method_id,
value: mcpFilterItem?.name, value: mcpFilterItem?.name,
@@ -74,6 +76,7 @@ const ToolList: FC<ToolListProps> = ({value, onChange}) => {
const builtinFilterItem = (methods as any[]).find(vo => vo.name === item.operation) const builtinFilterItem = (methods as any[]).find(vo => vo.name === item.operation)
return { return {
...item, ...item,
is_active: (toolDetail as any).is_active,
label: builtinFilterItem?.description, label: builtinFilterItem?.description,
method_id: builtinFilterItem?.method_id, method_id: builtinFilterItem?.method_id,
value: builtinFilterItem?.name, value: builtinFilterItem?.name,
@@ -84,6 +87,7 @@ const ToolList: FC<ToolListProps> = ({value, onChange}) => {
// Single method: Use first method // Single method: Use first method
return { return {
...item, ...item,
is_active: (toolDetail as any).is_active,
label: (methods as any[])[0]?.description, label: (methods as any[])[0]?.description,
method_id: (methods as any[])[0]?.method_id, method_id: (methods as any[])[0]?.method_id,
value: (methods as any[])[0]?.name, 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) const customFilterItem = (methods as any[]).find(vo => vo.method_id === item.operation)
return { return {
...item, ...item,
is_active: (toolDetail as any).is_active,
label: customFilterItem?.name, label: customFilterItem?.name,
method_id: customFilterItem?.method_id, method_id: customFilterItem?.method_id,
value: customFilterItem?.name, value: customFilterItem?.name,
@@ -129,7 +134,10 @@ const ToolList: FC<ToolListProps> = ({value, onChange}) => {
* @param tool - Tool to add * @param tool - Tool to add
*/ */
const updateTools = (tool: ToolOption) => { const updateTools = (tool: ToolOption) => {
const list = [...toolList, tool] const list = [...toolList, {
...tool,
is_active: true,
}]
setToolList(list) setToolList(list)
onChange && onChange(list) onChange && onChange(list)
} }
@@ -146,42 +154,35 @@ const ToolList: FC<ToolListProps> = ({value, onChange}) => {
} }
return ( return (
<Card <Card
title={t('application.toolConfiguration')} title={t('application.toolConfiguration')}
extra={ extra={
<Button style={{ padding: '0 8px', height: '24px' }} onClick={handleAddTool}> <Button className="rb:h-6! rb:py-0! rb:px-2! rb:rounded-md! rb:text-[#21233" onClick={handleAddTool}>+ {t('application.addTool')}</Button>
+ {t('application.addTool')}
</Button>
} }
> >
{/* Show empty state or tool list */}
{toolList.length === 0 {toolList.length === 0
? <Empty size={88} /> ? <div className="rb-border rb:rounded-xl rb:pt-4 rb:pb-6"><Empty size={88} /></div>
: : <Flex vertical gap={12}>
<List {toolList.map((item, index) => (
grid={{ gutter: 12, column: 1 }} <Flex key={index} align="center" justify="space-between" className="rb:py-2.5! rb:pl-4! rb:pr-3! rb-border rb:rounded-lg">
dataSource={toolList} <div>
renderItem={(item, index) => ( <div className="rb:font-medium rb:leading-4">
<List.Item> {item.label}
{/* 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> </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 <ToolModal
ref={toolModalRef} ref={toolModalRef}
refresh={updateTools} refresh={updateTools}

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

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

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 { LoadingOutlined } from '@ant-design/icons';
import { useParams } from 'react-router-dom' 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 RbCard from '@/components/RbCard/Card'
import type { Data } from './types' import type { Data } from './types'
import { import {
@@ -34,12 +32,12 @@ import ConversationMemory from './components/ConversationMemory'
*/ */
interface TitleProps { interface TitleProps {
title: string title: string
icon: string iconClassName: string
} }
/** Collapsible section title */ /** 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!"> <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} {title}
</Flex> </Flex>
) )
@@ -143,7 +141,7 @@ const Rag: FC = () => {
<> <>
<Title <Title
title={t('userMemory.aboutMe')} 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"> <div className="rb:bg-[#F6F6F6] rb:rounded-lg rb:py-2.5 rb:px-3 rb:mb-4">
{loading.summary {loading.summary
@@ -160,7 +158,7 @@ const Rag: FC = () => {
<> <>
<Title <Title
title={t('userMemory.memoryInsight')} 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"> <div className="rb:bg-[#F6F6F6] rb:rounded-lg rb:py-2.5 rb:px-3">
{loading.insight {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 { type FC, useEffect, useState, useRef } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { useParams } from 'react-router-dom' 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 * as echarts from 'echarts'
import 'echarts-wordcloud' import 'echarts-wordcloud'
@@ -41,6 +42,7 @@ export interface SemanticMemory {
/** Combined API response containing both memory categories. */ /** Combined API response containing both memory categories. */
interface Data { interface Data {
total: number;
episodic_memories: EpisodicMemory[]; episodic_memories: EpisodicMemory[];
semantic_memories: SemanticMemory[] semantic_memories: SemanticMemory[]
} }
@@ -71,7 +73,19 @@ const ExplicitDetail: FC = () => {
/** Keeps a stable reference to the ECharts instance for cleanup. */ /** Keeps a stable reference to the ECharts instance for cleanup. */
const chartInstance = useRef<echarts.ECharts | null>(null) const chartInstance = useRef<echarts.ECharts | null>(null)
const [loading, setLoading] = useState<boolean>(false) 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. */ /* Fetch data whenever the route user ID changes. */
useEffect(() => { useEffect(() => {
@@ -131,35 +145,77 @@ const ExplicitDetail: FC = () => {
}) })
return () => { chartInstance.current?.dispose(); chartInstance.current = null } return () => { chartInstance.current?.dispose(); chartInstance.current = null }
}, [data.semantic_memories]) }, [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 ( return (
<Row gutter={12} className="rb:h-full!"> <Row gutter={12} className="rb:h-full!">
<Col span={12} className="rb:h-full!"> <Col span={12} className="rb:h-full!">
<RbCard <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" headerType="borderless"
headerClassName="rb:min-h-[50px]! rb:font-[MiSans-Bold] rb:font-bold" headerClassName="rb:min-h-[50px]!"
bodyClassName="rb:p-3! rb:pt-0! rb:h-[calc(100%-50px)] rb:overflow-y-auto!" bodyClassName="rb:p-3! rb:pt-0! rb:h-[calc(100%-50px)]"
className="rb:h-full!" className="rb:h-full!"
> >
{loading ? {loading ?
<Skeleton active /> <Skeleton active />
: data.episodic_memories?.length > 0 ? ( : (
<Flex gap={12} vertical> <Flex gap={12} vertical className="rb:h-full!">
{data.episodic_memories.map(item => ( <Row gutter={12}>
<div <Col span={12}>
key={item.id} <DatePicker.RangePicker
className="rb:cursor-pointer rb:bg-[#F6F6F6] rb:rounded-xl rb:pt-2.5 rb:px-3 rb:pb-3" value={dateRange}
onClick={() => handleView(item)} onChange={(val) => { setDateRange(val); setPage(1) }}
> allowClear
<Flex align="center" justify="space-between"> />
<span className="rb:font-medium rb:pl-1">{item.title}</span> </Col>
<div className="rb:textt-[#5B6167] rb:leading-4.25 rb:text-[12px]">{formatDateTime(item.created_at)}</div> </Row>
</Flex> <div className="rb:max-h-[calc(100%-92px)] rb:overflow-y-auto">
<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> {pagedEpisodic.length > 0 ? pagedEpisodic.map(item => (
</div> <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> </Flex>
) : <Empty /> )
} }
</RbCard> </RbCard>
</Col> </Col>

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

@@ -104,7 +104,7 @@ const GraphDetail = forwardRef<GraphDetailRef>((_props, ref) => {
<Space size={12}> <Space size={12}>
<Button <Button
className="rb:px-2! rb:gap-0.5!" 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)} onClick={() => navigate(-1)}
> >
{t('common.return')} {t('common.return')}

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

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

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

@@ -106,7 +106,7 @@ const Detail: FC = () => {
} }
<Button <Button
className="rb:px-2! rb:gap-0.5!" 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} onClick={handleGoBack}
> >
{t('common.return')} {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, key: vo.node_id,
label: <div className={clsx("rb:flex rb:justify-between rb:items-center", getStatus(vo.status))}> 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"> <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 className="rb:wrap-break-word rb:line-clamp-1">{vo.node_name}</div>
</div> </div>
<span> <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 ? ( {data.isContext ? (
<span style={{ fontSize: '12px', marginRight: '4px' }}>📄</span> <span style={{ fontSize: '12px', marginRight: '4px' }}>📄</span>
) : data.group !== 'CONVERSATION' ? ( ) : data.group !== 'CONVERSATION' ? (
<img <div className={`rb:size-4 rb:mr-1 rb:bg-cover ${data.nodeData?.icon}`} />
src={data.nodeData?.icon}
style={{ width: '12px', height: '12px', marginRight: '4px' }}
alt=""
/>
) : null} ) : null}
{!data.isContext && data.group !== 'CONVERSATION' && ( {!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 ( return (
<div key={nodeId}> <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]"> <Flex align="center" gap={4} className="rb:px-3! rb:text-[12px] rb:py-1.25! rb:font-medium rb:text-[#5B6167]">
{nodeIcon && <img {nodeIcon && <div className={`rb:size-3 rb:bg-cover ${nodeIcon}`} />}
src={nodeIcon}
className="rb:size-3"
alt=""
/>}
{nodeName} {nodeName}
</Flex> </Flex>
{nodeOptions.map((option) => { {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)); 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> </div>
</Tooltip> </Tooltip>
)) ))
@@ -77,7 +77,7 @@ const NodeLibrary: FC<{ collapsed: boolean; handleToggle: () => void }> = ({ col
e.dataTransfer.setData('application/json', JSON.stringify(node)); 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> <span className="rb:font-medium rb:text-[12px] rb:leading-4">{t(`workflow.${node.type}`)}</span>
</Flex> </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'; 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> <span style={{ fontSize: '14px' }}>{t(`workflow.${nodeType.type}`)}</span>
</div> </div>
))} ))}

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

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

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

@@ -5,7 +5,7 @@
* @Last Modified time: 2026-03-30 15:14:02 * @Last Modified time: 2026-03-30 15:14:02
*/ */
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { Popover } from 'antd'; import { Flex, Popover } from 'antd';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { nodeLibrary, graphNodeLibrary, edgeAttrs, nodeWidth } from '../constant'; import { nodeLibrary, graphNodeLibrary, edgeAttrs, nodeWidth } from '../constant';
@@ -286,21 +286,16 @@ const PortClickHandler: React.FC<PortClickHandlerProps> = ({ graph }) => {
}; };
const content = ( const content = (
<div style={{ maxHeight: '300px', overflowY: 'auto', minWidth: `${nodeWidth}px` }}> <Flex vertical gap={16} className="rb:max-h-[300px] rb:overflow-y-auto rb:p-3" style={{ minWidth: `${nodeWidth}px` }}>
{nodeLibrary.map((category, categoryIndex) => { {nodeLibrary.map((category) => {
const sourceNodeData = sourceNode?.getData(); const sourceNodeData = sourceNode?.getData();
const isChildOfLoop = sourceNodeData?.cycle && graph?.getNodes().find((n: any) => n.getData()?.id === sourceNodeData.cycle && n.getData()?.type === 'loop'); 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'); const isChildOfIteration = sourceNodeData?.cycle && graph?.getNodes().find((n: any) => n.getData()?.id === sourceNodeData.cycle && n.getData()?.type === 'iteration');
let filteredNodes; let filteredNodes;
if (isChildOfLoop) { if (isChildOfLoop || isChildOfIteration) {
// 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
filteredNodes = category.nodes.filter(nodeType => !['start', 'end', 'loop', 'cycle-start', 'iteration'].includes(nodeType.type)); filteredNodes = category.nodes.filter(nodeType => !['start', 'end', 'loop', 'cycle-start', 'iteration'].includes(nodeType.type));
} else { } else {
// Original filtering for non-loop child nodes
filteredNodes = category.nodes.filter(nodeType => filteredNodes = category.nodes.filter(nodeType =>
nodeType.type !== 'start' && nodeType.type !== 'cycle-start' && nodeType.type !== 'break' nodeType.type !== 'start' && nodeType.type !== 'cycle-start' && nodeType.type !== 'break'
); );
@@ -310,36 +305,27 @@ const PortClickHandler: React.FC<PortClickHandlerProps> = ({ graph }) => {
return ( return (
<div key={category.category}> <div key={category.category}>
{categoryIndex > 0 && <div style={{ height: '1px', background: '#f0f0f0', margin: '4px 0' }} />} <div className="rb:font-semibold rb:mb-2 rb:text-[12px] rb:leading-4.5 rb:pl-1">
<div style={{ padding: '4px 12px', fontSize: '12px', color: '#999', fontWeight: 'bold' }}>
{t(`workflow.${category.category}`)} {t(`workflow.${category.category}`)}
</div> </div>
{filteredNodes.map((nodeType) => ( <Flex gap={6} vertical>
<div {filteredNodes.map((nodeType) => (
key={nodeType.type} <Flex
style={{ key={nodeType.type}
padding: '8px 12px', align="center"
cursor: 'pointer', gap={8}
display: 'flex', className="rb:rounded-xl rb:p-2! rb:border rb:border-[#EBEBEB] rb:cursor-pointer rb:hover:border rb:hover:border-[#171719]!"
alignItems: 'center', onClick={() => handleNodeSelect(nodeType)}
gap: '8px', >
}} <div className={`rb:size-6 rb:bg-cover ${nodeType.icon}`} />
onClick={() => handleNodeSelect(nodeType)} <span className="rb:font-medium rb:text-[12px] rb:leading-4">{t(`workflow.${nodeType.type}`)}</span>
onMouseEnter={(e) => { </Flex>
e.currentTarget.style.background = '#f0f8ff'; ))}
}} </Flex>
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>
))}
</div> </div>
); );
})} })}
</div> </Flex>
); );
if (!tempElement) return null; 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 && ( {filterOption.nodeData?.icon && filterOption.nodeData?.name && (
<> <>
<img <div className={`rb:size-3 rb:mr-1 rb:bg-cover ${filterOption.nodeData.icon}`} />
src={filterOption.nodeData.icon}
style={{ width: '12px', height: '12px', marginRight: '4px' }}
alt=""
/>
{filterOption.nodeData.name} {filterOption.nodeData.name}
<span className="rb:text-[#DFE4ED] rb:mx-0.5">/</span> <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]) => ({ const groupedOptions = Object.entries(groupedSuggestions).map(([_nodeId, suggestions]) => ({
label: <Flex align="center" gap={4}> label: <Flex align="center" gap={4}>
{suggestions[0].nodeData.icon && <img {suggestions[0].nodeData.icon && <div className={`rb:size-3 ${suggestions[0].nodeData.icon}`} />}
src={suggestions[0].nodeData.icon}
className="rb:size-3"
alt=""
/>}
{suggestions[0].nodeData.name} {suggestions[0].nodeData.name}
</Flex>, </Flex>,
options: suggestions.map(s => ({ 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}`), label: t(`workflow.${category.category}`),
options: category.nodes.filter(item => !['cycle-start', 'break'].includes(item.type)).map(node => ({ 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"> 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 className="rb:wrap-break-word rb:line-clamp-1">{t(`workflow.${node.type}`)}</div>
</div>, </div>,
value: node.type 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 { PortMetadata, GroupMetadata } from '@antv/x6/lib/model/port';
import type { ReactShapeConfig } from '@antv/x6-react-shape'; 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 { memoryConfigListUrl } from '@/api/memory'
import type { NodeLibrary } from './types' import type { NodeLibrary } from './types'
@@ -46,7 +24,7 @@ export const nodeLibrary: NodeLibrary[] = [
{ {
category: "coreNode", category: "coreNode",
nodes: [ nodes: [
{ type: "start", icon: startIcon, { type: "start", icon: 'rb:bg-[url("@/assets/images/workflow/start.svg")]',
config: { config: {
variables: { variables: {
type: 'define', 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: { config: {
output: { output: {
type: 'editor' type: 'editor'
@@ -100,7 +78,7 @@ export const nodeLibrary: NodeLibrary[] = [
{ {
category: "aiAndCognitiveProcessing", category: "aiAndCognitiveProcessing",
nodes: [ nodes: [
{ type: "llm", icon: llmIcon, { type: "llm", icon: 'rb:bg-[url("@/assets/images/workflow/llm.svg")]',
config: { config: {
model_id: { model_id: {
type: 'define', 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: { config: {
query: { query: {
type: 'variableList', 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: { config: {
model_id: { model_id: {
type: 'modelSelect', type: 'modelSelect',
@@ -191,7 +169,7 @@ export const nodeLibrary: NodeLibrary[] = [
{ {
category: "cognitiveUpgrading", category: "cognitiveUpgrading",
nodes: [ nodes: [
{ type: "memory-read", icon: memoryReadIcon, { type: "memory-read", icon: 'rb:bg-[url("@/assets/images/workflow/memory-read.svg")]',
config: { config: {
message: { message: {
type: 'editor', 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: { config: {
message: { message: {
type: 'editor', type: 'editor',
@@ -240,7 +218,7 @@ export const nodeLibrary: NodeLibrary[] = [
{ {
category: "flowControl", category: "flowControl",
nodes: [ nodes: [
{ type: "if-else", icon: conditionIcon, { type: "if-else", icon: 'rb:bg-[url("@/assets/images/workflow/condition.svg")]',
config: { config: {
cases: { cases: {
type: 'caseList', 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: { config: {
model_id: { model_id: {
type: 'modelSelect', 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: { config: {
input: { input: {
type: 'variableList', 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: { config: {
cycle_vars: { cycle_vars: {
type: 'cycleVarsList', type: 'cycleVarsList',
@@ -333,9 +311,10 @@ export const nodeLibrary: NodeLibrary[] = [
}, },
} }
}, },
{ type: "cycle-start", icon: startIcon }, { type: "cycle-start", icon: 'rb:bg-[url("@/assets/images/workflow/start.svg")]'},
{ type: "break", icon: breakIcon }, { type: "break", icon: 'rb:bg-[url("@/assets/images/workflow/break.svg")]'},
{ type: "var-aggregator", icon: aggregatorIcon, {
type: "var-aggregator", icon: 'rb:bg-[url("@/assets/images/workflow/aggregator.svg")]',
config: { config: {
group: { group: {
type: 'switch', 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: { config: {
assignments: { assignments: {
type: 'assignmentList', type: 'assignmentList',
@@ -363,7 +342,7 @@ export const nodeLibrary: NodeLibrary[] = [
{ {
category: "externalInteraction", category: "externalInteraction",
nodes: [ nodes: [
{ type: "http-request", icon: httpRequestIcon, { type: "http-request", icon: 'rb:bg-[url("@/assets/images/workflow/http_request.svg")]',
config: { config: {
method: { method: {
type: 'select', 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: { config: {
tool_id: { tool_id: {
type: 'cascader' 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: { config: {
input_variables: { input_variables: {
type: 'inputList', 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: { config: {
mapping: { mapping: {
type: 'mappingList', 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: { config: {
file_selector: { file_selector: {
type: 'variableList', type: 'variableList',
@@ -527,7 +506,8 @@ export const THEME_MAP: Record<string, { outer: string; title: string; bg: strin
} }
export const notesConfig = { export const notesConfig = {
type: "notes", icon: templateRenderingIcon, type: "notes",
icon: 'rb:bg-[url("@/assets/images/workflow/unknown.svg")]',
config: { config: {
text: { text: {
type: 'define', type: 'define',
@@ -555,11 +535,11 @@ export const notesConfig = {
} }
export const unknownNode = { export const unknownNode = {
type: 'unknown', type: 'unknown',
icon: unknownIcon icon: 'rb:bg-[url("@/assets/images/workflow/unknown.svg")]'
} }
export const noteNode = { export const noteNode = {
type: 'notes', type: 'notes',
icon: unknownIcon icon: 'rb:bg-[url("@/assets/images/workflow/unknown.svg")]'
} }
export const nodeWidth = 240; export const nodeWidth = 240;
@@ -702,7 +682,7 @@ const defaultPortGroup = {
body: { body: {
width: 1, width: 1,
height: 8, height: 8,
x: -1, x: 0.75,
magnet: true, magnet: true,
stroke: port_color, stroke: port_color,
strokeWidth: edge_width, strokeWidth: edge_width,
@@ -738,7 +718,7 @@ const leftPortGroup = {
body: { body: {
width: 1, width: 1,
height: 8, height: 8,
x: -1, x: -1.75,
y: -4, y: -4,
magnet: true, magnet: true,
stroke: port_color, stroke: port_color,

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

@@ -68,7 +68,7 @@ const Workflow = forwardRef<WorkflowRef, { onFeaturesLoad?: (features: FeaturesC
{/* 右侧画布区域 */} {/* 右侧画布区域 */}
<div <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} onDrop={onDrop}
onDragOver={onDragOver} onDragOver={onDragOver}
> >