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

feat(web): user memory updated

Browse Source
This commit is contained in:
zhaoying
2026-01-13 10:25:17 +08:00
parent bca4b22453
commit c01bddf5be
11 changed files with 229 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
web/src/api/memory.ts
View File

@@ -204,8 +204,9 @@ export const getConversationMessages = (end_user: string, conversation_id: strin
export const getConversationDetail = (end_user: string, conversation_id: string) => {
return request.get(`/memory/work/${end_user}/detail`, { conversation_id })
}
export const forgetTrigger = (data: { max_merge_batch_size: number; min_days_since_access: number; end_user_id: string;}) => {
return request.post(`/memory/forget/trigger`, data)
}
/*************** end 用户记忆 相关接口 ******************************/
/****************** 记忆管理 相关接口 *******************************/

17
web/src/assets/images/logout_hover.svg Normal file
View File

@@ -0,0 +1,17 @@
<?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="V1.0版" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="应用管理-编排-默认状态" transform="translate(-1262, -24)" stroke="#155EEF">
<g id="返回空间" transform="translate(1262, 24)">
<g id="退出" transform="translate(8, 8) scale(-1, 1) translate(-8, -8)">
<g id="编组-7" transform="translate(2.5, 2)">
<path d="M6,12 L1,12 C0.44771525,12 0,11.5522847 0,11 L0,1 C0,0.44771525 0.44771525,1.11022302e-16 1,0 L6,0 L6,0" id="路径"></path>
<line x1="11" y1="6" x2="3" y2="6" id="路径-6"></line>
<polyline id="路径" points="8 3 11 6 8 9"></polyline>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

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

@@ -1244,6 +1244,10 @@ export const en = {
MemorySummary: 'Long-term Accumulation',
Statement: 'Emotional Memory',
ExtractedEntity: 'Episodic Memory',
positive: 'Positive Emotion',
negative: 'Negative Emotion',
neutral: 'Neutral Emotion',
interactionCountData: 'Interaction Count',
},
space: {
createSpace: 'Create Space',
@@ -2203,6 +2207,7 @@ Memory Bear: After the rebellion, regional warlordism intensified for several re
node_type: 'Node Type',
last_access_time: 'Last Activation Time',
activation_value: 'Current Activation Value',
refreshSuccess: 'Forgetting Execution Successful',
},
episodicDetail: {
title: 'Record every important scene you have truly experienced',

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

@@ -1324,6 +1324,10 @@ export const zh = {
MemorySummary: '长期沉淀',
Statement: '情绪记忆',
ExtractedEntity: '情景记忆',
positive: '正向情绪',
negative: '负向情绪',
neutral: '中性情绪',
interactionCountData: '互动次数',
},
space: {
createSpace: '创建空间',
@@ -2302,6 +2306,7 @@ export const zh = {
node_type: '节点类型',
last_access_time: '最后激活时间',
activation_value: '当前激活值',
refreshSuccess: '遗忘执行成功',
},
episodicDetail: {
title: '记录你真实经历过的每一个重要场景',

14
web/src/views/UserMemoryDetail/components/EmotionLine.tsx
View File

@@ -4,6 +4,7 @@ import ReactEcharts from 'echarts-for-react';
import Empty from '@/components/Empty'
import Loading from '@/components/Empty/Loading'
import type { Emotion } from './GraphDetail'
import { format } from 'echarts';
interface EmotionLineProps {
chartData: Emotion[];
@@ -26,7 +27,7 @@ const EmotionLine: FC<EmotionLineProps> = ({ chartData, loading }) => {
const seriesData = timePoints.map(time => dataMap.get(time) || 0)
return {
name: emotionType,
name: t(`userMemory.${emotionType}`),
type: 'line',
smooth: true,
lineStyle: {
@@ -71,7 +72,7 @@ const EmotionLine: FC<EmotionLineProps> = ({ chartData, loading }) => {
formatter: function(params: any) {
let result = `${params[0].axisValue}<br/>`
params.forEach((param: any) => {
result += `${param.marker}${param.seriesName}: ${param.value}<br/>`
result += `${param.marker}${param.seriesName}: ${param.value}%<br/>`
})
return result
}
@@ -92,7 +93,7 @@ const EmotionLine: FC<EmotionLineProps> = ({ chartData, loading }) => {
},
grid: {
top: 16,
left: 30,
left: 40,
right: 36,
bottom: 48,
// containLabel: false
@@ -103,7 +104,7 @@ const EmotionLine: FC<EmotionLineProps> = ({ chartData, loading }) => {
boundaryGap: false,
axisLabel: {
color: '#A8A9AA',
fontFamily: 'PingFangSC, PingFang SC'
fontFamily: 'PingFangSC, PingFang SC',
},
axisLine: {
show: true,
@@ -130,7 +131,8 @@ const EmotionLine: FC<EmotionLineProps> = ({ chartData, loading }) => {
type: 'value',
axisLabel: {
color: '#A8A9AA',
fontFamily: 'PingFangSC, PingFang SC'
fontFamily: 'PingFangSC, PingFang SC',
formatter: '{value}%'
},
axisLine: {
show: true,
@@ -152,7 +154,7 @@ const EmotionLine: FC<EmotionLineProps> = ({ chartData, loading }) => {
type: 'solid'
}
},
max: 1,
max: 100,
min: 0
},
series: getSeries()

113
web/src/views/UserMemoryDetail/components/ForgetRefreshModal.tsx Normal file
View File

@@ -0,0 +1,113 @@
import { forwardRef, useImperativeHandle, useState } from 'react';
import { useParams } from 'react-router-dom'
import { Form, Slider } from 'antd';
import { useTranslation } from 'react-i18next';
import RbModal from '@/components/RbModal'
import { forgetTrigger } from '@/api/memory'
import type { ForgetRefreshModalRef } from '../pages/ForgetDetail'
interface ForgetRefreshModalProps {
refresh: (flag: boolean) => void;
}
const ForgetRefreshModal = forwardRef<ForgetRefreshModalRef, ForgetRefreshModalProps>(({
refresh
}, ref) => {
const { t } = useTranslation();
const { id } = useParams()
const [visible, setVisible] = useState(false);
const [form] = Form.useForm<{ max_merge_batch_size: number; min_days_since_access: number; }>();
const [loading, setLoading] = useState(false)
const values = Form.useWatch([], form);
// 封装取消方法，添加关闭弹窗逻辑
const handleClose = () => {
setVisible(false);
form.resetFields();
setLoading(false)
};
const handleOpen = () => {
form.resetFields();
setVisible(true);
};
// 封装保存方法，添加提交逻辑
const handleSave = () => {
if(!id) return
form
.validateFields()
.then((values) => {
setLoading(true)
forgetTrigger({
...values,
end_user_id: id
})
.then(() => {
refresh(true)
handleClose()
})
.finally(() => {
setLoading(false)
})
})
.catch((err) => {
console.log('err', err)
});
}
// 暴露给父组件的方法
useImperativeHandle(ref, () => ({
handleOpen,
handleClose
}));
return (
<RbModal
title={t('common.refresh')}
open={visible}
onCancel={handleClose}
okText={t('common.refresh')}
onOk={handleSave}
confirmLoading={loading}
>
<Form
form={form}
layout="vertical"
>
<div className="rb:pl-3">
<div className="rb:text-[14px] rb:font-medium rb:leading-5 rb:mb-2">
{t(`forgettingEngine.max_merge_batch_size`)}
</div>
<Form.Item
name="max_merge_batch_size"
>
<Slider tooltip={{ open: false }} max={1000} min={1} step={1} style={{ margin: '0' }} />
</Form.Item>
<div className="rb:flex rb:text-[12px] rb:items-center rb:justify-between rb:text-[#5B6167] rb:leading-5 rb:-mt-6.5">
<span>{t(`forgettingEngine.range`)}: {[1, 1000]?.join('-')}</span>
{t('forgettingEngine.CurrentValue')}: {values?.min_days_since_access || 0}
</div>
</div>
<div className="rb:pl-3 rb:mt-4">
<div className="rb:text-[14px] rb:font-medium rb:leading-5 rb:mb-2">
{t(`forgettingEngine.min_days_since_access`)}
</div>
<Form.Item
name="min_days_since_access"
>
<Slider tooltip={{ open: false }} max={365} min={1} step={1} style={{ margin: '0' }} />
</Form.Item>
<div className="rb:flex rb:text-[12px] rb:items-center rb:justify-between rb:text-[#5B6167] rb:leading-5 rb:-mt-6.5">
<span>{t(`forgettingEngine.range`)}: {[1, 365]?.join('-')}</span>
{t('forgettingEngine.CurrentValue')}: {values?.min_days_since_access || 0}
</div>
</div>
</Form>
</RbModal>
);
});
export default ForgetRefreshModal;

17
web/src/views/UserMemoryDetail/components/InteractionBar.tsx
View File

@@ -1,4 +1,4 @@
import { type FC } from 'react'
import { type FC, useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import ReactEcharts from 'echarts-for-react'
import Empty from '@/components/Empty'
@@ -14,11 +14,13 @@ const Colors = ['#155EEF', '#369F21', '#FF5D34']
const InteractionBar: FC<InteractionBarProps> = ({ chartData, loading }) => {
const { t } = useTranslation()
const series = [{
name: 'Interaction Count',
type: 'bar',
data: chartData.map(item => item.count)
}]
const series = useMemo(() => {
return [{
name: t('userMemory.interactionCountData'),
type: 'bar',
data: chartData.map(item => item.count)
}]
}, [chartData, t])
return (
<>
@@ -80,6 +82,7 @@ const InteractionBar: FC<InteractionBarProps> = ({ chartData, loading }) => {
},
yAxis: {
type: 'value',
minInterval: 1,
axisLabel: {
color: '#A8A9AA',
fontFamily: 'PingFangSC, PingFang SC'
@@ -104,8 +107,6 @@ const InteractionBar: FC<InteractionBarProps> = ({ chartData, loading }) => {
type: 'solid'
}
},
max: 1,
min: 0
},
series
}}

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

@@ -1,20 +1,22 @@
import { type FC, type ReactNode } from 'react';
import { useNavigate } from 'react-router-dom';
import { Layout } from 'antd';
import { Layout, Space, Button } from 'antd';
import { useTranslation } from 'react-i18next';
import logoutIcon from '@/assets/images/logout.svg'
import logoutIcon from '@/assets/images/logout_hover.svg'
const { Header } = Layout;
interface ConfigHeaderProps {
name?: string;
operation?: ReactNode;
source?: 'detail' | 'node'
source?: 'detail' | 'node';
extra?: ReactNode;
}
const PageHeader: FC<ConfigHeaderProps> = ({
name,
operation,
source = 'detail'
source = 'detail',
extra
}) => {
const { t } = useTranslation();
const navigate = useNavigate();
@@ -33,10 +35,13 @@ const PageHeader: FC<ConfigHeaderProps> = ({
{operation}
</div>
<div className="rb:h-8 rb:flex rb:items-center rb:justify-end rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:cursor-pointer" onClick={goBack}>
<img src={logoutIcon} className="rb:mr-2 rb:w-4 rb:h-4" />
{t('common.return')}
</div>
<Space size={12}>
<Button type="primary" ghost className="rb:group rb:h-6! rb:px-2!" onClick={goBack}>
<img src={logoutIcon} className="rb:w-4 rb:h-4" />
{t('common.return')}
</Button>
{extra}
</Space>
</Header>
);
};

15
web/src/views/UserMemoryDetail/components/Timeline.tsx
View File

@@ -9,6 +9,7 @@ import {
} from '@/api/memory'
import { formatDateTime } from '@/utils/format';
import Empty from '@/components/Empty'
import Tag from '@/components/Tag'
interface TimelineItem {
id: string;
@@ -18,6 +19,9 @@ interface TimelineItem {
summary: string;
storage_type: number;
created_time: string | number;
domain: string;
topic: string;
keywords: string[]
}
const KEYS = {
@@ -68,9 +72,14 @@ const Timeline: FC = () => {
{formatDateTime(vo.created_time)}
{index !== data.length - 1 && <Divider type="vertical" className="rb:flex-1 rb:w-px rb:border-[#155EEF]!" />}
</div>
<div className="rb:flex rb:justify-between rb:flex-1 rb:mb-4">
<div className="rb:w-150 rb:leading-5">{vo.summary}</div>
<div className="rb:text-[#5B6167] rb:font-medium">{t(`perceptualDetail.${perceptual_type[vo.perceptual_type]}`)}</div>
<div className="rb:flex-1 rb:pb-4">
<div className="rb:flex rb:justify-between">
<div className="rb:w-150 rb:leading-5 rb:font-medium">{vo.summary}</div>
<div className="rb:text-[#5B6167] rb:font-medium rb:flex-1 rb:text-right">{t(`perceptualDetail.${perceptual_type[vo.perceptual_type]}`)}</div>
</div>
<div className="rb:text-[#5B6167] rb:leading-5 rb:mt-2">{[vo.domain, vo.topic].join(' | ')}</div>
<Space size={8} className="rb:mt-2">{vo.keywords.map(tag => <Tag>{tag}</Tag>)}</Space>
</div>
</div>
))}

33
web/src/views/UserMemoryDetail/pages/ForgetDetail.tsx
View File

@@ -1,7 +1,7 @@
import { type FC, useEffect, useState, useMemo } from 'react'
import { useEffect, useState, useMemo, forwardRef, useImperativeHandle, useRef } from 'react'
import { useTranslation } from 'react-i18next'
import { useParams } from 'react-router-dom'
import { Row, Col, Progress } from 'antd'
import { Row, Col, Progress, App } from 'antd'
import RbCard from '@/components/RbCard/Card'
import {
getForgetStats,
@@ -12,6 +12,7 @@ import RecentTrendsLineCard from '../components/RecentTrendsLineCard'
import Table from '@/components/Table'
import { formatDateTime } from '@/utils/format'
import StatusTag from '@/components/StatusTag'
import ForgetRefreshModal from '../components/ForgetRefreshModal'
const statusTagColors: Record<string, 'success' | 'purple' | 'default' | 'warning' | 'error' | 'lightBlue'> = {
statement: 'success',
@@ -20,24 +21,33 @@ const statusTagColors: Record<string, 'success' | 'purple' | 'default' | 'warnin
chunk: 'warning',
}
const ForgetDetail: FC = () => {
export interface ForgetRefreshModalRef {
handleOpen: () => void;
}
const ForgetDetail = forwardRef((_props, ref) => {
const { t } = useTranslation()
const { id } = useParams()
const { message } = App.useApp()
const [loading, setLoading] = useState<boolean>(false)
const [data, setData] = useState<ForgetData>({} as ForgetData)
const forgetRefreshModalRef = useRef<ForgetRefreshModalRef>(null)
useEffect(() => {
if (!id) return
getData()
}, [id])
const getData = () => {
const getData = (flag: boolean = false) => {
if (!id) return
setLoading(true)
getForgetStats(id).then((res) => {
const response = res as ForgetData
setData(response)
setLoading(false)
if (flag) {
message.success(t('forgetDetail.refreshSuccess'))
}
})
.finally(() => {
setLoading(false)
@@ -67,6 +77,14 @@ const ForgetDetail: FC = () => {
}
}, [data.recent_trends])
const handleRefresh = () => {
forgetRefreshModalRef.current?.handleOpen()
}
useImperativeHandle(ref, () => ({
handleRefresh
}));
return (
<div className="rb:h-full rb:max-w-266 rb:mx-auto">
<div className="rb:text-[#5B6167] rb:leading-5 rb:mt-3">{t('forgetDetail.title')}</div>
@@ -152,7 +170,12 @@ const ForgetDetail: FC = () => {
]}
pagination={false}
/>
<ForgetRefreshModal
ref={forgetRefreshModalRef}
refresh={getData}
/>
</div>
)
}
})
export default ForgetDetail

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

@@ -1,7 +1,7 @@
import { type FC, useEffect, useState, useMemo } from 'react'
import { type FC, useEffect, useState, useMemo, useRef } from 'react'
import { useParams, useNavigate } from 'react-router-dom'
import { useTranslation } from 'react-i18next'
import { Dropdown } from 'antd'
import { Dropdown, Space, Button } from 'antd'
import PageHeader from '../components/PageHeader'
import StatementDetail from './StatementDetail'
@@ -15,12 +15,15 @@ import WorkingDetail from './WorkingDetail'
import {
getEndUserProfile,
} from '@/api/memory'
import refreshIcon from '@/assets/images/refresh_hover.svg'
const Detail: FC = () => {
const { t } = useTranslation()
const { id, type } = useParams()
const navigate = useNavigate()
const [name, setName] = useState<string>('')
const forgetDetailRef = useRef<{ handleRefresh: () => void }>(null)
useEffect(() => {
if (!id) return
getData()
@@ -40,6 +43,9 @@ const Detail: FC = () => {
const onClick = ({ key }: { key: string }) => {
navigate(`/user-memory/detail/${id}/${key}`, { replace: true })
}
const handleRefresh = () => {
forgetDetailRef.current?.handleRefresh()
}
return (
<div className="rb:h-full rb:w-full">
@@ -49,17 +55,22 @@ const Detail: FC = () => {
operation={
<Dropdown menu={{ items, onClick, selectedKeys: type ? [type] : [] }}>
<div className="rb:cursor-pointer rb:group rb:flex rb:items-center rb:gap-1">
- {type ? t(`userMemory.${type}`) : ''}
- {type ? t(`userMemory.${type}`) : ''}
<div
className="rb:w-5 rb:h-5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/userMemory/up_border.svg')] rb:transform-[rotate(180deg)] rb:group-hover:transform-[rotate(0deg)]"
></div>
</div>
</div>
</Dropdown>
}
extra={type === 'FORGETTING_MANAGEMENT' &&
<Button type="primary" ghost className="rb:group rb:h-6! rb:px-2!" onClick={handleRefresh}>
<img src={refreshIcon} className="rb:w-4 rb:h-4" />
{t('common.refresh')}
</Button>}
/>
<div className="rb:h-[calc(100vh-64px)] rb:overflow-y-auto rb:py-3 rb:px-4">
{type === 'EMOTIONAL_MEMORY' && <StatementDetail />}
{type === 'FORGETTING_MANAGEMENT' && <ForgetDetail />}
{type === 'FORGETTING_MANAGEMENT' && <ForgetDetail ref={forgetDetailRef} />}
{type === 'IMPLICIT_MEMORY' && <ImplicitDetail />}
{type === 'SHORT_TERM_MEMORY' && <ShortTermDetail />}
{type === 'PERCEPTUAL_MEMORY' && <PerceptualDetail />}