feat(web): memory manage & memory detail ui upgrade
This commit is contained in:
zhaoying
@@ -1,8 +1,8 @@
|
||||
/*
|
||||
* @Author: ZhaoYing
|
||||
* @Date: 2026-02-03 17:30:51
|
||||
* @Last Modified by: ZhaoYing
|
||||
* @Last Modified time: 2026-02-03 17:30:51
|
||||
* @Last Modified by: ZhaoYing
|
||||
* @Last Modified time: 2026-03-19 14:06:38
|
||||
*/
|
||||
/**
|
||||
* Card Component
|
||||
@@ -10,11 +10,10 @@
|
||||
*/
|
||||
|
||||
import { type FC, type ReactNode } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import clsx from 'clsx';
|
||||
import { Flex, Space, Tooltip } from 'antd';
|
||||
|
||||
import RbCard from '@/components/RbCard/Card'
|
||||
import down from '@/assets/images/userMemory/down.svg'
|
||||
|
||||
/**
|
||||
* Component props
|
||||
@@ -29,6 +28,7 @@ interface CardProps {
|
||||
className?: string;
|
||||
headerClassName?: string;
|
||||
bodyClassName?: string;
|
||||
extra?: ReactNode;
|
||||
}
|
||||
|
||||
const Card: FC<CardProps> = ({
|
||||
@@ -41,27 +41,33 @@ const Card: FC<CardProps> = ({
|
||||
className,
|
||||
headerClassName,
|
||||
bodyClassName,
|
||||
extra,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
return (
|
||||
<RbCard
|
||||
title={title}
|
||||
subTitle={subTitle}
|
||||
headerType="borderless"
|
||||
extra={type && handleExpand && (
|
||||
<div
|
||||
className="rb:flex rb:items-center rb:text-[14px] rb:text-[#5B6167] rb:cursor-pointer rb:font-regular rb:leading-5"
|
||||
onClick={() => handleExpand(type)}
|
||||
>
|
||||
{expanded ? t('common.foldUp') : t('common.expanded')}
|
||||
<img src={down} className={clsx("rb:w-4 rb:h-4 rb:ml-1", {
|
||||
title={() => <Flex
|
||||
align="center"
|
||||
justify="space-between"
|
||||
className="rb:font-[MiSans-Bold] rb:font-bold rb:cursor-pointer"
|
||||
onClick={type && handleExpand ? () => handleExpand(type) : undefined}
|
||||
>
|
||||
<Space size={4}>
|
||||
{title}
|
||||
{subTitle && <Tooltip title={subTitle}>
|
||||
<div className="rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/common/question.svg')]"></div>
|
||||
</Tooltip>}
|
||||
</Space>
|
||||
{handleExpand && <div
|
||||
className={clsx("rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/common/arrow_up.svg')]", {
|
||||
'rb:rotate-180': !expanded,
|
||||
})} />
|
||||
</div>
|
||||
)}
|
||||
})}
|
||||
></div>}
|
||||
</Flex>}
|
||||
headerType="borderless"
|
||||
className={className}
|
||||
headerClassName={headerClassName}
|
||||
bodyClassName={bodyClassName}
|
||||
headerClassName={`rb:h-[50px]! rb:pb-[12px]! rb:pt-[16px]! rb:leading-[22px]! rb:font-[MiSans-Bold] rb:font-bold rb:text-[16px] ${headerClassName}`}
|
||||
bodyClassName={`rb:px-3! rb:py-0! ${expanded ? 'rb:pb-3!' : 'rb:pb-0!'} ${bodyClassName}`}
|
||||
extra={extra}
|
||||
>
|
||||
{(expanded || !(type && handleExpand)) && children}
|
||||
</RbCard>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
* @Author: ZhaoYing
|
||||
* @Date: 2026-02-03 17:30:11
|
||||
* @Last Modified by: ZhaoYing
|
||||
* @Last Modified time: 2026-03-02 11:41:12
|
||||
* @Last Modified time: 2026-03-19 14:22:20
|
||||
*/
|
||||
/**
|
||||
* Result Component
|
||||
@@ -13,13 +13,13 @@
|
||||
import { type FC, useState } from 'react'
|
||||
import { useParams } from 'react-router-dom'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Space, Button, Progress, Form, Input } from 'antd'
|
||||
import { ExclamationCircleFilled, CheckCircleFilled, ClockCircleOutlined, LoadingOutlined } from '@ant-design/icons'
|
||||
import { Space, Button, Progress, Form, Input, Flex } from 'antd'
|
||||
import { ExclamationCircleFilled, LoadingOutlined } from '@ant-design/icons'
|
||||
import clsx from 'clsx'
|
||||
import ResultCard from './ResultCard'
|
||||
import type { AnyObject } from 'antd/es/_util/type';
|
||||
|
||||
import Card from './Card'
|
||||
import RbCard from '@/components/RbCard/Card'
|
||||
import RbAlert from '@/components/RbAlert'
|
||||
import type { TestResult, OntologyCoverage } from '../types'
|
||||
import { pilotRunMemoryExtractionConfig } from '@/api/memory'
|
||||
@@ -27,6 +27,8 @@ import { type SSEMessage } from '@/utils/stream'
|
||||
import Tag, { type TagProps } from '@/components/Tag'
|
||||
import Markdown from '@/components/Markdown'
|
||||
import { groupDataByType } from '../constant'
|
||||
import Empty from '@/components/Empty'
|
||||
import NoDataIcon from '@/assets/images/empty/noData.png'
|
||||
|
||||
/** Result metric mapping */
|
||||
const resultObj = {
|
||||
@@ -56,7 +58,7 @@ interface ModuleItem {
|
||||
const tagColors: {
|
||||
[key: string]: TagProps['color']
|
||||
} = {
|
||||
pending: 'default',
|
||||
pending: 'warning',
|
||||
processing: 'processing',
|
||||
completed: 'success',
|
||||
failed: 'error'
|
||||
@@ -67,29 +69,55 @@ const initObj = {
|
||||
status: 'pending',
|
||||
result: null
|
||||
}
|
||||
const initialExpanded = {
|
||||
text_preprocessing: false,
|
||||
knowledge_extraction: false,
|
||||
creating_nodes_edges: false,
|
||||
deduplication: false,
|
||||
dataStatistics: false,
|
||||
entityDeduplicationImpact: false,
|
||||
disambiguation: false,
|
||||
coreEntities: false,
|
||||
triplet_samples: false,
|
||||
ontologyCoverage: false,
|
||||
}
|
||||
|
||||
const Result: FC<ResultProps> = ({ loading, handleSave }) => {
|
||||
const { t } = useTranslation();
|
||||
const { id } = useParams()
|
||||
const [runLoading, setRunLoading] = useState(false)
|
||||
const [activeTab, setActiveTab] = useState('processData')
|
||||
const [testResult, setTestResult] = useState<TestResult>({} as TestResult)
|
||||
|
||||
const [coreEntitiesTab, setCoreEntitiesTab] = useState<string | null>(null)
|
||||
const [textPreprocessing, setTextPreprocessing] = useState<ModuleItem>(initObj as ModuleItem)
|
||||
const [textPreprocessingTab, setTextPreprocessingTab] = useState('chunking')
|
||||
const [knowledgeExtraction, setKnowledgeExtraction] = useState<ModuleItem>(initObj as ModuleItem)
|
||||
const [creatingNodesEdges, setCreatingNodesEdges] = useState<ModuleItem>(initObj as ModuleItem)
|
||||
const [deduplication, setDeduplication] = useState<ModuleItem>(initObj as ModuleItem)
|
||||
const [ontologyCoverage, setOntologyCoverage] = useState<OntologyCoverage>({} as OntologyCoverage)
|
||||
|
||||
const [expandedCards, setExpandedCards] = useState<Record<string, boolean>>(initialExpanded)
|
||||
const toggleCard = (key: string) => {
|
||||
console.log('toggleCard', key)
|
||||
setExpandedCards(prev => ({ ...prev, [key]: !prev[key] }))
|
||||
}
|
||||
console.log('expandedCards', expandedCards)
|
||||
|
||||
const [runForm] = Form.useForm()
|
||||
const customText = Form.useWatch(['custom_text'], runForm)
|
||||
|
||||
/** Run pilot test */
|
||||
const handleRun = () => {
|
||||
if(!id) return
|
||||
setActiveTab('processData')
|
||||
setCoreEntitiesTab(null)
|
||||
setTextPreprocessing({...initObj} as ModuleItem)
|
||||
setTextPreprocessingTab('chunking')
|
||||
setKnowledgeExtraction({...initObj} as ModuleItem)
|
||||
setCreatingNodesEdges({...initObj} as ModuleItem)
|
||||
setDeduplication({...initObj} as ModuleItem)
|
||||
setTestResult({} as TestResult)
|
||||
setExpandedCards(initialExpanded)
|
||||
const handleStreamMessage = (list: SSEMessage[]) => {
|
||||
|
||||
list.forEach((data: AnyObject) => {
|
||||
@@ -100,6 +128,7 @@ const Result: FC<ResultProps> = ({ loading, handleSave }) => {
|
||||
status: 'processing',
|
||||
start_at: data.data.time
|
||||
}))
|
||||
toggleCard('text_preprocessing')
|
||||
break
|
||||
case 'text_preprocessing_result': // Text preprocessing in progress
|
||||
setTextPreprocessing(prev => ({
|
||||
@@ -121,6 +150,7 @@ const Result: FC<ResultProps> = ({ loading, handleSave }) => {
|
||||
status: 'processing',
|
||||
start_at: data.data.time
|
||||
}))
|
||||
toggleCard('knowledge_extraction')
|
||||
break
|
||||
case 'knowledge_extraction_result': // Knowledge extraction in progress
|
||||
setKnowledgeExtraction(prev => ({
|
||||
@@ -142,6 +172,7 @@ const Result: FC<ResultProps> = ({ loading, handleSave }) => {
|
||||
status: 'processing',
|
||||
start_at: data.data.time
|
||||
}))
|
||||
toggleCard('creating_nodes_edges')
|
||||
break
|
||||
case 'creating_nodes_edges_result': // Creating nodes and edges in progress
|
||||
setCreatingNodesEdges(prev => ({
|
||||
@@ -163,6 +194,7 @@ const Result: FC<ResultProps> = ({ loading, handleSave }) => {
|
||||
status: 'processing',
|
||||
start_at: data.data.time
|
||||
}))
|
||||
toggleCard('deduplication')
|
||||
break
|
||||
case 'dedup_disambiguation_result': // Deduplication and disambiguation in progress
|
||||
setDeduplication(prev => ({
|
||||
@@ -183,6 +215,15 @@ const Result: FC<ResultProps> = ({ loading, handleSave }) => {
|
||||
case 'result': // Result
|
||||
setTestResult(data.data?.extracted_result)
|
||||
setOntologyCoverage(data.data?.ontology_coverage)
|
||||
setExpandedCards(prev => ({
|
||||
...prev,
|
||||
dataStatistics: true,
|
||||
entityDeduplicationImpact: true,
|
||||
disambiguation: true,
|
||||
coreEntities: true,
|
||||
triplet_samples: true,
|
||||
ontologyCoverage: true,
|
||||
}))
|
||||
break
|
||||
}
|
||||
})
|
||||
@@ -203,9 +244,10 @@ const Result: FC<ResultProps> = ({ loading, handleSave }) => {
|
||||
/** Format status tag */
|
||||
const formatTag = (status: string) => {
|
||||
return (
|
||||
<Tag color={tagColors[status]}>
|
||||
{status === 'pending' && <ClockCircleOutlined className="rb:mr-1" />}
|
||||
<Tag color={tagColors[status]} className="rb:flex! rb:items-center rb:gap-1 rb:bg-white! rb:border-white!">
|
||||
{status === 'pending' && <div className="rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/memory/clock_orange.svg')]"></div>}
|
||||
{status === 'processing' && <LoadingOutlined spin className="rb:mr-1" />}
|
||||
{status === 'completed' && <div className="rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/common/check_green.svg')]"></div>}
|
||||
{t(`memoryExtractionEngine.status.${status}`)}
|
||||
</Tag>
|
||||
)
|
||||
@@ -213,294 +255,411 @@ const Result: FC<ResultProps> = ({ loading, handleSave }) => {
|
||||
/** Format processing time */
|
||||
const formatTime = (data: ModuleItem, color?: string) => {
|
||||
if (typeof data.end_at === 'number' && typeof data.start_at === 'number') {
|
||||
return <div className={`rb:mt-3 rb:text-[${color ?? '#155EEF'}]`}>{t('memoryExtractionEngine.time')}{data.end_at - data.start_at}ms</div>
|
||||
return <div className={`rb:text-[${color ?? '#155EEF'}] rb:mb-0.5`}>{t('memoryExtractionEngine.time')}{data.end_at - data.start_at}ms</div>
|
||||
}
|
||||
return null
|
||||
}
|
||||
/** Convert first character to lowercase */
|
||||
const lowercaseFirst = (str: string) => str.charAt(0).toLowerCase() + str.slice(1)
|
||||
|
||||
return (
|
||||
<Card
|
||||
title={t('memoryExtractionEngine.exampleMemoryExtractionResults')}
|
||||
subTitle={t('memoryExtractionEngine.exampleMemoryExtractionResultsSubTitle')}
|
||||
className="rb:min-h-[calc(100vh-330px)]!"
|
||||
headerClassName="rb:pb-0! rb:pt-4!"
|
||||
bodyClassName="rb:min-h-[calc(100vh-388px)] rb:p-[16px_20px]!"
|
||||
bodyClassName="rb:h-[calc(100vh-163px)]! rb:overflow-y-auto rb:p-[16px_20px]!"
|
||||
extra={<Space size={8}>
|
||||
<Button
|
||||
icon={<div className="rb:size-3.5 rb:bg-cover rb:bg-[url('@/assets/images/common/save.svg')]"></div>}
|
||||
loading={loading}
|
||||
onClick={handleSave}
|
||||
>{t('common.save')}</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<div className="rb:size-3.5 rb:bg-cover rb:bg-[url('@/assets/images/memory/debug.svg')]"></div>}
|
||||
loading={runLoading}
|
||||
onClick={handleRun}
|
||||
>{t('memoryExtractionEngine.debug')}</Button>
|
||||
</Space>}
|
||||
>
|
||||
<Form form={runForm} layout="vertical">
|
||||
{/* <RbAlert color="orange" icon={<ExclamationCircleFilled />} className="rb:mb-3!">
|
||||
{t('memoryExtractionEngine.warning')}
|
||||
</RbAlert> */}
|
||||
<Form form={runForm} layout="vertical" className="rb:bg-[#F6F6F6]! rb:rounded-xl rb:py-2! rb:mb-4!">
|
||||
<Flex align="center" justify="space-between" className="rb:px-3! rb:mb-2!">
|
||||
<div className="rb:text-[#212332] rb:font-medium rb:leading-5">{t('memoryExtractionEngine.custom_text')}</div>
|
||||
<div className="rb:text-[12px] rb:text-[#5B6167] rb:leading-4.5">{customText?.length || 0}</div>
|
||||
</Flex>
|
||||
<Form.Item
|
||||
name="custom_text"
|
||||
label={t('memoryExtractionEngine.custom_text')}
|
||||
noStyle
|
||||
>
|
||||
<Input.TextArea placeholder={t('common.pleaseEnter')} />
|
||||
<Input.TextArea placeholder={t('common.pleaseEnter')} variant="borderless" />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
<div className="rb:min-h-[calc(100vh-480px)] rb:overflow-y-auto">
|
||||
{runLoading
|
||||
? <>
|
||||
<RbAlert color="blue" icon={<ExclamationCircleFilled />} className="rb:mb-3.5">
|
||||
|
||||
{runLoading
|
||||
? <>
|
||||
<RbAlert color="blue">
|
||||
<div className="rb:w-full">
|
||||
{t('memoryExtractionEngine.processing')}
|
||||
</RbAlert>
|
||||
{/* Overall Progress */}
|
||||
<div className="rb:mb-2">
|
||||
<div className="rb:flex rb:items-center rb:justify-between rb:text-[12px] rb:leading-4 rb:font-regular">
|
||||
{t('memoryExtractionEngine.overallProgress')}
|
||||
<span className="rb:text-[#155eef]">{`${completedNum}/4`}</span>
|
||||
</div>
|
||||
<Progress percent={completedNum * 100/4} showInfo={false} />
|
||||
|
||||
{/* Overall Progress */}
|
||||
<Flex gap={13} align="center">
|
||||
<Progress percent={completedNum * 100 / 4} showInfo={false} className="rb:flex-1!" />
|
||||
<div className="rb:text-[12px] rb:leading-4 rb:font-regular">
|
||||
{t('memoryExtractionEngine.overallProgress')}{`${(completedNum*100/4).toFixed(0)}%`}
|
||||
</div>
|
||||
</Flex>
|
||||
</div>
|
||||
</>
|
||||
: !testResult || Object.keys(testResult).length === 0
|
||||
? <RbAlert color="orange" icon={<ExclamationCircleFilled />} className="rb:mb-3.5">
|
||||
{t('memoryExtractionEngine.warning')}
|
||||
</RbAlert>
|
||||
: <RbAlert color="green" icon={<ExclamationCircleFilled />} className="rb:mb-3.5">
|
||||
{t('memoryExtractionEngine.success')}
|
||||
</RbAlert>
|
||||
}
|
||||
<Space size={16} direction="vertical" style={{ width: '100%' }}>
|
||||
{/* Text Preprocessing */}
|
||||
<RbCard
|
||||
title={t(`memoryExtractionEngine.text_preprocessing`)}
|
||||
extra={formatTag(textPreprocessing.status)}
|
||||
headerType="borderL"
|
||||
headerClassName="rb:before:bg-[#155EEF]!"
|
||||
>
|
||||
{textPreprocessing.data.map((vo, index) => {
|
||||
if (vo.deleted_messages) {
|
||||
return <div key={index} className="rb:mb-3 rb:pb-1 rb:border-b rb:border-b-[#EBEBEB]">
|
||||
<div className="rb:font-medium rb:text-[12px] rb:mb-2">{t('memoryExtractionEngine.Pruned')}</div>
|
||||
{vo.deleted_messages.map((msg: any, idx: number) => (
|
||||
<div key={idx} className="rb:text-[12px] rb:text-[#5B6167] rb:leading-4 rb:font-regular">
|
||||
<Markdown content={'-' + t('memoryExtractionEngine.pruning') + (idx + 1) + ': ' + msg.content} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
}
|
||||
return (
|
||||
<div key={index} className="rb:mb-3 rb:text-[12px] rb:text-[#5B6167] rb:leading-4 rb:font-regular">
|
||||
<Markdown content={'-' + t('memoryExtractionEngine.fragment') + vo.chunk_index + ': ' + (vo.content.startsWith('\n') ? vo.content : '\n' + vo.content)} />
|
||||
</div>
|
||||
)
|
||||
</RbAlert>
|
||||
</>
|
||||
: !testResult || Object.keys(testResult).length === 0
|
||||
? <RbAlert color="orange" icon={<ExclamationCircleFilled />}>
|
||||
{t('memoryExtractionEngine.warning')}
|
||||
</RbAlert>
|
||||
: <RbAlert color="green" icon={<div className="rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/common/check_green.svg')]"></div>}>
|
||||
{t('memoryExtractionEngine.success')}
|
||||
</RbAlert>
|
||||
}
|
||||
|
||||
<Space size={24} className="rb:mt-4! rb:mb-3!">
|
||||
{['processData', 'finalResult'].map(tab => (
|
||||
<div
|
||||
className={clsx('rb:font-[MiSans-Bold] rb:font-bold rb:leading-5 rb:cursor-pointer', {
|
||||
'rb:text-[#212332]': activeTab === tab,
|
||||
'rb:text-[#A8A9AA]': activeTab !== tab,
|
||||
})}
|
||||
{formatTime(textPreprocessing)}
|
||||
{textPreprocessing.result &&
|
||||
<RbAlert color="blue" icon={<CheckCircleFilled />} className="rb:mt-3">
|
||||
onClick={() => setActiveTab(tab)}
|
||||
>{t(`memoryExtractionEngine.${tab}`)}</div>
|
||||
))}
|
||||
</Space>
|
||||
|
||||
{activeTab === 'processData' && <Flex vertical gap={12} className="rb:pb-3!">
|
||||
{/* Text Preprocessing */}
|
||||
<ResultCard
|
||||
title={t(`memoryExtractionEngine.text_preprocessing`)}
|
||||
extra={formatTag(textPreprocessing.status)}
|
||||
expanded={expandedCards['text_preprocessing']}
|
||||
handleExpand={() => toggleCard('text_preprocessing')}
|
||||
>
|
||||
{expandedCards['text_preprocessing'] && textPreprocessing.data?.length > 0 &&
|
||||
<Space size={10} className="rb:px-1! rb:mb-3!">
|
||||
{(['chunking', ...(textPreprocessing.data.some(vo => vo.deleted_messages) ? ['pruning'] : [])] as string[]).map(type => (
|
||||
<div
|
||||
key={type}
|
||||
className={clsx("rb:rounded-[13px] rb:py-0.5 rb:px-3 rb:leading-5 rb:cursor-pointer", {
|
||||
'rb:bg-white': textPreprocessingTab !== type,
|
||||
'rb:bg-[#171719] rb:text-white': textPreprocessingTab === type
|
||||
})}
|
||||
onClick={() => setTextPreprocessingTab(type)}
|
||||
>
|
||||
{t(`memoryExtractionEngine.${type}`)}
|
||||
</div>
|
||||
))}
|
||||
</Space>
|
||||
}
|
||||
{expandedCards['text_preprocessing'] && textPreprocessing.result &&
|
||||
<RbAlert color="blue" className="rb:mb-2!">
|
||||
<div>
|
||||
<div>{formatTime(textPreprocessing)}</div>
|
||||
{t('memoryExtractionEngine.pruning_desc', { count: textPreprocessing.result.pruning.deleted_count || 0 })},
|
||||
{t('memoryExtractionEngine.text_preprocessing_desc', { count: textPreprocessing.result.total_chunks })},
|
||||
{t('memoryExtractionEngine.chunkerStrategy')}: {t(`memoryExtractionEngine.${lowercaseFirst(textPreprocessing.result.chunker_strategy)}`)}
|
||||
</RbAlert>
|
||||
}
|
||||
</RbCard>
|
||||
{/* Knowledge Extraction */}
|
||||
<RbCard
|
||||
title={t(`memoryExtractionEngine.knowledge_extraction`)}
|
||||
extra={formatTag(knowledgeExtraction.status)}
|
||||
headerType="borderL"
|
||||
headerClassName="rb:before:bg-[#155EEF]!"
|
||||
>
|
||||
{knowledgeExtraction.data.map((vo, index) =>
|
||||
<div key={index} className="rb:mb-3 rb:text-[12px] rb:text-[#5B6167] rb:leading-4 rb:font-regular">{vo.statement}</div>
|
||||
)}
|
||||
{formatTime(knowledgeExtraction)}
|
||||
{knowledgeExtraction.result && <RbAlert color="blue" icon={<CheckCircleFilled />} className="rb:mt-3">
|
||||
{t('memoryExtractionEngine.knowledge_extraction_desc', {
|
||||
entities: knowledgeExtraction.result.entities_count,
|
||||
statements: knowledgeExtraction.result.statements_count,
|
||||
temporal_ranges_count: knowledgeExtraction.result.temporal_ranges_count,
|
||||
triplets: knowledgeExtraction.result.triplets_count
|
||||
})}
|
||||
</RbAlert>}
|
||||
</RbCard>
|
||||
{/* Creating Entity Relationships */}
|
||||
<RbCard
|
||||
title={t(`memoryExtractionEngine.creating_nodes_edges`)}
|
||||
extra={formatTag(creatingNodesEdges.status)}
|
||||
headerType="borderL"
|
||||
headerClassName="rb:before:bg-[#9C6FFF]!"
|
||||
>
|
||||
{creatingNodesEdges.data?.map((vo, index) => (
|
||||
<div key={index} className="rb:mb-3 rb:text-[12px] rb:text-[#5B6167] rb:leading-4 rb:font-regular">
|
||||
{vo?.result_type === 'entity_nodes_creation'
|
||||
? <>{vo.type_display_name}: {vo.entity_names.join(', ')}</>
|
||||
: <>{vo?.relationship_text}</>
|
||||
}
|
||||
</div>
|
||||
))}
|
||||
{formatTime(creatingNodesEdges, '#9C6FFF')}
|
||||
{creatingNodesEdges.result && <RbAlert color="blue" icon={<CheckCircleFilled />} className="rb:mt-3">
|
||||
{t('memoryExtractionEngine.creating_nodes_edges_desc', {num: creatingNodesEdges.result.entity_entity_edges_count})}
|
||||
</RbAlert>}
|
||||
</RbCard>
|
||||
{/* Deduplication and Disambiguation */}
|
||||
<RbCard
|
||||
title={t(`memoryExtractionEngine.deduplication`)}
|
||||
extra={formatTag(deduplication.status)}
|
||||
headerType="borderL"
|
||||
headerClassName="rb:before:bg-[#9C6FFF]!"
|
||||
>
|
||||
{Object.keys(deduplicationData).length > 0 && Object.keys(deduplicationData).map(key => {
|
||||
return deduplicationData[key].map((vo, index) => (
|
||||
<div key={index} className="rb:mb-3 rb:text-[12px] rb:text-[#5B6167] rb:leading-4 rb:font-regular">
|
||||
{vo.message}
|
||||
</div>
|
||||
))
|
||||
})}
|
||||
{formatTime(deduplication, '#9C6FFF')}
|
||||
{deduplication.result && <RbAlert color="blue" icon={<CheckCircleFilled />} className="rb:mt-3">
|
||||
{t('memoryExtractionEngine.deduplication_desc', { count: deduplication.result.summary.total_merges })}<br />
|
||||
</RbAlert>}
|
||||
</RbCard>
|
||||
|
||||
{testResult && Object.keys(testResult).length > 0 && resultObj && Object.keys(resultObj).length > 0 &&
|
||||
<RbCard>
|
||||
<div className="rb:grid rb:grid-cols-2 rb:gap-[40px_57px]">
|
||||
{Object.keys(resultObj).map((key, index) => {
|
||||
const keys = (resultObj as Record<string, string>)[key].split('.')
|
||||
return (
|
||||
<div key={index}>
|
||||
<div className="rb:text-[24px] rb:leading-7.5 rb:font-extrabold">{(testResult?.[keys[0] as keyof TestResult] as any)?.[keys[1]]}</div>
|
||||
<div className="rb:text-[12px] rb:text-[#5B6167] rb:leading-4 rb:font-regular">{t(`memoryExtractionEngine.${key}`)}</div>
|
||||
<div className="rb:mt-1 rb:text-[12px] rb:text-[#369F21] rb:leading-3.5 rb:font-regular">
|
||||
{key === 'extractTheNumberOfEntities' && testResult.dedup
|
||||
? t(`memoryExtractionEngine.${key}Desc`, {
|
||||
num: testResult.dedup.total_merged_count,
|
||||
exact: testResult.dedup.breakdown.exact,
|
||||
fuzzy: testResult.dedup.breakdown.fuzzy,
|
||||
llm: testResult.dedup.breakdown.llm,
|
||||
})
|
||||
: key === 'numberOfEntityDisambiguation' && testResult.disambiguation
|
||||
? t(`memoryExtractionEngine.${key}Desc`, { num: testResult.disambiguation.effects?.length, block_count: testResult.disambiguation.block_count })
|
||||
: key === 'numberOfRelationalTriples' && testResult.triplets
|
||||
? t(`memoryExtractionEngine.${key}Desc`, { num: testResult.triplets.count })
|
||||
:t(`memoryExtractionEngine.${key}Desc`)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
)})}
|
||||
</div>
|
||||
</RbCard>
|
||||
</RbAlert>
|
||||
}
|
||||
|
||||
{testResult?.dedup?.impact && testResult.dedup.impact?.length > 0 &&
|
||||
<RbCard
|
||||
title={t('memoryExtractionEngine.entityDeduplicationImpact')}
|
||||
headerType="borderL"
|
||||
headerClassName="rb:before:bg-[#155EEF]!"
|
||||
>
|
||||
<div className="rb:text-[12px] rb:text-[#5B6167] rb:font-medium rb:leading-4">{t('memoryExtractionEngine.identifyDuplicates')}</div>
|
||||
{testResult.dedup.impact.map((item, index) => (
|
||||
<div key={index} className="rb:pl-2 rb:mt-2 rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:leading-4">
|
||||
-{t('memoryExtractionEngine.identifyDuplicatesDesc', { ...item })}
|
||||
{expandedCards['text_preprocessing'] && textPreprocessing.data.map((vo, index) => {
|
||||
if (vo.deleted_messages && textPreprocessingTab === 'pruning') {
|
||||
return <div key={index} className="rb:mb-3 rb:pb-1 rb:border-b rb:border-b-[#EBEBEB]">
|
||||
<div className="rb:font-medium rb:text-[12px] rb:mb-2">{t('memoryExtractionEngine.Pruned')}</div>
|
||||
{vo.deleted_messages.map((msg: any, idx: number) => (
|
||||
<div key={idx} className="rb:leading-5">
|
||||
<div className="rb:font-medium">-{t('memoryExtractionEngine.pruning')}{idx}:</div>
|
||||
<Markdown content={msg.content} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
}
|
||||
if (textPreprocessingTab === 'chunking') {
|
||||
return (
|
||||
<div key={index} className="rb:leading-5">
|
||||
<div className="rb:font-medium">-{t('memoryExtractionEngine.fragment')}{vo.chunk_index}:</div>
|
||||
<Markdown content={vo.content.startsWith('\n') ? vo.content : '\n' + vo.content} className="rb:text-[#212332]" />
|
||||
</div>
|
||||
))}
|
||||
)
|
||||
}
|
||||
return null
|
||||
})}
|
||||
</ResultCard>
|
||||
{/* Knowledge Extraction */}
|
||||
<ResultCard
|
||||
title={t(`memoryExtractionEngine.knowledge_extraction`)}
|
||||
extra={formatTag(knowledgeExtraction.status)}
|
||||
expanded={expandedCards['knowledge_extraction']}
|
||||
handleExpand={() => toggleCard('knowledge_extraction')}
|
||||
>
|
||||
{knowledgeExtraction.result &&
|
||||
<RbAlert color="blue" className="rb:mb-2!">
|
||||
<div>
|
||||
<div>{formatTime(knowledgeExtraction)}</div>
|
||||
{t('memoryExtractionEngine.knowledge_extraction_desc', {
|
||||
entities: knowledgeExtraction.result.entities_count,
|
||||
statements: knowledgeExtraction.result.statements_count,
|
||||
temporal_ranges_count: knowledgeExtraction.result.temporal_ranges_count,
|
||||
triplets: knowledgeExtraction.result.triplets_count
|
||||
})}
|
||||
</div>
|
||||
</RbAlert>
|
||||
}
|
||||
{knowledgeExtraction.data?.length > 0 &&
|
||||
<ul className="rb:list-disc rb:ml-4 rb:mb-3">
|
||||
{knowledgeExtraction.data.map((vo, index) =>
|
||||
<li key={index} className="rb:leading-6">{vo.statement}</li>
|
||||
)}
|
||||
</ul>
|
||||
}
|
||||
</ResultCard>
|
||||
{/* Creating Entity Relationships */}
|
||||
<ResultCard
|
||||
title={t(`memoryExtractionEngine.creating_nodes_edges`)}
|
||||
extra={formatTag(creatingNodesEdges.status)}
|
||||
expanded={expandedCards['creating_nodes_edges']}
|
||||
handleExpand={() => toggleCard('creating_nodes_edges')}
|
||||
>
|
||||
{creatingNodesEdges.result &&
|
||||
<RbAlert color="blue" className="rb:mb-2!">
|
||||
<div>
|
||||
<div>{formatTime(creatingNodesEdges)}</div>
|
||||
{t('memoryExtractionEngine.creating_nodes_edges_desc', { num: creatingNodesEdges.result.entity_entity_edges_count })}
|
||||
</div>
|
||||
</RbAlert>
|
||||
}
|
||||
{creatingNodesEdges.data?.length > 0 &&
|
||||
<ul className="rb:list-disc rb:ml-4 rb:mb-3">
|
||||
{creatingNodesEdges.data.map((vo, index) =>
|
||||
<li key={index} className="rb:leading-6">
|
||||
{vo?.result_type === 'entity_nodes_creation'
|
||||
? <>{vo.type_display_name}: {vo.entity_names.join(', ')}</>
|
||||
: <>{vo?.relationship_text}</>
|
||||
}
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
}
|
||||
</ResultCard>
|
||||
{/* Deduplication and Disambiguation */}
|
||||
<ResultCard
|
||||
title={t(`memoryExtractionEngine.deduplication`)}
|
||||
extra={formatTag(deduplication.status)}
|
||||
expanded={expandedCards['deduplication']}
|
||||
handleExpand={() => toggleCard('deduplication')}
|
||||
>
|
||||
{deduplication.result &&
|
||||
<RbAlert color="blue" className="rb:mb-2!">
|
||||
<div>
|
||||
<div>{formatTime(deduplication)}</div>
|
||||
{t('memoryExtractionEngine.deduplication_desc', { count: deduplication.result.summary.total_merges })}
|
||||
</div>
|
||||
</RbAlert>
|
||||
}
|
||||
{Object.keys(deduplicationData).length > 0 &&
|
||||
<ul className="rb:list-disc rb:ml-4 rb:mb-3">
|
||||
{Object.keys(deduplicationData).map(key => {
|
||||
return deduplicationData[key].map((vo, index) => (
|
||||
<li key={index} className="rb:leading-6">
|
||||
{vo.message}
|
||||
</li>
|
||||
))
|
||||
})}
|
||||
</ul>
|
||||
}
|
||||
</ResultCard>
|
||||
</Flex>}
|
||||
|
||||
<RbAlert color="blue" icon={<CheckCircleFilled />} className="rb:mt-3">
|
||||
{activeTab === 'finalResult' && <Flex vertical gap={12} className="rb:pb-3!">
|
||||
{!testResult || Object.keys(testResult).length === 0
|
||||
? <Empty url={NoDataIcon} />
|
||||
: null
|
||||
}
|
||||
|
||||
{testResult && Object.keys(testResult).length > 0 && resultObj && Object.keys(resultObj).length > 0 &&
|
||||
<ResultCard
|
||||
title={t(`memoryExtractionEngine.dataStatistics`)}
|
||||
expanded={expandedCards['dataStatistics']}
|
||||
handleExpand={() => toggleCard('dataStatistics')}
|
||||
>
|
||||
<div className="rb:grid rb:grid-cols-2 rb:gap-2.5 rb:mb-3">
|
||||
{Object.keys(resultObj).map((key, index) => {
|
||||
const keys = (resultObj as Record<string, string>)[key].split('.')
|
||||
return (
|
||||
<div key={index} className="rb:bg-white rb:rounded-lg rb:py-2 rb:px-3">
|
||||
<div className="rb:text-[24px] rb:leading-8 rb:font-bold rb:font-[MiSans-Bold] rb:mb-1">{(testResult?.[keys[0] as keyof TestResult] as any)?.[keys[1]]}</div>
|
||||
<div className="rb:text-[12px] rb:leading-4 rb:mb-0.5">{t(`memoryExtractionEngine.${key}`)}</div>
|
||||
<div className="rb:text-[12px] rb:text-[#369F21] rb:leading-4">
|
||||
{key === 'extractTheNumberOfEntities' && testResult.dedup
|
||||
? t(`memoryExtractionEngine.${key}Desc`, {
|
||||
num: testResult.dedup.total_merged_count,
|
||||
exact: testResult.dedup.breakdown.exact,
|
||||
fuzzy: testResult.dedup.breakdown.fuzzy,
|
||||
llm: testResult.dedup.breakdown.llm,
|
||||
})
|
||||
: key === 'numberOfEntityDisambiguation' && testResult.disambiguation
|
||||
? t(`memoryExtractionEngine.${key}Desc`, { num: testResult.disambiguation.effects?.length, block_count: testResult.disambiguation.block_count })
|
||||
: key === 'numberOfRelationalTriples' && testResult.triplets
|
||||
? t(`memoryExtractionEngine.${key}Desc`, { num: testResult.triplets.count })
|
||||
: t(`memoryExtractionEngine.${key}Desc`)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</ResultCard>
|
||||
}
|
||||
|
||||
{testResult?.dedup?.impact && testResult.dedup.impact?.length > 0 &&
|
||||
<ResultCard
|
||||
title={t('memoryExtractionEngine.entityDeduplicationImpact')}
|
||||
expanded={expandedCards['entityDeduplicationImpact']}
|
||||
handleExpand={() => toggleCard('entityDeduplicationImpact')}
|
||||
>
|
||||
<div className="rb:bg-white rb:rounded-xl rb:p-3 rb:mb-3">
|
||||
<RbAlert color="blue" className="rb:mb-2!">
|
||||
{t('memoryExtractionEngine.entityDeduplicationImpactDesc', { count: testResult.dedup.impact.length })}
|
||||
</RbAlert>
|
||||
</RbCard>
|
||||
}
|
||||
<div className="rb:font-medium rb:leading-5 rb:mb-2">{t('memoryExtractionEngine.identifyDuplicates')}:</div>
|
||||
|
||||
{testResult?.disambiguation && testResult.disambiguation?.effects?.length > 0 &&
|
||||
<RbCard
|
||||
title={t('memoryExtractionEngine.theEffectOfEntityDisambiguationLLMDriven')}
|
||||
headerType="borderL"
|
||||
headerClassName="rb:before:bg-[#155EEF]!"
|
||||
>
|
||||
<ul className="rb:list-disc rb:ml-4">
|
||||
{testResult.dedup.impact.map((item, index) => (
|
||||
<li key={index} className="rb:leading-6">
|
||||
{t('memoryExtractionEngine.identifyDuplicatesDesc', { ...item })}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</ResultCard>
|
||||
}
|
||||
|
||||
{testResult?.disambiguation && testResult.disambiguation?.effects?.length > 0 &&
|
||||
<ResultCard
|
||||
title={t('memoryExtractionEngine.theEffectOfEntityDisambiguationLLMDriven')}
|
||||
expanded={expandedCards['disambiguation']}
|
||||
handleExpand={() => toggleCard('disambiguation')}
|
||||
>
|
||||
<div className="rb:bg-white rb:rounded-xl rb:p-3 rb:mb-3">
|
||||
<RbAlert color="blue" className="rb:mb-2!">
|
||||
{t('memoryExtractionEngine.entityDeduplicationImpactDesc', { count: testResult.dedup.impact.length })}
|
||||
</RbAlert>
|
||||
{testResult.disambiguation.effects.map((item, index) => (
|
||||
<div key={index} className={clsx("rb:text-[12px] rb:text-[#5B6167] rb:leading-4", {
|
||||
'rb:mt-4': index > 0,
|
||||
'rb:mt-5': index > 0,
|
||||
})}>
|
||||
<div className="rb:font-medium rb:mb-2">{t('memoryExtractionEngine.disagreementCase')} {index +1}:</div>
|
||||
-{item.left.name}({item.left.type}) vs {item.right.name}({item.right.type}) → <span className="rb:text-[#369F21]">{item.result}</span>
|
||||
<div className="rb:font-medium rb:leading-5 rb:mb-1">{t('memoryExtractionEngine.disagreementCase')} {index + 1}:</div>
|
||||
|
||||
<ul className="rb:list-disc rb:ml-4">
|
||||
<li key={index} className="rb:leading-6">
|
||||
{item.left.name}({item.left.type}) vs {item.right.name}({item.right.type}) → {item.result}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</ResultCard>
|
||||
}
|
||||
|
||||
<RbAlert color="blue" icon={<CheckCircleFilled />} className="rb:mt-3">
|
||||
{t('memoryExtractionEngine.entityDeduplicationImpactDesc', { count: testResult.dedup.impact.length })}
|
||||
</RbAlert>
|
||||
</RbCard>
|
||||
}
|
||||
{testResult?.core_entities && testResult?.core_entities.length > 0 &&
|
||||
<ResultCard
|
||||
title={t('memoryExtractionEngine.coreEntitiesAfterDedup')}
|
||||
expanded={expandedCards['coreEntities']}
|
||||
handleExpand={() => toggleCard('coreEntities')}
|
||||
>
|
||||
<Flex gap={10} wrap className="rb:px-1! rb:mb-3! rb:gap-y-2!">
|
||||
{testResult.core_entities.map((item, index) => (
|
||||
<div
|
||||
key={item.type}
|
||||
className={clsx("rb:rounded-[13px] rb:py-0.5 rb:px-3 rb:leading-5 rb:cursor-pointer", {
|
||||
'rb:bg-white': !((coreEntitiesTab && item.type === coreEntitiesTab) || (!coreEntitiesTab && index === 0)),
|
||||
'rb:bg-[#171719] rb:text-white': (coreEntitiesTab && item.type === coreEntitiesTab) || (!coreEntitiesTab && index === 0)
|
||||
})}
|
||||
onClick={() => setCoreEntitiesTab(item.type)}
|
||||
>
|
||||
{item.type}({item.count})
|
||||
</div>
|
||||
))}
|
||||
</Flex>
|
||||
<div className="rb:bg-white rb:rounded-lg rb:py-2.5 rb:px-3 rb:mb-3">
|
||||
{testResult.core_entities.filter((item, index) => (coreEntitiesTab && item.type === coreEntitiesTab) || (!coreEntitiesTab && index === 0)).map((item, idx) => (
|
||||
<div key={idx} className="rb:leading-5">
|
||||
<div className="rb:text-[#155EEF] rb:font-medium rb:mb-2">{item.type}({item.count})</div>
|
||||
|
||||
{testResult?.core_entities && testResult?.core_entities.length > 0 &&
|
||||
<RbCard
|
||||
title={t('memoryExtractionEngine.coreEntitiesAfterDedup')}
|
||||
headerType="borderL"
|
||||
headerClassName="rb:before:bg-[#369F21]!"
|
||||
>
|
||||
<div className="rb:grid rb:grid-cols-2 rb:gap-6">
|
||||
{testResult.core_entities.map((item, idx) => (
|
||||
<div key={idx} className="rb:text-[12px]">
|
||||
<div className="rb:text-[#369F21] rb:font-medium">{item.type}({item.count})</div>
|
||||
<ul className="rb:list-disc rb:ml-4">
|
||||
{item.entities.map((entity, index) => (
|
||||
<li key={index} className="rb:leading-6">
|
||||
{entity}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</ResultCard>
|
||||
}
|
||||
|
||||
<div>
|
||||
{item.entities.map((entity, index) => (
|
||||
<div key={index} className="rb:text-[#5B6167] rb:font-regular rb:leading-4">
|
||||
-{entity}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</RbCard>
|
||||
}
|
||||
|
||||
{testResult?.triplet_samples && testResult?.triplet_samples.length > 0 &&
|
||||
<RbCard
|
||||
title={t('memoryExtractionEngine.extractRelationalTriples')}
|
||||
headerType="borderL"
|
||||
headerClassName="rb:before:bg-[#9C6FFF]!"
|
||||
>
|
||||
<Space size={8} direction="vertical" className="rb:w-full">
|
||||
{testResult.triplet_samples.map((item, index) => (
|
||||
<div key={index} className="rb:text-[12px]">
|
||||
-({item.subject}, <span className="rb:text-[#9C6FFF] rb:font-medium">{item.predicate}</span>, {item.object})
|
||||
</div>
|
||||
))}
|
||||
</Space>
|
||||
<RbAlert color="purple" icon={<CheckCircleFilled />} className="rb:mt-3">
|
||||
{testResult?.triplet_samples && testResult?.triplet_samples.length > 0 &&
|
||||
<ResultCard
|
||||
title={t('memoryExtractionEngine.extractRelationalTriples')}
|
||||
expanded={expandedCards['triplet_samples']}
|
||||
handleExpand={() => toggleCard('triplet_samples')}
|
||||
>
|
||||
<div className="rb:bg-white rb:rounded-xl rb:p-3 rb:mb-3">
|
||||
<RbAlert color="blue"className="rb:mb-2!">
|
||||
{t('memoryExtractionEngine.extractRelationalTriplesDesc', { count: testResult.triplet_samples.length })}
|
||||
</RbAlert>
|
||||
</RbCard>
|
||||
}
|
||||
{ontologyCoverage && Object.keys(ontologyCoverage).length > 0 &&
|
||||
<RbCard
|
||||
title={<>{t('memoryExtractionEngine.ontologyCoverage')}({ontologyCoverage.total_entities})</>}
|
||||
headerType="borderL"
|
||||
headerClassName="rb:before:bg-[#369F21]!"
|
||||
>
|
||||
<div className="rb:grid rb:grid-cols-2 rb:gap-3">
|
||||
<ul className="rb:list-disc rb:ml-4">
|
||||
{testResult.triplet_samples.map((item, index) => (
|
||||
<li key={index} className="rb:leading-6">
|
||||
({item.subject}, <span className="rb:text-[#155EEF] rb:font-medium">{item.predicate}</span>, {item.object})
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</ResultCard>
|
||||
}
|
||||
{ontologyCoverage && Object.keys(ontologyCoverage).length > 0 &&
|
||||
<ResultCard
|
||||
title={<>{t('memoryExtractionEngine.ontologyCoverage')}({ontologyCoverage.total_entities})</>}
|
||||
expanded={expandedCards['ontologyCoverage']}
|
||||
handleExpand={() => toggleCard('ontologyCoverage')}
|
||||
>
|
||||
<div className="rb:bg-white rb:rounded-xl rb:p-3 rb:mb-3 rb:leading-5">
|
||||
<div className="rb:grid rb:grid-cols-1 rb:gap-3">
|
||||
{(['scene_type_distribution', 'general_type_distribution', 'unmatched'] as const).map((key, idx) => {
|
||||
if (!ontologyCoverage[key]) return null
|
||||
return (
|
||||
<div key={idx} className="rb:text-[12px]">
|
||||
<div className="rb:text-[#369F21] rb:font-medium">{t(`memoryExtractionEngine.${key}`)}({ontologyCoverage[key].type_count})</div>
|
||||
<div>{t('memoryExtractionEngine.entity_total', { num: ontologyCoverage[key].entity_total })}</div>
|
||||
<div>
|
||||
<div key={idx}>
|
||||
<div className="rb:text-[#155EEF] rb:font-medium rb:mb-1">{t(`memoryExtractionEngine.${key}`)}({ontologyCoverage[key].type_count})</div>
|
||||
<div className="rb:text-[#212332] rb:mb-1">{t('memoryExtractionEngine.entity_total', { num: ontologyCoverage[key].entity_total })}</div>
|
||||
|
||||
<ul className="rb:list-disc rb:ml-4">
|
||||
{ontologyCoverage[key].types.map((type, index) => {
|
||||
if (!type.type || type.type === '') return null
|
||||
return (
|
||||
<div key={index} className="rb:text-[#5B6167] rb:font-regular rb:leading-4">
|
||||
-{type.type}({type.count})
|
||||
</div>
|
||||
<li key={index} className="rb:leading-6 rb:text-[#5B6167]">
|
||||
{type.type}({type.count})
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</RbCard>
|
||||
}
|
||||
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
<div className="rb:grid rb:grid-cols-2 rb:gap-4 rb:mt-5">
|
||||
<Button block loading={loading} onClick={handleSave}>{t('common.save')}</Button>
|
||||
<Button block type="primary" loading={runLoading} onClick={handleRun}>{t('memoryExtractionEngine.debug')}</Button>
|
||||
</div>
|
||||
</div>
|
||||
</ResultCard>
|
||||
}
|
||||
</Flex>}
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,78 @@
|
||||
/*
|
||||
* @Author: ZhaoYing
|
||||
* @Date: 2026-02-03 17:30:51
|
||||
* @Last Modified by: ZhaoYing
|
||||
* @Last Modified time: 2026-03-19 14:23:58
|
||||
*/
|
||||
/**
|
||||
* ResultCard Component
|
||||
* Collapsible card wrapper for configuration sections
|
||||
*/
|
||||
|
||||
import { type FC, type ReactNode } from 'react'
|
||||
import clsx from 'clsx';
|
||||
import { Flex, Space, Tooltip } from 'antd';
|
||||
|
||||
import RbCard from '@/components/RbCard/Card'
|
||||
|
||||
/**
|
||||
* Component props
|
||||
*/
|
||||
interface ResultCardProps {
|
||||
title: string | ReactNode;
|
||||
subTitle?: string | ReactNode;
|
||||
children: ReactNode;
|
||||
expanded?: boolean;
|
||||
handleExpand?: () => void;
|
||||
className?: string;
|
||||
headerClassName?: string;
|
||||
bodyClassName?: string;
|
||||
extra?: ReactNode;
|
||||
}
|
||||
|
||||
const ResultCard: FC<ResultCardProps> = ({
|
||||
title,
|
||||
subTitle,
|
||||
children,
|
||||
expanded,
|
||||
handleExpand,
|
||||
extra,
|
||||
className,
|
||||
headerClassName,
|
||||
bodyClassName,
|
||||
}) => {
|
||||
return (
|
||||
<RbCard
|
||||
title={() => <Flex
|
||||
align="center"
|
||||
justify="space-between"
|
||||
className="rb:font-[MiSans-Bold] rb:font-bold rb:cursor-pointer"
|
||||
onClick={handleExpand}
|
||||
>
|
||||
<Space size={4}>
|
||||
{title}
|
||||
{subTitle && <Tooltip title={subTitle}>
|
||||
<div className="rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/common/question.svg')]"></div>
|
||||
</Tooltip>}
|
||||
</Space>
|
||||
<Space size={4}>
|
||||
{extra}
|
||||
{handleExpand && <div
|
||||
className={clsx("rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/common/arrow_up.svg')] rb:transition-transform", {
|
||||
'rb:rotate-180': !expanded,
|
||||
'rb:rotate-0': expanded,
|
||||
})}
|
||||
></div>}
|
||||
</Space>
|
||||
</Flex>}
|
||||
headerType="borderless"
|
||||
headerClassName={headerClassName ?? "rb:min-h-[40px]! rb:text-[#212332]! rb:text-[14px]!"}
|
||||
bodyClassName={bodyClassName ?? "rb:py-0! rb:px-3!"}
|
||||
className={className ?? "rb:bg-[#F6F6F6]!"}
|
||||
>
|
||||
{(expanded && handleExpand) && children}
|
||||
</RbCard>
|
||||
)
|
||||
}
|
||||
|
||||
export default ResultCard
|
||||
@@ -2,7 +2,7 @@
|
||||
* @Author: ZhaoYing
|
||||
* @Date: 2026-02-03 17:30:02
|
||||
* @Last Modified by: ZhaoYing
|
||||
* @Last Modified time: 2026-03-06 13:50:05
|
||||
* @Last Modified time: 2026-03-18 17:55:32
|
||||
*/
|
||||
/**
|
||||
* Memory Extraction Engine Configuration Page
|
||||
@@ -13,18 +13,19 @@
|
||||
import { type FC, useState, useEffect } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useParams } from 'react-router-dom'
|
||||
import { Row, Col, Space, Select, InputNumber, Slider, App, Form, Input } from 'antd'
|
||||
import { Row, Col, Space, Select, InputNumber, App, Form, Input, Flex, Tooltip } from 'antd'
|
||||
import clsx from 'clsx'
|
||||
|
||||
import Card from './components/Card'
|
||||
import type { ConfigForm, Variable } from './types'
|
||||
import { getMemoryExtractionConfig, updateMemoryExtractionConfig } from '@/api/memory'
|
||||
import Markdown from '@/components/Markdown'
|
||||
import { getModelListUrl } from '@/api/models';
|
||||
import { configList } from './constant'
|
||||
import Result from './components/Result'
|
||||
import SwitchFormItem from '@/components/FormItem/SwitchFormItem'
|
||||
import CustomSelect from '@/components/CustomSelect'
|
||||
import ModelSelect from '@/components/ModelSelect'
|
||||
import RbSlider from '@/components/RbSlider';
|
||||
import DescWrapper from '@/components/FormItem/DescWrapper'
|
||||
|
||||
/** Available configuration section keys */
|
||||
const keys = [
|
||||
@@ -35,7 +36,7 @@ const keys = [
|
||||
/**
|
||||
* Configuration description component
|
||||
*/
|
||||
const ConfigDesc: FC<{ config: Variable, className?: string; onlyMeaning?: boolean; }> = ({ config, className, onlyMeaning = false}) => {
|
||||
const Desc: FC<{ config: Variable, className?: string; onlyMeaning?: boolean; }> = ({ config, className, onlyMeaning = false}) => {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<div className={className}>
|
||||
@@ -44,7 +45,6 @@ const ConfigDesc: FC<{ config: Variable, className?: string; onlyMeaning?: boole
|
||||
{config.control && <span className="rb:font-regular">{t('memoryExtractionEngine.control')}: {t(`memoryExtractionEngine.${config.control}`)}</span>}
|
||||
{config.type && <span className="rb:font-regular">{t('memoryExtractionEngine.type')}: {config.type}</span>}
|
||||
</Space>}
|
||||
{config.meaning && <div className={clsx("rb:mt-1 rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:leading-4 ")}>{t('memoryExtractionEngine.Meaning')}: {t(`memoryExtractionEngine.${config.meaning}`)}</div>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -122,163 +122,139 @@ const MemoryExtractionEngine: FC = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="rb:text-[24px] rb:font-semibold rb:leading-8 rb:mb-2">{t('memoryExtractionEngine.title')}</div>
|
||||
<div className="rb:text-[#5B6167] rb:leading-5 rb:mb-6">{t('memoryExtractionEngine.subTitle')}</div>
|
||||
<Flex align="center" gap={4} className="rb:font-[MiSans-Bold] rb:text-[16px] rb:font-bold rb:leading-5.5 rb:mb-4!">
|
||||
{t('memoryExtractionEngine.title')}
|
||||
<Tooltip title={t('memoryExtractionEngine.subTitle')}>
|
||||
<div className="rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/common/question.svg')]"></div>
|
||||
</Tooltip>
|
||||
</Flex>
|
||||
|
||||
<Row gutter={[16, 16]}>
|
||||
<Row gutter={12}>
|
||||
<Col span={12}>
|
||||
<Form form={modelForm}>
|
||||
<Form.Item
|
||||
label={t('memoryExtractionEngine.model')}
|
||||
name="llm_id"
|
||||
>
|
||||
<CustomSelect
|
||||
url={getModelListUrl}
|
||||
params={{ type: 'llm,chat', pagesize: 100, is_active: true }}
|
||||
valueKey="id"
|
||||
labelKey="name"
|
||||
hasAll={false}
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Col>
|
||||
</Row>
|
||||
<Card
|
||||
type="example"
|
||||
title={t('memoryExtractionEngine.example')}
|
||||
expanded={expandedKeys.includes('example')}
|
||||
handleExpand={handleExpand}
|
||||
>
|
||||
{expandedKeys.includes('example') &&
|
||||
<div className="rb:text-[14px] rb:text-[#5B6167] rb:font-regular rb:leading-5">
|
||||
<Markdown content={t('memoryExtractionEngine.exampleText')} />
|
||||
</div>
|
||||
}
|
||||
</Card>
|
||||
<Row gutter={[16, 16]} className="rb:mt-4">
|
||||
<Col span={14}>
|
||||
<Form
|
||||
form={form}
|
||||
>
|
||||
<Space direction="vertical" size={16} style={{ width: '100%' }}>
|
||||
{configList.map((item, index) => (
|
||||
<Card
|
||||
type={item.type}
|
||||
title={t(`memoryExtractionEngine.${item.type}`)}
|
||||
key={index}
|
||||
expanded={expandedKeys.includes(item.type)}
|
||||
handleExpand={handleExpand}
|
||||
>
|
||||
<Space size={20} direction="vertical" style={{width: '100%'}}>
|
||||
{item.data.map(vo => (
|
||||
<div
|
||||
key={vo.title}
|
||||
className={clsx(
|
||||
`rb:p-[16px_24px] rb:rounded-lg`,
|
||||
'rb:border rb:border-[#DFE4ED]',
|
||||
{
|
||||
'rb:shadow-[inset_4px_0px_0px_0px_#155EEF]': index % 2 === 0,
|
||||
'rb:shadow-[inset_4px_0px_0px_0px_#369F21]': index % 2 !== 0,
|
||||
}
|
||||
)}
|
||||
>
|
||||
<div className="rb:text-[16px] rb:font-medium rb:leading-5.5">{t(`memoryExtractionEngine.${vo.title}`)}</div>
|
||||
<div className="rb:mt-1 rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:leading-4">{t(`memoryExtractionEngine.${vo.title}SubTitle`)}</div>
|
||||
<Flex vertical gap={12} className="rb:h-[calc(100vh-114px)]! rb:overflow-y-auto">
|
||||
<Form form={modelForm}>
|
||||
<Form.Item
|
||||
name="llm_id"
|
||||
noStyle
|
||||
>
|
||||
<ModelSelect
|
||||
params={{ type: 'llm,chat' }}
|
||||
className="rb:w-full! rb:h-10! rb:bg-white rb:rounded-xl"
|
||||
variant="borderless"
|
||||
placeholder={t('memoryExtractionEngine.model')}
|
||||
allowClear={false}
|
||||
fontClassName="rb:font-medium!"
|
||||
/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
|
||||
{vo.list.map(config => (
|
||||
<div key={config.label}>
|
||||
{config.control === 'button' &&
|
||||
<SwitchFormItem
|
||||
title={<>-{t(`memoryExtractionEngine.${config.label}`)}</>}
|
||||
name={config.variableName}
|
||||
desc={<ConfigDesc config={config} className="rb:ml-2" />}
|
||||
className="rb:mt-6"
|
||||
/>
|
||||
}
|
||||
{config.control === 'select' &&
|
||||
<>
|
||||
<div className="rb:text-[14px] rb:font-medium rb:leading-5 rb:mt-6 rb:mb-2">
|
||||
-{t(`memoryExtractionEngine.${config.label}`)}
|
||||
</div>
|
||||
<div className="rb:pl-2">
|
||||
<div className="rb:bg-white rb:rounded-xl rb:py-2.5 rb:px-4">
|
||||
<Flex
|
||||
align="center"
|
||||
justify="space-between"
|
||||
className="rb:font-[MiSans-Bold] rb:font-bold rb:cursor-pointer"
|
||||
onClick={() => handleExpand('example')}
|
||||
>
|
||||
{t('memoryExtractionEngine.example')}
|
||||
<div className={clsx("rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/common/arrow_up.svg')]", {
|
||||
'rb:rotate-180': !expandedKeys.includes('example'),
|
||||
'rb:rotate-0': expandedKeys.includes('example'),
|
||||
})}></div>
|
||||
</Flex>
|
||||
|
||||
{expandedKeys.includes('example') &&
|
||||
<div className="rb:text-[14px] rb:text-[#5B6167] rb:font-regular rb:leading-5 rb:mt-2.5 rb:mb-1.5">
|
||||
<Markdown content={t('memoryExtractionEngine.exampleText')} />
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<Form form={form}>
|
||||
<Flex vertical gap={16}>
|
||||
{configList.map((item, index) => (
|
||||
<Card
|
||||
type={item.type}
|
||||
title={t(`memoryExtractionEngine.${item.type}`)}
|
||||
key={index}
|
||||
expanded={expandedKeys.includes(item.type)}
|
||||
handleExpand={handleExpand}
|
||||
>
|
||||
<Flex gap={16} vertical>
|
||||
{item.data.map(vo => (
|
||||
<Flex
|
||||
key={vo.title}
|
||||
vertical
|
||||
gap={10}
|
||||
className="rb:bg-[#F6F6F6] rb:rounded-xl rb:p-3! rb:pt-2.5!"
|
||||
>
|
||||
<Space size={4} className="rb:text-[#212332] rb:font-medium rb:leading-5">
|
||||
{t(`memoryExtractionEngine.${vo.title}`)}
|
||||
<Tooltip title={t(`memoryExtractionEngine.${vo.title}SubTitle`)}>
|
||||
<div className="rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/common/question.svg')]"></div>
|
||||
</Tooltip>
|
||||
</Space>
|
||||
|
||||
{vo.list.map(config => (
|
||||
<div key={config.label} className="rb:bg-white rb:rounded-xl rb:p-3 rb:pr-2.5">
|
||||
{config.control === 'button'
|
||||
? <SwitchFormItem
|
||||
title={t(`memoryExtractionEngine.${config.label}`)}
|
||||
name={config.variableName}
|
||||
desc={<DescWrapper desc={<Desc config={config} />} />}
|
||||
className="rb:mt-6"
|
||||
/>
|
||||
: <>
|
||||
{config.meaning
|
||||
? <Space size={4} className="rb:text-[#212332] rb:font-medium rb:leading-5">
|
||||
{t(`memoryExtractionEngine.${config.label}`)}
|
||||
<Tooltip title={<>{t('memoryExtractionEngine.Meaning')}: {t(`memoryExtractionEngine.${config.meaning}`)}</>}>
|
||||
<div className="rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/common/question.svg')]"></div>
|
||||
</Tooltip>
|
||||
</Space>
|
||||
: <div className="rb:text-[#212332] rb:font-medium rb:leading-5">
|
||||
{t(`memoryExtractionEngine.${config.label}`)}
|
||||
</div>
|
||||
}
|
||||
{config.control !== 'text' && <DescWrapper desc={<Desc config={config} />} />}
|
||||
<Form.Item
|
||||
name={config.variableName}
|
||||
className="rb:mb-0! rb:mt-2!"
|
||||
>
|
||||
<Select
|
||||
disabled={config.variableName === 'iteration_period' && iterationPeriodDisabled}
|
||||
options={config.options ? config.options.map(item => ({ ...item, label: t(`memoryExtractionEngine.${item.label}`) })) : []}
|
||||
/>
|
||||
{config.control === 'select'
|
||||
? <Select
|
||||
disabled={config.variableName === 'iteration_period' && iterationPeriodDisabled}
|
||||
options={config.options ? config.options.map(item => ({ ...item, label: t(`memoryExtractionEngine.${item.label}`) })) : []}
|
||||
/>
|
||||
: config.control === 'slider'
|
||||
? <RbSlider
|
||||
min={config.min || 0}
|
||||
max={config.max || 1}
|
||||
step={config.step || 0.01}
|
||||
isInput={true}
|
||||
prefix={<span className="rb:text-[#5B6167]">{t('emotionEngine.currentValue')}:</span>}
|
||||
inputClassName="rb:w-[155px]!"
|
||||
/>
|
||||
: config.control === 'inputNumber'
|
||||
? <InputNumber min={config.min || 0} style={{ width: '100%' }} placeholder={t('common.pleaseEnter')} />
|
||||
: config.control === 'text'
|
||||
? <Input placeholder={t('common.pleaseEnter')} disabled />
|
||||
: null
|
||||
}
|
||||
</Form.Item>
|
||||
<ConfigDesc config={config} className="rb:-mt-4!" />
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
{config.control === 'slider' &&
|
||||
<>
|
||||
<div className="rb:text-[14px] rb:font-medium rb:leading-5 rb:mt-6 rb:mb-2">
|
||||
-{t(`memoryExtractionEngine.${config.label}`)}
|
||||
</div>
|
||||
<div className="rb:pl-2">
|
||||
<ConfigDesc config={config} className="rb:mb-2.5" />
|
||||
<Form.Item
|
||||
name={config.variableName}
|
||||
>
|
||||
<Slider
|
||||
style={{ margin: '0' }}
|
||||
min={config.min || 0}
|
||||
max={config.max || 1}
|
||||
step={config.step || 0.01}
|
||||
/>
|
||||
</Form.Item>
|
||||
<div className="rb:flex rb:items-center rb:justify-between rb:text-[#5B6167] rb:leading-5 rb:-mt-6.5">
|
||||
{config.min || 0}
|
||||
<span>{t('memoryExtractionEngine.CurrentValue')}: {values?.[config.variableName as keyof ConfigForm]}</span>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
{config.control === 'inputNumber' &&
|
||||
<>
|
||||
<div className="rb:text-[14px] rb:font-medium rb:leading-5 rb:mt-6 rb:mb-2">
|
||||
-{t(`memoryExtractionEngine.${config.label}`)}
|
||||
</div>
|
||||
<div className="rb:pl-2">
|
||||
<Form.Item
|
||||
name={config.variableName}
|
||||
>
|
||||
<InputNumber min={config.min || 0} style={{ width: '100%' }} placeholder={t('common.pleaseEnter')} />
|
||||
</Form.Item>
|
||||
<ConfigDesc config={config} className="rb:-mt-4!" />
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
{config.control === 'text' &&
|
||||
<>
|
||||
<div className="rb:text-[14px] rb:font-medium rb:leading-5 rb:mt-6 rb:mb-2">
|
||||
-{t(`memoryExtractionEngine.${config.label}`)}
|
||||
</div>
|
||||
<div className="rb:pl-2">
|
||||
<Form.Item
|
||||
name={config.variableName}
|
||||
>
|
||||
<Input placeholder={t('common.pleaseEnter')} disabled />
|
||||
</Form.Item>
|
||||
<ConfigDesc config={config} onlyMeaning={true} className="rb:-mt-4!" />
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</Space>
|
||||
</Card>
|
||||
))}
|
||||
</Space>
|
||||
</Form>
|
||||
</>
|
||||
}
|
||||
</div>
|
||||
))}
|
||||
</Flex>
|
||||
))}
|
||||
</Flex>
|
||||
</Card>
|
||||
))}
|
||||
</Flex>
|
||||
</Form>
|
||||
</Flex>
|
||||
</Col>
|
||||
<Col span={10}>
|
||||
<Col span={12}>
|
||||
<Result
|
||||
loading={loading}
|
||||
handleSave={handleSave}
|
||||
|
||||
Reference in New Issue
Block a user