feat(web): user memory updated

web/src/views/UserMemoryDetail/pages/ForgetDetail.tsx

@@ -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

web/src/views/UserMemoryDetail/pages/index.tsx

@@ -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 />}